@dnanpm/ui-components 0.7.0 → 0.9.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/components/Accordion/Accordion.css +6 -3
- package/dist/components/AccordionItem/AccordionItem.css +6 -3
- package/dist/components/Breadcrumb/Breadcrumb.css +15 -12
- package/dist/components/Breadcrumb/Breadcrumb.module.css.cjs +6 -6
- package/dist/components/Breadcrumb/Breadcrumb.module.css.js +6 -6
- package/dist/components/Button/Button.css +33 -32
- package/dist/components/Button/Button.module.css.cjs +11 -11
- package/dist/components/Button/Button.module.css.js +11 -11
- package/dist/components/ButtonCard/ButtonCard.cjs +105 -0
- package/dist/components/ButtonCard/ButtonCard.cjs.map +1 -0
- package/dist/components/ButtonCard/ButtonCard.css +166 -0
- package/dist/components/ButtonCard/ButtonCard.d.ts +3 -0
- package/dist/components/ButtonCard/ButtonCard.d.ts.map +1 -0
- package/dist/components/ButtonCard/ButtonCard.js +105 -0
- package/dist/components/ButtonCard/ButtonCard.js.map +1 -0
- package/dist/components/ButtonCard/ButtonCard.module.css.cjs +18 -0
- package/dist/components/ButtonCard/ButtonCard.module.css.cjs.map +1 -0
- package/dist/components/ButtonCard/ButtonCard.module.css.js +19 -0
- package/dist/components/ButtonCard/ButtonCard.module.css.js.map +1 -0
- package/dist/components/ButtonCard/ButtonCard.types.d.ts +103 -0
- package/dist/components/ButtonCard/ButtonCard.types.d.ts.map +1 -0
- package/dist/components/ButtonCard/index.d.ts +3 -0
- package/dist/components/ButtonCard/index.d.ts.map +1 -0
- package/dist/components/ContentCard/ContentCard.cjs +96 -0
- package/dist/components/ContentCard/ContentCard.cjs.map +1 -0
- package/dist/components/ContentCard/ContentCard.css +249 -0
- package/dist/components/ContentCard/ContentCard.d.ts +3 -0
- package/dist/components/ContentCard/ContentCard.d.ts.map +1 -0
- package/dist/components/ContentCard/ContentCard.js +96 -0
- package/dist/components/ContentCard/ContentCard.js.map +1 -0
- package/dist/components/ContentCard/ContentCard.module.css.cjs +24 -0
- package/dist/components/ContentCard/ContentCard.module.css.cjs.map +1 -0
- package/dist/components/ContentCard/ContentCard.module.css.js +25 -0
- package/dist/components/ContentCard/ContentCard.module.css.js.map +1 -0
- package/dist/components/ContentCard/ContentCard.types.d.ts +99 -0
- package/dist/components/ContentCard/ContentCard.types.d.ts.map +1 -0
- package/dist/components/ContentCard/index.d.ts +3 -0
- package/dist/components/ContentCard/index.d.ts.map +1 -0
- package/dist/components/Drawer/Drawer.cjs +101 -0
- package/dist/components/Drawer/Drawer.cjs.map +1 -0
- package/dist/components/Drawer/Drawer.css +218 -0
- package/dist/components/Drawer/Drawer.d.ts +3 -0
- package/dist/components/Drawer/Drawer.d.ts.map +1 -0
- package/dist/components/Drawer/Drawer.js +101 -0
- package/dist/components/Drawer/Drawer.js.map +1 -0
- package/dist/components/Drawer/Drawer.module.css.cjs +37 -0
- package/dist/components/Drawer/Drawer.module.css.cjs.map +1 -0
- package/dist/components/Drawer/Drawer.module.css.js +37 -0
- package/dist/components/Drawer/Drawer.module.css.js.map +1 -0
- package/dist/components/Drawer/Drawer.types.d.ts +63 -0
- package/dist/components/Drawer/Drawer.types.d.ts.map +1 -0
- package/dist/components/Drawer/index.d.ts +3 -0
- package/dist/components/Drawer/index.d.ts.map +1 -0
- package/dist/components/Footer/Footer.css +87 -77
- package/dist/components/Footer/Footer.module.css.cjs +39 -39
- package/dist/components/Footer/Footer.module.css.js +39 -39
- package/dist/components/FunctionButton/FunctionButton.cjs +34 -0
- package/dist/components/FunctionButton/FunctionButton.cjs.map +1 -0
- package/dist/components/FunctionButton/FunctionButton.css +124 -0
- package/dist/components/FunctionButton/FunctionButton.d.ts +3 -0
- package/dist/components/FunctionButton/FunctionButton.d.ts.map +1 -0
- package/dist/components/FunctionButton/FunctionButton.js +34 -0
- package/dist/components/FunctionButton/FunctionButton.js.map +1 -0
- package/dist/components/FunctionButton/FunctionButton.module.css.cjs +11 -0
- package/dist/components/FunctionButton/FunctionButton.module.css.cjs.map +1 -0
- package/dist/components/FunctionButton/FunctionButton.module.css.js +12 -0
- package/dist/components/FunctionButton/FunctionButton.module.css.js.map +1 -0
- package/dist/components/FunctionButton/FunctionButton.types.d.ts +21 -0
- package/dist/components/FunctionButton/FunctionButton.types.d.ts.map +1 -0
- package/dist/components/FunctionButton/index.d.ts +3 -0
- package/dist/components/FunctionButton/index.d.ts.map +1 -0
- package/dist/components/Hero/Hero.cjs +24 -26
- package/dist/components/Hero/Hero.cjs.map +1 -1
- package/dist/components/Hero/Hero.css +81 -74
- package/dist/components/Hero/Hero.js +24 -26
- package/dist/components/Hero/Hero.js.map +1 -1
- package/dist/components/Hero/Hero.module.css.cjs +20 -17
- package/dist/components/Hero/Hero.module.css.cjs.map +1 -1
- package/dist/components/Hero/Hero.module.css.js +20 -17
- package/dist/components/Hero/Hero.module.css.js.map +1 -1
- package/dist/components/IconButton/IconButton.css +32 -34
- package/dist/components/IconButton/IconButton.module.css.cjs +9 -9
- package/dist/components/IconButton/IconButton.module.css.js +9 -9
- package/dist/components/Label/Label.css +2 -3
- package/dist/components/MainNavigation/MainNavigation.cjs +415 -120
- package/dist/components/MainNavigation/MainNavigation.cjs.map +1 -1
- package/dist/components/MainNavigation/MainNavigation.css +265 -159
- package/dist/components/MainNavigation/MainNavigation.d.ts +1 -1
- package/dist/components/MainNavigation/MainNavigation.d.ts.map +1 -1
- package/dist/components/MainNavigation/MainNavigation.js +417 -122
- package/dist/components/MainNavigation/MainNavigation.js.map +1 -1
- package/dist/components/MainNavigation/MainNavigation.module.css.cjs +78 -68
- package/dist/components/MainNavigation/MainNavigation.module.css.cjs.map +1 -1
- package/dist/components/MainNavigation/MainNavigation.module.css.js +78 -68
- package/dist/components/MainNavigation/MainNavigation.module.css.js.map +1 -1
- package/dist/components/MainNavigation/MainNavigation.types.d.ts +64 -17
- package/dist/components/MainNavigation/MainNavigation.types.d.ts.map +1 -1
- package/dist/components/MainNavigation/MainNavigation.utils.cjs +20 -0
- package/dist/components/MainNavigation/MainNavigation.utils.cjs.map +1 -1
- package/dist/components/MainNavigation/MainNavigation.utils.d.ts +10 -1
- package/dist/components/MainNavigation/MainNavigation.utils.d.ts.map +1 -1
- package/dist/components/MainNavigation/MainNavigation.utils.js +20 -0
- package/dist/components/MainNavigation/MainNavigation.utils.js.map +1 -1
- package/dist/components/MainNavigation/index.d.ts +1 -1
- package/dist/components/MainNavigation/index.d.ts.map +1 -1
- package/dist/components/Modal/Modal.cjs +101 -0
- package/dist/components/Modal/Modal.cjs.map +1 -0
- package/dist/components/Modal/Modal.css +204 -0
- package/dist/components/Modal/Modal.d.ts +3 -0
- package/dist/components/Modal/Modal.d.ts.map +1 -0
- package/dist/components/Modal/Modal.js +101 -0
- package/dist/components/Modal/Modal.js.map +1 -0
- package/dist/components/Modal/Modal.module.css.cjs +39 -0
- package/dist/components/Modal/Modal.module.css.cjs.map +1 -0
- package/dist/components/Modal/Modal.module.css.js +39 -0
- package/dist/components/Modal/Modal.module.css.js.map +1 -0
- package/dist/components/Modal/Modal.types.d.ts +62 -0
- package/dist/components/Modal/Modal.types.d.ts.map +1 -0
- package/dist/components/Modal/index.d.ts +3 -0
- package/dist/components/Modal/index.d.ts.map +1 -0
- package/dist/components/Modal/useDialogDismissal.cjs +41 -0
- package/dist/components/Modal/useDialogDismissal.cjs.map +1 -0
- package/dist/components/Modal/useDialogDismissal.d.ts +17 -0
- package/dist/components/Modal/useDialogDismissal.d.ts.map +1 -0
- package/dist/components/Modal/useDialogDismissal.js +41 -0
- package/dist/components/Modal/useDialogDismissal.js.map +1 -0
- package/dist/components/Modal/useNativeDialog.cjs +126 -0
- package/dist/components/Modal/useNativeDialog.cjs.map +1 -0
- package/dist/components/Modal/useNativeDialog.d.ts +14 -0
- package/dist/components/Modal/useNativeDialog.d.ts.map +1 -0
- package/dist/components/Modal/useNativeDialog.js +126 -0
- package/dist/components/Modal/useNativeDialog.js.map +1 -0
- package/dist/components/Notification/Notification.css +6 -3
- package/dist/components/Pictograph/Pictograph.css +6 -3
- package/dist/components/Pictograph/PictographItem.css +6 -3
- package/dist/components/Quote/Quote.css +2 -3
- package/dist/components/Spinner/Spinner.css +6 -3
- package/dist/index.cjs +10 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +11 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -0
- package/dist/index.js.map +1 -1
- package/dist/styles/utils/elevation.css +2 -3
- package/dist/styles/utils/elevation.module.css.cjs +3 -0
- package/dist/styles/utils/elevation.module.css.cjs.map +1 -1
- package/dist/styles/utils/elevation.module.css.js +4 -1
- package/dist/styles/utils/elevation.module.css.js.map +1 -1
- package/dist/styles/utils/focus.css +26 -24
- package/dist/styles/utils/focus.module.css.cjs +3 -6
- package/dist/styles/utils/focus.module.css.cjs.map +1 -1
- package/dist/styles/utils/focus.module.css.js +4 -7
- package/dist/styles/utils/focus.module.css.js.map +1 -1
- package/dist/styles/utils/overlay.css +2 -3
- package/dist/styles/utils/text-decoration.css +4 -4
- package/dist/styles/utils/text-decoration.module.css.cjs +2 -2
- package/dist/styles/utils/text-decoration.module.css.js +2 -2
- package/dist/styles.css +17 -7
- package/package.json +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer dds-components {.
|
|
1
|
+
@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._hero_1itry_1 {
|
|
2
2
|
position: relative;
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
@@ -6,9 +6,14 @@
|
|
|
6
6
|
padding-top: var(--spacing-space-40);
|
|
7
7
|
container-name: hero;
|
|
8
8
|
container-type: inline-size;
|
|
9
|
+
|
|
10
|
+
/* Shared content-column geometry; the logo derives its position from these. */
|
|
11
|
+
--_hero-content-pad-start: var(--spacing-space-20);
|
|
12
|
+
--_hero-content-pad-end: var(--spacing-space-20);
|
|
13
|
+
--_hero-card-fraction: 1;
|
|
9
14
|
}
|
|
10
15
|
|
|
11
|
-
.
|
|
16
|
+
._hero__background_1itry_16 {
|
|
12
17
|
position: absolute;
|
|
13
18
|
inset-inline: 0;
|
|
14
19
|
top: 0;
|
|
@@ -17,21 +22,21 @@
|
|
|
17
22
|
overflow: clip;
|
|
18
23
|
}
|
|
19
24
|
|
|
20
|
-
.
|
|
25
|
+
._hero__backgroundImageComponent_1itry_25 {
|
|
21
26
|
width: 100%;
|
|
22
27
|
height: 100%;
|
|
23
28
|
}
|
|
24
29
|
|
|
25
|
-
.
|
|
30
|
+
._hero__backgroundImageComponent_1itry_25 > * {
|
|
26
31
|
width: 100%;
|
|
27
32
|
height: 100%;
|
|
28
33
|
}
|
|
29
34
|
|
|
30
|
-
.
|
|
31
|
-
.
|
|
32
|
-
.
|
|
33
|
-
.
|
|
34
|
-
.
|
|
35
|
+
._hero__backgroundImageComponent_1itry_25 img,
|
|
36
|
+
._hero__backgroundImageComponent_1itry_25 picture,
|
|
37
|
+
._hero__backgroundImageComponent_1itry_25 video,
|
|
38
|
+
._hero__backgroundImageComponent_1itry_25 canvas,
|
|
39
|
+
._hero__backgroundImageComponent_1itry_25 svg {
|
|
35
40
|
display: block;
|
|
36
41
|
width: 100%;
|
|
37
42
|
height: 100%;
|
|
@@ -39,24 +44,35 @@
|
|
|
39
44
|
object-position: right center;
|
|
40
45
|
}
|
|
41
46
|
|
|
42
|
-
.
|
|
47
|
+
._hero__logoImageWrap_1itry_47 {
|
|
48
|
+
position: absolute;
|
|
49
|
+
inset: 0;
|
|
50
|
+
max-width: 1280px;
|
|
51
|
+
margin-inline: auto;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
._hero__logoImage_1itry_47 {
|
|
43
55
|
position: absolute;
|
|
56
|
+
/* Insets bound the available area; padding provides the safety margins to those edges. */
|
|
44
57
|
top: 0;
|
|
45
|
-
left: 0;
|
|
46
58
|
right: 0;
|
|
59
|
+
bottom: var(--spacing-space-40);
|
|
60
|
+
left: 0;
|
|
47
61
|
display: flex;
|
|
48
62
|
align-items: center;
|
|
49
63
|
justify-content: center;
|
|
50
|
-
|
|
51
|
-
|
|
64
|
+
max-width: 500px;
|
|
65
|
+
margin-inline: auto;
|
|
66
|
+
padding: var(--spacing-space-32) var(--spacing-space-40) var(--spacing-space-20);
|
|
52
67
|
}
|
|
53
68
|
|
|
54
|
-
.
|
|
55
|
-
|
|
56
|
-
max-height:
|
|
69
|
+
._hero__logoImage_1itry_47 > * {
|
|
70
|
+
max-width: 100%;
|
|
71
|
+
max-height: 100%;
|
|
72
|
+
object-fit: contain;
|
|
57
73
|
}
|
|
58
74
|
|
|
59
|
-
.
|
|
75
|
+
._hero__overlay_1itry_75 {
|
|
60
76
|
position: absolute;
|
|
61
77
|
inset-inline: 0;
|
|
62
78
|
bottom: 0;
|
|
@@ -68,7 +84,7 @@
|
|
|
68
84
|
);
|
|
69
85
|
}
|
|
70
86
|
|
|
71
|
-
.
|
|
87
|
+
._hero__content_1itry_87 {
|
|
72
88
|
position: relative;
|
|
73
89
|
z-index: 1;
|
|
74
90
|
display: flex;
|
|
@@ -80,74 +96,74 @@
|
|
|
80
96
|
width: 100%;
|
|
81
97
|
margin-inline: auto;
|
|
82
98
|
padding-top: 200px;
|
|
83
|
-
padding-inline: var(--
|
|
99
|
+
padding-inline: var(--_hero-content-pad-start) var(--_hero-content-pad-end);
|
|
84
100
|
}
|
|
85
101
|
|
|
86
|
-
.
|
|
102
|
+
._hero__card_1itry_102 {
|
|
87
103
|
min-width: 0;
|
|
88
|
-
width: 100
|
|
104
|
+
width: calc(var(--_hero-card-fraction) * 100%);
|
|
89
105
|
background-color: var(--color-semantic-surface-base);
|
|
90
106
|
border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
|
|
91
107
|
border-radius: var(--radius-semantic-md);
|
|
92
108
|
padding: var(--spacing-space-20);
|
|
93
109
|
}
|
|
94
110
|
|
|
95
|
-
.
|
|
111
|
+
._hero__main_1itry_111 {
|
|
96
112
|
display: flex;
|
|
97
113
|
flex-direction: column;
|
|
98
114
|
gap: var(--spacing-space-40);
|
|
99
115
|
}
|
|
100
116
|
|
|
101
|
-
.
|
|
117
|
+
._hero__text_1itry_117 {
|
|
102
118
|
display: flex;
|
|
103
119
|
flex-direction: column;
|
|
104
120
|
gap: var(--spacing-space-20);
|
|
105
121
|
}
|
|
106
122
|
|
|
107
|
-
.
|
|
123
|
+
._hero__header_1itry_123 {
|
|
108
124
|
display: flex;
|
|
109
125
|
flex-direction: column;
|
|
110
126
|
gap: var(--spacing-space-8);
|
|
111
127
|
}
|
|
112
128
|
|
|
113
|
-
.
|
|
129
|
+
._hero__label_1itry_129 {
|
|
114
130
|
align-self: flex-start;
|
|
115
131
|
}
|
|
116
132
|
|
|
117
|
-
.
|
|
133
|
+
._hero__heading_1itry_133 {
|
|
118
134
|
margin: 0;
|
|
119
135
|
color: var(--color-semantic-foreground-default);
|
|
120
136
|
text-wrap: balance;
|
|
121
137
|
}
|
|
122
138
|
|
|
123
|
-
._hero__heading--
|
|
139
|
+
._hero__heading--default_1itry_139 {
|
|
124
140
|
font: var(--typography-heading-lg);
|
|
125
141
|
}
|
|
126
142
|
|
|
127
|
-
._hero__heading--
|
|
143
|
+
._hero__heading--large_1itry_143 {
|
|
128
144
|
font: var(--typography-heading-xl);
|
|
129
145
|
}
|
|
130
146
|
|
|
131
|
-
._hero__heading--
|
|
147
|
+
._hero__heading--small_1itry_147 {
|
|
132
148
|
font: var(--typography-heading-md);
|
|
133
149
|
}
|
|
134
150
|
|
|
135
|
-
.
|
|
151
|
+
._hero__description_1itry_151 {
|
|
136
152
|
margin: 0;
|
|
137
153
|
color: var(--color-semantic-foreground-default);
|
|
138
154
|
font: var(--typography-body-md);
|
|
139
155
|
text-wrap: pretty;
|
|
140
156
|
}
|
|
141
157
|
|
|
142
|
-
.
|
|
158
|
+
._hero__description_1itry_151 p {
|
|
143
159
|
margin: 0;
|
|
144
160
|
}
|
|
145
161
|
|
|
146
|
-
.
|
|
162
|
+
._hero__description_1itry_151 p + p {
|
|
147
163
|
margin-top: var(--spacing-space-12);
|
|
148
164
|
}
|
|
149
165
|
|
|
150
|
-
.
|
|
166
|
+
._hero__actions_1itry_166 {
|
|
151
167
|
display: flex;
|
|
152
168
|
flex-direction: row;
|
|
153
169
|
align-items: flex-start;
|
|
@@ -156,83 +172,74 @@
|
|
|
156
172
|
}
|
|
157
173
|
|
|
158
174
|
@container hero (min-width: 768px) {
|
|
159
|
-
.
|
|
160
|
-
|
|
175
|
+
._hero__content_1itry_87,
|
|
176
|
+
._hero__background_1itry_16 {
|
|
177
|
+
--_hero-content-pad-start: var(--spacing-space-40);
|
|
178
|
+
--_hero-content-pad-end: var(--spacing-space-40);
|
|
179
|
+
--_hero-card-fraction: 0.5;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
._hero__background_1itry_16 {
|
|
183
|
+
height: auto;
|
|
184
|
+
bottom: var(--spacing-space-40);
|
|
161
185
|
}
|
|
162
186
|
|
|
163
|
-
.
|
|
187
|
+
._hero__content_1itry_87 {
|
|
164
188
|
flex-direction: row;
|
|
165
189
|
align-items: flex-end;
|
|
166
190
|
min-height: 460px;
|
|
167
191
|
gap: var(--spacing-space-40);
|
|
168
192
|
padding-top: 0;
|
|
169
|
-
padding-inline: var(--spacing-space-40);
|
|
170
193
|
}
|
|
171
194
|
|
|
172
|
-
.
|
|
173
|
-
width: 50%;
|
|
195
|
+
._hero__card_1itry_102 {
|
|
174
196
|
max-width: 650px;
|
|
175
197
|
}
|
|
176
198
|
|
|
177
|
-
.
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
margin-top: calc(-1 * var(--spacing-space-40));
|
|
186
|
-
padding-inline: 0;
|
|
187
|
-
padding-top: 0;
|
|
188
|
-
padding-bottom: 0;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
._hero__logoImage_1xib4_42 > * {
|
|
192
|
-
width: auto;
|
|
193
|
-
max-width: 90%;
|
|
194
|
-
max-height: 100%;
|
|
199
|
+
._hero__logoImage_1itry_47 {
|
|
200
|
+
bottom: 0;
|
|
201
|
+
padding: var(--spacing-space-40);
|
|
202
|
+
/* Inner edge sits at the card's right edge: pad-start + card-fraction of the content box. */
|
|
203
|
+
left: calc(
|
|
204
|
+
var(--_hero-content-pad-start) + var(--_hero-card-fraction) *
|
|
205
|
+
(100% - var(--_hero-content-pad-start) - var(--_hero-content-pad-end))
|
|
206
|
+
);
|
|
195
207
|
}
|
|
196
208
|
}
|
|
197
209
|
|
|
198
210
|
@container hero (min-width: 1024px) {
|
|
199
|
-
.
|
|
200
|
-
|
|
211
|
+
._hero__content_1itry_87,
|
|
212
|
+
._hero__background_1itry_16 {
|
|
213
|
+
--_hero-content-pad-start: var(--spacing-space-80);
|
|
214
|
+
--_hero-content-pad-end: var(--spacing-space-40);
|
|
215
|
+
--_hero-card-fraction: 0.6;
|
|
201
216
|
}
|
|
202
217
|
|
|
203
|
-
.
|
|
218
|
+
._hero__content_1itry_87 {
|
|
204
219
|
min-height: 440px;
|
|
205
|
-
padding-left: var(--spacing-space-80);
|
|
206
|
-
padding-right: var(--spacing-space-40);
|
|
207
220
|
}
|
|
208
221
|
|
|
209
|
-
.
|
|
210
|
-
width: 60%;
|
|
222
|
+
._hero__card_1itry_102 {
|
|
211
223
|
max-width: initial;
|
|
212
224
|
padding: var(--spacing-space-40);
|
|
213
225
|
}
|
|
214
|
-
|
|
215
|
-
._hero__logoImage_1xib4_42 {
|
|
216
|
-
max-height: 440px;
|
|
217
|
-
}
|
|
218
226
|
}
|
|
219
227
|
|
|
220
228
|
@media (forced-colors: active) {
|
|
221
|
-
.
|
|
229
|
+
._hero__overlay_1itry_75 {
|
|
222
230
|
display: none;
|
|
223
231
|
}
|
|
224
232
|
|
|
225
|
-
.
|
|
233
|
+
._hero__background_1itry_16 {
|
|
226
234
|
background-color: Canvas;
|
|
227
235
|
}
|
|
228
236
|
|
|
229
|
-
.
|
|
237
|
+
._hero__card_1itry_102 {
|
|
230
238
|
border: var(--borderwidth-semantic-xs) solid CanvasText;
|
|
231
239
|
box-shadow: none;
|
|
232
240
|
}
|
|
233
241
|
|
|
234
|
-
.
|
|
242
|
+
._hero__logoImageWrap_1itry_47 {
|
|
235
243
|
display: none;
|
|
236
244
|
}
|
|
237
|
-
}
|
|
238
|
-
}
|
|
245
|
+
} }
|
|
@@ -41,34 +41,32 @@ const Hero = ({
|
|
|
41
41
|
children: [
|
|
42
42
|
/* @__PURE__ */ jsxs("div", { className: styles.hero__background, style: backgroundStyle, children: [
|
|
43
43
|
image != null && /* @__PURE__ */ jsx("div", { className: styles.hero__backgroundImageComponent, "aria-hidden": "true", children: image }),
|
|
44
|
-
/* @__PURE__ */ jsx("div", { className: styles.hero__overlay, "aria-hidden": "true" })
|
|
44
|
+
/* @__PURE__ */ jsx("div", { className: styles.hero__overlay, "aria-hidden": "true" }),
|
|
45
|
+
logoImage != null && /* @__PURE__ */ jsx("div", { className: styles.hero__logoImageWrap, "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: styles.hero__logoImage, children: logoImage }) })
|
|
45
46
|
] }),
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
/* @__PURE__ */ jsxs("div", { className: styles.
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
)
|
|
62
|
-
] }),
|
|
63
|
-
description != null && /* @__PURE__ */ jsx("div", { className: cn(styles.hero__description, "dds-prose"), children: description })
|
|
47
|
+
/* @__PURE__ */ jsx("div", { className: styles.hero__content, children: /* @__PURE__ */ jsx("div", { className: cn(styles.hero__card, elevationStyles.elevationHigh), children: /* @__PURE__ */ jsxs("div", { className: styles.hero__main, children: [
|
|
48
|
+
/* @__PURE__ */ jsxs("div", { className: styles.hero__text, children: [
|
|
49
|
+
/* @__PURE__ */ jsxs("div", { className: styles.hero__header, children: [
|
|
50
|
+
label != null && /* @__PURE__ */ jsx("div", { className: styles.hero__label, children: label }),
|
|
51
|
+
/* @__PURE__ */ jsx(
|
|
52
|
+
HeadingLevel,
|
|
53
|
+
{
|
|
54
|
+
id: headingId,
|
|
55
|
+
className: cn(
|
|
56
|
+
styles.hero__heading,
|
|
57
|
+
headingClassByStyle[headingStyle]
|
|
58
|
+
),
|
|
59
|
+
children: heading
|
|
60
|
+
}
|
|
61
|
+
)
|
|
64
62
|
] }),
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
] })
|
|
63
|
+
description != null && /* @__PURE__ */ jsx("div", { className: cn(styles.hero__description, "dds-prose"), children: description })
|
|
64
|
+
] }),
|
|
65
|
+
hasActions && /* @__PURE__ */ jsxs("div", { className: styles.hero__actions, children: [
|
|
66
|
+
primaryCta != null && primaryCta,
|
|
67
|
+
secondaryCta != null && secondaryCta
|
|
68
|
+
] })
|
|
69
|
+
] }) }) })
|
|
72
70
|
]
|
|
73
71
|
}
|
|
74
72
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.js","sources":["../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './Hero.module.css';\nimport type { HeroProps } from './Hero.types';\nimport { headingClassByStyle } from './Hero.utils';\n\nexport const Hero = ({\n label,\n heading,\n description,\n headingLevel = 'h1',\n headingStyle = 'default',\n Image,\n imageProps,\n LogoImage,\n logoImageProps,\n backgroundColor,\n primaryCta,\n secondaryCta,\n className,\n ref,\n ...props\n}: HeroProps) => {\n const headingId = useId();\n\n const ResolvedImage = Image ?? (imageProps != null ? 'img' : undefined);\n const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? 'img' : undefined);\n const image = ResolvedImage != null ? <ResolvedImage {...imageProps} /> : undefined;\n const logoImage =\n ResolvedLogoImage != null ? <ResolvedLogoImage {...logoImageProps} /> : undefined;\n const HeadingLevel = headingLevel;\n\n const hasActions = primaryCta != null || secondaryCta != null;\n const backgroundStyle =\n image == null && backgroundColor != null ? { backgroundColor } : undefined;\n const ariaLabelledBy = props['aria-label'] ? undefined : props['aria-labelledby'] || headingId;\n\n return (\n <section\n ref={ref}\n {...props}\n className={cn(styles.hero, className)}\n aria-label={props['aria-label']}\n aria-labelledby={ariaLabelledBy}\n >\n <div className={styles.hero__background} style={backgroundStyle}>\n {image != null && (\n <div className={styles.hero__backgroundImageComponent} aria-hidden=\"true\">\n {image}\n </div>\n )}\n <div className={styles.hero__overlay} aria-hidden=\"true\" />\n </div>\n\n <div className={styles.hero__content}>\n <div className={cn(styles.hero__card, elevationStyles.elevationHigh)}>\n <div className={styles.hero__main}>\n <div className={styles.hero__text}>\n <div className={styles.hero__header}>\n {label != null && <div className={styles.hero__label}>{label}</div>}\n <HeadingLevel\n id={headingId}\n className={cn(\n styles.hero__heading,\n headingClassByStyle[headingStyle],\n )}\n >\n {heading}\n </HeadingLevel>\n </div>\n {description != null && (\n <div className={cn(styles.hero__description, 'dds-prose')}>\n {description}\n </div>\n )}\n </div>\n\n {hasActions && (\n <div className={styles.hero__actions}>\n {primaryCta != null && primaryCta}\n {secondaryCta != null && secondaryCta}\n </div>\n )}\n </div>\n </div>\n
|
|
1
|
+
{"version":3,"file":"Hero.js","sources":["../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './Hero.module.css';\nimport type { HeroProps } from './Hero.types';\nimport { headingClassByStyle } from './Hero.utils';\n\nexport const Hero = ({\n label,\n heading,\n description,\n headingLevel = 'h1',\n headingStyle = 'default',\n Image,\n imageProps,\n LogoImage,\n logoImageProps,\n backgroundColor,\n primaryCta,\n secondaryCta,\n className,\n ref,\n ...props\n}: HeroProps) => {\n const headingId = useId();\n\n const ResolvedImage = Image ?? (imageProps != null ? 'img' : undefined);\n const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? 'img' : undefined);\n const image = ResolvedImage != null ? <ResolvedImage {...imageProps} /> : undefined;\n const logoImage =\n ResolvedLogoImage != null ? <ResolvedLogoImage {...logoImageProps} /> : undefined;\n const HeadingLevel = headingLevel;\n\n const hasActions = primaryCta != null || secondaryCta != null;\n const backgroundStyle =\n image == null && backgroundColor != null ? { backgroundColor } : undefined;\n const ariaLabelledBy = props['aria-label'] ? undefined : props['aria-labelledby'] || headingId;\n\n return (\n <section\n ref={ref}\n {...props}\n className={cn(styles.hero, className)}\n aria-label={props['aria-label']}\n aria-labelledby={ariaLabelledBy}\n >\n <div className={styles.hero__background} style={backgroundStyle}>\n {image != null && (\n <div className={styles.hero__backgroundImageComponent} aria-hidden=\"true\">\n {image}\n </div>\n )}\n <div className={styles.hero__overlay} aria-hidden=\"true\" />\n {logoImage != null && (\n <div className={styles.hero__logoImageWrap} aria-hidden=\"true\">\n <div className={styles.hero__logoImage}>{logoImage}</div>\n </div>\n )}\n </div>\n\n <div className={styles.hero__content}>\n <div className={cn(styles.hero__card, elevationStyles.elevationHigh)}>\n <div className={styles.hero__main}>\n <div className={styles.hero__text}>\n <div className={styles.hero__header}>\n {label != null && <div className={styles.hero__label}>{label}</div>}\n <HeadingLevel\n id={headingId}\n className={cn(\n styles.hero__heading,\n headingClassByStyle[headingStyle],\n )}\n >\n {heading}\n </HeadingLevel>\n </div>\n {description != null && (\n <div className={cn(styles.hero__description, 'dds-prose')}>\n {description}\n </div>\n )}\n </div>\n\n {hasActions && (\n <div className={styles.hero__actions}>\n {primaryCta != null && primaryCta}\n {secondaryCta != null && secondaryCta}\n </div>\n )}\n </div>\n </div>\n </div>\n </section>\n );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,OAAO,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAiB;AACb,QAAM,YAAY,MAAA;AAElB,QAAM,gBAAgB,UAAU,cAAc,OAAO,QAAQ;AAC7D,QAAM,oBAAoB,cAAc,kBAAkB,OAAO,QAAQ;AACzE,QAAM,QAAQ,iBAAiB,2BAAQ,eAAA,EAAe,GAAG,YAAY,IAAK;AAC1E,QAAM,YACF,qBAAqB,2BAAQ,mBAAA,EAAmB,GAAG,gBAAgB,IAAK;AAC5E,QAAM,eAAe;AAErB,QAAM,aAAa,cAAc,QAAQ,gBAAgB;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,iBAAiB,MAAM,YAAY,IAAI,SAAY,MAAM,iBAAiB,KAAK;AAErF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,SAAS;AAAA,MACpC,cAAY,MAAM,YAAY;AAAA,MAC9B,mBAAiB;AAAA,MAEjB,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,kBAAkB,OAAO,iBAC3C,UAAA;AAAA,UAAA,SAAS,4BACL,OAAA,EAAI,WAAW,OAAO,gCAAgC,eAAY,QAC9D,UAAA,MAAA,CACL;AAAA,8BAEH,OAAA,EAAI,WAAW,OAAO,eAAe,eAAY,QAAO;AAAA,UACxD,aAAa,QACV,oBAAC,OAAA,EAAI,WAAW,OAAO,qBAAqB,eAAY,QACpD,8BAAC,OAAA,EAAI,WAAW,OAAO,iBAAkB,qBAAU,EAAA,CACvD;AAAA,QAAA,GAER;AAAA,4BAEC,OAAA,EAAI,WAAW,OAAO,eACnB,UAAA,oBAAC,SAAI,WAAW,GAAG,OAAO,YAAY,gBAAgB,aAAa,GAC/D,+BAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,cAAA,SAAS,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAc,UAAA,OAAM;AAAA,cAC7D;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAW;AAAA,oBACP,OAAO;AAAA,oBACP,oBAAoB,YAAY;AAAA,kBAAA;AAAA,kBAGnC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,YACC,eAAe,QACZ,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,UAAA,GAER;AAAA,UAEC,cACG,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,YAAA,cAAc,QAAQ;AAAA,YACtB,gBAAgB,QAAQ;AAAA,UAAA,EAAA,CAC7B;AAAA,QAAA,EAAA,CAER,GACJ,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
|
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
require('./Hero.css');
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
4
|
-
const hero = "
|
|
5
|
-
const hero__background = "
|
|
6
|
-
const hero__backgroundImageComponent = "
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const
|
|
4
|
+
const hero = "_hero_1itry_1";
|
|
5
|
+
const hero__background = "_hero__background_1itry_16";
|
|
6
|
+
const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1itry_25";
|
|
7
|
+
const hero__logoImageWrap = "_hero__logoImageWrap_1itry_47";
|
|
8
|
+
const hero__logoImage = "_hero__logoImage_1itry_47";
|
|
9
|
+
const hero__overlay = "_hero__overlay_1itry_75";
|
|
10
|
+
const hero__content = "_hero__content_1itry_87";
|
|
11
|
+
const hero__card = "_hero__card_1itry_102";
|
|
12
|
+
const hero__main = "_hero__main_1itry_111";
|
|
13
|
+
const hero__text = "_hero__text_1itry_117";
|
|
14
|
+
const hero__header = "_hero__header_1itry_123";
|
|
15
|
+
const hero__label = "_hero__label_1itry_129";
|
|
16
|
+
const hero__heading = "_hero__heading_1itry_133";
|
|
17
|
+
const hero__description = "_hero__description_1itry_151";
|
|
18
|
+
const hero__actions = "_hero__actions_1itry_166";
|
|
18
19
|
const styles = {
|
|
19
20
|
hero,
|
|
20
21
|
hero__background,
|
|
21
22
|
hero__backgroundImageComponent,
|
|
23
|
+
hero__logoImageWrap,
|
|
22
24
|
hero__logoImage,
|
|
23
25
|
hero__overlay,
|
|
24
26
|
hero__content,
|
|
@@ -28,9 +30,9 @@ const styles = {
|
|
|
28
30
|
hero__header,
|
|
29
31
|
hero__label,
|
|
30
32
|
hero__heading,
|
|
31
|
-
"hero__heading--default": "_hero__heading--
|
|
32
|
-
"hero__heading--large": "_hero__heading--
|
|
33
|
-
"hero__heading--small": "_hero__heading--
|
|
33
|
+
"hero__heading--default": "_hero__heading--default_1itry_139",
|
|
34
|
+
"hero__heading--large": "_hero__heading--large_1itry_143",
|
|
35
|
+
"hero__heading--small": "_hero__heading--small_1itry_147",
|
|
34
36
|
hero__description,
|
|
35
37
|
hero__actions
|
|
36
38
|
};
|
|
@@ -46,6 +48,7 @@ exports.hero__header = hero__header;
|
|
|
46
48
|
exports.hero__heading = hero__heading;
|
|
47
49
|
exports.hero__label = hero__label;
|
|
48
50
|
exports.hero__logoImage = hero__logoImage;
|
|
51
|
+
exports.hero__logoImageWrap = hero__logoImageWrap;
|
|
49
52
|
exports.hero__main = hero__main;
|
|
50
53
|
exports.hero__overlay = hero__overlay;
|
|
51
54
|
exports.hero__text = hero__text;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Hero.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,22 +1,24 @@
|
|
|
1
1
|
import './Hero.css';
|
|
2
|
-
const hero = "
|
|
3
|
-
const hero__background = "
|
|
4
|
-
const hero__backgroundImageComponent = "
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
2
|
+
const hero = "_hero_1itry_1";
|
|
3
|
+
const hero__background = "_hero__background_1itry_16";
|
|
4
|
+
const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1itry_25";
|
|
5
|
+
const hero__logoImageWrap = "_hero__logoImageWrap_1itry_47";
|
|
6
|
+
const hero__logoImage = "_hero__logoImage_1itry_47";
|
|
7
|
+
const hero__overlay = "_hero__overlay_1itry_75";
|
|
8
|
+
const hero__content = "_hero__content_1itry_87";
|
|
9
|
+
const hero__card = "_hero__card_1itry_102";
|
|
10
|
+
const hero__main = "_hero__main_1itry_111";
|
|
11
|
+
const hero__text = "_hero__text_1itry_117";
|
|
12
|
+
const hero__header = "_hero__header_1itry_123";
|
|
13
|
+
const hero__label = "_hero__label_1itry_129";
|
|
14
|
+
const hero__heading = "_hero__heading_1itry_133";
|
|
15
|
+
const hero__description = "_hero__description_1itry_151";
|
|
16
|
+
const hero__actions = "_hero__actions_1itry_166";
|
|
16
17
|
const styles = {
|
|
17
18
|
hero,
|
|
18
19
|
hero__background,
|
|
19
20
|
hero__backgroundImageComponent,
|
|
21
|
+
hero__logoImageWrap,
|
|
20
22
|
hero__logoImage,
|
|
21
23
|
hero__overlay,
|
|
22
24
|
hero__content,
|
|
@@ -26,9 +28,9 @@ const styles = {
|
|
|
26
28
|
hero__header,
|
|
27
29
|
hero__label,
|
|
28
30
|
hero__heading,
|
|
29
|
-
"hero__heading--default": "_hero__heading--
|
|
30
|
-
"hero__heading--large": "_hero__heading--
|
|
31
|
-
"hero__heading--small": "_hero__heading--
|
|
31
|
+
"hero__heading--default": "_hero__heading--default_1itry_139",
|
|
32
|
+
"hero__heading--large": "_hero__heading--large_1itry_143",
|
|
33
|
+
"hero__heading--small": "_hero__heading--small_1itry_147",
|
|
32
34
|
hero__description,
|
|
33
35
|
hero__actions
|
|
34
36
|
};
|
|
@@ -45,6 +47,7 @@ export {
|
|
|
45
47
|
hero__heading,
|
|
46
48
|
hero__label,
|
|
47
49
|
hero__logoImage,
|
|
50
|
+
hero__logoImageWrap,
|
|
48
51
|
hero__main,
|
|
49
52
|
hero__overlay,
|
|
50
53
|
hero__text
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Hero.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|