@egov3/system-design 1.0.6 → 1.0.10

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 (35) hide show
  1. package/.github/workflows/publish.yml +58 -0
  2. package/.storybook/main.ts +21 -21
  3. package/.storybook/preview.ts +24 -24
  4. package/@types/typings.d.ts +1 -1
  5. package/__tests__/baseComponents/InputField.test.tsx +101 -101
  6. package/jest.config.ts +44 -44
  7. package/jest.setup.ts +2 -2
  8. package/package.json +5 -1
  9. package/public/img/Circled-1.svg +11 -11
  10. package/public/img/Circled-2.svg +11 -11
  11. package/public/img/Circled-3.svg +11 -11
  12. package/public/img/Mobile-chat.svg +11 -11
  13. package/public/img/accessibility-1.svg +3 -3
  14. package/public/img/account-1.svg +3 -3
  15. package/public/img/car.svg +3 -3
  16. package/public/img/language-1.svg +5 -5
  17. package/public/img/logo.svg +7 -7
  18. package/src/baseComponents/InputField/InputField.module.scss +57 -57
  19. package/src/baseComponents/InputField/index.tsx +108 -108
  20. package/src/stories/CardWrapperItem.tsx +29 -29
  21. package/src/stories/Configure.tsx +494 -494
  22. package/src/stories/assets/accessibility.svg +4 -4
  23. package/src/stories/assets/discord.svg +15 -15
  24. package/src/stories/assets/github.svg +3 -3
  25. package/src/stories/assets/tutorials.svg +12 -12
  26. package/src/stories/assets/youtube.svg +4 -4
  27. package/src/stories/components/Button.stories.tsx +127 -127
  28. package/src/styles/colors.module.scss +42 -42
  29. package/src/styles/globals.scss +43 -43
  30. package/src/styles/structure.module.scss +60 -60
  31. package/src/styles/typography.module.scss +120 -120
  32. package/src/svg/ClearIcon.tsx +26 -26
  33. package/src/svg/index.tsx +3 -3
  34. package/src/utils/ClassNamesFn.tsx +2 -2
  35. package/tsconfig.json +38 -38
