norma-library 0.5.146 → 0.5.147

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 (164) hide show
  1. package/.babelrc.json +18 -18
  2. package/.prettierignore +10 -10
  3. package/.prettierrc.json +20 -20
  4. package/.storybook/main.ts +20 -20
  5. package/.storybook/preview.ts +15 -15
  6. package/README.md +43 -43
  7. package/commitlint.config.js +1 -1
  8. package/dist/esm/helpers/colors.d.ts +4 -0
  9. package/dist/esm/helpers/colors.js +30 -0
  10. package/dist/esm/helpers/colors.js.map +1 -1
  11. package/docs/index.md +118 -118
  12. package/package.json +136 -136
  13. package/src/components/Accordion.tsx +39 -39
  14. package/src/components/Avatar.tsx +17 -17
  15. package/src/components/Badge.tsx +14 -14
  16. package/src/components/Box/index.tsx +12 -12
  17. package/src/components/Box/interfaces.ts +3 -3
  18. package/src/components/Box/styles.tsx +22 -22
  19. package/src/components/Breadcrumb/index.tsx +27 -27
  20. package/src/components/Breadcrumb/interface.ts +8 -8
  21. package/src/components/Breadcrumb/styles.tsx +32 -32
  22. package/src/components/Button.tsx +26 -26
  23. package/src/components/Card.tsx +37 -37
  24. package/src/components/ChatMessage.tsx +87 -87
  25. package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +56 -56
  26. package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +55 -55
  27. package/src/components/CheckBox.tsx +21 -21
  28. package/src/components/DateInput/index.tsx +34 -34
  29. package/src/components/DateInput/interface.ts +13 -13
  30. package/src/components/DateInput/styles.tsx +27 -27
  31. package/src/components/DatePicker.tsx +67 -67
  32. package/src/components/DropDown.tsx +24 -24
  33. package/src/components/IconButton.tsx +37 -37
  34. package/src/components/Icons.tsx +82 -82
  35. package/src/components/Modal.tsx +103 -103
  36. package/src/components/MultiSelectInput/components/MultiValue/index.tsx +44 -44
  37. package/src/components/MultiSelectInput/components/Option/index.tsx +62 -62
  38. package/src/components/MultiSelectInput/components/Option/styles.tsx +8 -8
  39. package/src/components/MultiSelectInput/index.tsx +60 -60
  40. package/src/components/MultiSelectInput/interfaces.ts +15 -15
  41. package/src/components/MultiSelectInput/styles.tsx +43 -43
  42. package/src/components/Paper.tsx +12 -12
  43. package/src/components/ProgressBar.tsx +71 -71
  44. package/src/components/RadioGroup.tsx +43 -43
  45. package/src/components/RangerSlider.tsx +65 -65
  46. package/src/components/Select.tsx +74 -74
  47. package/src/components/SelectInput/components/Option/index.tsx +61 -61
  48. package/src/components/SelectInput/components/Option/styles.tsx +8 -8
  49. package/src/components/SelectInput/index.tsx +45 -45
  50. package/src/components/SelectInput/interfaces.ts +15 -15
  51. package/src/components/SelectInput/styles.tsx +31 -31
  52. package/src/components/StatusModal/StatusModal.style.tsx +75 -75
  53. package/src/components/StatusModal/StatusModal.tsx +58 -58
  54. package/src/components/Svgs.tsx +506 -506
  55. package/src/components/Table/components/header/index.tsx +86 -86
  56. package/src/components/Table/components/header/styles.tsx +59 -59
  57. package/src/components/Table/components/index.tsx +8 -8
  58. package/src/components/Table/components/pagination/index.tsx +39 -39
  59. package/src/components/Table/components/pagination/styles.tsx +28 -28
  60. package/src/components/Table/components/tbody/index.tsx +30 -30
  61. package/src/components/Table/components/tbody/styles.tsx +4 -4
  62. package/src/components/Table/index.tsx +317 -317
  63. package/src/components/Table/interface.ts +23 -23
  64. package/src/components/Table/styles.tsx +117 -117
  65. package/src/components/Tabs.tsx +105 -105
  66. package/src/components/Tag.tsx +33 -33
  67. package/src/components/TextField.tsx +19 -19
  68. package/src/components/TextInput/index.tsx +37 -37
  69. package/src/components/TextInput/interface.ts +9 -9
  70. package/src/components/TextInput/styles.tsx +23 -23
  71. package/src/components/TimeLine.tsx +89 -89
  72. package/src/components/TimePicker.tsx +78 -78
  73. package/src/components/Typography/Text/index.tsx +20 -20
  74. package/src/components/Typography/Text/interfaces.ts +5 -5
  75. package/src/components/Typography/Text/styles.tsx +40 -40
  76. package/src/components/Typography/Title/index.tsx +22 -22
  77. package/src/components/Typography/Title/interfaces.ts +6 -6
  78. package/src/components/Typography/Title/styles.tsx +40 -40
  79. package/src/components/Typography/index.tsx +6 -6
  80. package/src/components/UncontrolledTable/components/header/index.tsx +63 -63
  81. package/src/components/UncontrolledTable/components/header/styles.tsx +60 -60
  82. package/src/components/UncontrolledTable/components/index.tsx +8 -8
  83. package/src/components/UncontrolledTable/components/pagination/index.tsx +43 -43
  84. package/src/components/UncontrolledTable/components/pagination/styles.tsx +28 -28
  85. package/src/components/UncontrolledTable/components/tbody/index.tsx +33 -33
  86. package/src/components/UncontrolledTable/components/tbody/styles.tsx +25 -25
  87. package/src/components/UncontrolledTable/index.tsx +221 -221
  88. package/src/components/UncontrolledTable/interface.ts +43 -43
  89. package/src/components/UncontrolledTable/styles.tsx +116 -116
  90. package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx +56 -56
  91. package/src/components/UncontrolledTabs/UncontrolledTabs.tsx +68 -68
  92. package/src/components/index.ts +24 -24
  93. package/src/helpers/alignments.ts +14 -14
  94. package/src/helpers/borders.ts +18 -18
  95. package/src/helpers/colors.ts +241 -206
  96. package/src/helpers/index.ts +5 -5
  97. package/src/helpers/radios.ts +24 -24
  98. package/src/helpers/sizes.ts +72 -72
  99. package/src/hooks/useClickOutside.tsx +18 -18
  100. package/src/index.ts +66 -66
  101. package/src/interfaces/Accordion.ts +12 -12
  102. package/src/interfaces/Avatar.tsx +15 -15
  103. package/src/interfaces/Badge.ts +19 -19
  104. package/src/interfaces/Button.ts +22 -22
  105. package/src/interfaces/Card.ts +11 -11
  106. package/src/interfaces/ChatMessage.ts +12 -12
  107. package/src/interfaces/ChatMessageBalloon.ts +17 -17
  108. package/src/interfaces/CheckBox.ts +27 -27
  109. package/src/interfaces/DatePicker.ts +13 -13
  110. package/src/interfaces/DropDown.ts +14 -14
  111. package/src/interfaces/IconButton.ts +22 -22
  112. package/src/interfaces/Icons.ts +17 -17
  113. package/src/interfaces/Modal.ts +18 -18
  114. package/src/interfaces/Paper.ts +12 -12
  115. package/src/interfaces/ProgressBar.ts +29 -29
  116. package/src/interfaces/RadioGroup.ts +23 -23
  117. package/src/interfaces/RangerSlider.ts +21 -21
  118. package/src/interfaces/Select.ts +17 -17
  119. package/src/interfaces/Tabs.ts +19 -19
  120. package/src/interfaces/Tag.ts +17 -17
  121. package/src/interfaces/TextField.ts +44 -44
  122. package/src/interfaces/TimeLine.ts +11 -11
  123. package/src/interfaces/TimePicker.ts +13 -13
  124. package/src/interfaces/index.ts +23 -23
  125. package/src/providers/NormaProvider.tsx +13 -13
  126. package/src/sample-data-2.json +178 -178
  127. package/src/sample-data.json +177 -177
  128. package/src/stories/Accordion.stories.tsx +65 -65
  129. package/src/stories/Avatar.stories.tsx +123 -123
  130. package/src/stories/Badge.stories.tsx +39 -39
  131. package/src/stories/Box.stories.tsx +35 -35
  132. package/src/stories/Breadcrumb.stories.tsx +44 -44
  133. package/src/stories/Button.stories.tsx +93 -93
  134. package/src/stories/Card.stories.tsx +39 -39
  135. package/src/stories/ChatMessage.stories.tsx +84 -84
  136. package/src/stories/ChatMessageBalloon.stories.tsx +108 -108
  137. package/src/stories/CheckBox.stories.tsx +88 -88
  138. package/src/stories/DateInput.stories.tsx +51 -51
  139. package/src/stories/DatePicker.stories.tsx +50 -50
  140. package/src/stories/DropDown.stories.tsx +57 -57
  141. package/src/stories/IconButton.stories.tsx +78 -78
  142. package/src/stories/Modal.stories.tsx +246 -246
  143. package/src/stories/ModalStatus.stories.tsx +46 -46
  144. package/src/stories/MultiSelectInput.stories.tsx +90 -90
  145. package/src/stories/Paper.stories.tsx +53 -53
  146. package/src/stories/ProgressBar.stories.tsx +116 -116
  147. package/src/stories/RadioGroup.stories.tsx +87 -87
  148. package/src/stories/RangerSlider.stories.tsx +149 -149
  149. package/src/stories/Select.stories.tsx +100 -100
  150. package/src/stories/SelectInput.stories.tsx +78 -78
  151. package/src/stories/Table.stories.tsx +372 -372
  152. package/src/stories/Tabs.stories.tsx +61 -61
  153. package/src/stories/Tag.stories.tsx +56 -56
  154. package/src/stories/Text.stories.tsx +37 -37
  155. package/src/stories/TextField.stories.tsx +310 -310
  156. package/src/stories/TextInput.stories.tsx +52 -52
  157. package/src/stories/TimeLine.stories.tsx +35 -35
  158. package/src/stories/TimePicker.stories.tsx +87 -87
  159. package/src/stories/Title.stories.tsx +43 -43
  160. package/src/stories/UncontrolledTable.stories.tsx +305 -305
  161. package/src/stories/UncontrolledTabs.stories.tsx +63 -63
  162. package/src/styles/globals.scss +17 -17
  163. package/src/types/index.ts +204 -204
  164. package/vite.config.ts +15 -15
