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 diff --git a/polaris-react/src/components/Card/Card.stories.tsx b/polaris-react/src/components/Card/Card.stories.tsx index ca90f6688f7..7722eb23aa7 100644 --- a/polaris-react/src/components/Card/Card.stories.tsx +++ b/polaris-react/src/components/Card/Card.stories.tsx @@ -1,14 +1,23 @@ -import React from 'react'; +import React, {useState} from 'react'; import type {ComponentMeta} from '@storybook/react'; import { - Card, + ActionList, BlockStack, Bleed, Box, - Divider, + Button, + ButtonGroup, + Card, + Icon, + Image, + InlineGrid, + InlineStack, List, + Popover, + ResourceList, Text, } from '@shopify/polaris'; +import {ProductsMinor} from '@shopify/polaris-icons'; export default { component: Card, @@ -16,9 +25,9 @@ export default { export function Default() { return ( - - - + + + Online store dashboard

View a summary of your online store’s performance.

@@ -27,11 +36,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 +49,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 +62,11 @@ export function WithBorderRadiusRoundedAbove() { ); } -export function WithResponsivePadding() { +export function WithSubdued() { return ( - - - + + + Online store dashboard

View a summary of your online store’s performance.

@@ -66,28 +75,55 @@ export function WithResponsivePadding() { ); } +export function WithSubduedForSecondaryContent() { + return ( + + + + Deactivated staff accounts + + + Felix Crafford + Ezequiel Manno + + + + ); +} + +export function WithSection() { + return ( + + + Online store dashboard + + + + View a summary of your online store’s performance. + + + + ); +} + export function WithSubduedSection() { return ( - - + + Staff accounts - + Felix Crafford Ezequiel Manno - - - + + - + Deactivated staff accounts @@ -100,3 +136,618 @@ export function WithSubduedSection() { ); } + +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 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 WithFlushedSection() { + 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 WithFlushedSectionAndSubduedSection() { + 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 WithSectionsAndActions() { + return ( + + + + + Customer + + + John Smith + + + + + + Contact Information + + + + + john.smith@example.com + + + + + ); +} + +export function WithSectionsAndCriticalAction() { + 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 WithCriticalFooterActions() { + 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. + + + + + + + + + + + ); +} 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..bc032f8bef6 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-400` (16px) around children. - fileName: card-with-subdued-background.tsx title: With subdued background description: >- @@ -35,10 +35,74 @@ 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. + - 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-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 + 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-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 + 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-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-all-elements.tsx b/polaris.shopify.com/pages/examples/card-with-all-elements.tsx new file mode 100644 index 00000000000..18bac8b994b --- /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-critical-footer-actions.tsx b/polaris.shopify.com/pages/examples/card-with-critical-footer-actions.tsx new file mode 100644 index 00000000000..581a786737c --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-critical-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 CardWithCriticalFooterActions() { + return ( + + + + Shipment 1234 + + + + Items + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + + + + + + + + ); +} + +export default withPolarisExample(CardWithCriticalFooterActions); 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-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-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-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-critical-action.tsx b/polaris.shopify.com/pages/examples/card-with-sections-and-critical-action.tsx new file mode 100644 index 00000000000..3c7a217aebd --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-sections-and-critical-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 CardWithSectionsAndCriticalAction() { + return ( + + + + + Customer + + + John Smith + + + + + + Contact Information + + + + + + + + john.smith@example.com + + + + + ); +} + +export default withPolarisExample(CardWithSectionsAndCriticalAction); 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-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-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..7c53615730b --- /dev/null +++ b/polaris.shopify.com/pages/examples/card-with-subsection.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import {BlockStack, 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); 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);