@royaloperahouse/harmonic 0.1.1-d → 0.1.1

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 (30) hide show
  1. package/CHANGELOG.md +185 -6
  2. package/README.GIT +286 -0
  3. package/README.md +41 -258
  4. package/dist/components/atoms/ImageAspectRatioWrapper/ImageAspectRatioWrapper.d.ts +3 -2
  5. package/dist/components/atoms/ImageAspectRatioWrapper/ImageAspectRatioWrapper.style.d.ts +3 -0
  6. package/dist/components/atoms/SocialLinks/SocialLinks.d.ts +4 -0
  7. package/dist/components/atoms/SocialLinks/SocialLinks.style.d.ts +2 -0
  8. package/dist/components/atoms/SocialLinks/index.d.ts +2 -0
  9. package/dist/components/atoms/SponsorLogo/SponsorLogo.d.ts +1 -1
  10. package/dist/components/atoms/index.d.ts +2 -1
  11. package/dist/components/molecules/ImageWithCaption/ImageWithCaption.style.d.ts +2 -2
  12. package/dist/components/molecules/PolicyLinks/PolicyLinks.d.ts +3 -3
  13. package/dist/components/molecules/PolicyLinks/PolicyLinks.style.d.ts +1 -3
  14. package/dist/components/molecules/index.d.ts +2 -1
  15. package/dist/components/organisms/Footer/Footer.d.ts +2 -2
  16. package/dist/components/organisms/Footer/Footer.style.d.ts +5 -5
  17. package/dist/harmonic.cjs.development.css +1 -5
  18. package/dist/harmonic.cjs.development.js +898 -838
  19. package/dist/harmonic.cjs.development.js.map +1 -1
  20. package/dist/harmonic.cjs.production.min.js +1 -1
  21. package/dist/harmonic.cjs.production.min.js.map +1 -1
  22. package/dist/harmonic.esm.js +899 -839
  23. package/dist/harmonic.esm.js.map +1 -1
  24. package/dist/helpers/devices.d.ts +6 -0
  25. package/dist/styles/themes.d.ts +32 -0
  26. package/dist/types/footer.d.ts +6 -0
  27. package/dist/types/image.d.ts +14 -4
  28. package/dist/types/types.d.ts +4 -0
  29. package/dist/types/typography.d.ts +1 -6
  30. package/package.json +2 -2
