@codeforamerica/marcomms-design-system 1.17.3 → 1.18.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.
- package/dist/index.js +26 -10
- package/package.json +1 -1
- package/src/components/card.js +32 -14
- package/src/components/card.stories.js +106 -1
package/dist/index.js
CHANGED
|
@@ -1466,6 +1466,7 @@
|
|
|
1466
1466
|
display: flex;
|
|
1467
1467
|
flex-direction: column;
|
|
1468
1468
|
flex-grow: 1;
|
|
1469
|
+
gap: var(--spacing-layout-half);
|
|
1469
1470
|
padding: var(--padding);
|
|
1470
1471
|
}
|
|
1471
1472
|
|
|
@@ -1474,17 +1475,23 @@
|
|
|
1474
1475
|
display: flex;
|
|
1475
1476
|
flex-direction: column;
|
|
1476
1477
|
gap: var(--spacing-layout-half);
|
|
1477
|
-
margin-block-end: var(--spacing-layout-half);
|
|
1478
1478
|
}
|
|
1479
1479
|
|
|
1480
1480
|
.body {
|
|
1481
1481
|
display: flex;
|
|
1482
1482
|
flex-flow: column nowrap;
|
|
1483
|
+
flex-grow: 1;
|
|
1483
1484
|
gap: var(--spacing-layout-half);
|
|
1484
1485
|
height: 100%;
|
|
1485
1486
|
text-align: var(--text-alignment, start);
|
|
1486
1487
|
}
|
|
1487
1488
|
|
|
1489
|
+
.footer {
|
|
1490
|
+
display: flex;
|
|
1491
|
+
flex-direction: column;
|
|
1492
|
+
gap: var(--spacing-layout-half);
|
|
1493
|
+
}
|
|
1494
|
+
|
|
1488
1495
|
.eyebrow {
|
|
1489
1496
|
color: var(--purple-60);
|
|
1490
1497
|
}
|
|
@@ -1495,6 +1502,13 @@
|
|
|
1495
1502
|
|
|
1496
1503
|
.meta-text {
|
|
1497
1504
|
color: var(--gray-60);
|
|
1505
|
+
border-block-start: var(--hairline) solid var(--gray-40);
|
|
1506
|
+
padding-block-start: var(--spacing-component-2);
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
.card:has(.action-label) .meta-text {
|
|
1510
|
+
border-block-end: var(--hairline) solid var(--gray-40);
|
|
1511
|
+
padding-block-end: var(--spacing-component-2);
|
|
1498
1512
|
}
|
|
1499
1513
|
|
|
1500
1514
|
.action-label {
|
|
@@ -1503,8 +1517,6 @@
|
|
|
1503
1517
|
display: inline-block;
|
|
1504
1518
|
font-size: var(--font-size-small);
|
|
1505
1519
|
font-weight: bold;
|
|
1506
|
-
margin-block-start: auto;
|
|
1507
|
-
padding-block-start: var(--spacing-component-3);
|
|
1508
1520
|
}
|
|
1509
1521
|
|
|
1510
1522
|
a:hover .action-label {
|
|
@@ -1651,14 +1663,18 @@
|
|
|
1651
1663
|
</div>
|
|
1652
1664
|
<div class="body">
|
|
1653
1665
|
${this.text?D` <div class="small" .innerHTML=${this.text}></div> `:K}
|
|
1654
|
-
${this.metaText?D`
|
|
1655
|
-
<div
|
|
1656
|
-
class="meta-text small"
|
|
1657
|
-
.innerHTML=${this.metaText}
|
|
1658
|
-
></div>
|
|
1659
|
-
`:K}
|
|
1660
|
-
${this.actionLabel?D` <div class="action-label">${this.actionLabel}</div> `:K}
|
|
1661
1666
|
</div>
|
|
1667
|
+
${this.metaText||this.actionLabel?D`
|
|
1668
|
+
<div class="footer">
|
|
1669
|
+
${this.metaText?D`
|
|
1670
|
+
<div
|
|
1671
|
+
class="meta-text small"
|
|
1672
|
+
.innerHTML=${this.metaText}
|
|
1673
|
+
></div>
|
|
1674
|
+
`:K}
|
|
1675
|
+
${this.actionLabel?D` <div class="action-label">${this.actionLabel}</div> `:K}
|
|
1676
|
+
</div>
|
|
1677
|
+
`:K}
|
|
1662
1678
|
</div>
|
|
1663
1679
|
`}render(){return D`
|
|
1664
1680
|
${this.linkUrl?D`
|
package/package.json
CHANGED
package/src/components/card.js
CHANGED
|
@@ -63,6 +63,7 @@ class Card extends LitElement {
|
|
|
63
63
|
display: flex;
|
|
64
64
|
flex-direction: column;
|
|
65
65
|
flex-grow: 1;
|
|
66
|
+
gap: var(--spacing-layout-half);
|
|
66
67
|
padding: var(--padding);
|
|
67
68
|
}
|
|
68
69
|
|
|
@@ -71,17 +72,23 @@ class Card extends LitElement {
|
|
|
71
72
|
display: flex;
|
|
72
73
|
flex-direction: column;
|
|
73
74
|
gap: var(--spacing-layout-half);
|
|
74
|
-
margin-block-end: var(--spacing-layout-half);
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.body {
|
|
78
78
|
display: flex;
|
|
79
79
|
flex-flow: column nowrap;
|
|
80
|
+
flex-grow: 1;
|
|
80
81
|
gap: var(--spacing-layout-half);
|
|
81
82
|
height: 100%;
|
|
82
83
|
text-align: var(--text-alignment, start);
|
|
83
84
|
}
|
|
84
85
|
|
|
86
|
+
.footer {
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
gap: var(--spacing-layout-half);
|
|
90
|
+
}
|
|
91
|
+
|
|
85
92
|
.eyebrow {
|
|
86
93
|
color: var(--purple-60);
|
|
87
94
|
}
|
|
@@ -92,6 +99,13 @@ class Card extends LitElement {
|
|
|
92
99
|
|
|
93
100
|
.meta-text {
|
|
94
101
|
color: var(--gray-60);
|
|
102
|
+
border-block-start: var(--hairline) solid var(--gray-40);
|
|
103
|
+
padding-block-start: var(--spacing-component-2);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.card:has(.action-label) .meta-text {
|
|
107
|
+
border-block-end: var(--hairline) solid var(--gray-40);
|
|
108
|
+
padding-block-end: var(--spacing-component-2);
|
|
95
109
|
}
|
|
96
110
|
|
|
97
111
|
.action-label {
|
|
@@ -100,8 +114,6 @@ class Card extends LitElement {
|
|
|
100
114
|
display: inline-block;
|
|
101
115
|
font-size: var(--font-size-small);
|
|
102
116
|
font-weight: bold;
|
|
103
|
-
margin-block-start: auto;
|
|
104
|
-
padding-block-start: var(--spacing-component-3);
|
|
105
117
|
}
|
|
106
118
|
|
|
107
119
|
a:hover .action-label {
|
|
@@ -271,18 +283,24 @@ class Card extends LitElement {
|
|
|
271
283
|
${this.text
|
|
272
284
|
? html` <div class="small" .innerHTML=${this.text}></div> `
|
|
273
285
|
: nothing}
|
|
274
|
-
${this.metaText
|
|
275
|
-
? html`
|
|
276
|
-
<div
|
|
277
|
-
class="meta-text small"
|
|
278
|
-
.innerHTML=${this.metaText}
|
|
279
|
-
></div>
|
|
280
|
-
`
|
|
281
|
-
: nothing}
|
|
282
|
-
${this.actionLabel
|
|
283
|
-
? html` <div class="action-label">${this.actionLabel}</div> `
|
|
284
|
-
: nothing}
|
|
285
286
|
</div>
|
|
287
|
+
${(this.metaText || this.actionLabel)
|
|
288
|
+
? html`
|
|
289
|
+
<div class="footer">
|
|
290
|
+
${this.metaText
|
|
291
|
+
? html`
|
|
292
|
+
<div
|
|
293
|
+
class="meta-text small"
|
|
294
|
+
.innerHTML=${this.metaText}
|
|
295
|
+
></div>
|
|
296
|
+
`
|
|
297
|
+
: nothing}
|
|
298
|
+
${this.actionLabel
|
|
299
|
+
? html` <div class="action-label">${this.actionLabel}</div> `
|
|
300
|
+
: nothing}
|
|
301
|
+
</div>
|
|
302
|
+
`
|
|
303
|
+
: nothing}
|
|
286
304
|
</div>
|
|
287
305
|
`;
|
|
288
306
|
}
|
|
@@ -92,7 +92,7 @@ CardWithImage.args = {
|
|
|
92
92
|
metaText: "Updated April 14, 2026",
|
|
93
93
|
linkUrl:
|
|
94
94
|
"https://codeforamerica.org/programs/social-safety-net/food-benefits/",
|
|
95
|
-
actionLabel: "
|
|
95
|
+
actionLabel: "",
|
|
96
96
|
visualType: "image",
|
|
97
97
|
visualUrl:
|
|
98
98
|
"https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
|
|
@@ -120,3 +120,108 @@ CardWithLogo.args = {
|
|
|
120
120
|
export const SkeletonCard = () => html`
|
|
121
121
|
<cfa-card-skeleton></cfa-card-skeleton>
|
|
122
122
|
`;
|
|
123
|
+
|
|
124
|
+
export const CardLayoutExample = () => html`
|
|
125
|
+
<div class="container-fluid wrapper">
|
|
126
|
+
<div class="row stretch-md">
|
|
127
|
+
<div class="col-xs-12 col-md-4">
|
|
128
|
+
${Template({
|
|
129
|
+
theme: "default",
|
|
130
|
+
eyebrow: "Program",
|
|
131
|
+
title: "Automatic Record Clearance",
|
|
132
|
+
label: "Now hiring",
|
|
133
|
+
text: "Working with state governments and communities to fundamentally transform the process of record clearance.",
|
|
134
|
+
metaText: `
|
|
135
|
+
<ul class="ul ul--inline-with-separators">
|
|
136
|
+
<li>Updated May 7, 2026</li>
|
|
137
|
+
<li>In partnership with the community</li>
|
|
138
|
+
</ul>
|
|
139
|
+
`,
|
|
140
|
+
actionLabel: "Learn more",
|
|
141
|
+
linkUrl: "https://codeforamerica.org/programs/criminal-justice/automatic-record-clearance/",
|
|
142
|
+
})}
|
|
143
|
+
</div>
|
|
144
|
+
<div class="col-xs-12 col-md-4">
|
|
145
|
+
${Template({
|
|
146
|
+
theme: "default",
|
|
147
|
+
eyebrow: "Program",
|
|
148
|
+
title: "Food benefits",
|
|
149
|
+
label: "",
|
|
150
|
+
text: "Improving access to food assistance and delivery of benefits.",
|
|
151
|
+
metaText: "Updated April 14, 2026",
|
|
152
|
+
linkUrl: "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
|
|
153
|
+
actionLabel: "",
|
|
154
|
+
visualType: "image",
|
|
155
|
+
visualUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
|
|
156
|
+
visualThumbnailUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
|
|
157
|
+
visualAltText: "Illustration of groceries in a shopping basket and paper bag",
|
|
158
|
+
})}
|
|
159
|
+
</div>
|
|
160
|
+
<div class="col-xs-12 col-md-4">
|
|
161
|
+
${Template({
|
|
162
|
+
theme: "default",
|
|
163
|
+
eyebrow: "Partner",
|
|
164
|
+
title: "Code for America",
|
|
165
|
+
label: "Accepting applications",
|
|
166
|
+
text: "",
|
|
167
|
+
metaText: "",
|
|
168
|
+
linkUrl: "https://codeforamerica.org",
|
|
169
|
+
actionLabel: "Learn more",
|
|
170
|
+
visualType: "logo",
|
|
171
|
+
visualUrl: "https://files.codeforamerica.org/2021/05/28124702/code-for-america-logo-black.svg",
|
|
172
|
+
visualAltText: "Code for America logo",
|
|
173
|
+
})}
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
<div class="row stretch-md">
|
|
177
|
+
<div class="col-xs-12 col-md-4">
|
|
178
|
+
${Template({
|
|
179
|
+
theme: "default",
|
|
180
|
+
eyebrow: "Initiative",
|
|
181
|
+
title: "Voter Registration",
|
|
182
|
+
label: "",
|
|
183
|
+
text: "Helping eligible citizens register to vote.",
|
|
184
|
+
metaText: "Updated March 15, 2026",
|
|
185
|
+
linkUrl: "https://codeforamerica.org",
|
|
186
|
+
actionLabel: "",
|
|
187
|
+
visualType: "image",
|
|
188
|
+
visualUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
|
|
189
|
+
visualThumbnailUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
|
|
190
|
+
visualAltText: "Illustration representing voting",
|
|
191
|
+
})}
|
|
192
|
+
</div>
|
|
193
|
+
<div class="col-xs-12 col-md-4">
|
|
194
|
+
${Template({
|
|
195
|
+
theme: "default",
|
|
196
|
+
eyebrow: "Service",
|
|
197
|
+
title: "Benefits Enrollment",
|
|
198
|
+
label: "",
|
|
199
|
+
text: "Streamlining the process for residents to access vital benefits they qualify for. We work directly with state and local agencies to simplify enrollment workflows.",
|
|
200
|
+
metaText: "Updated February 28, 2026",
|
|
201
|
+
linkUrl: "https://codeforamerica.org",
|
|
202
|
+
actionLabel: "",
|
|
203
|
+
visualType: "image",
|
|
204
|
+
visualUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
|
|
205
|
+
visualThumbnailUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
|
|
206
|
+
visualAltText: "Illustration representing enrollment",
|
|
207
|
+
})}
|
|
208
|
+
</div>
|
|
209
|
+
<div class="col-xs-12 col-md-4">
|
|
210
|
+
${Template({
|
|
211
|
+
theme: "default",
|
|
212
|
+
eyebrow: "Program",
|
|
213
|
+
title: "Health Access Initiative",
|
|
214
|
+
label: "",
|
|
215
|
+
text: "Connecting communities with healthcare resources.",
|
|
216
|
+
metaText: "Coming in June 2026",
|
|
217
|
+
linkUrl: "https://codeforamerica.org",
|
|
218
|
+
actionLabel: "",
|
|
219
|
+
visualType: "image",
|
|
220
|
+
visualUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
|
|
221
|
+
visualThumbnailUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
|
|
222
|
+
visualAltText: "Illustration representing health",
|
|
223
|
+
})}
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
`;
|