@raspberrypifoundation/design-system-react 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -0,0 +1,203 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## v1.7.0 - 2024-12-03
+
+### Added
+
+- Added support for closing `Alert`s (#112)
+
+### Changed
+
+- Update README so labels show (#110)
+
+## v1.6.0 - 2024-10-24
+
+### Changed
+
+- Update to use yarn instead of npm and set peerdependency for react-router-dom (#98)
+- Update InputField, SearchInput, SelectInput, TextInput and TextareaInput to link label to input field correctly using id (#107)
+- Update `README.md` to include global header (#97)
+- Update the search input to accept an onChange function and a default value. Add button type to the search button. (#108)
+
+## v1.5.0
+
+## Fixed
+
+- Fix (#103) using wrong version number (#106)
+- Fix (#101) being added to wrong release in changelog (#103)
+
+### Changed
+
+- Alert component can now accept children (#101)
+
+## v1.4.0
+
+### Added
+
+- Table component (#92)
+
+## v1.3.1
+
+### Fixed
+
+- Fixed `exports` change in 1.3.0 (#89) to use relative path in `package.json`
+
+## v1.3.0
+
+### Changed
+
+- Use `exports` instead of `main`/`module` in `package.json` to define what is exported (#89)
+
+## v1.2.1
+
+### Fixed
+
+- Added missing Tag export
+
+## v1.2.0
+
+### Added
+
+- SearchInput component (#82)
+- InputLabel component (#71)
+- Fieldset component (#70)
+- Add changelog update check to github workflow (#73)
+- Tag component (#81)
+- Add details to `README.md` on using `npm link` with `design-system-core` (#80)
+
+### Changed
+
+- Update design-system-core to v1.3.2
+- Update nodejs to latest LTS release (v20.16.0) to match design-system-core (#77)
+
+## Fixed
+
+- Update `.nvmrc` to match `.tool_versions` in order to fix builds (#84)
+
+## v1.1.16
+
+### Added
+
+- TextareaInput component
+- RadioInput component
+- Updated `design-system-core` to `v1.1.1`
+
+## v1.1.15
+
+### Fixed
+
+- Updated Core to v1.1.0
+- Update `ProgressBar` as per https://github.com/RaspberryPiFoundation/design-system-core/pull/124
+  - This does not result in breaking changes to this library
+
+## v1.1.14
+
+### Fixed
+
+- Remove defaultProps from accordion
+
+## v1.1.13
+
+### Fixed
+
+- Ensure aria-label on button is passed through unchanged
+
+## v1.1.12
+
+### Fixed
+
+- Only change the paragraph spacing of the alerts
+
+## v1.1.11
+
+### Fixed
+
+- Fix linting by assigning options to a variable
+- Remove reliance on defaultProps (to be deprecated)
+- Tidy up alert padding
+
+## v1.1.9
+
+- Fixing `rollup` config
+
+## v1.1.8
+
+### Changed
+
+- `Button` component now uses the `react-router-dom` `Link` component for links rather than a plain anchor tag
+
+## v1.1.7
+
+### Fixed
+
+- Fixed legacy `Button` component use case with React element as icon
+
+## v1.1.6
+
+### Fixed
+
+- Exports Alert component
+
+## v1.1.5
+
+### Added
+
+- Alert component added
+
+## v1.1.4
+
+### Fixed
+
+- Fixes bug with SelectInput to allow setting of placeholder value
+
+## v1.1.0
+
+### Added
+
+- v1.1 TextInput component added
+- v1.1 SelectInput component added
+- v1.1 CheckboxInput component added
+- v1.1 ProgressBar component added
+
+## v1.0.0
+
+### Added
+
+- Button additions to bring in line with Core ([#15](https://github.com/RaspberryPiFoundation/design-system-react/pull/15))
+  - Added: Icon library/font (same as core)
+  - Added prop: iconPosition
+  - Added prop: variant, danger
+  - Added prop: fullWidth
+  - Storybook: Enabled icon changing
+  - Storybook: Added link to icon names
+  - Storybook: Added button docs
+- General storybook additions ([#15](https://github.com/RaspberryPiFoundation/design-system-react/pull/15))
+  - Storybook: Added pseudo-state addon
+  - Storybook: Added "Install" docs
+  - Storybook: Added docs styles
+
+### Changed
+
+- Button changes to bring in line with Core ([#15](https://github.com/RaspberryPiFoundation/design-system-react/pull/15))
+  - Renamed prop: enabled -> disabled
+  - Renamed prop: textAlways -> iconOnly
+  - Renamed prop: small -> size
+  - Removed prop: active
+  - Removed prop: textOnHover (not actually used/functional)
+  - Changed prop: icon, now uses same icon font as core.
+
+### Removed
+
+- Button changes to bring in line with Core ([#15](https://github.com/RaspberryPiFoundation/design-system-react/pull/15))
+  - Removed prop: active
+  - Removed prop: textOnHover (not actually used/functional)
+
+### Fixed
+
+- General storybook improvements ([#15](https://github.com/RaspberryPiFoundation/design-system-react/pull/15))
+  - Storybook: Updated "Introduction" docs
+  - Storybook: Reordered addons

package/README.md

@@ -1,60 +1,121 @@
-# Design System React
+# RPF Design System - React
+
+The React implementation of the **Raspberry Pi Foundation Design System**
+
+<a href="https://design-system-react.rpf-internal.org/?path=/docs/documentation-introduction--documentation">![Foo](https://img.shields.io/badge/React-Components_(Storybook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=00AECE)</a>
+
+### Design System links:
+<a href="https://rpf-design-system.pages.dev/">![Foo](https://img.shields.io/badge/Design_System-Documentation-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CD2355)</a>
+<br>
+<a href="https://github.com/raspberrypifoundation/design-system-core/">![Foo](https://img.shields.io/badge/Core-Repository-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=D95495)</a>
+<a href="https://design-system-core.rpf-internal.org/?path=/docs/about--docs">![Foo](https://img.shields.io/badge/Core-Components_(Storybook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=D95495)</a>
+<br>
+<a href="https://github.com/raspberrypifoundation/design-system-rails/">![Foo](https://img.shields.io/badge/Rails-Repository-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CC0000)</a>
+<a href="https://design-system-rails.rpf-internal.org/lookbook">![Foo](https://img.shields.io/badge/Rails-Components_(Lookbook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CC0000)</a>
+
+---
 
 ## Usage
 
-Using `npm`:
+Using `yarn`:
 
 ```bash
-npm install @raspberrypifoundation/design-system-react
-npm run storybook
+yarn add @raspberrypifoundation/design-system-react
 ```
 
-Using `yarn`:
+## Development
 
-```bash
-yarn install @raspberrypifoundation/design-system-react
-yarn storybook
+Dependencies:
+* asdf (https://asdf-vm.com/)
+
+```
+asdf install
 ```
 
+Enable corepack, which adds the yarn binary to your path
+```
+corepack enable
+```
+
+Install packages:
+
+```
+yarn
+```
+
+Run Storybook:
+
+```
+yarn run storybook
+```
+
+### Testing
+
+Run the tests with `yarn run test`.
+
 ### Working with a local version of [design-system-core](https://github.com/RaspberryPiFoundation/design-system-core)
 
-Sometimes you may want to work on `design-system-core` and `design-system-react` at the same time. You can do this by working with your local version of core using `npm link`.
+Sometimes you may want to work on `design-system-core` and `design-system-react` at the same time. You can do this by working with your local version of core using `yarn link`.
+
+1. In your `design-system-react` repo and tell the application to use your local version of `design-system-core`.  In this command `../design-system-core` should be replaced with the path to your copy of `design-system-core`.
+
+```
+yarn link ../design-system-core
+```
 
-1. Navigate to your local `design-system-core` repo create a global symbolic link.
+The output should look include something like
 
 ```
-npm link
+➤ YN0000: ┌ Resolution step
+➤ YN0085: │ + @raspberrypifoundation/design-system-core@portal:/Users/testy.mctestface/path/to/design-system-core::locator=%40raspberrypifoundation%2Fdesign-system-react%40workspace%3A.
+➤ YN0085: │ - @raspberrypifoundation/design-system-core@npm:1.4.0
+➤ YN0000: └ Completed
 ```
 
-2. In `design-system-react` remove the node_modules folder and install the application.
+2. Set `NODE_OPTIONS=--preserve-symlinks`, to make sure the local version of `design-system-core` is being used.
 
 ```
-rm -rf node_modules && npm i
+export NODE_OPTIONS="$NODE_OPTIONS --preserve-symlinks"
 ```
 
-3. Navigate to your local `design-system-react` repo and tell the application to use the global symbolic link. You should notice "changed 1 package" in the response.
+3. Re-start storybook
 
 ```
-npm link @raspberrypifoundation/design-system-core
+yarn run storybook
 ```
 
 #### Troubleshooting
 
-If you are experiencing issues and believe design-system-react is not using your local version of design-system-core, or if you are running into issues running `npm link`, try the following:
+If you are experiencing issues and believe design-system-react is not using your local version of design-system-core, or if you are running into issues running `yarn link`, try the following:
 
 - Check that `design-system-react` and `design-system-core` are both using the same `nodejs` version in `.tool_versions`. If they are not, update the node version(s) in `.tool_versions` locally and retry the steps above. If this was the issues / the `nodejs` versions are not the same, consider creating a PR to bring them in-line.
 
-- Ensure that you are running the `npm link` command in step 3 AFTER step 2. Doing these in the wrong order will not work.
+- Make sure the `NODE_OPTIONS=--preserve-symlinks` is set in the same terminal (i.e. shell instance) as Storybook, and that Storybook has been restarted.
+
+- Ask in the `design-system` Slack channel.
+
+## Node versions
+
+We've two places where the NodeJS version is specified, and we should keep these in-sync.  The `.tool-versions` is used for local development, installed via `asdf`.  The `.nvmrc` is used in the CI/publish Github action, and the Cloudflare pages build process.  If you change one, please change t'other.
 
 ## Deployment
 
 Create a new [release](https://github.com/RaspberryPiFoundation/design-system-react/releases):
 
-- Update the changelog, package.json (then run npm i to update package-lock.json) and commit.
+- Use `yarn version -i minor` to increment the version in `package.json`.  You can also use `major` or `patch` instead of `minor` here.
+- Update the changelog
+- Commit and push to a branch, and open a PR for review.
+
+Make a cuppa while a peer reviews the release.
+
+- Once approved, merge your PR to main
 - Click 'Draft a new release'
 - Type the version in the dropdown and click 'Create new tag'
 - Add a title and some notes about what the release contains
 - Click 'Publish release' (leave 'Set as latest release' checked) and a build will be kicked off
+
+Once published
+
 - Add new version to `package.json` in your app
 
 ## Using Docker