@fluid-topics/ftds-notice 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system notice component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-notice
+yarn add @fluid-topics/ftds-notice
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-notice"
+
+function render() {
+    return html` <ftds-notice foo="bar"></ftds-notice> `
+}
+```

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,5 @@
+import { FtdsNotice } from "./ftds-notice";
+declare const _default: {
+    "ftds-notice": typeof FtdsNotice;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,4 @@
+import { FtdsNotice } from "./ftds-notice";
+export default {
+    "ftds-notice": FtdsNotice,
+};

package/build/ftds-notice.d.ts

@@ -0,0 +1,20 @@
+import { FtdsTypographyVariants } from "@fluid-topics/ftds-typography";
+import { FtdsNoticeProperties, FtdsNoticeVariant } from "./ftds-notice.properties";
+import { PropertyValues } from "lit";
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+import { DesignSystemFamily, ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
+export declare class FtdsNotice extends FtdsBase implements FtdsNoticeProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    collapsible: boolean;
+    dense: boolean;
+    icon?: FtdsIcons;
+    iconVariant?: FtdsIconVariants;
+    family: DesignSystemFamily;
+    variant?: FtdsNoticeVariant;
+    private iconByFamily;
+    private iconVariantByFamily;
+    protected willUpdate(props: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    get typographyVariant(): FtdsTypographyVariants;
+}

package/build/ftds-notice.js

@@ -0,0 +1,98 @@
+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 { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { FtdsNoticeVariant, } from "./ftds-notice.properties";
+import { styles } from "./ftds-notice.styles";
+import { property } from "lit/decorators.js";
+import { html, } from "lit";
+import { FtdsIcon, FtdsIcons, FtdsIconVariants, } from "@fluid-topics/ftds-icon";
+import { classMap } from "lit/directives/class-map.js";
+import { DesignSystemFamily, FtdsBase, } from "@fluid-topics/ft-wc-utils";
+export class FtdsNotice extends FtdsBase {
+    constructor() {
+        super(...arguments);
+        this.collapsible = false;
+        this.dense = false;
+        // Override default value
+        this.family = DesignSystemFamily.info;
+        this.iconByFamily = {
+            [DesignSystemFamily.error]: FtdsIcons.XMARK,
+            [DesignSystemFamily.info]: FtdsIcons.CIRCLE_INFO,
+            [DesignSystemFamily.success]: FtdsIcons.CIRCLE_CHECK,
+            [DesignSystemFamily.warning]: FtdsIcons.TRIANGLE_EXCLAMATION,
+        };
+        this.iconVariantByFamily = {
+            [DesignSystemFamily.error]: FtdsIconVariants.regular,
+            [DesignSystemFamily.info]: FtdsIconVariants.regular,
+            [DesignSystemFamily.success]: FtdsIconVariants.solid,
+            [DesignSystemFamily.warning]: FtdsIconVariants.solid,
+        };
+    }
+    willUpdate(props) {
+        super.willUpdate(props);
+        if (props.has("variant") && this.variant) {
+            switch (this.variant) {
+                case FtdsNoticeVariant.info:
+                    this.family = DesignSystemFamily.info;
+                    break;
+                case FtdsNoticeVariant.success:
+                    this.family = DesignSystemFamily.success;
+                    break;
+                case FtdsNoticeVariant.warning:
+                    this.family = DesignSystemFamily.warning;
+                    break;
+                case FtdsNoticeVariant.error:
+                    this.family = DesignSystemFamily.error;
+                    break;
+            }
+        }
+    }
+    render() {
+        const classes = {
+            "ftds-notice--collapsible": this.collapsible,
+            "ftds-notice--dense": this.dense,
+            ...this.getDesignSystemBaseClasses(),
+        };
+        return html `
+            <div class="${classMap(classes)}" part="container">
+                <div part="icon">
+                    <ftds-icon icon="${this.icon || this.iconByFamily[this.family]}"
+                               variant="${this.iconVariantByFamily || this.iconVariantByFamily[this.family]}"></ftds-icon>
+                </div>
+                <ftds-typography part="label" variant="${this.typographyVariant}">
+                    <slot></slot>
+                </ftds-typography>
+            </div>
+        `;
+    }
+    get typographyVariant() {
+        return this.dense ? FtdsTypographyVariants.caption1medium : FtdsTypographyVariants.body2regular;
+    }
+}
+FtdsNotice.elementDefinitions = {
+    "ftds-icon": FtdsIcon,
+    "ftds-typography": FtdsTypography,
+};
+FtdsNotice.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], FtdsNotice.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsNotice.prototype, "dense", void 0);
+__decorate([
+    property({ type: String })
+], FtdsNotice.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], FtdsNotice.prototype, "iconVariant", void 0);
+__decorate([
+    property()
+], FtdsNotice.prototype, "family", void 0);
+__decorate([
+    property()
+], FtdsNotice.prototype, "variant", void 0);