feat: add label waria on more components

Co-authored-by: IFMD\carusod <danilo.caruso@ifm.it>
Co-authored-by: carmelotaverniti <117445050+carmelotaverniti@users.noreply.github.com>
Co-authored-by: Antonino Bonanno <nino.bonanno96@gmail.com>

.github/workflows/commit-lint.yml

@@ -12,11 +12,5 @@ jobs:
   lint-commits:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 20
-      - run: npm install @commitlint/config-conventional @commitlint/cli
-      - run: npx commitlint --from HEAD~${{ github.event.pull_request.commits }} --to HEAD
+      - uses: actions/checkout@v4
+      - uses: wagoid/commitlint-github-action@v5

.github/workflows/publish-release.yml

@@ -10,7 +10,7 @@ permissions:
 
 jobs:
   release:
-    if: github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/prerelease' #|| github.ref == 'refs/heads/main'
+    if: github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/main' #|| github.ref == 'refs/heads/main'
     runs-on: ubuntu-latest
     permissions:
       contents: write # to be able to publish a GitHub release
@@ -19,14 +19,14 @@ jobs:
       id-token: write # to enable use of OIDC for npm provenance
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: '20.x'
       - name: Install dependencies
         run: npm ci
       - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies

.github/workflows/run-tests.yml

@@ -12,13 +12,13 @@ jobs:
   run-build-and-tests:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: '20.x'
       - run: npm ci
       - run: npm run lint
       - run: npm run build

.github/workflows/update-docs.yml

@@ -4,24 +4,24 @@ on:
   workflow_run:
     workflows: ["Publish release"]
     branches:
-      # - main
-      - prerelease
+      - main
     types:
       - completed
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: '20.x'
       - name: Git config
         run: |
           git config user.name "${GITHUB_ACTOR}"

README.EN.md

@@ -14,8 +14,7 @@
 </p>
 
 <p align="center">
-    <a href="https://www.npmjs.com/package/design-angular-kit"><img src="https://img.shields.io/npm/v/design-angular-kit/prerelease.svg" alt="NPM"></a>
-    <a href="https://www.npmjs.com/package/design-angular-kit"><img src="https://img.shields.io/npm/v/design-angular-kit/unstable.svg" alt="NPM"></a>
+    <a href="https://www.npmjs.com/package/design-angular-kit"><img src="https://img.shields.io/npm/v/design-angular-kit.svg" alt="NPM"></a>
 </p>
 
 <p align="center">
@@ -35,15 +34,8 @@
   <a href="https://developersitalia.slack.com/messages/C04H3C19D52/"><img src="https://img.shields.io/badge/Slack%20channel-%23design--dev--angular-blue.svg" alt="Join the #design-dev-angular channel" /></a>
   <a href="https://slack.developers.italia.it/"><img src="https://slack.developers.italia.it/badge.svg" alt="Get invited" /></a></p>
 
