@royaloperahouse/harmonic 0.14.0-a → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +7 -3
  2. package/README.GIT +294 -0
  3. package/README.md +43 -252
  4. package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
  5. package/dist/components/atoms/Tab/Tab.d.ts +1 -1
  6. package/dist/components/atoms/TextField/TextField.style.d.ts +1 -1
  7. package/dist/components/index.d.ts +3 -3
  8. package/dist/components/molecules/BodyContent/BodyContent.d.ts +1 -6
  9. package/dist/components/molecules/Card/Card.style.d.ts +1 -1
  10. package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +4 -2
  11. package/dist/components/molecules/ContentSummary/ContentSummary.style.d.ts +1 -1
  12. package/dist/components/molecules/Information/Information.style.d.ts +1 -1
  13. package/dist/components/molecules/PageHeading/index.d.ts +1 -2
  14. package/dist/components/molecules/Pagination/Pagination.style.d.ts +1 -1
  15. package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
  16. package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +2 -2
  17. package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +3 -273
  18. package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +3 -273
  19. package/dist/components/molecules/UpsellCard/UpsellCard.style.d.ts +11 -276
  20. package/dist/components/molecules/index.d.ts +2 -4
  21. package/dist/components/organisms/Carousels/Carousel/Carousel.style.d.ts +1 -271
  22. package/dist/components/organisms/Navigation/Navigation.d.ts +1 -1
  23. package/dist/components/organisms/UpsellSection/UpsellSection.style.d.ts +1 -272
  24. package/dist/harmonic.cjs.development.css +8 -340
  25. package/dist/harmonic.cjs.development.js +6732 -6998
  26. package/dist/harmonic.cjs.development.js.map +1 -1
  27. package/dist/harmonic.cjs.production.min.js +1 -1
  28. package/dist/harmonic.cjs.production.min.js.map +1 -1
  29. package/dist/harmonic.esm.js +6739 -7006
  30. package/dist/harmonic.esm.js.map +1 -1
  31. package/dist/index.d.ts +2 -2
  32. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
  33. package/dist/types/navigation.d.ts +0 -4
  34. package/dist/types/types.d.ts +14 -49
  35. package/dist/types/upsell.d.ts +15 -7
  36. package/package.json +1 -1
  37. package/dist/components/molecules/PageHeading/HighlightCarousel/HighlightCarousel.d.ts +0 -4
  38. package/dist/components/molecules/PageHeading/HighlightCarousel/HighlightCarousel.style.d.ts +0 -14
  39. package/dist/components/molecules/PageHeading/HighlightCarousel/index.d.ts +0 -2
  40. package/dist/components/molecules/Paywall/Paywall.d.ts +0 -4
  41. package/dist/components/molecules/Paywall/Paywall.styles.d.ts +0 -288
  42. package/dist/components/molecules/Paywall/index.d.ts +0 -2
  43. package/dist/components/molecules/SkipToMain/SkipToMain.d.ts +0 -20
  44. package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +0 -6
  45. package/dist/components/molecules/SkipToMain/index.d.ts +0 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
+ ## [0.15.0]
2
+ - PageHeading: Add PageHeadingHighlight component
3
+
1
4
  ## [0.14.0]
2
- - Paywall: ask users to register, sign in, or become a member
5
+ - CastFilter: Add CastFilter component
6
+ - Swipe: Update focus padding
3
7
 
4
8
  ## [0.13.4]
5
9
  - Footer: internal links open in the same tab
@@ -16,8 +20,8 @@
16
20
  ## [0.13.0]
17
21
  - Restyled: Quote, Image Gallery, Accordions, BodyContent, AnchorTabBar, PromoWithTags, Section, ContactCard
18
22
 
19
- ## [0.12.0-a]
20
- - Add CastFilter Component
23
+ ## [0.12.1]
24
+ - Table: improve the pagination
21
25
 
22
26
  ## [0.12.0]
