Skip to content

Commit

Permalink
feat: improve message demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Dec 10, 2023
1 parent ac449df commit 4a71b66
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 132 deletions.
154 changes: 40 additions & 114 deletions src/plugins/components/message/message.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,122 +18,36 @@ Messages allow you to display important information users should see.

<br />

### Rounded: none
### Rounded

Messages can have different colors and shapes. The following example shows sizes for the straight shape.
Messages can have different colors and shapes. The following example shows the available shape variations.

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

<br />

### Rounded: sm
### Types

Messages can have different colors and shapes. The following example shows sizes for the rounded shape.

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

<br />

### Rounded: md

Messages can have different colors and shapes. The following example shows sizes for the smooth shape.

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

<br />

### Rounded: lg

Messages can have different colors and shapes. The following example shows sizes for the curved shape.

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

<br />

### Rounded: full

Messages can have different colors and shapes. The following example shows sizes for the full shape.

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

<br />

### Type: default

Messages can have different types. The following example shows the default type.

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

<br />

### Type: muted

Messages can have different types. The following example shows the muted type.
Messages can have different types. The following example shows the available types.

<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={MessageStories.TypeMuted} />
</div>

<br />

### Type: primary

Messages can have different types. The following example shows the primary type.

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

<br />

### Type: info

Messages can have different types. The following example shows the info type.

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

<br />

### Type: success

Messages can have different types. The following example shows the success type.

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

<br />

### Type: warning

Messages can have different types. The following example shows the warning type.

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

<br />

### Type: danger

Messages can have different types. The following example shows the danger type.

<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={MessageStories.TypeDanger} />
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl">
<Story of={MessageStories.TypeDefault} />
<Story of={MessageStories.TypeMuted} />
<Story of={MessageStories.TypePrimary} />
<Story of={MessageStories.TypeInfo} />
<Story of={MessageStories.TypeSuccess} />
<Story of={MessageStories.TypeWarning} />
<Story of={MessageStories.TypeDanger} />
</div>
</div>

<br />
Expand All @@ -145,10 +59,16 @@ Messages can have different types. The following example shows the danger type.

Messages can have a close button.

<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={MessageStories.ClosableDefault} />
<Story of={MessageStories.ClosablePrimary} />
<Story of={MessageStories.ClosableInfo} />
<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">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl">
<Story of={MessageStories.ClosableDefault} />
<Story of={MessageStories.ClosableMuted} />
<Story of={MessageStories.ClosablePrimary} />
<Story of={MessageStories.ClosableInfo} />
<Story of={MessageStories.ClosableSuccess} />
<Story of={MessageStories.ClosableWarning} />
<Story of={MessageStories.ClosableDanger} />
</div>
</div>

<br />
Expand All @@ -160,10 +80,16 @@ Messages can have a close button.

Messages have an icon slot you can use to display an icon.

<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={MessageStories.SlotIconInfo} />
<Story of={MessageStories.SlotIconSuccess} />
<Story of={MessageStories.SlotIconWarning} />
<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">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl">
<Story of={MessageStories.SlotIconDefault} />
<Story of={MessageStories.SlotIconMuted} />
<Story of={MessageStories.SlotIconPrimary} />
<Story of={MessageStories.SlotIconInfo} />
<Story of={MessageStories.SlotIconSuccess} />
<Story of={MessageStories.SlotIconWarning} />
<Story of={MessageStories.SlotIconDanger} />
</div>
</div>

<br />
Expand Down
Loading

0 comments on commit 4a71b66

Please sign in to comment.