From 2875bbfdf91a7ebcef3f0f7a122aefe5b2084aa4 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Fri, 17 Nov 2023 14:16:58 -0500 Subject: [PATCH 1/7] [Card] Update existing Card stories to match Uplifted LegacyCard styles --- .../src/components/Card/Card.stories.tsx | 56 ++++++++----------- 1 file changed, 22 insertions(+), 34 deletions(-) diff --git a/polaris-react/src/components/Card/Card.stories.tsx b/polaris-react/src/components/Card/Card.stories.tsx index ca90f6688f7..cdf5d562290 100644 --- a/polaris-react/src/components/Card/Card.stories.tsx +++ b/polaris-react/src/components/Card/Card.stories.tsx @@ -1,14 +1,6 @@ import React from 'react'; import type {ComponentMeta} from '@storybook/react'; -import { - Card, - BlockStack, - Bleed, - Box, - Divider, - List, - Text, -} from '@shopify/polaris'; +import {Card, BlockStack, Bleed, Box, List, Text} from '@shopify/polaris'; export default { component: Card, @@ -16,9 +8,9 @@ export default { export function Default() { return ( - - - + + + Online store dashboard

View a summary of your online store’s performance.

@@ -27,11 +19,11 @@ export function Default() { ); } -export function WithBackgroundSubdued() { +export function WithResponsiveBorderRadius() { return ( - - - + + + Online store dashboard

View a summary of your online store’s performance.

@@ -40,11 +32,11 @@ export function WithBackgroundSubdued() { ); } -export function WithBorderRadiusRoundedAbove() { +export function WithResponsivePadding() { return ( - - - + + + Online store dashboard

View a summary of your online store’s performance.

@@ -53,11 +45,11 @@ export function WithBorderRadiusRoundedAbove() { ); } -export function WithResponsivePadding() { +export function WithSubduedBackground() { return ( - - - + + + Online store dashboard

View a summary of your online store’s performance.

@@ -69,25 +61,21 @@ export function WithResponsivePadding() { export function WithSubduedSection() { return ( - - + + Staff accounts - + Felix Crafford Ezequiel Manno - - - + + - + Deactivated staff accounts From 45a0b0fd17e9e49c0ec5752304281dec1550edf1 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Mon, 20 Nov 2023 15:05:30 -0500 Subject: [PATCH 2/7] [Card] Add storybook compositions from LegacyCard examples --- .../src/components/Card/Card.stories.tsx | 661 +++++++++++++++++- 1 file changed, 654 insertions(+), 7 deletions(-) diff --git a/polaris-react/src/components/Card/Card.stories.tsx b/polaris-react/src/components/Card/Card.stories.tsx index cdf5d562290..47aa2ca9136 100644 --- a/polaris-react/src/components/Card/Card.stories.tsx +++ b/polaris-react/src/components/Card/Card.stories.tsx @@ -1,6 +1,23 @@ -import React from 'react'; +import React, {useState} from 'react'; import type {ComponentMeta} from '@storybook/react'; -import {Card, BlockStack, Bleed, Box, List, Text} from '@shopify/polaris'; +import { + ActionList, + BlockStack, + Bleed, + Box, + Button, + ButtonGroup, + Card, + Icon, + Image, + InlineGrid, + InlineStack, + List, + Popover, + ResourceList, + Text, +} from '@shopify/polaris'; +import {ProductsMinor} from '@shopify/polaris-icons'; export default { component: Card, @@ -10,7 +27,7 @@ export function Default() { return ( - + Online store dashboard

View a summary of your online store’s performance.

@@ -23,7 +40,7 @@ export function WithResponsiveBorderRadius() { return ( - + Online store dashboard

View a summary of your online store’s performance.

@@ -36,7 +53,7 @@ export function WithResponsivePadding() { return ( - + Online store dashboard

View a summary of your online store’s performance.

@@ -49,7 +66,7 @@ export function WithSubduedBackground() { return ( - + Online store dashboard

View a summary of your online store’s performance.

@@ -58,11 +75,78 @@ export function WithSubduedBackground() { ); } +export function WithSingleSection() { + return ( + + + Online store dashboard + + + + View a summary of your online store’s performance. + + + + ); +} + +export function WithMultipleSections() { + return ( + + + Online store dashboard + + + + View a summary of your online store’s performance. + + + + + View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. + + + + ); +} + +export function WithMultipleTitledSections() { + return ( + + + Online store dashboard + + + + + Reports + + + View a summary of your online store’s performance. + + + + + + + Summary + + + View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. + + + + + ); +} + export function WithSubduedSection() { return ( - + Staff accounts @@ -88,3 +172,566 @@ export function WithSubduedSection() { ); } + +export function WithSubsection() { + return ( + + + + + Customer + + + John Smith + + + + + + Addresses + + + + 123 First St + + + Somewhere + + + The Universe + + + + + 123 Second St + + + Somewhere + + + The Universe + + + + + + + A single subsection without a sibling has no visual appearance + + + + + ); +} + +export function WithFlushSection() { + return ( + + + a sheet with purple and orange stripes + + + + You can use sales reports to see information about your customers’ + orders based on criteria such as sales over time, by channel, or by + staff. + + + + ); +} + +export function WithFlushSectionAndSubduedSection() { + return ( + + + a sheet with purple and orange stripes + + + You can use sales reports to see information about your customers’ + orders based on criteria such as sales over time, by channel, or by + staff. + + + + + ); +} + +export function WithSectionsAndAction() { + return ( + + + + + Customer + + + John Smith + + + + + + Contact Information + + + + + john.smith@example.com + + + + + ); +} + +export function WithSectionsAndDestructiveAction() { + return ( + + + + + Customer + + + John Smith + + + + + + Contact Information + + + + + + + + john.smith@example.com + + + + + ); +} + +export function WithSeparateHeader() { + const [actionActive, toggleAction] = useState(false); + + const handleToggleAction = () => { + toggleAction(!actionActive); + }; + + const items = [{content: 'Member'}, {content: 'Admin'}]; + + const disclosureButtonActivator = ( + + ); + + const disclosureButton = ( + + + + ); + + return ( + + + + + Staff accounts + + + + {disclosureButton} + + + + Felix Crafford + Ezequiel Manno + + + + ); +} + +export function WithHeaderActions() { + return ( + + + + + Variants + + + + + Add variants if this product comes in multiple versions, like + different sizes or colors. + + + + ); +} + +export function WithFooterActions() { + return ( + + + + Shipment 1234 + + + + Items + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + + + + + + + ); +} + +export function WithMultipleFooterActions() { + const [actionActive, toggleAction] = useState(false); + + const handleToggleAction = () => { + toggleAction(!actionActive); + }; + + const items = [ + {content: 'Cancel shipment', destructive: true}, + {content: 'Add another shipment', disabled: true}, + ]; + + const disclosureButtonActivator = ( + + ); + + const disclosureButton = ( + + + + ); + + return ( + + + + Shipment 1234 + + + + Items + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + {disclosureButton} + + + + + + ); +} + +export function WithCustomFooterActions() { + return ( + + + + + Secure your account with 2-step authentication + + + Two-step authentication adds an extra layer of security when logging + in to your account. A special code will be required each time you + log in, ensuring only you can access your account. + + + + + + + + + + + ); +} + +export function WithDestructiveFooterActions() { + return ( + + + + Shipment 1234 + + + + Items + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + + + + + + + ); +} + +export function WithCustomReactNodeTitle() { + return ( + + + + Products + + + + + + New Products + + + + + Socks + Super Shoes + + + + ); +} + +export function WithAllElements() { + const [actionActive, toggleAction] = useState(false); + + const handleToggleAction = () => { + toggleAction(!actionActive); + }; + + const items = [{content: 'Gross Sales'}, {content: 'Net Sales'}]; + + const disclosureButtonActivator = ( + + ); + + const disclosureButton = ( + + + + ); + + const salesMarkup = ( + + { + const {sales, amount, url} = item; + return ( + + +
{sales}
+
{amount}
+ + + ); + }} + /> + + ); + + return ( + + + + + Sales + + + + {disclosureButton} + + + + + You can use sales reports to see information about your customers’ + orders based on criteria such as sales over time, by channel, or by + staff. + + + Total Sales Breakdown + + + {salesMarkup} + + + + + Deactivated reports + + + Payouts + Total Sales By Channel + + + + + + + Note + + + The sales reports are available only if your store is on the Shopify + plan or higher. + + + + + + + + + + + ); +} From 9f1a4a7f01550bff7877b62971a8bb0677b04906 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Tue, 21 Nov 2023 09:30:35 -0500 Subject: [PATCH 3/7] [Card] Add subdued for secondary content story --- .../src/components/Card/Card.stories.tsx | 88 +++++++++++-------- 1 file changed, 52 insertions(+), 36 deletions(-) diff --git a/polaris-react/src/components/Card/Card.stories.tsx b/polaris-react/src/components/Card/Card.stories.tsx index 47aa2ca9136..e2ab9d8e7cb 100644 --- a/polaris-react/src/components/Card/Card.stories.tsx +++ b/polaris-react/src/components/Card/Card.stories.tsx @@ -62,7 +62,7 @@ export function WithResponsivePadding() { ); } -export function WithSubduedBackground() { +export function WithSubdued() { return ( @@ -75,7 +75,23 @@ export function WithSubduedBackground() { ); } -export function WithSingleSection() { +export function WithSubduedForSecondaryContent() { + return ( + + + + Deactivated staff accounts + + + Felix Crafford + Ezequiel Manno + + + + ); +} + +export function WithSection() { return ( @@ -90,6 +106,37 @@ export function WithSingleSection() { ); } +export function WithSubduedSection() { + return ( + + + + Staff accounts + + + + Felix Crafford + Ezequiel Manno + + + + + + + + Deactivated staff accounts + + + Felix Crafford + Ezequiel Manno + + + + + + ); +} + export function WithMultipleSections() { return ( @@ -142,37 +189,6 @@ export function WithMultipleTitledSections() { ); } -export function WithSubduedSection() { - return ( - - - - Staff accounts - - - - Felix Crafford - Ezequiel Manno - - - - - - - - Deactivated staff accounts - - - Felix Crafford - Ezequiel Manno - - - - - - ); -} - export function WithSubsection() { return ( @@ -224,7 +240,7 @@ export function WithSubsection() { ); } -export function WithFlushSection() { +export function WithFlushedSection() { return ( @@ -244,7 +260,7 @@ export function WithFlushSection() { ); } -export function WithFlushSectionAndSubduedSection() { +export function WithFlushedSectionAndSubduedSection() { return ( @@ -264,7 +280,7 @@ export function WithFlushSectionAndSubduedSection() { ); } -export function WithSectionsAndAction() { +export function WithSectionsAndActions() { return ( From b1947b1bba1cd8515d0b3548fcd569db23d2c545 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Tue, 21 Nov 2023 09:34:12 -0500 Subject: [PATCH 4/7] Add changeset --- .changeset/empty-squids-prove.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/empty-squids-prove.md diff --git a/.changeset/empty-squids-prove.md b/.changeset/empty-squids-prove.md new file mode 100644 index 00000000000..d370cd3693f --- /dev/null +++ b/.changeset/empty-squids-prove.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Added documentation for `Card` examples to support `LegacyCard` compositions From 559e503852348f540a3c6e0501af53da924820a6 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Tue, 21 Nov 2023 09:53:52 -0500 Subject: [PATCH 5/7] [Card] Update existing styleguide documentation post v12 --- .../components/layout-and-structure/card.mdx | 8 ++++---- .../pages/examples/card-default.tsx | 4 ++-- ... => card-with-responsive-border-radius.tsx} | 4 ++-- .../examples/card-with-subdued-background.tsx | 18 ++++++++++++------ .../examples/card-with-varying-padding.tsx | 4 ++-- 5 files changed, 22 insertions(+), 16 deletions(-) rename polaris.shopify.com/pages/examples/{card-with-rounded-corners.tsx => card-with-responsive-border-radius.tsx} (74%) diff --git a/polaris.shopify.com/content/components/layout-and-structure/card.mdx b/polaris.shopify.com/content/components/layout-and-structure/card.mdx index 790eff1641c..319c3840f1e 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/card.mdx +++ b/polaris.shopify.com/content/components/layout-and-structure/card.mdx @@ -26,7 +26,7 @@ examples: - fileName: card-default.tsx title: Default description: >- - By default, cards have an 8px border radius and uses `--p-color-bg-surface` as the background and `--p-shadow-300` as the shadow. There is padding of `space-5` (20px) around children and `space-4` (16px) for small screens. + By default, cards have an 8px border radius and uses `--p-color-bg-surface` as the background and `--p-shadow-300` as the shadow. There is padding of `space-500` (20px) around children and `space-400` (16px) for small screens. - fileName: card-with-subdued-background.tsx title: With subdued background description: >- @@ -35,10 +35,10 @@ examples: title: With varying padding description: >- Use the `padding` property to adjust the spacing within a card. You can also specify spacing values at different breakpoints. - - fileName: card-with-rounded-corners.tsx - title: Rounded corners + - fileName: card-with-responsive-border-radius.tsx + title: With responsive border radius description: >- - Use the `padding` property to adjust the spacing of content within a card. The `padding` prop supports responsive spacing with the [Breakpoints tokens](https://polaris.shopify.com/tokens/breakpoints). + Use the `roundedAbove` property to adjust the border radius of the card based on a set breakpoint. previewImg: /images/components/layout-and-structure/card.png --- diff --git a/polaris.shopify.com/pages/examples/card-default.tsx b/polaris.shopify.com/pages/examples/card-default.tsx index a02c2a0f3f8..b9a249e4bbf 100644 --- a/polaris.shopify.com/pages/examples/card-default.tsx +++ b/polaris.shopify.com/pages/examples/card-default.tsx @@ -2,7 +2,7 @@ import {Card, Text} from '@shopify/polaris'; import React from 'react'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function CardExample() { +function CardDefault() { return ( @@ -12,4 +12,4 @@ function CardExample() { ); } -export default withPolarisExample(CardExample); +export default withPolarisExample(CardDefault); diff --git a/polaris.shopify.com/pages/examples/card-with-rounded-corners.tsx b/polaris.shopify.com/pages/examples/card-with-responsive-border-radius.tsx similarity index 74% rename from polaris.shopify.com/pages/examples/card-with-rounded-corners.tsx rename to polaris.shopify.com/pages/examples/card-with-responsive-border-radius.tsx index 3a5e42b91ee..b27644bf8d8 100644 --- a/polaris.shopify.com/pages/examples/card-with-rounded-corners.tsx +++ b/polaris.shopify.com/pages/examples/card-with-responsive-border-radius.tsx @@ -2,7 +2,7 @@ import {Card, Text} from '@shopify/polaris'; import React from 'react'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function CardExample() { +function CardWithResponsiveBorderRadius() { return ( @@ -12,4 +12,4 @@ function CardExample() { ); } -export default withPolarisExample(CardExample); +export default withPolarisExample(CardWithResponsiveBorderRadius); diff --git a/polaris.shopify.com/pages/examples/card-with-subdued-background.tsx b/polaris.shopify.com/pages/examples/card-with-subdued-background.tsx index a72b92fe79d..76c85503bd7 100644 --- a/polaris.shopify.com/pages/examples/card-with-subdued-background.tsx +++ b/polaris.shopify.com/pages/examples/card-with-subdued-background.tsx @@ -1,15 +1,21 @@ -import {Card, Text} from '@shopify/polaris'; +import {BlockStack, Card, List, Text} from '@shopify/polaris'; import React from 'react'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function CardExample() { +function CardWithSubduedBackground() { return ( - - Content inside a card - + + + Deactivated staff accounts + + + Felix Crafford + Ezequiel Manno + + ); } -export default withPolarisExample(CardExample); +export default withPolarisExample(CardWithSubduedBackground); diff --git a/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx b/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx index 9b2e76ac50b..2c6f8a3d069 100644 --- a/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx +++ b/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx @@ -2,7 +2,7 @@ import {Card, Text, BlockStack} from '@shopify/polaris'; import React from 'react'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function CardExample() { +function CardWithVaryingPadding() { return ( @@ -43,4 +43,4 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { ); }; -export default withPolarisExample(CardExample); +export default withPolarisExample(CardWithVaryingPadding); From 2fdcdb8b1b8628c7f1840692a6649649a78f6b51 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Tue, 21 Nov 2023 10:44:57 -0500 Subject: [PATCH 6/7] [Card] Add styleguide examples and documentation --- .../components/layout-and-structure/card.mdx | 66 +++++++- .../pages/examples/card-with-all-elements.tsx | 147 ++++++++++++++++++ .../card-with-custom-footer-actions.tsx | 42 +++++ .../card-with-custom-react-node-title.tsx | 37 +++++ .../card-with-destructive-footer-actions.tsx | 53 +++++++ .../examples/card-with-flushed-section.tsx | 25 +++ .../examples/card-with-footer-actions.tsx | 48 ++++++ .../examples/card-with-header-actions.tsx | 30 ++++ .../card-with-multiple-footer-actions.tsx | 75 +++++++++ .../examples/card-with-multiple-sections.tsx | 26 ++++ .../card-with-multiple-titled-sections.tsx | 36 +++++ .../pages/examples/card-with-section.tsx | 20 +++ .../card-with-sections-and-actions.tsx | 39 +++++ ...d-with-sections-and-destructive-action.tsx | 56 +++++++ .../examples/card-with-separate-header.tsx | 67 ++++++++ .../examples/card-with-subdued-section.tsx | 36 +++++ .../pages/examples/card-with-subsection.tsx | 56 +++++++ 17 files changed, 858 insertions(+), 1 deletion(-) create mode 100644 polaris.shopify.com/pages/examples/card-with-all-elements.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-custom-footer-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-custom-react-node-title.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-destructive-footer-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-flushed-section.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-footer-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-header-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-multiple-footer-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-multiple-sections.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-multiple-titled-sections.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-section.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-sections-and-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-sections-and-destructive-action.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-separate-header.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-subdued-section.tsx create mode 100644 polaris.shopify.com/pages/examples/card-with-subsection.tsx diff --git a/polaris.shopify.com/content/components/layout-and-structure/card.mdx b/polaris.shopify.com/content/components/layout-and-structure/card.mdx index 319c3840f1e..eaef575d20b 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/card.mdx +++ b/polaris.shopify.com/content/components/layout-and-structure/card.mdx @@ -26,7 +26,7 @@ examples: - fileName: card-default.tsx title: Default description: >- - By default, cards have an 8px border radius and uses `--p-color-bg-surface` as the background and `--p-shadow-300` as the shadow. There is padding of `space-500` (20px) around children and `space-400` (16px) for small screens. + By default, cards have an 8px border radius and uses `--p-color-bg-surface` as the background and `--p-shadow-300` as the shadow. There is padding of `space-400` (16px) around children. - fileName: card-with-subdued-background.tsx title: With subdued background description: >- @@ -39,6 +39,70 @@ examples: title: With responsive border radius description: >- Use the `roundedAbove` property to adjust the border radius of the card based on a set breakpoint. + - fileName: card-with-section.tsx + title: With section + description: >- + Use when you have a distinct piece of information to communicate to merchants. + - fileName: card-with-subdued-section.tsx + title: With subdued section + description: >- + Use to indicate when one of the sections in your card contains inactive or disabled content. + - fileName: card-with-multiple-sections.tsx + title: With multiple sections + description: >- + Use when you have two related but distinct pieces of information to communicate to merchants. Multiple sections can help break up complicated concepts to make them easier to scan and understand. + - fileName: card-with-multiple-titled-sections.tsx + title: With multiple titled sections + description: >- + Use when you have two related but distinct pieces of information to communicate to merchants that are complex enough to require a title to introduce them. + - fileName: card-with-subsection.tsx + title: With subsection + description: >- + Use when your card sections need further categorization. + - fileName: card-with-flushed-section.tsx + title: With flushed section + description: >- + Use when you need further control over the spacing of your card sections. + - fileName: card-with-sections-and-actions.tsx + title: With sections and actions + description: >- + Use when your card section has actions that apply only to that section. + - fileName: card-with-sections-and-destructive-action.tsx + title: With sections and destructive action + description: >- + Use when a card action applies only to one section and will delete merchant data or be otherwise difficult to recover from. + - fileName: card-with-separate-header.tsx + title: With separate header + description: >- + Use to be able to use custom React elements as header content. + - fileName: card-with-header-actions.tsx + title: With header actions + description: >- + Use for less important card actions, or actions merchants may do before reviewing the contents of the card. For example, merchants may want to add items to a card containing a long list, or enter a customer’s new address. + - fileName: card-with-footer-actions.tsx + title: With footer actions + description: >- + Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card. For example, merchants should review the contents of a shipment before an important action like adding tracking information. + - fileName: card-with-multiple-footer-actions.tsx + title: With multiple footer actions + description: >- + Use when there are multiple secondary footer actions that are rendered in an action list popover activated by a disclosure button. + - fileName: card-with-custom-footer-actions.tsx + title: With custom footer actions + description: >- + Use to present actionable content that is optional or not the primary purpose of the page. + - fileName: card-with-destructive-footer-actions.tsx + title: With destructive footer action + description: >- + Use when a card action will delete merchant data or be otherwise difficult to recover from. + - fileName: card-with-custom-react-node-title.tsx + title: With custom React Node title + description: >- + Use to render custom content such as icons, links, or buttons in a card section’s header. + - fileName: card-with-all-elements.tsx + title: With all elements + description: >- + Use as a broad example that includes using other layout components to build out the card. previewImg: /images/components/layout-and-structure/card.png --- diff --git a/polaris.shopify.com/pages/examples/card-with-all-elements.tsx b/polaris.shopify.com/pages/examples/card-with-all-elements.tsx new file mode 100644 index 00000000000..fdfb77bf3e1 --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-all-elements.tsx @@ -0,0 +1,147 @@ +import React, {useState} from 'react'; +import { + ActionList, + Bleed, + BlockStack, + Box, + Button, + ButtonGroup, + Card, + InlineGrid, + InlineStack, + List, + Popover, + ResourceList, + Text, +} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithAllElements() { + const [actionActive, toggleAction] = useState(false); + + const handleToggleAction = () => { + toggleAction(!actionActive); + }; + + const items = [{content: 'Gross Sales'}, {content: 'Net Sales'}]; + + const disclosureButtonActivator = ( + + ); + + const disclosureButton = ( + + + + ); + + const salesMarkup = ( + + { + const {sales, amount, url} = item; + return ( + + +
{sales}
+
{amount}
+ + + ); + }} + /> + + ); + + return ( + + + + + Sales + + + + {disclosureButton} + + + + + You can use sales reports to see information about your customers’ + orders based on criteria such as sales over time, by channel, or by + staff. + + + Total Sales Breakdown + + + {salesMarkup} + + + + + Deactivated reports + + + Payouts + Total Sales By Channel + + + + + + + Note + + + The sales reports are available only if your store is on the Shopify + plan or higher. + + + + + + + + + + + ); +} + +export default withPolarisExample(CardWithAllElements); diff --git a/polaris.shopify.com/pages/examples/card-with-custom-footer-actions.tsx b/polaris.shopify.com/pages/examples/card-with-custom-footer-actions.tsx new file mode 100644 index 00000000000..ffb01c25288 --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-custom-footer-actions.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { + BlockStack, + Button, + ButtonGroup, + Card, + InlineStack, + Text, +} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithCustomFooterActions() { + return ( + + + + + Secure your account with 2-step authentication + + + Two-step authentication adds an extra layer of security when logging + in to your account. A special code will be required each time you + log in, ensuring only you can access your account. + + + + + + + + + + + ); +} + +export default withPolarisExample(CardWithCustomFooterActions); diff --git a/polaris.shopify.com/pages/examples/card-with-custom-react-node-title.tsx b/polaris.shopify.com/pages/examples/card-with-custom-react-node-title.tsx new file mode 100644 index 00000000000..17f3b6667fd --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-custom-react-node-title.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { + BlockStack, + Card, + Icon, + InlineStack, + List, + Text, +} from '@shopify/polaris'; +import {ProductsMinor} from '@shopify/polaris-icons'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithCustomReactNodeTitle() { + return ( + + + + Products + + + + + + New Products + + + + + Socks + Super Shoes + + + + ); +} + +export default withPolarisExample(CardWithCustomReactNodeTitle); diff --git a/polaris.shopify.com/pages/examples/card-with-destructive-footer-actions.tsx b/polaris.shopify.com/pages/examples/card-with-destructive-footer-actions.tsx new file mode 100644 index 00000000000..9a577dc73ee --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-destructive-footer-actions.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { + BlockStack, + Button, + ButtonGroup, + Card, + InlineStack, + List, + Text, +} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithDestructiveFooterActions() { + return ( + + + + Shipment 1234 + + + + Items + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + + + + + + + ); +} + +export default withPolarisExample(CardWithDestructiveFooterActions); diff --git a/polaris.shopify.com/pages/examples/card-with-flushed-section.tsx b/polaris.shopify.com/pages/examples/card-with-flushed-section.tsx new file mode 100644 index 00000000000..74f6b7bbbc6 --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-flushed-section.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import {Bleed, Box, Card, Image, Text} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithFlushedSection() { + return ( + + + a sheet with purple and orange stripes + + + You can use sales reports to see information about your customers’ + orders based on criteria such as sales over time, by channel, or by + staff. + + + + + ); +} + +export default withPolarisExample(CardWithFlushedSection); diff --git a/polaris.shopify.com/pages/examples/card-with-footer-actions.tsx b/polaris.shopify.com/pages/examples/card-with-footer-actions.tsx new file mode 100644 index 00000000000..dc410210cab --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-footer-actions.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { + BlockStack, + Button, + ButtonGroup, + Card, + InlineStack, + List, + Text, +} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithFooterActions() { + return ( + + + + Shipment 1234 + + + + Items + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + + + + + + + ); +} + +export default withPolarisExample(CardWithFooterActions); diff --git a/polaris.shopify.com/pages/examples/card-with-header-actions.tsx b/polaris.shopify.com/pages/examples/card-with-header-actions.tsx new file mode 100644 index 00000000000..ed582d1a8f0 --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-header-actions.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import {BlockStack, Button, Card, InlineGrid, Text} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithHeaderActions() { + return ( + + + + + Variants + + + + + Add variants if this product comes in multiple versions, like + different sizes or colors. + + + + ); +} + +export default withPolarisExample(CardWithHeaderActions); diff --git a/polaris.shopify.com/pages/examples/card-with-multiple-footer-actions.tsx b/polaris.shopify.com/pages/examples/card-with-multiple-footer-actions.tsx new file mode 100644 index 00000000000..aae8be7b491 --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-multiple-footer-actions.tsx @@ -0,0 +1,75 @@ +import React, {useState} from 'react'; +import { + ActionList, + BlockStack, + Button, + ButtonGroup, + Card, + InlineStack, + List, + Popover, + Text, +} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithMultipleFooterActions() { + const [actionActive, toggleAction] = useState(false); + + const handleToggleAction = () => { + toggleAction(!actionActive); + }; + + const items = [ + {content: 'Cancel shipment', destructive: true}, + {content: 'Add another shipment', disabled: true}, + ]; + + const disclosureButtonActivator = ( + + ); + + const disclosureButton = ( + + + + ); + + return ( + + + + Shipment 1234 + + + + Items + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + {disclosureButton} + + + + + + ); +} + +export default withPolarisExample(CardWithMultipleFooterActions); diff --git a/polaris.shopify.com/pages/examples/card-with-multiple-sections.tsx b/polaris.shopify.com/pages/examples/card-with-multiple-sections.tsx new file mode 100644 index 00000000000..8f8a61356a9 --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-multiple-sections.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import {Box, Card, Text} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithMultipleSections() { + return ( + + + Online store dashboard + + + + View a summary of your online store’s performance. + + + + + View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. + + + + ); +} + +export default withPolarisExample(CardWithMultipleSections); diff --git a/polaris.shopify.com/pages/examples/card-with-multiple-titled-sections.tsx b/polaris.shopify.com/pages/examples/card-with-multiple-titled-sections.tsx new file mode 100644 index 00000000000..ae80b62188a --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-multiple-titled-sections.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import {BlockStack, Box, Card, Text} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithMultipleTitledSections() { + return ( + + + Online store dashboard + + + + + Reports + + + View a summary of your online store’s performance. + + + + + + + Summary + + + View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. + + + + + ); +} + +export default withPolarisExample(CardWithMultipleTitledSections); diff --git a/polaris.shopify.com/pages/examples/card-with-section.tsx b/polaris.shopify.com/pages/examples/card-with-section.tsx new file mode 100644 index 00000000000..6082732fb63 --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-section.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import {Box, Card, Text} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithSection() { + return ( + + + Online store dashboard + + + + View a summary of your online store’s performance. + + + + ); +} + +export default withPolarisExample(CardWithSection); diff --git a/polaris.shopify.com/pages/examples/card-with-sections-and-actions.tsx b/polaris.shopify.com/pages/examples/card-with-sections-and-actions.tsx new file mode 100644 index 00000000000..f86e5f3e4bc --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-sections-and-actions.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import {BlockStack, Button, Card, InlineGrid, Text} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithSectionsAndActions() { + return ( + + + + + Customer + + + John Smith + + + + + + Contact Information + + + + + john.smith@example.com + + + + + ); +} + +export default withPolarisExample(CardWithSectionsAndActions); diff --git a/polaris.shopify.com/pages/examples/card-with-sections-and-destructive-action.tsx b/polaris.shopify.com/pages/examples/card-with-sections-and-destructive-action.tsx new file mode 100644 index 00000000000..9d3d8133d5b --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-sections-and-destructive-action.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { + BlockStack, + Button, + ButtonGroup, + Card, + InlineGrid, + Text, +} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithSectionsAndDestructiveAction() { + return ( + + + + + Customer + + + John Smith + + + + + + Contact Information + + + + + + + + john.smith@example.com + + + + + ); +} + +export default withPolarisExample(CardWithSectionsAndDestructiveAction); diff --git a/polaris.shopify.com/pages/examples/card-with-separate-header.tsx b/polaris.shopify.com/pages/examples/card-with-separate-header.tsx new file mode 100644 index 00000000000..1da8313194b --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-separate-header.tsx @@ -0,0 +1,67 @@ +import React, {useState} from 'react'; +import { + ActionList, + BlockStack, + Button, + ButtonGroup, + Card, + InlineGrid, + List, + Popover, + Text, +} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithSeparateHeader() { + const [actionActive, toggleAction] = useState(false); + + const handleToggleAction = () => { + toggleAction(!actionActive); + }; + + const items = [{content: 'Member'}, {content: 'Admin'}]; + + const disclosureButtonActivator = ( + + ); + + const disclosureButton = ( + + + + ); + + return ( + + + + + Staff accounts + + + + {disclosureButton} + + + + Felix Crafford + Ezequiel Manno + + + + ); +} + +export default withPolarisExample(CardWithSeparateHeader); diff --git a/polaris.shopify.com/pages/examples/card-with-subdued-section.tsx b/polaris.shopify.com/pages/examples/card-with-subdued-section.tsx new file mode 100644 index 00000000000..a6704def169 --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-subdued-section.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import {Bleed, BlockStack, Box, Card, List, Text} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithSubduedSection() { + return ( + + + + Staff accounts + + + + Felix Crafford + Ezequiel Manno + + + + + + + + Deactivated staff accounts + + + Felix Crafford + Ezequiel Manno + + + + + + ); +} + +export default withPolarisExample(CardWithSubduedSection); diff --git a/polaris.shopify.com/pages/examples/card-with-subsection.tsx b/polaris.shopify.com/pages/examples/card-with-subsection.tsx new file mode 100644 index 00000000000..a9bb03ad729 --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-subsection.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import {BlockStack, Box, Card, Text} from '@shopify/polaris'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function CardWithSubsection() { + return ( + + + + + Customer + + + John Smith + + + + + + Addresses + + + + 123 First St + + + Somewhere + + + The Universe + + + + + 123 Second St + + + Somewhere + + + The Universe + + + + + + + A single subsection without a sibling has no visual appearance + + + + + ); +} + +export default withPolarisExample(CardWithSubsection); From 308520501a2dd371687b3ab93dccaa817b042632 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Tue, 21 Nov 2023 12:45:42 -0500 Subject: [PATCH 7/7] [Card] Update `Box` usage and references to 'critical' --- .../src/components/Card/Card.stories.tsx | 24 +++++++++---------- .../components/layout-and-structure/card.mdx | 8 +++---- .../pages/examples/card-with-all-elements.tsx | 4 ++-- ... => card-with-critical-footer-actions.tsx} | 4 ++-- ...ard-with-sections-and-critical-action.tsx} | 4 ++-- .../pages/examples/card-with-subsection.tsx | 18 +++++++------- 6 files changed, 31 insertions(+), 31 deletions(-) rename polaris.shopify.com/pages/examples/{card-with-destructive-footer-actions.tsx => card-with-critical-footer-actions.tsx} (91%) rename polaris.shopify.com/pages/examples/{card-with-sections-and-destructive-action.tsx => card-with-sections-and-critical-action.tsx} (91%) diff --git a/polaris-react/src/components/Card/Card.stories.tsx b/polaris-react/src/components/Card/Card.stories.tsx index e2ab9d8e7cb..7722eb23aa7 100644 --- a/polaris-react/src/components/Card/Card.stories.tsx +++ b/polaris-react/src/components/Card/Card.stories.tsx @@ -201,12 +201,12 @@ export function WithSubsection() { John Smith - +
Addresses - +
123 First St @@ -216,8 +216,8 @@ export function WithSubsection() { The Universe - - +
+
123 Second St @@ -227,14 +227,14 @@ export function WithSubsection() { The Universe - +
- - +
+
A single subsection without a sibling has no visual appearance - +
); @@ -314,7 +314,7 @@ export function WithSectionsAndActions() { ); } -export function WithSectionsAndDestructiveAction() { +export function WithSectionsAndCriticalAction() { return ( @@ -560,7 +560,7 @@ export function WithCustomFooterActions() { ); } -export function WithDestructiveFooterActions() { +export function WithCriticalFooterActions() { return ( @@ -650,7 +650,7 @@ export function WithAllElements() { ); const salesMarkup = ( - +
- +
); return ( diff --git a/polaris.shopify.com/content/components/layout-and-structure/card.mdx b/polaris.shopify.com/content/components/layout-and-structure/card.mdx index eaef575d20b..bc032f8bef6 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/card.mdx +++ b/polaris.shopify.com/content/components/layout-and-structure/card.mdx @@ -67,8 +67,8 @@ examples: title: With sections and actions description: >- Use when your card section has actions that apply only to that section. - - fileName: card-with-sections-and-destructive-action.tsx - title: With sections and destructive action + - fileName: card-with-sections-and-critical-action.tsx + title: With sections and critical action description: >- Use when a card action applies only to one section and will delete merchant data or be otherwise difficult to recover from. - fileName: card-with-separate-header.tsx @@ -91,8 +91,8 @@ examples: title: With custom footer actions description: >- Use to present actionable content that is optional or not the primary purpose of the page. - - fileName: card-with-destructive-footer-actions.tsx - title: With destructive footer action + - fileName: card-with-critical-footer-actions.tsx + title: With critical footer action description: >- Use when a card action will delete merchant data or be otherwise difficult to recover from. - fileName: card-with-custom-react-node-title.tsx diff --git a/polaris.shopify.com/pages/examples/card-with-all-elements.tsx b/polaris.shopify.com/pages/examples/card-with-all-elements.tsx index fdfb77bf3e1..18bac8b994b 100644 --- a/polaris.shopify.com/pages/examples/card-with-all-elements.tsx +++ b/polaris.shopify.com/pages/examples/card-with-all-elements.tsx @@ -42,7 +42,7 @@ function CardWithAllElements() { ); const salesMarkup = ( - +
- +
); return ( diff --git a/polaris.shopify.com/pages/examples/card-with-destructive-footer-actions.tsx b/polaris.shopify.com/pages/examples/card-with-critical-footer-actions.tsx similarity index 91% rename from polaris.shopify.com/pages/examples/card-with-destructive-footer-actions.tsx rename to polaris.shopify.com/pages/examples/card-with-critical-footer-actions.tsx index 9a577dc73ee..581a786737c 100644 --- a/polaris.shopify.com/pages/examples/card-with-destructive-footer-actions.tsx +++ b/polaris.shopify.com/pages/examples/card-with-critical-footer-actions.tsx @@ -10,7 +10,7 @@ import { } from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function CardWithDestructiveFooterActions() { +function CardWithCriticalFooterActions() { return ( @@ -50,4 +50,4 @@ function CardWithDestructiveFooterActions() { ); } -export default withPolarisExample(CardWithDestructiveFooterActions); +export default withPolarisExample(CardWithCriticalFooterActions); diff --git a/polaris.shopify.com/pages/examples/card-with-sections-and-destructive-action.tsx b/polaris.shopify.com/pages/examples/card-with-sections-and-critical-action.tsx similarity index 91% rename from polaris.shopify.com/pages/examples/card-with-sections-and-destructive-action.tsx rename to polaris.shopify.com/pages/examples/card-with-sections-and-critical-action.tsx index 9d3d8133d5b..3c7a217aebd 100644 --- a/polaris.shopify.com/pages/examples/card-with-sections-and-destructive-action.tsx +++ b/polaris.shopify.com/pages/examples/card-with-sections-and-critical-action.tsx @@ -9,7 +9,7 @@ import { } from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function CardWithSectionsAndDestructiveAction() { +function CardWithSectionsAndCriticalAction() { return ( @@ -53,4 +53,4 @@ function CardWithSectionsAndDestructiveAction() { ); } -export default withPolarisExample(CardWithSectionsAndDestructiveAction); +export default withPolarisExample(CardWithSectionsAndCriticalAction); diff --git a/polaris.shopify.com/pages/examples/card-with-subsection.tsx b/polaris.shopify.com/pages/examples/card-with-subsection.tsx index a9bb03ad729..7c53615730b 100644 --- a/polaris.shopify.com/pages/examples/card-with-subsection.tsx +++ b/polaris.shopify.com/pages/examples/card-with-subsection.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {BlockStack, Box, Card, Text} from '@shopify/polaris'; +import {BlockStack, Card, Text} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function CardWithSubsection() { @@ -14,12 +14,12 @@ function CardWithSubsection() { John Smith - +
Addresses - +
123 First St @@ -29,8 +29,8 @@ function CardWithSubsection() { The Universe - - +
+
123 Second St @@ -40,14 +40,14 @@ function CardWithSubsection() { The Universe - +
- - +
+
A single subsection without a sibling has no visual appearance - +
);