-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refa[DST-610]: revise
<Card> page (#4299)
* DST-607: revise card component * DST-607: add anatomy and appearance demo * Create honest-lobsters-taste.md * DST-607: change size control * DST-607: edit changeset * DST-610: edit comments
- Loading branch information
Showing
10 changed files
with
213 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| --- | ||
| "@marigold/docs": patch | ||
| "@marigold/components": patch | ||
| --- | ||
|
|
||
| refa[DST-610]: Revise `<Card>` page | ||
|
|
||
| The `<Card>`is now revised according to our new component page guidelines. |
26 changes: 26 additions & 0 deletions
26
docs/content/components/content/card/card-appearance.demo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { | ||
| Card, | ||
| CardProps, | ||
| Center, | ||
| Inline, | ||
| Link, | ||
| Split, | ||
| } from '@marigold/components'; | ||
| import { Close, ExternalLink } from '@marigold/icons'; | ||
|
|
||
| export default (props: CardProps) => ( | ||
| <Card {...props} p={3}> | ||
| <Inline alignY="top"> | ||
| <Link href={'#'} target="blank"> | ||
| <ExternalLink size={26} className="fill-[#990000]" /> | ||
| </Link> | ||
| <Split /> | ||
| <Close /> | ||
| </Inline> | ||
| <Center> | ||
| <Link variant="cardText" href={'#'}> | ||
| Reservix GmbH (1) | ||
| </Link> | ||
| </Center> | ||
| </Card> | ||
| ); |
76 changes: 76 additions & 0 deletions
76
docs/content/components/content/card/card-elevation.demo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import { Card, Inline, Stack, Text } from '@marigold/components'; | ||
|
|
||
| export default () => ( | ||
| <> | ||
| <div className="bg-bg-surface-sunken shadow-surface-sunken rounded-xl p-4"> | ||
| <p>sunken layer 👍</p> | ||
| <Card p={4}> | ||
| <Stack> | ||
| <Inline> | ||
| <Text>Earliest event date:</Text> | ||
| <Text weight="bold"> | ||
| {new Date(Date.now()).toLocaleDateString()} | ||
| </Text> | ||
| </Inline> | ||
| <Inline> | ||
| <Text>Latest event date:</Text> | ||
| <Text weight="bold"> | ||
| {new Date(Date.now() + 3600 * 1000 * 24).toLocaleDateString()} | ||
| </Text> | ||
| </Inline> | ||
| <Inline> | ||
| <Text>Total events:</Text> | ||
| <Text weight="bold">10</Text> | ||
| </Inline> | ||
| </Stack> | ||
| </Card> | ||
| </div> | ||
| <div className="bg-bg-surface shadow-surface rounded-xl p-4"> | ||
| <p>default layer 👍</p> | ||
| <Card p={4}> | ||
| <Stack> | ||
| <Inline> | ||
| <Text>Earliest event date:</Text> | ||
| <Text weight="bold"> | ||
| {new Date(Date.now()).toLocaleDateString()} | ||
| </Text> | ||
| </Inline> | ||
| <Inline> | ||
| <Text>Latest event date:</Text> | ||
| <Text weight="bold"> | ||
| {' '} | ||
| {new Date(Date.now() + 3600 * 1000 * 24).toLocaleDateString()} | ||
| </Text> | ||
| </Inline> | ||
| <Inline> | ||
| <Text>Total events:</Text> | ||
| <Text weight="bold">10</Text> | ||
| </Inline> | ||
| </Stack> | ||
| </Card> | ||
| </div> | ||
| <div className="bg-bg-surface-raised shadow-surface-raised rounded-xl p-4"> | ||
| <p>Same layer like card 👎</p> | ||
| <Card p={4}> | ||
| <Stack> | ||
| <Inline> | ||
| <Text>Earliest event date:</Text> | ||
| <Text weight="bold"> | ||
| {new Date(Date.now()).toLocaleDateString()} | ||
| </Text> | ||
| </Inline> | ||
| <Inline> | ||
| <Text>Latest event date:</Text> | ||
| <Text weight="bold"> | ||
| {new Date(Date.now() + 3600 * 1000 * 24).toLocaleDateString()} | ||
| </Text> | ||
| </Inline> | ||
| <Inline> | ||
| <Text>Total events:</Text> | ||
| <Text weight="bold">10</Text> | ||
| </Inline> | ||
| </Stack> | ||
| </Card> | ||
| </div> | ||
| </> | ||
| ); |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,80 @@ | ||
| --- | ||
| title: Card | ||
| caption: Component to support the structuring of information. | ||
| badge: updated | ||
| --- | ||
|
|
||
| The `<Card>` is a content component to group informations inside the UI, as well it provides a better readability and helps the user to find relevant informations in an easy way. | ||
| A `<Card>` component is a versatile UI element used to display content in a concise, visually organized format. | ||
| It’s typically presented as a rectangular box with various content elements such as images, text, buttons, and icons. | ||
| Cards are ideal for grouping related information and making it easily digestible, often used to display previews of articles, products, user profiles, and other content types. | ||
|
|
||
| `<Card>` components usually contain images, text, links or action components like buttons. | ||
| ## Anatomy | ||
|
|
||
| If you want, you can style the `<Card>` and create custom variants and sizes. | ||
| The `<Card>` component consists of a container which is basically a `<div>`. You can pass any content and components as `children` to the component. | ||
|
|
||
| ## Import | ||
|
|
||
| ```tsx | ||
| import { Card } from '@marigold/components'; | ||
| ``` | ||
| <Image | ||
| src="/card/card-anatomy.jpg" | ||
| alt="Anatomy of card component" | ||
| width={800} | ||
| height={550} | ||
| className="mx-auto block" | ||
| /> | ||
|
|
||
| ## Appearance | ||
|
|
||
| <AppearanceDemo component={title} /> | ||
|
|
||
| <AppearanceTable component={title} /> | ||
|
|
||
| ## Props | ||
| ## Usage | ||
|
|
||
| <PropsTable component={title} /> | ||
| The `<Card>` component enhances the visual hierarchy and organization of content, making it easier for users to engage with various pieces of information. | ||
|
|
||
| ## Examples | ||
| ## Elevation layer | ||
|
|
||
| ### Card with form fields | ||
| `<Card>` uses the raised elevation layer to create a visual distinction between the card and the background. | ||
| According to our design guidelines, the card should be used on top of the [sunken](../../../foundations/elevation#sunken) or [default](../../../foundations/elevation#default) layer. | ||
|
|
||
| The Example shows how to use the `<Card>` in a common use case with form fields. | ||
| <ComponentDemo file="./card-elevation.demo.tsx" /> | ||
|
|
||
| <ComponentDemo file="./card-form.demo.tsx" /> | ||
| <GuidelineTiles> | ||
| <Do> | ||
| <Do.Description> | ||
| Use Card on top of default or sunken layers. | ||
| </Do.Description> | ||
| </Do> | ||
| <Dont> | ||
| <Dont.Description> | ||
| Don’t use card in cards or same elevation layers. | ||
| </Dont.Description> | ||
| </Dont> | ||
| </GuidelineTiles> | ||
|
|
||
| ### Card with some Text | ||
| ## Props | ||
|
|
||
| <StorybookHintMessage component={title} /> | ||
|
|
||
| On this example you can see an imformation card with used prop `p`. | ||
| <PropsTable component={title} /> | ||
|
|
||
| <ComponentDemo file="./card-infos.demo.tsx" /> | ||
| ## Related | ||
|
|
||
| <TeaserList | ||
| items={[ | ||
| { | ||
| title: 'Elevation', | ||
| href: '../../../foundations/elevation', | ||
| caption: | ||
| 'This page should introduce you on how to use elevation with Marigold.', | ||
| icon: ( | ||
| <svg | ||
| viewBox="0 0 24 24" | ||
| className="size-6" | ||
| strokeWidth="1.5" | ||
| stroke="currentColor" | ||
| > | ||
| <path d="M3.5625 6.375H20.4375V8.25H3.5625V6.375ZM3.5625 16.125H20.4375V18H3.5625V16.125ZM20.4375 11.25H3.5625V13.125H20.4375V11.25Z"></path> | ||
| </svg> | ||
| ), | ||
| }, | ||
| ]} | ||
| /> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters