@maggioli-design-system/mds-accordion-timer-item 1.0.0

package/dist/types/types/autocomplete.d.ts

@@ -0,0 +1,2 @@
+export declare type AutocompleteType = 'additional-name' | 'address' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'cc-additional-name' | 'cc-csc' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-family-name' | 'cc-family-name' | 'cc-given-name' | 'cc-name' | 'cc-number' | 'cc-type' | 'country' | 'country-name' | 'current-password' | 'email' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'impp' | 'language' | 'name' | 'new-password' | 'nickname' | 'off' | 'on' | 'one-time-code' | 'organization' | 'organization-title' | 'photo' | 'postal-code' | 'sex' | 'street-address' | 'tel' | 'tel-area-code' | 'tel-country-code' | 'tel-extension' | 'tel-local' | 'tel-national' | 'transaction-amount' | 'transaction-currency' | 'url' | 'username';
+export declare type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';

package/dist/types/types/button.d.ts

@@ -0,0 +1,4 @@
+export declare type ButtonType = 'a' | 'button' | 'reset' | 'submit';
+export declare type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl';
+export declare type ButtonIconPositionType = 'left' | 'right';
+export declare type ButtonVariantType = 'primary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';

package/dist/types/types/form-rel.d.ts

@@ -0,0 +1 @@
+export declare type FormRelType = 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noopener' | 'noreferrer' | 'opener' | 'prev' | 'search';

package/dist/types/types/input-text-type.d.ts

@@ -0,0 +1 @@
+export declare type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';

package/dist/types/types/input-value-type.d.ts

@@ -0,0 +1 @@
+export declare type InputValueType = null | number | string | undefined;

package/dist/types/types/loading.d.ts

@@ -0,0 +1 @@
+export declare type LoadingType = 'eager' | 'lazy';

package/dist/types/types/typography.d.ts

@@ -0,0 +1,4 @@
+export declare type TypographyType = 'action' | 'caption' | 'code' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph';
+export declare type TypographyPrimaryType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare type TypographySecondaryType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph';
+export declare type TypographyMonoType = 'code' | 'hack';

package/dist/types/types/variant.d.ts

@@ -0,0 +1,10 @@
+export declare type ThemeStatusVariantType = 'error' | 'info' | 'success' | 'warning';
+export declare type ThemeVariantType = 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';
+export declare type ThemeFullVariantType = 'amaranth' | 'aqua' | 'blue' | 'dark' | 'error' | 'green' | 'info' | 'light' | 'lime' | 'orange' | 'orchid' | 'sky' | 'success' | 'violet' | 'warning' | 'yellow';
+export declare type ThemeLuminanceVariantType = 'dark' | 'light';
+export declare type LabelVariantType = 'amaranth' | 'aqua' | 'blue' | 'green' | 'lime' | 'orange' | 'orchid' | 'sky' | 'violet' | 'yellow';
+export declare type ActionVariantType = 'primary' | 'dark' | 'light';
+export declare type StateVariantType = 'disabled' | 'focused' | 'readonly';
+export declare type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
+export declare type ToneSimpleVariantType = 'strong' | 'weak' | 'quiet';
+export declare type ToneMinimalVariantType = 'strong' | 'weak';

package/loader/cdn.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -0,0 +1,12 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function applyPolyfills(): Promise<void>;

package/loader/index.es2017.js

@@ -0,0 +1,3 @@
+
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,4 @@
+
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm-es5/loader.js';

package/loader/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "mds-accordion-timer-item-loader",
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@maggioli-design-system/mds-accordion-timer-item",
+  "version": "1.0.0",
+  "description": "mds-accordion-timer-item is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
+  "main": "dist/index.cjs.js",
+  "module": "dist/custom-elements/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/custom-elements/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/mds-accordion-timer-item/mds-accordion-timer-item.esm.js",
+  "files": [
+    "dist/",
+    "loader/",
+    "readme.md",
+    "src/",
+    "www/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs-readme"
+  },
+  "dependencies": {
+    "@maggioli-design-system/mds-accordion-timer": "^1.0.0",
+    "@maggioli-design-system/mds-progress": "^1.0.0",
+    "@maggioli-design-system/mds-text": "^1.2.1",
+    "@stencil/core": "^2.10.0"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Vittorio Vittori",
+    "email": "vittorio.vittori@maggioli.it",
+    "url": "http://vit.to"
+  },
+  "contributors": [
+    {
+      "name": "Andrea Pruccoli",
+      "email": "andrea.pruccoli@maggioli.it",
+      "role": "Software Engineer"
+    },
+    {
+      "name": "Vittorio Vittori",
+      "email": "vittorio.vittori@maggioli.it",
+      "role": "UX UI Designer"
+    }
+  ]
+}

package/readme.md

