@ivds/core 0.1.1

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 (154) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/README.md +215 -0
  3. package/lib/all.css +6802 -0
  4. package/lib/all.min.css +1 -0
  5. package/lib/base/base.css +215 -0
  6. package/lib/base/base.min.css +1 -0
  7. package/lib/components/_breadcrumb-mixins.scss +173 -0
  8. package/lib/components/_button-mixin.scss +120 -0
  9. package/lib/components/_card-mixin.scss +196 -0
  10. package/lib/components/_checkbox-mixin.scss +208 -0
  11. package/lib/components/_footer-mixin.scss +385 -0
  12. package/lib/components/_header-mixin.scss +275 -0
  13. package/lib/components/_navigation-mixins.scss +270 -0
  14. package/lib/components/_notification-mixin.scss +239 -0
  15. package/lib/components/_pagination-mixins.scss +280 -0
  16. package/lib/components/_radio-button-mixin.scss +207 -0
  17. package/lib/components/_tag-mixin.scss +261 -0
  18. package/lib/components/_text-input-mixin.scss +203 -0
  19. package/lib/components/all.css +3005 -0
  20. package/lib/components/all.min.css +1 -0
  21. package/lib/components/breadcrumb/breadcrumb.css +141 -0
  22. package/lib/components/breadcrumb/breadcrumb.min.css +1 -0
  23. package/lib/components/button/button.css +221 -0
  24. package/lib/components/button/button.min.css +1 -0
  25. package/lib/components/card/card.css +236 -0
  26. package/lib/components/card/card.min.css +1 -0
  27. package/lib/components/checkbox/checkbox.css +305 -0
  28. package/lib/components/checkbox/checkbox.min.css +1 -0
  29. package/lib/components/footer/footer.css +466 -0
  30. package/lib/components/footer/footer.min.css +1 -0
  31. package/lib/components/header/header.css +274 -0
  32. package/lib/components/header/header.min.css +1 -0
  33. package/lib/components/navigation/navigation.css +214 -0
  34. package/lib/components/navigation/navigation.min.css +1 -0
  35. package/lib/components/notification/notification.css +253 -0
  36. package/lib/components/notification/notification.min.css +1 -0
  37. package/lib/components/pagination/pagination.css +221 -0
  38. package/lib/components/pagination/pagination.min.css +1 -0
  39. package/lib/components/radio-button/radio-button.css +326 -0
  40. package/lib/components/radio-button/radio-button.min.css +1 -0
  41. package/lib/components/tag/tag.css +367 -0
  42. package/lib/components/tag/tag.min.css +1 -0
  43. package/lib/components/text-input/text-input.css +243 -0
  44. package/lib/components/text-input/text-input.min.css +1 -0
  45. package/lib/icons/icon-arrow-left.css +139 -0
  46. package/lib/icons/icon-arrow-left.min.css +1 -0
  47. package/lib/icons/icon-arrow-right.css +139 -0
  48. package/lib/icons/icon-arrow-right.min.css +1 -0
  49. package/lib/icons/icon-check.css +139 -0
  50. package/lib/icons/icon-check.min.css +1 -0
  51. package/lib/icons/icon-close.css +140 -0
  52. package/lib/icons/icon-close.min.css +1 -0
  53. package/lib/icons/icon-error.css +140 -0
  54. package/lib/icons/icon-error.min.css +1 -0
  55. package/lib/icons/icon-info.css +140 -0
  56. package/lib/icons/icon-info.min.css +1 -0
  57. package/lib/icons/icon-success.css +139 -0
  58. package/lib/icons/icon-success.min.css +1 -0
  59. package/lib/icons/icon-warning.css +139 -0
  60. package/lib/icons/icon-warning.min.css +1 -0
  61. package/lib/icons/icons.css +1158 -0
  62. package/lib/icons/icons.min.css +1 -0
  63. package/lib/utils/_flex.scss +200 -0
  64. package/lib/utils/_grid.scss +211 -0
  65. package/lib/utils/_layout.scss +253 -0
  66. package/lib/utils/_spacing.scss +260 -0
  67. package/lib/utils/_typography.scss +111 -0
  68. package/lib/utils/utils.css +2434 -0
  69. package/lib/utils/utils.min.css +1 -0
  70. package/lib/utils-only.css +2801 -0
  71. package/lib/utils-only.min.css +1 -0
  72. package/lib/variables/variables.css +2 -0
  73. package/lib/variables/variables.min.css +0 -0
  74. package/package.json +194 -0
  75. package/src/__tests__/example.test.scss +12 -0
  76. package/src/accessibility.stories.js +416 -0
  77. package/src/all.scss +9 -0
  78. package/src/base/_layout.scss +97 -0
  79. package/src/base/_reset.scss +85 -0
  80. package/src/base/_typography.scss +105 -0
  81. package/src/base/base.scss +6 -0
  82. package/src/components/all.scss +22 -0
  83. package/src/components/breadcrumb/_breadcrumb-mixins.scss +173 -0
  84. package/src/components/breadcrumb/breadcrumb.scss +68 -0
  85. package/src/components/breadcrumb/breadcrumb.stories.js +483 -0
  86. package/src/components/button/__tests__/button-mixins.test.scss +35 -0
  87. package/src/components/button/_button-mixin.scss +120 -0
  88. package/src/components/button/button.scss +126 -0
  89. package/src/components/button/button.stories.js +364 -0
  90. package/src/components/card/__tests__/card-mixins.test.scss +36 -0
  91. package/src/components/card/_card-mixin.scss +196 -0
  92. package/src/components/card/card.scss +193 -0
  93. package/src/components/card/card.stories.js +635 -0
  94. package/src/components/checkbox/_checkbox-mixin.scss +208 -0
  95. package/src/components/checkbox/checkbox.scss +141 -0
  96. package/src/components/checkbox/checkbox.stories.js +303 -0
  97. package/src/components/footer/_footer-mixin.scss +385 -0
  98. package/src/components/footer/footer.scss +86 -0
  99. package/src/components/footer/footer.stories.js +740 -0
  100. package/src/components/header/_header-mixin.scss +275 -0
  101. package/src/components/header/header.scss +84 -0
  102. package/src/components/header/header.stories.js +450 -0
  103. package/src/components/navigation/_navigation-mixins.scss +270 -0
  104. package/src/components/navigation/navigation.scss +64 -0
  105. package/src/components/navigation/navigation.stories.js +410 -0
  106. package/src/components/notification/_notification-mixin.scss +239 -0
  107. package/src/components/notification/notification.scss +118 -0
  108. package/src/components/notification/notification.stories.js +378 -0
  109. package/src/components/overview.stories.js +473 -0
  110. package/src/components/pagination/_pagination-mixins.scss +280 -0
  111. package/src/components/pagination/pagination.scss +76 -0
  112. package/src/components/pagination/pagination.stories.js +729 -0
  113. package/src/components/radio-button/_radio-button-mixin.scss +207 -0
  114. package/src/components/radio-button/radio-button.scss +178 -0
  115. package/src/components/radio-button/radio-button.stories.js +379 -0
  116. package/src/components/tag/_tag-mixin.scss +261 -0
  117. package/src/components/tag/tag.scss +244 -0
  118. package/src/components/tag/tag.stories.js +482 -0
  119. package/src/components/text-input/_text-input-mixin.scss +203 -0
  120. package/src/components/text-input/text-input.scss +150 -0
  121. package/src/components/text-input/text-input.stories.js +723 -0
  122. package/src/icons/_icon.scss +121 -0
  123. package/src/icons/icon-arrow-left.scss +23 -0
  124. package/src/icons/icon-arrow-right.scss +23 -0
  125. package/src/icons/icon-check.scss +23 -0
  126. package/src/icons/icon-close.scss +24 -0
  127. package/src/icons/icon-error.scss +24 -0
  128. package/src/icons/icon-info.scss +24 -0
  129. package/src/icons/icon-success.scss +23 -0
  130. package/src/icons/icon-warning.scss +23 -0
  131. package/src/icons/icons.scss +12 -0
  132. package/src/icons/icons.stories.js +249 -0
  133. package/src/icons/svg/arrow-left.svg +3 -0
  134. package/src/icons/svg/arrow-right.svg +3 -0
  135. package/src/icons/svg/check.svg +3 -0
  136. package/src/icons/svg/close.svg +4 -0
  137. package/src/icons/svg/error.svg +5 -0
  138. package/src/icons/svg/info.svg +5 -0
  139. package/src/icons/svg/success.svg +4 -0
  140. package/src/icons/svg/warning.svg +5 -0
  141. package/src/utils/__tests__/utilities.test.scss +37 -0
  142. package/src/utils/_flex.scss +200 -0
  143. package/src/utils/_grid.scss +211 -0
  144. package/src/utils/_layout.scss +253 -0
  145. package/src/utils/_spacing.scss +260 -0
  146. package/src/utils/_typography.scss +111 -0
  147. package/src/utils/utils.scss +8 -0
  148. package/src/variables/_borders.scss +15 -0
  149. package/src/variables/_breakpoints.scss +11 -0
  150. package/src/variables/_colors.scss +97 -0
  151. package/src/variables/_shadows.scss +14 -0
  152. package/src/variables/_spacing.scss +24 -0
  153. package/src/variables/_typography.scss +47 -0
  154. package/src/variables/variables.scss +9 -0