package/README.GIT ADDED
@@ -0,0 +1,286 @@
1
+ # Royal Opera House Harmonic - Front End Design System
2
+ # Royal Opera House Harmonic - Front End Design System
3
+
4
+ Welcome to The Royal Opera House Front End Design System, `@royaloperahouse/harmonic`
5
+ Welcome to The Royal Opera House Front End Design System, `@royaloperahouse/harmonic`
6
+
7
+ This package is a library of UI components intended to be used in the ROH website.
8
+
9
+ It uses React, TypeScript, TSDX and Storybook.
10
+
11
+ The NPM packages are published at [coming soon](https://www.npmjs.com/package/@royaloperahouse/harmonic)
12
+
13
+ The Storybook for the latest version of the library is hosted at [coming soon]()
14
+
15
+
16
+ ## Prerequisites
17
+ ---
18
+
19
+ * Make sure the required package dependencies are installed using `yarn install`
20
+
21
+ * If this is the first time you are working on Harmonic, make sure to run `yarn build` to build all the modules.
22
+ * If this is the first time you are working on Harmonic, make sure to run `yarn build` to build all the modules.
23
+
24
+ * **To deploy the storybook publicly** you will need credentials for the **parent** 'Royal Opera House' AWS account in your `~/.aws/credentials` file.
25
+ * The deploy script expects these to be called `[parent]`.
26
+
27
+ * You can find these values at:
28
+
29
+ *AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' -> 'Command line or programmatic access'*
30
+
31
+ * **To deploy a preview** for demo / QA you will need the `CHROMATIC_PROJECT_TOKEN` -- find this in 1Password
32
+
33
+
34
+ * **To publish the NPM package** you will need the ROH `NPM_TOKEN` -- find this in 1Password
35
+
36
+
37
+ ## Versioning
38
+ ---
39
+
40
+ We use [Semantic Versioning](https://semver.org/) for Harmonic.
41
+ We use [Semantic Versioning](https://semver.org/) for Harmonic.
42
+
43
+ Given a version number MAJOR.MINOR.PATCH, increment the:
44
+
45
+ * MAJOR version when you make incompatible library changes
46
+ * MINOR version when you add functionality in a backwards compatible manner
47
+ * PATCH version when you make backwards compatible bug fixes
48
+
49
+ When you create a new release always update the `CHANGELOG` and `package.json`
50
+
51
+ Increment your version from the latest stable version on (WIP)
52
+
53
+
54
+ ## Deploying the Storybook
55
+ ---
56
+
57
+ ### **1. To build and deploy locally**
58
+
59
+ You can quickly build and serve the contents of `/storybook-static` from your local machine, for development and manual testing. To do this run:
60
+
61
+ ```bash
62
+ yarn storybook
63
+ ```
64
+
65
+ By default the storybook will be accessible at
66
+ [http://localhost:6006/]()
67
+
68
+ The server will hot-reload on most changes.
69
+
70
+ ### **2. To deploy a preview version remotely**
71
+
72
+ You can deploy a release candidate, or work-in-progress to [Chromatic](https://www.chromatic.com/) for showcase or QA.
73
+
74
+ **NOTE:** you will need the `CHROMATIC_PROJECT_TOKEN` as described in *Prerequisites* above.
75
+
76
+ Either set the token as a shell variable or use a `.env` file in the (WIP) root directory containing the token, as so:
77
+
78
+ ```
79
+ CHROMATIC_PROJECT_TOKEN=tokengoeshere
80
+ ```
81
+
82
+ Run:
83
+
84
+ ```
85
+ yarn deploy-storybook-dev
86
+ ```
87
+
88
+ to build and deploy the storybook from your repo to Chromatic.
89
+
90
+ You will find the address of your deployed storybook in the console output, looking something like this:
91
+
92
+ `→ View your Storybook at https://randomHexString-randomAlphabeticalString.chromatic.com`
93
+
94
+ ### **3. To deploy a release version**
95
+
96
+ You can deploy the contents of `./storybook-static` to S3 as a static site, which is permanently accessible at [WIP]()
97
+
98
+ **NOTE:** To do this you will need the correct `AWS` credentials set up, as described in *Prerequisites* above.
99
+
100
+ First build the storybook using:
101
+
102
+ ```
103
+ yarn build-storybook
104
+ ```
105
+
106
+ then run:
107
+
108
+ ```bash
109
+ yarn deploy-storybook
110
+ ```
111
+
112
+ > **IMPORTANT:** This URL is intended to showcase the latest stable version of (WIP), it should be kept up to date with the main (WIP) 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*.
113
+
114
+
115
+ ## Releasing a New Package Version
116
+ ---
117
+
118
+ This is the procedure for releasing a new Harmonic NPM package.
119
+ This is the procedure for releasing a new Harmonic NPM package.
120
+
121
+ There are two types of package:
122
+
123
+ A **snapshot** can be published to use a development version of the (WIP) library in our frontend staging environments, to perform integrated, manual testing.
124
+
125
+ A **stable** package is published for use in production.
126
+
127
+ **NOTE:** You will need the `NPM_TOKEN`, as described in 'Prerequisites' above.
128
+
129
+ ### **1. To release a snapshot version**
130
+
131
+ > **IMPORTANT:** Make sure you always publish your **snapshots** from (WIP) after merging in your feature branch.
132
+
133
+ For snapshots, `RELEASE_VERSION` should be the same as the latest **stable** version of the (WIP) Library, as found in (WIP), followed by an **unused** lowercase letter.
134
+
135
+ 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`
136
+
137
+ To publish a snapshot use:
138
+
139
+ ```bash
140
+ NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
141
+ ```
142
+
143
+ 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.
144
+ 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.
145
+
146
+ ### **2. To release a stable version**
147
+
148
+ > **IMPORTANT:** Make sure you always publish your **stable** packages from (WIP) after merging in your feature branch.
149
+
150
+ For stable releases, increment your version from the latest **stable** version found on (WIP), 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`!)
151
+
152
+ To publish a stable package use:
153
+
154
+ ```bash
155
+ NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
156
+
157
+ ```
158
+
159
+
160
+ ## Using the Package
161
+ ---
162
+
163
+ The package is deployed to NPM, and can be installed using yarn or npm:
164
+
165
+ ```bash
166
+ npm i --save @royaloperahouse/harmonic
167
+ npm i --save @royaloperahouse/harmonic
168
+ ```
169
+ ```bash
170
+ yarn add @royaloperahouse/harmonic
171
+ yarn add @royaloperahouse/harmonic
172
+ ```
173
+
174
+
175
+ ## Testing
176
+ ---
177
+
178
+ To **Lint** the package use:
179
+
180
+ ```bash
181
+ yarn lint
182
+ # Use the --fix option to perform automatic fixes
183
+ ```
184
+
185
+ To run the **unit tests** (using Jest) use:
186
+
187
+ ```bash
188
+ yarn test
189
+
190
+ # Use the -u option to update snapshots if needed
191
+ # Run `yarn test:watch` to re-run tests on changes
192
+ ```
193
+
194
+ To **run and and store the unit tests** for display in storybook use:
195
+
196
+ ```bash
197
+ yarn test-storybook
198
+ # Use the -u option to update snapshots if needed
199
+ ```
200
+
201
+
202
+ ## Development Process
203
+ ---
204
+
205
+ ### **1. Branching Model**
206
+ * The (WIP) project lives in the `roh-components` *monorepo*
207
+ * When working on WIP, treat the (WIP) directory as your root
208
+ * The WIP **development** branch is currently WIP
209
+ * The WIP **main** branch is currently WIP
210
+ * All work should be done on a correctly named **feature branch** of the format: `issueType/ticketNumber-short-description-of-feature`, e.g. WIP
211
+ * Always create your feature branch FROM, and submit pull requests TO, the **main** branch
212
+ * For **QA / UAT** of a WIP component in isolation: following review you should deploy a preview version to Chromatic straight from your **feature branch** _without_ merging to development
213
+ * For releasing an **NPM snapshot**: merge your feature branch into the **development** branch and publish the NPM snapshot from there
214
+
215
+ ### **2. Detailed Workflow**
216
+
217
+ #### **Before review:**
218
+
219
+ * Git pull the latest version of WIP
220
+ * Checkout a new, correctly-named feature branch from WIP
221
+ * Do your work on this feature branch
222
+ * Run: `yarn lint`
223
+ * Run: `yarn test`
224
+ * Commit your changes
225
+ * Create a pull request from your feature branch to WIP
226
+ * Add the appropriate reviewers
227
+
228
+ #### **Before QA / UAT:**
229
+
230
+ After your PR is approved, you have two options:
231
+
232
+ **i.** For QA of a component in isolation:
233
+
234
+ * Follow the steps above in *Deploying the Storybook -> 2. Deploying a preview version remotely*
235
+ * Share the generated Chromatic URL with the appropriate people for QA / UAT
236
+
237
+ **ii.** For integrated testing of a component in the frontend staging environments:
238
+
239
+ * Check out the WIP branch
240
+ * Merge your work in to WIP
241
+ * Follow the steps above under *Publishing a New Package Version -> 1. To release a snapshot version*
242
+ * Git push the updated WIP branch to remote
243
+ * Finally, in the frontend repo:
244
+
245
+ 1. Update the `package.json` to reference the new snapshot version
246
+ 2. Run: `yarn install`
247
+ 3. Deploy the frontend to a staging environment
248
+
249
+ #### **When ready for production:**
250
+
251
+ * Return to your WIP **feature branch**
252
+ * Update the WIP version in `package.json`, incrementing from the last **stable** release, found in WIP, and following the rules described in the *Versioning* section
253
+ * Update `CHANGELOG.md`, adding the new version number and a short description of your changes
254
+ * Run: `yarn lint`
255
+ * Run: `yarn test`
256
+ * Run: `yarn test-storybook -u`
257
+ * Run: `yarn build-storybook`
258
+ * Git commit, push, and update your PR for final approval
259
+ * Merge your approved PR to WIP
260
+ * Follow the steps in *Publishing a New Package Version -> 2. To release a stable version* to publish the NPM package
261
+ * Finally, follow the steps in *Deploying The Storybook -> 3. To deploy a release version*, to update the public WIP Storybook page
262
+
263
+ 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.
264
+
265
+
266
+ ## Notes
267
+ ---
268
+ ### The `storybook-static` folder
269
+
270
+ 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:
271
+
272
+ ```bash
273
+ yarn build-storybook
274
+ ```
275
+
276
+ 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.
277
+
278
+ ---
279
+ ### Examples
280
+
281
+ 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.
282
+
283
+ ---
284
+ ### Bundle analysis
285
+
286
+ 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,285 +1,68 @@
1
- # Royal Opera House Harmonic - Front End Design System
2
- # Royal Opera House Harmonic - Front End Design System
1
+ # Royal Opera House - harmonic
2
+ # Royal Opera House - harmonic
3
3
 
4
- Welcome to The Royal Opera House Front End Design System, `@royaloperahouse/harmonic`
5
- Welcome to The Royal Opera House Front End Design System, `@royaloperahouse/harmonic`
4
+ Welcome to The Royal Opera House Harmonic library components `@royaloperahouse/harmonic`.
6
5
 
7
6
  This package is a library of UI components intended to be used in the ROH website.
8
7
 
9
- It uses React, TypeScript, TSDX and Storybook.
10
8
 
11
- The NPM packages are published at [coming soon](https://www.npmjs.com/package/@royaloperahouse/harmonic)
12
-
13
- The Storybook for the latest version of the library is hosted at [coming soon]()
14
-
15
-
16
- ## Prerequisites
17
- ---
18
-
19
- * Make sure the required package dependencies are installed using `yarn install`
20
-
21
- * If this is the first time you are working on Harmonic, make sure to run `yarn build` to build all the modules.
22
- * If this is the first time you are working on Harmonic, make sure to run `yarn build` to build all the modules.
23
-
24
- * **To deploy the storybook publicly** you will need credentials for the **parent** 'Royal Opera House' AWS account in your `~/.aws/credentials` file.
25
- * The deploy script expects these to be called `[parent]`.
26
-
27
- * You can find these values at:
28
-
29
- *AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' -> 'Command line or programmatic access'*
30
-
31
- * **To deploy a preview** for demo / QA you will need the `CHROMATIC_PROJECT_TOKEN` -- find this in 1Password
32
-
33
-
34
- * **To publish the NPM package** you will need the ROH `NPM_TOKEN` -- find this in 1Password
35
-
36
-
37
- ## Versioning
38
- ---
39
-
40
- We use [Semantic Versioning](https://semver.org/) for Harmonic.
41
- We use [Semantic Versioning](https://semver.org/) for Harmonic.
42
-
43
- Given a version number MAJOR.MINOR.PATCH, increment the:
44
-
45
- * MAJOR version when you make incompatible library changes
46
- * MINOR version when you add functionality in a backwards compatible manner
47
- * PATCH version when you make backwards compatible bug fixes
48
-
49
- When you create a new release always update the `CHANGELOG` and `package.json`
50
-
51
- Increment your version from the latest stable version on (WIP)
52
-
53
-
54
- ## Deploying the Storybook
55
- ---
56
-
57
- ### **1. To build and deploy locally**
58
-
59
- You can quickly build and serve the contents of `/storybook-static` from your local machine, for development and manual testing. To do this run:
60
-
61
- ```bash
62
- yarn storybook
63
- ```
64
-
65
- By default the storybook will be accessible at
66
- [http://localhost:6006/]()
67
-
68
- The server will hot-reload on most changes.
69
-
70
- ### **2. To deploy a preview version remotely**
71
-
72
- You can deploy a release candidate, or work-in-progress to [Chromatic](https://www.chromatic.com/) for showcase or QA.
73
-
74
- **NOTE:** you will need the `CHROMATIC_PROJECT_TOKEN` as described in *Prerequisites* above.
75
-
76
- Either set the token as a shell variable or use a `.env` file in the (WIP) root directory containing the token, as so:
77
-
78
- ```
79
- CHROMATIC_PROJECT_TOKEN=tokengoeshere
80
- ```
81
-
82
- Run:
83
-
84
- ```
85
- yarn deploy-storybook-dev
86
- ```
87
-
88
- to build and deploy the storybook from your repo to Chromatic.
89
-
90
- You will find the address of your deployed storybook in the console output, looking something like this:
91
-
92
- `→ View your Storybook at https://randomHexString-randomAlphabeticalString.chromatic.com`
93
-
94
- ### **3. To deploy a release version**
95
-
96
- You can deploy the contents of `./storybook-static` to S3 as a static site, which is permanently accessible at [WIP]()
97
-
98
- **NOTE:** To do this you will need the correct `AWS` credentials set up, as described in *Prerequisites* above.
99
-
100
- First build the storybook using:
101
-
102
- ```
103
- yarn build-storybook
104
- ```
105
-
106
- then run:
107
-
108
- ```bash
109
- yarn deploy-storybook
110
- ```
111
-
112
- > **IMPORTANT:** This URL is intended to showcase the latest stable version of (WIP), it should be kept up to date with the main (WIP) 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*.
113
-
114
-
115
- ## Releasing a New Package Version
116
- ---
117
-
118
- This is the procedure for releasing a new Harmonic NPM package.
119
- This is the procedure for releasing a new Harmonic NPM package.
120
-
121
- There are two types of package:
122
-
123
- A **snapshot** can be published to use a development version of the (WIP) library in our frontend staging environments, to perform integrated, manual testing.
124
-
125
- A **stable** package is published for use in production.
126
-
127
- **NOTE:** You will need the `NPM_TOKEN`, as described in 'Prerequisites' above.
128
-
129
- ### **1. To release a snapshot version**
130
-
131
- > **IMPORTANT:** Make sure you always publish your **snapshots** from (WIP) after merging in your feature branch.
132
-
133
- For snapshots, `RELEASE_VERSION` should be the same as the latest **stable** version of the (WIP) Library, as found in (WIP), followed by an **unused** lowercase letter.
134
-
135
- 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`
136
-
137
- To publish a snapshot use:
9
+ ## Install
138
10
 
139
11
  ```bash
140
- NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
12
+ npm i --save @royaloperahouse/harmonic
141
13
  ```
142
-
143
- 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.
144
- 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.
145
-
146
- ### **2. To release a stable version**
147
-
148
- > **IMPORTANT:** Make sure you always publish your **stable** packages from (WIP) after merging in your feature branch.
149
-
150
- For stable releases, increment your version from the latest **stable** version found on (WIP), 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`!)
151
-
152
- To publish a stable package use:
153
-
154
14
  ```bash
155
- wip
15
+ yarn add @royaloperahouse/harmonic
156
16
  ```
157
17
 
18
+ ## Usage
158
19
 
159
- ## Using the Package
160
- ---
161
-
162
- The package is deployed to NPM, and can be installed using yarn or npm:
20
+ ```javascript
21
+ import {
22
+ Footer, GlobalStyles, ThemeProvider, ThemeType,
23
+ } from '@royaloperahouse/harmonic';
163
24
 
164
- ```bash
165
- npm i --save @royaloperahouse/harmonic
166
- npm i --save @royaloperahouse/harmonic
167
25
  ```
168
- ```bash
169
- yarn add @royaloperahouse/harmonic
170
- yarn add @royaloperahouse/harmonic
171
- ```
172
-
26
+ ## Sample
173
27
 
174
- ## Testing
175
- ---
28
+ ```javascript
176
29
 
177
- To **Lint** the package use:
30
+ import {
31
+ Footer, GlobalStyles, ThemeProvider, ThemeType,
32
+ } from '@royaloperahouse/harmonic';
178
33
 
179
- ```bash
180
- yarn lint
181
- # Use the --fix option to perform automatic fixes
182
- ```
183
34
 
184
- To run the **unit tests** (using Jest) use:
35
+ const App = ({ children }: InnerProps): React.ReactElement => (
36
+ <ErrorBoundary>
37
+ <ThemeProvider theme={ThemeType.Core}>
38
+ <GlobalStyles />
39
+ <Wrapper>
40
+ <Header />
41
+ <GlobalStyle />
42
+ <HealthBanner />
43
+ <ErrorBoundary>
44
+ <Content>
45
+ {children}
46
+ </Content>
47
+ </ErrorBoundary>
48
+ <LiveChat />
49
+ </Wrapper>
50
+ <Footer data={footerData} />
51
+ </ThemeProvider>
52
+ </ErrorBoundary>
53
+ );
185
54
 
186
- ```bash
187
- yarn test
188
-
189
- # Use the -u option to update snapshots if needed
190
- # Run `yarn test:watch` to re-run tests on changes
191
55
  ```
192
56
 
193
- To **run and and store the unit tests** for display in storybook use:
194
-
195
- ```bash
196
- yarn test-storybook
197
- # Use the -u option to update snapshots if needed
198
- ```
199
-
200
-
201
- ## Development Process
202
- ---
203
-
204
- ### **1. Branching Model**
205
- * The (WIP) project lives in the `roh-components` *monorepo*
206
- * When working on WIP, treat the (WIP) directory as your root
207
- * The WIP **development** branch is currently WIP
208
- * The WIP **main** branch is currently WIP
209
- * All work should be done on a correctly named **feature branch** of the format: `issueType/ticketNumber-short-description-of-feature`, e.g. WIP
210
- * Always create your feature branch FROM, and submit pull requests TO, the **main** branch
211
- * For **QA / UAT** of a WIP component in isolation: following review you should deploy a preview version to Chromatic straight from your **feature branch** _without_ merging to development
212
- * For releasing an **NPM snapshot**: merge your feature branch into the **development** branch and publish the NPM snapshot from there
213
-
214
- ### **2. Detailed Workflow**
215
-
216
- #### **Before review:**
217
-
218
- * Git pull the latest version of WIP
219
- * Checkout a new, correctly-named feature branch from WIP
220
- * Do your work on this feature branch
221
- * Run: `yarn lint`
222
- * Run: `yarn test`
223
- * Commit your changes
224
- * Create a pull request from your feature branch to WIP
225
- * Add the appropriate reviewers
226
-
227
- #### **Before QA / UAT:**
228
-
229
- After your PR is approved, you have two options:
230
-
231
- **i.** For QA of a component in isolation:
57
+ ## Components
232
58
 
233
- * Follow the steps above in *Deploying the Storybook -> 2. Deploying a preview version remotely*
234
- * Share the generated Chromatic URL with the appropriate people for QA / UAT
235
-
236
- **ii.** For integrated testing of a component in the frontend staging environments:
237
-
238
- * Check out the WIP branch
239
- * Merge your work in to WIP
240
- * Follow the steps above under *Publishing a New Package Version -> 1. To release a snapshot version*
241
- * Git push the updated WIP branch to remote
242
- * Finally, in the frontend repo:
243
-
244
- 1. Update the `package.json` to reference the new snapshot version
245
- 2. Run: `yarn install`
246
- 3. Deploy the frontend to a staging environment
247
-
248
- #### **When ready for production:**
249
-
250
- * Return to your WIP **feature branch**
251
- * Update the WIP version in `package.json`, incrementing from the last **stable** release, found in WIP, and following the rules described in the *Versioning* section
252
- * Update `CHANGELOG.md`, adding the new version number and a short description of your changes
253
- * Run: `yarn lint`
254
- * Run: `yarn test`
255
- * Run: `yarn test-storybook -u`
256
- * Run: `yarn build-storybook`
257
- * Git commit, push, and update your PR for final approval
258
- * Merge your approved PR to WIP
259
- * Follow the steps in *Publishing a New Package Version -> 2. To release a stable version* to publish the NPM package
260
- * Finally, follow the steps in *Deploying The Storybook -> 3. To deploy a release version*, to update the public WIP Storybook page
261
-
262
- 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.
263
-
264
-
265
- ## Notes
266
- ---
267
- ### The `storybook-static` folder
268
-
269
- 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:
270
-
271
- ```bash
272
- yarn build-storybook
273
- ```
59
+ WIP
274
60
 
275
- 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.
61
+ ## Types
276
62
 
277
- ---
278
- ### Examples
63
+ WIP
279
64
 
280
- 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.
281
65
 
282
- ---
283
- ### Bundle analysis
66
+ ## Documentation
284
67
 
285
- 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`.
68
+ See Storybook as a reference
@@ -1,3 +1,4 @@
1
- import { IImageAspectRatioWrapperProps } from '../../../types/image';
2
- declare const ImageAspectRatioWrapper: import("styled-components").StyledComponent<"div", any, IImageAspectRatioWrapperProps, never>;
1
+ import React from 'react';
2
+ import { ImageAspectRatioWrapperProps } from '../../../types/image';
3
+ declare const ImageAspectRatioWrapper: React.FC<ImageAspectRatioWrapperProps>;
3
4
  export default ImageAspectRatioWrapper;
@@ -0,0 +1,3 @@
1
+ import { IImageAspectRatioWrapperProps } from '../../../types/image';
2
+ declare const StyledImageAspectRatioWrapper: import("styled-components").StyledComponent<"div", any, IImageAspectRatioWrapperProps, never>;
3
+ export default StyledImageAspectRatioWrapper;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { SocialLinksProps } from '../../../types/footer';
3
+ declare const SocialLinks: React.FC<SocialLinksProps>;
4
+ export default SocialLinks;
@@ -0,0 +1,2 @@
1
+ export declare const MediaLinksWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const MediaIconWrapper: import("styled-components").StyledComponent<"a", any, {}, never>;
@@ -0,0 +1,2 @@
1
+ import SocialLinks from './SocialLinks';
2
+ export default SocialLinks;
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { ISponsorLogoProps } from '../../../types/types';
3
- declare const SponsorLogo: ({ colorLogo, colorBackground }: ISponsorLogoProps) => React.ReactElement;
3
+ declare const SponsorLogo: ({ colorLogo, colorBackground, alt, }: ISponsorLogoProps) => React.ReactElement;
4
4
  export default SponsorLogo;
@@ -25,4 +25,5 @@ import TypeTags from './TypeTags';
25
25
  import { AltHeader, BodyText, Header, Overline, Subtitle } from './Typography';
26
26
  import VideoControls from './VideoControls';
27
27
  import { Stepper } from './Stepper';
28
- export { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, Progress, PrimaryButton, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SponsorLogo, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, VideoControls, };
28
+ import SocialLinks from './SocialLinks';
29
+ export { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, Progress, PrimaryButton, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SponsorLogo, Sponsorship, SocialLinks, Stepper, StreamBadge, Subtitle, Tab, TabLink, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, VideoControls, };
@@ -1,3 +1,3 @@
1
1
  import { IImageWithCaptionWrapperProps } from '../../../types/image';
2
- export declare const Wrapper: import("styled-components").StyledComponent<"div", any, IImageWithCaptionWrapperProps, never>;
3
- export declare const CaptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const Wrapper: import("styled-components").StyledComponent<"figure", any, IImageWithCaptionWrapperProps, never>;
3
+ export declare const CaptionWrapper: import("styled-components").StyledComponent<"figcaption", any, {}, never>;
@@ -1,4 +1,4 @@
1
- import { FunctionComponent } from 'react';
2
- import { IPolicyLinksProps } from '../../../types/footer';
3
- declare const PolicyLinks: FunctionComponent<IPolicyLinksProps>;
1
+ import React from 'react';
2
+ import { PolicyLinksProps } from '../../../types/footer';
3
+ declare const PolicyLinks: React.FC<PolicyLinksProps>;
4
4
  export default PolicyLinks;
@@ -1,3 +1 @@
1
- export declare const PolicyLinksList: import("styled-components").StyledComponent<"ul", any, {}, never>;
2
- export declare const PolicyLinkItem: import("styled-components").StyledComponent<"li", any, {}, never>;
3
- export declare const PolicyLink: import("styled-components").StyledComponent<"a", any, {}, never>;
1
+ export declare const PolicyLinksTextLinkWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/types").ITextLinkProps>, any, {}, never>;