Release/0.6 (#401)

* feat: add value to button

* feat:select-containerId (#350)

* fix: On initial render, ensure that the input prompt for Autocomplete is not visible unless focused (#357)

* Feature/upgrade deps (#359)

* feat: upgrade deps

* feat: downgrade microbundle

* Autocomplete: Ensure the value of controlled input is never undefined (#358)

* feat: upgrade microbundle (#360)

* fix: Accessibility improvements (#361)

* Feature/autocomplete (#364)

* feat: add dynamic id to the list

* feat: add dynamic id to the list

* feat: change on the id

* feat: remove jss dependecy (#365)

* Make onChange prop optional for FormGroup component (#368)

* feat: use sass library instead of node-sass

* feat: onChange type now optional

* Separate radio and checkbox groups (#380)

* feat: remove <FormRadio> storybook (#369)

* feat: Deprecate <FormRadio> (#370)

* feat: remove <FormGroup /> and related stories

* Task create form radio (#371)

* feat: Deprecate <FormRadio>

* feat: add <FormRadio /> component

* feat: add <FormRadioCheckboxBase> component

* feat: update dev script

* feat: move <FormGroup /> to <FormRadio />

* feat: rename test FormGroup to RadioGroup

* feat: add storybook documentation

* feat: Rename StyledRadios to Styled

* feat: Fix unstyled stories

* Task create checkbox group (#373)

* feat: create <CheckboxGroup /> component

* feat: update test

* feat: fix test. Was looking for wrong element

* feat: update storybook documentation (#378)

* feat: remove "unstyled" dir from radioGroup story

* feat: update storybook doc for single checkbox (#381)

* Correct single checkbox stories (#382)

* feat: correct <FormCheckbox /> Stories

* feat: correct <FormCheckbox /> Stories

* feat: add class to fix styling (#383)

* fix: add correct components to example src (#385)

* feat: move elements outside of label (#387)

* Conditionally render aria-label (#386)

* feat: conditionally render aria-label

* feat: unit test failed eslint checks

* Feature/upgrade storybook (#392)

* feat: update storybook

* feat: update storybook

* Feature/tab index (#389)

* fix: tabIndex prop for Button CopyToClipboard Details and FormDate

* fix: tabIndex type to string

* fix: tabIndex back to number

* fix: tabIndex and missing tests

* fix: updated liveEdit files

Co-authored-by: Daniele Zurico <[email protected]>

* fix: allow closing of the options list with the Escape key instead of onBlur (#400)

* Feat/update readme (#391)

* Update CHANGELOG.md

Co-authored-by: SergioBandera <[email protected]>
Co-authored-by: Sri Viswanathan <[email protected]>
Co-authored-by: cg-julian-taylor <[email protected]>
Co-authored-by: Szilvi Horvath <[email protected]>

Author: 5 people

CHANGELOG.md

@@ -1,3 +1,40 @@
+## 0.6.0 (10/01/2023)
+
+<a name="0.6.0"></a>
+
+- [Radio - add extra prop](https://github.com/Capgemini/dcx-react-library/issues/313)
+- [Autocomplete - a11y enable keyboard keys](https://github.com/Capgemini/dcx-react-library/issues/320)
+- [Button - add value prop](https://github.com/Capgemini/dcx-react-library/issues/332)
+- [Button - default aria attribute](https://github.com/Capgemini/dcx-react-library/issues/334)
+- [FormSelect - add containerId prop](https://github.com/Capgemini/dcx-react-library/issues/335)
+- [MultiUpload - HTML output refactor](https://github.com/Capgemini/dcx-react-library/issues/352)
+- [Autocomplete - empty field on enter](https://github.com/Capgemini/dcx-react-library/issues/354)
+- [Autocomplete - remove prompt on page load](https://github.com/Capgemini/dcx-react-library/issues/355)
+- [Autocomplete - add props optionsId for each item in the list](https://github.com/Capgemini/dcx-react-library/issues/363)
+- [FormGroup - make onChange optional](https://github.com/Capgemini/dcx-react-library/issues/366) [same property apply to FormRadio and FormCheckbox]
+
+**Deprecated**
+
+The following component has been deprecated and removed from storybook. It will be removed in the next release
+
+- [FormRadio component](https://github.com/Capgemini/dcx-react-library/issues/353)
+
+**Removed**
+
+- [FormGroup component](https://github.com/Capgemini/dcx-react-library/issues/353)
+
+**New components**
+
+Two new components has been created. In case you used the FormRadio component will be easy enough to rename it and remove the type property.
+
+- [RadioGroup component](https://github.com/Capgemini/dcx-react-library/issues/353)
+- [CheckboxGroup component](https://github.com/Capgemini/dcx-react-library/issues/353)
+
+**Dependencies**
+
+- [remove external dependency from react-jss](https://github.com/Capgemini/dcx-react-library/issues/356)
+- [bumping versions](https://github.com/Capgemini/dcx-react-library/issues/341)
+
 ## 0.5.0 (1/09/2022)
 
 <a name="0.5.0"></a>

README.md

@@ -137,5 +137,19 @@ Thanks goes to these wonderful people
         <sub><b>Sri Viswanathan</b></sub>
       </a>
     </td>
+    <td align="center">
+      <a href="https://github.com/cg-julian-taylor">
+        <img src="https://avatars.githubusercontent.com/u/107050226?v=4" width="100px;" alt=julian-taylor"/>
+        <br />
+        <sub><b>Julian Taylor</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/SergioBanderaGarcia">
+        <img src="https://avatars.githubusercontent.com/u/113599747?v=4" width="100px;" alt=sergio-bandera-garcia"/>
+        <br />
+        <sub><b>Sergio Bandera Garcia</b></sub>
+      </a>
+    </td>
   </tr>
 </table>

example/package.json

@@ -3,18 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.18",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.2.1",
-    "@types/jest": "^28.1.3",
-    "@types/node": "^18.0.0",
-    "microbundle": "0.15.0",
-    "react-router-dom": "6.3.0",
+    "@fortawesome/fontawesome-svg-core": "6.2.0",
+    "@fortawesome/free-solid-svg-icons": "6.2.0",
+    "@fortawesome/react-fontawesome": "0.2.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "14.4.3",
+    "@types/jest": "29.2.0",
+    "@types/node": "18.11.8",
+    "microbundle": "0.15.1",
+    "react-router-dom": "6.4.2",
     "react-scripts": "5.0.1",
-    "typescript": "^4.7.4"
+    "typescript": "4.8.4"
   },
   "scripts": {
     "start": "react-scripts start",

example/src/components/FormCheckboxDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormCheckbox, FormGroup } from '@capgeminiuk/dcx-react-library';
+import { FormCheckbox, CheckboxGroup } from '@capgeminiuk/dcx-react-library';
 
 export const FormCheckboxDemo = () => {
   const [value, setValue] = React.useState('');
@@ -48,9 +48,8 @@ export const FormCheckboxDemo = () => {
         disabled={true}
       />
       <h2>Group</h2>
-      <FormGroup
+      <CheckboxGroup
         name="name-of-group"
-        type="checkbox"
         onChange={handleFormChange}
         items={[
           {
@@ -133,9 +132,8 @@ export const FormCheckboxDemo = () => {
         }}
       />
       <h2>Group using string values</h2>
-      <FormGroup
+      <CheckboxGroup
         name="name-of-group-string"
-        type="checkbox"
         onChange={handleFormChange}
         items={['yes', 'no']}
       />

example/src/components/FormRadioDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormRadio, FormGroup } from '@capgeminiuk/dcx-react-library';
+import { FormRadio, RadioGroup } from '@capgeminiuk/dcx-react-library';
 
 export const FormRadioDemo = () => {
   const [selected, setSelected] = React.useState('single-2');
@@ -153,10 +153,9 @@ export const FormRadioDemo = () => {
         }}
       />
       <h4 id="basic-radio-group-tag">Basic Group Radios</h4>
-      <FormGroup
+      <RadioGroup
         ariaDescribedBy="basic-radio-group-tag"
         name="group3"
-        type="radio"
         items={[
           {
             id: 'radio-1',
@@ -212,10 +211,9 @@ export const FormRadioDemo = () => {
       <h4 id="basic-radio-group-with-string-tag">
         Basic Group Radios using string
       </h4>
-      <FormGroup
+      <RadioGroup
         ariaDescribedBy="basic-radio-group-tag"
         name="group4"
-        type="radio"
         items={['Option 1', 'Option 2', 'Option 3']}
         //@ts-ignore
         onChange={handleGroupConditionalChange}

example/src/pages/Register.tsx

@@ -9,7 +9,7 @@ import {
   FormRadio,
   FormSelect,
   Toggle,
-  FormGroup,
+  RadioGroup,
   Autocomplete,
   FormDate,
   ErrorPosition,
@@ -462,9 +462,8 @@ export const Register = () => {
         </div>
 
         <div className="form-group">
-          <FormGroup
+          <RadioGroup
             name="heard-about"
-            type="radio"
             inputProps={{
               className: 'class-name',
             }}
@@ -517,8 +516,7 @@ export const Register = () => {
             fieldsetClasses="field-set-class"
             hint={{
               id: 'heard-about-hint',
-              text:
-                'Please select the one closest to where you first heard about us',
+              text: 'Please select the one closest to where you first heard about us',
               className: 'hint-class',
             }}
             itemsClasses="item-classes"