Skip to content

Commit

Permalink
feat(Toast): rework stories, add missing examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Dec 9, 2023
1 parent 660a1bc commit 12105e5
Show file tree
Hide file tree
Showing 5 changed files with 587 additions and 85 deletions.
4 changes: 2 additions & 2 deletions src/plugins/components/toast/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,12 +165,12 @@ export default plugin.withOptions(
{},
//Icon:inner
[`.${prefix}toast-icon`]: {
[`@apply text-${config.color.white.icon.inner.color.light} dark:text-${config.color.white.icon.inner.color.dark}`]:
[`@apply text-${config.color.danger.icon.inner.color.light} dark:text-${config.color.danger.icon.inner.color.dark}`]:
{},
},
//Icon:outer
[`.${prefix}toast-icon-block`]: {
[`@apply bg-${config.color.white.icon.outer.background.light} dark:bg-${config.color.white.icon.outer.background.dark}`]:
[`@apply bg-${config.color.danger.icon.outer.background.light} dark:bg-${config.color.danger.icon.outer.background.dark}`]:
{},
},
},
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/components/toast/toast.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const Toast = ({
${icon}
`
: ''}
<div>
<div class=${[icon && !iconBlock && 'ms-2'].filter(Boolean).join(' ')}>
<h4 class="nui-toast-title">${title}</h4>
<p class="nui-toast-subtitle">${text}</p>
</div>
Expand Down
180 changes: 108 additions & 72 deletions src/plugins/components/toast/toast.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,92 +18,71 @@ Toasts allow you to display important information popups users should see.

<br />

### Rounded: none
### Contrast

Toasts can have different shapes. The following example shows the straight shape.
Toasts can have different contrasts. The type of contrast defines the main background shade.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.Straight} />
</div>

<br />

### Rounded: sm

Toasts can have different shapes. The following example shows the rounded shape.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.Rounded} />
</div>

<br />

### Rounded: md

Toasts can have different shapes. The following example shows the smooth shape.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.Smooth} />
</div>

<br />

### Rounded: lg

Toasts can have different shapes. The following example shows the curved shape.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.Curved} />
</div>

<br />

### Color: primary

Toasts can have different colors. The following example shows the primary color.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.Primary} />
</div>

<br />

### Color: info

Toasts can have different colors. The following example shows the info color.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.Info} />
</div>

<br />

### Color: success

Toasts can have different colors. The following example shows the success color.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.Success} />
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
<div>
<Story of={ToastStories.White} />
</div>
<div>
<Story of={ToastStories.Contrast} />
</div>
</div>
</div>

<br />

### Color: warning
### Rounded

Toasts can have different colors. The following example shows the warning color.
Toasts can have different border radiuses. The following example shows the available variations.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.Warning} />
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
<div>
<Story of={ToastStories.Straight} />
</div>
<div>
<Story of={ToastStories.Rounded} />
</div>
<div>
<Story of={ToastStories.Smooth} />
</div>
<div>
<Story of={ToastStories.Curved} />
</div>
</div>
</div>

<br />

### Color: danger
### Colors

Toasts can have different colors. The following example shows the danger color.
Toasts can have different colors. The following example shows the available colors.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.Danger} />
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
<div>
<Story of={ToastStories.Smooth} />
</div>
<div>
<Story of={ToastStories.Primary} />
</div>
<div>
<Story of={ToastStories.Info} />
</div>
<div>
<Story of={ToastStories.Success} />
</div>
<div>
<Story of={ToastStories.Warning} />
</div>
<div>
<Story of={ToastStories.Danger} />
</div>
</div>
</div>

<br />
Expand All @@ -113,7 +92,26 @@ Toasts can have different colors. The following example shows the danger color.
Toasts can be borderless and display a light shadow.

<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.SlotIconBlockBorderless} />
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
<div>
<Story of={ToastStories.SlotIconBlockBorderlessDefault} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockBorderlessPrimary} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockBorderlessInfo} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockBorderlessSuccess} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockBorderlessWarning} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockBorderlessDanger} />
</div>
</div>
</div>

<br />
Expand All @@ -126,7 +124,26 @@ Toasts can be borderless and display a light shadow.
Toasts have an icon slot that you can use to display an icon.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.SlotIcon} />
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
<div>
<Story of={ToastStories.SlotIconDefault} />
</div>
<div>
<Story of={ToastStories.SlotIconPrimary} />
</div>
<div>
<Story of={ToastStories.SlotIconInfo} />
</div>
<div>
<Story of={ToastStories.SlotIconSuccess} />
</div>
<div>
<Story of={ToastStories.SlotIconWarning} />
</div>
<div>
<Story of={ToastStories.SlotIconDanger} />
</div>
</div>
</div>

<br />
Expand All @@ -136,7 +153,26 @@ Toasts have an icon slot that you can use to display an icon.
Toasts have an icon slot that you can use to display an icon block.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ToastStories.SlotIconBlock} />
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
<div>
<Story of={ToastStories.SlotIconBlockDefault} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockPrimary} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockInfo} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockSuccess} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockWarning} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockDanger} />
</div>
</div>
</div>

<br />
Expand Down
Loading

0 comments on commit 12105e5

Please sign in to comment.