norma-library 0.5.151 → 0.5.153

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 (167) 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/components/UncontrolledTabs/UncontrolledTabs.js +1 -1
  9. package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.js.map +1 -1
  10. package/dist/esm/index.d.ts +2 -1
  11. package/dist/esm/index.js +2 -1
  12. package/dist/esm/index.js.map +1 -1
  13. package/docs/index.md +118 -118
  14. package/package.json +136 -136
  15. package/src/components/Accordion.tsx +39 -39
  16. package/src/components/Avatar.tsx +17 -17
  17. package/src/components/Badge.tsx +14 -14
  18. package/src/components/Box/index.tsx +12 -12
  19. package/src/components/Box/interfaces.ts +3 -3
  20. package/src/components/Box/styles.tsx +22 -22
  21. package/src/components/Breadcrumb/index.tsx +27 -27
  22. package/src/components/Breadcrumb/interface.ts +8 -8
  23. package/src/components/Breadcrumb/styles.tsx +32 -32
  24. package/src/components/Button.tsx +26 -26
  25. package/src/components/Card.tsx +37 -37
  26. package/src/components/ChatMessage.tsx +87 -87
  27. package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +56 -56
  28. package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +55 -55
  29. package/src/components/CheckBox.tsx +21 -21
  30. package/src/components/DateInput/index.tsx +34 -34
  31. package/src/components/DateInput/interface.ts +13 -13
  32. package/src/components/DateInput/styles.tsx +27 -27
  33. package/src/components/DatePicker.tsx +67 -67
  34. package/src/components/DropDown.tsx +24 -24
  35. package/src/components/IconButton.tsx +37 -37
  36. package/src/components/Icons.tsx +82 -82
  37. package/src/components/Modal.tsx +103 -103
  38. package/src/components/MultiSelectInput/components/MultiValue/index.tsx +44 -44
  39. package/src/components/MultiSelectInput/components/Option/index.tsx +62 -62
  40. package/src/components/MultiSelectInput/components/Option/styles.tsx +8 -8
  41. package/src/components/MultiSelectInput/index.tsx +60 -60
  42. package/src/components/MultiSelectInput/interfaces.ts +15 -15
  43. package/src/components/MultiSelectInput/styles.tsx +43 -43
  44. package/src/components/Paper.tsx +12 -12
  45. package/src/components/ProgressBar.tsx +71 -71
  46. package/src/components/RadioGroup.tsx +43 -43
  47. package/src/components/RangerSlider.tsx +65 -65
  48. package/src/components/Select.tsx +74 -74
  49. package/src/components/SelectInput/components/Option/index.tsx +61 -61
  50. package/src/components/SelectInput/components/Option/styles.tsx +8 -8
  51. package/src/components/SelectInput/index.tsx +45 -45
  52. package/src/components/SelectInput/interfaces.ts +15 -15
  53. package/src/components/SelectInput/styles.tsx +31 -31
  54. package/src/components/StatusModal/StatusModal.style.tsx +75 -75
  55. package/src/components/StatusModal/StatusModal.tsx +58 -58
  56. package/src/components/Svgs.tsx +506 -506
  57. package/src/components/Table/components/header/index.tsx +86 -86
  58. package/src/components/Table/components/header/styles.tsx +59 -59
  59. package/src/components/Table/components/index.tsx +8 -8
  60. package/src/components/Table/components/pagination/index.tsx +39 -39
  61. package/src/components/Table/components/pagination/styles.tsx +28 -28
  62. package/src/components/Table/components/tbody/index.tsx +30 -30
  63. package/src/components/Table/components/tbody/styles.tsx +4 -4
  64. package/src/components/Table/index.tsx +317 -317
  65. package/src/components/Table/interface.ts +23 -23
  66. package/src/components/Table/styles.tsx +117 -117
  67. package/src/components/Tabs.tsx +105 -105
  68. package/src/components/Tag.tsx +33 -33
  69. package/src/components/TextField.tsx +19 -19
  70. package/src/components/TextInput/index.tsx +37 -37
  71. package/src/components/TextInput/interface.ts +9 -9
  72. package/src/components/TextInput/styles.tsx +23 -23
  73. package/src/components/TimeLine.tsx +89 -89
  74. package/src/components/TimePicker.tsx +78 -78
  75. package/src/components/Typography/Text/index.tsx +20 -20
  76. package/src/components/Typography/Text/interfaces.ts +5 -5
  77. package/src/components/Typography/Text/styles.tsx +40 -40
  78. package/src/components/Typography/Title/index.tsx +22 -22
  79. package/src/components/Typography/Title/interfaces.ts +6 -6
  80. package/src/components/Typography/Title/styles.tsx +40 -40
  81. package/src/components/Typography/index.tsx +6 -6
  82. package/src/components/UncontrolledTable/components/header/index.tsx +65 -65
  83. package/src/components/UncontrolledTable/components/header/styles.tsx +63 -63
  84. package/src/components/UncontrolledTable/components/index.tsx +8 -8
  85. package/src/components/UncontrolledTable/components/pagination/index.tsx +43 -43
  86. package/src/components/UncontrolledTable/components/pagination/styles.tsx +28 -28
  87. package/src/components/UncontrolledTable/components/tbody/index.tsx +33 -33
  88. package/src/components/UncontrolledTable/components/tbody/styles.tsx +32 -32
  89. package/src/components/UncontrolledTable/index.tsx +221 -221
  90. package/src/components/UncontrolledTable/interface.ts +43 -43
  91. package/src/components/UncontrolledTable/styles.tsx +123 -123
  92. package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx +56 -56
  93. package/src/components/UncontrolledTabs/UncontrolledTabs.tsx +68 -68
  94. package/src/components/index.ts +24 -24
  95. package/src/helpers/alignments.ts +14 -14
  96. package/src/helpers/borders.ts +18 -18
  97. package/src/helpers/colors.ts +241 -241
  98. package/src/helpers/index.ts +5 -5
  99. package/src/helpers/radios.ts +24 -24
  100. package/src/helpers/sizes.ts +72 -72
  101. package/src/hooks/useClickOutside.tsx +18 -18
  102. package/src/index.ts +70 -68
  103. package/src/interfaces/Accordion.ts +12 -12
  104. package/src/interfaces/Avatar.tsx +15 -15
  105. package/src/interfaces/Badge.ts +19 -19
  106. package/src/interfaces/Button.ts +22 -22
  107. package/src/interfaces/Card.ts +11 -11
  108. package/src/interfaces/ChatMessage.ts +12 -12
  109. package/src/interfaces/ChatMessageBalloon.ts +17 -17
  110. package/src/interfaces/CheckBox.ts +27 -27
  111. package/src/interfaces/DatePicker.ts +13 -13
  112. package/src/interfaces/DropDown.ts +14 -14
  113. package/src/interfaces/IconButton.ts +22 -22
  114. package/src/interfaces/Icons.ts +17 -17
  115. package/src/interfaces/Modal.ts +18 -18
  116. package/src/interfaces/Paper.ts +12 -12
  117. package/src/interfaces/ProgressBar.ts +29 -29
  118. package/src/interfaces/RadioGroup.ts +23 -23
  119. package/src/interfaces/RangerSlider.ts +21 -21
  120. package/src/interfaces/Select.ts +17 -17
  121. package/src/interfaces/Tabs.ts +19 -19
  122. package/src/interfaces/Tag.ts +17 -17
  123. package/src/interfaces/TextField.ts +44 -44
  124. package/src/interfaces/TimeLine.ts +11 -11
  125. package/src/interfaces/TimePicker.ts +13 -13
  126. package/src/interfaces/index.ts +23 -23
  127. package/src/providers/NormaProvider.tsx +13 -13
  128. package/src/sample-data-2.json +178 -178
  129. package/src/sample-data.json +177 -177
  130. package/src/stories/Accordion.stories.tsx +65 -65
  131. package/src/stories/Avatar.stories.tsx +123 -123
  132. package/src/stories/Badge.stories.tsx +39 -39
  133. package/src/stories/Box.stories.tsx +35 -35
  134. package/src/stories/Breadcrumb.stories.tsx +44 -44
  135. package/src/stories/Button.stories.tsx +93 -93
  136. package/src/stories/Card.stories.tsx +39 -39
  137. package/src/stories/ChatMessage.stories.tsx +84 -84
  138. package/src/stories/ChatMessageBalloon.stories.tsx +108 -108
  139. package/src/stories/CheckBox.stories.tsx +88 -88
  140. package/src/stories/DateInput.stories.tsx +51 -51
  141. package/src/stories/DatePicker.stories.tsx +50 -50
  142. package/src/stories/DropDown.stories.tsx +57 -57
  143. package/src/stories/IconButton.stories.tsx +78 -78
  144. package/src/stories/Modal.stories.tsx +246 -246
  145. package/src/stories/ModalStatus.stories.tsx +46 -46
  146. package/src/stories/MultiSelectInput.stories.tsx +90 -90
  147. package/src/stories/Paper.stories.tsx +53 -53
  148. package/src/stories/ProgressBar.stories.tsx +116 -116
  149. package/src/stories/RadioGroup.stories.tsx +87 -87
  150. package/src/stories/RangerSlider.stories.tsx +149 -149
  151. package/src/stories/Select.stories.tsx +100 -100
  152. package/src/stories/SelectInput.stories.tsx +78 -78
  153. package/src/stories/Table.stories.tsx +372 -372
  154. package/src/stories/Tabs.stories.tsx +61 -61
  155. package/src/stories/Tag.stories.tsx +56 -56
  156. package/src/stories/Text.stories.tsx +37 -37
  157. package/src/stories/TextField.stories.tsx +310 -310
  158. package/src/stories/TextInput.stories.tsx +52 -52
  159. package/src/stories/TimeLine.stories.tsx +35 -35
  160. package/src/stories/TimePicker.stories.tsx +87 -87
  161. package/src/stories/Title.stories.tsx +43 -43
  162. package/src/stories/UncontrolledTable.stories.tsx +305 -305
  163. package/src/stories/UncontrolledTabs.stories.tsx +63 -63
  164. package/src/styles/globals.scss +17 -17
  165. package/src/types/index.ts +204 -204
  166. package/src/utils/styledBreakpoints.ts +25 -25
  167. 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
+ };