Skip to content

Commit e5e2ffc

Browse files
ernst-devernst-dev
authored
feat: Standalone Token (#3804)
1 parent de9ab23 commit e5e2ffc

File tree

44 files changed

+2666
-459
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+2666
-459
lines changed

‎build-tools/utils/pluralize.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ const pluralizationMap = {
8080
TimeInput: 'TimeInputs',
8181
Toggle: 'Toggles',
8282
ToggleButton: 'ToggleButtons',
83+
Token: 'Tokens',
8384
TokenGroup: 'TokenGroups',
8485
TopNavigation: 'TopNavigations',
8586
TreeView: 'TreeViews',

‎pages/token-group/custom.page.tsx‎

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎pages/token/permutations.page.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import Icon from '~components/icon';
6+
import Token, { TokenProps } from '~components/token';
7+
8+
import createPermutations from '../utils/permutations';
9+
import PermutationsView from '../utils/permutations-view';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
const permutations = createPermutations<TokenProps>([
13+
{
14+
label: ['token'],
15+
icon: [undefined, <Icon key="icon" name="settings" size="small" />],
16+
onDismiss: [undefined, () => {}],
17+
readOnly: [false, true],
18+
variant: ['inline'],
19+
},
20+
{
21+
label: ['token'],
22+
icon: [undefined, <Icon key="icon" name="settings" size="small" />],
23+
onDismiss: [undefined, () => {}],
24+
disabled: [true],
25+
variant: ['inline'],
26+
},
27+
{
28+
label: ['token'],
29+
icon: [undefined, <Icon key="icon" name="settings" />],
30+
onDismiss: [undefined, () => {}],
31+
readOnly: [false, true],
32+
variant: ['normal'],
33+
},
34+
{
35+
label: ['token'],
36+
icon: [undefined, <Icon key="icon" name="settings" />],
37+
onDismiss: [undefined, () => {}],
38+
disabled: [true],
39+
variant: ['normal'],
40+
},
41+
{
42+
label: ['token'],
43+
description: [undefined, 'description'],
44+
labelTag: ['label-tag', undefined],
45+
tags: [['tag-1', 'tag-2'], undefined],
46+
onDismiss: [undefined, () => {}],
47+
variant: ['normal'],
48+
},
49+
{
50+
label: ['token'],
51+
icon: [<Icon key="icon" name="settings" size="big" />],
52+
description: ['description'],
53+
labelTag: ['label-tag', undefined],
54+
tags: [['tag-1', 'tag-2'], undefined],
55+
readOnly: [false, true],
56+
disabled: [true, false],
57+
variant: ['normal'],
58+
},
59+
]);
60+
61+
export default function TokenPermutations() {
62+
return (
63+
<>
64+
<h1>Token permutations</h1>
65+
<ScreenshotArea disableAnimations={true}>
66+
<PermutationsView
67+
permutations={permutations}
68+
render={(permutation, index) => <Token {...permutation} dismissLabel={`Dismiss ${index}`} />}
69+
/>
70+
</ScreenshotArea>
71+
</>
72+
);
73+
}

‎pages/token/simple.page.tsx‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React, { useState } from 'react';
4+
import { range } from 'lodash';
5+
6+
import { Popover } from '~components';
7+
import Box from '~components/box';
8+
import Icon from '~components/icon';
9+
import Input from '~components/input';
10+
import TokenList from '~components/internal/components/token-list';
11+
import SpaceBetween from '~components/space-between';
12+
import Token from '~components/token';
13+
14+
import styles from './styles.scss';
15+
16+
const i18nStrings = {
17+
limitShowMore: 'Show more chosen options',
18+
limitShowFewer: 'Show fewer chosen options',
19+
};
20+
21+
const LONG_LABEL = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
22+
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
23+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
24+
25+
export default function GenericTokenPage() {
26+
const [files, setFiles] = useState(range(0, 4));
27+
28+
const onDismiss = (itemIndex: number) => {
29+
const newItems = [...files];
30+
newItems.splice(itemIndex, 1);
31+
setFiles(newItems);
32+
};
33+
34+
return (
35+
<Box padding="xl">
36+
<h1>Standalone token</h1>
37+
<h2>Inline</h2>
38+
<SpaceBetween size="l" direction="vertical">
39+
<Token data-testid="basic-inline-token" variant="inline" label="Inline token" />
40+
<Token
41+
variant="inline"
42+
label="The quick brown fox jumps over the lazy dog"
43+
tooltipContent="The quick brown fox jumps over the lazy dog"
44+
/>
45+
<Token data-testid="inline-token-long-text" variant="inline" label={LONG_LABEL} tooltipContent={LONG_LABEL} />
46+
<Token variant="inline" label="Inline readonly token" readOnly={true} />
47+
<Token variant="inline" label="Inline disabled token" disabled={true} />
48+
49+
<Token
50+
data-testid="inline-token-dismissable"
51+
variant="inline"
52+
dismissLabel="Dismiss token"
53+
label="Inline dismissable token"
54+
onDismiss={() => {}}
55+
/>
56+
<Token
57+
variant="inline"
58+
dismissLabel="Dismiss readonly token"
59+
label="Inline dismissable readonly token"
60+
readOnly={true}
61+
onDismiss={() => {}}
62+
/>
63+
<Token
64+
variant="inline"
65+
dismissLabel="Dismiss disabled token"
66+
label="Inline dismissable disabled token"
67+
disabled={true}
68+
onDismiss={() => {}}
69+
/>
70+
71+
<Token
72+
variant="inline"
73+
dismissLabel="Dismiss readonly token with icon"
74+
label="Inline dismissable readonly token"
75+
icon={<Icon name="edit" size="small" />}
76+
readOnly={true}
77+
onDismiss={() => {}}
78+
/>
79+
80+
<Token
81+
variant="inline"
82+
dismissLabel="Dismiss disabled token with icon"
83+
label="Inline dismissable disabled token with icon"
84+
icon={<Icon name="edit" size="small" />}
85+
disabled={true}
86+
onDismiss={() => {}}
87+
/>
88+
<div style={{ display: 'inline' }}>
89+
<Token label="Inline test 1" variant="inline" />
90+
<Token label="Inline test 2" variant="inline" />
91+
<Token label="Inline test 3" variant="inline" />
92+
</div>
93+
</SpaceBetween>
94+
95+
<h2>Normal</h2>
96+
<SpaceBetween size="l" direction="vertical">
97+
<Token label="Standalone token" />
98+
<Token label="Standalone token with icon" icon={<Icon name="bug" />} />
99+
<Token
100+
ariaLabel="Standalone token with popover"
101+
data-testid="normal-token-with-popover"
102+
label={
103+
<Popover
104+
triggerType="text-inline"
105+
position="top"
106+
header="test"
107+
content={<Input placeholder="Enter value" value="" onChange={() => {}} />}
108+
>
109+
Standalone token with popover
110+
</Popover>
111+
}
112+
labelTag="Test"
113+
onDismiss={() => {}}
114+
dismissLabel="Dismiss normal token with popover"
115+
/>
116+
<Token
117+
ariaLabel="Standalone token with icon and popover"
118+
dismissLabel="Dismiss normal token with popover and icon"
119+
label={
120+
<Popover
121+
triggerType="text-inline"
122+
position="top"
123+
header="test"
124+
content={<Input placeholder="Enter value" value="" onChange={() => {}} />}
125+
>
126+
Standalone token with icon and popover
127+
</Popover>
128+
}
129+
icon={<Icon name="bug" />}
130+
onDismiss={() => {}}
131+
/>
132+
<Token
133+
data-testid="normal-token-dismissable"
134+
dismissLabel="Dismiss normal token"
135+
label="Dismissable token"
136+
labelTag="test"
137+
onDismiss={() => {}}
138+
/>
139+
140+
<Token label={LONG_LABEL} />
141+
<Token
142+
data-testid="normal-token-with-icon-dismissable"
143+
dismissLabel="Dismiss features token"
144+
label="Dismissable token"
145+
description="some description"
146+
labelTag="test"
147+
tags={['tag', 'tag']}
148+
icon={<Icon name="bug" data-testid="token-bug-icon" />}
149+
onDismiss={() => {}}
150+
/>
151+
152+
<Token label="Standalone readonly token" readOnly={true} />
153+
154+
<Token
155+
label="Standalone readonly dismissable token"
156+
readOnly={true}
157+
onDismiss={() => {}}
158+
dismissLabel="Dismiss normal readonly token"
159+
/>
160+
161+
<Token label="Standalone disabled token" disabled={true} />
162+
163+
<Token
164+
label="Standalone disabled dismissable token"
165+
disabled={true}
166+
onDismiss={() => {}}
167+
dismissLabel="Dismiss normal disabled token"
168+
/>
169+
170+
<TokenList
171+
alignment="vertical"
172+
items={files}
173+
i18nStrings={i18nStrings}
174+
limit={5}
175+
renderItem={(file, fileIndex) => (
176+
<Token
177+
ariaLabel={`File token ${fileIndex}`}
178+
label={<FileOption file={file} />}
179+
disabled={file === 0}
180+
dismissLabel={`Remove file ${fileIndex + 1}`}
181+
onDismiss={() => onDismiss(fileIndex)}
182+
/>
183+
)}
184+
/>
185+
</SpaceBetween>
186+
</Box>
187+
);
188+
}
189+
190+
function FileOption({ file }: { file: number }) {
191+
const fileName = `agreement-${file + 1}.pdf`;
192+
return (
193+
<div className={styles['file-option']}>
194+
<Icon variant="success" name="status-positive" />
195+
196+
<div className={styles['file-option-metadata']}>
197+
<SpaceBetween direction="vertical" size="xxxs">
198+
{
199+
<div className={styles['file-option-name']}>
200+
<div className={styles['file-option-name-label']} title={fileName}>
201+
{fileName}
202+
</div>
203+
</div>
204+
}
205+
<Box fontSize="body-s" color="text-body-secondary">
206+
application/pdf
207+
</Box>
208+
<Box fontSize="body-s" color="text-body-secondary">
209+
313.03 KB
210+
</Box>
211+
<Box fontSize="body-s" color="text-body-secondary">
212+
2022-01-01T12:02:02
213+
</Box>
214+
</SpaceBetween>
215+
</div>
216+
</div>
217+
);
218+
}

‎pages/token-group/styles.scss‎ renamed to ‎pages/token/styles.scss‎

File renamed without changes.

0 commit comments

Comments
 (0)