@@ -0,0 +1,54 @@
+# mds-accordion-timer-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                   | Attribute     | Description                                                             | Type                                                       | Default     |
+| -------------------------- | ------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------- | ----------- |
+| `active`                   | `active`      | Specifies if the accordion item is opened or not                        | `boolean`                                                  | `undefined` |
+| `description` _(required)_ | `description` | Specifies the title shown when the accordion is closed or opened        | `string`                                                   | `undefined` |
+| `progress`                 | `progress`    | A value between 0 and 100 that rapresents the status progress           | `number`                                                   | `0`         |
+| `typography`               | `typography`  | Specifies the typography of the element                                 | `"action" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"` | `'h5'`      |
+| `uuid`                     | `uuid`        | Used automatically by MdsAccordionTimer wrapper to handle it's siblings | `number`                                                   | `0`         |
+
+
+## Events
+
+| Event              | Description                                      | Type                  |
+| ------------------ | ------------------------------------------------ | --------------------- |
+| `clickActive`      | Emits when the accordion is clicked by the mouse | `CustomEvent<string>` |
+| `mouseEnterActive` | Emits when the accordion is hovered by the mouse | `CustomEvent<string>` |
+| `mouseLeaveActive` | Emits when the accordion is hovered by the mouse | `CustomEvent<string>` |
+
+
+## CSS Custom Properties
+
+| Name                  | Description                                                             |
+| --------------------- | ----------------------------------------------------------------------- |
+| `--background-active` | Sets the background-color of the progress bar when the item is selected |
+| `--color`             | Sets the text color of the component                                    |
+| `--thickness`         | Sets thickness of the progress bar                                      |
+
+
+## Dependencies
+
+### Depends on
+
+- [mds-progress](../mds-progress)
+- [mds-text](../mds-text)
+
+### Graph
+```mermaid
+graph TD;
+  mds-accordion-timer-item --> mds-progress
+  mds-accordion-timer-item --> mds-text
+  style mds-accordion-timer-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Built with love @ **Maggioli Informatica / R&D Department**

package/src/components/mds-accordion-timer-item/mds-accordion-timer-item.css

@@ -0,0 +1,69 @@
+@tailwind utilities;
+
+/**
+  * @prop --background-active: Sets the background-color of the progress bar when the item is selected
+  * @prop --color: Sets the text color of the component
+  * @prop --thickness: Sets thickness of the progress bar
+  */
+
+:host {
+
+  @apply
+    duration-500
+    ease-out-expo
+    grid
+    py-4
+    relative
+    transition-cosmetic;
+
+  color: var(--color, theme('colors.adjust-tone-02'));
+}
+
+:host ( :hover:not(.active) ) .progress-bar {
+
+  --background-active: theme('colors.adjust-tone-07');
+}
+
+.row {
+  @apply
+    flex
+    gap-4;
+}
+
+.accordion {
+  @apply grid;
+}
+
+.progress-bar {
+  @apply flex-shrink-0;
+
+  --thickness: theme('width.1');
+}
+
+.header {
+  @apply cursor-pointer;
+}
+
+:host ( .active ) .header {
+  @apply cursor-auto;
+}
+
+.contents {
+  @apply
+    duration-300
+    ease-out-quad
+    gap-4
+    grid
+    h-0
+    opacity-0
+    overflow-hidden
+    pt-0
+    transition-cosmetic;
+}
+
+.contents--opened {
+  @apply
+    h-auto
+    opacity-100
+    pt-4;
+}

package/src/components/mds-accordion-timer-item/mds-accordion-timer-item.tsx

@@ -0,0 +1,99 @@
+import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core'
+import clsx from 'clsx'
+import { TypographyPrimaryType } from '../../types/typography'
+
+@Component({
+  tag: 'mds-accordion-timer-item',
+  styleUrl: 'mds-accordion-timer-item.css',
+  shadow: true,
+})
+export class MdsAccordionTimerItem {
+
+  @State() isActive:boolean
+
+  /**
+   * Specifies the typography of the element
+   */
+  @Prop() readonly typography?: TypographyPrimaryType = 'h5'
+
+  /**
+   * Specifies if the accordion item is opened or not
+   */
+  @Prop({ reflect: true }) readonly active?: boolean
+
+  /**
+   * Specifies the title shown when the accordion is closed or opened
+   */
+  @Prop() readonly description!: string
+
+  /**
+   * A value between 0 and 100 that rapresents the status progress
+   */
+  @Prop() readonly progress?: number = 0
+
+  /**
+   * Used automatically by MdsAccordionTimer wrapper to handle it's siblings
+   */
+  @Prop() readonly uuid?: number = 0
+
+  componentWillLoad (): void {
+    this.isActive = this.active
+  }
+
+  private toggle = () => {
+    if (!this.isActive) {
+      this.isActive = true
+      this.clickActive.emit(this.description)
+    }
+  }
+
+  private mouseEnter = () => {
+    if (this.isActive) {
+      this.mouseEnterActive.emit(this.description)
+    }
+  }
+
+  private mouseLeave = () => {
+    if (this.isActive) {
+      this.mouseLeaveActive.emit(this.description)
+    }
+  }
+
+  /**
+   * Emits when the accordion is clicked by the mouse
+   */
+  @Event() clickActive: EventEmitter<string>
+
+  /**
+   * Emits when the accordion is hovered by the mouse
+   */
+  @Event() mouseEnterActive: EventEmitter<string>
+
+  /**
+   * Emits when the accordion is hovered by the mouse
+   */
+  @Event() mouseLeaveActive: EventEmitter<string>
+
+  @Watch('active')
+  validateOpened (newValue: boolean): void {
+    this.isActive = newValue
+  }
+
+  render () {
+    return (
+      <Host class={ clsx(this.isActive && 'active') } onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave }>
+        <div class="row">
+          <mds-progress class="progress-bar" progress={this.progress} direction="vertical"/>
+          <div class="accordion">
+            <div class="header" onClick={ this.toggle }>
+              <mds-text typography={ this.typography }>{ this.description }</mds-text>
+            </div>
+            <div class={ clsx('contents', this.isActive && 'contents--opened') }>
+              <slot/>
+            </div>
+          </div>
+        </div>
+      </Host>
+    )
+  }
+}

package/src/components/mds-accordion-timer-item/readme.md

@@ -0,0 +1,39 @@
+# mds-accordion-timer-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                   | Attribute     | Description                                                             | Type                                                       | Default     |
+| -------------------------- | ------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------- | ----------- |
+| `active`                   | `active`      | Specifies if the accordion item is opened or not                        | `boolean`                                                  | `undefined` |
+| `description` _(required)_ | `description` | Specifies the title shown when the accordion is closed or opened        | `string`                                                   | `undefined` |
+| `progress`                 | `progress`    | A value between 0 and 100 that rapresents the status progress           | `number`                                                   | `0`         |
+| `typography`               | `typography`  | Specifies the typography of the element                                 | `"action" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"` | `'h5'`      |
+| `uuid`                     | `uuid`        | Used automatically by MdsAccordionTimer wrapper to handle it's siblings | `number`                                                   | `0`         |
+
+
+## Events
+
+| Event              | Description                                      | Type                  |
+| ------------------ | ------------------------------------------------ | --------------------- |
+| `clickActive`      | Emits when the accordion is clicked by the mouse | `CustomEvent<string>` |
+| `mouseEnterActive` | Emits when the accordion is hovered by the mouse | `CustomEvent<string>` |
+| `mouseLeaveActive` | Emits when the accordion is hovered by the mouse | `CustomEvent<string>` |
+
+
+## CSS Custom Properties
+
+| Name                  | Description                                                             |
+| --------------------- | ----------------------------------------------------------------------- |
+| `--background-active` | Sets the background-color of the progress bar when the item is selected |
+| `--color`             | Sets the text color of the component                                    |
+| `--thickness`         | Sets thickness of the progress bar                                      |
+
+
+----------------------------------------------
+
+Built with love @ **Maggioli Informatica / R&D Department**

