norma-library 0.5.150 → 0.5.152

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