@outbook/webcomponents-notification-alert 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# notification-alert
+
+[no content]

package/_notification-alert.scss

@@ -0,0 +1,65 @@
+@use '@outbook/design-decisions/measures';
+@use '@outbook/colorful/palettes-oklch' as colors;
+@use '@outbook/webcomponents-type-icon/type-icon';
+
+$webcomponent-notification-alert-loaded: false !default;
+
+$-baseline: measures.$baseline;
+
+@mixin style() {
+  @if not $webcomponent-notification-alert-loaded {
+    $webcomponent-notification-alert-loaded: true !global;
+
+    @include type-icon.style();
+
+    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);
+      }
+    }
+  }
+}

package/notification-alert.js

@@ -0,0 +1,83 @@
+import { html, LitElement, svg } 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';
+
+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"/>`
+};
+
+export class ComponentNotificationAlert extends LitElement {
+  static properties = {
+    text: { type: String },
+    type: { type: String },
+    size: { type: String },
+    testId: { type: String }
+  };
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    const iconName = ICON_LIST[this.type] ? this.type : 'info';
+    const size = SIZE_LIST.includes(this.size) ? this.size : 'medium';
+
+    const mainClasses = classMap({
+      'notification-alert': true,
+      [`notification-alert--${this.type}`]: true,
+      [`notification-alert--size-${size}`]: true
+    });
+
+    return html`
+      <div class="${mainClasses}" role="alert">
+        <div class="notification-alert__icon">
+          ${TypeIcon({ icon: iconName, icons: ICON_LIST })}
+        </div>
+        <p
+          class="notification-alert__text"
+          data-test-id="${ifDefined(this.testId)}"
+        >
+          ${this.text}
+        </p>
+      </div>
+    `;
+  }
+}
+
+customElements.define('outbook-notification-alert', ComponentNotificationAlert);
+
+/**
+ * Wrapper function.
+ *
+ * @param {Object} props
+ * @param {string} props.type - Maps to the 'type' attribute ('info', 'success', 'error', 'warning')
+ * @param {string} props.text - Maps to the 'text' attribute
+ * @param {string} [props.size] - Maps to the 'size' attribute ('small', 'medium')
+ * @param {string} [props.testId] - Maps to the 'test-id' attribute
+ * @param {string} [props.extraClasses] - Classes to add to the host element
+ * @param {string} [props.descriptionId] - Maps to the 'id' attribute
+ */
+export function NotificationAlert(props) {
+  const {
+    type = 'info',
+    text,
+    size = 'medium',
+    testId,
+    extraClasses,
+    descriptionId
+  } = props;
+
+  return html`<outbook-notification-alert
+    type="${type}"
+    size="${size}"
+    text="${text}"
+    test-id="${ifDefined(testId)}"
+    class="${ifDefined(extraClasses)}"
+    id="${ifDefined(descriptionId)}"
+  ></outbook-notification-alert>`;
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@outbook/webcomponents-notification-alert",
+  "version": "1.0.0",
+  "main": "notification-alert.js",
+  "type": "module",
+  "private": false,
+  "scripts": {},
+  "bugs": {
+    "url": "https://gitlab.com/arr2019/web-components/issues"
+  },
+  "homepage": "https://gitlab.com/arr2019/web-components/pkg/notification-alert#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/arr2019/web-components.git",
+    "folder": "pkg/notification-alert"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": "Antonio Rodríguez",
+  "license": "MIT",
+  "description": "Web components notification-alert",
+  "dependencies": {
+    "@outbook/colorful": ">=1.0.0",
+    "@outbook/design-decisions": ">=1.0.0",
+    "@outbook/webcomponents-type-icon": ">=1.0.0"
+  },
+  "peerDependencies": {
+    "sass": "^1.97.2",
+    "lit": "^3.0.0"
+  }
+}