Skip to content

Commit 5777966

Browse files
laurkimlaurkim
authored
[Text] Add stories for Text component (#7181)
### WHY are these changes introduced? Resolves #7180. Adds stories for the different properties of the alpha `Text` component. ### WHAT is this pull request doing? Add stories to show all the `variants` for the `Text` component and the different usages for `fontWeight`, `color`, `alignment`, and `truncate` props. <details> <summary>New Text stories</summary> <img src="https://user-images.githubusercontent.com/26749317/190225087-76b2668a-f02e-4fba-bf19-0c06bb913aad.png" alt="New Text stories"> </details> <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent 3911a45 commit 5777966

File tree

2 files changed

+124
-0
lines changed

2 files changed

+124
-0
lines changed

‎.changeset/brave-tomatoes-prove.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': minor
3+
---
4+
5+
Added stories for `Text` component

‎polaris-react/src/components/Text/Text.stories.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import React from 'react';
2+
import type {ComponentMeta} from '@storybook/react';
3+
import {Stack, Text} from '@shopify/polaris';
4+
5+
export default {
6+
component: Text,
7+
} as ComponentMeta<typeof Text>;
8+
9+
export const Variants = () => (
10+
<Stack vertical>
11+
<Text as="h1" variant="heading4xl">
12+
Text with Heading4xl variant
13+
</Text>
14+
<Text as="h2" variant="heading3xl">
15+
Text with Heading3xl variant
16+
</Text>
17+
<Text as="h3" variant="heading2xl">
18+
Text with Heading2xl variant
19+
</Text>
20+
<Text as="h4" variant="headingXl">
21+
Text with HeadingXl variant
22+
</Text>
23+
<Text as="h5" variant="headingLg">
24+
Text with HeadingLg variant
25+
</Text>
26+
<Text as="h6" variant="headingMd">
27+
Text with HeadingMd variant
28+
</Text>
29+
<Text as="h6" variant="headingSm">
30+
Text with HeadingSm variant
31+
</Text>
32+
<Text as="h6" variant="headingXs">
33+
Text with HeadingXs variant
34+
</Text>
35+
<Text as="p" variant="bodyLg">
36+
Text with BodyLg variant
37+
</Text>
38+
<Text as="p" variant="bodyMd">
39+
Text with BodyMd variant
40+
</Text>
41+
<Text as="p" variant="bodySm">
42+
Text with BodySm variant
43+
</Text>
44+
</Stack>
45+
);
46+
47+
export const WithAlignment = () => (
48+
<Stack vertical>
49+
<Text as="p" variant="bodyLg" alignment="start">
50+
Manage your Shopify store on-the-go with real-time notifications, access
51+
to your dashboard, and order management, all from your smartphone.
52+
</Text>
53+
<Text as="p" variant="bodyLg" alignment="center">
54+
Manage your Shopify store on-the-go with real-time notifications, access
55+
to your dashboard, and order management, all from your smartphone.
56+
</Text>
57+
<Text as="p" variant="bodyLg" alignment="end">
58+
Manage your Shopify store on-the-go with real-time notifications, access
59+
to your dashboard, and order management, all from your smartphone.
60+
</Text>
61+
<Text as="p" variant="bodyLg" alignment="justify">
62+
Manage your Shopify store on-the-go with real-time notifications, access
63+
to your dashboard, and order management, all from your smartphone.
64+
</Text>
65+
</Stack>
66+
);
67+
68+
export const WithFontWeight = () => (
69+
<Stack vertical>
70+
<Text as="p" variant="bodyMd" fontWeight="bold">
71+
Sales this year
72+
</Text>
73+
<Text as="p" variant="bodyMd" fontWeight="semibold">
74+
Sales this year
75+
</Text>
76+
<Text as="p" variant="bodyMd" fontWeight="medium">
77+
Sales this year
78+
</Text>
79+
<Text as="p" variant="bodyMd" fontWeight="regular">
80+
Sales this year
81+
</Text>
82+
</Stack>
83+
);
84+
85+
export const WithColor = () => (
86+
<Stack vertical>
87+
<Text as="p" variant="bodyMd" color="subdued">
88+
Use to de-emphasize a piece of text that is less important to merchants
89+
than other nearby text. May also be used to indicate when normal content
90+
is absent, for example, “No supplier listed”. Don’t use only for aesthetic
91+
effect.
92+
</Text>
93+
<Text as="p" variant="bodyMd" color="success">
94+
Use in combination with a symbol showing an increasing value to indicate
95+
an upward trend.
96+
</Text>
97+
<Text as="p" variant="bodyMd" color="warning">
98+
Use to denote something that needs attention, or that merchants need to
99+
take action on.
100+
</Text>
101+
<Text as="p" variant="bodyMd" color="critical">
102+
Use in combination with a symbol showing a decreasing value to indicate a
103+
downward trend.
104+
</Text>
105+
</Stack>
106+
);
107+
108+
export const WithTruncate = () => (
109+
<Text as="p" variant="bodyMd" truncate>
110+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt vel
111+
lorem nec pretium. Vestibulum ante ipsum primis in faucibus orci luctus et
112+
ultrices posuere cubilia curae; Morbi sollicitudin ex nec imperdiet
113+
pellentesque. Etiam dapibus ipsum non ligula molestie rhoncus. Vivamus eget
114+
iaculis lectus. Sed porttitor leo at nulla mollis malesuada. Vestibulum ante
115+
ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
116+
Vestibulum vestibulum porttitor mollis. Nam dictum ante sed lobortis
117+
commodo. Ut luctus ut metus vel bibendum.
118+
</Text>
119+
);

0 commit comments

Comments
 (0)