@outbook/webcomponents-notification-alert 1.0.1 → 1.1.0

package/_lib/_notification-alert.style.js

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import { css } from 'lit';
+
+export default css`:host{display:block;--alert--font-size: 1.25rem;--alert--line-height: 2rem;--alert--icon-size: 2rem;--alert--color: light-dark( oklch(20.5% 0 0deg), oklch(92.2% 0 0deg) )}:host([type=info]){--alert--color: light-dark( oklch(39.1% 0.09 240.876deg), oklch(90.1% 0.058 230.902deg) )}:host([type=success]){--alert--color: light-dark( oklch(39.3% 0.095 152.535deg), oklch(92.5% 0.084 155.995deg) )}:host([type=error]){--alert--color: light-dark( oklch(39.6% 0.141 25.723deg), oklch(88.5% 0.062 18.334deg) )}:host([type=warning]){--alert--color: light-dark( oklch(41.4% 0.112 45.904deg), oklch(92.4% 0.12 95.746deg) )}:host([size=small]){--alert--font-size: 1rem;--alert--line-height: 1.5rem;--alert--icon-size: 1.5rem}.notification-alert{display:flex;box-sizing:border-box}.notification-alert__icon{width:var(--alert--icon-size);height:var(--alert--icon-size);margin-right:0.5rem}.notification-alert__text{font-size:var(--alert--font-size);line-height:var(--alert--line-height);margin:0}.notification-alert__icon,.notification-alert__text{color:var(--alert--color)}`;

package/_lib/constants.js

@@ -0,0 +1 @@
+export const SIZE_LIST = ['small', 'medium'];

package/_lib/icon-list.js

@@ -0,0 +1,8 @@
+import { svg } from 'lit';
+
+export const ICON_LIST = {
+  error: svg`<path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>`,
+  info: svg`<path d="M480-280q17 0 28.5-11.5T520-320v-160q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480v160q0 17 11.5 28.5T480-280Zm0-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>`,
+  success: svg`<path d="m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z"/>`,
+  warning: svg`<path d="M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm69-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Zm0-100Z"/>`
+};

package/notification-alert.js

@@ -1,15 +1,10 @@
-import { html, LitElement, svg } from 'lit';
+import { html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';
-
-const SIZE_LIST = ['small', 'medium'];
-const ICON_LIST = {
-  error: svg`<path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>`,
-  info: svg`<path d="M480-280q17 0 28.5-11.5T520-320v-160q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480v160q0 17 11.5 28.5T480-280Zm0-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>`,
-  success: svg`<path d="m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z"/>`,
-  warning: svg`<path d="M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm69-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Zm0-100Z"/>`
-};
+import { ICON_LIST } from './_lib/icon-list.js';
+import { SIZE_LIST } from './_lib/constants.js';
+import styleComponent from './_lib/_notification-alert.style.js';
 
 class ComponentNotificationAlert extends LitElement {
   static properties = {
@@ -19,9 +14,7 @@ class ComponentNotificationAlert extends LitElement {
     testId: { type: String }
   };
 
-  createRenderRoot() {
-    return this;
-  }
+  static styles = styleComponent;
 
   render() {
     const iconName = ICON_LIST[this.type] ? this.type : 'info';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outbook/webcomponents-notification-alert",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "notification-alert.js",
   "type": "module",
   "private": false,
@@ -21,9 +21,11 @@
   "license": "Apache-2.0",
   "description": "Web components notification-alert",
   "dependencies": {
-    "@outbook/colorful": ">=1.1.0",
-    "@outbook/design-decisions": ">=1.1.0",
-    "@outbook/webcomponents-type-icon": ">=1.1.0"
+    "@outbook/webcomponents-type-icon": ">=1.1.1"
+  },
+  "devDependencies": {
+    "@outbook/colorful": ">=1.1.2",
+    "@outbook/design-decisions": ">=1.1.1"
   },
   "peerDependencies": {
     "sass": "^1.97.2",

package/_notification-alert.scss

@@ -1,62 +0,0 @@
-@use '@outbook/design-decisions/measures';
-@use '@outbook/colorful/palettes-oklch' as colors;
-
-$webcomponent-notification-alert-loaded: false !default;
-
-$-baseline: measures.$baseline;
-
-@mixin style() {
-  @if not $webcomponent-notification-alert-loaded {
-    $webcomponent-notification-alert-loaded: true !global;
-
-    outbook-notification-alert {
-      --alert--font-size: #{$-baseline * 2.5};
-      --alert--line-height: #{$-baseline * 4};
-      --alert--icon-size: #{$-baseline * 4};
-      --alert--color: light-dark(#{colors.$neutral_900}, #{colors.$neutral_200});
-
-      &[type="info"] {
-        --alert--color: light-dark(#{colors.$sky_900}, #{colors.$sky_200});
-      }
-
-      &[type="success"] {
-        --alert--color: light-dark(#{colors.$green_900}, #{colors.$green_200});
-      }
-
-      &[type="error"] {
-        --alert--color: light-dark(#{colors.$red_900}, #{colors.$red_200});
-      }
-
-      &[type="warning"] {
-        --alert--color: light-dark(#{colors.$amber_900}, #{colors.$amber_200});
-      }
-
-      &[size="small"] {
-        --alert--font-size: #{$-baseline * 2};
-        --alert--line-height: #{$-baseline * 3};
-        --alert--icon-size: #{$-baseline * 3};
-      }
-
-      .notification-alert {
-        display: flex;
-      }
-
-      .notification-alert__icon {
-        width: var(--alert--icon-size);
-        height: var(--alert--icon-size);
-        margin-right: #{$-baseline};
-      }
-
-      .notification-alert__text {
-        font-size: var(--alert--font-size);
-        line-height: var(--alert--line-height);
-        margin: 0;
-      }
-
-      .notification-alert__icon,
-      .notification-alert__text {
-        color: var(--alert--color);
-      }
-    }
-  }
-}