Skip to content

Commit

Permalink
feat: improve card 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 3761835 commit 0a2f6fe
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 89 deletions.
108 changes: 21 additions & 87 deletions src/plugins/components/card/card.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,92 +18,22 @@ Cards play an important role in page content structuration. Use them to wrap you

<br />

### Color: white

Cards can have different colors. The below example shows an example of the white color.

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

<br />

### Color: white contrast

Cards can have different colors. The below example shows an example of the white contrast color, which is shown darker in dark mode.

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

<br />

### Color: muted

Cards can have different colors. The below example shows an example of the muted color.

<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
<Story of={CardStories.ColorMuted} />
</div>

<br />

### Color: muted contrast

Cards can have different colors. The below example shows an example of the muted contrast color, which is shown darker in dark mode.

<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
<Story of={CardStories.ColorMutedContrast} />
</div>

<br />

### Color: primary

Cards can have different colors. The below example shows an example of the primary color.

<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
<Story of={CardStories.ColorPrimary} />
</div>

<br />

### Color: info

Cards can have different colors. The below example shows an example of the info color.

<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
<Story of={CardStories.ColorInfo} />
</div>

<br />

### Color: success

Cards can have different colors. The below example shows an example of the success color.

<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
<Story of={CardStories.ColorSuccess} />
</div>

<br />

### Color: warning

Cards can have different colors. The below example shows an example of the warning color.

<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
<Story of={CardStories.ColorWarning} />
</div>

<br />

### Color: danger

Cards can have different colors. The below example shows an example of the danger color.

<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
<Story of={CardStories.ColorDanger} />
### Colors

Cards can have different colors. The below example shows all the available colors.

<div className="bg-white dark:bg-slate-900 border border-muted-200 dark:border-muted-800 p-6 rounded-sm">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
<Story of={CardStories.ColorWhite} />
<Story of={CardStories.ColorWhiteContrast} />
<Story of={CardStories.ColorMuted} />
<Story of={CardStories.ColorMutedContrast} />
<Story of={CardStories.ColorPrimary} />
<Story of={CardStories.ColorInfo} />
<Story of={CardStories.ColorSuccess} />
<Story of={CardStories.ColorWarning} />
<Story of={CardStories.ColorDanger} />
</div>
</div>

<br />
Expand Down Expand Up @@ -136,7 +66,11 @@ Cards can have a box shadow. The below example shows a hover shadow.
Cards have a default slot that serves as wrapper for their inner content.

<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={CardStories.Slot} />
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
<Story of={CardStories.Slot} />
<Story of={CardStories.Slot2} />
<Story of={CardStories.Slot3} />
</div>
</div>

<br />
Expand Down
66 changes: 64 additions & 2 deletions src/plugins/components/card/card.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ export const Slot: Story = {
${Avatar({
src: 'https://apollux.cssninja.io/img/avatars/2.svg',
srcDark: 'https://apollux.cssninja.io/img/avatars/2.svg',
size: 'md',
size: 'sm',
})}
<div>
<h6
Expand All @@ -351,7 +351,69 @@ export const Slot: Story = {
</div>
</div>
`,
style: 'padding: 1.5rem; width: 100%; min-width: 340px; max-width: 340px;',
style: 'padding: 1.25rem; width: 100%;',
},
}

export const Slot2: Story = {
name: 'Slot: default',
args: {
// set default values used for UI preview
color: 'white',
elevatedHover: true,
children: html`
<div class="flex items-center gap-2">
${Avatar({
src: 'https://apollux.cssninja.io/img/avatars/15.svg',
srcDark: 'https://apollux.cssninja.io/img/avatars/15.svg',
size: 'sm',
})}
<div>
<h6
class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
>
Josh Meyers
</h6>
<p
class="nui-paragraph nui-paragraph-xs text-muted-500 dark:text-muted-400"
>
Software Engineer
</p>
</div>
</div>
`,
style: 'padding: 1.25rem; width: 100%;',
},
}

export const Slot3: Story = {
name: 'Slot: default',
args: {
// set default values used for UI preview
color: 'white',
elevatedHover: true,
children: html`
<div class="flex items-center gap-2">
${Avatar({
src: 'https://apollux.cssninja.io/img/avatars/10.svg',
srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg',
size: 'sm',
})}
<div>
<h6
class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
>
Kendra Wilson
</h6>
<p
class="nui-paragraph nui-paragraph-xs text-muted-500 dark:text-muted-400"
>
Product Manager
</p>
</div>
</div>
`,
style: 'padding: 1.25rem; width: 100%;',
},
}
// #endregion

0 comments on commit 0a2f6fe

Please sign in to comment.