@royaloperahouse/chord 1.1.0 → 1.2.10

package/CHANGELOG.md

@@ -1,4 +1,193 @@
-# CHANGELOG
+## [2.1.10]
+- Add missing export for `CreditListing`
+
+## [2.1.9]
+- Add Credit Listing
+
+## [2.1.8]
+- Add Branding Link to Compact Header
+
+## [2.1.7]
+- Footer updates
+
+## [2.1.6]
+- Add X logo
+
+## [2.1.5]
+- Revert search error caused by previous version
+
+## [2.1.4]
+- Fix screenreader accessibility for accordions
+
+## [2.1.3]
+- Navigation: make links links
+- Clear testing errors
+
+## [2.1.2]
+- TextField: include optional width param
+
+## [2.1.1]
+- AnchorTabBar: change grid, to move tabs to the center
+
+## [2.1.0]
+- Convert Pagination to href instead of React Router Link
+
+## [2.0.0]
+- Remove swiper dependency
+## [1.28.0]
+- Add new RadioGroup component
+- Progress: add the steps
+- Compact header: hide CTA if the prop is undefined
+- Compact header: change highlight color for Stream variant
+
+## [1.27.1]
+- Fixed failing test on timer component
+
+## [1.27.0]
+- ContentSummary component can now be configured to be fully clickable
+
+## [1.26.0]
+- MiniCard and MinimalCarousel: add new components
+
+## [1.25.2]
+- Now clicking on the gray overlay closes the search bar
+
+## [1.25.1]
+- Stepper: Properly export component
+
+## [1.25.0]
+- Stepper: Add Stepper component
+
+## [1.24.2]
+- Increase Upsell Card Flag character limit to 30
+
+## [1.24.1]
+- Include link field to Upsell Cards
+
+## [1.24.0]
+- Implement Upsell Section & Upsell Cards
+
+## [1.23.2]
+- Fix BrandingStyle not showing bug
+
+## [1.23.1]
+- Fix enum on BrandingStyle
+
+## [1.23.0]
+- Re-enabled compact header on iOS
+
+## [1.22.0]
+- TextArea: Added new TextArea component
+- TickBox: Added disabled and error states
+
+## [1.21.1]
+- Made select state reset behaviour opt-in
+
+## [1.21.0]
+- TextLogo: add new component
+- Compact PageHeading: swap logo with TextLogo to fix iOS issues
+
+## [1.20.2]
+- Card: change cursor to default for cards without buttons
+- HighlightsCarousel: hide button in case there are no text for them
+
+## [1.20.1]
+- Reset the select component's selected value to the first option if options change
+
+## [1.20.0]
+- Tickbox: Add black-on-white option
+## [1.19.0]
+- Add timer to navigation basket
+## [1.18.3]
+- iOS devices show image instead of video for Compact PageHeading
+
+## [1.18.1-2]
+- Fix iOS exception on VideoControls
+
+## [1.18.0]
+- Add Compact PageHeading component
+
+## [1.17.0]
+- Add Page Heading Panel variant
+
+## [1.16.0]
+- Implemented a new Timer component
+- Progress: extended the component, added it to Storybook
+- PromoWithTags: added Timer component
+- PromoWithTags: added possibility to configure type of the buttons
+- Highlight Carousel: added Timer component
+- Card: added label
+
+## [1.15.1]
+- Change to pagination component to align page numbers with URL numbers.
+
+## [1.15.0]
+- Implemented a new Select component
+
+## [1.14.0]
+- Added standfirst functionality to Accordion/ Accordions component and theme for Schools Platform
+
+## [1.13.2]
+- Add styled-components to dev-dependencies, to fix issues with tests that appear after adding the new styled components
+
+## [1.13.1]
+- AnchorTabBar: fix the issues on mobile devices that are related to scroll/stickiness
+
+## [1.13.0]
+- Implemented a new TextField component
+
+## [1.12.4]
+- Search: change copy
+
+## [1.12.0]
+- Search: Extend ContentSummary and SearchBar components to support new search results
+
+## [1.11.0]
+- Carousels: Rewrite logic that cuts description, to support older browsers
+
+## [1.10.0]
+- PageHeadingImpact: Replace CSS background-image with HTML image element
+
+## [1.9.0]
+- Card: Add a new prop for the hover line color
+
+## [1.8.0]
+- SearchBar: Disable
+
+## [1.7.2]
+- Add imageAltText to Card component
+
+## [1.7.0]
+- Add new ContentSummary component
+- Add new ContentSummarySection component
+- Add Content Summary Section and individual Content Summaries
+
+## [1.6.3]
+- Add exports for zIndexes
+
+## [1.6.2]
+- ImpactHeader: add alt text for sponsors logo custom image 
+
+## [1.6.1]
+- PageHeadingHighlight component: update exports
+
+## [1.6.0]
+- Add new PageHeadingHighlight component
+
+## [1.5.0]
+- PageHeading: decrease header height when title is not available
+
+## [1.4.0]
+- ImpactHeader: make it possible to pass custom image as a sponsor logo
+
+## [1.3.1]
+- Enable reduced size textLinks on PromoWithTags/asCard
+
+## [1.3.0]
+- Add Static Actvivity Cards as PromoWithTags variant
+
+## [1.2.0]
+- Card: buttons do not change position on mobiles; 
 
 ## [1.1.0]
 - TitleWithCTA: fix cases with a long title
