@fluid-topics/ftds-notice 2.1.0

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

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

package/build/ftds-notice.properties.js

@@ -0,0 +1,8 @@
+/** @deprecated */
+export var FtdsNoticeVariant;
+(function (FtdsNoticeVariant) {
+    FtdsNoticeVariant["info"] = "info";
+    FtdsNoticeVariant["warning"] = "warning";
+    FtdsNoticeVariant["error"] = "error";
+    FtdsNoticeVariant["success"] = "success";
+})(FtdsNoticeVariant || (FtdsNoticeVariant = {}));

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

@@ -0,0 +1,2 @@
+export { notice as FtdsNoticeCssVariables } from "@fluid-topics/design-system-variables";
+export declare const styles: import("lit").CSSResult;

package/build/ftds-notice.styles.js

@@ -0,0 +1,85 @@
+import { FtdsIconCssVariables } from "@fluid-topics/ftds-icon/build/ftds-icon.styles";
+import { css } from "lit";
+import { notice } from "@fluid-topics/design-system-variables";
+export { notice as FtdsNoticeCssVariables } from "@fluid-topics/design-system-variables";
+// language=CSS
+export const styles = css `
+    [part="container"] {
+        display: inline-flex;
+        align-items: flex-start;
+        box-sizing: border-box;
+        border-width: ${notice.borderWidth};
+        border-style: solid;
+        border-radius: ${notice.borderRadius};
+        padding: ${notice.verticalPadding} ${notice.horizontalPadding};
+        gap: ${notice.gap};
+
+        ${FtdsIconCssVariables.size.set(notice.iconSize)};
+
+        &.ftds-notice--dense {
+            background-color: transparent;
+            border: ${notice.denseBorderWidth};
+            font-size: 16px;
+            gap: ${notice.denseGap};
+            padding: ${notice.denseVerticalPadding} ${notice.denseHorizontalPadding};
+
+            ${FtdsIconCssVariables.size.set(notice.denseIconSize)};
+        }
+    }
+
+    [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};
+
+        [part="icon"] {
+            color: ${notice.infoIconColor};
+        }
+    }
+
+    .ftds--family-warning {
+        color: ${notice.warningColor};
+        border-color: ${notice.warningBorderColor};
+        background-color: ${notice.warningBackgroundColor};
+
+        [part="icon"] {
+            color: ${notice.warningIconColor};
+        }
+    }
+
+    .ftds--family-error {
+        color: ${notice.errorColor};
+        border-color: ${notice.errorBorderColor};
+        background-color: ${notice.errorBackgroundColor};
+
+        [part="icon"] {
+            color: ${notice.errorIconColor};
+        }
+    }
+
+    .ftds--family-success {
+        color: ${notice.successColor};
+        border-color: ${notice.successBorderColor};
+        background-color: ${notice.successBackgroundColor};
+
+        [part="icon"] {
+            color: ${notice.successIconColor};
+        }
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ftds-notice.styles";
+export * from "./ftds-notice.properties";
+export * from "./ftds-notice";
+import "./define";

package/build/index.js

@@ -0,0 +1,4 @@
+export * from "./ftds-notice.styles";
+export * from "./ftds-notice.properties";
+export * from "./ftds-notice";
+import "./define";

package/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "@fluid-topics/ftds-notice",
+    "version": "2.1.0",
+    "description": "The design system notice component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-notice.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/ft-wc-utils": "2.1.0",
+        "@fluid-topics/ftds-icon": "2.1.0",
+        "@fluid-topics/ftds-typography": "2.1.0",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "2.1.0"
+    },
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
+}