Merge pull request #285 from Capgemini/release/0.4

Release/0.4
Capgemini · May 12, 2022 · ccc9da7 · ccc9da7
2 parents 584c0e7 + f315731
commit ccc9da7
Show file tree

Hide file tree

Showing 60 changed files with 2,880 additions and 1,540 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,4 +7,5 @@ dist
 coverage
 .parcel-cache
 example/.parcel-cache/*
+example/build
 storybook-static
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -11,24 +11,17 @@ developers managing and developing this project.
 1. Clone the repo
    `git clone [email protected]:Capgemini/dcx-react-library.git`
 2. Run `./setup.sh` in the root `dcx-react-library` folder
-3. Run `yarn` within `./example` folder
 
-Once this is done, you can modify any file locally and run `yarn start`,
-`yarn test` or `yarn run build`.
-
-If you want to test your component you can import the component into the
-`./example` application once you have `yarn start` the `cdcx-react-library`
-root project and run `yarn start` within the `./example` folder
+this command will install all the dependencies and it will links the dcx-react-library to the example folder.
 
 ## Commands
 
-DCX Component Library scaffolds your new library inside the `/src` folder and also sets up a [Parcel-based](https://parceljs.org) playground for it inside the `/example` folder.
+DCX Component Library scaffolds your new library inside the `/src` folder and also sets up a [Create-React-App](https://reactjs.org/docs/create-a-new-react-app.html) playground for it inside the `/example` folder.
 
 The recommended workflow is to run DCX Component Library in one terminal:
 
 ```bash
-yarn install #to install dependencies
-yarn start #to run the library
+yarn dev #to run the library
 ```
 
 This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
@@ -53,29 +46,30 @@ Run the example inside another terminal:
 
 ```bash
 cd example
-yarn install #to install dependencies
 yarn start #to run the examples
 ```
 
-The default example imports and live reloads whatever is in the `/dist` folder, so if you are seeing an out of date component, make sure DCX Component Library is running in watch mode as recommended above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
+The default example imports and live reloads whatever is in the `/dist` folder, so if you are seeing an out of date component, make sure DCX Component Library is running in watch mode as recommended above.
 
-- To do a one-off build, use `yarn build`;
+- To do a one-off build, use `yarn build` at the root of your project;
 
-- To run tests, use `yarn test`;
+- To run tests, use `yarn test` at the root of your project;
 
-- To check the code coverage use `yarn test: coverage;
+- To check the code coverage use `yarn test: coverage at the root of your project;
 
-- To fix all the linting errors use `yarn lint: fix`.
+- To fix all the linting errors use `yarn lint: fix` at the root of your project.
 
 ## Submit your PR
 
 To create a new component the following must be satisfied before adding
 `READY TO MERGE` labels on PR:
 
-1. create a branch called: feature/7-input (where 7 is the git issue number)
-2. create a folder under `src` for the component-name
-3. create the test under `__tests__` within the component-name folder
-4. create a demo in the `example/src`
+1. we usually have a base branch to branch from based on the release we currently are: release/x.x
+2. create a branch called: feature/7-input (where 7 is the git issue number) from the base branch (release/x.x)
+3. create a folder under `src` for the component-name
+4. create the test under `__tests__` within the component-name folder
+5. create or edit a demo in the `example/src`
+6. create or edit the story in the `stories`
 
 Example folder structure with component `SnackBar`:
 
@@ -137,6 +131,10 @@ We use circleCi for continuous integration. CircleCi configuration is stored und
 
 Code quality is set up for you with `prettier`, `husky`, and `lint-staged`.
 
+## Documentation
+
+All the stories created in Storybook are deployed in [Chromatic](main--6069a6f47f4b9f002171f8e1.chromatic.com). You can also see a preview of your PR before requesting a merge looking on the circle-ci pipline.
+
 ### Jest
 
 Jest tests are set up to run with `yarn test`. PR with a coverage less than **100%** will not be merged.
diff --git a/README.md b/README.md
@@ -12,16 +12,14 @@ dcx-react-library is **UI/UX agnostic** so you need to provide styling to match
 
 ## Components
 
-To see the full list of components built in dcx-react-library, and how to use it, have a look on our [storybook-showcase](https://www.chromatic.com/library?appId=6069a6f47f4b9f002171f8e1) (Click on View Storybook to see the list of components)
+To see the full list of components built in dcx-react-library, and how to use it, have a look on our [storybook-showcase](https://main--6069a6f47f4b9f002171f8e1.chromatic.com)
 In Storybook, each component is presented with 4 main sections:
 
 - **documentation**: describes the list of properties available, optional and mandatory;
 - **live**: you can play directly with all the properties and see the component's behaviour;
 - **unstyled**: the bare component without any styling applied;
 - **styled**: an example (mainly based on GDS) of how to style the component and the final result.
 
-![Image of dcx-react-library showcase](https://github.com/Capgemini/dcx-react-library/blob/main/stories/img/storybook-doc.png)
-
 ## How to use it
 
 Using dcx-react-library should not require any particular setup. You only need to import the component and use it :smiley:
@@ -32,13 +30,22 @@ Steps:
 - Import the component you need and use it. For example:
 
 ```js
-import { Button } from 'dcx-react-library';
+import { Button } from '@capgeminiuk/dcx-react-library';
 
 const App = () => {
   return <Button label="start" onClick={() => {}} />;
 };
 ```
 
+## Styling
+
+We don't ship `dcx-react-library` with any included CSS. However, some stylesheet is required to use some components (for example, `toggle` and `tooltip`).
+
+```js
+/* The following line can be included in your src/index.js or App.js file */
+import '@capgeminiuk/dcx-react-library/dist/dcx-react-library.css';
+```
+
 ## Contributing
 
 If you'd like to contribute, please follow our [CONTRIBUTING section](https://github.com/Capgemini/dcx-react-library/blob/main/CONTRIBUTING.md).

diff --git a/example/src/components/FormCheckboxDemo.tsx b/example/src/components/FormCheckboxDemo.tsx
@@ -132,6 +132,13 @@ export const FormCheckboxDemo = () => {
           },
         }}
       />
+      <h2>Group using string values</h2>
+      <FormGroup
+        name="name-of-group-string"
+        type="checkbox"
+        onChange={handleFormChange}
+        items={['yes', 'no']}
+      />
       <pre>{formValue}</pre>
     </>
   );

diff --git a/example/src/components/FormInputDemo.tsx b/example/src/components/FormInputDemo.tsx
@@ -31,6 +31,21 @@ export const FormInputDemo = () => {
           placeholder: 'enter your email',
         }}
       />
+      <h1>Label</h1>
+      <FormInput
+        name="password"
+        type="text"
+        value={value}
+        onChange={handleChange}
+        inputProps={{
+          placeholder: 'enter your email',
+          htmlFor: 'input-id',
+        }}
+        label="this is a label"
+        labelProps={{
+          htmlFor: 'input-id',
+        }}
+      />
       <h1>Prefix</h1>
       <FormInput
         name="password"
@@ -40,16 +55,39 @@ export const FormInputDemo = () => {
         inputProps={{
           placeholder: 'enter your email',
         }}
-        prefix={
-          <div
-            style={{
+        prefix={{
+          properties: {
+            style: {
               border: '1px solid #d2d2d2',
               padding: '5px',
-            }}
-          >
-            <FontAwesomeIcon icon={faAt} />
-          </div>
-        }
+            },
+          },
+          content: <FontAwesomeIcon icon={faAt} />,
+        }}
+      />
+      <h1>Prefix Label</h1>
+      <FormInput
+        name="password"
+        type="text"
+        value={value}
+        onChange={handleChange}
+        inputProps={{
+          placeholder: 'enter your email',
+          id: 'input-id',
+        }}
+        label="this is a label"
+        labelProps={{
+          htmlFor: 'input-id',
+        }}
+        prefix={{
+          properties: {
+            style: {
+              border: '1px solid #d2d2d2',
+              padding: '5px',
+            },
+          },
+          content: <FontAwesomeIcon icon={faAt} />,
+        }}
       />
       <h1>Suffix</h1>
       <FormInput
@@ -60,16 +98,15 @@ export const FormInputDemo = () => {
         inputProps={{
           placeholder: 'enter your email',
         }}
-        suffix={
-          <div
-            style={{
+        suffix={{
+          properties: {
+            style: {
               border: '1px solid #d2d2d2',
               padding: '5px',
-            }}
-          >
-            <FontAwesomeIcon icon={faAt} />
-          </div>
-        }
+            },
+          },
+          content: <FontAwesomeIcon icon={faAt} />,
+        }}
       />
       <h1>Prefix and suffix</h1>
       <FormInput
@@ -80,26 +117,56 @@ export const FormInputDemo = () => {
         inputProps={{
           placeholder: 'enter your email',
         }}
-        prefix={
-          <div
-            style={{
+        prefix={{
+          properties: {
+            style: {
               border: '1px solid #d2d2d2',
               padding: '5px',
-            }}
-          >
-            <FontAwesomeIcon icon={faAt} />
-          </div>
-        }
-        suffix={
-          <div
-            style={{
+            },
+          },
+          content: <FontAwesomeIcon icon={faAt} />,
+        }}
+        suffix={{
+          properties: {
+            style: {
               border: '1px solid #d2d2d2',
               padding: '5px',
-            }}
-          >
-            <FontAwesomeIcon icon={faAt} />
-          </div>
-        }
+            },
+          },
+          content: <FontAwesomeIcon icon={faAt} />,
+        }}
+      />
+      <h1>Prefix and suffix with label</h1>
+      <FormInput
+        name="password"
+        type="text"
+        value={value}
+        onChange={handleChange}
+        inputProps={{
+          placeholder: 'enter your email',
+        }}
+        prefix={{
+          properties: {
+            style: {
+              border: '1px solid #d2d2d2',
+              padding: '5px',
+            },
+          },
+          content: <FontAwesomeIcon icon={faAt} />,
+        }}
+        suffix={{
+          properties: {
+            style: {
+              border: '1px solid #d2d2d2',
+              padding: '5px',
+            },
+          },
+          content: <FontAwesomeIcon icon={faAt} />,
+        }}
+        label="this is a label"
+        labelProps={{
+          htmlFor: 'input-id',
+        }}
       />
       <h1>Validation</h1>
       <FormInput
@@ -126,26 +193,24 @@ export const FormInputDemo = () => {
             'your password need to be min 8 chars 1 Uppercase, 1 Number and one special character',
         }}
         errorPosition={ErrorPosition.BOTTOM}
-        prefix={
-          <div
-            style={{
+        prefix={{
+          properties: {
+            style: {
               border: '1px solid #d2d2d2',
               padding: '5px',
-            }}
-          >
-            <FontAwesomeIcon icon={faAt} />
-          </div>
-        }
-        suffix={
-          <div
-            style={{
+            },
+          },
+          content: <FontAwesomeIcon icon={faAt} />,
+        }}
+        suffix={{
+          properties: {
+            style: {
               border: '1px solid #d2d2d2',
               padding: '5px',
-            }}
-          >
-            <FontAwesomeIcon icon={faAt} />
-          </div>
-        }
+            },
+          },
+          content: <FontAwesomeIcon icon={faAt} />,
+        }}
       />
       <div>isValid:{showValid.toString()}</div>
     </>

diff --git a/example/src/components/FormRadioDemo.tsx b/example/src/components/FormRadioDemo.tsx
@@ -209,6 +209,17 @@ export const FormRadioDemo = () => {
         //@ts-ignore
         onChange={handleGroupConditionalChange}
       />
+      <h4 id="basic-radio-group-with-string-tag">
+        Basic Group Radios using string
+      </h4>
+      <FormGroup
+        ariaDescribedBy="basic-radio-group-tag"
+        name="group4"
+        type="radio"
+        items={['Option 1', 'Option 2', 'Option 3']}
+        //@ts-ignore
+        onChange={handleGroupConditionalChange}
+      />
       <br />
     </>
   );

diff --git a/example/src/components/FormSelectDemo.tsx b/example/src/components/FormSelectDemo.tsx
@@ -17,13 +17,13 @@ export const FormSelectDemo = () => {
       </label>
       <br />
       <FormSelect
-        nullOption="Select..."
+        value="Arsenal"
         optionGroups={[
           {
             label: 'English Premier League',
             displayCount: true,
             options: [
-              { label: 'Arsenal', value: 'Arsenal', selected: true },
+              { label: 'Arsenal', value: 'Arsenal' },
               { label: 'Chelsea', value: 'Chelsea' },
               { label: 'Liverpool', value: 'Liverpool' },
               { label: 'Manchester City', value: 'Manchester City' },