@mmb-digital/design-system-web 0.1.3 → 0.1.5
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.
- package/.idea/codeStyles/codeStyleConfig.xml +5 -0
- package/.idea/design-system-web_2023-02-07.iml +8 -0
- package/.idea/inspectionProfiles/Project_Default.xml +7 -0
- package/.idea/modules.xml +8 -0
- package/.idea/php.xml +19 -0
- package/.idea/prettier.xml +6 -0
- package/.idea/vcs.xml +6 -0
- package/dist/components/button/index.d.ts +2 -0
- package/dist/index.cjs.js +12 -12
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +12 -12
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/@types/json.d.ts +0 -5
- package/src/@types/styledComponentCssProps.d.ts +0 -11
- package/src/@types/styledComponentTheme.d.ts +0 -9
- package/src/components/button/button.stories.tsx +0 -97
- package/src/components/button/button.styles.ts +0 -162
- package/src/components/button/button.test.tsx +0 -25
- package/src/components/button/button.tsx +0 -31
- package/src/components/button/button.types.ts +0 -33
- package/src/components/form/hint/formHint.style.ts +0 -10
- package/src/components/form/hint/formHint.tsx +0 -13
- package/src/components/form/hint/formHint.types.ts +0 -5
- package/src/components/slider/slider/slider.stories.tsx +0 -176
- package/src/components/slider/slider/slider.style.ts +0 -29
- package/src/components/slider/slider/slider.tsx +0 -136
- package/src/components/slider/slider/slider.types.ts +0 -58
- package/src/components/slider/slider/sliderFunction/default/sliderFunctionDefault.ts +0 -21
- package/src/components/slider/slider/sliderFunction/default/sliderStep.test.ts +0 -90
- package/src/components/slider/slider/sliderFunction/default/sliderStep.ts +0 -18
- package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderFunctionLinearVisualSteps.ts +0 -28
- package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderMax.test.ts +0 -83
- package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderMax.ts +0 -34
- package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderValueByValue.test.ts +0 -249
- package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderValueByValue.ts +0 -41
- package/src/components/slider/slider/sliderFunction/linearVisualSteps/valueBySliderValue.test.ts +0 -204
- package/src/components/slider/slider/sliderFunction/linearVisualSteps/valueBySliderValue.ts +0 -35
- package/src/components/slider/slider/sliderHandleSvgHandler.ts +0 -26
- package/src/components/storeButton/assets/androidSvg.tsx +0 -159
- package/src/components/storeButton/assets/appleSvg.tsx +0 -31
- package/src/components/storeButton/storeButton.stories.tsx +0 -67
- package/src/components/storeButton/storeButton.styles.ts +0 -36
- package/src/components/storeButton/storeButton.test.tsx +0 -22
- package/src/components/storeButton/storeButton.tsx +0 -30
- package/src/components/storeButton/storeButton.types.tsx +0 -15
- package/src/icons/systemIcon.tsx +0 -26
- package/src/index.ts +0 -1
- package/src/provider/storybook/storybookProvider.tsx +0 -11
- package/src/provider/storybook/storybookProvider.types.ts +0 -5
- package/src/provider/styledComponents/theme/styledComponentsThemeProvider.tsx +0 -14
- package/src/provider/styledComponents/theme/styledComponentsThemeProvider.types..ts +0 -5
- package/src/style/styledComponents/mmb_variables-5224.json +0 -958
- package/src/style/styledComponents/theme.ts +0 -450
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<module type="WEB_MODULE" version="4">
|
|
3
|
+
<component name="NewModuleRootManager">
|
|
4
|
+
<content url="file://$MODULE_DIR$" />
|
|
5
|
+
<orderEntry type="inheritedJdk" />
|
|
6
|
+
<orderEntry type="sourceFolder" forTests="false" />
|
|
7
|
+
</component>
|
|
8
|
+
</module>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<component name="InspectionProjectProfileManager">
|
|
2
|
+
<profile version="1.0">
|
|
3
|
+
<option name="myName" value="Project Default" />
|
|
4
|
+
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
|
5
|
+
<inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
|
|
6
|
+
</profile>
|
|
7
|
+
</component>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<project version="4">
|
|
3
|
+
<component name="ProjectModuleManager">
|
|
4
|
+
<modules>
|
|
5
|
+
<module fileurl="file://$PROJECT_DIR$/.idea/design-system-web_2023-02-07.iml" filepath="$PROJECT_DIR$/.idea/design-system-web_2023-02-07.iml" />
|
|
6
|
+
</modules>
|
|
7
|
+
</component>
|
|
8
|
+
</project>
|
package/.idea/php.xml
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<project version="4">
|
|
3
|
+
<component name="MessDetectorOptionsConfiguration">
|
|
4
|
+
<option name="transferred" value="true" />
|
|
5
|
+
</component>
|
|
6
|
+
<component name="PHPCSFixerOptionsConfiguration">
|
|
7
|
+
<option name="transferred" value="true" />
|
|
8
|
+
</component>
|
|
9
|
+
<component name="PHPCodeSnifferOptionsConfiguration">
|
|
10
|
+
<option name="highlightLevel" value="WARNING" />
|
|
11
|
+
<option name="transferred" value="true" />
|
|
12
|
+
</component>
|
|
13
|
+
<component name="PhpStanOptionsConfiguration">
|
|
14
|
+
<option name="transferred" value="true" />
|
|
15
|
+
</component>
|
|
16
|
+
<component name="PsalmOptionsConfiguration">
|
|
17
|
+
<option name="transferred" value="true" />
|
|
18
|
+
</component>
|
|
19
|
+
</project>
|
package/.idea/vcs.xml
ADDED
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";var e,t,o,s=require("react"),r=require("styled-components");!function(e){e.PRIMARY="primary",e.SECONDARY="secondary",e.TERTIARY="tertiary"}(e||(e={})),function(e){e.MD="md",e.SM="sm",e.XL="xl",e.XS="xs",e.XXL="xxl"}(t||(t={})),function(e){e.BUTTON="button",e.RESET="reset",e.SUBMIT="submit"}(o||(o={}));const i=r.button`
|
|
2
2
|
/* common styles */
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-shrink: 0;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
cursor: pointer;
|
|
8
8
|
|
|
9
9
|
/* type specific styles */
|
|
10
|
-
${({buttonStyle:t})=>{switch(t){case e.PRIMARY:return
|
|
10
|
+
${({buttonStyle:t})=>{switch(t){case e.PRIMARY:return r.css`
|
|
11
11
|
color: ${({theme:e})=>e.colors.fg.neutral.white.light};
|
|
12
12
|
background-color: ${({theme:e})=>e.colors.bg.brand.bold.light};
|
|
13
13
|
border: 1px solid ${({theme:e})=>e.colors.border.brand.bold.light};
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
background-color: ${({theme:e})=>e.colors.bg.disabled.light};
|
|
30
30
|
border: 1px solid ${({theme:e})=>e.colors.bg.disabled.light};
|
|
31
31
|
}
|
|
32
|
-
`;case e.SECONDARY:return
|
|
32
|
+
`;case e.SECONDARY:return r.css`
|
|
33
33
|
color: ${({theme:e})=>e.colors.fg.neutral.subtle.light};
|
|
34
34
|
background-color: ${({theme:e})=>e.colors.bg.neutral.white.light};
|
|
35
35
|
border: 1px solid ${({theme:e})=>e.colors.border.neutral.subtle.light};
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
background-color: ${({theme:e})=>e.colors.bg.neutral.white.light};
|
|
54
54
|
border: 1px solid ${({theme:e})=>e.colors.bg.disabled.light};
|
|
55
55
|
}
|
|
56
|
-
`;case e.TERTIARY:return
|
|
56
|
+
`;case e.TERTIARY:return r.css`
|
|
57
57
|
color: ${({theme:e})=>e.colors.fg.neutral.subtle.light};
|
|
58
58
|
background-color: ${({theme:e})=>e.colors.bg.neutral.white.light};
|
|
59
59
|
border: none;
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
`;default:return""}}}
|
|
78
78
|
|
|
79
79
|
/* size specific styles */
|
|
80
|
-
${({size:e})=>{switch(e){case t.XS:return
|
|
80
|
+
${({size:e})=>{switch(e){case t.XS:return r.css`
|
|
81
81
|
gap: ${({theme:e})=>e.spacing.xxs};
|
|
82
82
|
min-height: ${({theme:e})=>e.spacing.xl};
|
|
83
83
|
padding: ${({theme:e})=>e.spacing.xxs} ${({theme:e})=>e.spacing.xs};
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
line-height: ${({theme:e})=>e.font.lineHeight.body.xs};
|
|
87
87
|
letter-spacing: ${({theme:e})=>e.font.letterSpacing.body.md};
|
|
88
88
|
border-radius: ${({theme:e})=>e.borderRadius.xxs};
|
|
89
|
-
`;case t.SM:return
|
|
89
|
+
`;case t.SM:return r.css`
|
|
90
90
|
gap: ${({theme:e})=>e.spacing.xxs};
|
|
91
91
|
min-height: ${({theme:e})=>e.spacing.xl};
|
|
92
92
|
padding: ${({theme:e})=>e.spacing.xxs} ${({theme:e})=>e.spacing.xs};
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
line-height: ${({theme:e})=>e.font.lineHeight.body.sm};
|
|
96
96
|
letter-spacing: ${({theme:e})=>e.font.letterSpacing.body.md};
|
|
97
97
|
border-radius: ${({theme:e})=>e.borderRadius.xxs};
|
|
98
|
-
`;case t.MD:return
|
|
98
|
+
`;case t.MD:return r.css`
|
|
99
99
|
gap: ${({theme:e})=>e.spacing.xxs};
|
|
100
100
|
min-height: ${({theme:e})=>e.spacing.xxl};
|
|
101
101
|
padding: ${({theme:e})=>e.spacing.xs} ${({theme:e})=>e.spacing.sm};
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
line-height: ${({theme:e})=>e.font.lineHeight.body.sm};
|
|
105
105
|
letter-spacing: ${({theme:e})=>e.font.letterSpacing.body.md};
|
|
106
106
|
border-radius: ${({theme:e})=>e.borderRadius.xs};
|
|
107
|
-
`;case t.XL:return
|
|
107
|
+
`;case t.XL:return r.css`
|
|
108
108
|
gap: ${({theme:e})=>e.spacing.xs};
|
|
109
109
|
min-height: ${({theme:e})=>e.spacing.xxxl};
|
|
110
110
|
padding: ${({theme:e})=>e.spacing.sm};
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
font-weight: ${({theme:e})=>e.font.weight.medium};
|
|
113
113
|
line-height: ${({theme:e})=>e.font.lineHeight.body.md};
|
|
114
114
|
border-radius: ${({theme:e})=>e.borderRadius.xs};
|
|
115
|
-
`;case t.XXL:return
|
|
115
|
+
`;case t.XXL:return r.css`
|
|
116
116
|
gap: ${({theme:e})=>e.spacing.sm};
|
|
117
117
|
min-height: ${({theme:e})=>e.spacing.xxxxl};
|
|
118
118
|
padding: ${({theme:e})=>e.spacing.md} ${({theme:e})=>e.spacing.xl};
|
|
@@ -120,12 +120,12 @@
|
|
|
120
120
|
font-weight: ${({theme:e})=>e.font.weight.medium};
|
|
121
121
|
line-height: ${({theme:e})=>e.font.lineHeight.body.lg};
|
|
122
122
|
border-radius: ${({theme:e})=>e.borderRadius.sm};
|
|
123
|
-
`;default:return
|
|
123
|
+
`;default:return r.css`
|
|
124
124
|
border-radius: ${({theme:e})=>e.borderRadius.xxs};
|
|
125
125
|
`}}}
|
|
126
|
-
`,
|
|
126
|
+
`,l=r.div`
|
|
127
127
|
display: flex;
|
|
128
128
|
align-items: center;
|
|
129
129
|
height: 100%;
|
|
130
|
-
`;
|
|
130
|
+
`;exports.Button=e=>{const{buttonStyle:t,children:r,disabled:n=!1,displayOnlyIcon:h=!1,iconLeft:d,iconRight:c,onClick:a,size:g,type:m=o.BUTTON}=e;return s.createElement(i,{buttonStyle:t,disabled:n,displayOnlyIcon:h,size:g,type:m,onClick:a},void 0!==d&&s.createElement(l,{size:g},d),!h&&s.createElement(s.Fragment,null,r,void 0!==c&&s.createElement(l,{size:g},c)))};
|
|
131
131
|
//# sourceMappingURL=index.cjs.js.map
|
package/dist/index.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../src/components/button/button.types.ts","../src/components/button/button.styles.ts"],"sourcesContent":[null,null],"names":["ButtonStyle","ButtonSize","ButtonType","styled","button","buttonStyle","PRIMARY","css","theme","colors","fg","neutral","white","light","bg","brand","bold","border","hover","shadow","buttonFocus","pressed","disabled","SECONDARY","subtle","default","TERTIARY","size","XS","spacing","xxs","xl","xs","font","body","weight","medium","lineHeight","letterSpacing","md","borderRadius","SM","sm","MD","xxl","XL","xxxl","XXL","xxxxl","lg","div"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../src/components/button/button.types.ts","../src/components/button/button.styles.ts","../src/components/button/button.tsx"],"sourcesContent":[null,null,null],"names":["ButtonStyle","ButtonSize","ButtonType","ButtonStyled","styled","button","buttonStyle","PRIMARY","css","theme","colors","fg","neutral","white","light","bg","brand","bold","border","hover","shadow","buttonFocus","pressed","disabled","SECONDARY","subtle","default","TERTIARY","size","XS","spacing","xxs","xl","xs","font","body","weight","medium","lineHeight","letterSpacing","md","borderRadius","SM","sm","MD","xxl","XL","xxxl","XXL","xxxxl","lg","IconWrapperStyled","div","props","children","displayOnlyIcon","iconLeft","iconRight","onClick","type","BUTTON","React","createElement","undefined","Fragment"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './components/button/
|
|
1
|
+
export * from './components/button/index';
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import"react";import
|
|
1
|
+
import e from"react";import t,{css as o}from"styled-components";var r,i,s;!function(e){e.PRIMARY="primary",e.SECONDARY="secondary",e.TERTIARY="tertiary"}(r||(r={})),function(e){e.MD="md",e.SM="sm",e.XL="xl",e.XS="xs",e.XXL="xxl"}(i||(i={})),function(e){e.BUTTON="button",e.RESET="reset",e.SUBMIT="submit"}(s||(s={}));const l=t.button`
|
|
2
2
|
/* common styles */
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-shrink: 0;
|
|
@@ -7,7 +7,7 @@ import"react";import e,{css as t}from"styled-components";var o,r,i;!function(e){
|
|
|
7
7
|
cursor: pointer;
|
|
8
8
|
|
|
9
9
|
/* type specific styles */
|
|
10
|
-
${({buttonStyle:e})=>{switch(e){case
|
|
10
|
+
${({buttonStyle:e})=>{switch(e){case r.PRIMARY:return o`
|
|
11
11
|
color: ${({theme:e})=>e.colors.fg.neutral.white.light};
|
|
12
12
|
background-color: ${({theme:e})=>e.colors.bg.brand.bold.light};
|
|
13
13
|
border: 1px solid ${({theme:e})=>e.colors.border.brand.bold.light};
|
|
@@ -29,7 +29,7 @@ import"react";import e,{css as t}from"styled-components";var o,r,i;!function(e){
|
|
|
29
29
|
background-color: ${({theme:e})=>e.colors.bg.disabled.light};
|
|
30
30
|
border: 1px solid ${({theme:e})=>e.colors.bg.disabled.light};
|
|
31
31
|
}
|
|
32
|
-
`;case
|
|
32
|
+
`;case r.SECONDARY:return o`
|
|
33
33
|
color: ${({theme:e})=>e.colors.fg.neutral.subtle.light};
|
|
34
34
|
background-color: ${({theme:e})=>e.colors.bg.neutral.white.light};
|
|
35
35
|
border: 1px solid ${({theme:e})=>e.colors.border.neutral.subtle.light};
|
|
@@ -53,7 +53,7 @@ import"react";import e,{css as t}from"styled-components";var o,r,i;!function(e){
|
|
|
53
53
|
background-color: ${({theme:e})=>e.colors.bg.neutral.white.light};
|
|
54
54
|
border: 1px solid ${({theme:e})=>e.colors.bg.disabled.light};
|
|
55
55
|
}
|
|
56
|
-
`;case
|
|
56
|
+
`;case r.TERTIARY:return o`
|
|
57
57
|
color: ${({theme:e})=>e.colors.fg.neutral.subtle.light};
|
|
58
58
|
background-color: ${({theme:e})=>e.colors.bg.neutral.white.light};
|
|
59
59
|
border: none;
|
|
@@ -77,7 +77,7 @@ import"react";import e,{css as t}from"styled-components";var o,r,i;!function(e){
|
|
|
77
77
|
`;default:return""}}}
|
|
78
78
|
|
|
79
79
|
/* size specific styles */
|
|
80
|
-
${({size:e})=>{switch(e){case
|
|
80
|
+
${({size:e})=>{switch(e){case i.XS:return o`
|
|
81
81
|
gap: ${({theme:e})=>e.spacing.xxs};
|
|
82
82
|
min-height: ${({theme:e})=>e.spacing.xl};
|
|
83
83
|
padding: ${({theme:e})=>e.spacing.xxs} ${({theme:e})=>e.spacing.xs};
|
|
@@ -86,7 +86,7 @@ import"react";import e,{css as t}from"styled-components";var o,r,i;!function(e){
|
|
|
86
86
|
line-height: ${({theme:e})=>e.font.lineHeight.body.xs};
|
|
87
87
|
letter-spacing: ${({theme:e})=>e.font.letterSpacing.body.md};
|
|
88
88
|
border-radius: ${({theme:e})=>e.borderRadius.xxs};
|
|
89
|
-
`;case
|
|
89
|
+
`;case i.SM:return o`
|
|
90
90
|
gap: ${({theme:e})=>e.spacing.xxs};
|
|
91
91
|
min-height: ${({theme:e})=>e.spacing.xl};
|
|
92
92
|
padding: ${({theme:e})=>e.spacing.xxs} ${({theme:e})=>e.spacing.xs};
|
|
@@ -95,7 +95,7 @@ import"react";import e,{css as t}from"styled-components";var o,r,i;!function(e){
|
|
|
95
95
|
line-height: ${({theme:e})=>e.font.lineHeight.body.sm};
|
|
96
96
|
letter-spacing: ${({theme:e})=>e.font.letterSpacing.body.md};
|
|
97
97
|
border-radius: ${({theme:e})=>e.borderRadius.xxs};
|
|
98
|
-
`;case
|
|
98
|
+
`;case i.MD:return o`
|
|
99
99
|
gap: ${({theme:e})=>e.spacing.xxs};
|
|
100
100
|
min-height: ${({theme:e})=>e.spacing.xxl};
|
|
101
101
|
padding: ${({theme:e})=>e.spacing.xs} ${({theme:e})=>e.spacing.sm};
|
|
@@ -104,7 +104,7 @@ import"react";import e,{css as t}from"styled-components";var o,r,i;!function(e){
|
|
|
104
104
|
line-height: ${({theme:e})=>e.font.lineHeight.body.sm};
|
|
105
105
|
letter-spacing: ${({theme:e})=>e.font.letterSpacing.body.md};
|
|
106
106
|
border-radius: ${({theme:e})=>e.borderRadius.xs};
|
|
107
|
-
`;case
|
|
107
|
+
`;case i.XL:return o`
|
|
108
108
|
gap: ${({theme:e})=>e.spacing.xs};
|
|
109
109
|
min-height: ${({theme:e})=>e.spacing.xxxl};
|
|
110
110
|
padding: ${({theme:e})=>e.spacing.sm};
|
|
@@ -112,7 +112,7 @@ import"react";import e,{css as t}from"styled-components";var o,r,i;!function(e){
|
|
|
112
112
|
font-weight: ${({theme:e})=>e.font.weight.medium};
|
|
113
113
|
line-height: ${({theme:e})=>e.font.lineHeight.body.md};
|
|
114
114
|
border-radius: ${({theme:e})=>e.borderRadius.xs};
|
|
115
|
-
`;case
|
|
115
|
+
`;case i.XXL:return o`
|
|
116
116
|
gap: ${({theme:e})=>e.spacing.sm};
|
|
117
117
|
min-height: ${({theme:e})=>e.spacing.xxxxl};
|
|
118
118
|
padding: ${({theme:e})=>e.spacing.md} ${({theme:e})=>e.spacing.xl};
|
|
@@ -120,12 +120,12 @@ import"react";import e,{css as t}from"styled-components";var o,r,i;!function(e){
|
|
|
120
120
|
font-weight: ${({theme:e})=>e.font.weight.medium};
|
|
121
121
|
line-height: ${({theme:e})=>e.font.lineHeight.body.lg};
|
|
122
122
|
border-radius: ${({theme:e})=>e.borderRadius.sm};
|
|
123
|
-
`;default:return
|
|
123
|
+
`;default:return o`
|
|
124
124
|
border-radius: ${({theme:e})=>e.borderRadius.xxs};
|
|
125
125
|
`}}}
|
|
126
|
-
`,
|
|
126
|
+
`,n=t.div`
|
|
127
127
|
display: flex;
|
|
128
128
|
align-items: center;
|
|
129
129
|
height: 100%;
|
|
130
|
-
|
|
130
|
+
`,h=t=>{const{buttonStyle:o,children:r,disabled:i=!1,displayOnlyIcon:h=!1,iconLeft:d,iconRight:c,onClick:a,size:g,type:m=s.BUTTON}=t;return e.createElement(l,{buttonStyle:o,disabled:i,displayOnlyIcon:h,size:g,type:m,onClick:a},void 0!==d&&e.createElement(n,{size:g},d),!h&&e.createElement(e.Fragment,null,r,void 0!==c&&e.createElement(n,{size:g},c)))};export{h as Button};
|
|
131
131
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../src/components/button/button.types.ts","../src/components/button/button.styles.ts"],"sourcesContent":[null,null],"names":["ButtonStyle","ButtonSize","ButtonType","styled","button","buttonStyle","PRIMARY","css","theme","colors","fg","neutral","white","light","bg","brand","bold","border","hover","shadow","buttonFocus","pressed","disabled","SECONDARY","subtle","default","TERTIARY","size","XS","spacing","xxs","xl","xs","font","body","weight","medium","lineHeight","letterSpacing","md","borderRadius","SM","sm","MD","xxl","XL","xxxl","XXL","xxxxl","lg","div"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../src/components/button/button.types.ts","../src/components/button/button.styles.ts","../src/components/button/button.tsx"],"sourcesContent":[null,null,null],"names":["ButtonStyle","ButtonSize","ButtonType","ButtonStyled","styled","button","buttonStyle","PRIMARY","css","theme","colors","fg","neutral","white","light","bg","brand","bold","border","hover","shadow","buttonFocus","pressed","disabled","SECONDARY","subtle","default","TERTIARY","size","XS","spacing","xxs","xl","xs","font","body","weight","medium","lineHeight","letterSpacing","md","borderRadius","SM","sm","MD","xxl","XL","xxxl","XXL","xxxxl","lg","IconWrapperStyled","div","Button","props","children","displayOnlyIcon","iconLeft","iconRight","onClick","type","BUTTON","React","createElement","undefined","Fragment"],"mappings":"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"}
|
package/package.json
CHANGED
package/src/@types/json.d.ts
DELETED
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
|
|
3
|
-
import Button from './button';
|
|
4
|
-
import { ButtonSize, ButtonStyle, ButtonType, Props } from './button.types';
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import { SystemIcon } from '@/icons/systemIcon';
|
|
7
|
-
|
|
8
|
-
const meta = {
|
|
9
|
-
title: 'Button',
|
|
10
|
-
component: Button,
|
|
11
|
-
parameters: {},
|
|
12
|
-
tags: ['autodocs'],
|
|
13
|
-
argTypes: {},
|
|
14
|
-
decorators: [
|
|
15
|
-
(story) => {
|
|
16
|
-
return <>{story()}</>;
|
|
17
|
-
},
|
|
18
|
-
],
|
|
19
|
-
} satisfies Meta<typeof Button>;
|
|
20
|
-
|
|
21
|
-
export default meta;
|
|
22
|
-
|
|
23
|
-
type Story = StoryObj<typeof meta>;
|
|
24
|
-
|
|
25
|
-
const defaultStyle: ButtonStyle = ButtonStyle.PRIMARY;
|
|
26
|
-
const defaultSize: ButtonSize = ButtonSize.MD;
|
|
27
|
-
const defaultChildren = 'button';
|
|
28
|
-
|
|
29
|
-
const defaultProps: Props = {
|
|
30
|
-
buttonStyle: defaultStyle,
|
|
31
|
-
size: defaultSize,
|
|
32
|
-
children: defaultChildren,
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
export const Default: Story = {
|
|
36
|
-
args: {
|
|
37
|
-
children: 'button',
|
|
38
|
-
buttonStyle: ButtonStyle.PRIMARY,
|
|
39
|
-
size: ButtonSize.MD,
|
|
40
|
-
disabled: false,
|
|
41
|
-
displayOnlyIcon: false,
|
|
42
|
-
iconLeft: <SystemIcon />,
|
|
43
|
-
iconRight: <SystemIcon />,
|
|
44
|
-
type: ButtonType.BUTTON,
|
|
45
|
-
},
|
|
46
|
-
argTypes: {
|
|
47
|
-
buttonStyle: {
|
|
48
|
-
type: {
|
|
49
|
-
name: 'enum',
|
|
50
|
-
value: Object.values(ButtonStyle),
|
|
51
|
-
},
|
|
52
|
-
},
|
|
53
|
-
size: {
|
|
54
|
-
type: {
|
|
55
|
-
name: 'enum',
|
|
56
|
-
value: Object.values(ButtonSize),
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
displayOnlyIcon: {
|
|
60
|
-
type: {
|
|
61
|
-
name: 'boolean',
|
|
62
|
-
},
|
|
63
|
-
},
|
|
64
|
-
disabled: {
|
|
65
|
-
type: {
|
|
66
|
-
name: 'boolean',
|
|
67
|
-
},
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
export const TypeButton: Story = {
|
|
73
|
-
args: {
|
|
74
|
-
...defaultProps,
|
|
75
|
-
},
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
export const TypePrimary: Story = {
|
|
79
|
-
args: { children: 'Primary button', buttonStyle: ButtonStyle.PRIMARY, size: defaultSize },
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
export const TypeSecondary: Story = {
|
|
83
|
-
args: { children: 'Secondary button', buttonStyle: ButtonStyle.SECONDARY, size: defaultSize },
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
export const TypeTertiary: Story = {
|
|
87
|
-
args: { children: 'Tertiary button', buttonStyle: ButtonStyle.TERTIARY, size: defaultSize },
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
export const WithOnClick: Story = {
|
|
91
|
-
args: {
|
|
92
|
-
...defaultProps,
|
|
93
|
-
onClick: () => {
|
|
94
|
-
console.log('onClick');
|
|
95
|
-
},
|
|
96
|
-
},
|
|
97
|
-
};
|
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
import styled, { css } from 'styled-components';
|
|
2
|
-
|
|
3
|
-
import { ButtonSize, ButtonStyle, Props } from './button.types';
|
|
4
|
-
|
|
5
|
-
export const ButtonStyled = styled.button<Partial<Props>>`
|
|
6
|
-
/* common styles */
|
|
7
|
-
display: flex;
|
|
8
|
-
flex-shrink: 0;
|
|
9
|
-
align-items: center;
|
|
10
|
-
justify-content: center;
|
|
11
|
-
cursor: pointer;
|
|
12
|
-
|
|
13
|
-
/* type specific styles */
|
|
14
|
-
${({ buttonStyle }) => {
|
|
15
|
-
switch (buttonStyle) {
|
|
16
|
-
case ButtonStyle.PRIMARY:
|
|
17
|
-
return css`
|
|
18
|
-
color: ${({ theme }) => theme.colors.fg.neutral.white.light};
|
|
19
|
-
background-color: ${({ theme }) => theme.colors.bg.brand.bold.light};
|
|
20
|
-
border: 1px solid ${({ theme }) => theme.colors.border.brand.bold.light};
|
|
21
|
-
|
|
22
|
-
&:hover {
|
|
23
|
-
background-color: ${({ theme }) => theme.colors.bg.brand.bold.hover.light};
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&:focus {
|
|
27
|
-
box-shadow: ${({ theme }) => theme.colors.shadow.buttonFocus};
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
&:active {
|
|
31
|
-
background-color: ${({ theme }) => theme.colors.bg.brand.bold.pressed.light};
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
&:disabled {
|
|
35
|
-
color: ${({ theme }) => theme.colors.fg.disabled.light};
|
|
36
|
-
background-color: ${({ theme }) => theme.colors.bg.disabled.light};
|
|
37
|
-
border: 1px solid ${({ theme }) => theme.colors.bg.disabled.light};
|
|
38
|
-
}
|
|
39
|
-
`;
|
|
40
|
-
case ButtonStyle.SECONDARY:
|
|
41
|
-
return css`
|
|
42
|
-
color: ${({ theme }) => theme.colors.fg.neutral.subtle.light};
|
|
43
|
-
background-color: ${({ theme }) => theme.colors.bg.neutral.white.light};
|
|
44
|
-
border: 1px solid ${({ theme }) => theme.colors.border.neutral.subtle.light};
|
|
45
|
-
|
|
46
|
-
&:hover {
|
|
47
|
-
background-color: ${({ theme }) => theme.colors.bg.brand.default.light};
|
|
48
|
-
border: 2px solid ${({ theme }) => theme.colors.border.brand.subtle.light};
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
&:focus {
|
|
52
|
-
box-shadow: ${({ theme }) => theme.colors.shadow.buttonFocus};
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&:active {
|
|
56
|
-
background-color: ${({ theme }) => theme.colors.bg.brand.default.pressed.light};
|
|
57
|
-
border: 2px solid ${({ theme }) => theme.colors.border.brand.subtle.light};
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
&:disabled {
|
|
61
|
-
color: ${({ theme }) => theme.colors.fg.disabled.light};
|
|
62
|
-
background-color: ${({ theme }) => theme.colors.bg.neutral.white.light};
|
|
63
|
-
border: 1px solid ${({ theme }) => theme.colors.bg.disabled.light};
|
|
64
|
-
}
|
|
65
|
-
`;
|
|
66
|
-
case ButtonStyle.TERTIARY:
|
|
67
|
-
return css`
|
|
68
|
-
color: ${({ theme }) => theme.colors.fg.neutral.subtle.light};
|
|
69
|
-
background-color: ${({ theme }) => theme.colors.bg.neutral.white.light};
|
|
70
|
-
border: none;
|
|
71
|
-
|
|
72
|
-
&:hover {
|
|
73
|
-
background-color: ${({ theme }) => theme.colors.bg.brand.default.light};
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
&:focus {
|
|
77
|
-
box-shadow: ${({ theme }) => theme.colors.shadow.buttonFocus};
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
&:active {
|
|
81
|
-
background-color: ${({ theme }) => theme.colors.bg.brand.default.pressed.light};
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
&:disabled {
|
|
85
|
-
color: ${({ theme }) => theme.colors.fg.disabled.light};
|
|
86
|
-
background-color: ${({ theme }) => theme.colors.bg.neutral.white.light};
|
|
87
|
-
}
|
|
88
|
-
`;
|
|
89
|
-
default:
|
|
90
|
-
return '';
|
|
91
|
-
}
|
|
92
|
-
}}
|
|
93
|
-
|
|
94
|
-
/* size specific styles */
|
|
95
|
-
${({ size }) => {
|
|
96
|
-
switch (size) {
|
|
97
|
-
case ButtonSize.XS:
|
|
98
|
-
return css`
|
|
99
|
-
gap: ${({ theme }) => theme.spacing.xxs};
|
|
100
|
-
min-height: ${({ theme }) => theme.spacing.xl};
|
|
101
|
-
padding: ${({ theme }) => theme.spacing.xxs} ${({ theme }) => theme.spacing.xs};
|
|
102
|
-
font-size: ${({ theme }) => theme.font.size.body.xs};
|
|
103
|
-
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
104
|
-
line-height: ${({ theme }) => theme.font.lineHeight.body.xs};
|
|
105
|
-
letter-spacing: ${({ theme }) => theme.font.letterSpacing.body.md};
|
|
106
|
-
border-radius: ${({ theme }) => theme.borderRadius.xxs};
|
|
107
|
-
`;
|
|
108
|
-
case ButtonSize.SM:
|
|
109
|
-
return css`
|
|
110
|
-
gap: ${({ theme }) => theme.spacing.xxs};
|
|
111
|
-
min-height: ${({ theme }) => theme.spacing.xl};
|
|
112
|
-
padding: ${({ theme }) => theme.spacing.xxs} ${({ theme }) => theme.spacing.xs};
|
|
113
|
-
font-size: ${({ theme }) => theme.font.size.body.sm};
|
|
114
|
-
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
115
|
-
line-height: ${({ theme }) => theme.font.lineHeight.body.sm};
|
|
116
|
-
letter-spacing: ${({ theme }) => theme.font.letterSpacing.body.md};
|
|
117
|
-
border-radius: ${({ theme }) => theme.borderRadius.xxs};
|
|
118
|
-
`;
|
|
119
|
-
case ButtonSize.MD:
|
|
120
|
-
return css`
|
|
121
|
-
gap: ${({ theme }) => theme.spacing.xxs};
|
|
122
|
-
min-height: ${({ theme }) => theme.spacing.xxl};
|
|
123
|
-
padding: ${({ theme }) => theme.spacing.xs} ${({ theme }) => theme.spacing.sm};
|
|
124
|
-
font-size: ${({ theme }) => theme.font.size.body.sm};
|
|
125
|
-
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
126
|
-
line-height: ${({ theme }) => theme.font.lineHeight.body.sm};
|
|
127
|
-
letter-spacing: ${({ theme }) => theme.font.letterSpacing.body.md};
|
|
128
|
-
border-radius: ${({ theme }) => theme.borderRadius.xs};
|
|
129
|
-
`;
|
|
130
|
-
case ButtonSize.XL:
|
|
131
|
-
return css`
|
|
132
|
-
gap: ${({ theme }) => theme.spacing.xs};
|
|
133
|
-
min-height: ${({ theme }) => theme.spacing.xxxl};
|
|
134
|
-
padding: ${({ theme }) => theme.spacing.sm};
|
|
135
|
-
font-size: ${({ theme }) => theme.font.size.body.md};
|
|
136
|
-
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
137
|
-
line-height: ${({ theme }) => theme.font.lineHeight.body.md};
|
|
138
|
-
border-radius: ${({ theme }) => theme.borderRadius.xs};
|
|
139
|
-
`;
|
|
140
|
-
case ButtonSize.XXL:
|
|
141
|
-
return css`
|
|
142
|
-
gap: ${({ theme }) => theme.spacing.sm};
|
|
143
|
-
min-height: ${({ theme }) => theme.spacing.xxxxl};
|
|
144
|
-
padding: ${({ theme }) => theme.spacing.md} ${({ theme }) => theme.spacing.xl};
|
|
145
|
-
font-size: ${({ theme }) => theme.font.size.body.lg};
|
|
146
|
-
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
147
|
-
line-height: ${({ theme }) => theme.font.lineHeight.body.lg};
|
|
148
|
-
border-radius: ${({ theme }) => theme.borderRadius.sm};
|
|
149
|
-
`;
|
|
150
|
-
default:
|
|
151
|
-
return css`
|
|
152
|
-
border-radius: ${({ theme }) => theme.borderRadius.xxs};
|
|
153
|
-
`;
|
|
154
|
-
}
|
|
155
|
-
}}
|
|
156
|
-
`;
|
|
157
|
-
|
|
158
|
-
export const IconWrapperStyled = styled.div<Partial<Props>>`
|
|
159
|
-
display: flex;
|
|
160
|
-
align-items: center;
|
|
161
|
-
height: 100%;
|
|
162
|
-
`;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import '@testing-library/jest-dom';
|
|
3
|
-
import { render, screen } from '@testing-library/react';
|
|
4
|
-
|
|
5
|
-
import { ButtonSize, ButtonStyle, ButtonType } from './button.types';
|
|
6
|
-
import Button from './button';
|
|
7
|
-
import StyledComponentsThemeProvider from '@/provider/styledComponents/theme/styledComponentsThemeProvider';
|
|
8
|
-
|
|
9
|
-
describe('Running Test for Button', () => {
|
|
10
|
-
test('Check Button Disabled', () => {
|
|
11
|
-
render(
|
|
12
|
-
<StyledComponentsThemeProvider>
|
|
13
|
-
<Button
|
|
14
|
-
buttonStyle={ButtonStyle.PRIMARY}
|
|
15
|
-
disabled={true}
|
|
16
|
-
size={ButtonSize.MD}
|
|
17
|
-
type={ButtonType.BUTTON}
|
|
18
|
-
>
|
|
19
|
-
Button
|
|
20
|
-
</Button>
|
|
21
|
-
</StyledComponentsThemeProvider>,
|
|
22
|
-
);
|
|
23
|
-
expect(screen.getByRole('button', { name: 'Button' })).toBeDisabled();
|
|
24
|
-
});
|
|
25
|
-
});
|