Skip to content

Commit be65bf1

Browse files
DiaanRoaldBoerema
Diaan
and
RoaldBoerema
authored
Feature/629 development of card (#884)
* first setup of card * fix build with new yarn.lock * remove test to fix build * card tokens * ⚙️ Generate theme tokens * add header slot * Added card tokens * ⚙️ Generate theme tokens * minor changes to tokens * Added color tokens for card * ⚙️ Generate theme tokens * ⚙️ Generate theme tokens * start to apply tokens * different layouts, added icon option * got image aspect ratio working * added truncation 😅 * remove css responsive behaviour * improve responsivenes when no media * improve fix/vs flex height * fix padding on media end * fix for firefox * fix weird firefox bug 🤪 * add full image height option * fixed/flexible height, fixed width for image * is this it? * refactor + added to website * small storybook fix + documentation * added spacing tokens for card in core * ⚙️ Generate theme tokens * generated files * added tokens * Detached typography tokens for card Title, subtitle and body from main tokens * ⚙️ Generate theme tokens * added full API in story * tidy up examples and docs * review comments + tests * final test * review comments * review comments * changed icon from property to slot * removed typo * review comment * fix tests --------- Co-authored-by: RoaldBoerema <124177344+RoaldBoerema@users.noreply.github.com> Co-authored-by: RoaldBoerema <RoaldBoerema@users.noreply.github.com> Co-authored-by: Diaan <Diaan@users.noreply.github.com>
1 parent 17c60d7 commit be65bf1

File tree

23 files changed

+1696
-84
lines changed

23 files changed

+1696
-84
lines changed

‎.changeset/spotty-apples-kick.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sl-design-system/card': patch
3+
---
4+
5+
Added card component

‎packages/components/avatar/custom-elements.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -335,7 +335,7 @@
335335
"text": "ResizeObserver | undefined"
336336
},
337337
"default": "new ResizeObserver(() => {\n this.#checkOverflow();\n })",
338-
"description": "Observe the grid width."
338+
"description": "Observe the avatar width."
339339
},
340340
{
341341
"kind": "field",

‎packages/components/avatar/src/avatar.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export class Avatar extends ScopedElementsMixin(LitElement) {
9090
/** The avatar configuration settings from the current theme. */
9191
#config?: AvatarConfig;
9292

93-
/** Observe the grid width. */
93+
/** Observe the avatar width. */
9494
#resizeObserver?: ResizeObserver = new ResizeObserver(() => {
9595
this.#checkOverflow();
9696
});

‎packages/components/card/.eslintrc.cjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
parserOptions: {
3+
tsconfigRootDir: __dirname,
4+
project: [
5+
'tsconfig.json'
6+
]
7+
}
8+
};

‎packages/components/card/custom-elements.json‎

