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

Add Cards component to style guide #35

Merged
merged 9 commits into from
Oct 28, 2024
Merged

Add Cards component to style guide #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
04c3a82
cards
shannonwells Oct 25, 2024
fddcc82
add props for content text color, title color
shannonwells Oct 25, 2024
90de0e9
tidy up
shannonwells Oct 25, 2024
a33448d
convert content to slot
shannonwells Oct 25, 2024
c8d8430
Update src/lib/features/Card.stories.svelte
shannonwells Oct 25, 2024
f79ccb4
Update src/lib/features/Card.svelte
shannonwells Oct 25, 2024
2633289
separate cards into their own stories
shannonwells Oct 25, 2024
cec63f0
move card-shadow into index.css
shannonwells Oct 25, 2024
1a07ec7
Merge branch 'main' into feat/cards-#9
shannonwells Oct 28, 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
1 change: 1 addition & 0 deletions src/lib/Spacing.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,6 @@
<div class="w-f192 bg-teal">f192 - 192px</div>
<div class="w-f224 bg-teal">f224 - 224px</div>
<div class="w-f256 bg-teal">f256 - 256px</div>
<div class="w-f320 bg-teal">f320 - 320px</div>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was a width specified in the Figma design so I added it.

</div>
</Story>
49 changes: 49 additions & 0 deletions src/lib/features/Card.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<script>
import { Meta, Story } from '@storybook/addon-svelte-csf';
import { UserKey, Wallet } from '/src/lib/assets';
import Card from './Card.svelte';
</script>

<Meta title="UI Components/Features/Card" component={Card} />

<!-- Primary -->
<Story name="Default Card">
<Card></Card>
</Story>

<!-- 320px Width -->
<Story name="Specific Width">
<Card
title="320px width"
class="w-f320 my-4"
icon={UserKey}
/>
</Story>

<!-- Half Width -->
<Story name="Half Width" >
<Card
title="Half width"
icon={Wallet}
class="w-1/2 mb-4"
>
<p slot="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun
</p>
</Card>
</Story>

<!-- Another color -->
<Story name="Alt Color" >
<Card
title="Alternate color card"
titleColor="cream"
bgColor="teal"
>
<div slot="content">
<h4 class="font-bold md text-navy">Slot content title</h4>
<p class="text-error bg-white w-fit px-2 rounded">Slot content: Error text!</p>
<p class="text-white">Slot content: error message!</p>
</div>
</Card>
</Story>
19 changes: 19 additions & 0 deletions src/lib/features/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script>
import { UserFilled } from '/src/lib/assets/index';

export let title = 'Default Card Header';
export let bgColor = 'cream';
export let titleColor = 'navy'
export let icon = UserFilled;
</script>

<div class="p-6 card-shadow rounded-xl bg-{bgColor} {$$restProps.class}">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div class="p-6 card-shadow rounded-xl bg-{bgColor} {$$restProps.class}">
<div class="p-6 card-shadow rounded-xl bg-cream {$$restProps.class}">

Thinking we degault to cream, then when a user wants to change the color, they can just set the class to the new color that they want and it can override the cream through the restProps.class.

Copy link
Collaborator Author

@shannonwells shannonwells Oct 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did it this way because the background color as a prop was part of the Issue specification. It does already default to cream, however, I think it's not the best practice to have two background color classes end up in the class list.

<div class="pb-6 flex justify-between">
<h5 class="font-bold text-{titleColor} inline">{title}</h5>
<svelte:component this={icon} class="w-f48 h-f48"/>
</div>
<slot name="content" >
This is default content
</slot>
</div>

1 change: 1 addition & 0 deletions src/lib/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export { default as Header } from './features/Header.svelte';
export { default as Modal } from './features/Modal.stories.svelte';
export { default as NavMenu } from './features/NavMenu.stories.svelte';
export { default as NavMenuMobile } from './features/NavMenuMobile.svelte';
export { default as Card } from './features/Card.svelte'

// icons & logos
export * as Assets from './assets/index';
Expand Down
3 changes: 3 additions & 0 deletions src/lib/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,9 @@
.form-error {
@apply sm font-bold text-error;
}
.card-shadow {
box-shadow: 4px 4px 10px 0 rgb(0 0 0 / 25%);
}
}

@layer base {
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export default {
f192: '192px',
f224: '224px',
f256: '256px',
f320: '320px',
},
boxShadow: {
md: '0px 4px 7px #00000040',
Expand Down