Merge branch 'component-chip' of https://github.com/dxc-technology/halstack-style-guide into component-chip

Author: aweell

.grenrc.yml

@@ -28,14 +28,17 @@
     - "component: input-password"
     - "component: input-number"
     - "component: text-area"
+    - "component: toggle group"
     - "component: link"
     - "component: progress-bar"
     - "component: radio"
     - "component: select"
     - "component: sidenav"
     - "component: slider"
     - "component: spinner"
+    - "component: switch"
     - "component: upload"
+    - "component: wizard"
     - "type: enhancement :pencil2:"
     - "type: disparity :warning:"
     - "status: work in progress :+1:"

CHANGELOG.md

@@ -1,38 +1,78 @@
-# Changelog
-
-## 3.7.0 (06/09/2021)
-
-#### Documentation:
-
--  [Checkbox] Color specs update [#477](https://github.com/dxc-technology/halstack-style-guide/issues/477)
--  [Checkbox] Update component documentation to new template [#476](https://github.com/dxc-technology/halstack-style-guide/issues/476)
--  [Accordion] Remove heading anchors [#474](https://github.com/dxc-technology/halstack-style-guide/issues/474)
--  [Input-number] Component documentation [#466](https://github.com/dxc-technology/halstack-style-guide/issues/466)
--  [Color] Remove S, D and L color references from docs [#464](https://github.com/dxc-technology/halstack-style-guide/issues/464)
--  [Upload] Images update [#429](https://github.com/dxc-technology/halstack-style-guide/issues/429)
--  [Upload] Update component documentation to new template [#428](https://github.com/dxc-technology/halstack-style-guide/issues/428)
--  [Docs] Content contribution guidelines [#316](https://github.com/dxc-technology/halstack-style-guide/issues/316)
--  [Upload] Color specs update [#310](https://github.com/dxc-technology/halstack-style-guide/issues/310)
--  [Docs] Design contribution guidelines [#278](https://github.com/dxc-technology/halstack-style-guide/issues/278)
-
-#### UI-Kit:
-
--  [UI-Kit] Update component naming [#481](https://github.com/dxc-technology/halstack-style-guide/issues/481)
--  [Checkbox] Component spacing and sizing [#478](https://github.com/dxc-technology/halstack-style-guide/issues/478)
--  [Input-number] Ui-Kit component [#467](https://github.com/dxc-technology/halstack-style-guide/issues/467)
--  [Upload] Update UI-Kit component [#431](https://github.com/dxc-technology/halstack-style-guide/issues/431)
-
-#### Fixes:
-
--  [Upload] Component specs [#190](https://github.com/dxc-technology/halstack-style-guide/issues/190)
-
-#### Site
-
--  [Site] Add new components to `ignoreLabels` [#463](https://github.com/dxc-technology/halstack-style-guide/issues/463)
-
----
-
-## 3.6.0 (23/08/2021)
+# Changelog
+
+## 3.8.0 (21/09/2021)
+
+#### Documentation:
+
+-  [Chip] Update component documentation to new template [#513](https://github.com/dxc-technology/halstack-style-guide/issues/513)
+-  [Upload] Images update [#511](https://github.com/dxc-technology/halstack-style-guide/issues/511)
+-  [Toggle-group] Update component documentation to new template [#501](https://github.com/dxc-technology/halstack-style-guide/issues/501)
+-  [Button] Variant tokens update [#499](https://github.com/dxc-technology/halstack-style-guide/issues/499)
+-  [Wizard] Update component documentation to new template [#489](https://github.com/dxc-technology/halstack-style-guide/issues/489)
+-  [Switch] Update component documentation to new template [#488](https://github.com/dxc-technology/halstack-style-guide/issues/488)
+-  [Switch] Images update [#487](https://github.com/dxc-technology/halstack-style-guide/issues/487)
+-  [Checkbox] Update component documentation to new template [#476](https://github.com/dxc-technology/halstack-style-guide/issues/476)
+-  [Text-area] Component documentation [#470](https://github.com/dxc-technology/halstack-style-guide/issues/470)
+-  [Alert] Fixes on component specs [#437](https://github.com/dxc-technology/halstack-style-guide/issues/437)
+-  [Textarea] Color specs update [#378](https://github.com/dxc-technology/halstack-style-guide/issues/378)
+-  [Chip] Color specs update [#348](https://github.com/dxc-technology/halstack-style-guide/issues/348)
+-  [Wizard] Images update [#339](https://github.com/dxc-technology/halstack-style-guide/issues/339)
+-  [Toggle] Images update [#338](https://github.com/dxc-technology/halstack-style-guide/issues/338)
+-  [Dialog] Images update [#336](https://github.com/dxc-technology/halstack-style-guide/issues/336)
+-  [Chip] Documentation fixes [#323](https://github.com/dxc-technology/halstack-style-guide/issues/323)
+-  [Footer] Documentation fixes [#322](https://github.com/dxc-technology/halstack-style-guide/issues/322)
+-  [Switch] Color specs update [#309](https://github.com/dxc-technology/halstack-style-guide/issues/309)
+-  [Wizard] Color specs update [#308](https://github.com/dxc-technology/halstack-style-guide/issues/308)
+-  [Toggle] Color specs update [#307](https://github.com/dxc-technology/halstack-style-guide/issues/307)
+-  [Button] Color specs update [#295](https://github.com/dxc-technology/halstack-style-guide/issues/295)
+
+#### UI-Kit:
+
+-  [Text-area] UI-Kit component [#471](https://github.com/dxc-technology/halstack-style-guide/issues/471)
+
+#### Fixes:
+
+- [Switch] Component specs [#225](https://github.com/dxc-technology/halstack-style-guide/issues/225)
+
+#### Site
+
+-  [Site] Design tokens page [#486](https://github.com/dxc-technology/halstack-style-guide/issues/486)
+
+---
+
+## 3.7.0 (06/09/2021)
+
+#### Documentation:
+
+-  [Checkbox] Color specs update [#477](https://github.com/dxc-technology/halstack-style-guide/issues/477)
+-  [Checkbox] Update component documentation to new template [#476](https://github.com/dxc-technology/halstack-style-guide/issues/476)
+-  [Accordion] Remove heading anchors [#474](https://github.com/dxc-technology/halstack-style-guide/issues/474)
+-  [Input-number] Component documentation [#466](https://github.com/dxc-technology/halstack-style-guide/issues/466)
+-  [Color] Remove S, D and L color references from docs [#464](https://github.com/dxc-technology/halstack-style-guide/issues/464)
+-  [Upload] Images update [#429](https://github.com/dxc-technology/halstack-style-guide/issues/429)
+-  [Upload] Update component documentation to new template [#428](https://github.com/dxc-technology/halstack-style-guide/issues/428)
+-  [Docs] Content contribution guidelines [#316](https://github.com/dxc-technology/halstack-style-guide/issues/316)
+-  [Upload] Color specs update [#310](https://github.com/dxc-technology/halstack-style-guide/issues/310)
+-  [Docs] Design contribution guidelines [#278](https://github.com/dxc-technology/halstack-style-guide/issues/278)
+
+#### UI-Kit:
+
+-  [UI-Kit] Update component naming [#481](https://github.com/dxc-technology/halstack-style-guide/issues/481)
+-  [Checkbox] Component spacing and sizing [#478](https://github.com/dxc-technology/halstack-style-guide/issues/478)
+-  [Input-number] Ui-Kit component [#467](https://github.com/dxc-technology/halstack-style-guide/issues/467)
+-  [Upload] Update UI-Kit component [#431](https://github.com/dxc-technology/halstack-style-guide/issues/431)
+
+#### Fixes:
+
+-  [Upload] Component specs [#190](https://github.com/dxc-technology/halstack-style-guide/issues/190)
+
+#### Site
+
+-  [Site] Add new components to `ignoreLabels` [#463](https://github.com/dxc-technology/halstack-style-guide/issues/463)
+
+---
+
+## 3.6.0 (23/08/2021)
 
 #### Documentation:
 
@@ -60,34 +100,34 @@
 #### Site
 
 -  [Site] Edit project README.md adding the public link to the library [#444](https://github.com/dxc-technology/halstack-style-guide/issues/444)
-
----
-
-## 3.5.0 (09/08/2021)
-
-#### Documentation:
-
--  [Slider] Images update [#411](https://github.com/dxc-technology/halstack-style-guide/issues/411)
--  [Slider] Update component documentation to new template [#407](https://github.com/dxc-technology/halstack-style-guide/issues/407)
--  [Button] Update component documentation to new template [#375](https://github.com/dxc-technology/halstack-style-guide/issues/375)
--  [Alert] Update component documentation to new template [#372](https://github.com/dxc-technology/halstack-style-guide/issues/372)
--  [Button] Images update [#334](https://github.com/dxc-technology/halstack-style-guide/issues/334)
--  [Slider] Color specs update [#311](https://github.com/dxc-technology/halstack-style-guide/issues/311)
--  [Card] Color specs update [#296](https://github.com/dxc-technology/halstack-style-guide/issues/296)
--  [Button] Color specs update [#295](https://github.com/dxc-technology/halstack-style-guide/issues/295)
--  [Alert] Color specs update [#294](https://github.com/dxc-technology/halstack-style-guide/issues/294)
-
-#### UI-Kit:
-
--  [Slider] Update UI-Kit component [#424](https://github.com/dxc-technology/halstack-style-guide/issues/424)
-
-#### Fixes:
-
--  [Slider] Component specs [#224](https://github.com/dxc-technology/halstack-style-guide/issues/224)
-
----
-
-## 3.4.0 (12/07/2021)
+
+---
+
+## 3.5.0 (09/08/2021)
+
+#### Documentation:
+
+-  [Slider] Images update [#411](https://github.com/dxc-technology/halstack-style-guide/issues/411)
+-  [Slider] Update component documentation to new template [#407](https://github.com/dxc-technology/halstack-style-guide/issues/407)
+-  [Button] Update component documentation to new template [#375](https://github.com/dxc-technology/halstack-style-guide/issues/375)
+-  [Alert] Update component documentation to new template [#372](https://github.com/dxc-technology/halstack-style-guide/issues/372)
+-  [Button] Images update [#334](https://github.com/dxc-technology/halstack-style-guide/issues/334)
+-  [Slider] Color specs update [#311](https://github.com/dxc-technology/halstack-style-guide/issues/311)
+-  [Card] Color specs update [#296](https://github.com/dxc-technology/halstack-style-guide/issues/296)
+-  [Button] Color specs update [#295](https://github.com/dxc-technology/halstack-style-guide/issues/295)
+-  [Alert] Color specs update [#294](https://github.com/dxc-technology/halstack-style-guide/issues/294)
+
+#### UI-Kit:
+
+-  [Slider] Update UI-Kit component [#424](https://github.com/dxc-technology/halstack-style-guide/issues/424)
+
+#### Fixes:
+
+-  [Slider] Component specs [#224](https://github.com/dxc-technology/halstack-style-guide/issues/224)
+
+---
+
+## 3.4.0 (12/07/2021)
 
 #### Documentation:
 
@@ -113,10 +153,10 @@
 
 -  [Site] Remove .DS_Store files [#362](https://github.com/dxc-technology/halstack-style-guide/issues/362)
 -  [Site] Automate release notes [#344](https://github.com/dxc-technology/halstack-style-guide/issues/344)
-
----
-
-## 3.3.0 (30/06/2021)
+
+---
+
+## 3.3.0 (30/06/2021)
 ## Documentation
 
 * **Added**: Contribution guidelines #264  f713135f1a2ab169ff4778c3122c006d659b85ba
@@ -148,10 +188,10 @@
 * **Spinner**: Fixed component specs #228 e612fff7afe8a6ac12fdad69df98335c081e4ef8 8b378aa6cfb4cae87851fa8f8783ef0c6dd1d93b
 
 
-
----
-
-## 3.2.0 (14/06/2021)
+
+---
+
+## 3.2.0 (14/06/2021)
 ## Documentation
 
 * **Added**: `dropdown` accessibility section #247 0b9231036358cfef0508ca4c2e9954e44c2511ab
@@ -177,10 +217,10 @@
 * **Link**: Fixed component specs #221 4a05ebe2c049383ea69545e9957c2b0b4283bb02
 * **Autocomplete**: Fixed component specs #220 638fbd5c93ae7ca5462b06efc52eb3bb90691575
 * **Wizard**: Fixed component specs #222  858778c2ec257f43b6c68d519a228b7dadcaecff
-
----
-
-## 3.1.2 (02/06/2021)
+
+---
+
+## 3.1.2 (02/06/2021)
 ## Documentation
 
 - Added: `select` helper text #203 4f63bfdc47b70ef615484b51ff970b0956594895
@@ -216,10 +256,10 @@
 - **Select**: Fixed component specs #170 94db1cc80739600eb2b8fba4c61fcd97434789e8
 - **Checkbox**: Fixed component specs #192 4f3f6ec3d9711c3adc5084af7f67e1594ea1da20
 - **Radio button**: Fixed component specs #193 3b2b4fcd5848772edb94307e9bebd496dc9735c4
-- **Button**: Fixed component specs #160 d248465904ad94401bcd914a1cdb80820c01c776
----
-
-## 3.1.1 (17/05/2021)
+- **Button**: Fixed component specs #160 d248465904ad94401bcd914a1cdb80820c01c776
+---
+
+## 3.1.1 (17/05/2021)
 ## Documentation
 
 * Added: `Box` component documentation #152 b56357c9a8c6f92a8fc52f88cbfe3e3fe174c57d
@@ -261,10 +301,10 @@
 * **Card**: Fixed component specs and update documentation images #58 8429c7e96b8c09b36ef8be395a528bd256e4ac1e
 * **Switch**: Fixed component specs #174 832be41b09d68324bf437f7c4b44be928854edd9
 * **Input**: Fixed component specs #45  0bcabe62768f1f5e4eb2293269eb3a853e18c65f
-* **Toggle-group**: Fixed outdated documentation #182 772ffd828e3eb418ad761df36078b1132220a1f6
----
-
-## 3.1.0 (03/05/2021)
+* **Toggle-group**: Fixed outdated documentation #182 772ffd828e3eb418ad761df36078b1132220a1f6
+---
+
+## 3.1.0 (03/05/2021)
 ## Documentation
 
 * Added: Colors documentation and color design tokens #65 #67 bec369dfefba68fbf75bce20cb8e397af5d0f2e7
@@ -300,10 +340,10 @@
 *  **Table**: Fixed `Table with Filter and Resulset` and `Table with Filter and HAL API connection` in UI-Kit. #56 8f1e4f0
 *  **Dropdown**: Updated  `dropdown` documentation specs. #39 f65d6fc 
 * **Dropdown**: Updated UI-Kit `dropdown` component specs. #62  ad1851549ed0be70aa2ffc040b6a5e756ea244ef
-* **Color**: Fixed incorrect HEX & HSL values in color palette #146  4517910fed919c42f6b3387d3e058003b8d7328f
----
-
-## 3.0.0 (08/04/2021)
+* **Color**: Fixed incorrect HEX & HSL values in color palette #146  4517910fed919c42f6b3387d3e058003b8d7328f
+---
+
+## 3.0.0 (08/04/2021)
 ## Documentation
 
 * Added: ```theme-inputs``` to principles/themes 

Halstack UI-Kit/UI_kit_Halstack_v3.8.0.xd

@@ -2,73 +2,52 @@
 
 The upload component is used to choose files from any location in the local machine and update those files to the server where the application is hosted. It is a common procedure in applications where files are required like documents, images or other information in digital formats.
 
-## Appearance
+## Usage
 
-A limited area in the user interface is reserved for this purpose, letting the user select the files in two ways, either choosing the file through the file system of the operating system or dragging the file and dropping in the respective area.
-Once the file is displayed there, some characteristics are rendered:
-- A thumbnail of the file (in the case that it is available)
-- The name of the file
-- The size or other information of the file
-- An icon representing the actual status of the file (in progress, done, error) 
-
-When all the files are loaded and the user wants to upload the files to the server, the only action to be performed is the click on the upload button. If the action goes right, an alert message with a success status will be displayed, in other cases, an error will pop up indicating the reason.
-
-### Modes
-
-There are two different modes for the upload component, one of them is used to upload a single file thus the representation of the component is much simple and takes less space in the screen compared with the multi file upload version, which is used to select several files in a row. 
-
-Modes for the component: __single__ and __multiple__.
-
-
-### States
-
-*Default state*
+- Use the specific mode based on the application requirements
+- Add some explanation text in the case that it is needed to clarify the information to the user
+- By default, the drag and drop appearance is handled by the browser, in case it wants to be customized is the responsibility of the developer
+- If the upload process fails, please show an error message avoiding technical or undetermined information (i.e '0x94 ERROR_PATH_BUSY') that won't be understood by the user of the application
 
-![Upload with the default preview of the component](images/upload_preview.png)
 
-*Drag and drop state*
 
-![Upload with drag and drop action of a file](images/upload_dragdrop.png)
+## States
 
-*Uploading state*
+### Default
 
-![Upload with file uploading](images/upload_processing.png)
+![Upload with the default preview of the component](images/upload_default.png)
 
-*File complete state*
+_Upload with the default preview of the component_
 
-![Upload with a file already uploaded and added to the list](images/upload_uploaded.png)
+### Drag and drop
 
-*Hover state with extra options*
+![Upload with drag and drop action of a file](images/upload_dragover.png)
 
-![Upload with a hover action over the items to display more options](images/upload_hover.png)
+_Upload with drag and drop action of a file_
 
-*Upload completion state*
+### Hover state
 
-![Upload after cliclinkg the upload button with an alert reporting the state](images/upload_alert.png)
+![Example of an item hovered](images/upload_preview.png)
 
-## Design tokens
+_Example of an item hovered_
 
-Cannot be possible to configure or customize any parameter of the component to apply a theming.
+### Success and error
 
-## Design Specifications
+Provide feedback to the users regarding the issues their files may face, or indicate that the files upload was succesfull. An alert type `success` or `error` should be placed on the top right corner of the upload container.
 
-Since this component has many specifications to be detailed here, the best way to share the information with the interested people is throw the adobe cloud link in the Links and references section.
+![Component success feedback](images/upload_success.png)
 
-### Responsive design
+_Component success feedback_
 
-*This is pending*
+![Component error feedback](images/upload_error.png)
 
-### User Interface Design Considerations
+_Component error feedback_
 
-- Use the specific mode based on the application requirements
-- Add some explanation text in the case that it is needed to clarify the information to the user
-- By default, the drag and drop appearance is handled by the browser, in case it wants to be customized is the responsibility of the developer
-- If the upload process fails, please show an error message avoiding technical or undetermined information (i.e '0x94 ERROR_PATH_BUSY') that won't be understood by the user of the application
 
 ## Links and references
 
-- Upload: https://xd.adobe.com/view/23e2cca4-5021-490a-a548-e99a9b4a2006-76b1/screen/0a80be63-f9b6-4436-a3f1-ced47070f70d/variables/
-- Single upload: https://xd.adobe.com/view/23e2cca4-5021-490a-a548-e99a9b4a2006-76b1/screen/f67eb530-b374-4d13-a1d8-ba4c1fba2e74/variables/
+- [React CDK component](https://developer.dxc.com/tools/react/next/#/components/upload)
+- [Angular CDK component](https://developer.dxc.com/tools/angular/next/#/components/upload)
 
 ____________________________________________________________