@@ -11,6 +200,9 @@
 - Card component: buttons are aligned by height
 - Highlight carousel: added possibility to display two CTAs
 
+## [0.7.50]
+- Add Static Actvivity Cards
+
 ## [0.7.49]
 - Change button behaviour on stream and DED pages
 
@@ -233,7 +425,7 @@
 - Fix in PageHeadingImpact image
 
 ## [0.4.4]
-- AnchorTapBar a11y: added tabIndex to links
+- AnchorTabBar a11y: added tabIndex to links
 
 ## [0.4.3]
 - Prevent focus when navigation tab is clicked
@@ -245,7 +437,7 @@
 ## [0.4.1]
 - Swiper included as dependency
 - Fix for italics in Editorial, Card and PromoWithTitle components
-- Extra Props for AnchorTapBar
+- Extra Props for AnchorTabBar
 
 ## [0.4.0]
 - Navigation Logo breaking change
@@ -287,7 +479,7 @@
 - Subtitles 2 typography changes
 
 ## [0.3.3]
-- Added AnchorTapBar Component
+- Added AnchorTabBar Component
 - Added Accordion Component
 - Added Card Component
 - Fixes to fonts setup

package/README.GIT

@@ -1,122 +1,277 @@
-# Royal Opera House - Front End Design System
+# Royal Opera House Chord - Front End Design System
 
-Welcome to the Royal Opera House Front End Design System, `@royaloperahouse/chord`.
+Welcome to The Royal Opera House Front End Design System, `@royaloperahouse/chord`
 
 This package is a library of UI components intended to be used in the ROH website.
 
 It uses React, TypeScript, TSDX and Storybook.
 
