Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: use CodeExampleTabs from badge to button-group #185

Merged
merged 6 commits into from
Mar 7, 2024
Merged

docs: use CodeExampleTabs from badge to button-group #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
140afec
docs: use CodeExampleTabs from badge to button-group
Mar 4, 2024
3792fac
docs: use CodeExampleTabs from badge to button-group
Mar 5, 2024
ae482ff
docs: use CodeExampleTabs from badge to button-group
Mar 5, 2024
8c8cdde
docs: use CodeExampleTabs from badge to button-group
Mar 6, 2024
1d5b25b
docs: use CodeExampleTabs from badge to button-group
Mar 6, 2024
d00532e
docs: use CodeExampleTabs from badge to button-group
Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/dialtone-documentation/docs/.vuepress/baseComponents/CodeWellHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<aside class="d-bar8 d-of-hidden">
<aside class="d-bar8">
<header :class="classes">
<slot />
</header>
Expand Down
2 changes: 1 addition & 1 deletion apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ code {
code[class*="language-"],
pre[class*="language-"] {
margin: 0;
color: var(--dt-color-black-400);
color: var(--dt-color-foreground-secondary);
font-size: var(--dt-font-size-100);
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
line-height: var(--dt-font-line-height-400);
Expand Down
88 changes: 44 additions & 44 deletions apps/dialtone-documentation/docs/components/avatar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,15 +76,15 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
<code-example-tabs
htmlCode='
<div class="d-avatar d-avatar--{$size}">
<div class="d-avatar__canvas">
<span class="d-avatar__icon">
<svg>...</svg>
</span>
</div>
<div class="d-avatar__canvas">
<span class="d-avatar__icon">
<svg>...</svg>
</span>
</div>
</div>'
vueCode='
<dt-avatar
icon-name="person"
icon-name="person"
/>
'
showHtmlWarning />
Expand All @@ -100,16 +100,16 @@ showHtmlWarning />
<code-example-tabs
htmlCode='
<div class="d-avatar d-avatar--{$size} d-avatar--{$color}">
<div class="d-avatar__canvas">
<span class="d-avatar__initials">DP</span>
</div>
<div class="d-avatar__canvas">
<span class="d-avatar__initials">DP</span>
</div>
</div>
'
vueCode='
<!-- colors 100 to 1800 are valid -->
<dt-avatar
full-name="DP"
color="100"
full-name="DP"
color="100"
/>
'
showHtmlWarning />
Expand All @@ -123,9 +123,9 @@ showHtmlWarning />
<code-example-tabs
htmlCode='
<div class="d-avatar d-avatar--{$size}">
<div class="d-avatar__canvas">
<img class="d-avatar__image" src="/path/to/image" alt="avatar user" />
</div>
<div class="d-avatar__canvas">
<img class="d-avatar__image" src="/path/to/image" alt="avatar user" />
</div>
</div>
'
vueCode='
Expand All @@ -144,29 +144,29 @@ showHtmlWarning />
<code-example-tabs
htmlCode='
<div class="d-avatar d-avatar--xs">
<div class="d-avatar__canvas">
<svg>...</svg>
</div>
<div class="d-avatar__canvas">
<svg>...</svg>
</div>
</div>
<div class="d-avatar d-avatar--sm">
<div class="d-avatar__canvas">
<svg>...</svg>
</div>
<div class="d-avatar__canvas">
<svg>...</svg>
</div>
</div>
<div class="d-avatar d-avatar--md">
<div class="d-avatar__canvas">
<svg>...</svg>
</div>
<div class="d-avatar__canvas">
<svg>...</svg>
</div>
</div>
<div class="d-avatar d-avatar--lg">
<div class="d-avatar__canvas">
<svg>...</svg>
</div>
<div class="d-avatar__canvas">
<svg>...</svg>
</div>
</div>
<div class="d-avatar d-avatar--xl">
<div class="d-avatar__canvas">
<svg>...</svg>
</div>
<div class="d-avatar__canvas">
<svg>...</svg>
</div>
</div>
'
vueCode='
Expand All @@ -190,16 +190,16 @@ showHtmlWarning />
<code-example-tabs
htmlCode='
<div class="d-avatar d-avatar--group">
<div class="d-avatar__canvas">
<img class="d-avatar__image" src="/assets/images/person.png" alt="Person Avatar"/>
</div>
<span class="d-avatar__count"><span class="d-avatar__count-number">12</span></span>
<div class="d-avatar__canvas">
<img class="d-avatar__image" src="/assets/images/person.png" alt="Person Avatar"/>
</div>
<span class="d-avatar__count"><span class="d-avatar__count-number">12</span></span>
</div>
<div class="d-avatar d-avatar--group">
<div class="d-avatar__canvas">
<img class="d-avatar__image" src="/assets/images/person.png" alt="Person Avatar"/>
</div>
<span class="d-avatar__count"><span class="d-avatar__count-number">1</span></span>
<div class="d-avatar__canvas">
<img class="d-avatar__image" src="/assets/images/person.png" alt="Person Avatar"/>
</div>
<span class="d-avatar__count"><span class="d-avatar__count-number">1</span></span>
</div>
'
vueCode='
Expand Down Expand Up @@ -232,14 +232,14 @@ Positions the [Presence](components/presence.html) component at each size.
<code-example-tabs
htmlCode='
<div class="d-avatar d-avatar--{$size)">
<div class="d-avatar__canvas">
...
</div>
<div class="d-avatar__presence">
<div class="d-presence d-avatar__presence d-avatar__presence--md"><!---->
<div class="d-presence__inner d-presence__inner--{$status}" />
</div>
<div class="d-avatar__canvas">
...
</div>
<div class="d-avatar__presence">
<div class="d-presence d-avatar__presence d-avatar__presence--md"><!---->
<div class="d-presence__inner d-presence__inner--{$status}" />
</div>
</div>
</div>
'
vueCode='
Expand Down
84 changes: 70 additions & 14 deletions apps/dialtone-documentation/docs/components/badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,19 +48,27 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
<span class="d-badge"><span class="d-badge__label">Label</span></span>
</code-well-header>

```html
<span class="d-badge"><span class="d-badge__label">Label</span></span>
```
<code-example-tabs
htmlCode='
<span class="d-badge"><span class="d-badge__label">Label</span></span>'
vueCode='
<dt-badge type="default" kind="label" text="Label" />
'
showHtmlWarning />

### Count

<code-well-header bgclass="d-bgc-primary">
<span class="d-badge d-badge--count"><span class="d-badge__label">1</span></span>
</code-well-header>

```html
<span class="d-badge d-badge--count"><span class="d-badge__label">1</span></span>
```
<code-example-tabs
htmlCode='
<span class="d-badge d-badge--count"><span class="d-badge__label">1</span></span>'
vueCode='
<dt-badge type="default" kind="count" default="1" />
'
showHtmlWarning />

## Type

Expand Down Expand Up @@ -150,7 +158,8 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
</tbody>
</table>

```html
<code-example-tabs
htmlCode='
<span class="d-badge"><span class="d-badge__label">Label</span></span>
<span class="d-badge d-badge--info"><span class="d-badge__label">Label</span></span>
<span class="d-badge d-badge--success"><span class="d-badge__label">Label</span></span>
Expand All @@ -163,14 +172,29 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
</span>
<span class="d-badge__label">Label</span>
</span>

<span class="d-badge d-badge--count"><span class="d-badge__label">1</span></span>
<span class="d-badge d-badge--count d-badge--info"><span class="d-badge__label">2</span></span>
<span class="d-badge d-badge--count d-badge--success"><span class="d-badge__label">3</span></span>
<span class="d-badge d-badge--count d-badge--warning"><span class="d-badge__label">4</span></span>
<span class="d-badge d-badge--count d-badge--critical"><span class="d-badge__label">5</span></span>
<span class="d-badge d-badge--count d-badge--bulletin"><span class="d-badge__label">6</span></span>
```
'
vueCode='
<dt-badge type="default" kind="label" text="Label" />
<dt-badge type="info" kind="label" text="Label" />
<dt-badge type="success" kind="label" text="Label" />
<dt-badge type="warning" kind="label" text="Label" />
<dt-badge type="critical" kind="label" text="Label" />
<dt-badge type="bulletin" kind="label" text="Label" />
<dt-badge type="ai" text="Label" kind="label" icon-left="dialpad-ai" />
<dt-badge type="default" text="1" kind="count" />
<dt-badge type="info" text="1" kind="count" />
<dt-badge type="success" text="1" kind="count" />
<dt-badge type="warning" text="1" kind="count" />
<dt-badge type="critical" text="1" kind="count" />
<dt-badge type="bulletin" text="1" kind="count" />
'
showHtmlWarning />

## Icon

Expand All @@ -191,7 +215,8 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
</dt-stack>
</code-well-header>

```html
<code-example-tabs
htmlCode='
<span class="d-badge">
<span class="d-badge__icon-left">
<dt-icon name="lightning-bolt" size="200" />
Expand All @@ -205,14 +230,19 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
<dt-icon name="lightning-bolt" size="200" />
</span>
</span>
```
'
vueCode='
<dt-badge type="default" text="Label" kind="label" icon-left="lightning-bolt"/>
<dt-badge type="default" text="Label" kind="label" icon-right="lightning-bolt"/>
'
showHtmlWarning />

## Decorative

Decorative badges label and classify items for quick recognition.

<code-well-header bgclass="d-bgc-primary">
<dt-stack direction="row" gap="500">
<dt-stack direction="row" gap="500" class="d-ai-baseline">
<dt-stack gap="500">
<span class="d-label-compact">Black</span>
<span class="d-badge d-badge--decorate-black-400"><span class="d-badge__decorative"></span><span class="d-badge__label">Label</span></span>
Expand Down Expand Up @@ -259,12 +289,38 @@ Decorative badges label and classify items for quick recognition.
</dt-stack>
</code-well-header>

```html
<code-example-tabs
htmlCode='
<span class="d-badge d-badge--decorate-{$color}">
<span class="d-badge__decorative"></span>
<span class="d-badge__label">Label</span>
</span>
```
'
iropolo marked this conversation as resolved.
Show resolved Hide resolved
vueCode='
<dt-badge text="Label" decoration="black-400" />
<dt-badge text="Label" decoration="black-500" />
<dt-badge text="Label" decoration="black-900" />
<dt-badge text="Label" decoration="red-200" />
<dt-badge text="Label" decoration="red-300" />
<dt-badge text="Label" decoration="red-400" />
<dt-badge text="Label" decoration="purple-200" />
<dt-badge text="Label" decoration="purple-300" />
<dt-badge text="Label" decoration="purple-400" />
<dt-badge text="Label" decoration="purple-500" />
<dt-badge text="Label" decoration="blue-200" />
<dt-badge text="Label" decoration="blue-300" />
<dt-badge text="Label" decoration="blue-400" />
<dt-badge text="Label" decoration="green-300" />
<dt-badge text="Label" decoration="green-400" />
<dt-badge text="Label" decoration="green-500" />
<dt-badge text="Label" decoration="gold-300" />
<dt-badge text="Label" decoration="gold-400" />
<dt-badge text="Label" decoration="gold-500" />
<dt-badge text="Label" decoration="magenta-200" />
<dt-badge text="Label" decoration="magenta-300" />
<dt-badge text="Label" decoration="magenta-400" />
'
showHtmlWarning />

<dialtone-usage>
<template #do>
Expand Down
18 changes: 15 additions & 3 deletions apps/dialtone-documentation/docs/components/banner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,22 +47,34 @@ Banners are a type of notice and so you can use the following [Notice](notice.md
Message body
</dt-banner>

```html
<code-example-tabs
htmlCode='
<aside class="d-banner d-banner--base" role="alert" aria-hidden="false">
<div class="d-banner__dialog" role="alertdialog" aria-labelledy="info-alert-title" aria-describedby="info-alert-desc">
<div class="d-notice__icon">...</div>
<div class="d-notice__content">
<h2 class="d-notice__title" id="info-alert-title">...</h2>
<p class="d-notice__message" id="info-alert-desc">...</p>
</div>
<div class="d-notice__actions">...</div>
<div class="d-notice__actions">...</div>
</aside>

<aside class="d-banner d-banner--error" role="alert" aria-hidden="false">...</aside>
<aside class="d-banner d-banner--info" role="alert" aria-hidden="false">...</aside>
<aside class="d-banner d-banner--success" role="alert" aria-hidden="false">...</aside>
<aside class="d-banner d-banner--warning" role="alert" aria-hidden="false">...</aside>
```
'
vueCode='
<dt-banner kind="base" title="Optional banner title"> Message body </dt-banner>
<dt-banner kind="error" title="Optional banner title"> Message body </dt-banner>
<dt-banner kind="info" title="Optional banner title"> Message body </dt-banner>
<dt-banner kind="success" title="Optional banner title"> Message body </dt-banner>
<dt-banner kind="warning" title="Optional banner title"> Message body </dt-banner>
<dt-banner background-image="{$background-image}" background-size="contain"> Message body </dt-banner>
<dt-banner pinned="true" kind="warning" title="Optional banner title"> Message body </dt-banner>
<dt-banner important="true" kind="warning" title="Optional banner title"> Message body </dt-banner>
'
showHtmlWarning />

## Vue API

Expand Down
Loading
Loading