UNPKG

@shopify/polaris

Version:

Shopify’s product component library

github.com/Shopify/polaris

Shopify/polaris

133 lines (96 loc) • 3.31 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
--- name: Description list category: Lists keywords: - glossary - description - list terms - list and define terms - item lists - text lists - list of terms - term explaination --- # Description list Description lists are a way to organize and explain related information. They’re particularly useful when you need to list and define terms such as in a glossary. --- ## Purpose Think about the merchant problem this component solves when you’re using it: ### Problem Merchants may need to reference a range of concepts to understand how they work at Shopify. ### Solution Description lists associate a list item with a definition or description in a format that’s easy to reference and scan. --- ## Best practices Description lists should: * Contain terms and associated explanations, or descriptions for each term. * Provide information that isn’t action-oriented. * Not be an excuse for using unnecessarily complicated or jargon-filled language. Generally, if merchants need a description list to understand the language in Shopify, we should look for opportunities to simplify the language. * Not be used to upsell merchants on a feature or service. --- ## Content guidelines ### Terms Terms should be: * Written in sentence case (the first word capitalized, the rest lowercase) <!-- usagelist --> #### Do - Discount code #### Don’t - Discount Code <!-- end --> ### Term description Terms descriptions should be: * Directly related to the term they’re describing <!-- usagelist --> #### Do - Discount code: A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer. #### Don’t - Discount code: Having a sale on your store is a great way to sell products quickly. <!-- end --> * Written to describe the merchant benefit or utility * No more than one or two short sentences in length * Written in sentence case with all appropriate punctuation, including ending each sentence with a period * Conversational by using articles (the, a, an) * Written using plain language <!-- usagelist --> #### Do - Abandoned checkout: The details of a checkout that was started but not completed, including the products added and the customer’s details. #### Don’t - Abandoned checkout: Details of products added to checkout but not purchased <!-- end --> | Prop | Type | Description | | ---- | ---- | ----------- | | items | Item[] | Collection of items for list | ## Examples ### Default description list Use when you need to present merchants with a list of items or terms alongside descriptions and explanations. ```jsx <DescriptionList items={[ { term: 'Logistics', description: 'The management of products or other resources as they travel between a point of origin and a destination.', }, { term: 'Sole proprietorship', description: 'A business structure where a single individual both owns and runs the company.', }, { term: 'Discount code', description: 'A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.', }, ]} /> ``` --- ## Related components * To create a list of actions or navigation, [use the action list component](/components/actions/action-list).