diff --git a/.changeset/honest-lobsters-taste.md b/.changeset/honest-lobsters-taste.md new file mode 100644 index 0000000000..d6c8a3a531 --- /dev/null +++ b/.changeset/honest-lobsters-taste.md @@ -0,0 +1,8 @@ +--- +"@marigold/docs": patch +"@marigold/components": patch +--- + +refa[DST-610]: Revise `` page + +The ``is now revised according to our new component page guidelines. diff --git a/docs/content/components/content/card/card-appearance.demo.tsx b/docs/content/components/content/card/card-appearance.demo.tsx new file mode 100644 index 0000000000..9dcf1a7cb6 --- /dev/null +++ b/docs/content/components/content/card/card-appearance.demo.tsx @@ -0,0 +1,26 @@ +import { + Card, + CardProps, + Center, + Inline, + Link, + Split, +} from '@marigold/components'; +import { Close, ExternalLink } from '@marigold/icons'; + +export default (props: CardProps) => ( + + + + + + + + +
+ + Reservix GmbH (1) + +
+ +); diff --git a/docs/content/components/content/card/card-elevation.demo.tsx b/docs/content/components/content/card/card-elevation.demo.tsx new file mode 100644 index 0000000000..c5add4799b --- /dev/null +++ b/docs/content/components/content/card/card-elevation.demo.tsx @@ -0,0 +1,76 @@ +import { Card, Inline, Stack, Text } from '@marigold/components'; + +export default () => ( + <> +
+

sunken layer πŸ‘

+ + + + Earliest event date: + + {new Date(Date.now()).toLocaleDateString()} + + + + Latest event date: + + {new Date(Date.now() + 3600 * 1000 * 24).toLocaleDateString()} + + + + Total events: + 10 + + + +
+
+

default layer πŸ‘

+ + + + Earliest event date: + + {new Date(Date.now()).toLocaleDateString()} + + + + Latest event date: + + {' '} + {new Date(Date.now() + 3600 * 1000 * 24).toLocaleDateString()} + + + + Total events: + 10 + + + +
+
+

Same layer like card πŸ‘Ž

+ + + + Earliest event date: + + {new Date(Date.now()).toLocaleDateString()} + + + + Latest event date: + + {new Date(Date.now() + 3600 * 1000 * 24).toLocaleDateString()} + + + + Total events: + 10 + + + +
+ +); diff --git a/docs/content/components/content/card/card-form.demo.tsx b/docs/content/components/content/card/card-form.demo.tsx deleted file mode 100644 index 707172262a..0000000000 --- a/docs/content/components/content/card/card-form.demo.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { - Button, - Card, - Headline, - Split, - Stack, - TextField, -} from '@marigold/components'; - -export default () => ( - - - Personal Settings - - - - - - -); diff --git a/docs/content/components/content/card/card-infos.demo.tsx b/docs/content/components/content/card/card-infos.demo.tsx deleted file mode 100644 index dcdab3907d..0000000000 --- a/docs/content/components/content/card/card-infos.demo.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Card, Headline, Link, Stack, Text } from '@marigold/components'; - -export default () => ( - - - Professor Severus Snape - - Professor Severus Snape (9 January, 1960[1] - 2 May, - 1998)[2] was an English half-blood[3] wizard serving as Potions Master - (1981-1996), Head of Slytherin House (1981-1997), Defence Against the - Dark Arts professor (1996-1997), and Headmaster (1997-1998) of the - Hogwarts School of Witchcraft and Wizardry as well as a member of the - Order of the Phoenix and a Death Eater. His double life played an - extremely important role in both of the Wizarding Wars against - Voldemort. - - - Source - - - -); diff --git a/docs/content/components/content/card/card.mdx b/docs/content/components/content/card/card.mdx index bbc167e54b..073149226a 100644 --- a/docs/content/components/content/card/card.mdx +++ b/docs/content/components/content/card/card.mdx @@ -1,38 +1,80 @@ --- title: Card caption: Component to support the structuring of information. +badge: updated --- -The `` 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 `` 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. -`` components usually contain images, text, links or action components like buttons. +## Anatomy -If you want, you can style the `` and create custom variants and sizes. +The `` component consists of a container which is basically a `
`. You can pass any content and components as `children` to the component. -## Import - -```tsx -import { Card } from '@marigold/components'; -``` +Anatomy of card component ## Appearance + + -## Props +## Usage - +The `` 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 +`` 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 `` in a common use case with form fields. + - + + + + Use Card on top of default or sunken layers. + + + + + Don’t use card in cards or same elevation layers. + + + -### Card with some Text +## Props + + -On this example you can see an imformation card with used prop `p`. + - +## Related + + + + + ), + }, + ]} +/> diff --git a/docs/public/card/card-anatomy.jpg b/docs/public/card/card-anatomy.jpg new file mode 100644 index 0000000000..58faf74876 Binary files /dev/null and b/docs/public/card/card-anatomy.jpg differ diff --git a/docs/public/card/card-do-elevation.jpg b/docs/public/card/card-do-elevation.jpg new file mode 100644 index 0000000000..2daeb97f79 Binary files /dev/null and b/docs/public/card/card-do-elevation.jpg differ diff --git a/docs/public/card/card-dont-elevation.jpg b/docs/public/card/card-dont-elevation.jpg new file mode 100644 index 0000000000..a8b0310fee Binary files /dev/null and b/docs/public/card/card-dont-elevation.jpg differ diff --git a/packages/components/src/Card/Card.stories.tsx b/packages/components/src/Card/Card.stories.tsx index 0f5108d589..e4bdc68dba 100644 --- a/packages/components/src/Card/Card.stories.tsx +++ b/packages/components/src/Card/Card.stories.tsx @@ -21,9 +21,10 @@ const meta = { }, size: { control: { - type: 'text', + type: 'radio', }, description: 'The size of the card', + options: ['default', 'stretch', 'small'], }, p: { control: { @@ -134,22 +135,47 @@ export const CoreCard: Story = { export const Stretch: Story = { render: args => ( -
- -

Professor Severus Snape

-
-

- Professor Severus Snape (9 January, 1960[1] - 2 - May, 1998)[2] was an English half-blood[3] wizard serving as Potions - Master (1981-1996), Head of Slytherin House (1981-1997), Defence - Against the Dark Arts professor (1996-1997), and Headmaster - (1997-1998) of the Hogwarts School of Witchcraft and Wizardry as - well as a member of the Order of the Phoenix and a Death Eater. His - double life played an extremely important role in both of the - Wizarding Wars against Voldemort. -

-
- -
+ +

Professor Severus Snape

+
+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam + nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, + sed diam voluptua. At vero eos et accusam et justo duo dolores et ea + rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem + ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur + sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam + et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet. +

+
+ + ), +}; + +export const PaddingAndSpace: Story = { + render: args => ( + +

Professor Severus Snape

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit + amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam + nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, + sed diam voluptua. At vero eos et accusam et justo duo dolores et ea + rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem + ipsum dolor sit amet. +

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit + amet. +

+ ), };