From d47d945d0dba4b3fe0b44bb8d3f88f677810d05a Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Tue, 11 Apr 2023 09:13:05 -0400 Subject: [PATCH 01/10] Test Card compositions in Playground --- polaris-react/playground/Playground.tsx | 367 +++++++++++++++++- .../AlphaCard/AlphaCard.stories.tsx | 177 ++++++++- 2 files changed, 541 insertions(+), 3 deletions(-) diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx index 355f6b984f2..981dfb991ab 100644 --- a/polaris-react/playground/Playground.tsx +++ b/polaris-react/playground/Playground.tsx @@ -1,11 +1,376 @@ import React from 'react'; -import {Page} from '../src'; +import { + Page, + AlphaStack, + Card, + AlphaCard, + Columns, + Text, + List, + ButtonGroup, + Divider, + Box, + Inline, + Popover, + Button, + ActionList, + LegacyStack, + Bleed, +} from '../src'; +import {useToggle} from '../src/utilities/use-toggle'; +import {useI18n} from '../src/utilities/i18n'; export function Playground() { + const i18n = useI18n(); + const { + value: secondaryActionsPopoverOpen, + toggle: toggleSecondaryActionsPopoverOpen, + } = useToggle(false); + + let secondaryFooterActionsDisclosureText = null; + return ( {/* Add the code you want to test in here */} + + {/* with header actions */} + +

+ Add variants if this product comes in multiple versions, like + different sizes or colors. +

+ + {/* with header actions */} + + + + + Variants + + + + + + + Add variants if this product comes in multiple versions, like + different sizes or colors. + + + + + {/* with footer actions */} + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + {/* with footer actions */} + + + + Shipment 1234 + + + + + Items + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + + + + + + + + {/* with multiple footer actions */} + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + {/* with multiple footer actions */} + + + + Shipment 1234 + + + + + Items + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + {/* TODO: Move to util */} + + {secondaryFooterActionsDisclosureText || + i18n.translate('Polaris.Common.more')} + + } + onClose={toggleSecondaryActionsPopoverOpen} + > + + + + + + + + + {/* with custom footer actions */} + + + +

+ 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. +

+ + + + + + + + + + + + + + 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. + + + + + + + + + + + + {/* with destructive footer actions */} + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + {/* with destructive footer actions */} + + + + Shipment 1234 + + + + + + Items + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + + + + + + + + + {/* with multiple sections */} + + +

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. +

+ + + {/* with multiple sections */} + + + + 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. + + + + + + + + {/* with multiple titled sections */} + + +

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. +

+ + + {/* with multiple titled sections */} + + + + 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. + + + + + + + + {/* with sections and actions */} + + +

John Smith

+ + +

john.smith@example.com

+ + + {/* with sections and actions */} + + + + Customer + + + John Smith + + + + + {/* */} + + + + + Contact Information + + + + + + + + john.smith@example.com + + + {/* */} + + + + + ); } diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx index 66501686962..8ef15a73057 100644 --- a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx +++ b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx @@ -2,12 +2,16 @@ import React from 'react'; import type {ComponentMeta} from '@storybook/react'; import { AlphaCard, - VerticalStack, Bleed, Box, + Button, + ButtonGroup, + Columns, Divider, + Inline, List, Text, + VerticalStack, } from '@shopify/polaris'; export default { @@ -66,6 +70,32 @@ export function WithResponsivePadding() { ); } +export function WithSection() { + 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 WithSubduedSection() { return ( @@ -87,7 +117,7 @@ export function WithSubduedSection() { - + Deactivated staff accounts @@ -100,3 +130,146 @@ export function WithSubduedSection() { ); } + +export function WithTitledSections() { + 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 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 + + + + + + + + + + + ); +} + +// add with multiple footer actions story + +export function WithCustomFooterAction() { + 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 WithDestructiveFooterAction() { + return ( + + + + Shipment 1234 + + + + + + Items + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + + + + + + + + ); +} From fc2f449e817140dd3e141f62966e60ac43e06e72 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Tue, 18 Apr 2023 12:39:25 -0400 Subject: [PATCH 02/10] Add util for secondary footer actions --- .../src/components/AlphaCard/index.ts | 1 + .../src/components/AlphaCard/utils.tsx | 57 +++++++++++++++++++ polaris-react/src/index.ts | 2 +- 3 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 polaris-react/src/components/AlphaCard/utils.tsx diff --git a/polaris-react/src/components/AlphaCard/index.ts b/polaris-react/src/components/AlphaCard/index.ts index 48ec946eecf..27fe65688b2 100644 --- a/polaris-react/src/components/AlphaCard/index.ts +++ b/polaris-react/src/components/AlphaCard/index.ts @@ -1 +1,2 @@ export * from './AlphaCard'; +export * from './utils'; diff --git a/polaris-react/src/components/AlphaCard/utils.tsx b/polaris-react/src/components/AlphaCard/utils.tsx new file mode 100644 index 00000000000..d3b18d9dc6d --- /dev/null +++ b/polaris-react/src/components/AlphaCard/utils.tsx @@ -0,0 +1,57 @@ +import React from 'react'; + +import {useI18n} from '../../utilities/i18n'; +import {useToggle} from '../../utilities/use-toggle'; +import {Popover} from '../Popover'; +import {Button, buttonFrom} from '../Button'; +import {ActionList} from '../ActionList'; +import type {ComplexAction} from '../../types'; + +interface SecondaryActions { + secondaryActions: ComplexAction[]; + secondaryActionsDisclosureText?: string; + plainButton?: boolean; +} + +export function secondaryActionsFrom({ + secondaryActions, + secondaryActionsDisclosureText, + plainButton = false, +}: SecondaryActions) { + // eslint-disable-next-line react-hooks/rules-of-hooks + const i18n = useI18n(); + const { + value: secondaryActionsPopoverOpen, + toggle: toggleSecondaryActionsPopoverOpen, + // eslint-disable-next-line react-hooks/rules-of-hooks + } = useToggle(false); + + let secondaryActionsMarkup = null; + + if (secondaryActions?.length === 1) { + secondaryActionsMarkup = buttonFrom(secondaryActions[0]); + } + + if (secondaryActions?.length > 1) { + secondaryActionsMarkup = ( + + {secondaryActionsDisclosureText || + i18n.translate('Polaris.Common.more')} + + } + onClose={toggleSecondaryActionsPopoverOpen} + > + + + ); + } + + return <>{secondaryActionsMarkup}; +} diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts index 470b799a391..9ba465a4305 100644 --- a/polaris-react/src/index.ts +++ b/polaris-react/src/index.ts @@ -48,7 +48,7 @@ export type { export {ActionMenu} from './components/ActionMenu'; export type {ActionMenuProps} from './components/ActionMenu'; -export {AlphaCard} from './components/AlphaCard'; +export {AlphaCard, secondaryActionsFrom} from './components/AlphaCard'; export type {AlphaCardProps} from './components/AlphaCard'; export {AlphaFilters} from './components/AlphaFilters'; From 6c2af3421bfe054129cd088718b5623883735931 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Tue, 18 Apr 2023 12:50:14 -0400 Subject: [PATCH 03/10] Revert Playground changes --- polaris-react/playground/Playground.tsx | 367 +----------------------- 1 file changed, 1 insertion(+), 366 deletions(-) diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx index 981dfb991ab..355f6b984f2 100644 --- a/polaris-react/playground/Playground.tsx +++ b/polaris-react/playground/Playground.tsx @@ -1,376 +1,11 @@ import React from 'react'; -import { - Page, - AlphaStack, - Card, - AlphaCard, - Columns, - Text, - List, - ButtonGroup, - Divider, - Box, - Inline, - Popover, - Button, - ActionList, - LegacyStack, - Bleed, -} from '../src'; -import {useToggle} from '../src/utilities/use-toggle'; -import {useI18n} from '../src/utilities/i18n'; +import {Page} from '../src'; export function Playground() { - const i18n = useI18n(); - const { - value: secondaryActionsPopoverOpen, - toggle: toggleSecondaryActionsPopoverOpen, - } = useToggle(false); - - let secondaryFooterActionsDisclosureText = null; - return ( {/* Add the code you want to test in here */} - - {/* with header actions */} - -

- Add variants if this product comes in multiple versions, like - different sizes or colors. -

- - {/* with header actions */} - - - - - Variants - - - - - - - Add variants if this product comes in multiple versions, like - different sizes or colors. - - - - - {/* with footer actions */} - - - - 1 × Oasis Glass, 4-Pack - 1 × Anubis Cup, 2-Pack - - - - {/* with footer actions */} - - - - Shipment 1234 - - - - - Items - - - - 1 × Oasis Glass, 4-Pack - 1 × Anubis Cup, 2-Pack - - - - - - - - - - - - {/* with multiple footer actions */} - - - - 1 × Oasis Glass, 4-Pack - 1 × Anubis Cup, 2-Pack - - - - {/* with multiple footer actions */} - - - - Shipment 1234 - - - - - Items - - - - 1 × Oasis Glass, 4-Pack - 1 × Anubis Cup, 2-Pack - - - - - {/* TODO: Move to util */} - - {secondaryFooterActionsDisclosureText || - i18n.translate('Polaris.Common.more')} - - } - onClose={toggleSecondaryActionsPopoverOpen} - > - - - - - - - - - {/* with custom footer actions */} - - - -

- 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. -

- - - - - - - - - - - - - - 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. - - - - - - - - - - - - {/* with destructive footer actions */} - - - - 1 × Oasis Glass, 4-Pack - 1 × Anubis Cup, 2-Pack - - - - - {/* with destructive footer actions */} - - - - Shipment 1234 - - - - - - Items - - - - 1 × Oasis Glass, 4-Pack - 1 × Anubis Cup, 2-Pack - - - - - - - - - - - - - {/* with multiple sections */} - - -

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. -

- - - {/* with multiple sections */} - - - - 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. - - - - - - - - {/* with multiple titled sections */} - - -

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. -

- - - {/* with multiple titled sections */} - - - - 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. - - - - - - - - {/* with sections and actions */} - - -

John Smith

- - -

john.smith@example.com

- - - {/* with sections and actions */} - - - - Customer - - - John Smith - - - - - {/* */} - - - - - Contact Information - - - - - - - - john.smith@example.com - - - {/* */} - - - - - ); } From 97b8052e2e86b8bdca478ae54104a1b37300a333 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Tue, 18 Apr 2023 12:50:28 -0400 Subject: [PATCH 04/10] [AlphaCard] Add storybook examples for Card compositions --- .../AlphaCard/AlphaCard.stories.tsx | 256 ++++++++++++++++-- 1 file changed, 236 insertions(+), 20 deletions(-) diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx index 8ef15a73057..9d048868534 100644 --- a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx +++ b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx @@ -6,13 +6,17 @@ import { Box, Button, ButtonGroup, - Columns, + HorizontalGrid, Divider, - Inline, + Icon, + Image, + HorizontalStack, List, Text, VerticalStack, + secondaryActionsFrom, } from '@shopify/polaris'; +import {ProductsMajor} from '@shopify/polaris-icons'; export default { component: AlphaCard, @@ -78,7 +82,7 @@ export function WithSection() { Online store dashboard - View a summary of your online store's performance. + View a summary of the performance of your online store. @@ -131,6 +135,55 @@ export function WithSubduedSection() { ); } +export function WithMultipleSections() { + return ( + + + + Online store dashboard + + + View a summary of the performance of your online store. + + + + + + + View a summary of your online store’s performance, including + sales, visitors, top products, and referrals. + + + + + + + ); +} + +export function WithFlushSections() { + 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 WithTitledSections() { return ( @@ -167,18 +220,106 @@ export function WithTitledSections() { ); } +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 WithCustomReactNodeTitle() { + return ( + + + + Products + + + + + + New Products + + + + + + + Felix Crafford + Ezequiel Manno + + + + ); +} + +export function WithSeparateHeader() { + return ( + + + + + Staff accounts + + + + {secondaryActionsFrom({ + secondaryActions: [{content: 'Member'}, {content: 'Admin'}], + secondaryActionsDisclosureText: 'Add account', + plainButton: true, + })} + + + + Felix Crafford + Ezequiel Manno + + + + ); +} + export function WithHeaderActions() { return ( - + Variants - + - + Add variants if this product comes in multiple versions, like different sizes or colors. @@ -197,7 +338,7 @@ export function WithFooterActions() { - + Items @@ -206,20 +347,54 @@ export function WithFooterActions() { 1 × Anubis Cup, 2-Pack - + - + {secondaryActionsFrom({ + secondaryActions: [{content: 'Edit shipment'}], + })} - + ); } -// add with multiple footer actions story +export function WithMultipleFooterActions() { + return ( + + + + Shipment 1234 + + + + + Items + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + {secondaryActionsFrom({ + secondaryActions: [ + {content: 'Cancel shipment', destructive: true}, + {content: 'Add another shipment', disabled: true}, + ], + })} + + + + + + ); +} -export function WithCustomFooterAction() { +export function WithCustomFooterActions() { return ( @@ -232,18 +407,20 @@ export function WithCustomFooterAction() { in, ensuring only you can access your account. - + - + {secondaryActionsFrom({ + secondaryActions: [{content: 'Enable two-step authentication'}], + })} - + ); } -export function WithDestructiveFooterAction() { +export function WithDestructiveFooterActions() { return ( @@ -253,7 +430,7 @@ export function WithDestructiveFooterAction() { - + Items @@ -263,12 +440,51 @@ export function WithDestructiveFooterAction() { - + - + {secondaryActionsFrom({ + secondaryActions: [ + {content: 'Cancel shipment', destructive: true}, + ], + })} - + + + + ); +} + +export function WithSectionsAndActions() { + return ( + + + + Customer + + + John Smith + + + + + + + + + Contact Information + + + + + + + + john.smith@example.com + + + + ); From 37c23913f17892d45a138c6d5a5729c61dcdfc3a Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 20 Apr 2023 11:37:59 -0400 Subject: [PATCH 05/10] [AlphaCard] Add remaining storybook examples for Card compositions --- .../AlphaCard/AlphaCard.stories.tsx | 261 ++++++++++++++++-- 1 file changed, 234 insertions(+), 27 deletions(-) diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx index 9d048868534..b6f198e6ba3 100644 --- a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx +++ b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx @@ -11,7 +11,9 @@ import { Icon, Image, HorizontalStack, + LegacyStack, List, + ResourceList, Text, VerticalStack, secondaryActionsFrom, @@ -24,7 +26,7 @@ export default { export function Default() { return ( - + Online store dashboard @@ -37,7 +39,7 @@ export function Default() { export function WithBackgroundSubdued() { return ( - + Online store dashboard @@ -135,6 +137,64 @@ 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 WithMultipleSections() { return ( @@ -161,7 +221,7 @@ export function WithMultipleSections() { ); } -export function WithFlushSections() { +export function WithFlushSection() { return ( @@ -256,9 +316,44 @@ export function WithMultipleTitledSections() { ); } +export function WithSectionsAndActions() { + return ( + + + + Customer + + + John Smith + + + + + + + + + Contact Information + + + + + + + + john.smith@example.com + + + + + + + ); +} + export function WithCustomReactNodeTitle() { return ( - + Products @@ -274,8 +369,8 @@ export function WithCustomReactNodeTitle() { - Felix Crafford - Ezequiel Manno + Socks + Super Shoes @@ -284,7 +379,7 @@ export function WithCustomReactNodeTitle() { export function WithSeparateHeader() { return ( - + @@ -310,7 +405,7 @@ export function WithSeparateHeader() { export function WithHeaderActions() { return ( - + @@ -331,7 +426,7 @@ export function WithHeaderActions() { export function WithFooterActions() { return ( - + Shipment 1234 @@ -362,7 +457,7 @@ export function WithFooterActions() { export function WithMultipleFooterActions() { return ( - + Shipment 1234 @@ -396,7 +491,7 @@ export function WithMultipleFooterActions() { export function WithCustomFooterActions() { return ( - + Secure your account with 2-step authentication @@ -406,7 +501,6 @@ export function WithCustomFooterActions() { in to your account. A special code will be required each time you log in, ensuring only you can access your account. - {secondaryActionsFrom({ @@ -422,12 +516,11 @@ export function WithCustomFooterActions() { export function WithDestructiveFooterActions() { return ( - + Shipment 1234 - @@ -439,7 +532,6 @@ export function WithDestructiveFooterActions() { 1 × Anubis Cup, 2-Pack - {secondaryActionsFrom({ @@ -455,7 +547,7 @@ export function WithDestructiveFooterActions() { ); } -export function WithSectionsAndActions() { +export function WithDestructiveAction() { return ( @@ -468,23 +560,138 @@ export function WithSectionsAndActions() { - - - - - Contact Information - - - - - - + + + + Contact information + + + + + + john.smith@example.com + + + + + + ); +} + +export function WithAllElements() { + return ( + + + + + Sales + + + + {secondaryActionsFrom({ + secondaryActions: [ + {content: 'Gross Sales'}, + {content: 'Net Sales'}, + ], + secondaryActionsDisclosureText: 'View Sales', + plainButton: true, + })} + + + + 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 + + { + const {sales, amount, url} = item; + return ( + + + {sales} + {amount} + + + ); + }} + /> + + + + + + Deactivated reports + + + Payouts + Total Sales By Channel + + + + + + + + + + + Note + + + The sales reports are available only if your store is on the + Shopify plan or higher. + + + + + {secondaryActionsFrom({ + secondaryActions: [{content: 'Dismiss'}], + })} + + + + + + ); From 176e920174eabe7f74e1703b469a7321116406d8 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 20 Apr 2023 11:43:40 -0400 Subject: [PATCH 06/10] [polaris.shopify.com] Update existing AlphaCard examples --- .../pages/examples/alpha-card-default.tsx | 7 ++++--- .../examples/alpha-card-with-rounded-corners.tsx | 9 +++++---- .../alpha-card-with-subdued-background.tsx | 9 +++++---- .../examples/alpha-card-with-varying-padding.tsx | 15 ++++++++------- 4 files changed, 22 insertions(+), 18 deletions(-) diff --git a/polaris.shopify.com/pages/examples/alpha-card-default.tsx b/polaris.shopify.com/pages/examples/alpha-card-default.tsx index 50986b57f56..ae7fe212f12 100644 --- a/polaris.shopify.com/pages/examples/alpha-card-default.tsx +++ b/polaris.shopify.com/pages/examples/alpha-card-default.tsx @@ -1,8 +1,9 @@ -import {AlphaCard, Text} from '@shopify/polaris'; import React from 'react'; +import {AlphaCard, Text} from '@shopify/polaris'; + import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function AlphaCardExample() { +function AlphaCardDefaultExample() { return ( @@ -12,4 +13,4 @@ function AlphaCardExample() { ); } -export default withPolarisExample(AlphaCardExample); +export default withPolarisExample(AlphaCardDefaultExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-rounded-corners.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-rounded-corners.tsx index dade684c47f..913d5af4a55 100644 --- a/polaris.shopify.com/pages/examples/alpha-card-with-rounded-corners.tsx +++ b/polaris.shopify.com/pages/examples/alpha-card-with-rounded-corners.tsx @@ -1,10 +1,11 @@ -import {AlphaCard, Text} from '@shopify/polaris'; import React from 'react'; +import {AlphaCard, Text} from '@shopify/polaris'; + import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function AlphaCardExample() { +function AlphaCardWithRoundedCornersExample() { return ( - + Content inside a card @@ -12,4 +13,4 @@ function AlphaCardExample() { ); } -export default withPolarisExample(AlphaCardExample); +export default withPolarisExample(AlphaCardWithRoundedCornersExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-subdued-background.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-subdued-background.tsx index a92394830dc..7c678269a3e 100644 --- a/polaris.shopify.com/pages/examples/alpha-card-with-subdued-background.tsx +++ b/polaris.shopify.com/pages/examples/alpha-card-with-subdued-background.tsx @@ -1,10 +1,11 @@ -import {AlphaCard, Text} from '@shopify/polaris'; import React from 'react'; +import {AlphaCard, Text} from '@shopify/polaris'; + import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function AlphaCardExample() { +function AlphaCardWithSubduedBackgroundExample() { return ( - + Content inside a card @@ -12,4 +13,4 @@ function AlphaCardExample() { ); } -export default withPolarisExample(AlphaCardExample); +export default withPolarisExample(AlphaCardWithSubduedBackgroundExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx index 646d221df08..c4cbd8a1d73 100644 --- a/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx +++ b/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx @@ -1,20 +1,21 @@ -import {AlphaCard, Text, VerticalStack} from '@shopify/polaris'; import React from 'react'; +import {AlphaCard, Text, VerticalStack} from '@shopify/polaris'; + import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function AlphaCardExample() { +function AlphaCardWithVaryingPaddingExample() { return ( - + - + - + - + @@ -43,4 +44,4 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { ); }; -export default withPolarisExample(AlphaCardExample); +export default withPolarisExample(AlphaCardWithVaryingPaddingExample); From 3cef6b9c30643e4a9d0facaa93d21111bc542413 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 20 Apr 2023 12:06:26 -0400 Subject: [PATCH 07/10] [polaris.shopify.com] Add responsive padding example --- .../pages/examples/alpha-card-with-varying-padding.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx index c4cbd8a1d73..fbc6b81b82a 100644 --- a/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx +++ b/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx @@ -18,6 +18,9 @@ function AlphaCardWithVaryingPaddingExample() { + + + ); } From 278a4b1a299f9547772f2e4e814e60ad49471203 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 20 Apr 2023 12:24:19 -0400 Subject: [PATCH 08/10] [polaris.shopify.com] Add AlphaCard examples --- .../examples/alpha-card-with-all-elements.tsx | 135 ++++++++++++++++++ .../alpha-card-with-custom-footer-actions.tsx | 39 +++++ ...lpha-card-with-custom-react-node-title.tsx | 41 ++++++ .../alpha-card-with-destructive-action.tsx | 52 +++++++ ...a-card-with-destructive-footer-actions.tsx | 49 +++++++ .../alpha-card-with-flush-section.tsx | 37 +++++ .../alpha-card-with-footer-actions.tsx | 47 ++++++ .../alpha-card-with-header-actions.tsx | 34 +++++ ...lpha-card-with-multiple-footer-actions.tsx | 50 +++++++ .../alpha-card-with-multiple-sections.tsx | 39 +++++ ...pha-card-with-multiple-titled-sections.tsx | 49 +++++++ .../alpha-card-with-rounded-corners.tsx | 2 +- .../examples/alpha-card-with-section.tsx | 39 +++++ .../alpha-card-with-sections-and-actions.tsx | 51 +++++++ .../alpha-card-with-separate-header.tsx | 41 ++++++ .../alpha-card-with-subdued-section.tsx | 49 +++++++ .../examples/alpha-card-with-subsection.tsx | 71 +++++++++ .../alpha-card-with-titled-sections.tsx | 49 +++++++ 18 files changed, 873 insertions(+), 1 deletion(-) create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-all-elements.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-custom-footer-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-custom-react-node-title.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-destructive-action.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-destructive-footer-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-flush-section.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-footer-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-header-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-multiple-footer-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-multiple-sections.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-multiple-titled-sections.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-section.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-sections-and-actions.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-separate-header.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-subdued-section.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-subsection.tsx create mode 100644 polaris.shopify.com/pages/examples/alpha-card-with-titled-sections.tsx diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-all-elements.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-all-elements.tsx new file mode 100644 index 00000000000..6266d7574d1 --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-all-elements.tsx @@ -0,0 +1,135 @@ +import React from 'react'; +import { + AlphaCard, + Bleed, + Box, + Button, + ButtonGroup, + Divider, + HorizontalGrid, + HorizontalStack, + LegacyStack, + List, + ResourceList, + Text, + VerticalStack, + secondaryActionsFrom, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithAllElementsExample() { + return ( + + + + + Sales + + + + {secondaryActionsFrom({ + secondaryActions: [ + {content: 'Gross Sales'}, + {content: 'Net Sales'}, + ], + secondaryActionsDisclosureText: 'View Sales', + plainButton: true, + })} + + + + 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 + + + { + const {sales, amount, url} = item; + return ( + + + {sales} + {amount} + + + ); + }} + /> + + + + + + + + Deactivated reports + + + Payouts + Total Sales By Channel + + + + + + + + + + + Note + + + The sales reports are available only if your store is on the + Shopify plan or higher. + + + + + {secondaryActionsFrom({ + secondaryActions: [{content: 'Dismiss'}], + })} + + + + + + + + + ); +} + +export default withPolarisExample(AlphaCardWithAllElementsExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-custom-footer-actions.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-custom-footer-actions.tsx new file mode 100644 index 00000000000..0bf644b225e --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-custom-footer-actions.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { + AlphaCard, + Button, + ButtonGroup, + HorizontalStack, + Text, + VerticalStack, + secondaryActionsFrom, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithCustomFooterActionsExample() { + 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. + + + + {secondaryActionsFrom({ + secondaryActions: [{content: 'Enable two-step authentication'}], + })} + + + + + + ); +} + +export default withPolarisExample(AlphaCardWithCustomFooterActionsExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-custom-react-node-title.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-custom-react-node-title.tsx new file mode 100644 index 00000000000..58437d27559 --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-custom-react-node-title.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { + AlphaCard, + Box, + HorizontalStack, + Icon, + List, + Text, + VerticalStack, +} from '@shopify/polaris'; +import {ProductsMajor} from '@shopify/polaris-icons'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithCustomReactNodeTitleExample() { + return ( + + + + Products + + + + + + New Products + + + + + + + Socks + Super Shoes + + + + ); +} + +export default withPolarisExample(AlphaCardWithCustomReactNodeTitleExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-destructive-action.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-destructive-action.tsx new file mode 100644 index 00000000000..0901fd257b9 --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-destructive-action.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { + AlphaCard, + Bleed, + Box, + Button, + ButtonGroup, + HorizontalGrid, + Divider, + Text, + VerticalStack, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithDestructiveActionExample() { + return ( + + + + Customer + + + John Smith + + + + + + + + Contact information + + + + + + + + john.smith@example.com + + + + + + + ); +} + +export default withPolarisExample(AlphaCardWithDestructiveActionExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-destructive-footer-actions.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-destructive-footer-actions.tsx new file mode 100644 index 00000000000..97c78732a96 --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-destructive-footer-actions.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { + AlphaCard, + Box, + Button, + ButtonGroup, + HorizontalStack, + List, + Text, + VerticalStack, + secondaryActionsFrom, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithDestructiveFooterActionsExample() { + return ( + + + + Shipment 1234 + + + + + Items + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + {secondaryActionsFrom({ + secondaryActions: [ + {content: 'Cancel shipment', destructive: true}, + ], + })} + + + + + + ); +} + +export default withPolarisExample(AlphaCardWithDestructiveFooterActionsExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-flush-section.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-flush-section.tsx new file mode 100644 index 00000000000..633a78392a0 --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-flush-section.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { + AlphaCard, + Bleed, + Box, + Divider, + Image, + Text, + VerticalStack, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithFlushSectionExample() { + 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(AlphaCardWithFlushSectionExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-footer-actions.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-footer-actions.tsx new file mode 100644 index 00000000000..37a36ef5937 --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-footer-actions.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { + AlphaCard, + Box, + Button, + ButtonGroup, + HorizontalStack, + List, + Text, + VerticalStack, + secondaryActionsFrom, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithFooterActionsExample() { + return ( + + + + Shipment 1234 + + + + + Items + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + {secondaryActionsFrom({ + secondaryActions: [{content: 'Edit shipment'}], + })} + + + + + + ); +} + +export default withPolarisExample(AlphaCardWithFooterActionsExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-header-actions.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-header-actions.tsx new file mode 100644 index 00000000000..25a06f86df8 --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-header-actions.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { + AlphaCard, + Button, + ButtonGroup, + HorizontalGrid, + Text, + VerticalStack, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithHeaderActionsExample() { + return ( + + + + + Variants + + + + + + + Add variants if this product comes in multiple versions, like + different sizes or colors. + + + + ); +} + +export default withPolarisExample(AlphaCardWithHeaderActionsExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-multiple-footer-actions.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-multiple-footer-actions.tsx new file mode 100644 index 00000000000..c453722d0ff --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-multiple-footer-actions.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { + AlphaCard, + Box, + Button, + ButtonGroup, + HorizontalStack, + List, + Text, + VerticalStack, + secondaryActionsFrom, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithMultipleFooterActionsExample() { + return ( + + + + Shipment 1234 + + + + + Items + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + {secondaryActionsFrom({ + secondaryActions: [ + {content: 'Cancel shipment', destructive: true}, + {content: 'Add another shipment', disabled: true}, + ], + })} + + + + + + ); +} + +export default withPolarisExample(AlphaCardWithMultipleFooterActionsExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-multiple-sections.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-multiple-sections.tsx new file mode 100644 index 00000000000..91563f2d44b --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-multiple-sections.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { + AlphaCard, + Bleed, + Box, + Divider, + Text, + VerticalStack, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithMultipleSectionsExample() { + return ( + + + + Online store dashboard + + + View a summary of the performance of your online store. + + + + + + + View a summary of your online store’s performance, including + sales, visitors, top products, and referrals. + + + + + + + ); +} + +export default withPolarisExample(AlphaCardWithMultipleSectionsExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-multiple-titled-sections.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-multiple-titled-sections.tsx new file mode 100644 index 00000000000..963da1da465 --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-multiple-titled-sections.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { + AlphaCard, + Bleed, + Box, + Divider, + Text, + VerticalStack, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithMultipleTitledSectionsExample() { + 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(AlphaCardWithMultipleTitledSectionsExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-rounded-corners.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-rounded-corners.tsx index 913d5af4a55..d9eb31ea1df 100644 --- a/polaris.shopify.com/pages/examples/alpha-card-with-rounded-corners.tsx +++ b/polaris.shopify.com/pages/examples/alpha-card-with-rounded-corners.tsx @@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function AlphaCardWithRoundedCornersExample() { return ( - + Content inside a card diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-section.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-section.tsx new file mode 100644 index 00000000000..a1150e15a86 --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-section.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { + AlphaCard, + Bleed, + Box, + Divider, + Text, + VerticalStack, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithSectionExample() { + return ( + + + + Online store dashboard + + + View a summary of the performance of your online store. + + + + + + + View a summary of your online store’s performance, including + sales, visitors, top products, and referrals. + + + + + + + ); +} + +export default withPolarisExample(AlphaCardWithSectionExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-sections-and-actions.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-sections-and-actions.tsx new file mode 100644 index 00000000000..32674f1b7dc --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-sections-and-actions.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { + AlphaCard, + Bleed, + Box, + Button, + ButtonGroup, + Divider, + HorizontalGrid, + Text, + VerticalStack, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithSectionsAndActionsExample() { + return ( + + + + Customer + + + John Smith + + + + + + + + + Contact Information + + + + + + + + john.smith@example.com + + + + + + + ); +} + +export default withPolarisExample(AlphaCardWithSectionsAndActionsExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-separate-header.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-separate-header.tsx new file mode 100644 index 00000000000..ff558333aff --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-separate-header.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { + AlphaCard, + Button, + ButtonGroup, + HorizontalGrid, + List, + Text, + VerticalStack, + secondaryActionsFrom, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithSeparateHeaderExample() { + return ( + + + + + Staff accounts + + + + {secondaryActionsFrom({ + secondaryActions: [{content: 'Member'}, {content: 'Admin'}], + secondaryActionsDisclosureText: 'Add account', + plainButton: true, + })} + + + + Felix Crafford + Ezequiel Manno + + + + ); +} + +export default withPolarisExample(AlphaCardWithSeparateHeaderExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-subdued-section.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-subdued-section.tsx new file mode 100644 index 00000000000..d5f7595734a --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-subdued-section.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { + AlphaCard, + Bleed, + Box, + Divider, + List, + Text, + VerticalStack, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithSubduedSectionExample() { + return ( + + + + Staff accounts + + + + Felix Crafford + Ezequiel Manno + + + + + + + + + Deactivated staff accounts + + + Felix Crafford + Ezequiel Manno + + + + + + ); +} + +export default withPolarisExample(AlphaCardWithSubduedSectionExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-subsection.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-subsection.tsx new file mode 100644 index 00000000000..e7f79d3c2e2 --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-subsection.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { + AlphaCard, + Bleed, + Box, + Divider, + Text, + VerticalStack, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithSubsectionExample() { + 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(AlphaCardWithSubsectionExample); diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-titled-sections.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-titled-sections.tsx new file mode 100644 index 00000000000..2e6079f0a8d --- /dev/null +++ b/polaris.shopify.com/pages/examples/alpha-card-with-titled-sections.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { + AlphaCard, + Bleed, + Box, + Divider, + Text, + VerticalStack, +} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function AlphaCardWithTitledSectionsExample() { + 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(AlphaCardWithTitledSectionsExample); From 47695c4bc5fd2b7444961b26a41601ae290d782a Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 20 Apr 2023 12:24:35 -0400 Subject: [PATCH 09/10] [polaris.shopify.com] Update AlphaCard page with new examples --- .../layout-and-structure/alpha-card.md | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/polaris.shopify.com/content/components/layout-and-structure/alpha-card.md b/polaris.shopify.com/content/components/layout-and-structure/alpha-card.md index 6914e00462a..8a8ed37abb4 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/alpha-card.md +++ b/polaris.shopify.com/content/components/layout-and-structure/alpha-card.md @@ -42,6 +42,60 @@ examples: title: Rounded corners description: >- Cards can have a border radius applied responsively with the `roundedAbove` prop. + - fileName: alpha-card-with-section.tsx + title: With section + description: >- + Use when you have a distinct piece of information to communicate to merchants. + - fileName: alpha-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: alpha-card-with-subsection.tsx + title: With subsection + description: >- + Use when your card sections need further categorization. + - fileName: alpha-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: alpha-card-with-flush-section.tsx + title: With flush section + description: Use when you need further control over the spacing of your card sections. + - fileName: alpha-card-with-titled-sections.tsx + title: With multiple titled sections + description: Use when you have a distinct piece of information to communicate to merchants that is complex enough to require a title to introduce it. + - fileName: alpha-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: alpha-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: alpha-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: alpha-card-with-separate-header.tsx + title: With separate header + description: Use to be able to use custom React elements as header content. + - fileName: alpha-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: alpha-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: alpha-card-with-multiple-footer-actions.tsx + title: With multiple footer actions + description: When multiple secondary footer actions are provided, they will render in an action list popover activated by a disclosure button. The disclosure button text can be customized with the `secondaryFooterActionsDisclosureText` prop in the `secondaryActionsFrom` utility function. + - fileName: alpha-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: alpha-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: alpha-card-with-destructive-action.tsx + title: With 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: alpha-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. --- ## Best practices From 4c45271f026b79727d17e0c55cab5e98cc2b14bb Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 20 Apr 2023 12:25:43 -0400 Subject: [PATCH 10/10] Add changeset --- .changeset/tender-cows-promise.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/tender-cows-promise.md diff --git a/.changeset/tender-cows-promise.md b/.changeset/tender-cows-promise.md new file mode 100644 index 00000000000..aeb3dfea9d4 --- /dev/null +++ b/.changeset/tender-cows-promise.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris': minor +'polaris.shopify.com': minor +--- + +Added Storybook examples for `AlphaCard` to support `LegacyCard` compositions