norma-library 0.5.50 → 0.5.52
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/.storybook/main.ts +20 -0
- package/.storybook/preview.ts +15 -0
- package/README.md +13 -11
- package/dist/esm/components/Card.js +7 -4
- package/dist/esm/components/Card.js.map +1 -1
- package/dist/esm/components/Tabs.js +3 -4
- package/dist/esm/components/Tabs.js.map +1 -1
- package/dist/esm/helpers/colors.js.map +1 -1
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/esm/types/index.js.map +1 -1
- package/package.json +22 -21
- package/src/components/Card.tsx +13 -8
- package/src/components/Tabs.tsx +3 -3
- package/src/helpers/colors.ts +0 -1
- package/src/stories/Button.stories.tsx +3 -1
- package/src/stories/Card.stories.tsx +1 -1
- package/src/types/index.ts +2 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { StorybookConfig } from '@storybook/react-vite';
|
|
2
|
+
|
|
3
|
+
const config: StorybookConfig = {
|
|
4
|
+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
|
5
|
+
addons: [
|
|
6
|
+
'@storybook/addon-links',
|
|
7
|
+
'@storybook/addon-essentials',
|
|
8
|
+
'@storybook/addon-onboarding',
|
|
9
|
+
'@storybook/addon-interactions',
|
|
10
|
+
'@storybook/addon-mdx-gfm'
|
|
11
|
+
],
|
|
12
|
+
framework: {
|
|
13
|
+
name: '@storybook/react-vite',
|
|
14
|
+
options: {},
|
|
15
|
+
},
|
|
16
|
+
docs: {
|
|
17
|
+
autodocs: 'tag',
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
export default config;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { Preview } from '@storybook/react';
|
|
2
|
+
|
|
3
|
+
const preview: Preview = {
|
|
4
|
+
parameters: {
|
|
5
|
+
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
6
|
+
controls: {
|
|
7
|
+
matchers: {
|
|
8
|
+
color: /(background|color)$/i,
|
|
9
|
+
date: /Date$/i,
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export default preview;
|
package/README.md
CHANGED
|
@@ -2,11 +2,8 @@
|
|
|
2
2
|
<p align="center">
|
|
3
3
|
<img width="120" height="120" src="https://www.olos.com.br/wp-content/uploads/2023/03/cropped-selo-olos-1-180x180.png" alt="Olos logo">
|
|
4
4
|
</p>
|
|
5
|
-
|
|
6
5
|
<h1 align="center">Norma DS </h1>
|
|
7
|
-
|
|
8
6
|
<div align="center">
|
|
9
|
-
|
|
10
7
|
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
|
|
11
8
|
|
|
12
9
|
[](https://github.com/mui/material-ui/blob/HEAD/LICENSE)
|
|
@@ -22,7 +19,7 @@ Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and
|
|
|
22
19
|
|
|
23
20
|
</div>
|
|
24
21
|
|
|
25
|
-
##
|
|
22
|
+
## Configurações
|
|
26
23
|
|
|
27
24
|
- [React v18](https://react.dev/)
|
|
28
25
|
- [TypeScript](https://www.typescriptlang.org/)
|
|
@@ -33,10 +30,15 @@ Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and
|
|
|
33
30
|
- Build the library with [Rollup][rollup-url]
|
|
34
31
|
- Automated release with [changesets][changesets-url]
|
|
35
32
|
|
|
36
|
-
#
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
33
|
+
# Documentação
|
|
34
|
+
|
|
35
|
+
### Instalação
|
|
36
|
+
Para instalação das dependencias:
|
|
37
|
+
```
|
|
38
|
+
npm install
|
|
39
|
+
```
|
|
40
|
+
### Execução do projeto
|
|
41
|
+
Para utilizar o Storybook:
|
|
42
|
+
```
|
|
43
|
+
npm run storybook
|
|
44
|
+
```
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { Card as MuiCard } from '@mui/material';
|
|
4
|
-
import { palette } from '../helpers';
|
|
2
|
+
import React, { useMemo } from 'react';
|
|
3
|
+
import { Card as MuiCard, ThemeProvider, useMediaQuery } from '@mui/material';
|
|
4
|
+
import { palette, themes } from '../helpers';
|
|
5
5
|
import { styled } from '@mui/material/styles';
|
|
6
6
|
var colorMap = {
|
|
7
7
|
inherit: palette.inherit,
|
|
@@ -23,6 +23,9 @@ var CardStyled = styled(MuiCard)(function (_a) {
|
|
|
23
23
|
});
|
|
24
24
|
export var Card = function (_a) {
|
|
25
25
|
var children = _a.children, border = _a.border, _b = _a.color, color = _b === void 0 ? 'inherit' : _b, props = __rest(_a, ["children", "border", "color"]);
|
|
26
|
-
|
|
26
|
+
var prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
|
27
|
+
var theme = useMemo(function () { return (prefersDarkMode ? themes.light : themes.dark); }, [prefersDarkMode]);
|
|
28
|
+
return (React.createElement(ThemeProvider, { theme: theme },
|
|
29
|
+
React.createElement(CardStyled, __assign({ borderColor: border ? color : undefined }, props), children)));
|
|
27
30
|
};
|
|
28
31
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,IAAM,QAAQ,GAAiC;IAC7C,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,SAAS,EAAE,OAAO,CAAC,SAAS;IAC5B,KAAK,EAAE,OAAO,CAAC,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,IAAI,EAAE,OAAO,CAAC,IAAI;IAClB,OAAO,EAAE,OAAO,CAAC,OAAO;CACzB,CAAC;AAEF,IAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAE/B,UAAC,EAAe;QAAb,WAAW,iBAAA;IAAO,OAAA,CAAC;QACvB,OAAO,EAAE,EAAE;QACX,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,uBAAuB;QAClC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,oBAAa,QAAQ,CAAC,WAAW,CAAC,CAAE,CAAC,CAAC,CAAC,MAAM;KACxE,CAAC;AALsB,CAKtB,CAAC,CAAC;AAEJ,MAAM,CAAC,IAAM,IAAI,GAAG,UAAC,EAKwC;IAJ3D,IAAA,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,aAAiB,EAAjB,KAAK,mBAAG,SAAS,KAAA,EACd,KAAK,cAJW,+BAKpB,CADS;IAER,IAAM,eAAe,GAAG,aAAa,CAAC,8BAA8B,CAAC,CAAC;IAEtE,IAAM,KAAK,GAAG,OAAO,CAAC,cAAM,OAAA,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAA9C,CAA8C,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAE/F,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK;QACzB,oBAAC,UAAU,aAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,IAAM,KAAK,GAC3D,QAAQ,CACE,CACC,CACjB,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { Box, Tabs as MuiTabs, Tab
|
|
3
|
+
import { Box, Tabs as MuiTabs, Tab } from '@mui/material';
|
|
4
4
|
import { palette } from '../helpers';
|
|
5
5
|
import { styled } from '@mui/material/styles';
|
|
6
6
|
var colorMap = {
|
|
@@ -49,8 +49,7 @@ var TabStyled = styled(function (props) { return React.createElement(Tab, __assi
|
|
|
49
49
|
});
|
|
50
50
|
function CustomTabPanel(props) {
|
|
51
51
|
var children = props.children, value = props.value, index = props.index, other = __rest(props, ["children", "value", "index"]);
|
|
52
|
-
return (React.createElement("div", __assign({ role: "tabpanel", hidden: value !== index, id: "simple-tabpanel-".concat(index), "aria-labelledby": "simple-tab-".concat(index) }, other), value === index && (React.createElement(Box, { sx: { p: 3 } },
|
|
53
|
-
React.createElement(Typography, null, children)))));
|
|
52
|
+
return (React.createElement("div", __assign({ role: "tabpanel", hidden: value !== index, id: "simple-tabpanel-".concat(index), "aria-labelledby": "simple-tab-".concat(index) }, other), value === index && (React.createElement(Box, { sx: { p: 3 } }, children))));
|
|
54
53
|
}
|
|
55
54
|
function a11yProps(index) {
|
|
56
55
|
return {
|
|
@@ -66,7 +65,7 @@ export var Tabs = function (_a) {
|
|
|
66
65
|
console.log(event);
|
|
67
66
|
};
|
|
68
67
|
return (React.createElement(Box, { sx: { width: '100%' } },
|
|
69
|
-
React.createElement(Box,
|
|
68
|
+
React.createElement(Box, null,
|
|
70
69
|
React.createElement(TabsStyled, __assign({ value: value, color: color, onChange: handleChange, "aria-label": "basic tabs example" }, props), data && data.map(function (item, key) { return React.createElement(TabStyled, __assign({ label: item.label, color: color }, a11yProps(key))); }))),
|
|
71
70
|
data &&
|
|
72
71
|
data.map(function (item, key) { return (React.createElement(CustomTabPanel, { value: value, index: key }, item.children)); })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,IAAI,IAAI,OAAO,EAAE,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/helpers/colors.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,CAAC,IAAM,UAAU,GAAG;IACxB,OAAO;QACL,OAAO,EAAE,mBAAmB;QAC5B,YAAY,EAAE,SAAS;QACvB,aAAa,EAAE,SAAS;QACxB,WAAW,EAAE,SAAS;
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/helpers/colors.ts"],"names":[],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ import { TimelineProps as MuiTimeLineProps } from '@mui/lab';
|
|
|
4
4
|
import { SwitchBaseProps as MuiSwitchBaseProps } from '@mui/material/internal/SwitchBase';
|
|
5
5
|
import { iconsSVG } from '../components/Svgs';
|
|
6
6
|
export type ColorVariant = 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
|
|
7
|
+
export type DisabledVariant = 'true' | 'false';
|
|
7
8
|
export type TextFieldColorVariant = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
|
|
8
9
|
export type CheckBoxColorVariant = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
|
|
9
10
|
export type SizeVariant = 'small' | 'medium' | 'large';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAuIA,MAAM,CAAC,IAAM,SAAS,GAA8B;IAClD,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;CACd,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "norma-library",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.52",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
|
|
6
6
|
"scripts": {
|
|
@@ -12,11 +12,9 @@
|
|
|
12
12
|
"build-docz": "docz build",
|
|
13
13
|
"serve-docz": "docz build && docz serve",
|
|
14
14
|
"clean-docz": "npx rimraf .docz && npx rimraf build/docz",
|
|
15
|
-
"pre-commit": "npx lint-staged",
|
|
16
15
|
"prepare": "husky install",
|
|
17
16
|
"prettier": "npx prettier \"./**/*.{js,json,ts,tsx}\" --write",
|
|
18
|
-
"tar": "tar -cvf norma-library.tar ./storybook-static"
|
|
19
|
-
"commit": "git-cz"
|
|
17
|
+
"tar": "tar -cvf norma-library.tar ./storybook-static"
|
|
20
18
|
},
|
|
21
19
|
"author": "José Roberto Miguel Filho",
|
|
22
20
|
"module": "dist/esm/index.js",
|
|
@@ -38,16 +36,8 @@
|
|
|
38
36
|
"@emotion/styled-base": "^11.0.0",
|
|
39
37
|
"@mdx-js/loader": "^2.3.0",
|
|
40
38
|
"@mui/lab": "^5.0.0-alpha.145",
|
|
41
|
-
"@storybook/addon-essentials": "^7.5.0-alpha.1",
|
|
42
|
-
"@storybook/addon-interactions": "^7.5.0-alpha.1",
|
|
43
|
-
"@storybook/addon-links": "^7.5.0-alpha.1",
|
|
44
|
-
"@storybook/addon-onboarding": "^1.0.8",
|
|
45
39
|
"@storybook/addon-styling": "^1.3.7",
|
|
46
|
-
"@storybook/blocks": "^7.4.1",
|
|
47
|
-
"@storybook/react": "^7.4.0",
|
|
48
40
|
"@storybook/react-webpack5": "^7.5.0-alpha.1",
|
|
49
|
-
"@storybook/testing-library": "^0.2.1-next.0",
|
|
50
|
-
"@types/react": "^18.2.21",
|
|
51
41
|
"autoprefixer": "^10.4.15",
|
|
52
42
|
"camelcase": "^8.0.0",
|
|
53
43
|
"chalk": "^5.3.0",
|
|
@@ -64,19 +54,30 @@
|
|
|
64
54
|
"react": "^18.2.0",
|
|
65
55
|
"react-dom": "^18.2.0",
|
|
66
56
|
"rimraf": "^5.0.5",
|
|
67
|
-
"storybook": "^7.5.0-alpha.1",
|
|
68
57
|
"storybook-addon-dark-mode-toggle": "^0.0.6",
|
|
69
58
|
"storybook-dark-mode": "^3.0.1",
|
|
70
59
|
"style-loader": "^3.3.3",
|
|
71
60
|
"tsconfig-paths-webpack-plugin": "^4.1.0",
|
|
72
|
-
"
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
"
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
61
|
+
"@storybook/addon-essentials": "^7.5.0",
|
|
62
|
+
"@storybook/addon-interactions": "^7.5.0",
|
|
63
|
+
"@storybook/addon-links": "^7.5.0",
|
|
64
|
+
"@storybook/addon-onboarding": "^1.0.8",
|
|
65
|
+
"@storybook/blocks": "^7.5.0",
|
|
66
|
+
"@storybook/react": "^7.5.0",
|
|
67
|
+
"@storybook/react-vite": "^7.5.0",
|
|
68
|
+
"@storybook/testing-library": "^0.2.2",
|
|
69
|
+
"@types/react": "^18.2.15",
|
|
70
|
+
"@types/react-dom": "^18.2.7",
|
|
71
|
+
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
|
72
|
+
"@typescript-eslint/parser": "^6.0.0",
|
|
73
|
+
"@vitejs/plugin-react": "^4.0.3",
|
|
74
|
+
"eslint": "^8.45.0",
|
|
75
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
76
|
+
"eslint-plugin-react-refresh": "^0.4.3",
|
|
77
|
+
"eslint-plugin-storybook": "^0.6.15",
|
|
78
|
+
"storybook": "^7.5.0",
|
|
79
|
+
"typescript": "^5.0.2",
|
|
80
|
+
"vite": "^4.4.5"
|
|
80
81
|
},
|
|
81
82
|
"lint-staged": {
|
|
82
83
|
"*.{md,mdx}": [
|
package/src/components/Card.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Card as MuiCard } from '@mui/material';
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { Card as MuiCard, ThemeProvider, useMediaQuery } from '@mui/material';
|
|
3
3
|
import { CardBaseProps } from '../interfaces';
|
|
4
|
-
import { palette } from '../helpers';
|
|
4
|
+
import { palette, themes } from '../helpers';
|
|
5
5
|
import { styled } from '@mui/material/styles';
|
|
6
6
|
import { ColorVariant } from '@/types';
|
|
7
7
|
|
|
@@ -30,10 +30,15 @@ export const Card = ({
|
|
|
30
30
|
color = 'inherit',
|
|
31
31
|
...props
|
|
32
32
|
}: CardBaseProps & { border?: boolean; color?: ColorVariant }) => {
|
|
33
|
-
|
|
33
|
+
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
|
34
|
+
|
|
35
|
+
const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
|
|
36
|
+
|
|
34
37
|
return (
|
|
35
|
-
<
|
|
36
|
-
{
|
|
37
|
-
|
|
38
|
+
<ThemeProvider theme={theme}>
|
|
39
|
+
<CardStyled borderColor={border ? color : undefined} {...props}>
|
|
40
|
+
{children}
|
|
41
|
+
</CardStyled>
|
|
42
|
+
</ThemeProvider>
|
|
38
43
|
);
|
|
39
|
-
};
|
|
44
|
+
};
|
package/src/components/Tabs.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Box, Tabs as MuiTabs, Tab
|
|
2
|
+
import { Box, Tabs as MuiTabs, Tab } from '@mui/material';
|
|
3
3
|
import { TabPanelProps, TabsBaseProps } from '../interfaces';
|
|
4
4
|
import { palette } from '../helpers';
|
|
5
5
|
import { styled } from '@mui/material/styles';
|
|
@@ -66,7 +66,7 @@ function CustomTabPanel(props: TabPanelProps) {
|
|
|
66
66
|
>
|
|
67
67
|
{value === index && (
|
|
68
68
|
<Box sx={{ p: 3 }}>
|
|
69
|
-
|
|
69
|
+
{children}
|
|
70
70
|
</Box>
|
|
71
71
|
)}
|
|
72
72
|
</div>
|
|
@@ -90,7 +90,7 @@ export const Tabs = ({ data = [], color = 'primary', ...props }: TabsBaseProps)
|
|
|
90
90
|
|
|
91
91
|
return (
|
|
92
92
|
<Box sx={{ width: '100%' }}>
|
|
93
|
-
<Box
|
|
93
|
+
<Box>
|
|
94
94
|
<TabsStyled value={value} color={color} onChange={handleChange} aria-label="basic tabs example" {...props}>
|
|
95
95
|
{data && data.map((item, key) => <TabStyled label={item.label} color={color} {...a11yProps(key)} />)}
|
|
96
96
|
</TabsStyled>
|
package/src/helpers/colors.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Button } from '../components/Button';
|
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
|
-
import { ButtonVariant, SizeVariant, ColorVariant } from '../types';
|
|
4
|
+
import { ButtonVariant, SizeVariant, ColorVariant, DisabledVariant } from '../types';
|
|
5
5
|
|
|
6
6
|
const sizes: SizeVariant[] = ['small', 'medium', 'large'];
|
|
7
|
+
const disableds: DisabledVariant[] = ['true', 'false'];
|
|
7
8
|
const variants: ButtonVariant[] = ['text', 'outlined', 'contained'];
|
|
8
9
|
const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
|
|
9
10
|
|
|
@@ -28,6 +29,7 @@ const defaultArgs = {
|
|
|
28
29
|
export const Playground: Story = {
|
|
29
30
|
args: {
|
|
30
31
|
label: 'My Button',
|
|
32
|
+
disabled: defaultArgs.disabled,
|
|
31
33
|
size: 'medium',
|
|
32
34
|
color: 'primary',
|
|
33
35
|
variant: 'contained',
|
package/src/types/index.ts
CHANGED
|
@@ -27,6 +27,8 @@ import { iconsSVG } from '../components/Svgs';
|
|
|
27
27
|
|
|
28
28
|
export type ColorVariant = 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
|
|
29
29
|
|
|
30
|
+
export type DisabledVariant = 'true' | 'false';
|
|
31
|
+
|
|
30
32
|
export type TextFieldColorVariant = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
|
|
31
33
|
|
|
32
34
|
export type CheckBoxColorVariant = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
|