@pareto-engineering/design-system 2.0.0-alpha.3 → 2.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cjs/b/Button/styles.scss +38 -19
  2. package/dist/es/b/Button/styles.scss +38 -19
  3. package/package.json +1 -1
  4. package/src/__snapshots__/Storyshots.test.js.snap +808 -126
  5. package/src/stories/b/Button.stories.jsx +57 -82
  6. package/src/ui/b/Button/styles.scss +38 -19
package/src/stories/b/Button.stories.jsx CHANGED
@@ -14,96 +14,71 @@ export default {
14
14
  // storyfn => <div className="">{ storyfn() }</div>,
15
15
  ],
16
16
  argTypes:{
17
- isGhost :{ control: 'boolean' },
18
- disabled:{ control: 'boolean' },
17
+ color :{ control: { type: 'select', options: ALL_COLORS } },
18
+ disabled:{ control: { type: 'boolean' } },
19
+ isGhost :{ control: { type: 'boolean' } },
20
+ isSimple:{ control: { type: 'boolean' } },
19
21
  },
20
22
  }
21
23
 
22
- export const Base = (props) => <Button {...props}>Sample Button</Button>
24
+ const SingleTemplate = (args) => <Button {...args} />
23
25
 
24
- export const Ghost = (props) => (
25
- <Button isGhost {...props}>
26
- Sample Button
26
+ export const Base = SingleTemplate.bind({})
27
+ Base.args = {
28
+ children:'Sample Button',
29
+ }
30
+
31
+ export const Ghost = SingleTemplate.bind({})
32
+ Ghost.args = {
33
+ isGhost :true,
34
+ children:'Sample Button',
35
+ }
36
+
37
+ const MultipleTemplate = (args) => ALL_COLORS.map((colorName) => (
38
+ <Button {...args} color={colorName} key={colorName}>
39
+ This is a
40
+ {' '}
41
+ {colorName}
42
+ {' '}
43
+ button
27
44
  </Button>
28
- )
45
+ ))
29
46
 
30
- export const Simple = (props) => (
31
- <>
32
- {ALL_COLORS.map((colorName) => (
33
- <Button {...props} color={colorName} key={colorName} isSimple>
34
- This is a
35
- {' '}
36
- {colorName}
37
- {' '}
38
- button
39
- </Button>
40
- ))}
41
- </>
42
- )
47
+ export const Normal = MultipleTemplate.bind({})
43
48
 
44
- export const Colors = (props) => (
45
- <>
46
- {ALL_COLORS.map((colorName) => (
47
- <Button {...props} color={colorName} key={colorName}>
48
- This is a
49
- {' '}
50
- {colorName}
51
- {' '}
52
- button
53
- </Button>
54
- ))}
55
- </>
56
- )
49
+ export const Ghosts = MultipleTemplate.bind({})
50
+ Ghosts.args = {
51
+ isGhost:true,
52
+ }
57
53
 
58
- export const GhostColors = (props) => (
59
- <>
60
- {ALL_COLORS.map((colorName) => (
61
- <Button {...props} color={colorName} key={colorName} isGhost>
62
- This is a
63
- {' '}
64
- {colorName}
65
- {' '}
66
- button
67
- </Button>
68
- ))}
69
- </>
70
- )
54
+ export const Simple = MultipleTemplate.bind({})
55
+ Simple.args = {
56
+ isSimple:true,
57
+ }
71
58
 
72
- export const Compact = (props) => (
73
- <>
74
- {ALL_COLORS.map((colorName) => (
75
- <Button {...props} color={colorName} key={colorName} isCompact>
76
- This is a
77
- {' '}
78
- {colorName}
79
- {' '}
80
- </Button>
81
- ))}
82
- </>
83
- )
59
+ export const Compact = MultipleTemplate.bind({})
60
+ Compact.args = {
61
+ isCompact:true,
62
+ }
84
63
 
85
- export const Disabled = (props) => (
86
- <>
87
- {ALL_COLORS.map((colorName) => (
88
- <Button {...props} color={colorName} key={colorName} disabled>
89
- This is a
90
- {' '}
91
- {colorName}
92
- {' '}
93
- </Button>
94
- ))}
95
- </>
96
- )
64
+ export const Disabled = MultipleTemplate.bind({})
65
+ Disabled.args = {
66
+ disabled:true,
67
+ }
68
+
69
+ export const GhostDisabled = MultipleTemplate.bind({})
70
+ GhostDisabled.args = {
71
+ isGhost :true,
72
+ disabled:true,
73
+ }
97
74
 
