norma-library 0.6.64 → 0.6.66

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/Card.js +3 -3
  9. package/dist/esm/components/Card.js.map +1 -1
  10. package/dist/esm/helpers/colors.js +6 -0
  11. package/dist/esm/helpers/colors.js.map +1 -1
  12. package/docs/index.md +118 -118
  13. package/package.json +136 -136
  14. package/src/components/Accordion.tsx +39 -39
  15. package/src/components/Avatar.tsx +17 -17
  16. package/src/components/Badge.tsx +14 -14
  17. package/src/components/Box/index.tsx +12 -12
  18. package/src/components/Box/interfaces.ts +3 -3
  19. package/src/components/Box/styles.tsx +22 -22
  20. package/src/components/Breadcrumb/index.tsx +27 -27
  21. package/src/components/Breadcrumb/interface.ts +8 -8
  22. package/src/components/Breadcrumb/styles.tsx +32 -32
  23. package/src/components/Button.tsx +26 -26
  24. package/src/components/Card.tsx +38 -38
  25. package/src/components/ChatMessage.tsx +87 -87
  26. package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +56 -56
  27. package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +55 -55
  28. package/src/components/CheckBox.tsx +21 -21
  29. package/src/components/DateInput/index.tsx +34 -34
  30. package/src/components/DateInput/interface.ts +13 -13
  31. package/src/components/DateInput/styles.tsx +27 -27
  32. package/src/components/DatePicker.tsx +67 -67
  33. package/src/components/DropDown.tsx +24 -24
  34. package/src/components/IconButton.tsx +37 -37
  35. package/src/components/Icons.tsx +82 -82
  36. package/src/components/Modal.tsx +103 -103
  37. package/src/components/MultiSelectInput/components/MultiValue/index.tsx +44 -44
  38. package/src/components/MultiSelectInput/components/Option/index.tsx +62 -62
  39. package/src/components/MultiSelectInput/components/Option/styles.tsx +8 -8
  40. package/src/components/MultiSelectInput/index.tsx +60 -60
  41. package/src/components/MultiSelectInput/interfaces.ts +15 -15
  42. package/src/components/MultiSelectInput/styles.tsx +43 -43
  43. package/src/components/Paper.tsx +12 -12
  44. package/src/components/ProgressBar.tsx +71 -71
  45. package/src/components/RadioGroup.tsx +43 -43
  46. package/src/components/RangerSlider.tsx +65 -65
  47. package/src/components/Select.tsx +74 -74
  48. package/src/components/SelectInput/components/Option/index.tsx +61 -61
  49. package/src/components/SelectInput/components/Option/styles.tsx +8 -8
  50. package/src/components/SelectInput/index.tsx +45 -45
  51. package/src/components/SelectInput/interfaces.ts +15 -15
  52. package/src/components/SelectInput/styles.tsx +31 -31
  53. package/src/components/StatusModal/StatusModal.style.tsx +75 -75
  54. package/src/components/StatusModal/StatusModal.tsx +58 -58
  55. package/src/components/Svgs.tsx +506 -506
  56. package/src/components/Table/components/header/index.tsx +86 -86
  57. package/src/components/Table/components/header/styles.tsx +59 -59
  58. package/src/components/Table/components/index.tsx +8 -8
  59. package/src/components/Table/components/pagination/index.tsx +39 -39
  60. package/src/components/Table/components/pagination/styles.tsx +28 -28
  61. package/src/components/Table/components/tbody/index.tsx +30 -30
  62. package/src/components/Table/components/tbody/styles.tsx +4 -4
  63. package/src/components/Table/index.tsx +317 -317
  64. package/src/components/Table/interface.ts +23 -23
  65. package/src/components/Table/styles.tsx +117 -117
  66. package/src/components/Tabs.tsx +105 -105
  67. package/src/components/Tag.tsx +33 -33
  68. package/src/components/TextField.tsx +19 -19
  69. package/src/components/TextInput/index.tsx +37 -37
  70. package/src/components/TextInput/interface.ts +9 -9
  71. package/src/components/TextInput/styles.tsx +23 -23
  72. package/src/components/TimeLine.tsx +89 -89
  73. package/src/components/TimePicker.tsx +78 -78
  74. package/src/components/Typography/Text/index.tsx +20 -20
  75. package/src/components/Typography/Text/interfaces.ts +5 -5
  76. package/src/components/Typography/Text/styles.tsx +40 -40
  77. package/src/components/Typography/Title/index.tsx +22 -22
  78. package/src/components/Typography/Title/interfaces.ts +6 -6
  79. package/src/components/Typography/Title/styles.tsx +40 -40
  80. package/src/components/Typography/index.tsx +6 -6
  81. package/src/components/UncontrolledTable/components/header/index.tsx +72 -72
  82. package/src/components/UncontrolledTable/components/header/styles.tsx +66 -66
  83. package/src/components/UncontrolledTable/components/index.tsx +8 -8
  84. package/src/components/UncontrolledTable/components/pagination/index.tsx +43 -43
  85. package/src/components/UncontrolledTable/components/pagination/styles.tsx +28 -28
  86. package/src/components/UncontrolledTable/components/tbody/index.tsx +33 -33
  87. package/src/components/UncontrolledTable/components/tbody/styles.tsx +32 -32
  88. package/src/components/UncontrolledTable/index.tsx +223 -223
  89. package/src/components/UncontrolledTable/interface.ts +46 -46
  90. package/src/components/UncontrolledTable/styles.tsx +123 -123
  91. package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx +58 -58
  92. package/src/components/UncontrolledTabs/UncontrolledTabs.tsx +71 -71
  93. package/src/components/UncontrolledTabs/UncontrolledTabsInfo.style.ts +8 -8
  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 +264 -258
  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 -70
  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 +19 -19
  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 +315 -315
  163. package/src/stories/UncontrolledTabs.stories.tsx +74 -74
  164. package/src/styles/globals.scss +17 -17
  165. package/src/types/index.ts +207 -207
  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: string;
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: string;
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
+ };