@maggioli-design-system/mds-push-notification 1.1.0

package/src/components/mds-push-notification/css/mds-push-notification-variant-label.css

@@ -0,0 +1,191 @@
+@tailwind utilities;
+
+:host( [variant="orange"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.label-orange-05');
+  --mds-push-notification-icon-color: theme('colors.label-orange-10');
+}
+
+:host( [variant="orange"] ),
+:host( [variant="orange"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.label-orange-09');
+  --mds-push-notification-icon-color: theme('colors.label-orange-05');
+}
+
+:host( [variant="orange"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.label-orange-05');
+}
+
+:host( [variant="amaranth"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.label-amaranth-05');
+  --mds-push-notification-icon-color: theme('colors.label-amaranth-10');
+}
+
+:host( [variant="amaranth"] ),
+:host( [variant="amaranth"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.label-amaranth-09');
+  --mds-push-notification-icon-color: theme('colors.label-amaranth-05');
+}
+
+:host( [variant="amaranth"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.label-amaranth-05');
+}
+
+:host( [variant="orchid"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.label-orchid-05');
+  --mds-push-notification-icon-color: theme('colors.label-orchid-10');
+}
+
+:host( [variant="orchid"] ),
+:host( [variant="orchid"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.label-orchid-09');
+  --mds-push-notification-icon-color: theme('colors.label-orchid-05');
+}
+
+:host( [variant="orchid"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.label-orchid-05');
+}
+
+:host( [variant="violet"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.label-violet-05');
+  --mds-push-notification-icon-color: theme('colors.label-violet-10');
+}
+
+:host( [variant="violet"] ),
+:host( [variant="violet"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.label-violet-09');
+  --mds-push-notification-icon-color: theme('colors.label-violet-05');
+}
+
+:host( [variant="violet"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.label-violet-05');
+}
+
+:host( [variant="blue"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.label-blue-05');
+  --mds-push-notification-icon-color: theme('colors.label-blue-10');
+}
+
+:host( [variant="blue"] ),
+:host( [variant="blue"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.label-blue-09');
+  --mds-push-notification-icon-color: theme('colors.label-blue-05');
+}
+
+:host( [variant="blue"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.label-blue-05');
+}
+
+:host( [variant="sky"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.label-sky-05');
+  --mds-push-notification-icon-color: theme('colors.label-sky-10');
+}
+
+:host( [variant="sky"] ),
+:host( [variant="sky"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.label-sky-09');
+  --mds-push-notification-icon-color: theme('colors.label-sky-05');
+}
+
+:host( [variant="sky"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.label-sky-05');
+}
+
+:host( [variant="aqua"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.label-aqua-05');
+  --mds-push-notification-icon-color: theme('colors.label-aqua-10');
+}
+
+:host( [variant="aqua"] ),
+:host( [variant="aqua"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.label-aqua-09');
+  --mds-push-notification-icon-color: theme('colors.label-aqua-05');
+}
+
+:host( [variant="aqua"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.label-aqua-05');
+}
+
+:host( [variant="green"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.label-green-05');
+  --mds-push-notification-icon-color: theme('colors.label-green-10');
+}
+
+:host( [variant="green"] ),
+:host( [variant="green"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.label-green-09');
+  --mds-push-notification-icon-color: theme('colors.label-green-05');
+}
+
+:host( [variant="green"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.label-green-05');
+}
+
+:host( [variant="lime"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.label-lime-05');
+  --mds-push-notification-icon-color: theme('colors.label-lime-10');
+}
+
+:host( [variant="lime"] ),
+:host( [variant="lime"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.label-lime-09');
+  --mds-push-notification-icon-color: theme('colors.label-lime-05');
+}
+
+:host( [variant="lime"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.label-lime-05');
+}
+
+:host( [variant="yellow"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.label-yellow-05');
+  --mds-push-notification-icon-color: theme('colors.label-yellow-10');
+}
+
+:host( [variant="yellow"] ),
+:host( [variant="yellow"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.label-yellow-09');
+  --mds-push-notification-icon-color: theme('colors.label-yellow-05');
+}
+
+:host( [variant="yellow"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.label-yellow-05');
+}

package/src/components/mds-push-notification/css/mds-push-notification-variant-primary.css

@@ -0,0 +1,20 @@
+@tailwind utilities;
+
+:host( [variant="primary"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.brand-maggioli-05');
+  --mds-push-notification-icon-color: theme('colors.brand-maggioli-10');
+}
+
+:host( [variant="primary"] ),
+:host( [variant="primary"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.brand-maggioli-09');
+  --mds-push-notification-icon-color: theme('colors.brand-maggioli-05');
+}
+
+:host( [variant="primary"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.brand-maggioli-05');
+}

package/src/components/mds-push-notification/css/mds-push-notification-variant-state.css

@@ -0,0 +1,77 @@
+@tailwind utilities;
+
+:host( [variant="error"][tone="strong"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.status-error-05');
+  --mds-push-notification-icon-color: theme('colors.status-error-10');
+}
+
+:host( [variant="error"] ),
+:host( [variant="error"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.status-error-09');
+  --mds-push-notification-icon-color: theme('colors.status-error-05');
+}
+
+:host( [variant="error"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.status-error-05');
+}
+
+:host( [variant="warning"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.status-warning-05');
+  --mds-push-notification-icon-color: theme('colors.status-warning-10');
+}
+
+:host( [variant="warning"] ),
+:host( [variant="warning"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.status-warning-09');
+  --mds-push-notification-icon-color: theme('colors.status-warning-05');
+}
+
+:host( [variant="warning"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.status-warning-05');
+}
+
+:host( [variant="success"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.status-success-05');
+  --mds-push-notification-icon-color: theme('colors.status-success-10');
+}
+
+:host( [variant="success"] ),
+:host( [variant="success"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.status-success-09');
+  --mds-push-notification-icon-color: theme('colors.status-success-05');
+}
+
+:host( [variant="success"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.status-success-05');
+}
+
+:host( [variant="info"][tone="strong"] ) {
+  
+  --mds-push-notification-icon-background-color: theme('colors.status-info-05');
+  --mds-push-notification-icon-color: theme('colors.status-info-10');
+}
+
+:host( [variant="info"] ),
+:host( [variant="info"][tone="weak"] ) {
+
+  --mds-push-notification-icon-background-color: theme('colors.status-info-09');
+  --mds-push-notification-icon-color: theme('colors.status-info-05');
+}
+
+:host( [variant="info"][tone="quiet"] ) {
+
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.status-info-05');
+}

package/src/components/mds-push-notification/mds-push-notification.css

@@ -0,0 +1,130 @@
+@import '../../tailwind/components.css';
+@tailwind utilities;
+@tailwind components;
+
+:host {
+
+  --mds-push-notification-duration: 200ms;
+  --mds-push-notification-icon-background-color: transparent;
+  --mds-push-notification-icon-color: theme('colors.tone-neutral-04');
+  --mds-push-notification-message-line-clamp: 2;
+  --mds-push-notification-shadow: theme('boxShadow.DEFAULT');
+  --mds-push-notification-subject-line-clamp: 1;
+  --mds-push-notification-timing-function: theme('transitionTimingFunction.in-out-expo');
+
+  @apply
+    gap-400
+    max-w-8000
+    min-w-7200
+    p-400
+    pr-800
+    rounded-lg;
+
+  align-items: flex-start;
+  background-color: theme('colors.tone-neutral');
+  box-shadow: var(--mds-push-notification-shadow);
+  color: theme('colors.tone-neutral-02');
+  display: flex;
+  position: relative;
+  transition-duration: var(--mds-push-notification-duration);
+  transition-property: transform;
+  transition-timing-function: var(--mds-push-notification-timing-function);
+}
+
+.content {
+  display: grid;
+  flex-grow: 1;
+}
+
+.actions {
+  @apply
+    gap-200
+    pt-200;
+
+  display: flex;
+  flex-wrap: wrap;
+  min-width: 1px;
+}
+
+.avatar,
+.picture {
+  flex-shrink: 0;
+}
+
+.picture {
+  @apply
+    max-w-1200
+    rounded;
+
+  box-shadow: theme('boxShadow.sm-sharp');
+  width: 100%;
+}
+
+.close-button {
+
+  @apply
+    p-150
+    transition-opacity;
+
+  --mds-button-icon-color: inherit;
+
+  background-color: transparent;
+  fill: theme('colors.tone-neutral-06');
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+:host(:hover) .close-button {
+  opacity: 1;
+}
+
+.close-button:focus-visible,
+.close-button:hover {
+  fill: theme('colors.tone-neutral-03');
+  opacity: 1;
+}
+
+.subject {
+
+  --mds-text-line-clamp: var(--mds-push-notification-subject-line-clamp);
+
+  line-height: theme('lineHeight.sm');
+  text-overflow: ellipsis;
+}
+
+.message {
+
+  --mds-text-line-clamp: var(--mds-push-notification-message-line-clamp);
+
+  line-height: theme('lineHeight.sm');
+  text-overflow: ellipsis;
+}
+
+.avatar {
+  @apply
+    h-900
+    transition-colors
+    w-900;
+
+  background-color: var(--mds-push-notification-icon-background-color);
+  border-radius: 1000px;
+  fill: var(--mds-push-notification-icon-color);
+}
+
+.avatar::part(svg) {
+  @apply w-600;
+}
+
+:host([src]) .avatar {
+  background-color: transparent;
+}
+
+:host([icon]) .avatar::part(wrapper) {
+  @apply p-150;
+}
+
+@import './css/mds-push-notification-variant-primary.css';
+@import './css/mds-push-notification-variant-label.css';
+@import './css/mds-push-notification-variant-state.css';

package/src/components/mds-push-notification/mds-push-notification.tsx

@@ -0,0 +1,84 @@
+import { Component, Element, Host, h, Prop } from '@stencil/core'
+import miBaselineCancel from '@icon/mi/baseline/cancel.svg'
+import { ThemeFullVariantAvatarType, ToneMinimalVariantType } from '@type/variant'
+import { NotificationPreviewType } from './meta/types'
+
+/**
+ * @part actions - The actions wrapper
+ * @part content - The content wrapper of the message
+ * @part icon - The icon set by `icon` attribute
+ * @part picture - The picture image added by `src` attribute
+ * @slot actions - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
+ */
+
+@Component({
+  tag: 'mds-push-notification',
+  styleUrl: 'mds-push-notification.css',
+  shadow: true,
+})
+export class MdsPushNotification {
+
+  private hasActions?: boolean
+  @Element() host: HTMLMdsPushNotificationElement
+
+  /**
+   * Specifies the icon to be displayed
+   */
+  @Prop({ reflect: true }) readonly icon?: string
+
+  /**
+   * The user's inizials displayed if there's no image available, initials will override tone and variant senttings to keep user recognizable from others
+   */
+  @Prop({ mutable:true, reflect: true }) readonly initials?: string
+
+  /**
+   * Specifies the message of the component
+   */
+  @Prop({ reflect: true }) readonly message: string = 'Nessun messaggio disponibile'
+
+  /**
+   * Specifies if the `src` attribute is used to show a the image as avatar or full image
+   */
+  @Prop({ reflect: true }) readonly preview?: NotificationPreviewType = 'image'
+
+  /**
+   * Specifies the path to the image
+   */
+  @Prop({ reflect: true }) readonly src?: string
+
+  /**
+   * Specifies the subject of the component
+   */
+  @Prop({ reflect: true }) readonly subject?: string
+
+  /**
+   * Specifies the color tone of the component
+   */
+  @Prop({ reflect: true }) readonly tone?: ToneMinimalVariantType = 'weak'
+
+  /**
+   * Specifies the color variant of the component
+   */
+  @Prop({ reflect: true }) readonly variant?: ThemeFullVariantAvatarType
+
+  componentWillLoad ():void {
+    this.hasActions = this.host.querySelector('[slot="actions"]') !== null
+  }
+
+  render () {
+    return (
+      <Host>
+        { (this.icon ?? this.preview === 'avatar') && <mds-avatar class="avatar" icon={this.icon} initials={this.initials} part="avatar" src={this.src} tone={this.tone} variant={this.variant}></mds-avatar> }
+        { this.src && this.preview !== 'avatar' && <mds-img class="picture" part="picture" src={this.src}></mds-img> }
+        <div class="content" part="content">
+          { this.subject && <mds-text class="subject" typography="h6" variant="title">{ this.subject }</mds-text> }
+          <mds-text class="message" truncate="all" typography="caption" variant="info">{ this.message }</mds-text>
+          { this.hasActions && <div class="actions" part="actions">
+            <slot name="actions"></slot>
+          </div> }
+        </div>
+        <mds-button class="close-button" icon={miBaselineCancel}></mds-button>
+      </Host>
+    )
+  }
+}

package/src/components/mds-push-notification/meta/dictionary.ts

@@ -0,0 +1,8 @@
+const notificationPreviewDictionary = [
+  'avatar',
+  'image',
+]
+
+export {
+  notificationPreviewDictionary,
+}

package/src/components/mds-push-notification/meta/types.ts

@@ -0,0 +1,3 @@
+export type NotificationPreviewType =
+  | 'avatar'
+  | 'image'

package/src/components/mds-push-notification/readme.md

@@ -0,0 +1,42 @@
+# mds-push-notification
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                                                                                                          | Type                                                                                                                                                                                    | Default                          |
+| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| `icon`     | `icon`     | Specifies the icon to be displayed                                                                                                                   | `string \| undefined`                                                                                                                                                                   | `undefined`                      |
+| `initials` | `initials` | The user's inizials displayed if there's no image available, initials will override tone and variant senttings to keep user recognizable from others | `string \| undefined`                                                                                                                                                                   | `undefined`                      |
+| `message`  | `message`  | Specifies the message of the component                                                                                                               | `string`                                                                                                                                                                                | `'Nessun messaggio disponibile'` |
+| `preview`  | `preview`  | Specifies if the `src` attribute is used to show a the image as avatar or full image                                                                 | `"avatar" \| "image" \| undefined`                                                                                                                                                      | `'image'`                        |
+| `src`      | `src`      | Specifies the path to the image                                                                                                                      | `string \| undefined`                                                                                                                                                                   | `undefined`                      |
+| `subject`  | `subject`  | Specifies the subject of the component                                                                                                               | `string \| undefined`                                                                                                                                                                   | `undefined`                      |
+| `tone`     | `tone`     | Specifies the color tone of the component                                                                                                            | `"strong" \| "weak" \| undefined`                                                                                                                                                       | `'weak'`                         |
+| `variant`  | `variant`  | Specifies the color variant of the component                                                                                                         | `"amaranth" \| "aqua" \| "blue" \| "error" \| "green" \| "info" \| "lime" \| "orange" \| "orchid" \| "primary" \| "sky" \| "success" \| "violet" \| "warning" \| "yellow" \| undefined` | `undefined`                      |
+
+
+## Slots
+
+| Slot        | Description                                                                             |
+| ----------- | --------------------------------------------------------------------------------------- |
+| `"actions"` | Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element. |
+
+
+## Shadow Parts
+
+| Part        | Description                                |
+| ----------- | ------------------------------------------ |
+| `"actions"` | The actions wrapper                        |
+| `"avatar"`  |                                            |
+| `"content"` | The content wrapper of the message         |
+| `"icon"`    | The icon set by `icon` attribute           |
+| `"picture"` | The picture image added by `src` attribute |
+
+
+----------------------------------------------
+
+Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)

package/src/components/mds-push-notification/test/mds-push-notification.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing'
+
+describe('mds-push-notification', () => {
+  it('renders', async () => {
+    const page = await newE2EPage()
+    await page.setContent('<mds-push-notification></mds-push-notification>')
+
+    const element = await page.find('mds-push-notification')
+    expect(element).toHaveAttribute('hydrated')
+  })
+})

package/src/components/mds-push-notification/test/mds-push-notification.spec.tsx

@@ -0,0 +1,24 @@
+import { newSpecPage } from '@stencil/core/testing'
+import { MdsPushNotification } from '../mds-push-notification'
+
+describe('mds-push-notification', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [MdsPushNotification],
+      html: '<mds-push-notification></mds-push-notification>',
+    })
+    expect(page.root).toEqualHtml(`
+      <mds-push-notification message="Nessun messaggio disponibile" preview="image" tone="weak">
+        <mock:shadow-root>
+          <div class="content" part="content">
+            <mds-text class="message" truncate="all" typography="caption" variant="info">
+              Nessun messaggio disponibile
+            </mds-text>
+          </div>
+          <mds-button class="close-button">
+          </mds-button>
+        </mock:shadow-root>
+      </mds-push-notification>
+    `)
+  })
+})