Lines changed: 260 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,264 @@
11
{
22
"schemaVersion": "1.0.0",
33
"readme": "",
4-
"modules": []
4+
"modules": [
5+
{
6+
"kind": "javascript-module",
7+
"path": "index.ts",
8+
"declarations": [],
9+
"exports": [
10+
{
11+
"kind": "js",
12+
"name": "*",
13+
"declaration": {
14+
"name": "*",
15+
"package": "./src/card.js"
16+
}
17+
}
18+
]
19+
},
20+
{
21+
"kind": "javascript-module",
22+
"path": "register.ts",
23+
"declarations": [],
24+
"exports": [
25+
{
26+
"kind": "custom-element-definition",
27+
"name": "sl-card",
28+
"declaration": {
29+
"name": "Card",
30+
"module": "/src/card.js"
31+
}
32+
}
33+
]
34+
},
35+
{
36+
"kind": "javascript-module",
37+
"path": "src/card.ts",
38+
"declarations": [
39+
{
40+
"kind": "class",
41+
"description": "Use cards to display media and text in a compact, appealing way.\n\n```html\n<sl-card></sl-card>\n```",
42+
"name": "Card",
43+
"cssProperties": [
44+
{
45+
"description": "The aspectratio of the media container (default is 4/3). By default this ratio is always maintained, and will cause the media to become smaller when there isn't sufficient space for the full width.",
46+
"name": "--sl-card-media-aspect-ratio"
47+
},
48+
{
49+
"description": "The width of the media in relation to the text. Can be set in pixels or `fr`.",
50+
"name": "--sl-card-media-width"
51+
},
52+
{
53+
"description": "X-Focuspoint of the media; this is taken as the center when the media is cropped.",
54+
"name": "--sl-card-media-x"
55+
},
56+
{
57+
"description": "Y-Focuspoint of the media; this is taken as the center when the media is cropped.",
58+
"name": "--sl-card-media-y"
59+
},
60+
{
61+
"description": "When card is smaller than this size it will switch from horizontal (when set) to vertical layout.",
62+
"name": "--sl-card-orientation-breakpoint"
63+
},
64+
{
65+
"description": "Set this to 100% when the aspectratio of the media doesn't matter and you want it to fill the full height of the card.",
66+
"name": "--sl-card-stretch-image"
67+
},
68+
{
69+
"description": "The width of the text in relation to the media. Can be set in pixels (not recommended) or `fr`.",
70+
"name": "--sl-card-text-width"
71+
}
72+
],
73+
"slots": [
74+
{
75+
"description": "Title of the card",
76+
"name": "default"
77+
},
78+
{
79+
"description": "Media, this can be an image or video",
80+
"name": "media"
81+
},
82+
{
83+
"description": "Subtitle or badges",
84+
"name": "header"
85+
},
86+
{
87+
"description": "Body text of the card",
88+
"name": "body"
89+
},
90+
{
91+
"description": "Icon button for actions on the card.",
92+
"name": "actions"
93+
}
94+
],
95+
"members": [
96+
{
97+
"kind": "field",
98+
"name": "explicitHeight",
99+
"type": {
100+
"text": "boolean | undefined"
101+
},
102+
"description": "When the height of the card is set (or constrained) by its container (for example in a grid with fixed rows) this needs to be set to be added in order to assure the correct rendering",
103+
"attribute": "explicit-height"
104+
},
105+
{
106+
"kind": "field",
107+
"name": "height",
108+
"type": {
109+
"text": "CardHeightOptions"
110+
},
111+
"default": "'fixed'",
112+
"description": "When the height is `fixed` the image will determine the height of the card, when it is `flex` the height of the text will determine the height of the card.",
113+
"attribute": "height",
114+
"reflects": true
115+
},
116+
{
117+
"kind": "field",
118+
"name": "mediaPosition",
119+
"type": {
120+
"text": "CardMediaPosition"
121+
},
122+
"default": "'start'",
123+
"description": "Show the media at the start or at the end.",
124+
"attribute": "media-position",
125+
"reflects": true
126+
},
127+
{
128+
"kind": "field",
129+
"name": "orientation",
130+
"type": {
131+
"text": "CardOrientation"
132+
},
133+
"default": "'horizontal'",
134+
"description": "The position of the media in relation to the text",
135+
"attribute": "orientation",
136+
"reflects": true
137+
},
138+
{
139+
"kind": "field",
140+
"name": "padding",
141+
"type": {
142+
"text": "boolean"
143+
},
144+
"default": "false",
145+
"description": "Indicates whether there is a padding around the media. Recommended to set to true when the `--sl-card-stretch-image` isn't set to 100%",
146+
"attribute": "padding",
147+
"reflects": true
148+
}
149+
],
150+
"attributes": [
151+
{
152+
"name": "padding",
153+
"type": {
154+
"text": "boolean"
155+
},
156+
"default": "false",
157+
"description": "Indicates whether there is a padding around the media. Recommended to set to true when the `--sl-card-stretch-image` isn't set to 100%",
158+
"fieldName": "padding"
159+
},
160+
{
161+
"name": "explicit-height",
162+
"type": {
163+
"text": "boolean | undefined"
164+
},
165+
"description": "When the height of the card is set (or constrained) by its container (for example in a grid with fixed rows) this needs to be set to be added in order to assure the correct rendering",
166+
"fieldName": "explicitHeight"
167+
},
168+
{
169+
"name": "height",
170+
"type": {
171+
"text": "CardHeightOptions"
172+
},
173+
"default": "'fixed'",
174+
"description": "When the height is `fixed` the image will determine the height of the card, when it is `flex` the height of the text will determine the height of the card.",
175+
"fieldName": "height"
176+
},
177+
{
178+
"name": "orientation",
179+
"type": {
180+
"text": "CardOrientation"
181+
},
182+
"default": "'horizontal'",
183+
"description": "The position of the media in relation to the text",
184+
"fieldName": "orientation"
185+
},
186+
{
187+
"name": "media-position",
188+
"type": {
189+
"text": "CardMediaPosition"
190+
},
191+
"default": "'start'",
192+
"description": "Show the media at the start or at the end.",
193+
"fieldName": "mediaPosition"
194+
}
195+
],
196+
"superclass": {
197+
"name": "LitElement",
198+
"package": "lit"
199+
},
200+
"tagName": "sl-card",
201+
"customElement": true,
202+
"methods": [
203+
{
204+
"kind": "method",
205+
"name": "#setIcon",
206+
"return": {
207+
"type": {
208+
"text": "void"
209+
}
210+
}
211+
},
212+
{
213+
"kind": "method",
214+
"name": "#setOrientation",
215+
"return": {
216+
"type": {
217+
"text": "void"
218+
}
219+
}
220+
}
221+
],
222+
"fields": [
223+
{
224+
"kind": "field",
225+
"name": "#resizeObserver",
226+
"privacy": "private",
227+
"type": {
228+
"text": "ResizeObserver | undefined"
229+
},
230+
"default": "new ResizeObserver(() => {\n this.#setOrientation();\n })",
231+
"description": "Observe the grid width."
232+
},
233+
{
234+
"kind": "field",
235+
"name": "media",
236+
"type": {
237+
"text": "HTMLElement[] | undefined"
238+
},
239+
"privacy": "private"
240+
},
241+
{
242+
"kind": "field",
243+
"name": "icon",
244+
"type": {
245+
"text": "HTMLElement[] | undefined"
246+
},
247+
"privacy": "private"
248+
}
249+
]
250+
}
251+
],
252+
"exports": [
253+
{
254+
"kind": "js",
255+
"name": "Card",
256+
"declaration": {
257+
"name": "Card",
258+
"module": "src/card.ts"
259+
}
260+
}
261+
]
262+
}
263+
]
5264
}

