Skip to content

Commit a32cff7

Browse files
laurkimlaurkim
committed
[polaris.shopify.com] Add LegacyCard component page and examples
1 parent bd60155 commit a32cff7

19 files changed

+708
-0
lines changed

‎polaris.shopify.com/content/components/legacy-card.md‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
---
2+
title: LegacyCard
3+
description: Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to scan, read, and get things done.
4+
category: Structure
5+
keywords:
6+
- layout
7+
- container
8+
- box
9+
- grid
10+
- panel
11+
- card with call to action in the footer
12+
- card with call to action in the heading
13+
- card with call to action in a section
14+
- card with button in the footer
15+
- card with button in the heading
16+
- card with multiple sections
17+
- card with subsections
18+
- sectioned card
19+
- card with a subdued section
20+
- subdued card for secondary content
21+
- callout
22+
- call out
23+
- legacy card
24+
examples:
25+
- fileName: legacy-card-default.tsx
26+
title: Default
27+
description: Use when you have a simple message to communicate to merchants that doesn’t require any secondary steps.
28+
- fileName: legacy-card-with-header-actions.tsx
29+
title: With header actions
30+
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.
31+
- fileName: legacy-card-with-footer-actions.tsx
32+
title: With footer actions
33+
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. Footer actions can be left or right aligned with the `footerActionAlignment` prop.
34+
- fileName: legacy-card-with-multiple-footer-actions.tsx
35+
title: With multiple footer actions
36+
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.
37+
- fileName: legacy-card-with-custom-footer-actions.tsx
38+
title: With custom footer actions
39+
description: Use to present actionable content that is optional or not the primary purpose of the page.
40+
- fileName: legacy-card-with-destructive-footer-action.tsx
41+
title: With destructive footer action
42+
description: Use when a card action will delete merchant data or be otherwise difficult to recover from.
43+
- fileName: legacy-card-with-multiple-sections.tsx
44+
title: With multiple sections
45+
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.
46+
- fileName: legacy-card-with-multiple-titled-sections.tsx
47+
title: With multiple titled sections
48+
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.
49+
- fileName: legacy-card-with-sections-and-actions.tsx
50+
title: With sections and actions
51+
description: Use when your card section has actions that apply only to that section.
52+
- fileName: legacy-card-with-subsection.tsx
53+
title: With subsection
54+
description: Use when your card sections need further categorization.
55+
- fileName: legacy-card-with-destructive-action.tsx
56+
title: With destructive action
57+
description: Use when a card action applies only to one section and will delete merchant data or be otherwise difficult to recover from.
58+
- fileName: legacy-card-with-a-subdued-section.tsx
59+
title: With a subdued section
60+
description: Use to indicate when one of the sections in your card contains inactive or disabled content.
61+
- fileName: legacy-card-with-subdued-for-secondary-content.tsx
62+
title: With subdued for secondary content
63+
description: Use for content that you want to deprioritize. Subdued cards don’t stand out as much as cards with white backgrounds so don’t use them for information or actions that are critical to merchants.
64+
- fileName: legacy-card-with-separate-header.tsx
65+
title: With separate header
66+
description: Use to be able to use custom React elements as header content.
67+
- fileName: legacy-card-with-custom-react-node-title.tsx
68+
title: With custom React Node title
69+
description: Use to render custom content such as icons, links, or buttons in a card section’s header.
70+
- fileName: legacy-card-with-all-elements.tsx
71+
title: With all elements
72+
description: Use as a broad example that includes most props available to card.
73+
- fileName: legacy-card-with-flushed-sections.tsx
74+
title: With flushed sections
75+
description: Use when you need further control over the spacing of your card sections.
76+
---
77+
78+
## Best practices
79+
80+
Cards should:
81+
82+
- Use headings that set clear expectations about the card’s purpose
83+
- Prioritize information so the content merchants most need to know comes first
84+
- Stick to single user flows or break more complicated flows into multiple sections
85+
- Avoid too many call-to-action buttons or links and only one primary call to action per card
86+
- Use calls to action on the bottom of the card for next steps and use the space in the upper right corner of the card for persistent, optional actions (such as an Edit link)
87+
88+
---
89+
90+
## Content guidelines
91+
92+
### Title
93+
94+
Card titles should follow the content guidelines for [headings and subheadings](https://polaris.shopify.com/content/actionable-language#headings-and-subheadings).
95+
96+
### Body content
97+
98+
Body content should be:
99+
100+
- Actionable: start sentences with imperative verbs when telling merchants what actions are available to them (especially something new). Don’t use permissive language like “you can”.
101+
102+
<!-- dodont -->
103+
104+
#### Do
105+
106+
Get performance for all your sales channels.
107+
108+
#### Don’t
109+
110+
Now you can get performance data for all your sales channels.
111+
112+
<!-- end -->
113+
114+
- Structured for merchant success: always put the most critical information first.
115+
- Clear: use the verb “need” to help merchants understand when they’re required to do something.
116+
117+
<!-- dodont -->
118+
119+
#### Do
120+
121+
To buy a shipping label, you need to enter the total weight of your shipment, including packaging.
122+
123+
#### Don’t
124+
125+
To buy a shipping label, you must enter the total weight of your shipment, including packaging.
126+
127+
<!-- end -->
128+
129+
### Call-to-action button
130+
131+
Buttons should be:
132+
133+
- Clear and predictable: merchants should be able to anticipate what will happen when they click a button. Never deceive merchants by mislabeling a button.
134+
135+
<!-- dodont -->
136+
137+
#### Do
138+
139+
- Create order
140+
- Buy shipping label
141+
142+
#### Don’t
143+
144+
- New order
145+
- Buy
146+
147+
<!-- end -->
148+
149+
Action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to merchants use the {verb}+{noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK.
150+
151+
<!-- dodont -->
152+
153+
#### Do
154+
155+
- Activate Apple Pay
156+
- View shipping settings
157+
158+
#### Don’t
159+
160+
- Try Apple Pay
161+
- View your settings
162+
163+
<!-- end -->
164+
165+
Scannable: Avoid unnecessary words and articles such as the, an, or a.
166+
167+
<!-- dodont -->
168+
169+
#### Do
170+
171+
Add menu item
172+
173+
#### Don’t
174+
175+
Add a menu item
176+
177+
<!-- end -->
178+
179+
### Section titles
180+
181+
Section titles should be:
182+
183+
- Informative: they should label the type of content grouped in the body content below
184+
- Like headings: follow the same content guidelines as when you’re writing headings
185+
186+
### Action links
187+
188+
Links should be:
189+
190+
- Used for secondary or persistent actions: links should be used to represent lower priority actions than buttons, or persistent actions that merchants may take at any time (such as a persistent Edit link).
191+
- Clearly labeled: merchants should not need to guess where they’ll end up if they click on an action link. Never use “click here” as a link because it doesn’t set expectations about what’s next.
192+
- Similar to buttons: Follow the same content guidelines as when you’re writing text for buttons.
193+
194+
---
195+
196+
## Related components
197+
198+
- To create page-level layout, [use the layout component](https://polaris.shopify.com/components/layout)
199+
- To highlight a Shopify feature, [use the callout card component](https://polaris.shopify.com/components/callout-card)
200+
201+
---
202+
203+
## Accessibility
204+
205+
The required `title` prop gives the card a level 2 heading (`<h2>`). This helps with readability and provides structure to screen reader users.
206+
207+
If you use the `subdued` prop on a card or section, make sure that the card or section `title` conveys the reason for using `subdued`. This ensures that merchants with low vision, including those who use screen readers, can identify that the content is inactive or less important.
208+
209+
<!-- dodont -->
210+
211+
#### Do
212+
213+
```
214+
<LegacyCard title="Deactivated staff accounts" sectioned subdued>
215+
<List>
216+
<List.Item>Felix Crafford</List.Item>
217+
<List.Item>Ezequiel Manno</List.Item>
218+
</List>
219+
</LegacyCard>
220+
```
221+
222+
#### Don’t
223+
224+
```
225+
<LegacyCard title="Staff accounts" sectioned subdued>
226+
<List>
227+
<List.Item>Felix Crafford</List.Item>
228+
<List.Item>Ezequiel Manno</List.Item>
229+
</List>
230+
</LegacyCard>
231+
```
232+
233+
<!-- end -->

‎polaris.shopify.com/pages/examples/legacy-card-default.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {LegacyCard} from '@shopify/polaris';
2+
import React from 'react';
3+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
4+
5+
function LegacyCardExample() {
6+
return (
7+
<LegacyCard title="Online store dashboard" sectioned>
8+
<p>View a summary of your online store’s performance.</p>
9+
</LegacyCard>
10+
);
11+
}
12+
13+
export default withPolarisExample(LegacyCardExample);

‎polaris.shopify.com/pages/examples/legacy-card-with-a-subdued-section.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {LegacyCard, List} from '@shopify/polaris';
2+
import React from 'react';
3+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
4+
5+
function LegacyCardExample() {
6+
return (
7+
<LegacyCard title="Staff accounts">
8+
<LegacyCard.Section>
9+
<List>
10+
<List.Item>Felix Crafford</List.Item>
11+
<List.Item>Ezequiel Manno</List.Item>
12+
</List>
13+
</LegacyCard.Section>
14+
15+
<LegacyCard.Section subdued title="Deactivated staff accounts">
16+
<List>
17+
<List.Item>Felix Crafford</List.Item>
18+
<List.Item>Ezequiel Manno</List.Item>
19+
</List>
20+
</LegacyCard.Section>
21+
</LegacyCard>
22+
);
23+
}
24+
25+
export default withPolarisExample(LegacyCardExample);

‎polaris.shopify.com/pages/examples/legacy-card-with-all-elements.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import {
2+
LegacyCard,
3+
Popover,
4+
Button,
5+
ActionList,
6+
TextContainer,
7+
ResourceList,
8+
Stack,
9+
List,
10+
} from '@shopify/polaris';
11+
import React from 'react';
12+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
13+
14+
function LegacyCardExample() {
15+
return (
16+
<LegacyCard
17+
secondaryFooterActions={[{content: 'Dismiss'}]}
18+
primaryFooterAction={{content: 'Export Report'}}
19+
>
20+
<LegacyCard.Header
21+
actions={[
22+
{
23+
content: 'Total Sales',
24+
},
25+
]}
26+
title="Sales"
27+
>
28+
<Popover
29+
active={false}
30+
activator={
31+
<Button disclosure plain>
32+
View Sales
33+
</Button>
34+
}
35+
onClose={() => {}}
36+
>
37+
<ActionList
38+
items={[{content: 'Gross Sales'}, {content: 'Net Sales'}]}
39+
/>
40+
</Popover>
41+
</LegacyCard.Header>
42+
<LegacyCard.Section>
43+
<TextContainer>
44+
You can use sales reports to see information about your customers’
45+
orders based on criteria such as sales over time, by channel, or by
46+
staff.
47+
</TextContainer>
48+
</LegacyCard.Section>
49+
<LegacyCard.Section title="Total Sales Breakdown">
50+
<ResourceList
51+
resourceName={{singular: 'sale', plural: 'sales'}}
52+
items={[
53+
{
54+
sales: 'Orders',
55+
amount: 'USD$0.00',
56+
url: 'reports/orders',
57+
},
58+
{
59+
sales: 'Returns',
60+
amount: '-USD$250.00',
61+
url: 'reports/returns',
62+
},
63+
]}
64+
renderItem={(item) => {
65+
const {sales, amount, url} = item;
66+
return (
67+
<ResourceList.Item
68+
url={url}
69+
accessibilityLabel={`View Sales for ${sales}`}
70+
>
71+
<Stack>
72+
<Stack.Item fill>{sales}</Stack.Item>
73+
<Stack.Item>{amount}</Stack.Item>
74+
</Stack>
75+
</ResourceList.Item>
76+
);
77+
}}
78+
/>
79+
</LegacyCard.Section>
80+
<LegacyCard.Section title="Deactivated reports" subdued>
81+
<List>
82+
<List.Item>Payouts</List.Item>
83+
<List.Item>Total Sales By Channel</List.Item>
84+
</List>
85+
</LegacyCard.Section>
86+
<LegacyCard.Section title="Note">
87+
<TextContainer>
88+
The sales reports are available only if your store is on the Shopify
89+
plan or higher.
90+
</TextContainer>
91+
</LegacyCard.Section>
92+
</LegacyCard>
93+
);
94+
}
95+
96+
export default withPolarisExample(LegacyCardExample);

‎polaris.shopify.com/pages/examples/legacy-card-with-custom-footer-actions.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {LegacyCard, Stack, ButtonGroup, Button} from '@shopify/polaris';
2+
import React from 'react';
3+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
4+
5+
function LegacyCardExample() {
6+
return (
7+
<LegacyCard title="Secure your account with 2-step authentication">
8+
<LegacyCard.Section>
9+
<Stack spacing="loose" vertical>
10+
<p>
11+
Two-step authentication adds an extra layer of security when logging
12+
in to your account. A special code will be required each time you
13+
log in, ensuring only you can access your account.
14+
</p>
15+
<Stack distribution="trailing">
16+
<ButtonGroup>
17+
<Button>Enable two-step authentication</Button>
18+
<Button plain>Learn more</Button>
19+
</ButtonGroup>
20+
</Stack>
21+
</Stack>
22+
</LegacyCard.Section>
23+
</LegacyCard>
24+
);
25+
}
26+
27+
export default withPolarisExample(LegacyCardExample);

0 commit comments

Comments
 (0)