Skip to content

Commit 8bc9e1c

Browse files
georgylobkogeorgylobko
committed
chore: Revert changes form button style-permutations page
1 parent bd96ab2 commit 8bc9e1c

File tree

1 file changed

+88
-152
lines changed

1 file changed

+88
-152
lines changed

‎pages/button/style-permutations.page.tsx‎

Lines changed: 88 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -2,163 +2,99 @@
22
// SPDX-License-Identifier: Apache-2.0
33
import React from 'react';
44

5-
import { Button as CloudscapeButton, SpaceBetween } from '~components';
5+
import Button, { ButtonProps } from '~components/button';
66

7-
import { palette } from '../app/themes/style-api';
7+
import createPermutations from '../utils/permutations';
8+
import PermutationsView from '../utils/permutations-view';
89
import ScreenshotArea from '../utils/screenshot-area';
910

10-
export default function CustomButtonTypes() {
11-
return (
12-
<ScreenshotArea disableAnimations={true}>
13-
<h1>Custom Button Types</h1>
14-
15-
<SpaceBetween direction="horizontal" size="m">
16-
<CustomButton colorTheme="default" variation="primary" id="default">
17-
Default
18-
</CustomButton>
19-
<CustomButton colorTheme="success" variation="primary">
20-
Success
21-
</CustomButton>
22-
<CustomButton colorTheme="error" variation="primary">
23-
Error
24-
</CustomButton>
25-
<CustomButton colorTheme="info" variation="primary">
26-
Info
27-
</CustomButton>
28-
<CustomButton colorTheme="warning" variation="primary">
29-
Warning
30-
</CustomButton>
31-
<CustomButton colorTheme="success" variation="primary" isDisabled={true}>
32-
isDisabled
33-
</CustomButton>
34-
<CustomButton colorTheme="success" variation="primary" isLoading={true}>
35-
isLoading
36-
</CustomButton>
37-
</SpaceBetween>
38-
</ScreenshotArea>
39-
);
40-
}
41-
42-
interface CustomButtonProps {
43-
children?: React.ReactNode;
44-
colorTheme: 'default' | 'error' | 'info' | 'warning' | 'success';
45-
id?: string;
46-
isDisabled?: boolean;
47-
isLoading?: boolean;
48-
onClick?: any;
49-
variation: 'primary';
50-
}
51-
52-
function CustomButton({ children, colorTheme, id, isDisabled, isLoading, onClick, variation }: CustomButtonProps) {
53-
return (
54-
<CloudscapeButton
55-
data-testid={id}
56-
disabled={isDisabled}
57-
loading={isLoading}
58-
onClick={onClick}
59-
variant={variation}
60-
style={{
11+
const permutations = createPermutations<ButtonProps>([
12+
{
13+
ariaLabel: ['Border Styles'],
14+
children: ['Border Styles'],
15+
disabled: [false, true],
16+
iconName: ['add-plus'],
17+
iconAlt: ['add-plus'],
18+
style: [
19+
{
6120
root: {
62-
background: getBackground(colorTheme),
63-
borderRadius: '4px',
21+
borderColor: {
22+
active: 'purple',
23+
default: 'magenta',
24+
hover: 'orange',
25+
disabled: 'brown',
26+
},
27+
borderRadius: '2px',
28+
borderWidth: '4px',
29+
},
30+
},
31+
],
32+
variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
33+
},
34+
{
35+
ariaLabel: ['Background and Color Styles'],
36+
children: ['Background and Color Styles'],
37+
disabled: [false, true],
38+
iconName: ['arrow-left'],
39+
iconAlt: ['arrow-left'],
40+
loading: [false, true],
41+
style: [
42+
{
43+
root: {
44+
background: {
45+
active: 'brown',
46+
default: 'purple',
47+
hover: 'brown',
48+
disabled: '#ccc',
49+
},
6450
borderWidth: '0px',
65-
color: getColor(),
66-
focusRing: getFocusRing(),
67-
paddingBlock: '12px',
68-
paddingInline: '16px',
69-
boxShadow: getBoxShadow(colorTheme),
51+
color: {
52+
active: 'white',
53+
default: 'white',
54+
hover: 'white',
55+
disabled: 'black',
56+
},
7057
},
71-
}}
72-
>
73-
<span style={{ fontSize: '16px' }}>{children}</span>
74-
</CloudscapeButton>
75-
);
76-
}
77-
78-
function getBackground(colorTheme: string) {
79-
const backgrounds = {
80-
default: {
81-
active: `light-dark(${palette.teal100}, ${palette.teal10})`,
82-
default: `light-dark(${palette.teal80}, ${palette.teal30})`,
83-
disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
84-
hover: `light-dark(${palette.teal90}, ${palette.teal20})`,
85-
},
86-
error: {
87-
active: `light-dark(${palette.red100}, ${palette.red10})`,
88-
default: `light-dark(${palette.red80}, ${palette.red30})`,
89-
disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
90-
hover: `light-dark(${palette.red90}, ${palette.red20})`,
91-
},
92-
info: {
93-
active: `light-dark(${palette.blue100}, ${palette.blue10})`,
94-
default: `light-dark(${palette.blue80}, ${palette.blue40})`,
95-
disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
96-
hover: `light-dark(${palette.blue90}, ${palette.blue20})`,
97-
},
98-
success: {
99-
active: `light-dark(${palette.green100}, ${palette.green10})`,
100-
default: `light-dark(${palette.green80}, ${palette.green30})`,
101-
disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
102-
hover: `light-dark(${palette.green90}, ${palette.green20})`,
103-
},
104-
warning: {
105-
active: `light-dark(${palette.orange100}, ${palette.orange10})`,
106-
default: `light-dark(${palette.orange80}, ${palette.orange40})`,
107-
disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
108-
hover: `light-dark(${palette.orange90}, ${palette.orange20})`,
109-
},
110-
};
111-
return backgrounds[colorTheme as keyof typeof backgrounds];
112-
}
113-
114-
function getColor() {
115-
return {
116-
active: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
117-
default: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
118-
hover: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
119-
disabled: `light-dark(${palette.neutral60}, ${palette.neutral60})`,
120-
};
121-
}
122-
123-
function getFocusRing() {
124-
return {
125-
borderColor: 'light-dark(rgb(0, 64, 77), rgb(233, 249, 252))',
126-
borderWidth: '2px',
127-
};
128-
}
58+
},
59+
],
60+
variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
61+
},
62+
{
63+
ariaLabel: ['Padding Styles'],
64+
children: ['Padding Styles'],
65+
disabled: [false, true],
66+
iconName: ['delete-marker'],
67+
iconAlt: ['delete-marker'],
68+
iconAlign: ['left', 'right'],
69+
loading: [false, true],
70+
fullWidth: [false, true],
71+
style: [
72+
{
73+
root: {
74+
borderColor: {
75+
active: 'black',
76+
default: 'black',
77+
disabled: 'black',
78+
hover: 'black',
79+
},
80+
borderWidth: '2px',
81+
borderRadius: '1px',
82+
paddingBlock: '22px',
83+
paddingInline: '44px',
84+
},
85+
},
86+
],
87+
variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
88+
},
89+
]);
12990

