bromcom-ui 2.12.1-test.1 → 3.0.0-preview.0

package/dist/collection/components/molecules/alert/alert.js

@@ -2,85 +2,57 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from '@stencil/core';
-import { StatusProps, TypeProps } from './types';
-import cs from 'classnames';
-import alertStates from '../states/alert.states';
-import { Generate } from '../../../helper/generate';
-import { StringHelper } from '../../../helper/string-helper';
+import { Host, h } from "@stencil/core";
+import Bcm from "../../../models/bcm";
+import { alertStyle } from "./alert.style";
+const statusIcon = {
+  default: "fa-regular fa-circle-info",
+  info: "fa-regular fa-circle-info",
+  success: "fa-regular fa-circle-check",
+  warning: "fa-regular fa-triangle-exclamation",
+  error: "fa-regular fa-circle-x",
+};
 export class BcmAlert {
   constructor() {
-    this.hidden = false;
-    this._id = Generate.UID();
-    this._title = undefined;
+    this.size = Bcm.Size.medium;
+    this.kind = "filled";
+    this.status = Bcm.Status.info;
+    this.customIcon = undefined;
     this.description = undefined;
-    this.status = StatusProps.info;
-    this.type = TypeProps.basic;
-    this.dismissible = undefined;
     this.icon = false;
-    this.bigIcon = false;
-    this.fullWidth = false;
+    this.dismissible = false;
+    this.hide = false;
+    this.viewButton = false;
+    this.viewButtonText = "View";
   }
-  componentWillRender() {
-    if (this.dismissible != undefined) {
-      if (this.dismissible == '') {
-        this.dismissible = true;
-      }
-      else if (typeof this.dismissible === 'string' && this.dismissible == 'false' || this.dismissible == 'true') {
-        this.dismissible = StringHelper.elementBooleanCheck(this.dismissible);
-      }
-      else {
-        return;
-      }
-    }
-    this.setData();
-  }
-  dismiss(e) {
-    this.alertdismissible.emit(e);
-    this.el.remove();
-  }
-  getStateData() {
-    return alertStates.getValue(this._id);
-  }
-  setData() {
-    const { status, type, bigIcon } = this;
-    alertStates.setValue({
-      id: this._id,
-      status,
-      type,
-      bigIcon,
-    });
+  onDismiss() {
+    this.hide = true;
+    this.onClose.emit();
   }
   render() {
-    const { fullWidth, status, type, icon, bigIcon, _title, hidden, dismissible, description } = this;
-    const hostClasses = cs('bcm-alert', 'bcm-alert__type-' + type, 'bcm-alert__status-' + status, {
-      'full-width': fullWidth,
-      hidden,
-    });
-    const headerMessage = cs('bcm-alert__header-message', !!description ? 'size-3' : 'size-2');
-    const state = this.getStateData();
-    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), h("header", { class: "bcm-alert__header" }, h("span", { class: headerMessage }, (bigIcon || icon) && h("bcm-icon", { icon: state.icon }), _title), dismissible && (h("span", { class: "bcm-alert__header-dismiss", onClick: e => this.dismiss(e) }, typeof dismissible === 'string' ? dismissible : h("bcm-icon", { icon: "fal fa-times" })))), h("main", { class: "bcm-alert__content size-2" }, description && h("p", null, description), h("slot", null))));
+    // props
+    const { viewButton, viewButtonText, customIcon, icon, dismissible } = this;
+    // css variant props
+    const { size, kind, description, status, hide } = this;
+    const { host, content, action, header } = alertStyle({ size, kind, status, hide });
+    const iconClass = customIcon ? customIcon : icon ? statusIcon[status] : null;
+    return (h(Host, { class: host(), role: "alert" }, h("div", { class: header() }, iconClass && h("i", { class: `${iconClass}` })), h("div", { class: content() }, h("slot", null, description)), h("div", { class: action() }, viewButton && (h("a", { href: "javascript:void(0)", class: "tw-appearance-none tw-bg-transparent tw-text-inherit tw-no-underline", onClick: e => this.onViewClick.emit(e) }, viewButtonText)), dismissible && h("i", { class: "fa-regular fa-times tw-cursor-pointer tw-text-inherit", onClick: () => this.onDismiss() }))));
   }
   static get is() { return "bcm-alert"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["alert.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["alert.css"]
-    };
-  }
   static get properties() {
     return {
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
+      "size": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -88,16 +60,16 @@ export class BcmAlert {
           "tags": [],
           "text": ""
         },
-        "attribute": "hidden",
+        "attribute": "size",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "Bcm.Size.medium"
       },
-      "_id": {
+      "kind": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "\"filled\" | \"text\"",
+          "resolved": "\"filled\" | \"text\"",
           "references": {}
         },
         "required": false,
@@ -106,17 +78,21 @@ export class BcmAlert {
           "tags": [],
           "text": ""
         },
-        "attribute": "id",
-        "reflect": true,
-        "defaultValue": "Generate.UID()"
+        "attribute": "kind",
+        "reflect": false,
+        "defaultValue": "\"filled\""
       },
