@repobit/dex-system-design 0.10.0 → 0.12.0

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 (107) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/package.json +2 -2
  3. package/src/assets/icons/Identity_protection.png +0 -0
  4. package/src/assets/icons/arrow_down.png +0 -0
  5. package/src/assets/icons/arrow_up.png +0 -0
  6. package/src/assets/icons/device_protection.png +0 -0
  7. package/src/assets/icons/financial_insurance.png +0 -0
  8. package/src/assets/icons/privacy_protection.png +0 -0
  9. package/src/assets/icons/user_guide.png +0 -0
  10. package/src/components/Button/Button.js +19 -16
  11. package/src/components/Button/button.css.js +18 -16
  12. package/src/components/Button/icons.js +8 -8
  13. package/src/components/FAQ/faq.css.js +48 -49
  14. package/src/components/FAQ/faq.js +0 -86
  15. package/src/components/Input/Input.js +68 -6
  16. package/src/components/Input/custom-form.stories.js +88 -0
  17. package/src/components/Input/input-clipboard.css.js +168 -0
  18. package/src/components/Input/input-clipboard.js +137 -0
  19. package/src/components/Input/input.css.js +122 -42
  20. package/src/components/accordion/accordion-bg.css.js +117 -0
  21. package/src/components/accordion/accordion-bg.js +80 -0
  22. package/src/components/accordion/accordion-no-bg.css.js +114 -0
  23. package/src/components/accordion/accordion-no-bg.js +80 -0
  24. package/src/components/accordion/accordion.css.js +88 -0
  25. package/src/components/accordion/accordion.js +81 -0
  26. package/src/components/anchor/anchor-nav.css.js +15 -15
  27. package/src/components/anchor/anchor-nav.js +0 -1
  28. package/src/components/anchor/anchor.stories.js +10 -13
  29. package/src/components/badge/badge.css.js +6 -6
  30. package/src/components/badge/badge.js +1 -2
  31. package/src/components/badge/badge.stories.js +6 -6
  32. package/src/components/carousel/carousel.css.js +60 -60
  33. package/src/components/carousel/carousel.js +26 -30
  34. package/src/components/carousel/carousel.stories.js +55 -55
  35. package/src/components/checkbox/checkbox.css.js +14 -14
  36. package/src/components/divider/divider-horizontal.js +19 -14
  37. package/src/components/divider/divider-vertical.js +23 -14
  38. package/src/components/divider/divider.css.js +19 -0
  39. package/src/components/dropdown/dropdown.css.js +138 -0
  40. package/src/components/dropdown/dropdown.js +111 -0
  41. package/src/components/footer/footer-links-group.css.js +42 -0
  42. package/src/components/footer/footer-links-group.js +25 -0
  43. package/src/components/footer/footer-lp.css.js +625 -0
  44. package/src/components/footer/footer-lp.js +368 -0
  45. package/src/components/footer/footer-lp.stories.js +69 -0
  46. package/src/components/footer/footer-nav-menu.css.js +24 -0
  47. package/src/components/footer/footer-nav-menu.js +36 -0
  48. package/src/components/footer/footer.css.js +625 -0
  49. package/src/components/footer/footer.js +465 -0
  50. package/src/components/footer/footer.stories.js +60 -0
  51. package/src/components/footer/localeMap.js +1 -0
  52. package/src/components/grid/grid.css.js +38 -0
  53. package/src/components/grid/grid.js +55 -0
  54. package/src/components/header/header.css.js +81 -52
  55. package/src/components/header/header.js +19 -19
  56. package/src/components/highlight/highlight.css.js +32 -22
  57. package/src/components/highlight/highlight.js +15 -4
  58. package/src/components/highlight/highlight.stories.js +4 -4
  59. package/src/components/light-carousel/light-carousel-simple.css.js +183 -0
  60. package/src/components/light-carousel/light-carousel-simple.js +73 -0
  61. package/src/components/light-carousel/light-carousel.css.js +50 -31
  62. package/src/components/light-carousel/light-carousel.js +14 -57
  63. package/src/components/light-carousel/light-carousel.stories.js +51 -10
  64. package/src/components/link/link.css.js +41 -0
  65. package/src/components/link/link.js +54 -0
  66. package/src/components/modal/modal.css.js +75 -0
  67. package/src/components/modal/modal.js +41 -0
  68. package/src/components/modal/modal.stories.js +40 -0
  69. package/src/components/paragraph/paragraph.css.js +1 -3
  70. package/src/components/pricing-cards/new-pricing-card.js +30 -0
  71. package/src/components/pricing-cards/new-pricing.css.js +58 -0
  72. package/src/components/pricing-cards/pricing-card-actions.css.js +16 -0
  73. package/src/components/pricing-cards/pricing-card-actions.js +20 -0
  74. package/src/components/pricing-cards/pricing-card-container.css.js +41 -0
  75. package/src/components/pricing-cards/pricing-card-container.js +31 -0
  76. package/src/components/pricing-cards/pricing-card-header.css.js +70 -0
  77. package/src/components/pricing-cards/pricing-card-header.js +46 -0
  78. package/src/components/pricing-cards/pricing-card-pricing.css.js +63 -0
  79. package/src/components/pricing-cards/pricing-card-pricing.js +101 -0
  80. package/src/components/pricing-cards/pricing-card-show-more.css.js +22 -0
  81. package/src/components/pricing-cards/pricing-card-show-more.js +33 -0
  82. package/src/components/pricing-cards/pricing-card.css.js +91 -89
  83. package/src/components/pricing-cards/pricing-card.js +13 -16
  84. package/src/components/pricing-cards/pricing-feature-item.css.js +18 -0
  85. package/src/components/pricing-cards/pricing-feature-item.js +14 -0
  86. package/src/components/radio/radio.css.js +18 -18
  87. package/src/components/radio/radio.js +1 -0
  88. package/src/components/tabs/tabs.css.js +21 -11
  89. package/src/components/tabs/tabs.js +24 -18
  90. package/src/components/termsOfUse/terms.css.js +6 -6
  91. package/src/components/termsOfUse/terms.js +0 -1
  92. package/src/stories/demo.stories.js +271 -0
  93. package/src/tokens/colors.js +10 -10
  94. package/src/tokens/fonts.css +166 -0
  95. package/src/tokens/fonts.stories.js +5 -5
  96. package/src/tokens/layout.css +4 -3
  97. package/src/tokens/new-tokens.css +698 -0
  98. package/src/tokens/spacing.stories.js +1 -1
  99. package/src/tokens/tokens.css +1063 -0
  100. package/src/tokens/tokens.js +0 -133
  101. package/src/tokens/tokens.stories.js +3 -3
  102. package/src/tokens/typography.css.js +0 -4
  103. package/src/tokens/typography.stories.js +2 -2
  104. package/src/components/Input/index.js +0 -0
  105. package/src/components/highlight/highlight-s.css.js +0 -88
  106. package/src/components/highlight/highlight-s.js +0 -35
  107. package/src/components/highlight/highlight-s.stories.js +0 -22