130-
function getBoxShadow(colorTheme: string) {
131-
const boxShadows = {
132-
default: {
133-
active: `0 4px 8px light-dark(rgba(0, 128, 128, 0.3), rgba(0, 255, 255, 0.4))`,
134-
default: `0 2px 4px light-dark(rgba(0, 128, 128, 0.2), rgba(0, 255, 255, 0.3))`,
135-
disabled: 'none',
136-
hover: `0 6px 12px light-dark(rgba(0, 128, 128, 0.25), rgba(0, 255, 255, 0.35))`,
137-
},
138-
error: {
139-
active: `0 4px 8px light-dark(rgba(255, 0, 0, 0.3), rgba(255, 100, 100, 0.4))`,
140-
default: `0 2px 4px light-dark(rgba(255, 0, 0, 0.2), rgba(255, 100, 100, 0.3))`,
141-
disabled: 'none',
142-
hover: `0 6px 12px light-dark(rgba(255, 0, 0, 0.25), rgba(255, 100, 100, 0.35))`,
143-
},
144-
info: {
145-
active: `0 4px 8px light-dark(rgba(0, 0, 255, 0.3), rgba(100, 100, 255, 0.4))`,
146-
default: `0 2px 4px light-dark(rgba(0, 0, 255, 0.2), rgba(100, 100, 255, 0.3))`,
147-
disabled: 'none',
148-
hover: `0 6px 12px light-dark(rgba(0, 0, 255, 0.25), rgba(100, 100, 255, 0.35))`,
149-
},
150-
success: {
151-
active: `0 4px 8px light-dark(rgba(0, 255, 0, 0.3), rgba(100, 255, 100, 0.4))`,
152-
default: `0 2px 4px light-dark(rgba(0, 255, 0, 0.2), rgba(100, 255, 100, 0.3))`,
153-
disabled: 'none',
154-
hover: `0 6px 12px light-dark(rgba(0, 255, 0, 0.25), rgba(100, 255, 100, 0.35))`,
155-
},
156-
warning: {
157-
active: `0 4px 8px light-dark(rgba(255, 165, 0, 0.3), rgba(255, 200, 100, 0.4))`,
158-
default: `0 2px 4px light-dark(rgba(255, 165, 0, 0.2), rgba(255, 200, 100, 0.3))`,
159-
disabled: 'none',
160-
hover: `0 6px 12px light-dark(rgba(255, 165, 0, 0.25), rgba(255, 200, 100, 0.35))`,
161-
},
162-
};
163-
return boxShadows[colorTheme as keyof typeof boxShadows];
91+
export default function ButtonStylePermutations() {
92+
return (
93+
<>
94+
<h1>Button Style permutations</h1>
95+
<ScreenshotArea disableAnimations={true}>
96+
<PermutationsView permutations={permutations} render={permutation => <Button {...permutation} />} />
97+
</ScreenshotArea>
98+
</>
99+
);
164100
}

0 commit comments

Comments
 (0)