package/src/components/mds-accordion-timer-item/test/mds-accordion-timer-item.e2e.ts

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

package/src/components/mds-accordion-timer-item/test/mds-accordion-timer-item.spec.tsx

@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing'
+import { MdsAccordionTimerItem } from '../mds-accordion-timer-item'
+
+describe('mds-accordion-timer-item', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [MdsAccordionTimerItem],
+      html: '<mds-accordion-timer-item></mds-accordion-timer-item>',
+    })
+    expect(page.root).toEqualHtml(`
+      <mds-accordion-timer-item>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </mds-accordion-timer-item>
+    `)
+  })
+})

package/src/components/mds-accordion-timer-item/test/mds-accordion-timer-item.stories.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import MdsAccordionTimerItem from '@component/mds-accordion-timer-item/mds-accordion-timer-item'
+import { typographyPrimaryDictionary } from '@dictionary/typography'
+import faker from 'faker'
+
+export default {
+  title: 'UI / Accordion Timer / Accordion Timer Item',
+  component: MdsAccordionTimerItem,
+  argTypes: {
+    description: {
+      type: { name: 'string', required: true },
+      description: 'Specifies the title shown when the accordion is closed or opened',
+    },
+    active: {
+      type: { name: 'boolean', required: false },
+      description: 'Specifies if the accordion item is opened or not',
+    },
+    progress: {
+      control: { type: 'range', step: 0.01, min: 0, max: 1 },
+      type: { name: 'number', required: false },
+      description: 'A value between 0 and 100 that rapresents the status progress',
+    },
+    typography: {
+      type: { name: 'string', required: false },
+      description: 'Specifies the typography of the element',
+      options: typographyPrimaryDictionary,
+      control: { type: 'select' },
+    },
+  },
+}
+
+const Template = args =>
+  <div>
+    <mds-accordion-timer-item {...args}>
+      <mds-text typography="paragraph" class="text-adjust-tone-08">{ faker.lorem.paragraphs(2) }</mds-text>
+    </mds-accordion-timer-item>
+  </div>
+
+export const Default = Template.bind({})
+Default.args = {
+  progress: 0.15,
+  description: 'Come funziona il monitoraggio del sonno?',
+}
+
+export const active = Template.bind({})
+active.args = {
+  active: true,
+  description: 'Come funziona il monitoraggio del sonno?',
+}