package/src/styles/typography.module.scss CHANGED
@@ -1,120 +1,120 @@
1
- /* Headings/Heading 1 */
2
- @mixin heading1 {
3
- font-family: Inter;
4
- font-size: 32px;
5
- font-style: normal;
6
- font-weight: 600;
7
- line-height: 36px; /* 112.5% */
8
- letter-spacing: -0.32px;
9
- }
10
-
11
- /* Headings/Heading 3 */
12
- @mixin heading3 {
13
- font-family: Inter;
14
- font-size: 24px;
15
- font-style: normal;
16
- font-weight: 600;
17
- line-height: 28px; /* 116.667% */
18
- letter-spacing: -0.24px;
19
- }
20
-
21
- /* Subtitles/Subtitle 3 */
22
- @mixin subtitles3 {
23
- font-family: Inter;
24
- font-size: 16px;
25
- font-style: normal;
26
- font-weight: 600;
27
- line-height: 24px; /* 150% */
28
- }
29
-
30
- /* Body/Body 1, Medium */
31
- @mixin bodyMedium {
32
- font-family: Inter;
33
- font-size: 16px;
34
- font-style: normal;
35
- font-weight: 500;
36
- line-height: 24px; /* 150% */
37
- }
38
-
39
- /* Body/Body 1, Regular */
40
- @mixin Body1Regular {
41
- font-family: Inter;
42
- font-size: 16px;
43
- font-style: normal;
44
- font-weight: 400;
45
- line-height: 24px; /* 150% */
46
- }
47
-
48
- /* Body/Body 2, Medium */
49
- @mixin body2Medium {
50
- font-family: Inter;
51
- font-size: 14px;
52
- font-style: normal;
53
- font-weight: 500;
54
- line-height: 20px; /* 142.857% */
55
- }
56
-
57
- /* Body/Body 2, Regular */
58
- @mixin body2Regular {
59
- font-family: Inter;
60
- font-size: 14px;
61
- font-style: normal;
62
- font-weight: 400;
63
- line-height: 20px; /* 142.857% */
64
- }
65
-
66
- /* Body/Body 3, Regular */
67
- @mixin body3Regular {
68
- font-family: Inter;
69
- font-size: 14px;
70
- font-style: normal;
71
- font-weight: 400;
72
- line-height: 16px; /* 114.286% */
73
- }
74
-
75
- /* Caption/Caption 1, Medium */
76
- @mixin caption1Medium {
77
- font-family: Inter;
78
- font-size: 12px;
79
- font-style: normal;
80
- font-weight: 500;
81
- line-height: 16px; /* 133.333% */
82
- }
83
-
84
- /* Caption/Caption 1, Regular */
85
- @mixin caption1Regular {
86
- font-family: Inter;
87
- font-size: 12px;
88
- font-style: normal;
89
- font-weight: 400;
90
- line-height: 16px; /* 133.333% */
91
- }
92
-
93
- /* Caption/Caption 1, Semibold */
94
- @mixin caption1Semibold {
95
- font-family: Inter;
96
- font-size: 12px;
97
- font-style: normal;
98
- font-weight: 600;
99
- line-height: 16px; /* 133.333% */
100
- }
101
-
102
- /* Caption/Caption 2, Medium */
103
- @mixin caption2Medium {
104
- font-family: Inter;
105
- font-size: 10px;
106
- font-style: normal;
107
- font-weight: 500;
108
- line-height: 12px; /* 120% */
109
- }
110
-
111
- /* Caption/Caption 2, Regular */
112
- @mixin caption2Regular {
113
- font-family: Inter;
114
- font-size: 10px;
115
- font-style: normal;
116
- font-weight: 400;
117
- line-height: 12px; /* 120% */
118
- }
119
-
120
- $borderRadius: 4px;
1
+ /* Headings/Heading 1 */
2
+ @mixin heading1 {
3
+ font-family: Inter;
4
+ font-size: 32px;
5
+ font-style: normal;
6
+ font-weight: 600;
7
+ line-height: 36px; /* 112.5% */
8
+ letter-spacing: -0.32px;
9
+ }
10
+
11
+ /* Headings/Heading 3 */
12
+ @mixin heading3 {
13
+ font-family: Inter;
14
+ font-size: 24px;
15
+ font-style: normal;
16
+ font-weight: 600;
17
+ line-height: 28px; /* 116.667% */
18
+ letter-spacing: -0.24px;
19
+ }
20
+
21
+ /* Subtitles/Subtitle 3 */
22
+ @mixin subtitles3 {
23
+ font-family: Inter;
24
+ font-size: 16px;
25
+ font-style: normal;
26
+ font-weight: 600;
27
+ line-height: 24px; /* 150% */
28
+ }
29
+
30
+ /* Body/Body 1, Medium */
31
+ @mixin bodyMedium {
32
+ font-family: Inter;
33
+ font-size: 16px;
34
+ font-style: normal;
35
+ font-weight: 500;
36
+ line-height: 24px; /* 150% */
37
+ }
38
+
39
+ /* Body/Body 1, Regular */
40
+ @mixin Body1Regular {
41
+ font-family: Inter;
42
+ font-size: 16px;
43
+ font-style: normal;
44
+ font-weight: 400;
45
+ line-height: 24px; /* 150% */
46
+ }
47
+
48
+ /* Body/Body 2, Medium */
49
+ @mixin body2Medium {
50
+ font-family: Inter;
51
+ font-size: 14px;
52
+ font-style: normal;
53
+ font-weight: 500;
54
+ line-height: 20px; /* 142.857% */
55
+ }
56
+
57
+ /* Body/Body 2, Regular */
58
+ @mixin body2Regular {
59
+ font-family: Inter;
60
+ font-size: 14px;
61
+ font-style: normal;
62
+ font-weight: 400;
63
+ line-height: 20px; /* 142.857% */
64
+ }
65
+
66
+ /* Body/Body 3, Regular */
67
+ @mixin body3Regular {
68
+ font-family: Inter;
69
+ font-size: 14px;
70
+ font-style: normal;
71
+ font-weight: 400;
72
+ line-height: 16px; /* 114.286% */
73
+ }
74
+
75
+ /* Caption/Caption 1, Medium */
76
+ @mixin caption1Medium {
77
+ font-family: Inter;
78
+ font-size: 12px;
79
+ font-style: normal;
80
+ font-weight: 500;
81
+ line-height: 16px; /* 133.333% */
82
+ }
83
+
84
+ /* Caption/Caption 1, Regular */
85
+ @mixin caption1Regular {
86
+ font-family: Inter;
87
+ font-size: 12px;
88
+ font-style: normal;
89
+ font-weight: 400;
90
+ line-height: 16px; /* 133.333% */
91
+ }
92
+
93
+ /* Caption/Caption 1, Semibold */
94
+ @mixin caption1Semibold {
95
+ font-family: Inter;
96
+ font-size: 12px;
97
+ font-style: normal;
98
+ font-weight: 600;
99
+ line-height: 16px; /* 133.333% */
100
+ }
101
+
102
+ /* Caption/Caption 2, Medium */
103
+ @mixin caption2Medium {
104
+ font-family: Inter;
105
+ font-size: 10px;
106
+ font-style: normal;
107
+ font-weight: 500;
108
+ line-height: 12px; /* 120% */
109
+ }
110
+
111
+ /* Caption/Caption 2, Regular */
112
+ @mixin caption2Regular {
113
+ font-family: Inter;
114
+ font-size: 10px;
115
+ font-style: normal;
116
+ font-weight: 400;
117
+ line-height: 12px; /* 120% */
118
+ }
119
+
120
+ $borderRadius: 4px;
package/src/svg/ClearIcon.tsx CHANGED
@@ -1,26 +1,26 @@
1
- import React from "react";
2
-
3
- export const ClearIcon = ({
4
- width = 20,
5
- height = 20,
6
- fill = "none",
7
- pathFill = "#fff",
8
- }: React.SVGProps<SVGSVGElement> & { pathFill?: string }) => {
9
- return (
10
- <svg
11
- data-testid="Icons_CLEAR"
12
- xmlns="http://www.w3.org/2000/svg"
13
- width={width}
14
- height={height}
15
- fill={fill}
16
- viewBox="0 0 20 20"
17
- >
18
- <path
19
- fill={pathFill}
20
- fillRule="evenodd"
21
- d="M10 18.333a8.333 8.333 0 100-16.666 8.333 8.333 0 000 16.666zM7.5 6.027L6.027 7.5l2.5 2.5-2.5 2.5L7.5 13.973l2.5-2.5 2.5 2.5 1.473-1.473-2.5-2.5 2.5-2.5L12.5 6.027l-2.5 2.5-2.5-2.5z"
22
- clipRule="evenodd"
23
- ></path>
24
- </svg>
25
- );
26
- };
1
+ import React from "react";
2
+
3
+ export const ClearIcon = ({
4
+ width = 20,
5
+ height = 20,
6
+ fill = "none",
7
+ pathFill = "#fff",
8
+ }: React.SVGProps<SVGSVGElement> & { pathFill?: string }) => {
9
+ return (
10
+ <svg
11
+ data-testid="Icons_CLEAR"
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ width={width}
14
+ height={height}
15
+ fill={fill}
16
+ viewBox="0 0 20 20"
17
+ >
18
+ <path
19
+ fill={pathFill}
20
+ fillRule="evenodd"
21
+ d="M10 18.333a8.333 8.333 0 100-16.666 8.333 8.333 0 000 16.666zM7.5 6.027L6.027 7.5l2.5 2.5-2.5 2.5L7.5 13.973l2.5-2.5 2.5 2.5 1.473-1.473-2.5-2.5 2.5-2.5L12.5 6.027l-2.5 2.5-2.5-2.5z"
22
+ clipRule="evenodd"
23
+ ></path>
24
+ </svg>
25
+ );
26
+ };
package/src/svg/index.tsx CHANGED
@@ -1,3 +1,3 @@
1
- import { ClearIcon } from "./ClearIcon";
2
-
3
- export { ClearIcon };
1
+ import { ClearIcon } from "./ClearIcon";
2
+
3
+ export { ClearIcon };
package/src/utils/ClassNamesFn.tsx CHANGED
@@ -1,2 +1,2 @@
1
- export const ClassNamesFn = (...args: unknown[]) =>
2
- args.filter((item) => !!item).join(" ");
1
+ export const ClassNamesFn = (...args: unknown[]) =>
2
+ args.filter((item) => !!item).join(" ");
package/tsconfig.json CHANGED
@@ -1,38 +1,38 @@
1
- {
2
- "compilerOptions": {
3
- "types": ["@types/react", "@types/react-dom"],
4
- "baseUrl": "./",
5
- "target": "ESNext",
6
- "lib": ["dom", "dom.iterable", "esnext"],
7
- "allowJs": true,
8
- "skipLibCheck": true,
9
- "strict": true,
10
- "noEmit": true,
11
- "esModuleInterop": true,
12
- "module": "ESNext",
13
- "allowSyntheticDefaultImports": true,
14
- "moduleResolution": "node",
15
- "resolveJsonModule": true,
16
- "isolatedModules": true,
17
- "jsx": "preserve",
18
- "incremental": true,
19
- "plugins": [
20
- {
21
- "name": "next"
22
- }
23
- ],
24
- "paths": {
25
- "~utils/*": ["./src/utils/*"],
26
- "~baseComponents": ["./src/baseComponents/index"],
27
- "~svg": ["./src/svg/index"]
28
- }
29
- },
30
- "include": [
31
- "next-env.d.ts",
32
- "**/*.ts",
33
- "**/*.tsx",
34
- "**/*.css",
35
- ".next/types/**/*.ts"
36
- ],
37
- "exclude": ["node_modules"]
38
- }
1
+ {
2
+ "compilerOptions": {
3
+ "types": ["@types/react", "@types/react-dom"],
4
+ "baseUrl": "./",
5
+ "target": "ESNext",
6
+ "lib": ["dom", "dom.iterable", "esnext"],
7
+ "allowJs": true,
8
+ "skipLibCheck": true,
9
+ "strict": true,
10
+ "noEmit": true,
11
+ "esModuleInterop": true,
12
+ "module": "ESNext",
13
+ "allowSyntheticDefaultImports": true,
14
+ "moduleResolution": "node",
15
+ "resolveJsonModule": true,
16
+ "isolatedModules": true,
17
+ "jsx": "preserve",
18
+ "incremental": true,
19
+ "plugins": [
20
+ {
21
+ "name": "next"
22
+ }
23
+ ],
24
+ "paths": {
25
+ "~utils/*": ["./src/utils/*"],
26
+ "~baseComponents": ["./src/baseComponents/index"],
27
+ "~svg": ["./src/svg/index"]
28
+ }
29
+ },
30
+ "include": [
31
+ "next-env.d.ts",
32
+ "**/*.ts",
33
+ "**/*.tsx",
34
+ "**/*.css",
35
+ ".next/types/**/*.ts"
36
+ ],
37
+ "exclude": ["node_modules"]
38
+ }