@fluid-topics/ftds-event-card 2.2.2

package/README.md

@@ -0,0 +1,26 @@
+The DS component for displaying an event card.
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-event-card
+yarn add @fluid-topics/ftds-event-card
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-event-card/define"
+
+function render() {
+    return html`
+        <ftds-event-card 
+                primary
+                color="#5537E8"
+                icon="BOOKS">
+            Some content...
+        </ftds-event-card>
+    `
+}
+```

package/build/define.d.ts

@@ -0,0 +1 @@
+export {};

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,9 @@
+import { FtdsEventCard } from "./ftds-event-card";
+import { FtdsEventCardTraceContent } from "./ftds-event-card-trace-content";
+import { FtdsEventCardGroup } from "./ftds-event-card-group";
+declare const _default: {
+    "ftds-event-card": typeof FtdsEventCard;
+    "ftds-event-card-group": typeof FtdsEventCardGroup;
+    "ftds-event-card-trace-content": typeof FtdsEventCardTraceContent;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,8 @@
+import { FtdsEventCard } from "./ftds-event-card";
+import { FtdsEventCardTraceContent } from "./ftds-event-card-trace-content";
+import { FtdsEventCardGroup } from "./ftds-event-card-group";
+export default {
+    "ftds-event-card": FtdsEventCard,
+    "ftds-event-card-group": FtdsEventCardGroup,
+    "ftds-event-card-trace-content": FtdsEventCardTraceContent,
+};

package/build/ftds-event-card-group.d.ts

@@ -0,0 +1,12 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsEventCardGroupProperties } from "./ftds-event-card-group.properties";
+export declare class FtdsEventCardGroup extends FtLitElement implements FtdsEventCardGroupProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    closedText: string;
+    openText: string;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderChildrenSlot;
+}

package/build/ftds-event-card-group.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { DesignSystemSize, FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { property } from "lit/decorators.js";
+import { html } from "lit";
+import { FtdsCollapsible } from "@fluid-topics/ftds-collapsible";
+import { ftdsEventCardGroupStyles } from "./ftds-event-card-group.styles";
+import { when } from "lit/directives/when.js";
+export class FtdsEventCardGroup extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.collapsible = false;
+        this.collapsed = false;
+        this.closedText = "";
+        this.openText = "";
+    }
+    render() {
+        return html `
+            <div class="container">
+                <slot name="parent"></slot>
+                
+                <div class="body">
+                    ${when(this.collapsible, () => html `
+                                <ftds-collapsible
+                                        tertiary
+                                        size="${DesignSystemSize.small}"
+                                        ?open=${!this.collapsed}
+                                        openText="${this.openText}"
+                                        closedText="${this.closedText}"
+                                >
+                                    ${this.renderChildrenSlot()}
+                                </ftds-collapsible>
+                            `, () => this.renderChildrenSlot())}
+                </div>
+            </div>
+        `;
+    }
+    renderChildrenSlot() {
+        return html `
+            <div class="children">
+                <slot></slot>
+            </div>
+        `;
+    }
+}
+FtdsEventCardGroup.elementDefinitions = {
+    "ftds-collapsible": FtdsCollapsible,
+};
+FtdsEventCardGroup.styles = ftdsEventCardGroupStyles;
+__decorate([
+    property({ type: Boolean })
+], FtdsEventCardGroup.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsEventCardGroup.prototype, "collapsed", void 0);
+__decorate([
+    property()
+], FtdsEventCardGroup.prototype, "closedText", void 0);
+__decorate([
+    property()
+], FtdsEventCardGroup.prototype, "openText", void 0);

package/build/ftds-event-card-group.properties.d.ts

@@ -0,0 +1,6 @@
+export interface FtdsEventCardGroupProperties {
+    closedText: string;
+    openText: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+}

package/build/ftds-event-card-group.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ftds-event-card-group.styles.d.ts

@@ -0,0 +1 @@
+export declare const ftdsEventCardGroupStyles: import("lit").CSSResult;

package/build/ftds-event-card-group.styles.js

@@ -0,0 +1,19 @@
+import { css } from "lit";
+import { foundation } from "@fluid-topics/ft-wc-utils";
+// language=CSS
+export const ftdsEventCardGroupStyles = css `
+    .body {
+        margin-left: ${foundation.spacing6};
+    }
+
+    .children {
+        display: flex;
+        flex-direction: column;
+        gap: ${foundation.spacing3};
+        margin-top: ${foundation.spacing3};
+    }
+
+    :host([collapsible]) .children {
+        margin-top: 0;
+    }
+`;

package/build/ftds-event-card-trace-content.d.ts

@@ -0,0 +1,22 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsEventCardTraceContentProperties } from "./ftds-event-card-trace-content.properties";
+export declare class FtdsEventCardTraceContent extends FtLitElement implements FtdsEventCardTraceContentProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    headerText?: string;
+    headerBreadcrumb?: string[];
+    breadcrumbHref?: string;
+    body?: string;
+    chips?: string[];
+    breadcrumbTruncateThreshold: number;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderTitle;
+    private renderBody;
+    private renderChips;
+    private renderBreadcrumb;
+    private renderSplitBreadcrumb;
+    private renderBreadcrumbItems;
+    private renderBreadcrumbLink;
+    private renderBreadcrumbLabel;
+    private renderSeparator;
+}

package/build/ftds-event-card-trace-content.js

@@ -0,0 +1,156 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { FtLitElement, numberProperty, splitBreadcrumbForMenu, } from "@fluid-topics/ft-wc-utils";
+import { html, nothing } from "lit";
+import { FtdsTypography, FtdsTypographyVariants } from "@fluid-topics/ftds-typography";
+import { property } from "lit/decorators.js";
+import { FtdsChip } from "@fluid-topics/ftds-chip";
+import { repeat } from "lit/directives/repeat.js";
+import { ftdsEventCardTraceContentStyles } from "./ftds-event-card-trace-content.styles";
+import { when } from "lit/directives/when.js";
+import { FtdsLink } from "@fluid-topics/ftds-link";
+export class FtdsEventCardTraceContent extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.breadcrumbTruncateThreshold = 4;
+    }
+    render() {
+        return html `
+            <div class="container">
+                ${this.renderTitle()}
+                ${this.renderBreadcrumb()}
+                ${this.renderBody()}
+                ${this.renderChips()}
+            </div>
+        `;
+    }
+    renderTitle() {
+        if (!this.headerText) {
+            return nothing;
+        }
+        return html `
+            <ftds-typography
+                    variant="${FtdsTypographyVariants.caption2medium}"
+                    class="header">
+                ${this.headerText}
+            </ftds-typography>
+        `;
+    }
+    renderBody() {
+        return html `
+            ${when(this.body, () => html `
+                        <ftds-typography
+                                variant="${FtdsTypographyVariants.caption1medium}"
+                                class="body">
+                            ${this.body}
+                        </ftds-typography>
+                    `)}
+            <slot></slot>
+        `;
+    }
+    renderChips() {
+        if (!this.chips || this.chips.length === 0) {
+            return nothing;
+        }
+        return html `
+            <div class="chips">
+                ${repeat(this.chips, (chip) => html `
+                            <ftds-chip>${chip}</ftds-chip>`)}
+            </div>
+        `;
+    }
+    renderBreadcrumb() {
+        if (!this.headerBreadcrumb) {
+            return nothing;
+        }
+        return html `
+            <div class="breadcrumb-wrapper">
+                <div class="breadcrumb">
+                    ${this.renderSplitBreadcrumb(this.headerBreadcrumb)}
+                </div>
+                <slot name="breadcrumb-action"></slot>
+            </div>
+        `;
+    }
+    renderSplitBreadcrumb(breadcrumb) {
+        if (breadcrumb.length < this.breadcrumbTruncateThreshold) {
+            return this.renderBreadcrumbItems(breadcrumb, true);
+        }
+        const splitBreadcrumb = splitBreadcrumbForMenu(breadcrumb, 1);
+        return html `
+            ${this.renderBreadcrumbItems(splitBreadcrumb.beforeMenu, false)}
+            ${splitBreadcrumb.beforeMenu.length > 0 ? this.renderSeparator() : nothing}
+            ${when(splitBreadcrumb.inMenu.length > 0, () => html `
+                        ${this.renderBreadcrumbLabel("...")}
+                        ${this.renderSeparator()}`)}
+            ${this.renderBreadcrumbItems(splitBreadcrumb.afterMenu, true)}
+        `;
+    }
+    renderBreadcrumbItems(breadcrumbItems, containsLastItem) {
+        return repeat(breadcrumbItems, (breadcrumbItem, index) => {
+            const isLastItem = index === breadcrumbItems.length - 1;
+            return html `
+                    ${isLastItem && containsLastItem
+                ? this.renderBreadcrumbLink(breadcrumbItem)
+                : this.renderBreadcrumbLabel(breadcrumbItem)}
+                    ${isLastItem ? nothing : this.renderSeparator()}`;
+        });
+    }
+    renderBreadcrumbLink(breadcrumbItem) {
+        return html `
+            <ftds-link href="${this.breadcrumbHref}"
+                       target="_blank" underlined
+                       class="breadcrumb-element"
+                       variant="${FtdsTypographyVariants.caption1semibold}">
+                ${breadcrumbItem}
+            </ftds-link>
+        `;
+    }
+    renderBreadcrumbLabel(breadcrumbItem) {
+        return html `
+            <ftds-typography
+                    class="breadcrumb-element"
+                    variant="${FtdsTypographyVariants.caption1semibold}">
+                ${breadcrumbItem}
+            </ftds-typography>
+        `;
+    }
+    renderSeparator() {
+        return html `
+            <ftds-typography
+                    class="breadcrumb-element"
+                    aria-hidden="true"
+                    variant="${FtdsTypographyVariants.caption1semibold}">
+                &gt;
+            </ftds-typography>
+        `;
+    }
+}
+FtdsEventCardTraceContent.elementDefinitions = {
+    "ftds-chip": FtdsChip,
+    "ftds-link": FtdsLink,
+    "ftds-typography": FtdsTypography,
+};
+FtdsEventCardTraceContent.styles = ftdsEventCardTraceContentStyles;
+__decorate([
+    property()
+], FtdsEventCardTraceContent.prototype, "headerText", void 0);
+__decorate([
+    property({ attribute: false })
+], FtdsEventCardTraceContent.prototype, "headerBreadcrumb", void 0);
+__decorate([
+    property()
+], FtdsEventCardTraceContent.prototype, "breadcrumbHref", void 0);
+__decorate([
+    property()
+], FtdsEventCardTraceContent.prototype, "body", void 0);
+__decorate([
+    property({ attribute: false })
+], FtdsEventCardTraceContent.prototype, "chips", void 0);
+__decorate([
+    numberProperty()
+], FtdsEventCardTraceContent.prototype, "breadcrumbTruncateThreshold", void 0);

package/build/ftds-event-card-trace-content.properties.d.ts

@@ -0,0 +1,8 @@
+export interface FtdsEventCardTraceContentProperties {
+    headerText?: string;
+    headerBreadcrumb?: string[];
+    breadcrumbHref?: string;
+    breadcrumbTruncateThreshold?: number;
+    body?: string;
+    chips?: string[];
+}

package/build/ftds-event-card-trace-content.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ftds-event-card-trace-content.styles.d.ts

@@ -0,0 +1 @@
+export declare const ftdsEventCardTraceContentStyles: import("lit").CSSResult;

package/build/ftds-event-card-trace-content.styles.js

@@ -0,0 +1,37 @@
+import { css } from "lit";
+import { foundation, semantic } from "@fluid-topics/ft-wc-utils";
+// language=CSS
+export const ftdsEventCardTraceContentStyles = css `
+    .container {
+        display: flex;
+        flex-direction: column;
+        gap: ${foundation.spacing1};
+    }
+
+    .header {
+        color: ${semantic.contentGlobalSubtle};
+    }
+
+    .breadcrumb-wrapper {
+        display: flex;
+    }
+
+    .breadcrumb {
+        flex-grow: 1;
+    }
+
+    .breadcrumb-element {
+        color: ${semantic.contentGlobalPrimary};
+    }
+
+    .body {
+        color: ${semantic.contentGlobalSecondary};
+    }
+
+    .chips {
+        display: flex;
+        margin-top: ${foundation.spacing1};
+        gap: ${foundation.spacing1};
+        flex-wrap: wrap;
+    }
+`;

package/build/ftds-event-card.d.ts

@@ -0,0 +1,13 @@
+import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsEventCardProperties } from "./ftds-event-card.properties";
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+export declare class FtdsEventCard extends FtLitElement implements FtdsEventCardProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    color?: string | FtCssVariable;
+    icon?: FtdsIcons;
+    iconVariant?: FtdsIconVariants;
+    primary: boolean;
+    secondary: boolean;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/build/ftds-event-card.js

@@ -0,0 +1,61 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from "lit";
+import { eventCard, FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { ftdsEventCardStyles } from "./ftds-event-card.styles";
+import { FtdsIcon } from "@fluid-topics/ftds-icon";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+export class FtdsEventCard extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.primary = true;
+        this.secondary = false;
+    }
+    render() {
+        const classes = {
+            "primary": this.primary && !this.secondary,
+            "secondary": this.secondary,
+        };
+        const styles = {
+            [eventCard.backgroundColor.name]: this.color ? this.color.toString() : undefined,
+        };
+        return html `
+            <div class="container" style="${styleMap(styles)}">
+                <div class="icon ${classMap(classes)}">
+                    <ftds-icon icon="${this.icon}"
+                               variant="${this.iconVariant}">
+                    </ftds-icon>
+                </div>
+
+                <div class="content">
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+    }
+}
+FtdsEventCard.elementDefinitions = {
+    "ftds-icon": FtdsIcon,
+};
+FtdsEventCard.styles = ftdsEventCardStyles;
+__decorate([
+    property()
+], FtdsEventCard.prototype, "color", void 0);
+__decorate([
+    property()
+], FtdsEventCard.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtdsEventCard.prototype, "iconVariant", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsEventCard.prototype, "primary", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsEventCard.prototype, "secondary", void 0);