package/src/components.d.ts

@@ -0,0 +1,90 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { TypographyPrimaryType } from "./types/typography";
+export namespace Components {
+    interface MdsAccordionTimerItem {
+        /**
+          * Specifies if the accordion item is opened or not
+         */
+        "active"?: boolean;
+        /**
+          * Specifies the title shown when the accordion is closed or opened
+         */
+        "description": string;
+        /**
+          * A value between 0 and 100 that rapresents the status progress
+         */
+        "progress"?: number;
+        /**
+          * Specifies the typography of the element
+         */
+        "typography"?: TypographyPrimaryType;
+        /**
+          * Used automatically by MdsAccordionTimer wrapper to handle it's siblings
+         */
+        "uuid"?: number;
+    }
+}
+declare global {
+    interface HTMLMdsAccordionTimerItemElement extends Components.MdsAccordionTimerItem, HTMLStencilElement {
+    }
+    var HTMLMdsAccordionTimerItemElement: {
+        prototype: HTMLMdsAccordionTimerItemElement;
+        new (): HTMLMdsAccordionTimerItemElement;
+    };
+    interface HTMLElementTagNameMap {
+        "mds-accordion-timer-item": HTMLMdsAccordionTimerItemElement;
+    }
+}
+declare namespace LocalJSX {
+    interface MdsAccordionTimerItem {
+        /**
+          * Specifies if the accordion item is opened or not
+         */
+        "active"?: boolean;
+        /**
+          * Specifies the title shown when the accordion is closed or opened
+         */
+        "description": string;
+        /**
+          * Emits when the accordion is clicked by the mouse
+         */
+        "onClickActive"?: (event: CustomEvent<string>) => void;
+        /**
+          * Emits when the accordion is hovered by the mouse
+         */
+        "onMouseEnterActive"?: (event: CustomEvent<string>) => void;
+        /**
+          * Emits when the accordion is hovered by the mouse
+         */
+        "onMouseLeaveActive"?: (event: CustomEvent<string>) => void;
+        /**
+          * A value between 0 and 100 that rapresents the status progress
+         */
+        "progress"?: number;
+        /**
+          * Specifies the typography of the element
+         */
+        "typography"?: TypographyPrimaryType;
+        /**
+          * Used automatically by MdsAccordionTimer wrapper to handle it's siblings
+         */
+        "uuid"?: number;
+    }
+    interface IntrinsicElements {
+        "mds-accordion-timer-item": MdsAccordionTimerItem;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "mds-accordion-timer-item": LocalJSX.MdsAccordionTimerItem & JSXBase.HTMLAttributes<HTMLMdsAccordionTimerItemElement>;
+        }
+    }
+}

package/src/dictionary/autocomplete.ts

@@ -0,0 +1,62 @@
+const autoCompleteDictionary = [
+  'additional-name',
+  'address',
+  'address-level1',
+  'address-level2',
+  'address-level3',
+  'address-level4',
+  'address-line1',
+  'address-line2',
+  'address-line3',
+  'bday',
+  'bday-day',
+  'bday-month',
+  'bday-year',
+  'cc-additional-name',
+  'cc-csc',
+  'cc-exp',
+  'cc-exp-month',
+  'cc-exp-year',
+  'cc-family-name',
+  'cc-family-name',
+  'cc-given-name',
+  'cc-name',
+  'cc-number',
+  'cc-type',
+  'country',
+  'country-name',
+  'current-password',
+  'email',
+  'family-name',
+  'given-name',
+  'honorific-prefix',
+  'honorific-suffix',
+  'impp',
+  'language',
+  'name',
+  'new-password',
+  'nickname',
+  'off',
+  'on',
+  'one-time-code',
+  'organization',
+  'organization-title',
+  'photo',
+  'postal-code',
+  'sex',
+  'street-address',
+  'tel',
+  'tel-area-code',
+  'tel-country-code',
+  'tel-extension',
+  'tel-local',
+  'tel-national',
+  'transaction-amount',
+  'transaction-currency',
+  'url',
+  'username',
+]
+
+export {
+  autoCompleteDictionary,
+}