@codeforamerica/marcomms-design-system 1.13.1 → 1.14.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 +290 -199
- package/package.json +1 -1
- package/src/components/carousel.js +516 -114
- package/src/components/carousel.stories.js +105 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { html } from "lit-html";
|
|
2
2
|
import "./carousel";
|
|
3
3
|
import "./card";
|
|
4
|
-
import "./
|
|
4
|
+
import "./slide";
|
|
5
5
|
|
|
6
6
|
export default {
|
|
7
7
|
title: "Organisms/Carousel",
|
|
@@ -59,3 +59,107 @@ const Template = () => html`
|
|
|
59
59
|
|
|
60
60
|
export const Default = Template.bind({});
|
|
61
61
|
Default.args = {};
|
|
62
|
+
|
|
63
|
+
const SlidesTemplate = () => html`
|
|
64
|
+
<cfa-carousel itemsPerView="1">
|
|
65
|
+
<cfa-slide
|
|
66
|
+
imageUrl="https://codeforamerica.org/wp-content/uploads/2022/03/parents-with-child-768x427.png"
|
|
67
|
+
imageAltText="Illustration of three adults embracing and smiling"
|
|
68
|
+
linkUrl="#"
|
|
69
|
+
>
|
|
70
|
+
<h2>Automatic record clearance</h2>
|
|
71
|
+
<p>Working with communities and government to fundamentally transform the process of clearing records.</p>
|
|
72
|
+
</cfa-slide>
|
|
73
|
+
<cfa-slide
|
|
74
|
+
imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png"
|
|
75
|
+
imageAltText="Illustration of groceries in a shopping basket and paper bag"
|
|
76
|
+
linkUrl="#"
|
|
77
|
+
>
|
|
78
|
+
<h2>Food benefits</h2>
|
|
79
|
+
<p>Improving access to food assistance and delivery of benefits.</p>
|
|
80
|
+
</cfa-slide>
|
|
81
|
+
<cfa-slide
|
|
82
|
+
imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_family-dinner-768x505.png"
|
|
83
|
+
imageAltText="Illustration of two children and an adult seated at a table"
|
|
84
|
+
linkUrl="#"
|
|
85
|
+
>
|
|
86
|
+
<h2>Integrated benefits applications</h2>
|
|
87
|
+
<p>Making it easier for people and families to access all their benefits in one place.</p>
|
|
88
|
+
</cfa-slide>
|
|
89
|
+
<cfa-slide
|
|
90
|
+
imageUrl="https://files.codeforamerica.org/2021/05/28124704/illustration_friends-talking-768x518.png"
|
|
91
|
+
imageAltText="Illustration of three adults having a conversation"
|
|
92
|
+
linkUrl="#"
|
|
93
|
+
>
|
|
94
|
+
<h2>Training and capacity building</h2>
|
|
95
|
+
<p>Helping government serve people in a more human-centered way.</p>
|
|
96
|
+
</cfa-slide>
|
|
97
|
+
<cfa-slide
|
|
98
|
+
imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_on-the-phone-2-768x576.png"
|
|
99
|
+
imageAltText="Illustration of an adult and child reading together"
|
|
100
|
+
linkUrl="#"
|
|
101
|
+
>
|
|
102
|
+
<h2>Free, trustworthy tax services</h2>
|
|
103
|
+
<p>Helping people achieve the financial stability they deserve.</p>
|
|
104
|
+
</cfa-slide>
|
|
105
|
+
<cfa-slide
|
|
106
|
+
imageUrl="https://codeforamerica.org/wp-content/uploads/2022/03/parents-with-child-768x427.png"
|
|
107
|
+
imageAltText="Illustration showing community support"
|
|
108
|
+
linkUrl="#"
|
|
109
|
+
>
|
|
110
|
+
<h2>Slide 6 - Community Support</h2>
|
|
111
|
+
<p>Building stronger communities through technology and human-centered design.</p>
|
|
112
|
+
</cfa-slide>
|
|
113
|
+
<cfa-slide
|
|
114
|
+
imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png"
|
|
115
|
+
imageAltText="Illustration representing accessibility"
|
|
116
|
+
linkUrl="#"
|
|
117
|
+
>
|
|
118
|
+
<h2>Slide 7 - Accessibility</h2>
|
|
119
|
+
<p>Ensuring digital services are accessible to everyone.</p>
|
|
120
|
+
</cfa-slide>
|
|
121
|
+
<cfa-slide
|
|
122
|
+
imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_family-dinner-768x505.png"
|
|
123
|
+
imageAltText="Illustration of family engagement"
|
|
124
|
+
linkUrl="#"
|
|
125
|
+
>
|
|
126
|
+
<h2>Slide 8 - Family Engagement</h2>
|
|
127
|
+
<p>Strengthening family connections through innovative services.</p>
|
|
128
|
+
</cfa-slide>
|
|
129
|
+
<cfa-slide
|
|
130
|
+
imageUrl="https://files.codeforamerica.org/2021/05/28124704/illustration_friends-talking-768x518.png"
|
|
131
|
+
imageAltText="Illustration of partnership and collaboration"
|
|
132
|
+
linkUrl="#"
|
|
133
|
+
>
|
|
134
|
+
<h2>Slide 9 - Partnership</h2>
|
|
135
|
+
<p>Working collaboratively with partners to create lasting impact.</p>
|
|
136
|
+
</cfa-slide>
|
|
137
|
+
<cfa-slide
|
|
138
|
+
imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_on-the-phone-2-768x576.png"
|
|
139
|
+
imageAltText="Illustration representing digital transformation"
|
|
140
|
+
linkUrl="#"
|
|
141
|
+
>
|
|
142
|
+
<h2>Slide 10 - Digital Transformation</h2>
|
|
143
|
+
<p>Modernizing government services for the digital age.</p>
|
|
144
|
+
</cfa-slide>
|
|
145
|
+
<cfa-slide
|
|
146
|
+
imageUrl="https://codeforamerica.org/wp-content/uploads/2022/03/parents-with-child-768x427.png"
|
|
147
|
+
imageAltText="Illustration of inclusive design"
|
|
148
|
+
linkUrl="#"
|
|
149
|
+
>
|
|
150
|
+
<h2>Slide 11 - Inclusive Design</h2>
|
|
151
|
+
<p>Creating services that work for everyone, including the most vulnerable.</p>
|
|
152
|
+
</cfa-slide>
|
|
153
|
+
<cfa-slide
|
|
154
|
+
imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png"
|
|
155
|
+
imageAltText="Illustration of sustainable solutions"
|
|
156
|
+
linkUrl="#"
|
|
157
|
+
>
|
|
158
|
+
<h2>Slide 12 - Sustainable Solutions</h2>
|
|
159
|
+
<p>Building scalable systems that create lasting positive change.</p>
|
|
160
|
+
</cfa-slide>
|
|
161
|
+
</cfa-carousel>
|
|
162
|
+
`;
|
|
163
|
+
|
|
164
|
+
export const Slides = SlidesTemplate.bind({});
|
|
165
|
+
Slides.args = {};
|