@uh-design-system/component-library 0.5.2 → 0.6.0

package/dist/collection/components/01-base-components/ds-card/ds-card.js

@@ -0,0 +1,303 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+import { slugifyText } from "../../../utils/utils";
+export class DsCard {
+    dsVariant = 'filled';
+    dsHeading;
+    dsHeadingLevel = 3;
+    dsDescription;
+    dsUrl;
+    dsUrlTarget = '_blank';
+    dsImageUrl;
+    dsImageAlt = '';
+    dsEyebrow;
+    dsSubtitle;
+    dsShowArrow = true;
+    el;
+    handleClick(e) {
+        const clickedLink = e.composedPath().find((el) => el.tagName === 'A');
+        if (!clickedLink && this.dsUrl) {
+            const headingLink = this.el.shadowRoot?.querySelector('a.ds-card__heading__link');
+            if (headingLink) {
+                headingLink.click();
+            }
+        }
+    }
+    handleKeydown(e) {
+        if ((e.key === 'Enter') && this.dsUrl) {
+            e.preventDefault();
+            const headingLink = this.el.shadowRoot?.querySelector('a.ds-card__heading__link');
+            if (headingLink) {
+                headingLink.click();
+            }
+        }
+    }
+    render() {
+        const classes = classNames('ds-card', `ds-card--${this.dsVariant}`, {
+            [`ds-card--link`]: Boolean(this.dsUrl),
+        });
+        const HeadingTag = `h${this.dsHeadingLevel}`;
+        const randomId = Math.random().toString(36).substring(2, 9);
+        const headingId = `${slugifyText(this.dsHeading)}-${randomId}`;
+        return (h("article", { key: '39fa69acafabb5201adbfe5f361bbb6a82fbad66', "aria-labelledby": headingId, class: classes, onClick: (e) => this.handleClick(e), onKeyDown: (e) => this.handleKeydown(e) }, this.dsImageUrl && (h("div", { key: '47207c839c55179082f3b8060a93ab4622fefa08', class: "ds-card__image-container" }, h("img", { key: 'df83bfd1a75845752f746235b12df453de51ee04', class: "ds-card__image", src: this.dsImageUrl, alt: this.dsImageAlt }))), h("div", { key: 'c2e3f31bfc20d8b97d6c7485e348b60c84d9f9ae', class: "ds-card__content" }, h("div", { key: '70612da3145bf79f0a1e07c7b3cddbb309247286', class: "ds-card__content--top" }, h("div", { key: '0813a2eee2575371b561ce260215c0fc8175e4a0', class: "ds-card__content--top__text" }, this.dsUrl ?
+            h(HeadingTag, { class: "ds-card__heading", id: headingId }, h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: "ds-card__heading__link" }, this.dsHeading))
+            :
+                h(HeadingTag, { class: "ds-card__heading" }, this.dsHeading), this.dsEyebrow && h("div", { key: '7b93368c780b3df3fd8634f65af2589810ac9953', class: "ds-card__eyebrow" }, this.dsEyebrow), this.dsSubtitle && h("div", { key: 'edc5f5a6e05b1c901a69a2ff6ccde88b7a1f9c57', class: "ds-card__subtitle" }, this.dsSubtitle)), (this.dsUrl && this.dsShowArrow) && h("ds-icon", { key: '38fdc6581093d4ae820100b61c61d94b92690646', "ds-name": "arrow_forward" })), h("div", { key: '2b068303f4880827800ec6dad5eb86bc8365bda5', class: "ds-card__content--bottom" }, this.dsDescription && h("p", { key: 'e62f55d389866099320ffc28846adff926e204d2', class: "ds-card__description" }, this.dsDescription), h("div", { key: '202aeba23c27b074dffdddbe7e6d5b59ab8e90eb', class: "ds-card__slot--content" }, h("slot", { key: '76c41243b723e124d91f5ac7b33c9f6baa99ae27', name: "content" })), h("div", { key: 'f728bd9c984773f930972181694ebb67bdad5cf6', class: "ds-card__slot--footer" }, h("slot", { key: '8ea95152f2a4fe8ff45f331c371de2d93e8e45fa', name: "footer" }))))));
+    }
+    static get is() { return "ds-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsVariant": {
+                "type": "string",
+                "attribute": "ds-variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "DsCardVariant",
+                    "resolved": "\"filled\" | \"outlined\"",
+                    "references": {
+                        "DsCardVariant": {
+                            "location": "global",
+                            "id": "global::DsCardVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant of the card, filled or outlined, defaults to filled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'filled'"
+            },
+            "dsHeading": {
+                "type": "string",
+                "attribute": "ds-heading",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The main heading text (required)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsHeadingLevel": {
+                "type": "number",
+                "attribute": "ds-heading-level",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading level, defaults to 3"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "3"
+            },
+            "dsDescription": {
+                "type": "string",
+                "attribute": "ds-description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional description text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsUrl": {
+                "type": "string",
+                "attribute": "ds-url",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional URL to use card as a link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsUrlTarget": {
+                "type": "string",
+                "attribute": "ds-url-target",
+                "mutable": false,
+                "complexType": {
+                    "original": "DsCardUrlTarget",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | \"_unfencedTop\"",
+                    "references": {
+                        "DsCardUrlTarget": {
+                            "location": "global",
+                            "id": "global::DsCardUrlTarget"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional URL target, if URL should open to new window or not, default _blank"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'_blank'"
+            },
+            "dsImageUrl": {
+                "type": "string",
+                "attribute": "ds-image-url",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsImageAlt": {
+                "type": "string",
+                "attribute": "ds-image-alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional image alt text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "dsEyebrow": {
+                "type": "string",
+                "attribute": "ds-eyebrow",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional eyebrow text displayed above the heading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsSubtitle": {
+                "type": "string",
+                "attribute": "ds-subtitle",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional subtitle text displayed below the heading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsShowArrow": {
+                "type": "boolean",
+                "attribute": "ds-show-arrow",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional to show arrow when card is a link, defaults to true"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/01-base-components/ds-card/stories/ds-card.examples.stories.js

@@ -0,0 +1,92 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+const meta = {
+    title: 'Base Components/Card/Examples',
+    component: 'ds-card',
+    render: (args) => {
+        return html `
+      <ds-card
+        ds-heading=${args.dsHeading}
+        ds-description=${args.dsDescription}
+        ds-image-url=${ifDefined(args.dsImageUrl)}
+        ds-eyebrow=${ifDefined(args.dsEyebrow)}
+        ds-subtitle=${ifDefined(args.dsSubtitle)}
+        ds-url=${ifDefined(args.dsUrl)}
+      >
+      </ds-card>
+    `;
+    }
+};
+export default meta;
+export const AsLink = {
+    args: {
+        dsHeading: 'Card Heading',
+        dsDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        dsUrl: 'https://www.helsinki.fi',
+    }
+};
+export const WithSlotContent = {
+    args: {
+        dsHeading: 'Card Heading',
+        contentSlot: ``,
+        footerSlot: `
+      <ds-accordion ds-hide-bottom-border ds-variant="compact">
+        <div slot="header">Accordion heading</div>
+        <div slot="content">Accordion content</div>
+      </ds-accordion>
+    `,
+    },
+    render: (args) => html `
+    <ds-card
+      ds-heading=${args.dsHeading}
+      ds-description=${args.dsDescription}
+      ds-image-url=${ifDefined(args.dsImageUrl)}
+      ds-eyebrow=${ifDefined(args.dsEyebrow)}
+      ds-subtitle=${ifDefined(args.dsSubtitle)}
+      ds-url=${ifDefined(args.dsUrl)}
+    >
+      <div slot="content">${unsafeHTML(args.contentSlot)}</div>
+      <div slot="footer">${unsafeHTML(args.footerSlot)}</div>
+    </ds-card>
+  `,
+};
+export const CourseExample = {
+    render: () => html `
+    <style>
+      .ds-cd-ct {max-width: 450px}
+      .ds-slot {padding: .5rem 1rem}
+    </style>
+    <div class="ds-cd-ct">
+      <ds-card
+        ds-variant="filled"
+        ds-heading="Eliökunnan evoluutio"
+        ds-subtitle="BIO-101 · 5 op"
+        ds-heading-level="2"
+      >
+        <div slot="content" style="padding: 0 1rem 1rem">Ilmoittautuminen käynnissä</div>
+        <div slot="footer">
+          <ds-accordion ds-variant="compact" ds-hide-bottom-border ds-heading-level="3" >
+            <div slot="header">Lisätietoa</div>
+            <div slot="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+              <h3 class="ds-heading--small">Ajankohdat</h3>
+              <ds-card ds-variant="outlined" ds-heading="Eliökunnan Evoluutio" ds-subtitle="75,00 € · 5 op · Monimuoto-opetus" ds-url="#">
+                <div slot="content" class="ds-slot"><span class="ds-text--xs-regular">Ilmoittautuminen käynnissä</span> </br> 10.2.2025 – 10.3.2025</div>
+                <div slot="footer" class="ds-slot"><span class="ds-text--xs-regular">Opetusaika</span> </br> 10.2.2025 – 10.3.2025</div>
+              </ds-card>
+              <ds-card ds-variant="outlined" ds-heading="Eliökunnan Evoluutio" ds-subtitle="75,00 € · 5 op · Monimuoto-opetus" ds-url="#">
+                <div slot="content" class="ds-slot"><span class="ds-text--xs-regular">Ilmoittautuminen käynnissä</span> </br> 10.2.2025 – 10.3.2025</div>
+                <div slot="footer" class="ds-slot"><span class="ds-text--xs-regular">Opetusaika</span> </br> 10.2.2025 – 10.3.2025</div>
+              </ds-card>
+              <ds-card ds-variant="outlined" ds-heading="Eliökunnan Evoluutio" ds-subtitle="75,00 € · 5 op · Monimuoto-opetus" ds-url="#">
+                <div slot="content" class="ds-slot"><span class="ds-text--xs-regular">Ilmoittautuminen käynnissä</span> </br> 10.2.2025 – 10.3.2025</div>
+                <div slot="footer" class="ds-slot"><span class="ds-text--xs-regular">Opetusaika</span> </br> 10.2.2025 – 10.3.2025</div>
+              </ds-card>
+            </div>
+          </ds-accordion>
+        </div>
+      </ds-card>
+    </div>
+  `,
+};

package/dist/collection/components/01-base-components/ds-card/stories/ds-card.features.stories.js

@@ -0,0 +1,66 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+const meta = {
+    title: 'Base Components/Card/Features',
+    component: 'ds-card',
+};
+export default meta;
+export const Outlined = {
+    args: {
+        dsHeading: 'Card Heading',
+        dsVariant: 'outlined',
+        dsDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    }
+};
+export const Filled = {
+    args: {
+        dsHeading: 'Card Heading',
+        dsVariant: 'filled',
+        dsDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    }
+};
+export const WithSlotContent = {
+    args: {
+        dsHeading: 'Card Heading',
+        contentSlot: `
+      <div style="display: flex; flex-direction: column; margin: 1rem;">
+        <ds-link
+          ds-text="Click me"
+          ds-href="#"
+          ds-icon="arrow_forward"
+          ds-iconTitle="Arrow forward"
+          ds-variant="standalone"
+          ds-size="medium"
+        ></ds-link>
+        <ds-link
+          ds-text="No Click me!"
+          ds-href="#"
+          ds-icon="arrow_forward"
+          ds-iconTitle="Arrow forward"
+          ds-variant="standalone"
+          ds-size="medium"
+        ></ds-link>
+      </div>
+    `,
+        footerSlot: `
+      <ds-accordion ds-hide-bottom-border ds-variant="compact">
+        <div slot="header">Accordion heading</div>
+        <div slot="content">Accordion content</div>
+      </ds-accordion>
+    `,
+    },
+    render: (args) => html `
+    <ds-card
+      ds-heading=${args.dsHeading}
+      ds-description=${args.dsDescription}
+      ds-image-url=${ifDefined(args.dsImageUrl)}
+      ds-eyebrow=${ifDefined(args.dsEyebrow)}
+      ds-subtitle=${ifDefined(args.dsSubtitle)}
+      ds-url=${ifDefined(args.dsUrl)}
+    >
+      <div slot="content">${unsafeHTML(args.contentSlot)}</div>
+      <div slot="footer">${unsafeHTML(args.footerSlot)}</div>
+    </ds-card>
+  `,
+};

package/dist/collection/components/01-base-components/ds-card/stories/ds-card.stories.js

@@ -0,0 +1,71 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+const meta = {
+    title: 'Base Components/Card',
+    component: 'ds-card',
+    render: (args) => {
+        return html `
+      <ds-card
+        ds-variant=${ifDefined(args.dsVariant)}
+        ds-heading=${args.dsHeading}
+        ds-description=${ifDefined(args.dsDescription)}
+        ds-image-url=${ifDefined(args.dsImageUrl)}
+        ds-image-alt=${ifDefined(args.dsImageAlt)}
+        ds-eyebrow=${ifDefined(args.dsEyebrow)}
+        ds-subtitle=${ifDefined(args.dsSubtitle)}
+        ds-url=${ifDefined(args.dsUrl)}
+        ds-url-target=${ifDefined(args.dsUrlTarget)}
+        ds-show-arrow=${ifDefined(args.dsShowArrow)}
+      >
+      </ds-card>
+    `;
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        dsHeading: 'Card Heading',
+        dsDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    }
+};
+export const Playground = {
+    args: {
+        dsHeading: 'Interactive Card',
+        dsHeadingLevel: 3,
+        dsDescription: 'Edit this card using the controls below to see how it looks with different properties.',
+        dsImageUrl: 'assets/placeholder.svg',
+        dsImageAlt: 'Placeholder image',
+        dsEyebrow: 'Customizable',
+        dsSubtitle: 'Try different options',
+        dsUrl: 'https://www.helsinki.fi/fi',
+        contentSlot: `
+      <div style="margin: 1rem;">
+        This is content Slot
+      </div>
+    `,
+        footerSlot: `
+      <div style="margin: 1rem;">
+        This is footer slot
+      </div>
+    `,
+    },
+    render: (args) => html `
+    <ds-card
+      ds-variant=${ifDefined(args.dsVariant)}
+      ds-heading=${args.dsHeading}
+      ds-heading-level=${ifDefined(args.dsHeadingLevel)}
+      ds-description=${ifDefined(args.dsDescription)}
+      ds-image-url=${ifDefined(args.dsImageUrl)}
+      ds-image-alt=${ifDefined(args.dsImageAlt)}
+      ds-eyebrow=${ifDefined(args.dsEyebrow)}
+      ds-subtitle=${ifDefined(args.dsSubtitle)}
+      ds-url=${ifDefined(args.dsUrl)}
+      ds-url-target=${ifDefined(args.dsUrlTarget)}
+      ds-show-arrow=${ifDefined(args.dsShowArrow)}
+    >
+      <div slot="content">${unsafeHTML(args.contentSlot)}</div>
+      <div slot="footer">${unsafeHTML(args.footerSlot)}</div>
+    </ds-card>
+  `,
+};