-_⚠️ Warning: this code is still under development and not ready to be used! We are working on updating it to version 1.0.0, comments and contributions from the whole community are more than welcome!_
-
 _⚠️ If you need the old version, the code and its documentation can be found [here](https://github.com/italia/design-angular-kit/tree/0.x)._
 
-## Towards version 1.0.0 📣
-
-Work has started on upgrading the Angular kit to Bootstrap Italia 2 (based on Bootstrap 5).
-On the `main` branch you can find the code of the work in progress and in [milestone Version 1.0.0](https://github.com/italia/design-angular-kit/milestone/3) a preliminary plan of activities. The old version is to be considered deprecated.
-
 **Comments and contributions from the entire community are more than welcome!** 🎉
 
 ## Intro
@@ -64,16 +56,14 @@ To play with the library, the [Playground Angular Kit](https://github.com/italia
 Design Angular Kit is available on NPM, to install on an existing application on which to test the library (currently not stable) run command
 
 ```sh
-npm install design-angular-kit@prerelease --save
+npm install design-angular-kit --save
 ```
 
 Choose the version corresponding to your Angular version:
 
 | Angular | design-angular-kit    |
 |---------|-----------------------|
-| 17+     | v1.0.0-prerelease.2 + |
-| 16+     | v1.0.0-17 +           |
-| 15+     | v1.0.0-2 +            |
+| 17+     | v1.0.0 +              |
 
 ## Configuration
 
@@ -380,7 +370,7 @@ and refer to [directions on how to contribute to Design Angular Kit](https://git
 
 The minimum requirements of your local environment must be:
 
-- NodeJS (>= 18)
+- NodeJS (>= 20)
 
 At this point, you need to set up your local environment for compiling source files and generating
 of the documentation:
@@ -457,11 +447,15 @@ npm run test
 
 ## Contributor to the library
 
-Special thanks to those who made the development of this new version possible!
+Special thanks to those who made the development of this library possible!
+
+[![Antonino Bonanno](https://github.com/AntoninoBonanno.png?size=100)](https://github.com/AntoninoBonanno) | [![Cristian Borelli](https://github.com/cri99.png?size=100)](https://github.com/cri99) | [![Alessio Napolitano](https://github.com/alenap93.png?size=100)](https://github.com/alenap93) |
+--- | --- | --- |
+Antonino Bonanno | Cristian Borelli | Alessio Napolitano |
+
+and thanks to [NetService team](https://www.net-serv.it/):
 
-[![Cristian Borelli](https://github.com/cri99.png?size=100)](https://github.com/cri99) | [![Antonino Bonanno](https://github.com/AntoninoBonanno.png?size=100)](https://github.com/AntoninoBonanno) | [![NetService](https://www.net-serv.it/css/internet/agid/images/svg/logo-netservicesrl.svg)](https://www.net-serv.it/) | [![Alessio Napolitano](https://github.com/alenap93.png?size=100)](https://github.com/alenap93) |
---- | --- | --- | --- |
-Cristian Borelli | Antonino Bonanno | NetService | Alessio Napolitano |
+<a href="https://www.net-serv.it/"><img src="https://www.net-serv.it/css/internet/agid/images/svg/logo-netservicesrl.svg" alt="NetService logo" width="300"></a>
 
 ---
 

README.md

@@ -14,8 +14,7 @@
 </p>
 
 <p align="center">
-    <a href="https://www.npmjs.com/package/design-angular-kit"><img src="https://img.shields.io/npm/v/design-angular-kit/prerelease.svg" alt="NPM"></a>
-    <a href="https://www.npmjs.com/package/design-angular-kit"><img src="https://img.shields.io/npm/v/design-angular-kit/unstable.svg" alt="NPM"></a>
+    <a href="https://www.npmjs.com/package/design-angular-kit"><img src="https://img.shields.io/npm/v/design-angular-kit.svg?logo=npm" alt="NPM"></a>
 </p>
 
 <p align="center">
@@ -35,15 +34,8 @@
   <a href="https://developersitalia.slack.com/messages/C04H3C19D52/"><img src="https://img.shields.io/badge/Slack%20channel-%23design--dev--angular-blue.svg" alt="Join the #design-dev-angular channel" /></a>
   <a href="https://slack.developers.italia.it/"><img src="https://slack.developers.italia.it/badge.svg" alt="Get invited" /></a></p>
 
-_⚠️ Attenzione: questo codice è ancora in fase di sviluppo e non è pronto per essere utilizzato! Stiamo lavorando all'aggiornamento per portare il kit alla versione 1.0.0, commenti e contributi di tutta la community sono più che benvenuti!_
-
 _⚠️ Se si necessita della vecchia versione il codice e la sua documentazione possono essere reperiti [qua](https://github.com/italia/design-angular-kit/tree/0.x)._
 
-## Verso la versione 1.0.0 📣 
-
-Sono partite le lavorazioni per l'aggiornamento del kit Angular a Bootstrap Italia 2 (basato su Bootstrap 5). 
-Sul branch `main` potete trovare il codice dei lavori in corso e nella [milestone Version 1.0.0](https://github.com/italia/design-angular-kit/milestone/3) un piano preliminare delle attività. La vecchia versione è da considerarsi deprecata.
-
 **Commenti e contributi di tutta la community sono più che benvenuti!** 🎉
 
 ## Intro
@@ -64,16 +56,14 @@ Per giocare con la libreria è disponibile il [Playground Angular Kit](https://g
 Design Angular Kit è disponibile su NPM, per installarlo su una applicazione esistente sulla quale provare la libreria (attualmente non stabile) esegui il comando
 
 ```sh
-npm install design-angular-kit@prerelease --save
+npm install design-angular-kit --save
 ```
 
 Scegli la versione corrispondente alla tua versione Angular:
 
 | Angular | design-angular-kit    |
 |---------|-----------------------|
-| 17+     | v1.0.0-prerelease.2 + |
-| 16+     | v1.0.0-17 +           |
-| 15+     | v1.0.0-2 +            |
+| 17+     | v1.0.0 +              |
 
 ## Configurazione
 
@@ -380,7 +370,7 @@ e fai riferimento alle [indicazioni su come contribuire a Design Angular Kit](ht
 
 I requisiti minimi del tuo ambiente locale devono essere:
 
-- NodeJS (>= 18)
+- NodeJS (>= 20)
 
 A questo punto, è necessario impostare il tuo ambiente locale per la compilazione dei file sorgente e la generazione
 della documentazione:
@@ -457,11 +447,15 @@ npm run test
 
 ## Contributor della libreria
 
-Un grazie speciale a chi ha reso possibile lo sviluppo di questa nuova versione!
+Un grazie speciale a chi ha reso possibile lo sviluppo di questa libreria
+
+[![Antonino Bonanno](https://github.com/AntoninoBonanno.png?size=100)](https://github.com/AntoninoBonanno) | [![Cristian Borelli](https://github.com/cri99.png?size=100)](https://github.com/cri99) | [![Alessio Napolitano](https://github.com/alenap93.png?size=100)](https://github.com/alenap93) |
+--- | --- | --- |
+Antonino Bonanno | Cristian Borelli | Alessio Napolitano |
+
+e grazie in particolare al team di [NetService](https://www.net-serv.it/):
 
-[![Cristian Borelli](https://github.com/cri99.png?size=100)](https://github.com/cri99) | [![Antonino Bonanno](https://github.com/AntoninoBonanno.png?size=100)](https://github.com/AntoninoBonanno) | [![NetService](https://www.net-serv.it/css/internet/agid/images/svg/logo-netservicesrl.svg)](https://www.net-serv.it/) | [![Alessio Napolitano](https://github.com/alenap93.png?size=100)](https://github.com/alenap93) |
---- | --- | --- | --- |
-Cristian Borelli | Antonino Bonanno | NetService | Alessio Napolitano |
+<a href="https://www.net-serv.it/"><img src="https://www.net-serv.it/css/internet/agid/images/svg/logo-netservicesrl.svg" alt="NetService logo" width="300"></a>
 
 ---
 

package.json

@@ -73,7 +73,7 @@
     "@angular/router": "^17.1.2",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "bootstrap-italia": "^2.8.2",
+    "bootstrap-italia": "^2.8.3",
     "core-js": "^3.35.1",
     "fp-ts": "^2.16.2",
     "io-ts": "^2.2.21",

projects/design-angular-kit/package.json

@@ -38,7 +38,7 @@
     "@angular/router": "^17.0.0",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "bootstrap-italia": "^2.8.2"
+    "bootstrap-italia": "^2.8.3"
   },
   "sideEffects": false
 }

projects/design-angular-kit/src/lib/components/core/callout/callout.component.html

@@ -11,7 +11,7 @@
 <ng-template #inner>
   @if (label) {
     <div class="callout-title">
-      <it-icon [name]="iconName"></it-icon>
+      <it-icon [labelWaria]="labelWaria" [name]="iconName"></it-icon>
       @if (hiddenLabel) {
         <span class="visually-hidden">{{ hiddenLabel }}</span>
       }

projects/design-angular-kit/src/lib/components/core/callout/callout.component.ts

@@ -61,6 +61,12 @@ export class ItCalloutComponent {
    */
   @Input() icon: IconName | undefined;
 
+  /**
+   * The input label even get labelWaria icon
+   * @default undefined
+   */
+  @Input() labelWaria: string | undefined = undefined;
+
   protected get iconName(): IconName {
     if (this.icon) {
       return this.icon;

projects/design-angular-kit/src/lib/components/core/steppers/steppers-container/steppers-container.component.html

@@ -6,7 +6,7 @@
           @for (step of steps; track step.id; let i = $index) {
             <li [class.confirmed]="i < activeStep" [class.active]="i === activeStep" [class.no-line]="i === activeStep && steppersNumber">
               @if (step.icon && !steppersNumber) {
-                <it-icon [name]="step.icon"></it-icon>
+                <it-icon [labelWaria]="'it.core.confirmed' | translate" [name]="step.icon"></it-icon>
               }
               @if (steppersNumber) {
                 <span class="steppers-number">
@@ -58,7 +58,7 @@
           class="steppers-btn-prev"
           [disabled]="disableBackButton"
           (click)="backClick.emit(activeStep)">
-          <it-icon name="chevron-left" color="primary"></it-icon>
+          <it-icon [labelWaria]="'it.core.back' | translate" name="chevron-left" color="primary"></it-icon>
           {{ 'it.core.back' | translate }}
         </button>
       }
@@ -101,7 +101,7 @@
           [disabled]="disableForwardButton"
           (click)="forwardClick.emit(activeStep)">
           {{ 'it.core.forward' | translate }}
-          <it-icon name="chevron-right" color="primary"></it-icon>
+          <it-icon [labelWaria]="'it.core.forward' | translate" name="chevron-right" color="primary"></it-icon>
         </button>
       }
       @if (showConfirmButton) {
@@ -121,6 +121,6 @@
 </div>
 
 <ng-template #checkIcon>
-  <it-icon name="check" class="steppers-success"></it-icon>
+  <it-icon [labelWaria]="'it.core.confirmed' | translate" name="check" class="steppers-success"></it-icon>
   <span class="visually-hidden">{{ 'it.core.confirmed' | translate }}</span>
 </ng-template>