@getflip/swirl-components 0.30.2 → 0.31.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/components.json +27 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-card.cjs.entry.js +3 -2
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-card/swirl-card.css +20 -1
- package/dist/collection/components/swirl-card/swirl-card.js +25 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-card.js +4 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-card.entry.js +3 -2
- package/dist/esm/swirl-components.js +1 -1
- package/dist/swirl-components/p-de32f28d.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-card/swirl-card.d.ts +2 -0
- package/dist/types/components.d.ts +4 -2
- package/package.json +1 -1
- package/vscode-data.json +15 -0
- package/dist/swirl-components/p-0dc2557e.entry.js +0 -1
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.card {
|
|
10
|
-
display:
|
|
10
|
+
display: flex;
|
|
11
11
|
overflow: hidden;
|
|
12
12
|
width: 100%;
|
|
13
13
|
margin: 0;
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
background-color: var(--s-surface-default);
|
|
19
19
|
font: inherit;
|
|
20
20
|
text-decoration: none;
|
|
21
|
+
flex-direction: column;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
a.card,
|
|
@@ -54,6 +55,18 @@ a.card:focus-visible, button.card:focus-visible, .card--interactive:focus-visibl
|
|
|
54
55
|
border-color: var(--s-border-highlight);
|
|
55
56
|
}
|
|
56
57
|
|
|
58
|
+
.card--justify-content-start .card__body {
|
|
59
|
+
justify-content: flex-start;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.card--justify-content-center .card__body {
|
|
63
|
+
justify-content: center;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.card--justify-content-end .card__body {
|
|
67
|
+
justify-content: flex-end;
|
|
68
|
+
}
|
|
69
|
+
|
|
57
70
|
:not(.card--has-image) .card__image {
|
|
58
71
|
overflow: hidden;
|
|
59
72
|
height: 0;
|
|
@@ -63,6 +76,10 @@ a.card:focus-visible, button.card:focus-visible, .card--interactive:focus-visibl
|
|
|
63
76
|
padding: 0 var(--s-space-16);
|
|
64
77
|
}
|
|
65
78
|
|
|
79
|
+
.card__image {
|
|
80
|
+
min-height: 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
66
83
|
.card__image ::slotted(img) {
|
|
67
84
|
display: inline-flex;
|
|
68
85
|
width: 100%;
|
|
@@ -73,7 +90,9 @@ a.card:focus-visible, button.card:focus-visible, .card--interactive:focus-visibl
|
|
|
73
90
|
|
|
74
91
|
.card__body {
|
|
75
92
|
display: flex;
|
|
93
|
+
min-height: 0;
|
|
76
94
|
padding: var(--s-space-12) var(--s-space-16) var(--s-space-16);
|
|
95
|
+
flex-grow: 1;
|
|
77
96
|
flex-direction: column;
|
|
78
97
|
gap: var(--s-space-16);
|
|
79
98
|
}
|
|
@@ -14,6 +14,7 @@ export class SwirlCard {
|
|
|
14
14
|
this.href = undefined;
|
|
15
15
|
this.imageAspectRatio = undefined;
|
|
16
16
|
this.interactive = undefined;
|
|
17
|
+
this.justifyContent = "start";
|
|
17
18
|
this.linkTarget = undefined;
|
|
18
19
|
this.swirlAriaLabel = undefined;
|
|
19
20
|
}
|
|
@@ -26,7 +27,7 @@ export class SwirlCard {
|
|
|
26
27
|
: this.borderRadius,
|
|
27
28
|
height: this.height,
|
|
28
29
|
};
|
|
29
|
-
const className = classnames("card", {
|
|
30
|
+
const className = classnames("card", `card--justify-content-${this.justifyContent}`, {
|
|
30
31
|
"card--elevated": this.elevated,
|
|
31
32
|
"card--has-image": hasImage,
|
|
32
33
|
"card--highlighted": this.highlighted,
|
|
@@ -193,6 +194,29 @@ export class SwirlCard {
|
|
|
193
194
|
"attribute": "interactive",
|
|
194
195
|
"reflect": false
|
|
195
196
|
},
|
|
197
|
+
"justifyContent": {
|
|
198
|
+
"type": "string",
|
|
199
|
+
"mutable": false,
|
|
200
|
+
"complexType": {
|
|
201
|
+
"original": "SwirlCardJustifyContent",
|
|
202
|
+
"resolved": "\"center\" | \"end\" | \"start\"",
|
|
203
|
+
"references": {
|
|
204
|
+
"SwirlCardJustifyContent": {
|
|
205
|
+
"location": "local",
|
|
206
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-card/swirl-card.tsx"
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
},
|
|
210
|
+
"required": false,
|
|
211
|
+
"optional": true,
|
|
212
|
+
"docs": {
|
|
213
|
+
"tags": [],
|
|
214
|
+
"text": ""
|
|
215
|
+
},
|
|
216
|
+
"attribute": "justify-content",
|
|
217
|
+
"reflect": false,
|
|
218
|
+
"defaultValue": "\"start\""
|
|
219
|
+
},
|
|
196
220
|
"linkTarget": {
|
|
197
221
|
"type": "string",
|
|
198
222
|
"mutable": false,
|