@@ -1,28 +1,28 @@
1
- import styled from "styled-components";
2
- import "react-datepicker/dist/react-datepicker.css";
3
- import { ContainerStyles } from './interface';
4
-
5
- export const Container = styled.div<ContainerStyles>`
6
- width: 100%;
7
- display: flex;
8
- flex-direction: column;
9
- .react-datepicker-wrapper {
10
- width: 100%;
11
- input {
12
- border: none;
13
- color: #4D4F5C;
14
- border-bottom: 1px solid #00000033;
15
- outline: none;
16
- font-size: 18px;
17
- padding: 8px;
18
- width: 100%;
19
- font-size: 16px;
20
- }
21
- }
22
- `
23
-
24
- export const Label = styled.label`
25
- font-size: 14px;
26
- margin: 0 0 4px 0;
27
- color: #666;
1
+ import styled from "styled-components";
2
+ import "react-datepicker/dist/react-datepicker.css";
3
+ import { ContainerStyles } from './interface';
4
+
5
+ export const Container = styled.div<ContainerStyles>`
6
+ width: 100%;
7
+ display: flex;
8
+ flex-direction: column;
9
+ .react-datepicker-wrapper {
10
+ width: 100%;
11
+ input {
12
+ border: none;
13
+ color: #4D4F5C;
14
+ border-bottom: 1px solid #00000033;
15
+ outline: none;
16
+ font-size: 18px;
17
+ padding: 8px;
18
+ width: 100%;
19
+ font-size: 16px;
20
+ }
21
+ }
22
+ `
23
+
24
+ export const Label = styled.label`
25
+ font-size: 14px;
26
+ margin: 0 0 4px 0;
27
+ color: #666;
28
28
  `
@@ -1,67 +1,67 @@
1
- import React from 'react';
2
- import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
3
- import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
4
- import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
5
- import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
6
- import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
7
- import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
8
- import { DatePickerBaseProps } from '../interfaces';
9
- import { styled } from '@mui/material/styles';
10
-
11
- import 'dayjs/locale/pt-br';
12
- import 'dayjs/locale/en';
13
- import 'dayjs/locale/es';
14
-
15
- const MuiDatePickerStyled = styled(MuiDatePicker)({
16
- '& .MuiOutlinedInput-notchedOutline': {
17
- border: 'none',
18
- borderRadius: 0,
19
- borderBottom: '1px solid #666666',
20
- },
21
- '& .MuiFormLabel-root': {
22
- backgroundColor: '#fff',
23
- padding: '0 5px',
24
- },
25
- });
26
-
27
- const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
28
- '& .MuiOutlinedInput-notchedOutline': {
29
- border: 'none',
30
- borderRadius: 0,
31
- borderBottom: '1px solid #666666',
32
- },
33
- '& .MuiFormLabel-root': {
34
- backgroundColor: '#fff',
35
- padding: '0 5px',
36
- },
37
- });
38
-
39
- const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
40
- '& .MuiOutlinedInput-notchedOutline': {
41
- border: 'none',
42
- borderRadius: 0,
43
- borderBottom: '1px solid #666666',
44
- },
45
- '& .MuiFormLabel-root': {
46
- backgroundColor: '#fff',
47
- padding: '0 5px',
48
- },
49
- });
50
-
51
- export const DatePicker = ({
52
- label,
53
- format = 'DD/MM/YYYY',
54
- language = 'pt-br',
55
- variant = 'desktop',
56
- }: DatePickerBaseProps) => {
57
-
58
- return (
59
- <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
60
- <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
61
- {variant === 'responsive' && <MuiDatePickerStyled label={label} format={format} />}
62
- {variant === 'mobile' && <MuiMobileDatePickerStyled label={label} format={format} />}
63
- {variant === 'desktop' && <MuiDesktopDatePickerStyled label={label} format={format} />}
64
- </DemoContainer>
65
- </LocalizationProvider>
66
- );
67
- };
1
+ import React from 'react';
2
+ import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
3
+ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
4
+ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
5
+ import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
6
+ import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
7
+ import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
8
+ import { DatePickerBaseProps } from '../interfaces';
9
+ import { styled } from '@mui/material/styles';
10
+
11
+ import 'dayjs/locale/pt-br';
12
+ import 'dayjs/locale/en';
13
+ import 'dayjs/locale/es';
14
+
15
+ const MuiDatePickerStyled = styled(MuiDatePicker)({
16
+ '& .MuiOutlinedInput-notchedOutline': {
17
+ border: 'none',
18
+ borderRadius: 0,
19
+ borderBottom: '1px solid #666666',
20
+ },
21
+ '& .MuiFormLabel-root': {
22
+ backgroundColor: '#fff',
23
+ padding: '0 5px',
24
+ },
25
+ });
26
+
27
+ const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
28
+ '& .MuiOutlinedInput-notchedOutline': {
29
+ border: 'none',
30
+ borderRadius: 0,
31
+ borderBottom: '1px solid #666666',
32
+ },
33
+ '& .MuiFormLabel-root': {
34
+ backgroundColor: '#fff',
35
+ padding: '0 5px',
36
+ },
37
+ });
38
+
39
+ const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
40
+ '& .MuiOutlinedInput-notchedOutline': {
41
+ border: 'none',
42
+ borderRadius: 0,
43
+ borderBottom: '1px solid #666666',
44
+ },
45
+ '& .MuiFormLabel-root': {
46
+ backgroundColor: '#fff',
47
+ padding: '0 5px',
48
+ },
49
+ });
50
+
51
+ export const DatePicker = ({
52
+ label,
53
+ format = 'DD/MM/YYYY',
54
+ language = 'pt-br',
55
+ variant = 'desktop',
56
+ }: DatePickerBaseProps) => {
57
+
58
+ return (
59
+ <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
60
+ <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
61
+ {variant === 'responsive' && <MuiDatePickerStyled label={label} format={format} />}
62
+ {variant === 'mobile' && <MuiMobileDatePickerStyled label={label} format={format} />}
63
+ {variant === 'desktop' && <MuiDesktopDatePickerStyled label={label} format={format} />}
64
+ </DemoContainer>
65
+ </LocalizationProvider>
66
+ );
67
+ };
@@ -1,24 +1,24 @@
1
- import React from 'react';
2
- import { Menu as MuiDropDown } from '@mui/material';
3
- import { DropDownBaseProps } from '../interfaces';
4
- import { styled } from '@mui/material/styles';
5
-
6
- const DropDownStyled = styled(MuiDropDown)({});
7
-
8
- export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
9
-
10
- return (
11
- <DropDownStyled
12
- open
13
- id="basic-menu"
14
- anchorEl={props.anchorEl}
15
- onClose={props.onClose}
16
- MenuListProps={{
17
- 'aria-labelledby': 'basic-button',
18
- }}
19
- {...props}
20
- >
21
- {children}
22
- </DropDownStyled>
23
- );
24
- };
1
+ import React from 'react';
2
+ import { Menu as MuiDropDown } from '@mui/material';
3
+ import { DropDownBaseProps } from '../interfaces';
4
+ import { styled } from '@mui/material/styles';
5
+
6
+ const DropDownStyled = styled(MuiDropDown)({});
7
+
8
+ export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
9
+
10
+ return (
11
+ <DropDownStyled
12
+ open
13
+ id="basic-menu"
14
+ anchorEl={props.anchorEl}
15
+ onClose={props.onClose}
16
+ MenuListProps={{
17
+ 'aria-labelledby': 'basic-button',
18
+ }}
19
+ {...props}
20
+ >
21
+ {children}
22
+ </DropDownStyled>
23
+ );
24
+ };
@@ -1,37 +1,37 @@
1
- import React from 'react';
2
- import { IconButton as MuiIconButton } from '@mui/material';
3
- import { IconButtonBaseProps } from '../interfaces';
4
- import { palette } from '../helpers';
5
- import { styled } from '@mui/material/styles';
6
- import { ButtonVariant, ColorVariant } from '@/types';
7
-
8
- const colorMap: Record<ColorVariant, string> = {
9
- inherit: palette.inherit,
10
- primary: palette.primary,
11
- secondary: palette.secondary,
12
- error: palette.error,
13
- warning: palette.warning,
14
- info: palette.info,
15
- success: palette.success,
16
- };
17
-
18
- const IconButtonStyled = styled(MuiIconButton)<{
19
- circle: boolean;
20
- color: ColorVariant;
21
- variant: ButtonVariant;
22
- cursor: string;
23
- }>(({ circle, color, variant, cursor }) => ({
24
- borderRadius: circle === true ? 99 : 5,
25
- border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
26
- backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
27
- cursor: cursor,
28
- }));
29
-
30
- export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
31
-
32
- return (
33
- <IconButtonStyled circle={circle} color="primary" variant="text" cursor="default" {...props}>
34
- {children}
35
- </IconButtonStyled>
36
- );
37
- };
1
+ import React from 'react';
2
+ import { IconButton as MuiIconButton } from '@mui/material';
3
+ import { IconButtonBaseProps } from '../interfaces';
4
+ import { palette } from '../helpers';
5
+ import { styled } from '@mui/material/styles';
6
+ import { ButtonVariant, ColorVariant } from '@/types';
7
+
8
+ const colorMap: Record<ColorVariant, string> = {
9
+ inherit: palette.inherit,
10
+ primary: palette.primary,
11
+ secondary: palette.secondary,
12
+ error: palette.error,
13
+ warning: palette.warning,
14
+ info: palette.info,
15
+ success: palette.success,
16
+ };
17
+
18
+ const IconButtonStyled = styled(MuiIconButton)<{
19
+ circle: boolean;
20
+ color: ColorVariant;
21
+ variant: ButtonVariant;
22
+ cursor: string;
23
+ }>(({ circle, color, variant, cursor }) => ({
24
+ borderRadius: circle === true ? 99 : 5,
25
+ border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
26
+ backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
27
+ cursor: cursor,
28
+ }));
29
+
30
+ export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
31
+
32
+ return (
33
+ <IconButtonStyled circle={circle} color="primary" variant="text" cursor="default" {...props}>
34
+ {children}
35
+ </IconButtonStyled>
36
+ );
37
+ };
@@ -1,82 +1,82 @@
1
- import React, { FunctionComponent } from 'react';
2
- import { iconsSVG } from './Svgs';
3
- import { IconColors, IconScale } from '../types';
4
- import { IconsProps, SvgProps } from '../interfaces/Icons';
5
- import styled from '@emotion/styled';
6
- import { palette } from '../helpers';
7
-
8
- export const Svg = styled.svg<SvgProps>(
9
- {
10
- shapeRendering: 'inherit',
11
- transform: 'translate3d(0,0,0)',
12
- },
13
- ({ inline }) => (inline ? { display: 'inline-block' } : { display: 'block' }),
14
- );
15
-
16
- const scaleSize: Record<IconScale, number> = {
17
- xsmall: 14,
18
- small: 20,
19
- medium: 24,
20
- large: 28,
21
- xlarge: 32,
22
- '2xlarge': 36,
23
- '3xlarge': 40,
24
- };
25
-
26
- // Definindo um objeto com as cores de preenchimento e traço com base no MUI
27
- const colors: Record<IconColors, string> = {
28
- inherit: palette.inherit,
29
- primary: palette.primary,
30
- secondary: palette.secondary,
31
- error: palette.error,
32
- info: palette.info,
33
- success: palette.success,
34
- warning: palette.warning,
35
- white: palette.white,
36
- black: palette.black,
37
- };
38
-
39
- export const Icons: FunctionComponent<IconsProps> = ({
40
- icon,
41
- scale,
42
- useSymbol,
43
- color = 'inherit',
44
- ...props
45
- }: IconsProps) => {
46
- let width = 24;
47
- let height = 24;
48
- if (scale) {
49
- width = scaleSize[scale];
50
- height = scaleSize[scale];
51
- }
52
-
53
- // Obtém a cor de preenchimento e traço com base no valor da prop 'color'
54
- const fill = colors[color];
55
- const stroke = colors[color];
56
-
57
- const Svg = styled.svg`
58
- display: inline-block;
59
- shape-rendering: inherit;
60
- vertical-align: middle;
61
- fill: ${fill};
62
- path {
63
- stroke: ${stroke};
64
- }
65
- circle {
66
- stroke: ${stroke};
67
- }
68
- rect {
69
- stroke: ${stroke};
70
- }
71
- `;
72
-
73
- return (
74
- <Svg viewBox="0 0 56 56" width={`${width}px`} height={`${height}px`} {...props}>
75
- {useSymbol ? (
76
- <use xlinkHref={`#icon--${icon}`} fill={fill} stroke={stroke} />
77
- ) : (
78
- React.cloneElement(iconsSVG[icon], { fill, stroke })
79
- )}
80
- </Svg>
81
- );
82
- };
1
+ import React, { FunctionComponent } from 'react';
2
+ import { iconsSVG } from './Svgs';
3
+ import { IconColors, IconScale } from '../types';
4
+ import { IconsProps, SvgProps } from '../interfaces/Icons';
5
+ import styled from '@emotion/styled';
6
+ import { palette } from '../helpers';
7
+
8
+ export const Svg = styled.svg<SvgProps>(
9
+ {
10
+ shapeRendering: 'inherit',
11
+ transform: 'translate3d(0,0,0)',
12
+ },
13
+ ({ inline }) => (inline ? { display: 'inline-block' } : { display: 'block' }),
14
+ );
15
+
16
+ const scaleSize: Record<IconScale, number> = {
17
+ xsmall: 14,
18
+ small: 20,
19
+ medium: 24,
20
+ large: 28,
21
+ xlarge: 32,
22
+ '2xlarge': 36,
23
+ '3xlarge': 40,
24
+ };
25
+
26
+ // Definindo um objeto com as cores de preenchimento e traço com base no MUI
27
+ const colors: Record<IconColors, string> = {
28
+ inherit: palette.inherit,
29
+ primary: palette.primary,
30
+ secondary: palette.secondary,
31
+ error: palette.error,
32
+ info: palette.info,
33
+ success: palette.success,
34
+ warning: palette.warning,
35
+ white: palette.white,
36
+ black: palette.black,
37
+ };
38
+
39
+ export const Icons: FunctionComponent<IconsProps> = ({
40
+ icon,
41
+ scale,
42
+ useSymbol,
43
+ color = 'inherit',
44
+ ...props
45
+ }: IconsProps) => {
46
+ let width = 24;
47
+ let height = 24;
48
+ if (scale) {
49
+ width = scaleSize[scale];
50
+ height = scaleSize[scale];
51
+ }
52
+
53
+ // Obtém a cor de preenchimento e traço com base no valor da prop 'color'
54
+ const fill = colors[color];
55
+ const stroke = colors[color];
56
+
57
+ const Svg = styled.svg`
58
+ display: inline-block;
59
+ shape-rendering: inherit;
60
+ vertical-align: middle;
61
+ fill: ${fill};
62
+ path {
63
+ stroke: ${stroke};
64
+ }
65
+ circle {
66
+ stroke: ${stroke};
67
+ }
68
+ rect {
69
+ stroke: ${stroke};
70
+ }
71
+ `;
72
+
73
+ return (
74
+ <Svg viewBox="0 0 56 56" width={`${width}px`} height={`${height}px`} {...props}>
75
+ {useSymbol ? (
76
+ <use xlinkHref={`#icon--${icon}`} fill={fill} stroke={stroke} />
77
+ ) : (
78
+ React.cloneElement(iconsSVG[icon], { fill, stroke })
79
+ )}
80
+ </Svg>
81
+ );
82
+ };