23
27
  - AnchorBar: add visual improvements
package/README.GIT ADDED
@@ -0,0 +1,294 @@
1
+ # Royal Opera House Harmonic - Front End Design System
2
+
3
+ Welcome to The Royal Opera House Front End Design System, `@royaloperahouse/harmonic`
4
+
5
+ This package is a library of UI components intended to be used in the ROH website.
6
+
7
+ It uses React, TypeScript, TSDX and Storybook.
8
+
9
+ The NPM packages are published at [Royal Opera House - Harmonic](https://www.npmjs.com/package/@royaloperahouse/harmonic)
10
+
11
+ The Storybook for the latest version of the library is hosted at [Storybook - Harmonic] TODO: S3 deployment
12
+
13
+
14
+ ## Prerequisites
15
+ ---
16
+
17
+ * Make sure the required package dependencies are installed using `yarn install`
18
+ * If this is the first time you are working on Harmonic, make sure to run `yarn build` to build all the modules.
19
+
20
+ * **To deploy the storybook publicly** you will need credentials for the **parent** 'Royal Opera House' AWS account in your `~/.aws/credentials` file.
21
+ * The deploy script expects these to be called `[parent]`.
22
+
23
+ * You can find these values at:
24
+
25
+ *AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' -> 'Command line or programmatic access'*
26
+
27
+ * **To deploy a preview** for demo / QA you will need:
28
+
29
+ * A Chromatic account with a **Developer** role in the `roh-ml` project in Chromatic
30
+ * [Mari Lovell](mari.lovell@roh.org.uk) is the current owner of this project, you can contact her to invite you
31
+ * The `CHROMATIC_PROJECT_TOKEN` -- find this in 1Password or ask the project owner.
32
+
33
+
34
+ * **To enable publishing to the NPM package**:
35
+ * Create account / log in to NPM
36
+ * Ask a colleague with admin rights to be added as a contributer
37
+ * Generate your own ROH `NPM_TOKEN` (store this token in 1Password)
38
+ * Set up Two-Factor Authentication for NPM, as you will be prompted by the publishing script
39
+
40
+
41
+ ## Versioning
42
+ ---
43
+ > NOTE: The following applies while the Harmonic project is in Alpha (before a version 1.0.0 release)
44
+
45
+ We are **not** yet using semantic versioning.
46
+
47
+ When proposing changes to the Harmonic library, increment the patch version (the last number) by one, **only** in the changelog (alternatively, leave the version in the changelog as TBC) along with a note about your changes.
48
+
49
+ Only increment the version in the package.json for releasing snapshots.
50
+
51
+ Once your changes are merged to the main branch and released in a new version, the release manager will be responsible for incrementing that release version.
52
+
53
+ > NOTE: The following **may** apply once the Harmonic project is out of Alpha, but is subject to change before then.
54
+
55
+ We use [Semantic Versioning](https://semver.org/) for Harmonic.
56
+
57
+ Given a version number MAJOR.MINOR.PATCH, increment the:
58
+
59
+ * MAJOR version when you make incompatible library changes
60
+ * MINOR version when you add functionality in a backwards compatible manner
61
+ * PATCH version when you make backwards compatible bug fixes
62
+
63
+ When you create a new release always update the `CHANGELOG` and `package.json`
64
+
65
+ Increment your version from the latest stable version on [Royal Opera House - Harmonic](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions)
66
+
67
+
68
+ ## Deploying the Storybook
69
+ ---
70
+
71
+ ### **1. To build and deploy locally**
72
+
73
+ You can quickly build and serve the contents of `/storybook-static` from your local machine, for development and manual testing. To do this run:
74
+
75
+ ```bash
76
+ yarn storybook
77
+ ```
78
+
79
+ By default the storybook will be accessible at
80
+ [http://localhost:6006/]()
81
+
82
+ The server will hot-reload on most changes.
83
+
84
+ ### **2. To deploy a preview version remotely**
85
+
86
+ You can deploy a release candidate, or work-in-progress to [Chromatic](https://www.chromatic.com/) for showcase or QA.
87
+
88
+ **NOTE:** you will need the `CHROMATIC_PROJECT_TOKEN` and to be invited as a contributor to the Harmonic project in Chromatic, as described in *Prerequisites* above.
89
+
90
+ Either set the token as a shell variable or use a `.env` file in the `harmonic` root directory containing the token, as so:
91
+
92
+ ```
93
+ CHROMATIC_PROJECT_TOKEN=tokengoeshere
94
+ ```
95
+
96
+ Run:
97
+ ```
98
+ CHROMATIC_PROJECT_TOKEN=tokengoeshere yarn deploy-storybook-dev
99
+ ```
100
+
101
+ to build and deploy the storybook from your repo to Chromatic.
102
+
103
+ You will find the address of your deployed storybook in the console output, looking something like this:
104
+
105
+ `→ View your Storybook at https://randomHexString-randomAlphabeticalString.chromatic.com`
106
+
107
+ ### **3. To deploy a release version**
108
+
109
+ You can deploy the contents of `./storybook-static` to S3 as a static site, which is permanently accessible at [WIP] TODO: S3 deployment
110
+
111
+ **NOTE:** To do this you will need the correct `AWS` credentials set up, as described in *Prerequisites* above.
112
+
113
+ First build the storybook using:
114
+
115
+ ```
116
+ yarn build-storybook
117
+ ```
118
+
119
+ then run:
120
+
121
+ ```bash
122
+ yarn deploy-storybook
123
+ ```
124
+
125
+ > **IMPORTANT:** This URL is intended to showcase the latest stable version of Harmonic, it should be kept up to date with the `main` Harmonic 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*.
126
+
127
+
128
+ ## Releasing a New Package Version
129
+ ---
130
+
131
+ This is the procedure for releasing a new Harmonic NPM package.
132
+
133
+ There are two types of package:
134
+
135
+ A **snapshot** can be published to use a development version of the Harmonic library in our frontend staging environments, to perform integrated, manual testing.
136
+
137
+ A **stable** package is published for use in production.
138
+
139
+ **NOTE:** You will need the `NPM_TOKEN`, as described in 'Prerequisites' above.
140
+
141
+ ### **1. To release a snapshot version**
142
+
143
+ > **IMPORTANT:** Make sure you always publish your **snapshots** from `development` after merging in your feature branch.
144
+
145
+ For snapshots, `RELEASE_VERSION` should be the same as the latest **stable** version of the Harmonic Library, as found in [npm Harmonic - Versions](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions), followed by an **unused** lowercase letter.
146
+
147
+ 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`
148
+
149
+ To publish a snapshot use:
150
+
151
+ ```bash
152
+ NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
153
+ ```
154
+
155
+ The version published to NPM will be named, e.g. `1.42.0-a-harmonic-development`, use this to install the snapshot package in the frontend repos.
156
+
157
+ ### **2. To release a stable version**
158
+
159
+ > **IMPORTANT:** Make sure you always publish your **stable** packages from `main` after merging in your feature branch.
160
+
161
+ For stable releases, increment your version from the latest **stable** version found on [npm Harmonic - Versions](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions), 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`!)
162
+
163
+ To publish a stable package use:
164
+
165
+ ```bash
166
+ NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
167
+ ```
168
+
169
+
170
+ ## Using the Package
171
+ ---
172
+
173
+ The package is deployed to NPM, and can be installed using yarn or npm:
174
+
175
+ ```bash
176
+ npm i --save @royaloperahouse/harmonic
177
+ ```
178
+ ```bash
179
+ yarn add @royaloperahouse/harmonic
180
+ ```
181
+
182
+
183
+ ## Testing
184
+ ---
185
+
186
+ To **Lint** the package use:
187
+
188
+ ```bash
189
+ yarn lint
190
+ # Use the --fix option to perform automatic fixes
191
+ ```
192
+
193
+ To run the **unit tests** (using Jest) use:
194
+
195
+ ```bash
196
+ yarn test
197
+
198
+ # Use the -u option to update snapshots if needed
199
+ # Run `yarn test:watch` to re-run tests on changes
200
+ ```
201
+
202
+ To **run and and store the unit tests** for display in storybook use:
203
+
204
+ ```bash
205
+ yarn test-storybook
206
+ # Use the -u option to update snapshots if needed
207
+ ```
208
+
209
+
210
+ ## Development Process
211
+ ---
212
+
213
+ ### **1. Branching Model**
214
+ * The Harmonic project lives in the `harmonic-library/harmonic` *repository*
215
+ * When working on Harmonic, treat the `harmonic` directory as your root
216
+ * The Harmonic **development** branch is for QA
217
+ * The Harmonic **main** branch is currently for stable releases
218
+ * All work should be done on a correctly named **feature branch** of the format: `issueType/ticketNumber-short-description-of-feature`, e.g. `feature/RD-12345-add-example-component`
219
+ * Always create your feature branch FROM, and submit pull requests TO, the **main** branch
220
+ * For **QA / UAT** of a Harmonic component in isolation: following review you should deploy a preview version to Chromatic straight from your **feature branch** _without_ merging to development
221
+ * For releasing an **NPM snapshot**: merge your feature branch into the **development** branch and publish the NPM snapshot from there
222
+
223
+ ### **2. Detailed Workflow**
224
+
225
+ #### **Before review:**
226
+
227
+ * Git pull the latest version of Harmonic from `main`
228
+ * Checkout a new, correctly-named feature branch from `main`
229
+ * Do your work on this feature branch
230
+ * Run: `yarn lint --fix`
231
+ * Run: `yarn test -u`
232
+ * Commit your changes
233
+ * Create a pull request from your feature branch to `main`
234
+ * Add the appropriate reviewers
235
+
236
+ #### **Before QA / UAT:**
237
+
238
+ After your PR is approved, you have two options:
239
+
240
+ **i.** For QA of a component in isolation:
241
+
242
+ * Follow the steps above in *Deploying the Storybook -> 2. Deploying a preview version remotely*
243
+ * Share the generated Chromatic URL with the appropriate people for QA / UAT
244
+
245
+ **ii.** For integrated testing of a component in the frontend staging environments:
246
+
247
+ * Check out the `development` branch
248
+ * Merge your work in to `development`
249
+ * Follow the steps above under *Publishing a New Package Version -> 1. To release a snapshot version*
250
+ * Git push the updated `development` branch to remote
251
+ * Finally, in the frontend repo:
252
+
253
+ 1. Update the `package.json` to reference the new snapshot version
254
+ 2. Run: `yarn install`
255
+ 3. Deploy the frontend to a staging environment
256
+
257
+ #### **When ready for production:**
258
+
259
+ * Return to your Harmonic **feature branch**
260
+ * Update the HArmonic version in `package.json`, incrementing from the last **stable** release, found in [npm Harmonic - Versions](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions), and following the rules described in the *Versioning* section
261
+ * Update `CHANGELOG.md`, adding the new version number and a short description of your changes
262
+ * Run: `yarn lint --fix`
263
+ * Run: `yarn test -u`
264
+ * Run: `yarn test-storybook -u`
265
+ * Run: `yarn build-storybook`
266
+ * Git commit, push, and update your PR for final approval
267
+ * Merge your approved PR to `main`
268
+ * Follow the steps in *Publishing a New Package Version -> 2. To release a stable version* to publish the NPM package
269
+ * Finally, follow the steps in *Deploying The Storybook -> 3. To deploy a release version*, to update the public Harmonic Storybook page
270
+
271
+ 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.
272
+
273
+
274
+ ## Notes
275
+ ---
276
+ ### The `storybook-static` folder
277
+
278
+ 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:
279
+
280
+ ```bash
281
+ yarn build-storybook
282
+ ```
283
+
284
+ 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.
285
+
286
+ ---
287
+ ### Examples
288
+
289
+ 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.
290
+
291
+ ---
292
+ ### Bundle analysis
293
+
294
+ 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 CHANGED
@@ -1,278 +1,69 @@
1
- # Royal Opera House Harmonic - Front End Design System
1
+ # Royal Opera House - Harmonic
2
2
 
3
- Welcome to The Royal Opera House Front End Design System, `@royaloperahouse/harmonic`
3
+ Welcome to The Royal Opera House Harmonic library components `@royaloperahouse/harmonic`.
4
4
 
5
5
  This package is a library of UI components intended to be used in the ROH website.
6
6
 
7
- It uses React, TypeScript, TSDX and Storybook.
8
7
 
9
- The NPM packages are published at [Royal Opera House - Harmonic](https://www.npmjs.com/package/@royaloperahouse/harmonic)
10
-
11
- The Storybook for the latest version of the library is hosted at [Storybook - Harmonic] TODO: S3 deployment
12
-
13
-
14
- ## Prerequisites
15
- ---
16
-
17
- * Make sure the required package dependencies are installed using `yarn install`
18
- * If this is the first time you are working on Harmonic, make sure to run `yarn build` to build all the modules.
19
-
20
- * **To deploy the storybook publicly** you will need credentials for the **parent** 'Royal Opera House' AWS account in your `~/.aws/credentials` file.
21
- * The deploy script expects these to be called `[parent]`.
22
-
23
- * You can find these values at:
24
-
25
- *AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' -> 'Command line or programmatic access'*
26
-
27
- * **To deploy a preview** for demo / QA you will need the `CHROMATIC_PROJECT_TOKEN` -- find this in 1Password. Creating your own Chromatic account is advised if multiple builds are necessary.
28
-
29
-
30
- * **To enable publishing to the NPM package**:
31
- * Create account / log in to NPM
32
- * Ask a colleague with admin rights to be added as a contributer
33
- * Generate your own ROH `NPM_TOKEN` (store this token in 1Password)
34
-
35
-
36
- ## Versioning
37
- ---
38
-
39
- We use [Semantic Versioning](https://semver.org/) for Harmonic.
40
-
41
- Given a version number MAJOR.MINOR.PATCH, increment the:
42
-
43
- * MAJOR version when you make incompatible library changes
44
- * MINOR version when you add functionality in a backwards compatible manner
45
- * PATCH version when you make backwards compatible bug fixes
46
-
47
- When you create a new release always update the `CHANGELOG` and `package.json`
48
-
49
- Increment your version from the latest stable version on [Royal Opera House - Harmonic](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions)
50
-
51
-
52
- ## Deploying the Storybook
53
- ---
54
-
55
- ### **1. To build and deploy locally**
56
-
57
- You can quickly build and serve the contents of `/storybook-static` from your local machine, for development and manual testing. To do this run:
8
+ ## Install
58
9
 
59
10
  ```bash
60
- yarn storybook
11
+ npm i --save @royaloperahouse/harmonic
61
12
  ```
62
-
63
- By default the storybook will be accessible at
64
- [http://localhost:6006/]()
65
-
66
- The server will hot-reload on most changes.
67
-
68
- ### **2. To deploy a preview version remotely**
69
-
70
- You can deploy a release candidate, or work-in-progress to [Chromatic](https://www.chromatic.com/) for showcase or QA.
71
-
72
- **NOTE:** you will need the `CHROMATIC_PROJECT_TOKEN` as described in *Prerequisites* above.
73
-
74
- Either set the token as a shell variable or use a `.env` file in the `harmonic` root directory containing the token, as so:
75
-
76
- ```
77
- CHROMATIC_PROJECT_TOKEN=tokengoeshere
78
- ```
79
-
80
- Run:
81
- ```
82
- CHROMATIC_PROJECT_TOKEN=tokengoeshere yarn deploy-storybook-dev
83
- ```
84
-
85
- to build and deploy the storybook from your repo to Chromatic.
86
-
87
- You will find the address of your deployed storybook in the console output, looking something like this:
88
-
89
- `→ View your Storybook at https://randomHexString-randomAlphabeticalString.chromatic.com`
90
-
91
- ### **3. To deploy a release version**
92
-
93
- You can deploy the contents of `./storybook-static` to S3 as a static site, which is permanently accessible at [WIP] TODO: S3 deployment
94
-
95
- **NOTE:** To do this you will need the correct `AWS` credentials set up, as described in *Prerequisites* above.
96
-
97
- First build the storybook using:
98
-
99
- ```
100
- yarn build-storybook
101
- ```
102
-
103
- then run:
104
-
105
13
  ```bash
106
- yarn deploy-storybook
14
+ yarn add @royaloperahouse/harmonic
107
15
  ```
108
16
 
109
- > **IMPORTANT:** This URL is intended to showcase the latest stable version of Harmonic, it should be kept up to date with the `main` Harmonic 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*.
110
-
111
-
112
- ## Releasing a New Package Version
113
- ---
114
-
115
- This is the procedure for releasing a new Harmonic NPM package.
116
-
117
- There are two types of package:
118
-
119
- A **snapshot** can be published to use a development version of the Harmonic library in our frontend staging environments, to perform integrated, manual testing.
120
-
121
- A **stable** package is published for use in production.
122
-
123
- **NOTE:** You will need the `NPM_TOKEN`, as described in 'Prerequisites' above.
124
-
125
- ### **1. To release a snapshot version**
17
+ ## Usage
126
18
 
127
- > **IMPORTANT:** Make sure you always publish your **snapshots** from `development` after merging in your feature branch.
19
+ ```javascript
20
+ import {
21
+ Footer, GlobalStyles, ThemeProvider, ThemeType,
22
+ } from '@royaloperahouse/harmonic';
128
23
 
129
- For snapshots, `RELEASE_VERSION` should be the same as the latest **stable** version of the Harmonic Library, as found in [npm Harmonic - Versions](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions), followed by an **unused** lowercase letter.
130
-
131
- 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`
132
-
133
- To publish a snapshot use:
134
-
135
- ```bash
136
- NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
137
- ```
138
-
139
- The version published to NPM will be named, e.g. `1.42.0-a-harmonic-development`, use this to install the snapshot package in the frontend repos.
140
-
141
- ### **2. To release a stable version**
142
-
143
- > **IMPORTANT:** Make sure you always publish your **stable** packages from `main` after merging in your feature branch.
144
-
145
- For stable releases, increment your version from the latest **stable** version found on [npm Harmonic - Versions](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions), 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`!)
146
-
147
- To publish a stable package use:
148
-
149
- ```bash
150
- NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
151
- ```
152
-
153
-
154
- ## Using the Package
155
- ---
156
-
157
- The package is deployed to NPM, and can be installed using yarn or npm:
158
-
159
- ```bash
160
- npm i --save @royaloperahouse/harmonic
161
- ```
162
- ```bash
163
- yarn add @royaloperahouse/harmonic
164
- ```
165
-
166
-
167
- ## Testing
168
- ---
169
-
170
- To **Lint** the package use:
171
-
172
- ```bash
173
- yarn lint
174
- # Use the --fix option to perform automatic fixes
175
24
  ```
25
+ ## Sample
176
26
 
177
- To run the **unit tests** (using Jest) use:
27
+ ```javascript
178
28
 
179
- ```bash
180
- yarn test
29
+ import {
30
+ Footer, GlobalStyles, ThemeProvider, ThemeType,
31
+ } from '@royaloperahouse/harmonic';
181
32
 
182
- # Use the -u option to update snapshots if needed
183
- # Run `yarn test:watch` to re-run tests on changes
184
- ```
185
33
 
186
- To **run and and store the unit tests** for display in storybook use:
34
+ const App = ({ children }: InnerProps): React.ReactElement => (
35
+ <ErrorBoundary>
36
+ <ThemeProvider theme={ThemeType.Core}>
37
+ <GlobalStyles />
38
+ <Wrapper>
39
+ <Header />
40
+ <GlobalStyle />
41
+ <HealthBanner />
42
+ <ErrorBoundary>
43
+ <Content>
44
+ {children}
45
+ </Content>
46
+ </ErrorBoundary>
47
+ <LiveChat />
48
+ </Wrapper>
49
+ <Footer data={footerData} />
50
+ </ThemeProvider>
51
+ </ErrorBoundary>
52
+ );
187
53
 
188
- ```bash
189
- yarn test-storybook
190
- # Use the -u option to update snapshots if needed
191
54
  ```
192
55
 
56
+ ## Components
57
+ (Complete)
58
+ ControlledDropdown, ImageProportion, Typography (Display, Header, Subtitle,BodyCopy, Overline, ButtonText, Caption, NavigationText, TextLink)
193
59
 
194
- ## Development Process
195
- ---
196
-
197
- ### **1. Branching Model**
198
- * The Harmonic project lives in the `harmonic-library/harmonic` *repository*
199
- * When working on Harmonic, treat the `harmonic` directory as your root
200
- * The Harmonic **development** branch is for QA
201
- * The Harmonic **main** branch is currently for stable releases
202
- * All work should be done on a correctly named **feature branch** of the format: `issueType/ticketNumber-short-description-of-feature`, e.g. `feature/RD-12345-add-example-component`
203
- * Always create your feature branch FROM, and submit pull requests TO, the **main** branch
204
- * For **QA / UAT** of a Harmonic component in isolation: following review you should deploy a preview version to Chromatic straight from your **feature branch** _without_ merging to development
205
- * For releasing an **NPM snapshot**: merge your feature branch into the **development** branch and publish the NPM snapshot from there
206
-
207
- ### **2. Detailed Workflow**
208
-
209
- #### **Before review:**
210
-
211
- * Git pull the latest version of Harmonic from `main`
212
- * Checkout a new, correctly-named feature branch from `main`
213
- * Do your work on this feature branch
214
- * Run: `yarn lint --fix`
215
- * Run: `yarn test -u`
216
- * Commit your changes
217
- * Create a pull request from your feature branch to `main`
218
- * Add the appropriate reviewers
219
-
220
- #### **Before QA / UAT:**
221
-
222
- After your PR is approved, you have two options:
223
-
224
- **i.** For QA of a component in isolation:
225
-
226
- * Follow the steps above in *Deploying the Storybook -> 2. Deploying a preview version remotely*
227
- * Share the generated Chromatic URL with the appropriate people for QA / UAT
228
-
229
- **ii.** For integrated testing of a component in the frontend staging environments:
230
-
231
- * Check out the `development` branch
232
- * Merge your work in to `development`
233
- * Follow the steps above under *Publishing a New Package Version -> 1. To release a snapshot version*
234
- * Git push the updated `development` branch to remote
235
- * Finally, in the frontend repo:
236
-
237
- 1. Update the `package.json` to reference the new snapshot version
238
- 2. Run: `yarn install`
239
- 3. Deploy the frontend to a staging environment
240
-
241
- #### **When ready for production:**
242
-
243
- * Return to your Harmonic **feature branch**
244
- * Update the HArmonic version in `package.json`, incrementing from the last **stable** release, found in [npm Harmonic - Versions](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions), and following the rules described in the *Versioning* section
245
- * Update `CHANGELOG.md`, adding the new version number and a short description of your changes
246
- * Run: `yarn lint --fix`
247
- * Run: `yarn test -u`
248
- * Run: `yarn test-storybook -u`
249
- * Run: `yarn build-storybook`
250
- * Git commit, push, and update your PR for final approval
251
- * Merge your approved PR to `main`
252
- * Follow the steps in *Publishing a New Package Version -> 2. To release a stable version* to publish the NPM package
253
- * Finally, follow the steps in *Deploying The Storybook -> 3. To deploy a release version*, to update the public Harmonic Storybook page
254
-
255
- 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.
256
-
257
-
258
- ## Notes
259
- ---
260
- ### The `storybook-static` folder
261
-
262
- 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:
263
-
264
- ```bash
265
- yarn build-storybook
266
- ```
267
-
268
- 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.
60
+ (WIP)
61
+ Colors, Footer, Iconography, Navigation, Tab, Tabs, TabLink
269
62
 
270
- ---
271
- ### Examples
63
+ (TODO / Legacy)
64
+ Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, Card, Cards, Carousel, CinemaBadge, ContactCard, devices, Editorial, GlobalStyles, Grid, GridItem, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, ImageWithCaption, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTags, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StickyBar, StreamBadge, TertiaryButton, TextOnly, Tickbox, TitleWithCTA, ThemeProvider, TypeTags, Quote
272
65
 
273
- 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.
274
66
 
275
- ---
276
- ### Bundle analysis
67
+ ## Documentation
277
68
 
278
- 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`.
69
+ [See Storybook as a reference] TODO: S3 deployment
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { IDropdownProps } from '../../../types/types';
3
- declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, className, role, ariaLabel, tabLinkId, trimTabText, }: IDropdownProps) => React.JSX.Element;
3
+ declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, className, role, ariaLabel, trimTabText, }: IDropdownProps) => React.JSX.Element;
4
4
  export default Dropdown;
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { ITabProps } from '../../../types/types';
3
- declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, dataTestId, isOpen, }: ITabProps) => React.JSX.Element;
3
+ declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, isOpen, }: ITabProps) => React.JSX.Element;
4
4
  export default Tab;
@@ -7,4 +7,4 @@ export declare const Input: import("styled-components").StyledComponent<"input",
7
7
  export declare const ShowHideButton: import("styled-components").StyledComponent<"button", any, {}, never>;
8
8
  export declare const TextLabel: import("styled-components").StyledComponent<"div", any, Pick<ITextFieldProps, "darkMode">, never>;
9
9
  export declare const ErrorLabel: import("styled-components").StyledComponent<"div", any, Pick<ITextFieldProps, "darkMode">, never>;
10
- export declare const BodyCopyHarmonicWithWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
10
+ export declare const BodyCopyHarmonicWithWrapper: import("styled-components").StyledComponent<({ children, size, color, className, bold, tag: Tag, ...props }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;
@@ -1,8 +1,8 @@
1
1
  import { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './Typography';
2
2
  import { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, Progress, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, SponsorLogo, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TextLogo, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, VideoControls } from './atoms';
3
3
  import { AnchorTabBar, Footer, Navigation, StickyBar, TitleWithCTA, UpsellSection, Carousel, MinimalCarousel, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream } from './organisms';
4
- import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SignUpForm, Table, Tabs, UpsellCard, VideoWithControls, SkipToMain } from './molecules';
4
+ import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SignUpForm, Table, Tabs, UpsellCard, VideoWithControls } from './molecules';
5
5
  import ThemeProvider from '../styles/ThemeProvider';
6
6
  import GlobalStyles from '../styles/GlobalStyles';
7
- export { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, SkipToMain, };
8
- export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Header, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MinimalCarousel, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SponsorLogo, SignUpForm, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls, };
7
+ export { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, };
8
+ export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Header, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MinimalCarousel, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SponsorLogo, SignUpForm, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls, };