‎packages/components/card/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './src/card.js';

‎packages/components/card/package.json‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "@sl-design-system/card",
3+
"version": "0.0.1",
4+
"description": "Card component for the SL Design System",
5+
"license": "Apache-2.0",
6+
"publishConfig": {
7+
"registry": "https://npm.pkg.github.com"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/sl-design-system/components.git",
12+
"directory": "packages/components/card"
13+
},
14+
"homepage": "https://sanomalearning.design/components/card",
15+
"bugs": {
16+
"url": "https://github.com/sl-design-system/components/issues"
17+
},
18+
"type": "module",
19+
"main": "./index.js",
20+
"module": "./index.js",
21+
"types": "./index.d.ts",
22+
"customElements": "custom-elements.json",
23+
"exports": {
24+
".": "./index.js",
25+
"./package.json": "./package.json",
26+
"./register.js": "./register.js"
27+
},
28+
"files": [
29+
"**/*.d.ts",
30+
"**/*.js",
31+
"**/*.js.map",
32+
"custom-elements.json"
33+
],
34+
"sideEffects": [
35+
"register.js"
36+
],
37+
"scripts": {
38+
"test": "echo \"Error: run tests from monorepo root.\" && exit 1"
39+
},
40+
"dependencies": {
41+
"lit": "^3.1.0"
42+
}
43+
}

‎packages/components/card/register.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Card } from './src/card.js';
2+
3+
customElements.define('sl-card', Card);
4+
5+
declare global {
6+
interface HTMLElementTagNameMap {
7+
'sl-card': Card;
8+
}
9+
}

0 commit comments

Comments
 (0)