@fluid-topics/ft-notice 1.3.28 → 1.3.29

package/build/ft-notice.properties.d.ts

@@ -1,3 +1,11 @@
+export declare enum FtNoticeFamily {
+    info = "info",
+    warning = "warning",
+    error = "error",
+    success = "success"
+}
 export interface FtNoticeProperties {
-    icon: string;
+    family: FtNoticeFamily;
+    dense: boolean;
+    icon?: string;
 }

package/build/ft-notice.properties.js

@@ -1 +1,7 @@
-export {};
+export var FtNoticeFamily;
+(function (FtNoticeFamily) {
+    FtNoticeFamily["info"] = "info";
+    FtNoticeFamily["warning"] = "warning";
+    FtNoticeFamily["error"] = "error";
+    FtNoticeFamily["success"] = "success";
+})(FtNoticeFamily || (FtNoticeFamily = {}));

package/build/ft-notice.styles.d.ts

@@ -2,5 +2,11 @@ export declare const FtNoticeCssVariables: {
     noticeColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     noticeIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    iconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    denseIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    infoColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    warningColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    errorColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    successColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult;

package/build/ft-notice.styles.js

@@ -1,10 +1,16 @@
-import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
 import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.styles";
 import { css } from "lit";
 export const FtNoticeCssVariables = {
     noticeColor: FtCssVariableFactory.extend("--ft-notice-color", "", designSystemVariables.colorPrimary),
     noticeIconColor: FtCssVariableFactory.extend("--ft-notice-icon-color", "", designSystemVariables.colorOnPrimary),
-    borderRadius: FtCssVariableFactory.external(designSystemVariables.borderRadiusS, "Design System")
+    borderRadius: FtCssVariableFactory.external(designSystemVariables.borderRadiusS, "Design System"),
+    iconSize: FtCssVariableFactory.create("--ft-notice-icon-size", "", "SIZE", "24px"),
+    denseIconSize: FtCssVariableFactory.create("--ft-notice-dense-icon-size", "", "SIZE", "16px"),
+    infoColor: FtCssVariableFactory.extend("--ft-notice-info-color", "", designSystemVariables.colorInfo),
+    warningColor: FtCssVariableFactory.extend("--ft-notice-warning-color", "", designSystemVariables.colorWarning),
+    errorColor: FtCssVariableFactory.extend("--ft-notice-error-color", "", designSystemVariables.colorError),
+    successColor: FtCssVariableFactory.extend("--ft-notice-success-color", "", designSystemVariables.colorSuccess),
 };
 // language=CSS
 export const styles = css `
@@ -15,7 +21,7 @@ export const styles = css `
     }
 
     ft-icon {
-        ${setVariable(FtIconCssVariables.size, "24px")};
+        ${FtIconCssVariables.size.set(FtNoticeCssVariables.iconSize)};
         padding: 0 8px;
         display: flex;
         align-self: center;
@@ -36,4 +42,93 @@ export const styles = css `
         border-bottom-right-radius: ${FtNoticeCssVariables.borderRadius};
         border: 1px solid ${FtNoticeCssVariables.noticeColor};
     }
+
+
+    .dense {
+        [part="icon"] {
+            background-color: transparent;
+            padding: 0;
+            color: ${FtNoticeCssVariables.noticeColor};
+        }
+
+        ft-icon {
+            padding: 0 4px 0 0;
+            ${FtIconCssVariables.size.set(FtNoticeCssVariables.denseIconSize)};
+            margin-top: 1px;
+        }
+
+        [part="label"] {
+            padding: 0;
+            border: none;
+            color: ${FtNoticeCssVariables.noticeColor};
+        }
+    }
+
+    .info {
+        [part="icon"] {
+            background-color: ${FtNoticeCssVariables.infoColor};
+        }
+
+        [part="label"] {
+            border-color: ${FtNoticeCssVariables.infoColor};
+        }
+
+        &.dense {
+            [part="icon"], [part="label"] {
+                background-color: transparent;
+                color: ${FtNoticeCssVariables.infoColor};
+            }
+        }
+    }
+
+    .warning {
+        [part="icon"] {
+            background-color: ${FtNoticeCssVariables.warningColor};
+        }
+
+        [part="label"] {
+            border-color: ${FtNoticeCssVariables.warningColor};
+        }
+
+        &.dense {
+            [part="icon"], [part="label"] {
+                background-color: transparent;
+                color: ${FtNoticeCssVariables.warningColor};
+            }
+        }
+    }
+
+    .error {
+        [part="icon"] {
+            background-color: ${FtNoticeCssVariables.errorColor};
+        }
+
+        [part="label"] {
+            border-color: ${FtNoticeCssVariables.errorColor};
+        }
+
+        &.dense {
+            [part="icon"], [part="label"] {
+                background-color: transparent;
+                color: ${FtNoticeCssVariables.errorColor};
+            }
+        }
+    }
+
+    .success {
+        [part="icon"] {
+            background-color: ${FtNoticeCssVariables.successColor};
+        }
+
+        [part="label"] {
+            border-color: ${FtNoticeCssVariables.successColor};
+        }
+
+        &.dense {
+            [part="icon"], [part="label"] {
+                background-color: transparent;
+                color: ${FtNoticeCssVariables.successColor};
+            }
+        }
+    }
 `;

package/build/ftds-notice.d.ts

@@ -1,15 +1,18 @@
-import { FtBaseNotice } from "./ft-base-notice";
 import { FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { FtdsNoticeProperties, FtdsNoticeVariant } from "./ftds-notice.properties";
 import { PropertyValues } from "lit";
-export declare class FtdsNotice extends FtBaseNotice implements FtdsNoticeProperties {
+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;
-    get typographyVariant(): FtTypographyVariants;
-    get noticeClasses(): Record<string, boolean>;
-    variant: FtdsNoticeVariant;
     collapsible: boolean;
     dense: boolean;
-    forcedIcon: string | undefined;
-    private iconByVariant;
-    protected update(props: PropertyValues): void;
+    icon?: string;
+    family: DesignSystemFamily;
+    variant?: FtdsNoticeVariant;
+    forcedIcon?: string;
+    private iconByFamily;
+    protected willUpdate(props: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    get typographyVariant(): FtTypographyVariants;
 }

package/build/ftds-notice.js

@@ -4,54 +4,91 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { FtBaseNotice } from "./ft-base-notice";
-import { FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { FtdsNoticeVariant } from "./ftds-notice.properties";
 import { dsStyles } from "./ftds-notice.styles";
 import { property } from "lit/decorators.js";
-import { FtIcons } from "@fluid-topics/ft-icon";
-class FtdsNotice extends FtBaseNotice {
+import { html } from "lit";
+import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
+import { classMap } from "lit/directives/class-map.js";
+import { DesignSystemFamily, FtdsBase } from "@fluid-topics/ft-wc-utils";
+class FtdsNotice extends FtdsBase {
     constructor() {
         super(...arguments);
-        this.variant = FtdsNoticeVariant.info;
         this.collapsible = false;
         this.dense = false;
-        this.forcedIcon = undefined;
-        this.iconByVariant = {
-            error: FtIcons.CLOSE_PLAIN,
-            info: FtIcons.INFO,
-            success: FtIcons.CHECK_PLAIN,
-            warning: FtIcons.WARNING,
+        // Override default value
+        this.family = DesignSystemFamily.info;
+        this.iconByFamily = {
+            [DesignSystemFamily.error]: FtIcons.CLOSE_PLAIN,
+            [DesignSystemFamily.info]: FtIcons.INFO,
+            [DesignSystemFamily.success]: FtIcons.CHECK_PLAIN,
+            [DesignSystemFamily.warning]: FtIcons.WARNING,
         };
     }
-    get typographyVariant() {
-        return this.dense ? FtTypographyVariants.caption1medium : FtTypographyVariants.body2regular;
+    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;
+            }
+        }
+        if (props.has("forcedIcon") && this.forcedIcon) {
+            this.icon = this.forcedIcon;
+        }
     }
-    get noticeClasses() {
-        return {
-            [this.variant]: true,
-            collapsible: this.collapsible,
-            dense: this.dense,
+    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">
+                    <ft-icon value="${this.icon || this.iconByFamily[this.family]}"></ft-icon>
+                </div>
+                <ft-typography part="label" variant="${this.typographyVariant}">
+                    <slot></slot>
+                </ft-typography>
+            </div>
+        `;
     }
-    update(props) {
-        var _a;
-        super.update(props);
-        if (props.has("variant") || props.has("forcedIcon")) {
-            this.icon = (_a = this.forcedIcon) !== null && _a !== void 0 ? _a : this.iconByVariant[this.variant];
-        }
+    get typographyVariant() {
+        return this.dense ? FtTypographyVariants.caption1medium : FtTypographyVariants.body2regular;
     }
 }
+FtdsNotice.elementDefinitions = {
+    "ft-icon": FtIcon,
+    "ft-typography": FtTypography,
+};
 FtdsNotice.styles = dsStyles;
-__decorate([
-    property()
-], FtdsNotice.prototype, "variant", void 0);
 __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()
+], FtdsNotice.prototype, "family", void 0);
+__decorate([
+    property()
+], FtdsNotice.prototype, "variant", void 0);
 __decorate([
     property()
 ], FtdsNotice.prototype, "forcedIcon", void 0);

package/build/ftds-notice.properties.d.ts

@@ -1,12 +1,17 @@
+import { FtdsBaseProperties } from "@fluid-topics/ft-wc-utils";
+/** @deprecated */
 export declare enum FtdsNoticeVariant {
     info = "info",
     warning = "warning",
     error = "error",
     success = "success"
 }
-export interface FtdsNoticeProperties {
-    variant: FtdsNoticeVariant;
+export interface FtdsNoticeProperties extends Omit<FtdsBaseProperties, "size"> {
     collapsible: boolean;
     dense: boolean;
-    forcedIcon: string | undefined;
+    icon?: string;
+    /** @deprecated */
+    variant?: FtdsNoticeVariant;
+    /** @deprecated */
+    forcedIcon?: string;
 }

package/build/ftds-notice.properties.js

@@ -1,3 +1,4 @@
+/** @deprecated */
 export var FtdsNoticeVariant;
 (function (FtdsNoticeVariant) {
     FtdsNoticeVariant["info"] = "info";

package/build/ftds-notice.styles.js

@@ -1,4 +1,3 @@
-import { setVariable } from "@fluid-topics/ft-wc-utils";
 import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.styles";
 import { css } from "lit";
 import { notice } from "@fluid-topics/design-system-variables";
@@ -14,69 +13,73 @@ export const dsStyles = css `
         border-radius: ${notice.borderRadius};
         padding: ${notice.verticalPadding} ${notice.horizontalPadding};
         gap: ${notice.gap};
+
+        ${FtIconCssVariables.size.set(notice.iconSize)};
+
+        &.ftds-notice--dense {
+            background-color: transparent;
+            border: ${notice.denseBorderWidth};
+            font-size: 16px;
+            gap: ${notice.denseGap};
+            padding: ${notice.denseVerticalPadding} ${notice.denseHorizontalPadding};
+
+            ${FtIconCssVariables.size.set(notice.denseIconSize)};
+        }
     }
 
-    .info {
+    [part="icon"] {
+        align-self: baseline;
+        display: flex;
+        align-items: flex-start;
+    }
+
+    .ftds-notice--collapsible [part="label"] {
+        display: none;
+    }
+
+    .ftds-notice--collapsible:hover [part="label"] {
+        display: initial;
+    }
+
+    /** Family styles **/
+
+    .ftds--family-info {
         color: ${notice.infoColor};
         border-color: ${notice.infoBorderColor};
         background-color: ${notice.infoBackgroundColor};
-    }
 
-    .info [part="icon"] {
-        color: ${notice.infoIconColor};
+        [part="icon"] {
+            color: ${notice.infoIconColor};
+        }
     }
 
-    .warning {
+    .ftds--family-warning {
         color: ${notice.warningColor};
         border-color: ${notice.warningBorderColor};
         background-color: ${notice.warningBackgroundColor};
-    }
 
-    .warning [part="icon"] {
-        color: ${notice.warningIconColor};
+        [part="icon"] {
+            color: ${notice.warningIconColor};
+        }
     }
 
-    .error {
+    .ftds--family-error {
         color: ${notice.errorColor};
         border-color: ${notice.errorBorderColor};
         background-color: ${notice.errorBackgroundColor};
-    }
 
-    .error [part="icon"] {
-        color: ${notice.errorIconColor};
+        [part="icon"] {
+            color: ${notice.errorIconColor};
+        }
     }
 
-    .success {
+    .ftds--family-success {
         color: ${notice.successColor};
         border-color: ${notice.successBorderColor};
         background-color: ${notice.successBackgroundColor};
-    }
-
-    .success [part="icon"] {
-        color: ${notice.successIconColor};
-    }
-
-    ft-icon {
-        ${setVariable(FtIconCssVariables.size, notice.iconSize)};
-    }
-
-    [part="icon"] {
-        display: flex;
-        align-items: flex-start;
-    }
-
-    .collapsible [part="label"] {
-        display: none;
-    }
-
-    .collapsible:hover [part="label"] {
-        display: initial;
-    }
 
-    .dense {
-        background-color: transparent;
-        border: ${notice.denseBorderWidth};
-        font-size: 16px;
-        ${notice.gap.set("4px")};
+        [part="icon"] {
+            color: ${notice.successIconColor};
+        }
     }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-notice",
-  "version": "1.3.28",
+  "version": "1.3.29",
   "description": "Notice to display different messages",
   "keywords": [
     "Lit"
@@ -20,10 +20,10 @@
   },
   "dependencies": {
     "@fluid-topics/design-system-variables": "2.53.0",
-    "@fluid-topics/ft-icon": "1.3.28",
-    "@fluid-topics/ft-typography": "1.3.28",
-    "@fluid-topics/ft-wc-utils": "1.3.28",
+    "@fluid-topics/ft-icon": "1.3.29",
+    "@fluid-topics/ft-typography": "1.3.29",
+    "@fluid-topics/ft-wc-utils": "1.3.29",
     "lit": "3.1.0"
   },
-  "gitHead": "face2509aeead24e78a16af4ffd2123ef281dac2"
+  "gitHead": "52269062e529467d8df60dc7fe7ee1e174c90ada"
 }

package/build/ft-base-notice.d.ts

@@ -1,9 +0,0 @@
-import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtTypographyVariants } from "@fluid-topics/ft-typography";
-export declare abstract class FtBaseNotice extends FtLitElement {
-    abstract get typographyVariant(): FtTypographyVariants;
-    abstract get noticeClasses(): Record<string, boolean>;
-    static elementDefinitions: ElementDefinitionsMap;
-    icon: string;
-    protected render(): import("lit-html").TemplateResult<1>;
-}

package/build/ft-base-notice.js

@@ -1,38 +0,0 @@
-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 { property } from "lit/decorators.js";
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtIcon } from "@fluid-topics/ft-icon";
-import { FtTypography } from "@fluid-topics/ft-typography";
-import { classMap } from "lit/directives/class-map.js";
-class FtBaseNotice extends FtLitElement {
-    constructor() {
-        super(...arguments);
-        this.icon = "info";
-    }
-    render() {
-        return html `
-            <div class="${classMap(this.noticeClasses)}" part="container">
-                <div part="icon">
-                    <ft-icon value="${this.icon}"></ft-icon>
-                </div>
-                <ft-typography part="label" variant="${this.typographyVariant}">
-                    <slot></slot>
-                </ft-typography>
-            </div>
-        `;
-    }
-}
-FtBaseNotice.elementDefinitions = {
-    "ft-icon": FtIcon,
-    "ft-typography": FtTypography
-};
-__decorate([
-    property({ type: String })
-], FtBaseNotice.prototype, "icon", void 0);
-export { FtBaseNotice };