-      "_title": {
-        "type": "any",
-        "mutable": true,
+      "status": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "Bcm.Status",
+          "resolved": "Status.default | Status.error | Status.info | Status.success | Status.warning",
+          "references": {
+            "Bcm": {
+              "location": "global"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -124,15 +100,16 @@ export class BcmAlert {
           "tags": [],
           "text": ""
         },
-        "attribute": "_title",
-        "reflect": false
+        "attribute": "status",
+        "reflect": false,
+        "defaultValue": "Bcm.Status.info"
       },
-      "description": {
-        "type": "any",
-        "mutable": true,
+      "customIcon": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -141,21 +118,16 @@ export class BcmAlert {
           "tags": [],
           "text": ""
         },
-        "attribute": "description",
+        "attribute": "custom-icon",
         "reflect": false
       },
-      "status": {
+      "description": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "StatusProp",
-          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
-          "references": {
-            "StatusProp": {
-              "location": "import",
-              "path": "./types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -163,22 +135,16 @@ export class BcmAlert {
           "tags": [],
           "text": ""
         },
-        "attribute": "status",
-        "reflect": false,
-        "defaultValue": "StatusProps.info"
+        "attribute": "description",
+        "reflect": false
       },
-      "type": {
-        "type": "string",
-        "mutable": true,
+      "icon": {
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "TypeProp",
-          "resolved": "\"banner\" | \"basic\"",
-          "references": {
-            "TypeProp": {
-              "location": "import",
-              "path": "./types"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -186,16 +152,16 @@ export class BcmAlert {
           "tags": [],
           "text": ""
         },
-        "attribute": "type",
+        "attribute": "icon",
         "reflect": false,
-        "defaultValue": "TypeProps.basic"
+        "defaultValue": "false"
       },
       "dismissible": {
-        "type": "any",
-        "mutable": true,
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -205,9 +171,10 @@ export class BcmAlert {
           "text": ""
         },
         "attribute": "dismissible",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "icon": {
+      "hide": {
         "type": "boolean",
         "mutable": true,
         "complexType": {
@@ -221,13 +188,13 @@ export class BcmAlert {
           "tags": [],
           "text": ""
         },
-        "attribute": "icon",
+        "attribute": "hide",
         "reflect": false,
         "defaultValue": "false"
       },
-      "bigIcon": {
+      "viewButton": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -239,16 +206,16 @@ export class BcmAlert {
           "tags": [],
           "text": ""
         },
-        "attribute": "big-icon",
+        "attribute": "view-button",
         "reflect": false,
         "defaultValue": "false"
       },
-      "fullWidth": {
-        "type": "boolean",
-        "mutable": true,
+      "viewButtonText": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -257,17 +224,32 @@ export class BcmAlert {
           "tags": [],
           "text": ""
         },
-        "attribute": "full-width",
+        "attribute": "view-button-text",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"View\""
       }
     };
   }
   static get events() {
     return [{
-        "method": "alertdismissible",
-        "name": "bcm-alert-dismissible",
-        "bubbles": true,
+        "method": "onViewClick",
+        "name": "on-view-click",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "onClose",
+        "name": "on-close",
+        "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {
@@ -281,5 +263,4 @@ export class BcmAlert {
         }
       }];
   }
-  static get elementRef() { return "el"; }
 }

package/dist/collection/components/molecules/alert/alert.style.js

@@ -0,0 +1,65 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const alertStyle = tv({
+  slots: {
+    host: "bcm-alert bcm-ui-element bcm-ui-content-display tw-rounded-lg tw-flex tw-flex-row tw-items-baseline tw-justify-between tw-w-full tw-px-3 tw-font-medium",
+    content: "bcm-alert-content tw-flex tw-flex-row tw-items-center tw-justify-start tw-w-fit tw-flex-1",
+    action: "bcm-alert__action empty:tw-hidden tw-flex tw-flex-row tw-items-center tw-justify-center tw-w-fit tw-gap-2 tw-text-inherit",
+    header: "bcm-alert__header-message empty:tw-hidden",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "bcm-alert__size-small tw-py-1 tw-text-size-4 tw-gap-2",
+      },
+      medium: {
+        host: "bcm-alert__size-medium tw-py-2 tw-text-base tw-gap-2.5",
+      },
+      large: {
+        host: "bcm-alert__size-large tw-py-3 tw-text-lg tw-gap-3",
+      },
+    },
+    status: {
+      default: {
+        host: "bcm-alert__status-default tw-bg-color-default tw-text-color",
+      },
+      success: {
+        host: "bcm-alert__status-success tw-bg-color-palette-emerald tw-text-color-success",
+      },
+      warning: {
+        host: "bcm-alert__status-warning tw-bg-color-palette-amber tw-text-color-warning",
+      },
+      error: {
+        host: "bcm-alert__status-error tw-bg-color-palette-red tw-text-color-error",
+      },
+      info: {
+        host: "bcm-alert__status-info tw-bg-color-palette-blue tw-text-color-primary",
+      },
+    },
+    kind: {
+      filled: {
+        host: "bcm-alert__type-filled",
+      },
+      text: {
+        host: "!tw-bg-transparent bcm-alert__type-text",
+      },
+    },
+    hide: {
+      true: {
+        host: "tw-hidden",
+      },
+      false: {
+        host: "",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    kind: "filled",
+    status: "info",
+    hide: false,
+  },
+});