-## Commands
+The NPM packages are published at [https://www.npmjs.com/package/@royaloperahouse/chord](https://www.npmjs.com/package/@royaloperahouse/chord)
 
-The required package dependencies need to be insalled using `yarn`. Once ready you can issue the following:
+The Storybook for the latest version of the library is hosted at [chord.roh.org.uk](chord.roh.org.uk)
 
-To run Lint on the package use:
+
+## Prerequisites
+---
+
+* Make sure the required package dependencies are installed using `yarn install`
+
+* If this is the first time you are working on Chord, make sure to run `yarn build` to build all the modules.
+
+* **To deploy the storybook publicly** you will need credentials for the **parent** 'Royal Opera House' AWS account in your `~/.aws/credentials` file.
+  * The deploy script expects these to be called `[parent]`.
+
+  * You can find these values at:
+  
+    *AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' -> 'Command line or programmatic access'*
+
+* **To deploy a preview** for demo / QA you will need the `CHROMATIC_PROJECT_TOKEN` -- find this in 1Password
+
+
+* **To publish the NPM package** you will need the ROH `NPM_TOKEN` -- find this in 1Password
+
+
+## Versioning
+---
+
+We use [Semantic Versioning](https://semver.org/) for Chord.
+
+Given a version number MAJOR.MINOR.PATCH, increment the:
+
+* MAJOR version when you make incompatible library changes
+* MINOR version when you add functionality in a backwards compatible manner
+* PATCH version when you make backwards compatible bug fixes
+
+When you create a new release always update the `CHANGELOG` and `package.json`
+
+Increment your version from the latest stable version on `chord-releases`
+
+
+## Deploying the Storybook
+---
+
+### **1. To build and deploy locally**
+
+You can quickly build and serve the contents of `/storybook-static` from your local machine, for development and manual testing. To do this run:
 
 ```bash
-yarn lint # you can also use the --fix option to perform automatic fixes
+yarn storybook
 ```
 
-To run the unit tests (using Jest) use:
+By default the storybook will be accessible at
+[http://localhost:6006/]()
 
-```bash
-yarn test # you can also use the -u option to update snapshots if needed
+The server will hot-reload on most changes.
+
+### **2. To deploy a preview version remotely**
+
+You can deploy a release candidate, or work-in-progress to [Chromatic](https://www.chromatic.com/) for showcase or QA.
+
+**NOTE:** you will need the `CHROMATIC_PROJECT_TOKEN` as described in *Prerequisites* above.
+
+Either set the token as a shell variable or use a `.env` file in the chord root directory containing the token, as so:
+
+```
+CHROMATIC_PROJECT_TOKEN=tokengoeshere
 ```
 
-To run the unit tests (using Jest) and store them for display in storybook use:
+Run:
 
-```bash
-yarn test-storybook # you can also use the -u option to update snapshots if needed
+```
+yarn deploy-storybook-dev
 ```
 
-To run storybook use:
+to build and deploy the storybook from your repo to Chromatic.
 
-```bash
-yarn storybook
+You will find the address of your deployed storybook in the console output, looking something like this:
+
+`→ View your Storybook at https://randomHexString-randomAlphabeticalString.chromatic.com`
+
+### **3. To deploy a release version**
+ 
+You can deploy the contents of `./storybook-static` to S3 as a static site, which is permanently accessible at [chord.roh.org.uk](chord.roh.org.uk)
+
+**NOTE:** To do this you will need the correct `AWS` credentials set up, as described in *Prerequisites* above.
+
+First build the storybook using:
+
+```
+yarn build-storybook
 ```
 
-To build a static version of storybook use:
+then run:
 
 ```bash
-yarn build-storybook
+yarn deploy-storybook
 ```
 
-This will create a static copy in `./storybook-static`, and there is an index.html page inside the core directory. This allows the site to be previewed directly in the git repository via serving pages (it needs to be configured for that branch).
+> **IMPORTANT:** This URL is intended to showcase the latest stable version of Chord, it should be kept up to date with the main `chord-releases` branch and should **only** be used for release versions. If you want to deploy a development version follow the steps above under *To deploy a preview version remotely*.
+
+
+## Releasing a New Package Version
+---
+
+This is the procedure for releasing a new Chord NPM package.
+
+There are two types of package:
 
-To deploy the storybook publically:
+A **snapshot** can be published to use a development version of the Chord library in our frontend staging environments, to perform integrated, manual testing.
 
-### Prerequisites
+A **stable** package is published for use in production.
 
-Make sure you have credentials for the *parent* 'Royal Opera House' AWS account in your `~/.aws/credentials` file. The deploy script expects these to be called `[parent]`.
+**NOTE:** You will need the `NPM_TOKEN`, as described in 'Prerequisites' above.
 
-You can get these values at:
+### **1. To release a snapshot version**
 
-AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' ->
-'Command line or programmatic access'
+> **IMPORTANT:** Make sure you always publish your **snapshots** from `chord-development` after merging in your feature branch.
 
-### Deployment
+For snapshots, `RELEASE_VERSION` should be the same as the latest **stable** version of the Chord Library, as found in `chord-releases`, followed by an **unused** lowercase letter.
 
-To deploy, first *build* the storybook as above
+For example, if the latest stable release was 1.42.0, and the last snapshot published to NPM was 1.42.0-w, you would use RELEASE_VERSION `1.42.0-x`
 
-then use:
+To publish a snapshot use:
 
 ```bash
-yarn deploy-storybook
+NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
 ```
 
-This will deploy the contents of `./storybook-static` to S3 as a static site accessible at [chord.roh.org.uk](chord.roh.org.uk)
+The version published to NPM will be named, e.g. `1.42.0-a-chord-development`, use this to install the snapshot package in the frontend repos.
+
+### **2. To release a stable version**
+
+> **IMPORTANT:** Make sure you always publish your **stable** packages from `chord-releases` after merging in your feature branch.
 
-To build the package use:
+For stable releases, increment your version from the latest **stable** version found on `chord-releases`, following the rules described in *Versioning* above, and use this as `RELEASE_VERSION`. (Make sure it matches the version in your `package.json` and `CHANGELOG.md`!)
+
+To publish a stable package use:
 
 ```bash
-yarn build
+NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
 ```
 
-To release a new version.
 
-Release will be published in npm (NPM_TOKEN will be required)
-Storybook will be pushed to bitbucket. *** Push will be done Ensure you don't have things pendint to push
+## Using the Package
+---
+
+The package is deployed to NPM, and can be installed using yarn or npm:
 
 ```bash
- NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
+npm i --save @royaloperahouse/chord
+```
+```bash
+yarn add @royaloperahouse/chord
 ```
 
 
-MORE INFO TO FOLLOW - PARTICULARLY FOR THE CI SETUP AND HOW PACKAGES ARE PUSHED.
+## Testing
+---
 
-# Recommended Use of Package
+To **Lint** the package use:
 
-The package is deployed to NPM, and can be installed using yarn or npm:
+```bash
+yarn lint
+# Use the --fix option to perform automatic fixes
+```
+
+To run the **unit tests** (using Jest) use:
 
 ```bash
-    npm i --save @royaloperahouse/chord
+yarn test
+
+# Use the -u option to update snapshots if needed
+# Run `yarn test:watch` to re-run tests on changes
 ```
+
+To **run and and store the unit tests** for display in storybook use:
+
 ```bash
-    yarn add @royaloperahouse/chord
+yarn test-storybook
+# Use the -u option to update snapshots if needed
 ```
 
-# Processes to follow prior to commits
 
-Before a commit is made you need to do the following:
+## Development Process
+---
 
-- Make sure that you are in your own work branch (properly named, including the JIRA ticket number and a short description)
-- `yarn lint` - ensure that you are not introducing errors
-- `yarn test` - ensure that tests are running as expected
-- `yarn test-storybook` - Save the test results to for the static site
-- `yarn build-storybook` - Update the static site
-- Commit your changes in your branch locally
+### **1. Branching Model**
+* The Chord project lives in the `roh-components` *monorepo*
+* When working on Chord, treat the `roh-components/packages/chord` directory as your root
+* The Chord **development** branch is currently `chord-development`
+* The Chord **main** branch is currently `chord-releases`
+* All work should be done on a correctly named **feature branch** of the format: `issueType/ticketNumber-short-description-of-feature`, e.g. `feature/RD-1234-update-chord-documentation`
+* Always create your feature branch FROM, and submit pull requests TO, the **main** branch
+* For **QA / UAT** of a Chord component in isolation: following review you should deploy a preview version to Chromatic straight from your **feature branch** _without_ merging to development
+* For releasing an **NPM snapshot**: merge your feature branch into the **development** branch and publish the NPM snapshot from there
 
-Next, if you are ready to merge into the main development branch then:
+### **2. Detailed Workflow**
+
+#### **Before review:**
+
+* Git pull the latest version of `chord-releases`
+* Checkout a new, correctly-named feature branch from `chord releases`
+* Do your work on this feature branch
+* Run: `yarn lint`
+* Run: `yarn test`
+* Commit your changes
+* Create a pull request from your feature branch to `chord-releases`
+* Add the appropriate reviewers
+
+#### **Before QA / UAT:**
+
+After your PR is approved, you have two options:
+
+**i.** For QA of a component in isolation:
+
+* Follow the steps above in *Deploying the Storybook -> 2. Deploying a preview version remotely*
+* Share the generated Chromatic URL with the appropriate people for QA / UAT
+
+**ii.** For integrated testing of a component in the frontend staging environments:
+
+* Check out the `chord-development` branch
+* Merge your work in to `chord-development`
+* Follow the steps above under *Publishing a New Package Version -> 1. To release a snapshot version*
+* Git push the updated `chord-development` branch to remote
+* Finally, in the frontend repo:
+
+1. Update the `package.json` to reference the new snapshot version
+2. Run: `yarn install`
+3. Deploy the frontend to a staging environment
+
+#### **When ready for production:**
+
+* Return to your chord **feature branch**
+* Update the chord version in `package.json`, incrementing from the last **stable** release, found in `chord-releases`, and following the rules described in the *Versioning* section
+* Update `CHANGELOG.md`, adding the new version number and a short description of your changes
+* Run: `yarn lint`
+* Run: `yarn test`
+* Run: `yarn test-storybook -u`
+* Run: `yarn build-storybook`
+* Git commit, push, and update your PR for final approval
+* Merge your approved PR to `chord-releases`
+* Follow the steps in *Publishing a New Package Version -> 2. To release a stable version* to publish the NPM package
+* Finally, follow the steps in *Deploying The Storybook -> 3. To deploy a release version*, to update the public Chord Storybook page
+
+Once you have successfully published a new release version, you can open a ticket to update to this version in any of the frontend repos.
+
+
+## Notes
+---
+### The `storybook-static` folder
+
+This folder contains all the HTML / JS required to deploy the Storybook as a static site. It's autogenerated whenever the Storybook is built and therefore will show up a lot of merge conflicts when you merge other branches into your feature branch. It is best to leave generating the storybook until the later part of your workflow, but in case you run into conflicts earlier, it's ok to just delete the folder and regenerate using:
+
+```bash
+yarn build-storybook
+```
 
-- _*ensure that you pull the latest changes from that branch into your new branch, resolving any merge conflicts that may arise*_
-- Commit any merge changes locally
-- Push your branch changes to the origin repo
-- Raise a Pull Request to merge back into the main development branch, AND ensure that the required reviewers are assigned.
-- The reviewers may raise issues, and once resolved, they will be responsible for performing the merge.
+For the same reason changes to this folder will cause a lot of big diffs, when looking at a PR, but can mostly be skimmed over unless something looks unusual.
 
-### Example
+---
+### Examples
 
 There is an example implementation in the example folder. Alternatively there are also integration examples in storybook. Make sure to keep these updated so as to showcase the current components available.
 
+---
 ### Bundle analysis
 
-Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `yarn size` and visulize it with `yarn analyze`.
+Calculate the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `yarn size` and visualize it with `yarn analyze`.

package/README.md

@@ -1,6 +1,6 @@
 # Royal Opera House - chord 
 
-Welcome to the Royal Opera House library components  `@royaloperahouse/chord`.
+Welcome to The Royal Opera House library components  `@royaloperahouse/chord`.
 
 This package is a library of UI components intended to be used in the ROH website.
 
@@ -55,7 +55,7 @@ const App = ({ children }: InnerProps): React.ReactElement => (
 
 ## Components
 
-Accordion, Accordions, AltHeader, AnchorTapBar, AnnouncementBanner, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ControlledDropdown, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTags, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, TertiaryButton, TextLink, TextOnly, Tickbox, TitleWithCTA, ThemeProvider, TypeTags, Quote
+Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ControlledDropdown, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTags, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, TertiaryButton, TextLink, TextOnly, Tickbox, TitleWithCTA, ThemeProvider, TypeTags, Quote
 
 ## Types