98
- export const Loading = (props) => (
99
- <>
100
- {ALL_COLORS.map((colorName) => (
101
- <Button {...props} color={colorName} key={colorName} isLoading>
102
- This is a
103
- {' '}
104
- {colorName}
105
- {' '}
106
- </Button>
107
- ))}
108
- </>
109
- )
75
+ export const SimpleDisabled = MultipleTemplate.bind({})
76
+ SimpleDisabled.args = {
77
+ isSimple:true,
78
+ disabled:true,
79
+ }
80
+
81
+ export const Loading = MultipleTemplate.bind({})
82
+ Loading.args = {
83
+ isLoading:true,
84
+ }
package/src/ui/b/Button/styles.scss CHANGED
@@ -4,15 +4,13 @@
4
4
 
5
5
  $default-padding: 1em 1em .84em;
6
6
  $compact-padding: .6em .6em .48em;
7
- $default-border-radius:2em;
8
7
  $default-color:primary;
9
8
  $font-weight:bold;
10
9
 
11
10
  .#{bem.$base}.button {
12
11
  background: var(--x, var(--#{$default-color}));
13
12
  border: transparent;
14
- //border-radius: var(--theme-border-radius);
15
- border-radius: $default-border-radius;
13
+ border-radius: var(--theme-border-radius);
16
14
  color: var(--on-x, var(--on-#{$default-color}));
17
15
  font-weight: 600;
18
16
  padding: $default-padding;
@@ -24,6 +22,9 @@ $font-weight:bold;
24
22
  &:hover {
25
23
  background: var(--light-x, var(--light-#{$default-color}));
26
24
  }
25
+ &:focus {
26
+ background: var(--dark-x, var(--dark-#{$default-color}));
27
+ }
27
28
  }
28
29
 
29
30
 
@@ -36,21 +37,28 @@ $font-weight:bold;
36
37
  border: 1px solid var(--x, var(--#{$default-color}));
37
38
  color: var(--x, var(--#{$default-color}));
38
39
 
39
- &:not(:disabled) {
40
- &:hover,
41
- &:focus {
42
- border: 1px solid transparent;
43
- color: var(--on-x, var(--on-#{$default-color}));
44
- }
40
+ &:hover,
41
+ &:focus,
42
+ &:disabled{
43
+ background: transparent;
44
+ }
45
45
 
46
+ &:not(:disabled) {
46
47
  &:hover {
47
- background: var(--x, var(--#{$default-color}));
48
+ border: 1px solid var(--light-x, var(--light-#{$default-color}));
49
+ color: var(--light-x, var(--light-#{$default-color}));
48
50
  }
49
51
 
50
52
  &:focus {
51
- background: var(--dark-x, var(--#{$default-color}));
53
+ border: 1px solid var(--dark-x, var(--dark-#{$default-color}));
54
+ color: var(--dark-x, var(--dark-#{$default-color}));
52
55
  }
53
56
  }
57
+
58
+ &:disabled{
59
+ border: 1px solid var(--x, var(--#{$default-color}));
60
+ color: var(--x, var(--#{$default-color}));
61
+ }
54
62
  }
55
63
 
56
64
  &.#{bem.$modifier-simple} {
@@ -58,19 +66,30 @@ $font-weight:bold;
58
66
  border: 1px solid transparent;
59
67
  color: var(--x, var(--#{$default-color}));
60
68
 
69
+ &:disabled,
70
+ &:hover,
71
+ &:focus {
72
+ background: transparent;
73
+ }
74
+
61
75
  &:not(:disabled) {
62
- &:hover,
63
- &:focus {
64
- background:transparent;
65
- border: 1px solid transparent;
66
- color: var(--dark-x, var(--on-#{$default-color}));
67
- }
76
+ &:hover {
77
+ color: var(--light-x, var(--light-#{$default-color}));
78
+ }
79
+
80
+ &:focus {
81
+ color: var(--dark-x, var(--dark-#{$default-color}));
82
+ }
83
+ }
84
+
85
+ &:disabled {
86
+ color: var(--x, var(--#{$default-color}));
68
87
  }
69
88
  }
70
89
 
71
90
  &:disabled {
72
- background: var(--light-x);
73
- filter: brightness(120%);
91
+ background: var(--x);
92
+ filter: brightness(125%);
74
93
  }
75
94
  }
76
95