From b43fa31df3f7c34168555d077aba2b52063fbed5 Mon Sep 17 00:00:00 2001 From: Genevieve Morency Date: Wed, 20 Mar 2024 09:05:55 -0400 Subject: [PATCH 01/10] docs(storybook): update checkbox --- packages/storybook/.storybook/main.ts | 1 + packages/storybook/stories/checkbox.mdx | 46 +++++++++++++++++++ .../storybook/stories/checkbox.stories.tsx | 3 +- 3 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 packages/storybook/stories/checkbox.mdx diff --git a/packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.ts index 1904520db9..1bff2f985e 100644 --- a/packages/storybook/.storybook/main.ts +++ b/packages/storybook/.storybook/main.ts @@ -60,6 +60,7 @@ const config: StorybookConfig = { }), docs: { autodocs: true, + defaultName: 'All Stories' }, core: { disableTelemetry: true, diff --git a/packages/storybook/stories/checkbox.mdx b/packages/storybook/stories/checkbox.mdx new file mode 100644 index 0000000000..1332d0e7fb --- /dev/null +++ b/packages/storybook/stories/checkbox.mdx @@ -0,0 +1,46 @@ +import { Checkbox } from '@equisoft/design-elements-react'; +import { ArgTypes, Meta, Stories, Story } from '@storybook/blocks'; +import * as CheckboxStories from './checkbox.stories'; + + +# Checkbox +
+## Table of Contents + [Definition](#definition)
+ [Usage](#usage)
+ [Variants](#variants)
+ [Properties](#properties)
+ + +
+## Definition + Checkboxes are a control component that allows the user to select any number of choices, including zero, one, or several [2].
+
+ +## Usage + ### When to use + - Use when users have to choose between 0 to 6 options. + - Use it when you have multiple non-exclusive options [2]. + - Use it when a validation is needed [4]. + - Use when a single binary yes/no choice is provided [1]. + + ### When not to use + - Do not use it if only one option from a list can be selected, use the radio button instead [2]. + - Do not use it if it will perform a direct action, use the toggle switch instead. +
+ +## Variants + ### Default + +
+ +## Properties + +
+ +## References +[1] [https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/#:~:text=The%20toggle%20switch%20represents%20a,execution%20usually%20requires%20another%20control](https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/#:~:text=The%20toggle%20switch%20represents%20a,execution%20usually%20requires%20another%20control)
+[2] [https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)
+[3] [https://bootcamp.uxdesign.cc/checkbox-or-switch-97dd932b01c0](https://bootcamp.uxdesign.cc/checkbox-or-switch-97dd932b01c0)
+[4] [https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/](https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/)
+[5] [https://uxdesign.cc/ui-cheat-sheet-radio-buttons-checkboxes-and-other-selectors-bf56777ad59e](https://uxdesign.cc/ui-cheat-sheet-radio-buttons-checkboxes-and-other-selectors-bf56777ad59e)
diff --git a/packages/storybook/stories/checkbox.stories.tsx b/packages/storybook/stories/checkbox.stories.tsx index de1e66e4d1..65ebd231ec 100644 --- a/packages/storybook/stories/checkbox.stories.tsx +++ b/packages/storybook/stories/checkbox.stories.tsx @@ -1,8 +1,9 @@ import { Checkbox } from '@equisoft/design-elements-react'; import { StoryFn as Story } from '@storybook/react'; +import { rawCodeParameters } from './utils/parameters'; export default { - title: 'Components/Checkbox', + title: 'Components/Checkbox/Stories', component: Checkbox, }; From 514fe961c0f82ffb05a372d1c9d9ee4a7140b305 Mon Sep 17 00:00:00 2001 From: Genevieve Morency Date: Wed, 20 Mar 2024 09:19:48 -0400 Subject: [PATCH 02/10] docs(storybook): remove code line --- packages/storybook/stories/checkbox.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/storybook/stories/checkbox.stories.tsx b/packages/storybook/stories/checkbox.stories.tsx index 65ebd231ec..1395d595f1 100644 --- a/packages/storybook/stories/checkbox.stories.tsx +++ b/packages/storybook/stories/checkbox.stories.tsx @@ -1,6 +1,5 @@ import { Checkbox } from '@equisoft/design-elements-react'; import { StoryFn as Story } from '@storybook/react'; -import { rawCodeParameters } from './utils/parameters'; export default { title: 'Components/Checkbox/Stories', From 960cfc6b64f739aff30de844dba818cd35dda19c Mon Sep 17 00:00:00 2001 From: Genevieve Morency Date: Thu, 21 Mar 2024 10:44:31 -0400 Subject: [PATCH 03/10] docs(storybook): larrys comments fixed --- packages/storybook/stories/checkbox.mdx | 29 +++++++++++-------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/storybook/stories/checkbox.mdx b/packages/storybook/stories/checkbox.mdx index 1332d0e7fb..a1956249cc 100644 --- a/packages/storybook/stories/checkbox.mdx +++ b/packages/storybook/stories/checkbox.mdx @@ -4,18 +4,18 @@ import * as CheckboxStories from './checkbox.stories'; # Checkbox -
+ ## Table of Contents - [Definition](#definition)
- [Usage](#usage)
- [Variants](#variants)
- [Properties](#properties)
+ 1. [Definition](#definition) + 2. [Usage](#usage) + 3. [Variants](#variants) + 4. [Properties](#properties) -
+ ## Definition - Checkboxes are a control component that allows the user to select any number of choices, including zero, one, or several [2].
-
+ Checkboxes are a control component that allows the user to select any number of choices, including zero, one, or several [2]. + ## Usage ### When to use @@ -27,20 +27,17 @@ import * as CheckboxStories from './checkbox.stories'; ### When not to use - Do not use it if only one option from a list can be selected, use the radio button instead [2]. - Do not use it if it will perform a direct action, use the toggle switch instead. -
## Variants ### Default -
## Properties -
## References -[1] [https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/#:~:text=The%20toggle%20switch%20represents%20a,execution%20usually%20requires%20another%20control](https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/#:~:text=The%20toggle%20switch%20represents%20a,execution%20usually%20requires%20another%20control)
-[2] [https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)
-[3] [https://bootcamp.uxdesign.cc/checkbox-or-switch-97dd932b01c0](https://bootcamp.uxdesign.cc/checkbox-or-switch-97dd932b01c0)
-[4] [https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/](https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/)
-[5] [https://uxdesign.cc/ui-cheat-sheet-radio-buttons-checkboxes-and-other-selectors-bf56777ad59e](https://uxdesign.cc/ui-cheat-sheet-radio-buttons-checkboxes-and-other-selectors-bf56777ad59e)
+1. [https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/#:~:text=The%20toggle%20switch%20represents%20a,execution%20usually%20requires%20another%20control](https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/#:~:text=The%20toggle%20switch%20represents%20a,execution%20usually%20requires%20another%20control) +2. [https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) +3. [https://bootcamp.uxdesign.cc/checkbox-or-switch-97dd932b01c0](https://bootcamp.uxdesign.cc/checkbox-or-switch-97dd932b01c0) +4. [https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/](https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/) +5. [https://uxdesign.cc/ui-cheat-sheet-radio-buttons-checkboxes-and-other-selectors-bf56777ad59e](https://uxdesign.cc/ui-cheat-sheet-radio-buttons-checkboxes-and-other-selectors-bf56777ad59e) From 02636cf2648724b5734a3711f3706e27f36f89b2 Mon Sep 17 00:00:00 2001 From: Genevieve Morency Date: Thu, 21 Mar 2024 11:15:28 -0400 Subject: [PATCH 04/10] docs(storybook): update card --- packages/storybook/stories/card.mdx | 56 +++++++++++++++++++++ packages/storybook/stories/card.stories.tsx | 2 +- 2 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 packages/storybook/stories/card.mdx diff --git a/packages/storybook/stories/card.mdx b/packages/storybook/stories/card.mdx new file mode 100644 index 0000000000..6a75622a28 --- /dev/null +++ b/packages/storybook/stories/card.mdx @@ -0,0 +1,56 @@ +import { Card } from '@equisoft/design-elements-react'; +import { ArgTypes, Meta, Stories, Story } from '@storybook/blocks'; +import * as CardStories from './card.stories'; + + +# Cards + +## Table of contents + 1. [Definition](#definition) + 2. [Usage](#usage) + 3. [Variants](#Variants) + 4. [Properties](#Properties) + + + +## Definition +Cards are a **structural or navigation components** that enables users to be introduced to a single subject or concept and prompts them to take action, such as clicking for more details. + +## Usage + +### When to use +- **One card, one concept**. A card can contain multiple elements, but each card should focus on only one bit of information or content. This allows users to browse one card at a time [4]. +- Use it to gather heterogeneous information about a single theme to form a more homogeneous page. Cards are an excellent choice for displaying a variety of content types at the same time on the same page [3]. +- Use when there is a call-to-action related to the card. A card should not only be a structure element, it should always lead to some action. A CTA can be in the form of text, an image, a button, or a link. The goal of a CTA is to prompt the user to take action. +- Use to visually group digestible portions of information that call for action; like activating an integration, or accessing more details rather than the full details themselves. It can be a summary that gives users a hint of what they can find on another page, encouraging them to click for more information [1]. +- Use when users browse for information. When you design a layout with cards, the key idea is to allow users to quickly digest large portions of content and dive deep into their interests [8]. + +### When not to use +- Do not use cards when your content requires direct comparison. Each card should be independent and should not require to be compared with each other. +- Do not use cards to display a research result. +- Do not use cards when the content of the page you want to present is already grouped into very homogenous items such as: + - A list of similar items. While cards can be used for homogenous content, in many cases it’s better to use quickly scannable list (or grid) instead of cards for that (simply because the UI will be less complex) [9]. + - Gallery of images. The use of cards can distract the user and prevent easy scannability. A standard grid view can be more relevant when it allows the human eye to scan the grid and its items more easily [7]. +- Do not use cards when you need to present the information in a strict order. Card layouts deemphasize the ranking of content as they don’t provide obvious information about the order in which content should be viewed on a page [7]. For example, a form or a page with different sections should not use cards, as the order in which information is presented is important. + +## Variants +### Non-clickable + + +### Clickable +Coming soon + +## Properties + + +## References +1. [https://www.nngroup.com/articles/cards-component/#:~:text=Summary%3A A “card” is,visually resembling a playing card](https://www.nngroup.com/articles/cards-component/#:~:text=Summary%3A%20A%20%E2%80%9Ccard%E2%80%9D%20is,visually%20resembling%20a%20playing%20card) +2. [https://uxmovement.medium.com/a-guide-to-designing-better-filter-ui-components-8091ff975115](https://uxmovement.medium.com/a-guide-to-designing-better-filter-ui-components-8091ff975115) +3. [https://www.nngroup.com/articles/cards-component/#:~:text=Summary%3A A “card” is,visually resembling a playing card](https://www.nngroup.com/articles/cards-component/#:~:text=Summary%3A%20A%20%E2%80%9Ccard%E2%80%9D%20is,visually%20resembling%20a%20playing%20card) +4. [https://uxplanet.org/best-practices-for-cards-fa45e3ad94dd](https://uxplanet.org/best-practices-for-cards-fa45e3ad94dd) +5. [https://m3.material.io/components/cards/guidelines](https://m3.material.io/components/cards/guidelines) +6. [https://uxplanet.org/ultimate-guide-for-designing-ui-cards-59488a91b44f#:~:text=When%20to%20use%20card%20UI,presenting%20such%20kind%20of%20content](https://uxplanet.org/ultimate-guide-for-designing-ui-cards-59488a91b44f#:~:text=When%20to%20use%20card%20UI,presenting%20such%20kind%20of%20content) +7. [https://ui-patterns.com/patterns/cards](https://ui-patterns.com/patterns/cards) +8. [https://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e](https://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e) +9. [https://uxplanet.org/using-card-based-design-to-enhance-ux-51f965ab70cb](https://uxplanet.org/using-card-based-design-to-enhance-ux-51f965ab70cb) + diff --git a/packages/storybook/stories/card.stories.tsx b/packages/storybook/stories/card.stories.tsx index 06f180c590..6624a44f8d 100644 --- a/packages/storybook/stories/card.stories.tsx +++ b/packages/storybook/stories/card.stories.tsx @@ -2,7 +2,7 @@ import { Card } from '@equisoft/design-elements-react'; import { StoryFn as Story } from '@storybook/react'; export default { - title: 'Components/Card', + title: 'Components/Card/Stories', component: Card, }; From 68a3f724155a1b48c6736d8c48875f9762b93838 Mon Sep 17 00:00:00 2001 From: Genevieve Morency Date: Thu, 21 Mar 2024 11:27:23 -0400 Subject: [PATCH 05/10] docs(storybook): story added --- packages/storybook/stories/card.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/storybook/stories/card.mdx b/packages/storybook/stories/card.mdx index 6a75622a28..01aee82923 100644 --- a/packages/storybook/stories/card.mdx +++ b/packages/storybook/stories/card.mdx @@ -13,8 +13,9 @@ import * as CardStories from './card.stories'; -## Definition +## Definition/Overview Cards are a **structural or navigation components** that enables users to be introduced to a single subject or concept and prompts them to take action, such as clicking for more details. + ## Usage From 32da7c51d3a1114721e4da68a1ae74c13b3c0aad Mon Sep 17 00:00:00 2001 From: Genevieve Morency Date: Thu, 21 Mar 2024 11:37:12 -0400 Subject: [PATCH 06/10] docs(storybook): update component preview --- packages/storybook/stories/card.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/storybook/stories/card.mdx b/packages/storybook/stories/card.mdx index 01aee82923..05988ac60f 100644 --- a/packages/storybook/stories/card.mdx +++ b/packages/storybook/stories/card.mdx @@ -1,5 +1,5 @@ import { Card } from '@equisoft/design-elements-react'; -import { ArgTypes, Meta, Stories, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Meta, Stories, Story } from '@storybook/blocks'; import * as CardStories from './card.stories'; @@ -15,7 +15,7 @@ import * as CardStories from './card.stories'; ## Definition/Overview Cards are a **structural or navigation components** that enables users to be introduced to a single subject or concept and prompts them to take action, such as clicking for more details. - + ## Usage @@ -36,7 +36,7 @@ Cards are a **structural or navigation components** that enables users to be int ## Variants ### Non-clickable - + ### Clickable Coming soon From 0e03ee0bf47169dfcc9e7e2c1b908d4a381114d5 Mon Sep 17 00:00:00 2001 From: Genevieve Morency Date: Mon, 25 Mar 2024 14:43:23 -0400 Subject: [PATCH 07/10] docs(storybook): larrys comments fixed --- packages/storybook/stories/card.mdx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/storybook/stories/card.mdx b/packages/storybook/stories/card.mdx index 05988ac60f..6fd72dd13e 100644 --- a/packages/storybook/stories/card.mdx +++ b/packages/storybook/stories/card.mdx @@ -1,15 +1,17 @@ import { Card } from '@equisoft/design-elements-react'; +import { CardLink } from '@equisoft/design-elements-react'; import { ArgTypes, Canvas, Meta, Stories, Story } from '@storybook/blocks'; import * as CardStories from './card.stories'; +import * as CardLinkStories from './card-link.stories'; -# Cards +# Card ## Table of contents 1. [Definition](#definition) 2. [Usage](#usage) - 3. [Variants](#Variants) - 4. [Properties](#Properties) + 3. [Variants](#variants) + 4. [Properties](#properties) @@ -28,7 +30,7 @@ Cards are a **structural or navigation components** that enables users to be int ### When not to use - Do not use cards when your content requires direct comparison. Each card should be independent and should not require to be compared with each other. -- Do not use cards to display a research result. +- Do not use cards to display a search result. - Do not use cards when the content of the page you want to present is already grouped into very homogenous items such as: - A list of similar items. While cards can be used for homogenous content, in many cases it’s better to use quickly scannable list (or grid) instead of cards for that (simply because the UI will be less complex) [9]. - Gallery of images. The use of cards can distract the user and prevent easy scannability. A standard grid view can be more relevant when it allows the human eye to scan the grid and its items more easily [7]. @@ -39,7 +41,7 @@ Cards are a **structural or navigation components** that enables users to be int ### Clickable -Coming soon + ## Properties From 14668f474c5d8f1247618a1191620d897e44966c Mon Sep 17 00:00:00 2001 From: Genevieve Morency Date: Wed, 10 Apr 2024 08:24:09 -0400 Subject: [PATCH 08/10] docs(storybook): update structure and variants --- packages/storybook/.storybook/main.ts | 2 +- packages/storybook/stories/card.mdx | 10 +++++----- packages/storybook/stories/card.stories.tsx | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.ts index 1bff2f985e..a7e1054d43 100644 --- a/packages/storybook/.storybook/main.ts +++ b/packages/storybook/.storybook/main.ts @@ -60,7 +60,7 @@ const config: StorybookConfig = { }), docs: { autodocs: true, - defaultName: 'All Stories' + defaultName: 'Doc' }, core: { disableTelemetry: true, diff --git a/packages/storybook/stories/card.mdx b/packages/storybook/stories/card.mdx index 6fd72dd13e..562804fcf8 100644 --- a/packages/storybook/stories/card.mdx +++ b/packages/storybook/stories/card.mdx @@ -13,11 +13,11 @@ import * as CardLinkStories from './card-link.stories'; 3. [Variants](#variants) 4. [Properties](#properties) - + ## Definition/Overview -Cards are a **structural or navigation components** that enables users to be introduced to a single subject or concept and prompts them to take action, such as clicking for more details. - +Cards allow users to be introduced to a single subject or concept and prompts them to take action, such as clicking for more details. + ## Usage @@ -38,10 +38,10 @@ Cards are a **structural or navigation components** that enables users to be int ## Variants ### Non-clickable - + ### Clickable - +Coming soon! ## Properties diff --git a/packages/storybook/stories/card.stories.tsx b/packages/storybook/stories/card.stories.tsx index 6624a44f8d..db895be246 100644 --- a/packages/storybook/stories/card.stories.tsx +++ b/packages/storybook/stories/card.stories.tsx @@ -2,10 +2,10 @@ import { Card } from '@equisoft/design-elements-react'; import { StoryFn as Story } from '@storybook/react'; export default { - title: 'Components/Card/Stories', + title: 'Components/Card', component: Card, }; -export const Normal: Story = () => ( +export const NonClickable: Story = () => ( Hello, World! ); From 182be83cc7748427e96713291c975ac1022b367d Mon Sep 17 00:00:00 2001 From: Pierre-Yves Lafleur Date: Thu, 11 Apr 2024 19:56:34 -0400 Subject: [PATCH 09/10] docs(Card): add controls --- packages/storybook/stories/card.mdx | 51 +++++++++++++-------- packages/storybook/stories/card.stories.tsx | 18 ++++++-- 2 files changed, 44 insertions(+), 25 deletions(-) diff --git a/packages/storybook/stories/card.mdx b/packages/storybook/stories/card.mdx index 562804fcf8..0129fe63b7 100644 --- a/packages/storybook/stories/card.mdx +++ b/packages/storybook/stories/card.mdx @@ -1,40 +1,52 @@ import { Card } from '@equisoft/design-elements-react'; -import { CardLink } from '@equisoft/design-elements-react'; -import { ArgTypes, Canvas, Meta, Stories, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Meta } from '@storybook/blocks'; import * as CardStories from './card.stories'; -import * as CardLinkStories from './card-link.stories'; - # Card ## Table of contents - 1. [Definition](#definition) - 2. [Usage](#usage) - 3. [Variants](#variants) - 4. [Properties](#properties) +1. [Definition](#definition) +2. [Usage](#usage) +3. [Variants](#variants) +4. [Properties](#properties) ## Definition/Overview -Cards allow users to be introduced to a single subject or concept and prompts them to take action, such as clicking for more details. +Cards allow users to be introduced to a single subject or concept and prompts them to take action, such as clicking for +more details. ## Usage ### When to use -- **One card, one concept**. A card can contain multiple elements, but each card should focus on only one bit of information or content. This allows users to browse one card at a time [4]. -- Use it to gather heterogeneous information about a single theme to form a more homogeneous page. Cards are an excellent choice for displaying a variety of content types at the same time on the same page [3]. -- Use when there is a call-to-action related to the card. A card should not only be a structure element, it should always lead to some action. A CTA can be in the form of text, an image, a button, or a link. The goal of a CTA is to prompt the user to take action. -- Use to visually group digestible portions of information that call for action; like activating an integration, or accessing more details rather than the full details themselves. It can be a summary that gives users a hint of what they can find on another page, encouraging them to click for more information [1]. -- Use when users browse for information. When you design a layout with cards, the key idea is to allow users to quickly digest large portions of content and dive deep into their interests [8]. +- **One card, one concept**. A card can contain multiple elements, but each card should focus on only one bit of + information or content. This allows users to browse one card at a time [4]. +- Use it to gather heterogeneous information about a single theme to form a more homogeneous page. Cards are an + excellent choice for displaying a variety of content types at the same time on the same page [3]. +- Use when there is a call-to-action related to the card. A card should not only be a structure element, it should + always lead to some action. A CTA can be in the form of text, an image, a button, or a link. The goal of a CTA is + to prompt the user to take action. +- Use to visually group digestible portions of information that call for action; like activating an integration, or + accessing more details rather than the full details themselves. It can be a summary that gives users a hint of what + they can find on another page, encouraging them to click for more information [1]. +- Use when users browse for information. When you design a layout with cards, the key idea is to allow users to + quickly digest large portions of content and dive deep into their interests [8]. ### When not to use -- Do not use cards when your content requires direct comparison. Each card should be independent and should not require to be compared with each other. +- Do not use cards when your content requires direct comparison. Each card should be independent and should not + require to be compared with each other. - Do not use cards to display a search result. -- Do not use cards when the content of the page you want to present is already grouped into very homogenous items such as: - - A list of similar items. While cards can be used for homogenous content, in many cases it’s better to use quickly scannable list (or grid) instead of cards for that (simply because the UI will be less complex) [9]. - - Gallery of images. The use of cards can distract the user and prevent easy scannability. A standard grid view can be more relevant when it allows the human eye to scan the grid and its items more easily [7]. -- Do not use cards when you need to present the information in a strict order. Card layouts deemphasize the ranking of content as they don’t provide obvious information about the order in which content should be viewed on a page [7]. For example, a form or a page with different sections should not use cards, as the order in which information is presented is important. +- Do not use cards when the content of the page you want to present is already grouped into very homogenous items + such as: + - A list of similar items. While cards can be used for homogenous content, in many cases it’s better to use + quickly scannable list (or grid) instead of cards for that (simply because the UI will be less complex) [9]. + - Gallery of images. The use of cards can distract the user and prevent easy scannability. A standard grid view + can be more relevant when it allows the human eye to scan the grid and its items more easily [7]. +- Do not use cards when you need to present the information in a strict order. Card layouts deemphasize the ranking + of content as they don’t provide obvious information about the order in which content should be viewed on a page [7]. + For example, a form or a page with different sections should not use cards, as the order in which information is + presented is important. ## Variants ### Non-clickable @@ -56,4 +68,3 @@ Coming soon! 7. [https://ui-patterns.com/patterns/cards](https://ui-patterns.com/patterns/cards) 8. [https://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e](https://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e) 9. [https://uxplanet.org/using-card-based-design-to-enhance-ux-51f965ab70cb](https://uxplanet.org/using-card-based-design-to-enhance-ux-51f965ab70cb) - diff --git a/packages/storybook/stories/card.stories.tsx b/packages/storybook/stories/card.stories.tsx index db895be246..a4a0ab321f 100644 --- a/packages/storybook/stories/card.stories.tsx +++ b/packages/storybook/stories/card.stories.tsx @@ -1,11 +1,19 @@ import { Card } from '@equisoft/design-elements-react'; -import { StoryFn as Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; -export default { +const meta: Meta = { title: 'Components/Card', component: Card, }; -export const NonClickable: Story = () => ( - Hello, World! -); +export default meta; + +type Story = StoryObj; + +export const NonClickable: Story = { + render: (args) => ( + + Hello, world! + + ), +}; From d372ea987ce3e8056657cc94c5e10815f5f835ea Mon Sep 17 00:00:00 2001 From: Pierre-Yves Lafleur Date: Mon, 29 Jul 2024 14:39:08 -0400 Subject: [PATCH 10/10] fix: remote autodocs tag --- packages/storybook/stories/card.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/storybook/stories/card.stories.tsx b/packages/storybook/stories/card.stories.tsx index b4cb1f15d6..a4a0ab321f 100644 --- a/packages/storybook/stories/card.stories.tsx +++ b/packages/storybook/stories/card.stories.tsx @@ -4,7 +4,6 @@ import { Meta, StoryObj } from '@storybook/react'; const meta: Meta = { title: 'Components/Card', component: Card, - tags: ['autodocs'], }; export default meta;