@italia/progress - npm Package Compare versions

Comparing version 1.0.0-alpha.15 to 1.0.0-alpha.16

custom-elements.json

@@ -7,2 +7,167 @@ {
       "kind": "javascript-module",
+      "path": "stories/it-progress.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "default": "{ title: 'Componenti/Progress', tags: ['a11y-ok', 'web-component', 'alpha'], component: 'it-progress', args: { type: 'bar', value: 50, 'it-aria-label': 'Caricamento', showValue: false, label: '', indeterminate: false, color: 'default', active: true, double: false, size: 'md', }, argTypes: { type: { control: 'select', options: ['bar', 'donut', 'spinner'], description: 'Tipologia di progress indicator', table: { defaultValue: { summary: 'bar' } }, }, value: { control: { type: 'range', min: 0, max: 100, step: 1 }, description: 'Percentuale di avanzamento (da 0 a 100)', table: { defaultValue: { summary: '50' } }, }, showValue: { name: 'show-value', control: 'boolean', description: 'mostra la percentuale di avanzamento <br/><i>(solo per `type=\"bar\"`)</i>', table: { defaultValue: { summary: 'false' } }, }, 'it-aria-label': { control: 'text', description: 'Etichetta accessibile per gli screen reader (aria-label)', table: { defaultValue: { summary: 'Caricamento' } }, }, label: { name: 'label', control: 'text', description: 'se si vuole mostrare un testo personalizzato per l\\'etichetta, invece della percentuale di avanzamento <br/><i>(solo per `type=\"bar\"`)</i>', }, indeterminate: { control: 'boolean', description: 'stato indeterminato (animazione infinita) <br/><i>(solo per `type=\"bar\"`)</i>', table: { defaultValue: { summary: 'false' } }, }, color: { control: 'text', description: '<strong>Bar:</strong> default|success|info|warning|danger. <br/><br/><strong>Donut:</strong> colore CSS della barra (default: `var(--bsi-secondary)`)<br/><br/><i>(solo per `type=\"bar\"` e `type=\"donut\"`)</i>', table: { defaultValue: { summary: 'default' } }, }, active: { control: 'boolean', description: 'attiva/disattiva l\\'animazione <br/><i>(solo per `type=\"spinner\"`)</i>', table: { defaultValue: { summary: 'true' } }, }, double: { control: 'boolean', description: 'variante doppia <br/><i>(solo per `type=\"spinner\"`)</i>', table: { defaultValue: { summary: 'false' } }, }, size: { control: 'select', options: ['sm', 'md', 'lg', 'xl'], description: 'dimensione <br/><i>(solo per `type=\"spinner\"`)</i>', table: { defaultValue: { summary: 'md' } }, }, }, parameters: { pageLayout: 'w-100', }, } satisfies Meta<ProgressStoryProps>"
+        },
+        {
+          "kind": "variable",
+          "name": "EsempioInterattivo",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Esempio interattivo', tags: ['!dev'], args: { type: 'bar', value: 50, color: 'default', showValue: false, label: '', indeterminate: false, }, parameters: { docs: { canvas: { sourceState: 'shown' } }, }, render: renderComponent, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Bar",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ args: { type: 'bar', value: 50 }, parameters: { controls: { exclude: ['active', 'double', 'size'], }, }, render: renderComponent, }"
+        },
+        {
+          "kind": "variable",
+          "name": "ConEtichetta",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Bar con etichetta', args: { type: 'bar', value: 35, showValue: true, label: '35%' }, render: (params) => html` <it-progress type=\"bar\" value=\"${params.value}\" ?show-value=\"${params.showValue}\" it-aria-label=\"Progresso\"> ${params.label} </it-progress> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Indeterminato",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Bar indeterminata', args: { type: 'bar', indeterminate: true }, render: (params) => html` <it-progress type=\"bar\" ?indeterminate=\"${params.indeterminate}\" it-aria-label=\"In elaborazione...\"></it-progress> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Colori",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Bar: varianti di colore', render: () => html` <div style=\"display: flex; flex-direction: column; gap: 12px;\"> <it-progress type=\"bar\" value=\"25\" color=\"success\" it-aria-label=\"Caricamento - successo\"></it-progress> <it-progress type=\"bar\" value=\"33\" color=\"info\" it-aria-label=\"Caricamento - info\"></it-progress> <it-progress type=\"bar\" value=\"50\" color=\"warning\" it-aria-label=\"Caricamento - warning\"></it-progress> <it-progress type=\"bar\" value=\"66\" color=\"danger\" it-aria-label=\"Caricamento - danger\"></it-progress> </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Button",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Pulsante con progress bar', args: { type: 'bar', showValue: false }, parameters: { pageLayout: '', }, render: (params) => html` <it-button variant=\"primary\" disabled class=\"m-4\"> Label del pulsante <it-icon name=\"it-github\" color=\"inverse\"></it-icon> ${renderComponent({ ...params, type: 'bar' })} </it-button> <it-button variant=\"secondary\" disabled class=\"m-4\"> Label del pulsante <it-icon name=\"it-github\" color=\"inverse\"></it-icon> ${renderComponent({ ...params, type: 'bar' })} </it-button> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Donut",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ args: { type: 'donut', value: 75, 'it-aria-label': 'Caricamento', }, parameters: { controls: { exclude: ['show-value', 'label', 'indeterminate', 'active', 'double', 'size'], }, pageLayout: 'center', }, render: (params: ProgressStoryProps) => html` <div class=\"row\"> <div class=\"col-6 px-5\"> <div class=\"text-center mb-3\">Stato iniziale<br />(0%):</div> ${renderComponent({ ...params, value: 0 })} </div> <div class=\"col-6 px-5\"> <div class=\"text-center mb-3\">Stato di avanzamento<br />(75%):</div> ${renderComponent({ ...params })} </div> </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Spinner",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ args: { type: 'spinner', active: true, double: false, size: 'md', }, parameters: { controls: { exclude: ['show-value', 'label', 'indeterminate'], }, }, render: (params) => renderSpinner(params, 'Spinner'), }"
+        },
+        {
+          "kind": "variable",
+          "name": "SpinnerDoppio",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Spinner doppio', args: { type: 'spinner', active: true, double: true, size: 'md' }, render: (params) => renderSpinner(params, 'Spinner doppio'), }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EsempioInterattivo",
+          "declaration": {
+            "name": "EsempioInterattivo",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Bar",
+          "declaration": {
+            "name": "Bar",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ConEtichetta",
+          "declaration": {
+            "name": "ConEtichetta",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Indeterminato",
+          "declaration": {
+            "name": "Indeterminato",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Colori",
+          "declaration": {
+            "name": "Colori",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Button",
+          "declaration": {
+            "name": "Button",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Donut",
+          "declaration": {
+            "name": "Donut",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Spinner",
+          "declaration": {
+            "name": "Spinner",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SpinnerDoppio",
+          "declaration": {
+            "name": "SpinnerDoppio",
+            "module": "stories/it-progress.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
       "path": "src/index.ts",
@@ -437,167 +602,2 @@ "declarations": [],
       "kind": "javascript-module",
-      "path": "stories/it-progress.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "default": "{ title: 'Componenti/Progress', tags: ['a11y-ok', 'web-component', 'alpha'], component: 'it-progress', args: { type: 'bar', value: 50, 'it-aria-label': 'Caricamento', showValue: false, label: '', indeterminate: false, color: 'default', active: true, double: false, size: 'md', }, argTypes: { type: { control: 'select', options: ['bar', 'donut', 'spinner'], description: 'Tipologia di progress indicator', table: { defaultValue: { summary: 'bar' } }, }, value: { control: { type: 'range', min: 0, max: 100, step: 1 }, description: 'Percentuale di avanzamento (da 0 a 100)', table: { defaultValue: { summary: '50' } }, }, showValue: { name: 'show-value', control: 'boolean', description: 'mostra la percentuale di avanzamento <br/><i>(solo per `type=\"bar\"`)</i>', table: { defaultValue: { summary: 'false' } }, }, 'it-aria-label': { control: 'text', description: 'Etichetta accessibile per gli screen reader (aria-label)', table: { defaultValue: { summary: 'Caricamento' } }, }, label: { name: 'label', control: 'text', description: 'se si vuole mostrare un testo personalizzato per l\\'etichetta, invece della percentuale di avanzamento <br/><i>(solo per `type=\"bar\"`)</i>', }, indeterminate: { control: 'boolean', description: 'stato indeterminato (animazione infinita) <br/><i>(solo per `type=\"bar\"`)</i>', table: { defaultValue: { summary: 'false' } }, }, color: { control: 'text', description: '<strong>Bar:</strong> default|success|info|warning|danger. <br/><br/><strong>Donut:</strong> colore CSS della barra (default: `var(--bsi-secondary)`)<br/><br/><i>(solo per `type=\"bar\"` e `type=\"donut\"`)</i>', table: { defaultValue: { summary: 'default' } }, }, active: { control: 'boolean', description: 'attiva/disattiva l\\'animazione <br/><i>(solo per `type=\"spinner\"`)</i>', table: { defaultValue: { summary: 'true' } }, }, double: { control: 'boolean', description: 'variante doppia <br/><i>(solo per `type=\"spinner\"`)</i>', table: { defaultValue: { summary: 'false' } }, }, size: { control: 'select', options: ['sm', 'md', 'lg', 'xl'], description: 'dimensione <br/><i>(solo per `type=\"spinner\"`)</i>', table: { defaultValue: { summary: 'md' } }, }, }, parameters: { pageLayout: 'w-100', }, } satisfies Meta<ProgressStoryProps>"
-        },
-        {
-          "kind": "variable",
-          "name": "EsempioInterattivo",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ name: 'Esempio interattivo', tags: ['!dev'], args: { type: 'bar', value: 50, color: 'default', showValue: false, label: '', indeterminate: false, }, parameters: { docs: { canvas: { sourceState: 'shown' } }, }, render: renderComponent, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Bar",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { type: 'bar', value: 50 }, parameters: { controls: { exclude: ['active', 'double', 'size'], }, }, render: renderComponent, }"
-        },
-        {
-          "kind": "variable",
-          "name": "ConEtichetta",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ name: 'Bar con etichetta', args: { type: 'bar', value: 35, showValue: true, label: '35%' }, render: (params) => html` <it-progress type=\"bar\" value=\"${params.value}\" ?show-value=\"${params.showValue}\" it-aria-label=\"Progresso\"> ${params.label} </it-progress> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Indeterminato",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ name: 'Bar indeterminata', args: { type: 'bar', indeterminate: true }, render: (params) => html` <it-progress type=\"bar\" ?indeterminate=\"${params.indeterminate}\" it-aria-label=\"In elaborazione...\"></it-progress> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Colori",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ name: 'Bar: varianti di colore', render: () => html` <div style=\"display: flex; flex-direction: column; gap: 12px;\"> <it-progress type=\"bar\" value=\"25\" color=\"success\" it-aria-label=\"Caricamento - successo\"></it-progress> <it-progress type=\"bar\" value=\"33\" color=\"info\" it-aria-label=\"Caricamento - info\"></it-progress> <it-progress type=\"bar\" value=\"50\" color=\"warning\" it-aria-label=\"Caricamento - warning\"></it-progress> <it-progress type=\"bar\" value=\"66\" color=\"danger\" it-aria-label=\"Caricamento - danger\"></it-progress> </div> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Button",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ name: 'Pulsante con progress bar', args: { type: 'bar', showValue: false }, parameters: { pageLayout: '', }, render: (params) => html` <it-button variant=\"primary\" disabled class=\"m-4\"> Label del pulsante <it-icon name=\"it-github\" color=\"inverse\"></it-icon> ${renderComponent({ ...params, type: 'bar' })} </it-button> <it-button variant=\"secondary\" disabled class=\"m-4\"> Label del pulsante <it-icon name=\"it-github\" color=\"inverse\"></it-icon> ${renderComponent({ ...params, type: 'bar' })} </it-button> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Donut",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { type: 'donut', value: 75, 'it-aria-label': 'Caricamento', }, parameters: { controls: { exclude: ['show-value', 'label', 'indeterminate', 'active', 'double', 'size'], }, pageLayout: 'center', }, render: (params: ProgressStoryProps) => html` <div class=\"row\"> <div class=\"col-6 px-5\"> <div class=\"text-center mb-3\">Stato iniziale<br />(0%):</div> ${renderComponent({ ...params, value: 0 })} </div> <div class=\"col-6 px-5\"> <div class=\"text-center mb-3\">Stato di avanzamento<br />(75%):</div> ${renderComponent({ ...params })} </div> </div> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Spinner",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { type: 'spinner', active: true, double: false, size: 'md', }, parameters: { controls: { exclude: ['show-value', 'label', 'indeterminate'], }, }, render: (params) => renderSpinner(params, 'Spinner'), }"
-        },
-        {
-          "kind": "variable",
-          "name": "SpinnerDoppio",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ name: 'Spinner doppio', args: { type: 'spinner', active: true, double: true, size: 'md' }, render: (params) => renderSpinner(params, 'Spinner doppio'), }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "stories/it-progress.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "EsempioInterattivo",
-          "declaration": {
-            "name": "EsempioInterattivo",
-            "module": "stories/it-progress.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Bar",
-          "declaration": {
-            "name": "Bar",
-            "module": "stories/it-progress.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ConEtichetta",
-          "declaration": {
-            "name": "ConEtichetta",
-            "module": "stories/it-progress.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Indeterminato",
-          "declaration": {
-            "name": "Indeterminato",
-            "module": "stories/it-progress.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Colori",
-          "declaration": {
-            "name": "Colori",
-            "module": "stories/it-progress.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Button",
-          "declaration": {
-            "name": "Button",
-            "module": "stories/it-progress.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Donut",
-          "declaration": {
-            "name": "Donut",
-            "module": "stories/it-progress.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Spinner",
-          "declaration": {
-            "name": "Spinner",
-            "module": "stories/it-progress.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SpinnerDoppio",
-          "declaration": {
-            "name": "SpinnerDoppio",
-            "module": "stories/it-progress.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
       "path": "src/utils/progress-donut.ts",
@@ -604,0 +604,0 @@ "declarations": [

package.json

 {
   "name": "@italia/progress",
   "description": "Web component it-progress del Design system .italia con varianti bar, donut e spinner",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.16",
   "publishConfig": {
@@ -40,3 +40,3 @@ "access": "public"
     "progressbar.js": "^1.1.1",
-    "@italia/globals": "^1.0.0-alpha.15"
+    "@italia/globals": "^1.0.0-alpha.16"
   },
@@ -43,0 +43,0 @@ "devDependencies": {

No alert changes

No metric changes

Dependency changes

• Updated

  @italia/globals@^1.0.0-alpha.16