Prepare documentation and contribution for v.1.0.0

CHANGELOG.md

@@ -1,3 +1,78 @@
+## 1.0.0 (15/04/2024)
+
+<a name="1.0.0" />
+
+**Design System**
+
+- [Highlight](https://github.com/Capgemini/dcx-react-library/issues/535)
+- [KeyboardInput](https://github.com/Capgemini/dcx-react-library/issues/534)
+- [Link](https://github.com/Capgemini/dcx-react-library/issues/533)
+- [Paragraph](https://github.com/Capgemini/dcx-react-library/issues/566)
+- [Abbreviate](https://github.com/Capgemini/dcx-react-library/issues/530)
+- [Code Snippet](https://github.com/Capgemini/dcx-react-library/issues/532)
+- [Preformatted Text](https://github.com/Capgemini/dcx-react-library/issues/536)
+- [Description List](https://github.com/Capgemini/dcx-react-library/issues/502)
+- [Blockquote](https://github.com/Capgemini/dcx-react-library/issues/531)
+- [Form Input](https://github.com/Capgemini/dcx-react-library/issues/578)
+- [DescriptionList](https://github.com/Capgemini/dcx-react-library/issues/587)
+- [Radio Button](https://github.com/Capgemini/dcx-react-library/issues/580)
+- [RadioGroup](https://github.com/Capgemini/dcx-react-library/issues/608)
+- [Checkbox](https://github.com/Capgemini/dcx-react-library/issues/598)
+- [Checkbox Group](https://github.com/Capgemini/dcx-react-library/issues/579)
+
+**New Components**
+
+- [Accordion](https://github.com/Capgemini/dcx-react-library/issues/209)
+- [ButtonGroup](https://github.com/Capgemini/dcx-react-library/issues/458)
+- [Card](https://github.com/Capgemini/dcx-react-library/issues/550)
+
+**Enhancement**
+
+- [Autocomplete - Add option to show all values](https://github.com/Capgemini/dcx-react-library/issues/292)
+- [Button - should allow to pass an html content](https://github.com/Capgemini/dcx-react-library/issues/563)
+- [Checkbox - add error state](https://github.com/Capgemini/dcx-react-library/issues/581)
+
+**A11y**
+
+- [remove tab index if not set](https://github.com/Capgemini/dcx-react-library/pull/630)
+- [Button component - does not render the aria-label attribute properly](https://github.com/Capgemini/dcx-react-library/issues/618)
+- [Tab - Actionable Element](https://github.com/Capgemini/dcx-react-library/issues/629)
+- [FormRadio and FormInput - does not offer a capability to not add an aria-label](https://github.com/Capgemini/dcx-react-library/issues/621)
+- [FormInput - should not have a tabindex defined](https://github.com/Capgemini/dcx-react-library/issues/623)
+- [FormInput - An aria attribute has been given an invalid value](https://github.com/Capgemini/dcx-react-library/issues/631)
+- [Autocomplete - is not accessible and needs to be adjusted](https://github.com/Capgemini/dcx-react-library/issues/624)
+- [Details - contains a default TabIndex](https://github.com/Capgemini/dcx-react-library/issues/640)
+
+**Bug**
+
+- [TabGroup - key prop](https://github.com/Capgemini/dcx-react-library/issues/538)
+- [TabGroup - displaying incorrect CSS](https://github.com/Capgemini/dcx-react-library/issues/565)
+- [Select - when you pass the default value it doesn't allow to change on select](https://github.com/Capgemini/dcx-react-library/issues/572)
+- [Heading - does no apply the css correctly](https://github.com/Capgemini/dcx-react-library/issues/610)
+- [Form input - props wrong typing and expose input ref](https://github.com/Capgemini/dcx-react-library/issues/626)
+
+**Documentation**
+
+- [design system](https://github.com/Capgemini/dcx-react-library/issues/517)
+- [Group new components within Storybook](https://github.com/Capgemini/dcx-react-library/issues/513)
+- [google crowler](https://github.com/Capgemini/dcx-react-library/issues/548)
+- [Update storybook documentation to include design system](https://github.com/Capgemini/dcx-react-library/issues/547)
+
+**Dependencies**
+
+- [remove CRA from Example and replace with Vite](https://github.com/Capgemini/dcx-react-library/issues/599)
+- [Close vulnerabilities](https://github.com/Capgemini/dcx-react-library/issues/526)
+
+**Breaking Changes**
+
+- [Autocomplete - adding hiddenErrorText as mandatory](https://github.com/Capgemini/dcx-react-library/issues/638)
+
+**Upgrade notes**
+
+- If you upgrading from a previous release and you use the Autocomplete component it will requires the addition of a new property called **hiddenErrorText**.
+  This property will require a string value to be set and provides a visually hidden text for screen readers to make your component fully accessible
+  å
+
 ## 0.8.0 (15/09/2023)
 
 <a name="0.8.0"></a>

README.md

@@ -1,14 +1,16 @@
-[![CircleCI](https://circleci.com/gh/Capgemini/dcx-react-library.svg?style=svg&circle-token=c05d3eb49441c9985f5424f28f788f1a31556503)](LINK)
+[![CircleCI](https://circleci.com/gh/Capgemini/dcx-react-library.svg?style=svg)](https://circleci.com/gh/Capgemini/dcx-react-library)
 
 # DCX React library
 
 ## Motivation
 
-`dcx-react-library` is a React library with a set of components ready to use in your project.
+`dcx-react-library` is a React library with a set of components ready to use in your project.  
+There are plenty of libraries available in React that can help to increase your productivity however most of them contain lots of css and are hard to style based on your project's requirements.  
+dcx-react-library is **UI/UX agnostic**, this allows the dcx-react-library to be easily integrated into any project.  
+You have few options to make your components good looking :lipstick::
 
-There are plenty of libraries available in React that can help to increase your productivity however most of them contain lots of css and are hard to style based on your project's requirements.
-
-dcx-react-library is **UI/UX agnostic** so you need to provide styling to match the look and feel of your application. This allows the dcx-react-library to be easily integrated into any project.
+1. You can provide the styling to match the look and feel of your application passing the class to every component :construction_worker:
+2. :fire: :fire:You can use the design system tokens that we built for you - from version 1.0.0 :fire: :fire:
 
 ## Components
 
@@ -19,10 +21,12 @@ In Storybook, each component is presented with 4 main sections:
 - **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.
+- **design system**: an example of how to style the component using the tokens exposed by the design system.
 
 ## 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:
+Using dcx-react-library should not require any particular setup.  
+You only need to import the component and use it :smiley:
 
 Steps:
 
@@ -46,20 +50,49 @@ We don't ship `dcx-react-library` with any included CSS. However, some styleshee
 import '@capgeminiuk/dcx-react-library/dist/dcx-react-library.css';
 ```
 
+## Design System
+
+The `dcx-react-library` supports opt-in styling customizable via [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
+
+To keep the library **UI/UX agnostic** the styles are not shipped by default. In order to include them in your project you can import them as follows:
+
+```jsx
+/* main.jsx */
+
+import '@capgeminiuk/dcx-react-library/design-system/index.css';
+```
+
+Note that this will setup the styling for all the components in the library. You may want to fine-tune the imports if performance is critical for your application.
+
+All the components have their own stylesheet and can be imported individually when needed:
+
+```jsx
+/* Needed for core styles */
+import '@capgeminiuk/dcx-react-library/design-system/base.css';
+
+/* Individual imports, works well with tree-shaking */
+import '@capgeminiuk/dcx-react-library/design-system/form-control.css';
+import '@capgeminiuk/dcx-react-library/design-system/button.css';
+// ...
+```
+
+Don't forget to add the `base.css` import before loading the individual stylesheets. It contains the core definitions used for the design system to work.
+
 ## Contributing
 
 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/).
+- 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/).
+- If you want to know more about the DCX React Library 1.0.0 release please read our [1.0.0 release update blog post](https://capgemini.github.io/development/dcx-react-library-v1-is-here)
 
 ## 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.
 
-## Contributors ✨
+## Contributors ✨ ✨
 
 Thanks goes to these wonderful people
 
@@ -240,4 +273,34 @@ Thanks goes to these wonderful people
       </a>
     </td>
   </tr>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/ybayraktutan">
+        <img src="https://avatars.githubusercontent.com/u/74928622?v=4" width="100px;" alt="ybayraktutan"/>
+        <br />
+        <sub><b>Bayraktutan Yasemin</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/shivammuttoo">
+        <img src="https://avatars.githubusercontent.com/u/5648449?v=4" width="100px;" alt="shivammuttoo"/>
+        <br />
+        <sub><b>Muttoo Shivam</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/josepholdfield">
+        <img src="https://avatars.githubusercontent.com/u/48091537?v=4" width="100px;" alt="Joseph-Oldfield"/>
+        <br />
+        <sub><b>Joseph Oldfield</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/AranzazuVM">
+        <img src="https://avatars.githubusercontent.com/u/148540415?v=4" width="100px;" alt="AranzazuVM"/>
+        <br />
+        <sub><b>Aranzazu Vázquez Moreno</b></sub>
+      </a>
+    </td>
+  </tr>
 </table>

example/package.json

@@ -27,17 +27,17 @@
     ]
   },
   "devDependencies": {
-    "@types/node": "20.12.3",
+    "@types/node": "20.12.7",
     "@types/react-router-dom": "5.3.3",
-    "@typescript-eslint/eslint-plugin": "7.5.0",
-    "@typescript-eslint/parser": "7.5.0",
+    "@typescript-eslint/eslint-plugin": "7.7.1",
+    "@typescript-eslint/parser": "7.7.1",
     "@vitejs/plugin-react": "4.2.1",
-    "eslint": "8.57.0",
+    "eslint": "9.1.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.6",
     "node-sass": "9.0.0",
-    "typescript": "5.4.3",
-    "vite": "5.2.7",
+    "typescript": "5.4.5",
+    "vite": "5.2.10",
     "web-vitals": "3.5.2"
   }
 }