# Author React Design System React Design System library for use with the [Author v2](https://github.com/ONSdigital/eq-author-frontend) project. The Blaise Design System React Component Library has been phased out of the Author Design System React Component Library and will no longer be available. ## Setup To use this library as a dependency within a project, run: ``` yarn add https://github.com/ONSdigital/eq-author-design-system-react#main ``` Specifying `#main` installs the most recently released version of the Author React Design System's `main` branch. To install a specific release version of the Author React Design System in a project, replace `#main` with `#` in the above command. --- Before using components from this library, add the following code within the `` tags of your React project's `public/index.html` file: ``` ``` The above code implements the ONS Design System's global CSS style rules into your project - if this code is not included, style rules will not be applied to this library's components within your project. ## Testing changes Several new scripts are available to use when running tests: `yarn test: jest --watchAll` > This is a standard command to run your test suites. `yarn test:watch` > "jest --watch" Watch mode continuously monitors for changes in your project files and re-runs the tests whenever a change is detected. `yarn test:coverage` > "jest --collectCoverage --coverageDirectory=\"./coverage\"" - When you run this script (yarn test:coverage), it executes Jest and collects code coverage information.test:coverage), it executes Jest and collects code coverage information. `yarn test:verbose` > "jest --verbose" - The --verbose flag makes Jest output more detailed information during the test run, providing additional insights into the test execution process. ## Usage of new scripts: - All tests: `yarn test` - Specific test: ` yarn test `, eg `yarn test src/Utils/StringUtils.test.tsx` ## Add a component To add a component to the Author Design System React library from the Blaise Design System React Components library: - Open `src/index.tsx` - Within the `index` file's `import` block, add the name of the component - Within the `index` file's `export` block, add the name of the component - Update this README file's [available components](#available-components) to list the component The component can only be added if it is available in the Blaise Design System React Components library. - [ ] Select Node version 20: Use `nvm use 20` to ensure Node version 20 is selected. - [ ] Install node_modules: Run `yarn` to install the required dependencies. - [ ] Start Storybook: Run `yarn storybook` to start the Storybook development environment. To import a component from this library in a React project, use the following example: ``` import { Header, Button } from "author-design-system-react"; ``` Replace `Header, Button` with the required component(s) to import. --- To use a component once imported, use the following example: ``` <>