@nascentdigital/funnel-ui 4.5.0 → 4.5.2
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/server/blocks/Block.d.ts +11 -11
- package/dist/server/blocks/Clients.d.ts +3 -2
- package/dist/server/blocks/MediaLayout.d.ts +11 -307
- package/dist/server/blocks/MediaLayout.js +30 -95
- package/dist/server/blocks/Message.d.ts +2 -2
- package/dist/server/blocks/Outcome.d.ts +3 -2
- package/dist/server/blocks/OutcomeDetail.d.ts +5 -2
- package/dist/server/blocks/ValueProp.d.ts +3 -2
- package/dist/server/blocks/summary/Statement.d.ts +1 -1
- package/dist/server/blocks/summary/Summary.d.ts +3 -2
- package/dist/server/entities/Client.d.ts +1 -1
- package/dist/server/entities/UniqueSellingPoint.d.ts +1 -1
- package/dist/server/panels/BlockPanel.d.ts +16 -0
- package/dist/server/panels/BlockPanel.js +67 -42
- package/dist/server/panels/ListPanel.d.ts +2 -1
- package/dist/server/panels/ListPanel.js +21 -11
- package/dist/server/panels/MessagePanel.d.ts +3 -1
- package/dist/server/panels/MessagePanel.js +40 -11
- package/dist/server/panels/VisualPanel.d.ts +1 -0
- package/dist/server/panels/VisualPanel.js +10 -1
- package/dist/styles/blocks/MediaLayout.css +23 -183
- package/package.json +2 -2
|
@@ -1,214 +1,54 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
-
--nd-medialayout-gap: theme('spacing.l8');
|
|
5
|
-
--nd-medialayout-poster-gap: unset;
|
|
6
|
-
--nd-medialayout-1col-gap: var(--nd-medialayout-gap);
|
|
7
|
-
--nd-medialayout-2col-gap: var(--nd-medialayout-gap);
|
|
8
|
-
--nd-medialayout-brick-gap: var(--nd-medialayout-gap);
|
|
9
|
-
@media screen(md) {
|
|
10
|
-
--nd-medialayout-gap: theme('spacing.l9');
|
|
11
|
-
}
|
|
12
|
-
@media screen(lg) {
|
|
13
|
-
--nd-medialayout-gap: theme('spacing.l10');
|
|
14
|
-
}
|
|
15
4
|
}
|
|
16
5
|
|
|
17
6
|
/* base */
|
|
18
7
|
.nd-MediaLayout {
|
|
19
8
|
}
|
|
20
9
|
|
|
10
|
+
/* visual aspect ratios */
|
|
11
|
+
.nd-MediaLayout .nd-ListPanel {
|
|
21
12
|
|
|
22
|
-
|
|
23
|
-
.nd-MediaLayout-layout-poster {
|
|
24
|
-
|
|
25
|
-
.nd-MediaLayout-content {
|
|
26
|
-
@apply flex flex-col gap-[var(--nd-medialayout-poster-gap)];
|
|
27
|
-
}
|
|
28
|
-
.nd-MediaLayout-itemWrap {
|
|
29
|
-
@apply w-full aspect-cinema lg:aspect-cinemascope;
|
|
30
|
-
}
|
|
31
|
-
.nd-MediaLayout-item {
|
|
32
|
-
@apply w-full object-cover;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/* 1col */
|
|
37
|
-
.nd-MediaLayout-layout-1col {
|
|
38
|
-
|
|
39
|
-
.nd-MediaLayout-content {
|
|
40
|
-
@apply container-wide-p flex flex-col gap-[var(--nd-medialayout-1col-gap)];
|
|
41
|
-
}
|
|
42
|
-
.nd-MediaLayout-itemWrap {
|
|
43
|
-
@apply w-full;
|
|
44
|
-
}
|
|
45
|
-
.nd-MediaLayout-item {
|
|
46
|
-
@apply w-full object-cover;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/* 2col */
|
|
51
|
-
._nd-MediaLayout-layout-2col-mobile {
|
|
52
|
-
.nd-MediaLayout-content {
|
|
53
|
-
@apply container-wide-p grid grid-flow-row grid-cols-1 gap-[var(--nd-medialayout-2col-gap)];
|
|
54
|
-
}
|
|
13
|
+
/* general styling across layouts */
|
|
55
14
|
.nd-MediaLayout-itemWrap {
|
|
56
|
-
@apply block
|
|
15
|
+
@apply block w-full overflow-hidden;
|
|
57
16
|
}
|
|
58
17
|
.nd-MediaLayout-item {
|
|
59
|
-
@apply
|
|
18
|
+
@apply size-full object-cover object-center;
|
|
60
19
|
}
|
|
61
|
-
}
|
|
62
|
-
._nd-MediaLayout-layout-2col-desktop {
|
|
63
|
-
.nd-MediaLayout-content {
|
|
64
|
-
@apply container-wide-p grid grid-cols-2 grid-flow-row gap-[var(--nd-medialayout-2col-gap)];
|
|
65
|
-
}
|
|
66
|
-
.nd-MediaLayout-itemWrap {
|
|
67
|
-
@apply w-full col-span-1 aspect-tv overflow-hidden;
|
|
68
|
-
|
|
69
|
-
/* make full width if a solo last child */
|
|
70
|
-
&:nth-child(odd):last-child {
|
|
71
|
-
@apply col-span-full aspect-cinema;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
.nd-MediaLayout-item {
|
|
75
|
-
@apply w-full h-full object-cover object-center;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
.nd-MediaLayout-layout-2col {
|
|
79
|
-
@apply max-md:_nd-MediaLayout-layout-2col-mobile md:_nd-MediaLayout-layout-2col-desktop;
|
|
80
|
-
}
|
|
81
20
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
.nd-MediaLayout-content {
|
|
86
|
-
@apply container-wide-p grid grid-flow-row grid-cols-1 gap-[var(--nd-medialayout-brick-gap)];
|
|
87
|
-
}
|
|
88
|
-
.nd-MediaLayout-itemWrap {
|
|
89
|
-
@apply block max-w-full aspect-widescreen overflow-hidden;
|
|
90
|
-
}
|
|
91
|
-
.nd-MediaLayout-item {
|
|
92
|
-
@apply w-full h-full object-cover object-center;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
._nd-MediaLayout-layout-brick-desktop {
|
|
96
|
-
|
|
97
|
-
/* base */
|
|
98
|
-
.nd-MediaLayout-content {
|
|
99
|
-
@apply container-wide-p grid grid-cols-2 gap-[var(--nd-medialayout-brick-gap)];
|
|
100
|
-
}
|
|
101
|
-
.nd-MediaLayout-itemWrap {
|
|
102
|
-
@apply block max-w-full col-span-1 aspect-tv overflow-hidden;
|
|
103
|
-
|
|
104
|
-
/* every 1, 4, 7, 10, 13 and so on images will be full width */
|
|
105
|
-
&:nth-child(3n + 1) {
|
|
106
|
-
@apply col-span-full aspect-cinema;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
.nd-MediaLayout-item {
|
|
110
|
-
@apply w-full h-full object-cover object-center;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
/* if the total number of images are 2, 5, 8, 11, 14 and so on, then make last 2 single */
|
|
114
|
-
.nd-MediaLayout-content:has(.nd-MediaLayout-itemWrap:nth-child(3n+2):last-child) {
|
|
21
|
+
/* brick */
|
|
22
|
+
.nd-BrickLayout {
|
|
115
23
|
|
|
24
|
+
/* default aspect ratio */
|
|
116
25
|
.nd-MediaLayout-itemWrap {
|
|
117
|
-
|
|
118
|
-
@apply col-span-1 aspect-tv;
|
|
119
|
-
}
|
|
26
|
+
@apply aspect-widescreen @panel-md:aspect-tv;
|
|
120
27
|
}
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
.nd-MediaLayout-layout-brick {
|
|
124
|
-
@apply max-md:_nd-MediaLayout-layout-brick-mobile md:_nd-MediaLayout-layout-brick-desktop;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
/* brick */
|
|
129
|
-
._nd-MediaLayout-layout-brickAlt-desktop {
|
|
130
28
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
@apply container-wide-p grid grid-cols-2 gap-[var(--nd-medialayout-brick-gap)];
|
|
134
|
-
}
|
|
135
|
-
.nd-MediaLayout-itemWrap {
|
|
136
|
-
@apply block max-w-full col-span-1 aspect-tv overflow-hidden;
|
|
29
|
+
/* brick (not flipped) */
|
|
30
|
+
&:not(.nd-BrickLayout-flipped) {
|
|
137
31
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
32
|
+
/* every 1, 4, 7, 10, 13 and so on images will be full width */
|
|
33
|
+
.nd-MediaLayout-itemWrap:nth-child(3n + 1) {
|
|
34
|
+
@apply @panel-md:aspect-cinema;
|
|
35
|
+
}
|
|
141
36
|
}
|
|
142
|
-
}
|
|
143
|
-
.nd-MediaLayout-item {
|
|
144
|
-
@apply w-full h-full object-cover object-center;
|
|
145
|
-
}
|
|
146
37
|
|
|
147
|
-
|
|
148
|
-
|
|
38
|
+
/* brick (flipped) */
|
|
39
|
+
&.nd-BrickLayout-flipped {
|
|
149
40
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
@apply
|
|
41
|
+
/* every 3, 6, 9, 12, 15 and so on images will be full width */
|
|
42
|
+
.nd-MediaLayout-itemWrap:nth-child(3n) {
|
|
43
|
+
@apply @panel-md:aspect-cinema;
|
|
153
44
|
}
|
|
154
45
|
}
|
|
155
46
|
}
|
|
156
47
|
|
|
157
|
-
/*
|
|
158
|
-
.nd-
|
|
159
|
-
|
|
160
|
-
/* make it full width */
|
|
48
|
+
/* vertical stack */
|
|
49
|
+
.nd-StackLayout.nd-StackLayout-direction-vertical {
|
|
161
50
|
.nd-MediaLayout-itemWrap {
|
|
162
|
-
@apply
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
.nd-MediaLayout-layout-brickAlt {
|
|
167
|
-
@apply max-md:_nd-MediaLayout-layout-brick-mobile md:_nd-MediaLayout-layout-brickAlt-desktop;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
@layer components {
|
|
173
|
-
|
|
174
|
-
/* desktop overrides */
|
|
175
|
-
@media screen(md) {
|
|
176
|
-
.nd-MediaGrid-root {
|
|
177
|
-
|
|
178
|
-
/* brick layout flipped */
|
|
179
|
-
&.nd-MediaGrid-brickFlipped {
|
|
180
|
-
.nd-MediaGrid-content {
|
|
181
|
-
@apply grid-cols-2;
|
|
182
|
-
|
|
183
|
-
.nd-MediaGrid-visual {
|
|
184
|
-
@apply col-span-1;
|
|
185
|
-
|
|
186
|
-
/* every 3, 6, 9, 12, 15 and so on images will be full width */
|
|
187
|
-
&:nth-child(3n) {
|
|
188
|
-
@apply col-span-full aspect-widescreen;
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
/* if the total number of images are 1, 4, 7, 10, 13, 16 and so on */
|
|
193
|
-
&:has(.nd-MediaGrid-visual:nth-child(3n+1):last-child) {
|
|
194
|
-
|
|
195
|
-
/* make the last two images take 50-50 of the screen width */
|
|
196
|
-
.nd-MediaGrid-visual {
|
|
197
|
-
&:nth-last-child(2) {
|
|
198
|
-
@apply col-span-1 aspect-tv;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
/* if there is only one image */
|
|
204
|
-
&:has(.nd-MediaGrid-visual:first-child:last-child) {
|
|
205
|
-
|
|
206
|
-
/* make it full width */
|
|
207
|
-
.nd-MediaGrid-visual {
|
|
208
|
-
@apply col-span-full aspect-widescreen;
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
}
|
|
51
|
+
@apply aspect-cinema @panel-lg:aspect-cinemascope;
|
|
212
52
|
}
|
|
213
53
|
}
|
|
214
54
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nascentdigital/funnel-ui",
|
|
3
3
|
"description": "UI components for funnel",
|
|
4
|
-
"version": "4.5.
|
|
4
|
+
"version": "4.5.2",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/",
|
|
7
7
|
"access": "restricted"
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"react-dom": "^19",
|
|
71
71
|
"ts-jest": "^29.3.2"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "5b63f9cd8843cc111b4458c71aa031a974455241"
|
|
74
74
|
}
|