Merge pull request #340 from Capgemini/release/0.5

Release/0.5
Capgemini · Aug 31, 2022 · df663fe · df663fe
2 parents ccc9da7 + e67e97a
commit df663fe
Show file tree

Hide file tree

Showing 57 changed files with 11,777 additions and 11,902 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -2,7 +2,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:12.22.0
+      - image: cimg/node:16.16.0
     working_directory: ~/repo
     steps:
       - checkout

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,37 @@
+## 0.5.0 (1/09/2022)
+
+<a name="0.5.0"></a>
+
+- [FormInput - add aria-required option](https://github.com/Capgemini/dcx-react-library/issues/293)
+- [FormInput - value attribute optional](https://github.com/Capgemini/dcx-react-library/issues/286)
+- [checkbox - Conditional fields in only works when JS enabled](https://github.com/Capgemini/dcx-react-library/issues/309)
+- [checkbox/radio - show conditional with nonjs](https://github.com/Capgemini/dcx-react-library/pull/325)
+- [checkbox - Allow developer to specify position of conditional via an additional prop](https://github.com/Capgemini/dcx-react-library/issues/329)
+- [Autocomplete - revise props names for consistency](https://github.com/Capgemini/dcx-react-library/issues/319)
+- [Autocomplete - (js-mode): no results found should be part of the drop down list](https://github.com/Capgemini/dcx-react-library/issues/322)
+- [Autocomplete - is not non-js compliant](https://github.com/Capgemini/dcx-react-library/issues/276)
+- [Autocomplete - Add option 'required'](https://github.com/Capgemini/dcx-react-library/issues/291)
+- [Autocomplete - allow developer to prompt user with a custom message on cursor focus on the input field](https://github.com/Capgemini/dcx-react-library/issues/330)
+- [FormRadio - to be be wrapped with outer containers and be able to set question and hint](https://github.com/Capgemini/dcx-react-library/issues/310)
+- [Button - doesn't allow to pass property name](https://github.com/Capgemini/dcx-react-library/issues/314)
+- [Button - Make formAction property available](https://github.com/Capgemini/dcx-react-library/issues/279)
+- [FormSelect - Don't print/render the error span if text value in the error prop is null/undefined/falsy](https://github.com/Capgemini/dcx-react-library/issues/315)
+
+## 0.4.0 (12/05/2022)
+
+<a name="0.4.0"></a>
+
+- [table - simplify usage](https://github.com/Capgemini/dcx-react-library/issues/245)
+- [form group - simplify usage](https://github.com/Capgemini/dcx-react-library/issues/252)
+- [checkbox - Simplify usage](https://github.com/Capgemini/dcx-react-library/issues/280)
+- [form radio - simplify usage](https://github.com/Capgemini/dcx-react-library/issues/274)
+- [Button - Make onSubmit optional](https://github.com/Capgemini/dcx-react-library/issues/270)
+- [Radio Button - Make onChange optional](https://github.com/Capgemini/dcx-react-library/issues/272)
+- [Form Input - simplify usage](https://github.com/Capgemini/dcx-react-library/issues/253)
+- [FormSelect - enhancement](https://github.com/Capgemini/dcx-react-library/issues/242)
+- [Toggle - add extra parameters](https://github.com/Capgemini/dcx-react-library/issues/254)
+- [Form Input - add support to nonJs](https://github.com/Capgemini/dcx-react-library/issues/277)
+
 ## 0.3.2 (18/11/2021)
 
 <a name="0.3.2"></a>

diff --git a/README.md b/README.md
@@ -50,6 +50,11 @@ import '@capgeminiuk/dcx-react-library/dist/dcx-react-library.css';
 
 If you'd like to contribute, please follow our [CONTRIBUTING section](https://github.com/Capgemini/dcx-react-library/blob/main/CONTRIBUTING.md).
 
+## Blog posts
+
+For an introduction to the DCX React Library please read our [Introducing the DCX React Library blog post](https://capgemini.github.io/development/dcx-react-library/).
+For tips on how you can contribute to the DCX React Library please read our [Contributing to the DCX React Library blog post](https://capgemini.github.io/development/contributing-to-dcx-react-library/).
+
 ## Raise a bug or enhancement
 
 If you find a bug or you would like to recommend an improvement, please raise an _issue_ and use the appropriate template. We will be more than happy to improve the library, smashing all the bugs found and improve the functionality.
@@ -111,6 +116,26 @@ Thanks goes to these wonderful people
         <sub><b>Claudio Ricci</b></sub>
       </a>
     </td>
+    <td align="center">
+      <a href="https://github.com/SandraRoDiaz">
+        <img src="https://avatars.githubusercontent.com/u/68821446?v=4" width="100px;" alt="sandra-ro-diaz"/>
+        <br />
+        <sub><b>Sandra Ro Diaz</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/ellietms">
+        <img src="https://avatars.githubusercontent.com/u/59767576?v=4" width="100px;" alt="ellie-tahmasebi"/>
+        <br />
+        <sub><b>Ellie Tahmasebi</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/sri-viswanathan">
+        <img src="https://avatars.githubusercontent.com/u/27343753?v=4" width="100px;" alt=sri-viswanathan"/>
+        <br />
+        <sub><b>Sri Viswanathan</b></sub>
+      </a>
+    </td>
   </tr>
-
 </table>
diff --git a/example/package.json b/example/package.json
@@ -3,17 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.16",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.1.2"
+    "@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",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.7.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -40,8 +41,8 @@
     ]
   },
   "devDependencies": {
-    "@types/react-router-dom": "^5.3.1",
-    "node-sass": "^6.0.1",
-    "web-vitals": "^2.1.2"
+    "@types/react-router-dom": "^5.3.3",
+    "node-sass": "7.0.1",
+    "web-vitals": "^2.1.4"
   }
 }
diff --git a/example/src/components/AutocompleteDemo.tsx b/example/src/components/AutocompleteDemo.tsx
@@ -49,16 +49,22 @@ export const AutocompleteDemo = () => {
           'Pomegranate',
           'Pineapple',
         ]}
-        suffix={<FontAwesomeIcon icon={faAt} title="at-button" />}
-        prefix={<FontAwesomeIcon icon={faAt} title="at-button" />}
+        suffix={{
+          content: <FontAwesomeIcon icon={faAt} title="at-button" />,
+          properties: {},
+        }}
+        prefix={{
+          content: <FontAwesomeIcon icon={faAt} title="at-button" />,
+          properties: {},
+        }}
         defaultValue="Papaya"
         minCharsBeforeSearch={1}
         debounceMs={2000}
         onSelected={handleSelected}
         hintText="search the list of fruits"
       />
       selected: {selected}
-      <h1>Server fetch</h1>
+      <h2>Server fetch</h2>
       <Autocomplete
         //@ts-ignore
         options={serverOptions}
@@ -70,6 +76,53 @@ export const AutocompleteDemo = () => {
         notFoundText=" "
       />
       selected: {selected}
+      <h2>With conditional prompt</h2>
+      <Autocomplete
+        options={[
+          'Papaya',
+          'Persimmon',
+          'Paw Paw',
+          'Prickly Pear',
+          'Peach',
+          'Pomegranate',
+          'Pineapple',
+        ]}
+        defaultValue=""
+        minCharsBeforeSearch={1}
+        promptCondition={() => true}
+        promptMessage="Enter a valid date before typing here"
+        debounceMs={100}
+        hintText="click inside the input to see the prompt"
+        hintClass="hintClass"
+        resultUlClass="resultUlClass"
+        resultlLiClass="resultlLiClass"
+        resultNoOptionClass="resultNoOptionClass"
+        resultActiveClass="resultActiveClass"
+        notFoundText="No fruit found"
+      />
+      <h2>With min-chars prompt</h2>
+      <Autocomplete
+        options={[
+          'Papaya',
+          'Persimmon',
+          'Paw Paw',
+          'Prickly Pear',
+          'Peach',
+          'Pomegranate',
+          'Pineapple',
+        ]}
+        defaultValue=""
+        minCharsBeforeSearch={1}
+        minCharsMessage="Type at least 1 character to see the available options"
+        debounceMs={100}
+        hintText="click inside the input to see the prompt"
+        hintClass="hintClass"
+        resultUlClass="resultUlClass"
+        resultlLiClass="resultlLiClass"
+        resultNoOptionClass="resultNoOptionClass"
+        resultActiveClass="resultActiveClass"
+        notFoundText="No fruit found"
+      />
     </>
   );
 };
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -1,8 +1,7 @@
 import 'react-app-polyfill/ie11';
 import reportWebVitals from './reportWebVitals';
-import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import {
   FormInputMaskedDemo,
   AutocompleteDemo,
@@ -30,29 +29,29 @@ import { Register } from './pages/Register';
 const App = () => (
   <div>
     <BrowserRouter>
-      <Switch>
-        <Route path="/" exact component={Home} />
-        <Route path="/formInput" component={FormInputDemo} />
-        <Route path="/login" component={Login} />
-        <Route path="/register" component={Register} />
-        <Route path="/masked" component={FormInputMaskedDemo} />
-        <Route path="/radio" exact component={FormRadioDemo} />
-        <Route path="/checkbox" exact component={FormCheckboxDemo} />
-        <Route path="/AutocompleteDemo" component={AutocompleteDemo} />
-        <Route path="/ButtonDemo" component={ButtonDemo} />
-        <Route path="/progress" component={ProgressDemo} />
-        <Route path="/range" component={RangeDemo} />
-        <Route path="/toggle" component={ToggleDemo} />
-        <Route path="/select" component={FormSelectDemo} />
-        <Route path="/multiUpload" component={MultiUploadDemo} />
-        <Route path="/multiSelect" component={MultiSelectDemo} />
-        <Route path="/formDate" component={FormDateDemo} />
-        <Route path="/tabGroup" component={TabGroupDemo} />
-        <Route path="/copyToClipboard" component={CopyToClipboardDemo} />
-        <Route path="/table" component={TableDemo} />
-        <Route path="/tooltipDemo" component={TooltipDemo} />
-        <Route path="/details" component={DetailsDemo} />
-      </Switch>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/formInput" element={<FormInputDemo />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/masked" element={<FormInputMaskedDemo />} />
+        <Route path="/radio" element={<FormRadioDemo />} />
+        <Route path="/checkbox" element={<FormCheckboxDemo />} />
+        <Route path="/AutocompleteDemo" element={<AutocompleteDemo />} />
+        <Route path="/ButtonDemo" element={<ButtonDemo />} />
+        <Route path="/progress" element={<ProgressDemo />} />
+        <Route path="/range" element={<RangeDemo />} />
+        <Route path="/toggle" element={<ToggleDemo />} />
+        <Route path="/select" element={<FormSelectDemo />} />
+        <Route path="/multiUpload" element={<MultiUploadDemo />} />
+        <Route path="/multiSelect" element={<MultiSelectDemo />} />
+        <Route path="/formDate" element={<FormDateDemo />} />
+        <Route path="/tabGroup" element={<TabGroupDemo />} />
+        <Route path="/copyToClipboard" element={<CopyToClipboardDemo />} />
+        <Route path="/table" element={<TableDemo />} />
+        <Route path="/tooltipDemo" element={<TooltipDemo />} />
+        <Route path="/details" element={<DetailsDemo />} />
+      </Routes>
     </BrowserRouter>
   </div>
 );