@egov3/system-design 1.0.17 → 1.0.22

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 (39) hide show
  1. package/.github/workflows/publish.yml +4 -2
  2. package/__tests__/components/InputField.test.tsx +101 -101
  3. package/dist/index.d.ts +6 -2
  4. package/dist/index.js +2 -2
  5. package/dist/tsconfig.tsbuildinfo +1 -0
  6. package/index.tsx +4 -3
  7. package/jest.config.ts +45 -45
  8. package/jest.setup.ts +2 -2
  9. package/package.json +90 -90
  10. package/public/img/Circled-1.svg +11 -11
  11. package/public/img/Circled-2.svg +11 -11
  12. package/public/img/Circled-3.svg +11 -11
  13. package/public/img/Mobile-chat.svg +11 -11
  14. package/public/img/accessibility-1.svg +3 -3
  15. package/public/img/account-1.svg +3 -3
  16. package/public/img/car.svg +3 -3
  17. package/public/img/language-1.svg +5 -5
  18. package/public/img/logo.svg +7 -7
  19. package/src/components/InputField/InputField.module.scss +57 -57
  20. package/src/components/InputField/index.tsx +108 -108
  21. package/src/components/index.tsx +3 -3
  22. package/src/stories/CardWrapperItem.tsx +29 -29
  23. package/src/stories/Configure.tsx +494 -494
  24. package/src/stories/assets/accessibility.svg +4 -4
  25. package/src/stories/assets/discord.svg +15 -15
  26. package/src/stories/assets/github.svg +3 -3
  27. package/src/stories/assets/tutorials.svg +12 -12
  28. package/src/stories/assets/youtube.svg +4 -4
  29. package/src/stories/components/Button.stories.tsx +127 -127
  30. package/src/styles/colors.module.scss +42 -42
  31. package/src/styles/globals.scss +43 -43
  32. package/src/styles/structure.module.scss +60 -60
  33. package/src/styles/typography.module.scss +120 -120
  34. package/src/svg/ClearIcon.tsx +26 -26
  35. package/src/svg/index.tsx +3 -3
  36. package/src/utils/ClassNamesFn.tsx +2 -2
  37. package/tsconfig.json +38 -38
  38. package/.storybook/main.ts +0 -21
  39. package/.storybook/preview.ts +0 -24
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
- "target": "es6",
4
- "module": "commonjs",
5
- "jsx": "react-jsx",
6
- "outDir": "./dist",
7
- "baseUrl": "./",
8
- "paths": {
9
- "~utils/*": ["./src/utils/*"],
10
- "~components": ["./src/components/index"],
11
- "~svg": ["./src/svg/index"]
12
- },
13
- "lib": ["dom", "dom.iterable", "esnext"],
14
- "types": ["@types/react", "@types/react-dom"],
15
- "allowJs": true,
16
- "skipLibCheck": true,
17
- "strict": true,
18
- "noEmit": false,
19
- "declaration": true,
20
- "esModuleInterop": true,
21
- "allowSyntheticDefaultImports": true,
22
- "moduleResolution": "node",
23
- "resolveJsonModule": true,
24
- "isolatedModules": true,
25
- "incremental": true,
26
- "plugins": [{ "name": "next" }]
27
- },
28
- "include": [
29
- "src",
30
- "next-env.d.ts",
31
- "**/*.ts",
32
- "**/*.tsx",
33
- "**/*.css",
34
- ".next/types/**/*.ts",
35
- "@types"
36
- ],
37
- "exclude": ["node_modules", "__tests__", "src/stories", "dist"]
38
- }
1
+ {
2
+ "compilerOptions": {
3
+ "target": "es6",
4
+ "module": "commonjs",
5
+ "jsx": "react-jsx",
6
+ "outDir": "./dist",
7
+ "baseUrl": "./",
8
+ "paths": {
9
+ "~utils/*": ["./src/utils/*"],
10
+ "~components": ["./src/components/index"],
11
+ "~svg": ["./src/svg/index"]
12
+ },
13
+ "lib": ["dom", "dom.iterable", "esnext"],
14
+ "types": ["@types/react", "@types/react-dom"],
15
+ "allowJs": true,
16
+ "skipLibCheck": true,
17
+ "strict": true,
18
+ "noEmit": false,
19
+ "declaration": true,
20
+ "esModuleInterop": true,
21
+ "allowSyntheticDefaultImports": true,
22
+ "moduleResolution": "node",
23
+ "resolveJsonModule": true,
24
+ "isolatedModules": true,
25
+ "incremental": true,
26
+ "plugins": [{ "name": "next" }]
27
+ },
28
+ "include": [
29
+ "src",
30
+ "next-env.d.ts",
31
+ "**/*.ts",
32
+ "**/*.tsx",
33
+ "**/*.css",
34
+ ".next/types/**/*.ts",
35
+ "@types"
36
+ ],
37
+ "exclude": ["node_modules", "__tests__", "src/stories", "dist"]
38
+ }
package/.storybook/main.ts DELETED
@@ -1,21 +0,0 @@
1
- import type { StorybookConfig } from '@storybook/nextjs';
2
-
3
- const config: StorybookConfig = {
4
- stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
5
- addons: [
6
- '@storybook/addon-onboarding',
7
- '@storybook/addon-links',
8
- '@storybook/addon-essentials',
9
- '@chromatic-com/storybook',
10
- '@storybook/addon-interactions',
11
- ],
12
- framework: {
13
- name: '@storybook/nextjs',
14
- options: {},
15
- },
16
- docs: {
17
- autodocs: 'tag',
18
- },
19
- staticDirs: ['../public'],
20
- };
21
- export default config;
package/.storybook/preview.ts DELETED
@@ -1,24 +0,0 @@
1
- import type { Preview } from '@storybook/react';
2
- import 'src/styles/globals.scss';
3
-
4
- const preview: Preview = {
5
- parameters: {
6
- backgrounds: {
7
- default: 'input',
8
- values: [
9
- {
10
- name: 'input',
11
- value: '#fff',
12
- },
13
- ],
14
- },
15
- controls: {
16
- matchers: {
17
- color: /(background|color)$/i,
18
- date: /Date$/i,
19
- },
20
- },
21
- },
22
- };
23
-
24
- export default preview;