package/src/tokens/fonts.css ADDED
@@ -0,0 +1,166 @@
1
+ /* =====================
2
+ GLOBAL FONT-FACE DEFINITIONS
3
+ For Storybook and global usage
4
+ ====================== */
5
+
6
+ /* IBM Plex Mono */
7
+ @font-face {
8
+ font-family: 'IBM Plex Mono';
9
+ font-style: normal;
10
+ font-weight: 300;
11
+ src: url('./assets/fonts/IBMPlexMono-Light.woff2') format('woff2');
12
+ font-display: swap;
13
+ }
14
+
15
+ @font-face {
16
+ font-family: 'IBM Plex Mono';
17
+ font-style: italic;
18
+ font-weight: 300;
19
+ src: url('./assets/fonts/IBMPlexMono-LightItalic.woff2') format('woff2');
20
+ font-display: swap;
21
+ }
22
+
23
+ @font-face {
24
+ font-family: 'IBM Plex Mono';
25
+ font-style: normal;
26
+ font-weight: 400;
27
+ src: url('./assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
28
+ font-display: swap;
29
+ }
30
+
31
+ @font-face {
32
+ font-family: 'IBM Plex Mono';
33
+ font-style: italic;
34
+ font-weight: 400;
35
+ src: url('./assets/fonts/IBMPlexMono-Italic.woff2') format('woff2');
36
+ font-display: swap;
37
+ }
38
+
39
+ @font-face {
40
+ font-family: 'IBM Plex Mono';
41
+ font-style: normal;
42
+ font-weight: 500;
43
+ src: url('./assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
44
+ font-display: swap;
45
+ }
46
+
47
+ @font-face {
48
+ font-family: 'IBM Plex Mono';
49
+ font-style: italic;
50
+ font-weight: 500;
51
+ src: url('./assets/fonts/IBMPlexMono-MediumItalic.woff2') format('woff2');
52
+ font-display: swap;
53
+ }
54
+
55
+ @font-face {
56
+ font-family: 'IBM Plex Mono';
57
+ font-style: normal;
58
+ font-weight: 600;
59
+ src: url('./assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
60
+ font-display: swap;
61
+ }
62
+
63
+ @font-face {
64
+ font-family: 'IBM Plex Mono';
65
+ font-style: italic;
66
+ font-weight: 600;
67
+ src: url('./assets/fonts/IBMPlexMono-SemiBoldItalic.woff2') format('woff2');
68
+ font-display: swap;
69
+ }
70
+
71
+ @font-face {
72
+ font-family: 'IBM Plex Mono';
73
+ font-style: normal;
74
+ font-weight: 700;
75
+ src: url('./assets/fonts/IBMPlexMono-Bold.woff2') format('woff2');
76
+ font-display: swap;
77
+ }
78
+
79
+ @font-face {
80
+ font-family: 'IBM Plex Mono';
81
+ font-style: italic;
82
+ font-weight: 700;
83
+ src: url('./assets/fonts/IBMPlexMono-BoldItalic.woff2') format('woff2');
84
+ font-display: swap;
85
+ }
86
+
87
+ /* IBM Plex Sans */
88
+ @font-face {
89
+ font-family: 'IBM Plex Sans';
90
+ font-style: normal;
91
+ font-weight: 300;
92
+ src: url('./assets/fonts/IBMPlexSans-Light.woff2') format('woff2');
93
+ font-display: swap;
94
+ }
95
+
96
+ @font-face {
97
+ font-family: 'IBM Plex Sans';
98
+ font-style: italic;
99
+ font-weight: 300;
100
+ src: url('./assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2');
101
+ font-display: swap;
102
+ }
103
+
104
+ @font-face {
105
+ font-family: 'IBM Plex Sans';
106
+ font-style: normal;
107
+ font-weight: 400;
108
+ src: url('./assets/fonts/IBMPlexSans-Regular.woff2') format('woff2');
109
+ font-display: swap;
110
+ }
111
+
112
+ @font-face {
113
+ font-family: 'IBM Plex Sans';
114
+ font-style: italic;
115
+ font-weight: 400;
116
+ src: url('./assets/fonts/IBMPlexSans-Italic.woff2') format('woff2');
117
+ font-display: swap;
118
+ }
119
+
120
+ @font-face {
121
+ font-family: 'IBM Plex Sans';
122
+ font-style: normal;
123
+ font-weight: 500;
124
+ src: url('./assets/fonts/IBMPlexSans-Medium.woff2') format('woff2');
125
+ font-display: swap;
126
+ }
127
+
128
+ @font-face {
129
+ font-family: 'IBM Plex Sans';
130
+ font-style: italic;
131
+ font-weight: 500;
132
+ src: url('./assets/fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
133
+ font-display: swap;
134
+ }
135
+
136
+ @font-face {
137
+ font-family: 'IBM Plex Sans';
138
+ font-style: normal;
139
+ font-weight: 600;
140
+ src: url('./assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
141
+ font-display: swap;
142
+ }
143
+
144
+ @font-face {
145
+ font-family: 'IBM Plex Sans';
146
+ font-style: italic;
147
+ font-weight: 600;
148
+ src: url('./assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2');
149
+ font-display: swap;
150
+ }
151
+
152
+ @font-face {
153
+ font-family: 'IBM Plex Sans';
154
+ font-style: normal;
155
+ font-weight: 700;
156
+ src: url('./assets/fonts/IBMPlexSans-Bold.woff2') format('woff2');
157
+ font-display: swap;
158
+ }
159
+
160
+ @font-face {
161
+ font-family: 'IBM Plex Sans';
162
+ font-style: italic;
163
+ font-weight: 700;
164
+ src: url('./assets/fonts/IBMPlexSans-BoldItalic.woff2') format('woff2');
165
+ font-display: swap;
166
+ }
package/src/tokens/fonts.stories.js CHANGED
@@ -10,7 +10,7 @@ export const FontFace = () => html`
10
10
  margin-bottom: 24px;
11
11
  }
12
12
  h3 {
13
- font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
13
+ font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
14
14
  font-weight: 600;
15
15
  font-size: 1.2rem;
16
16
  margin-bottom: 12px;
@@ -20,22 +20,22 @@ export const FontFace = () => html`
20
20
  font-size: 1.1rem;
21
21
  }
22
22
  .sans-normal {
23
- font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
23
+ font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
24
24
  font-weight: 400;
25
25
  font-style: normal;
26
26
  }
27
27
  .sans-semibold {
28
- font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
28
+ font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
29
29
  font-weight: 600;
30
30
  font-style: normal;
31
31
  }
32
32
  .sans-bold {
33
- font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
33
+ font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
34
34
  font-weight: 700;
35
35
  font-style: normal;
36
36
  }
37
37
  .sans-italic {
38
- font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
38
+ font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
39
39
  font-weight: 400;
40
40
  font-style: italic;
41
41
  }
package/src/tokens/layout.css CHANGED
@@ -1,3 +1,4 @@
1
+ @import './tokens.css';
1
2
  .bd-button-container {
2
3
  display: flex;
3
4
  flex-direction: column;
@@ -24,15 +25,15 @@
24
25
  .bd-container {
25
26
  max-width: 1200px;
26
27
  margin: 0 auto;
27
- padding: var(--size-16);
28
+ padding: var(--spacing-16);
28
29
  display: flex;
29
30
  flex-direction: column;
30
- gap: var(--size-8);
31
+ gap: var(--spacing-8);
31
32
  }
32
33
 
33
34
  .bd-container-fluid {
34
35
  width: 100%;
35
- padding: var(--size-16);
36
+ padding: var(--spacing-16);
36
37
  }
37
38
 
38
39
  .pricing-container {