package/src/components/footer/footer.stories.js ADDED
@@ -0,0 +1,740 @@
1
+ // Footer component stories for Storybook
2
+ // Showcases footer layouts, multi-column organization, and responsive stacking patterns
3
+
4
+ export default {
5
+ title: 'Core/Footer',
6
+ parameters: {
7
+ docs: {
8
+ description: {
9
+ component: 'CSS-only footer component using IVDS design tokens. Provides flexible multi-column layout options with responsive stacking, proper semantic structure, and accessibility features. Includes mixins for different column layouts and theming.'
10
+ }
11
+ },
12
+ a11y: {
13
+ config: {
14
+ rules: [
15
+ {
16
+ id: 'color-contrast',
17
+ enabled: true
18
+ },
19
+ {
20
+ id: 'focus-order-semantics',
21
+ enabled: true
22
+ },
23
+ {
24
+ id: 'landmark-one-main',
25
+ enabled: false // Footer is not main content
26
+ }
27
+ ]
28
+ }
29
+ }
30
+ }
31
+ };
32
+
33
+ // Basic footer
34
+ export const Basic = () => `
35
+ <footer class="ivds-footer">
36
+ <div class="ivds-footer__content">
37
+ <div class="ivds-footer__grid">
38
+ <div>
39
+ <h3 class="ivds-footer__section-title">Company</h3>
40
+ <ul class="ivds-footer__section-list">
41
+ <li class="ivds-footer__section-item">
42
+ <a href="#" class="ivds-footer__section-link">About Us</a>
43
+ </li>
44
+ <li class="ivds-footer__section-item">
45
+ <a href="#" class="ivds-footer__section-link">Careers</a>
46
+ </li>
47
+ <li class="ivds-footer__section-item">
48
+ <a href="#" class="ivds-footer__section-link">Contact</a>
49
+ </li>
50
+ </ul>
51
+ </div>
52
+
53
+ <div>
54
+ <h3 class="ivds-footer__section-title">Products</h3>
55
+ <ul class="ivds-footer__section-list">
56
+ <li class="ivds-footer__section-item">
57
+ <a href="#" class="ivds-footer__section-link">Design System</a>
58
+ </li>
59
+ <li class="ivds-footer__section-item">
60
+ <a href="#" class="ivds-footer__section-link">Components</a>
61
+ </li>
62
+ <li class="ivds-footer__section-item">
63
+ <a href="#" class="ivds-footer__section-link">Templates</a>
64
+ </li>
65
+ </ul>
66
+ </div>
67
+
68
+ <div>
69
+ <h3 class="ivds-footer__section-title">Support</h3>
70
+ <ul class="ivds-footer__section-list">
71
+ <li class="ivds-footer__section-item">
72
+ <a href="#" class="ivds-footer__section-link">Documentation</a>
73
+ </li>
74
+ <li class="ivds-footer__section-item">
75
+ <a href="#" class="ivds-footer__section-link">Help Center</a>
76
+ </li>
77
+ <li class="ivds-footer__section-item">
78
+ <a href="#" class="ivds-footer__section-link">Community</a>
79
+ </li>
80
+ </ul>
81
+ </div>
82
+ </div>
83
+
84
+ <div class="ivds-footer__bottom">
85
+ <p>&copy; 2024 IVDS. All rights reserved.</p>
86
+ </div>
87
+ </div>
88
+ </footer>
89
+ `;
90
+
91
+ // Comprehensive footer
92
+ export const Comprehensive = () => `
93
+ <footer class="ivds-footer">
94
+ <div class="ivds-footer__content">
95
+ <div class="ivds-footer__grid">
96
+ <div>
97
+ <h3 class="ivds-footer__section-title">Company</h3>
98
+ <ul class="ivds-footer__section-list">
99
+ <li class="ivds-footer__section-item">
100
+ <a href="#" class="ivds-footer__section-link">About Us</a>
101
+ </li>
102
+ <li class="ivds-footer__section-item">
103
+ <a href="#" class="ivds-footer__section-link">Our Team</a>
104
+ </li>
105
+ <li class="ivds-footer__section-item">
106
+ <a href="#" class="ivds-footer__section-link">Careers</a>
107
+ </li>
108
+ <li class="ivds-footer__section-item">
109
+ <a href="#" class="ivds-footer__section-link">Press</a>
110
+ </li>
111
+ <li class="ivds-footer__section-item">
112
+ <a href="#" class="ivds-footer__section-link">Contact</a>
113
+ </li>
114
+ </ul>
115
+ </div>
116
+
117
+ <div>
118
+ <h3 class="ivds-footer__section-title">Products</h3>
119
+ <ul class="ivds-footer__section-list">
120
+ <li class="ivds-footer__section-item">
121
+ <a href="#" class="ivds-footer__section-link">Design Tokens</a>
122
+ </li>
123
+ <li class="ivds-footer__section-item">
124
+ <a href="#" class="ivds-footer__section-link">Core Styles</a>
125
+ </li>
126
+ <li class="ivds-footer__section-item">
127
+ <a href="#" class="ivds-footer__section-link">React Components</a>
128
+ </li>
129
+ <li class="ivds-footer__section-item">
130
+ <a href="#" class="ivds-footer__section-link">Templates</a>
131
+ </li>
132
+ <li class="ivds-footer__section-item">
133
+ <a href="#" class="ivds-footer__section-link">Figma Kit</a>
134
+ </li>
135
+ </ul>
136
+ </div>
137
+
138
+ <div>
139
+ <h3 class="ivds-footer__section-title">Resources</h3>
140
+ <ul class="ivds-footer__section-list">
141
+ <li class="ivds-footer__section-item">
142
+ <a href="#" class="ivds-footer__section-link">Documentation</a>
143
+ </li>
144
+ <li class="ivds-footer__section-item">
145
+ <a href="#" class="ivds-footer__section-link">Getting Started</a>
146
+ </li>
147
+ <li class="ivds-footer__section-item">
148
+ <a href="#" class="ivds-footer__section-link">Examples</a>
149
+ </li>
150
+ <li class="ivds-footer__section-item">
151
+ <a href="#" class="ivds-footer__section-link">Blog</a>
152
+ </li>
153
+ <li class="ivds-footer__section-item">
154
+ <a href="#" class="ivds-footer__section-link">Changelog</a>
155
+ </li>
156
+ </ul>
157
+ </div>
158
+
159
+ <div>
160
+ <h3 class="ivds-footer__section-title">Support</h3>
161
+ <ul class="ivds-footer__section-list">
162
+ <li class="ivds-footer__section-item">
163
+ <a href="#" class="ivds-footer__section-link">Help Center</a>
164
+ </li>
165
+ <li class="ivds-footer__section-item">
166
+ <a href="#" class="ivds-footer__section-link">Community</a>
167
+ </li>
168
+ <li class="ivds-footer__section-item">
169
+ <a href="#" class="ivds-footer__section-link">GitHub</a>
170
+ </li>
171
+ <li class="ivds-footer__section-item">
172
+ <a href="#" class="ivds-footer__section-link">Report Issues</a>
173
+ </li>
174
+ <li class="ivds-footer__section-item">
175
+ <a href="#" class="ivds-footer__section-link">Feature Requests</a>
176
+ </li>
177
+ </ul>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="ivds-footer__bottom">
182
+ <p>&copy; 2024 Ivoire Design System. All rights reserved. |
183
+ <a href="#" class="ivds-footer__section-link">Privacy Policy</a> |
184
+ <a href="#" class="ivds-footer__section-link">Terms of Service</a>
185
+ </p>
186
+ </div>
187
+ </div>
188
+ </footer>
189
+ `;
190
+
191
+ // Simple footer
192
+ export const Simple = () => `
193
+ <footer class="ivds-footer">
194
+ <div class="ivds-footer__content">
195
+ <div class="ivds-footer__bottom">
196
+ <p>&copy; 2024 IVDS. Built with ❤️ for the community.</p>
197
+ </div>
198
+ </div>
199
+ </footer>
200
+ `;
201
+
202
+ // Footer with social links
203
+ export const WithSocialLinks = () => `
204
+ <footer class="ivds-footer">
205
+ <div class="ivds-footer__content">
206
+ <div class="ivds-footer__grid">
207
+ <div>
208
+ <h3 class="ivds-footer__section-title">Company</h3>
209
+ <ul class="ivds-footer__section-list">
210
+ <li class="ivds-footer__section-item">
211
+ <a href="#" class="ivds-footer__section-link">About</a>
212
+ </li>
213
+ <li class="ivds-footer__section-item">
214
+ <a href="#" class="ivds-footer__section-link">Careers</a>
215
+ </li>
216
+ <li class="ivds-footer__section-item">
217
+ <a href="#" class="ivds-footer__section-link">Contact</a>
218
+ </li>
219
+ </ul>
220
+ </div>
221
+
222
+ <div>
223
+ <h3 class="ivds-footer__section-title">Follow Us</h3>
224
+ <ul class="ivds-footer__section-list">
225
+ <li class="ivds-footer__section-item">
226
+ <a href="#" class="ivds-footer__section-link" aria-label="Follow us on Twitter">
227
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 0.5rem; vertical-align: middle;">
228
+ <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/>
229
+ </svg>
230
+ Twitter
231
+ </a>
232
+ </li>
233
+ <li class="ivds-footer__section-item">
234
+ <a href="#" class="ivds-footer__section-link" aria-label="Follow us on GitHub">
235
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 0.5rem; vertical-align: middle;">
236
+ <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
237
+ </svg>
238
+ GitHub
239
+ </a>
240
+ </li>
241
+ <li class="ivds-footer__section-item">
242
+ <a href="#" class="ivds-footer__section-link" aria-label="Follow us on LinkedIn">
243
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 0.5rem; vertical-align: middle;">
244
+ <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
245
+ <rect x="2" y="9" width="4" height="12"/>
246
+ <circle cx="4" cy="4" r="2"/>
247
+ </svg>
248
+ LinkedIn
249
+ </a>
250
+ </li>
251
+ </ul>
252
+ </div>
253
+
254
+ <div>
255
+ <h3 class="ivds-footer__section-title">Newsletter</h3>
256
+ <p style="margin-bottom: 1rem; font-size: 0.875rem;">Stay updated with our latest releases and news.</p>
257
+ <div style="display: flex; gap: 0.5rem;">
258
+ <input
259
+ type="email"
260
+ placeholder="Enter your email"
261
+ style="flex: 1; padding: 0.5rem; border: 1px solid #475569; border-radius: 0.25rem; background-color: #1e293b; color: #cbd5e1;"
262
+ aria-label="Email address for newsletter"
263
+ />
264
+ <button
265
+ style="padding: 0.5rem 1rem; background-color: #0ea5e9; color: white; border: none; border-radius: 0.25rem; cursor: pointer;"
266
+ aria-label="Subscribe to newsletter"
267
+ >
268
+ Subscribe
269
+ </button>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="ivds-footer__bottom">
275
+ <p>&copy; 2024 IVDS. All rights reserved.</p>
276
+ </div>
277
+ </div>
278
+ </footer>
279
+ `;
280
+
281
+ // Two column layout
282
+ export const TwoColumns = () => `
283
+ <footer class="ivds-footer ivds-footer--two-columns">
284
+ <div class="ivds-footer__content">
285
+ <div class="ivds-footer__grid">
286
+ <div>
287
+ <div class="ivds-footer__brand">
288
+ <svg class="ivds-footer__brand-logo" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
289
+ <rect width="32" height="32" rx="8" fill="#f97316"/>
290
+ <path d="M8 12h16v2H8v-2zm0 4h16v2H8v-2zm0 4h10v2H8v-2z" fill="white"/>
291
+ </svg>
292
+ <h3 class="ivds-footer__brand-name">IVDS</h3>
293
+ <p class="ivds-footer__brand-description">
294
+ A comprehensive design system built for modern web applications.
295
+ Create consistent, accessible, and beautiful user interfaces.
296
+ </p>
297
+ </div>
298
+
299
+ <div class="ivds-footer__social">
300
+ <a href="#" aria-label="Follow us on Twitter">
301
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
302
+ <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/>
303
+ </svg>
304
+ </a>
305
+ <a href="#" aria-label="Follow us on GitHub">
306
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
307
+ <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
308
+ </svg>
309
+ </a>
310
+ <a href="#" aria-label="Follow us on LinkedIn">
311
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
312
+ <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
313
+ <rect x="2" y="9" width="4" height="12"/>
314
+ <circle cx="4" cy="4" r="2"/>
315
+ </svg>
316
+ </a>
317
+ </div>
318
+ </div>
319
+
320
+ <div>
321
+ <h3 class="ivds-footer__section-title">Quick Links</h3>
322
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
323
+ <ul class="ivds-footer__section-list">
324
+ <li class="ivds-footer__section-item">
325
+ <a href="#" class="ivds-footer__section-link">Components</a>
326
+ </li>
327
+ <li class="ivds-footer__section-item">
328
+ <a href="#" class="ivds-footer__section-link">Design Tokens</a>
329
+ </li>
330
+ <li class="ivds-footer__section-item">
331
+ <a href="#" class="ivds-footer__section-link">Documentation</a>
332
+ </li>
333
+ <li class="ivds-footer__section-item">
334
+ <a href="#" class="ivds-footer__section-link">Examples</a>
335
+ </li>
336
+ </ul>
337
+ <ul class="ivds-footer__section-list">
338
+ <li class="ivds-footer__section-item">
339
+ <a href="#" class="ivds-footer__section-link">About</a>
340
+ </li>
341
+ <li class="ivds-footer__section-item">
342
+ <a href="#" class="ivds-footer__section-link">Blog</a>
343
+ </li>
344
+ <li class="ivds-footer__section-item">
345
+ <a href="#" class="ivds-footer__section-link">Support</a>
346
+ </li>
347
+ <li class="ivds-footer__section-item">
348
+ <a href="#" class="ivds-footer__section-link">Contact</a>
349
+ </li>
350
+ </ul>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <div class="ivds-footer__bottom">
356
+ <p>&copy; 2024 IVDS. All rights reserved.</p>
357
+ </div>
358
+ </div>
359
+ </footer>
360
+ `;
361
+
362
+ // Light theme footer
363
+ export const LightTheme = () => `
364
+ <footer class="ivds-footer ivds-footer--light">
365
+ <div class="ivds-footer__content">
366
+ <div class="ivds-footer__grid">
367
+ <div>
368
+ <h3 class="ivds-footer__section-title">Company</h3>
369
+ <ul class="ivds-footer__section-list">
370
+ <li class="ivds-footer__section-item">
371
+ <a href="#" class="ivds-footer__section-link">About Us</a>
372
+ </li>
373
+ <li class="ivds-footer__section-item">
374
+ <a href="#" class="ivds-footer__section-link">Careers</a>
375
+ </li>
376
+ <li class="ivds-footer__section-item">
377
+ <a href="#" class="ivds-footer__section-link">Press</a>
378
+ </li>
379
+ <li class="ivds-footer__section-item">
380
+ <a href="#" class="ivds-footer__section-link">Contact</a>
381
+ </li>
382
+ </ul>
383
+ </div>
384
+
385
+ <div>
386
+ <h3 class="ivds-footer__section-title">Products</h3>
387
+ <ul class="ivds-footer__section-list">
388
+ <li class="ivds-footer__section-item">
389
+ <a href="#" class="ivds-footer__section-link">Design System</a>
390
+ </li>
391
+ <li class="ivds-footer__section-item">
392
+ <a href="#" class="ivds-footer__section-link">Components</a>
393
+ </li>
394
+ <li class="ivds-footer__section-item">
395
+ <a href="#" class="ivds-footer__section-link">Templates</a>
396
+ </li>
397
+ <li class="ivds-footer__section-item">
398
+ <a href="#" class="ivds-footer__section-link">Resources</a>
399
+ </li>
400
+ </ul>
401
+ </div>
402
+
403
+ <div>
404
+ <h3 class="ivds-footer__section-title">Support</h3>
405
+ <ul class="ivds-footer__section-list">
406
+ <li class="ivds-footer__section-item">
407
+ <a href="#" class="ivds-footer__section-link">Documentation</a>
408
+ </li>
409
+ <li class="ivds-footer__section-item">
410
+ <a href="#" class="ivds-footer__section-link">Help Center</a>
411
+ </li>
412
+ <li class="ivds-footer__section-item">
413
+ <a href="#" class="ivds-footer__section-link">Community</a>
414
+ </li>
415
+ <li class="ivds-footer__section-item">
416
+ <a href="#" class="ivds-footer__section-link">Contact Support</a>
417
+ </li>
418
+ </ul>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="ivds-footer__bottom">
423
+ <p>&copy; 2024 IVDS. All rights reserved.</p>
424
+ </div>
425
+ </div>
426
+ </footer>
427
+ `;
428
+
429
+ // Minimal footer
430
+ export const Minimal = () => `
431
+ <footer class="ivds-footer ivds-footer--minimal">
432
+ <div class="ivds-footer__content">
433
+ <div class="ivds-footer__bottom">
434
+ <p>&copy; 2024 IVDS. Built with ❤️ for developers everywhere.</p>
435
+ </div>
436
+ </div>
437
+ </footer>
438
+ `;
439
+
440
+ // Footer with newsletter signup
441
+ export const WithNewsletter = () => `
442
+ <footer class="ivds-footer">
443
+ <div class="ivds-footer__content">
444
+ <div class="ivds-footer__grid">
445
+ <div>
446
+ <h3 class="ivds-footer__section-title">Company</h3>
447
+ <ul class="ivds-footer__section-list">
448
+ <li class="ivds-footer__section-item">
449
+ <a href="#" class="ivds-footer__section-link">About</a>
450
+ </li>
451
+ <li class="ivds-footer__section-item">
452
+ <a href="#" class="ivds-footer__section-link">Careers</a>
453
+ </li>
454
+ <li class="ivds-footer__section-item">
455
+ <a href="#" class="ivds-footer__section-link">Contact</a>
456
+ </li>
457
+ </ul>
458
+ </div>
459
+
460
+ <div>
461
+ <h3 class="ivds-footer__section-title">Resources</h3>
462
+ <ul class="ivds-footer__section-list">
463
+ <li class="ivds-footer__section-item">
464
+ <a href="#" class="ivds-footer__section-link">Documentation</a>
465
+ </li>
466
+ <li class="ivds-footer__section-item">
467
+ <a href="#" class="ivds-footer__section-link">Examples</a>
468
+ </li>
469
+ <li class="ivds-footer__section-item">
470
+ <a href="#" class="ivds-footer__section-link">Blog</a>
471
+ </li>
472
+ </ul>
473
+ </div>
474
+
475
+ <div>
476
+ <h3 class="ivds-footer__section-title">Stay Updated</h3>
477
+ <div class="ivds-footer__newsletter">
478
+ <p class="ivds-footer__newsletter-description">
479
+ Get the latest updates on new components, design tokens, and best practices.
480
+ </p>
481
+ <form class="ivds-footer__newsletter-form" aria-label="Newsletter signup">
482
+ <input
483
+ type="email"
484
+ class="ivds-footer__newsletter-input"
485
+ placeholder="Enter your email"
486
+ aria-label="Email address for newsletter"
487
+ required
488
+ />
489
+ <button
490
+ type="submit"
491
+ class="ivds-footer__newsletter-button"
492
+ aria-label="Subscribe to newsletter"
493
+ >
494
+ Subscribe
495
+ </button>
496
+ </form>
497
+ </div>
498
+ </div>
499
+ </div>
500
+
501
+ <div class="ivds-footer__bottom">
502
+ <p>&copy; 2024 IVDS. All rights reserved.</p>
503
+ </div>
504
+ </div>
505
+ </footer>
506
+ `;
507
+
508
+ // Five column layout
509
+ export const FiveColumns = () => `
510
+ <footer class="ivds-footer ivds-footer--five-columns">
511
+ <div class="ivds-footer__content">
512
+ <div class="ivds-footer__grid">
513
+ <div>
514
+ <h3 class="ivds-footer__section-title">Products</h3>
515
+ <ul class="ivds-footer__section-list">
516
+ <li class="ivds-footer__section-item">
517
+ <a href="#" class="ivds-footer__section-link">Design Tokens</a>
518
+ </li>
519
+ <li class="ivds-footer__section-item">
520
+ <a href="#" class="ivds-footer__section-link">Core Styles</a>
521
+ </li>
522
+ <li class="ivds-footer__section-item">
523
+ <a href="#" class="ivds-footer__section-link">React Components</a>
524
+ </li>
525
+ </ul>
526
+ </div>
527
+
528
+ <div>
529
+ <h3 class="ivds-footer__section-title">Resources</h3>
530
+ <ul class="ivds-footer__section-list">
531
+ <li class="ivds-footer__section-item">
532
+ <a href="#" class="ivds-footer__section-link">Documentation</a>
533
+ </li>
534
+ <li class="ivds-footer__section-item">
535
+ <a href="#" class="ivds-footer__section-link">Getting Started</a>
536
+ </li>
537
+ <li class="ivds-footer__section-item">
538
+ <a href="#" class="ivds-footer__section-link">Examples</a>
539
+ </li>
540
+ </ul>
541
+ </div>
542
+
543
+ <div>
544
+ <h3 class="ivds-footer__section-title">Community</h3>
545
+ <ul class="ivds-footer__section-list">
546
+ <li class="ivds-footer__section-item">
547
+ <a href="#" class="ivds-footer__section-link">GitHub</a>
548
+ </li>
549
+ <li class="ivds-footer__section-item">
550
+ <a href="#" class="ivds-footer__section-link">Discord</a>
551
+ </li>
552
+ <li class="ivds-footer__section-item">
553
+ <a href="#" class="ivds-footer__section-link">Discussions</a>
554
+ </li>
555
+ </ul>
556
+ </div>
557
+
558
+ <div>
559
+ <h3 class="ivds-footer__section-title">Support</h3>
560
+ <ul class="ivds-footer__section-list">
561
+ <li class="ivds-footer__section-item">
562
+ <a href="#" class="ivds-footer__section-link">Help Center</a>
563
+ </li>
564
+ <li class="ivds-footer__section-item">
565
+ <a href="#" class="ivds-footer__section-link">Contact</a>
566
+ </li>
567
+ <li class="ivds-footer__section-item">
568
+ <a href="#" class="ivds-footer__section-link">Bug Reports</a>
569
+ </li>
570
+ </ul>
571
+ </div>
572
+
573
+ <div>
574
+ <h3 class="ivds-footer__section-title">Legal</h3>
575
+ <ul class="ivds-footer__section-list">
576
+ <li class="ivds-footer__section-item">
577
+ <a href="#" class="ivds-footer__section-link">Privacy</a>
578
+ </li>
579
+ <li class="ivds-footer__section-item">
580
+ <a href="#" class="ivds-footer__section-link">Terms</a>
581
+ </li>
582
+ <li class="ivds-footer__section-item">
583
+ <a href="#" class="ivds-footer__section-link">License</a>
584
+ </li>
585
+ </ul>
586
+ </div>
587
+ </div>
588
+
589
+ <div class="ivds-footer__bottom">
590
+ <p>&copy; 2024 IVDS. All rights reserved.</p>
591
+ </div>
592
+ </div>
593
+ </footer>
594
+ `;
595
+
596
+ // Mobile responsive view
597
+ export const MobileView = () => `
598
+ <div style="max-width: 375px; margin: 0 auto; border: 1px solid #374151; border-radius: 0.5rem; overflow: hidden;">
599
+ <footer class="ivds-footer">
600
+ <div class="ivds-footer__content">
601
+ <div class="ivds-footer__grid">
602
+ <div>
603
+ <div class="ivds-footer__brand">
604
+ <svg class="ivds-footer__brand-logo" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
605
+ <rect width="32" height="32" rx="8" fill="#f97316"/>
606
+ <path d="M8 12h16v2H8v-2zm0 4h16v2H8v-2zm0 4h10v2H8v-2z" fill="white"/>
607
+ </svg>
608
+ <h3 class="ivds-footer__brand-name">IVDS</h3>
609
+ <p class="ivds-footer__brand-description">
610
+ A comprehensive design system for modern applications.
611
+ </p>
612
+ </div>
613
+ </div>
614
+
615
+ <div>
616
+ <h3 class="ivds-footer__section-title">Quick Links</h3>
617
+ <ul class="ivds-footer__section-list">
618
+ <li class="ivds-footer__section-item">
619
+ <a href="#" class="ivds-footer__section-link">Components</a>
620
+ </li>
621
+ <li class="ivds-footer__section-item">
622
+ <a href="#" class="ivds-footer__section-link">Documentation</a>
623
+ </li>
624
+ <li class="ivds-footer__section-item">
625
+ <a href="#" class="ivds-footer__section-link">Support</a>
626
+ </li>
627
+ </ul>
628
+ </div>
629
+
630
+ <div>
631
+ <h3 class="ivds-footer__section-title">Connect</h3>
632
+ <div class="ivds-footer__social">
633
+ <a href="#" aria-label="GitHub">
634
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
635
+ <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
636
+ </svg>
637
+ </a>
638
+ <a href="#" aria-label="Twitter">
639
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
640
+ <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/>
641
+ </svg>
642
+ </a>
643
+ </div>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="ivds-footer__bottom">
648
+ <p>&copy; 2024 IVDS. All rights reserved.</p>
649
+ </div>
650
+ </div>
651
+ </footer>
652
+
653
+ <div style="padding: 1rem; background-color: #1e293b; color: #cbd5e1; text-align: center; font-size: 0.875rem;">
654
+ Mobile view (375px width) - Columns stack vertically
655
+ </div>
656
+ </div>
657
+ `;
658
+
659
+ // Accessibility example
660
+ export const AccessibilityFeatures = () => `
661
+ <footer class="ivds-footer" role="contentinfo">
662
+ <div class="ivds-footer__content">
663
+ <div class="ivds-footer__grid">
664
+ <div>
665
+ <h3 class="ivds-footer__section-title">Navigation</h3>
666
+ <nav aria-label="Footer navigation">
667
+ <ul class="ivds-footer__section-list">
668
+ <li class="ivds-footer__section-item">
669
+ <a href="#" class="ivds-footer__section-link">Home</a>
670
+ </li>
671
+ <li class="ivds-footer__section-item">
672
+ <a href="#" class="ivds-footer__section-link">About</a>
673
+ </li>
674
+ <li class="ivds-footer__section-item">
675
+ <a href="#" class="ivds-footer__section-link">Services</a>
676
+ </li>
677
+ <li class="ivds-footer__section-item">
678
+ <a href="#" class="ivds-footer__section-link">Contact</a>
679
+ </li>
680
+ </ul>
681
+ </nav>
682
+ </div>
683
+
684
+ <div>
685
+ <h3 class="ivds-footer__section-title">Legal</h3>
686
+ <ul class="ivds-footer__section-list">
687
+ <li class="ivds-footer__section-item">
688
+ <a href="#" class="ivds-footer__section-link">Privacy Policy</a>
689
+ </li>
690
+ <li class="ivds-footer__section-item">
691
+ <a href="#" class="ivds-footer__section-link">Terms of Service</a>
692
+ </li>
693
+ <li class="ivds-footer__section-item">
694
+ <a href="#" class="ivds-footer__section-link">Cookie Policy</a>
695
+ </li>
696
+ <li class="ivds-footer__section-item">
697
+ <a href="#" class="ivds-footer__section-link">Accessibility Statement</a>
698
+ </li>
699
+ </ul>
700
+ </div>
701
+
702
+ <div>
703
+ <h3 class="ivds-footer__section-title">Contact Information</h3>
704
+ <address>
705
+ <p>
706
+ <strong>Email:</strong>
707
+ <a href="mailto:hello@ivds.com" class="ivds-footer__section-link">hello@ivds.com</a>
708
+ </p>
709
+ <p>
710
+ <strong>Phone:</strong>
711
+ <a href="tel:+1234567890" class="ivds-footer__section-link">+1 (234) 567-890</a>
712
+ </p>
713
+ <p>
714
+ <strong>Address:</strong><br>
715
+ 123 Design Street<br>
716
+ UI City, UX 12345
717
+ </p>
718
+ </address>
719
+ </div>
720
+ </div>
721
+
722
+ <div class="ivds-footer__bottom">
723
+ <p>&copy; 2024 IVDS. All rights reserved. This site follows WCAG 2.1 AA accessibility guidelines.</p>
724
+ </div>
725
+ </div>
726
+ </footer>
727
+
728
+ <div style="padding: 2rem; background-color: #1e293b; color: #cbd5e1;">
729
+ <h2 style="color: #f1f5f9; margin-bottom: 1rem;">Accessibility Features</h2>
730
+ <ul style="line-height: 1.6;">
731
+ <li><strong>Semantic HTML:</strong> Uses proper footer, nav, and address elements</li>
732
+ <li><strong>ARIA Labels:</strong> Navigation sections have descriptive labels</li>
733
+ <li><strong>Focus Management:</strong> All interactive elements have visible focus indicators</li>
734
+ <li><strong>Color Contrast:</strong> Meets WCAG AA standards for text contrast</li>
735
+ <li><strong>Responsive Design:</strong> Content reflows properly on mobile devices</li>
736
+ <li><strong>Screen Reader Support:</strong> Proper heading hierarchy and semantic structure</li>
737
+ <li><strong>Keyboard Navigation:</strong> All links and buttons are keyboard accessible</li>
738
+ </ul>
739
+ </div>
740
+ `;