@royaloperahouse/chord 1.1.0-b-chord-development → 1.1.0-b-development
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.
- package/CHANGELOG.md +2 -0
- package/README.GIT +122 -0
- package/README.md +44 -99
- package/dist/chord.cjs.development.js +99 -56
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +100 -57
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/Typography/Typography.d.ts +1 -1
- package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +5 -3
- package/dist/helpers/defaultValues.d.ts +7 -0
- package/dist/types/editorial.d.ts +16 -0
- package/dist/types/typography.d.ts +5 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.GIT
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# Royal Opera House - Front End Design System
|
|
2
|
+
|
|
3
|
+
Welcome to the Royal Opera House Front End Design System, `@royaloperahouse/chord`.
|
|
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
|
+
## Commands
|
|
10
|
+
|
|
11
|
+
The required package dependencies need to be insalled using `yarn`. Once ready you can issue the following:
|
|
12
|
+
|
|
13
|
+
To run Lint on the package use:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
yarn lint # you can also use the --fix option to perform automatic fixes
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
To run the unit tests (using Jest) use:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
yarn test # you can also use the -u option to update snapshots if needed
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
To run the unit tests (using Jest) and store them for display in storybook use:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
yarn test-storybook # you can also use the -u option to update snapshots if needed
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
To run storybook use:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
yarn storybook
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
To build a static version of storybook use:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
yarn build-storybook
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
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).
|
|
44
|
+
|
|
45
|
+
To deploy the storybook publically:
|
|
46
|
+
|
|
47
|
+
### Prerequisites
|
|
48
|
+
|
|
49
|
+
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]`.
|
|
50
|
+
|
|
51
|
+
You can get these values at:
|
|
52
|
+
|
|
53
|
+
AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' ->
|
|
54
|
+
'Command line or programmatic access'
|
|
55
|
+
|
|
56
|
+
### Deployment
|
|
57
|
+
|
|
58
|
+
To deploy, first *build* the storybook as above
|
|
59
|
+
|
|
60
|
+
then use:
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
yarn deploy-storybook
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
This will deploy the contents of `./storybook-static` to S3 as a static site accessible at [chord.roh.org.uk](chord.roh.org.uk)
|
|
67
|
+
|
|
68
|
+
To build the package use:
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
yarn build
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
To release a new version.
|
|
75
|
+
|
|
76
|
+
Release will be published in npm (NPM_TOKEN will be required)
|
|
77
|
+
Storybook will be pushed to bitbucket. *** Push will be done Ensure you don't have things pendint to push
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
MORE INFO TO FOLLOW - PARTICULARLY FOR THE CI SETUP AND HOW PACKAGES ARE PUSHED.
|
|
85
|
+
|
|
86
|
+
# Recommended Use of Package
|
|
87
|
+
|
|
88
|
+
The package is deployed to NPM, and can be installed using yarn or npm:
|
|
89
|
+
|
|
90
|
+
```bash
|
|
91
|
+
npm i --save @royaloperahouse/chord
|
|
92
|
+
```
|
|
93
|
+
```bash
|
|
94
|
+
yarn add @royaloperahouse/chord
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
# Processes to follow prior to commits
|
|
98
|
+
|
|
99
|
+
Before a commit is made you need to do the following:
|
|
100
|
+
|
|
101
|
+
- Make sure that you are in your own work branch (properly named, including the JIRA ticket number and a short description)
|
|
102
|
+
- `yarn lint` - ensure that you are not introducing errors
|
|
103
|
+
- `yarn test` - ensure that tests are running as expected
|
|
104
|
+
- `yarn test-storybook` - Save the test results to for the static site
|
|
105
|
+
- `yarn build-storybook` - Update the static site
|
|
106
|
+
- Commit your changes in your branch locally
|
|
107
|
+
|
|
108
|
+
Next, if you are ready to merge into the main development branch then:
|
|
109
|
+
|
|
110
|
+
- _*ensure that you pull the latest changes from that branch into your new branch, resolving any merge conflicts that may arise*_
|
|
111
|
+
- Commit any merge changes locally
|
|
112
|
+
- Push your branch changes to the origin repo
|
|
113
|
+
- Raise a Pull Request to merge back into the main development branch, AND ensure that the required reviewers are assigned.
|
|
114
|
+
- The reviewers may raise issues, and once resolved, they will be responsible for performing the merge.
|
|
115
|
+
|
|
116
|
+
### Example
|
|
117
|
+
|
|
118
|
+
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.
|
|
119
|
+
|
|
120
|
+
### Bundle analysis
|
|
121
|
+
|
|
122
|
+
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`.
|
package/README.md
CHANGED
|
@@ -1,122 +1,67 @@
|
|
|
1
|
-
# Royal Opera House -
|
|
1
|
+
# Royal Opera House - chord
|
|
2
2
|
|
|
3
|
-
Welcome to the Royal Opera House
|
|
3
|
+
Welcome to the Royal Opera House library components `@royaloperahouse/chord`.
|
|
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
|
-
##
|
|
10
|
-
|
|
11
|
-
The required package dependencies need to be insalled using `yarn`. Once ready you can issue the following:
|
|
12
|
-
|
|
13
|
-
To run Lint on the package use:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
yarn lint # you can also use the --fix option to perform automatic fixes
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
To run the unit tests (using Jest) use:
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
yarn test # you can also use the -u option to update snapshots if needed
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
To run the unit tests (using Jest) and store them for display in storybook use:
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
yarn test-storybook # you can also use the -u option to update snapshots if needed
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
To run storybook use:
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
yarn storybook
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
To build a static version of storybook use:
|
|
8
|
+
## Install
|
|
38
9
|
|
|
39
10
|
```bash
|
|
40
|
-
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
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).
|
|
44
|
-
|
|
45
|
-
To deploy the storybook publically:
|
|
46
|
-
|
|
47
|
-
### Prerequisites
|
|
48
|
-
|
|
49
|
-
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]`.
|
|
50
|
-
|
|
51
|
-
You can get these values at:
|
|
52
|
-
|
|
53
|
-
AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' ->
|
|
54
|
-
'Command line or programmatic access'
|
|
55
|
-
|
|
56
|
-
### Deployment
|
|
57
|
-
|
|
58
|
-
To deploy, first *build* the storybook as above
|
|
59
|
-
|
|
60
|
-
then use:
|
|
61
|
-
|
|
62
|
-
```bash
|
|
63
|
-
yarn deploy-storybook
|
|
11
|
+
npm i --save @royaloperahouse/chord
|
|
64
12
|
```
|
|
65
|
-
|
|
66
|
-
This will deploy the contents of `./storybook-static` to S3 as a static site accessible at [chord.roh.org.uk](chord.roh.org.uk)
|
|
67
|
-
|
|
68
|
-
To build the package use:
|
|
69
|
-
|
|
70
13
|
```bash
|
|
71
|
-
yarn
|
|
14
|
+
yarn add @royaloperahouse/chord
|
|
72
15
|
```
|
|
73
16
|
|
|
74
|
-
|
|
17
|
+
## Usage
|
|
75
18
|
|
|
76
|
-
|
|
77
|
-
|
|
19
|
+
```javascript
|
|
20
|
+
import {
|
|
21
|
+
Footer, GlobalStyles, ThemeProvider, ThemeType,
|
|
22
|
+
} from '@royaloperahouse/chord';
|
|
78
23
|
|
|
79
|
-
```bash
|
|
80
|
-
NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
|
|
81
24
|
```
|
|
25
|
+
## Sample
|
|
26
|
+
|
|
27
|
+
```javascript
|
|
28
|
+
|
|
29
|
+
import {
|
|
30
|
+
Footer, GlobalStyles, ThemeProvider, ThemeType,
|
|
31
|
+
} from '@royaloperahouse/chord';
|
|
32
|
+
|
|
33
|
+
|
|
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
|
+
);
|
|
82
53
|
|
|
83
|
-
|
|
84
|
-
MORE INFO TO FOLLOW - PARTICULARLY FOR THE CI SETUP AND HOW PACKAGES ARE PUSHED.
|
|
85
|
-
|
|
86
|
-
# Recommended Use of Package
|
|
87
|
-
|
|
88
|
-
The package is deployed to NPM, and can be installed using yarn or npm:
|
|
89
|
-
|
|
90
|
-
```bash
|
|
91
|
-
npm i --save @royaloperahouse/chord
|
|
92
54
|
```
|
|
93
|
-
```bash
|
|
94
|
-
yarn add @royaloperahouse/chord
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
# Processes to follow prior to commits
|
|
98
|
-
|
|
99
|
-
Before a commit is made you need to do the following:
|
|
100
55
|
|
|
101
|
-
|
|
102
|
-
- `yarn lint` - ensure that you are not introducing errors
|
|
103
|
-
- `yarn test` - ensure that tests are running as expected
|
|
104
|
-
- `yarn test-storybook` - Save the test results to for the static site
|
|
105
|
-
- `yarn build-storybook` - Update the static site
|
|
106
|
-
- Commit your changes in your branch locally
|
|
56
|
+
## Components
|
|
107
57
|
|
|
108
|
-
|
|
58
|
+
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
|
|
109
59
|
|
|
110
|
-
|
|
111
|
-
- Commit any merge changes locally
|
|
112
|
-
- Push your branch changes to the origin repo
|
|
113
|
-
- Raise a Pull Request to merge back into the main development branch, AND ensure that the required reviewers are assigned.
|
|
114
|
-
- The reviewers may raise issues, and once resolved, they will be responsible for performing the merge.
|
|
60
|
+
## Types
|
|
115
61
|
|
|
116
|
-
|
|
62
|
+
AspectRatio, CarouselType, Colors, FooterData, INavigationProps, INavTopProps, TickboxMode, ThemeType
|
|
117
63
|
|
|
118
|
-
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.
|
|
119
64
|
|
|
120
|
-
|
|
65
|
+
## Documentation
|
|
121
66
|
|
|
122
|
-
|
|
67
|
+
See Storybook as a reference
|
|
@@ -2974,9 +2974,10 @@ var BodyText = function BodyText(_ref3) {
|
|
|
2974
2974
|
}, children);
|
|
2975
2975
|
};
|
|
2976
2976
|
var Header = function Header(_ref4) {
|
|
2977
|
-
var
|
|
2977
|
+
var semanticLevel = _ref4.semanticLevel,
|
|
2978
|
+
level = _ref4.level,
|
|
2978
2979
|
children = _ref4.children;
|
|
2979
|
-
var renderedTag = "h" + level;
|
|
2980
|
+
var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
|
|
2980
2981
|
return /*#__PURE__*/React__default.createElement(StyledTag, {
|
|
2981
2982
|
tag: renderedTag,
|
|
2982
2983
|
typography: "header",
|
|
@@ -5697,47 +5698,41 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5697
5698
|
}));
|
|
5698
5699
|
};
|
|
5699
5700
|
|
|
5700
|
-
var _templateObject$P, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15;
|
|
5701
|
+
var _templateObject$P, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
|
|
5701
5702
|
var LENGTH_TEXT = 28;
|
|
5702
|
-
var LENGTH_TEXT_TABLET$1 =
|
|
5703
|
-
var
|
|
5703
|
+
var LENGTH_TEXT_TABLET$1 = 12;
|
|
5704
|
+
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
5705
|
+
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
5706
|
+
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
5707
|
+
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
5708
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
5704
5709
|
var imageToLeft = _ref.imageToLeft;
|
|
5705
|
-
return imageToLeft ?
|
|
5710
|
+
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
5706
5711
|
}, devices.tablet, function (_ref2) {
|
|
5707
5712
|
var imageToLeft = _ref2.imageToLeft;
|
|
5708
5713
|
return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
|
|
5709
|
-
}, devices.mobile)
|
|
5710
|
-
|
|
5711
|
-
var imageToLeft = _ref3.imageToLeft;
|
|
5712
|
-
return imageToLeft ? 'left' : 'right';
|
|
5713
|
-
}, devices.mobile);
|
|
5714
|
-
var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n display: ", ";\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
5715
|
-
var imageToLeft = _ref4.imageToLeft;
|
|
5716
|
-
return imageToLeft ? 'right' : 'left';
|
|
5717
|
-
}, devices.mobile, function (_ref5) {
|
|
5718
|
-
var hideSection = _ref5.hideSection;
|
|
5719
|
-
return hideSection ? 'none' : 'block';
|
|
5714
|
+
}, devices.mobile, function (asCard) {
|
|
5715
|
+
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
5720
5716
|
});
|
|
5721
|
-
var
|
|
5722
|
-
var
|
|
5723
|
-
var
|
|
5724
|
-
var theme = _ref6.theme;
|
|
5717
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
5718
|
+
var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref3) {
|
|
5719
|
+
var theme = _ref3.theme;
|
|
5725
5720
|
return theme.colors.black;
|
|
5726
|
-
}, function (
|
|
5727
|
-
var theme =
|
|
5721
|
+
}, function (_ref4) {
|
|
5722
|
+
var theme = _ref4.theme;
|
|
5728
5723
|
return theme.colors.darkgrey;
|
|
5729
|
-
}, function (
|
|
5730
|
-
var theme =
|
|
5724
|
+
}, function (_ref5) {
|
|
5725
|
+
var theme = _ref5.theme;
|
|
5731
5726
|
return theme.colors.primary;
|
|
5732
5727
|
});
|
|
5733
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(
|
|
5734
|
-
var hasTextLinks =
|
|
5728
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref6) {
|
|
5729
|
+
var hasTextLinks = _ref6.hasTextLinks;
|
|
5735
5730
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
5736
|
-
}, function (
|
|
5737
|
-
var
|
|
5738
|
-
primaryButtonTextLength =
|
|
5739
|
-
|
|
5740
|
-
tertiaryButtonTextLength =
|
|
5731
|
+
}, function (_ref7) {
|
|
5732
|
+
var _ref7$primaryButtonTe = _ref7.primaryButtonTextLength,
|
|
5733
|
+
primaryButtonTextLength = _ref7$primaryButtonTe === void 0 ? 0 : _ref7$primaryButtonTe,
|
|
5734
|
+
_ref7$tertiaryButtonT = _ref7.tertiaryButtonTextLength,
|
|
5735
|
+
tertiaryButtonTextLength = _ref7$tertiaryButtonT === void 0 ? 0 : _ref7$tertiaryButtonT;
|
|
5741
5736
|
var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
|
|
5742
5737
|
|
|
5743
5738
|
if (isLinksLayoutColumn) {
|
|
@@ -5745,11 +5740,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
|
|
|
5745
5740
|
}
|
|
5746
5741
|
|
|
5747
5742
|
return '';
|
|
5748
|
-
}, devices.mobile, devices.tablet, function (
|
|
5749
|
-
var
|
|
5750
|
-
primaryButtonTextLength =
|
|
5751
|
-
|
|
5752
|
-
tertiaryButtonTextLength =
|
|
5743
|
+
}, devices.mobile, devices.tablet, function (_ref8) {
|
|
5744
|
+
var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
|
|
5745
|
+
primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
|
|
5746
|
+
_ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
|
|
5747
|
+
tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
|
|
5753
5748
|
var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
|
|
5754
5749
|
|
|
5755
5750
|
if (isLinksLayoutColumnTablet) {
|
|
@@ -5758,22 +5753,40 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
|
|
|
5758
5753
|
|
|
5759
5754
|
return '';
|
|
5760
5755
|
});
|
|
5761
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(
|
|
5762
|
-
var marginBottom =
|
|
5756
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref9) {
|
|
5757
|
+
var marginBottom = _ref9.marginBottom;
|
|
5763
5758
|
return marginBottom + "px";
|
|
5764
5759
|
});
|
|
5765
|
-
var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(
|
|
5766
|
-
var TextLinksContainer = /*#__PURE__*/styled__default.div(
|
|
5767
|
-
var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(
|
|
5768
|
-
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(
|
|
5769
|
-
var IconWrapper$2 = /*#__PURE__*/styled__default.div(
|
|
5770
|
-
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(
|
|
5771
|
-
var MobileTitleWrapper = /*#__PURE__*/styled__default.div(
|
|
5760
|
+
var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
5761
|
+
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
5762
|
+
var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
5763
|
+
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
|
|
5764
|
+
var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
5765
|
+
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n"])));
|
|
5766
|
+
var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
5767
|
+
var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5768
|
+
var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5769
|
+
var asCardOverrides = /*#__PURE__*/styled.css(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n font-size: var(--font-size-subtitle-2);\n }\n\n ", " {\n font-size: var(--font-size-overline-1);\n }\n\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet);
|
|
5770
|
+
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref10) {
|
|
5771
|
+
var imageToLeft = _ref10.imageToLeft;
|
|
5772
|
+
return imageToLeft ? 'left' : 'right';
|
|
5773
|
+
}, devices.mobile);
|
|
5774
|
+
var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n display: ", ";\n grid-area: row2;\n align-self: start;\n }\n }\n\n ", "\n"])), function (_ref11) {
|
|
5775
|
+
var imageToLeft = _ref11.imageToLeft;
|
|
5776
|
+
return imageToLeft ? 'right' : 'left';
|
|
5777
|
+
}, devices.mobile, function (_ref12) {
|
|
5778
|
+
var hideSection = _ref12.hideSection;
|
|
5779
|
+
return hideSection ? 'none' : 'block';
|
|
5780
|
+
}, function (asCard) {
|
|
5781
|
+
return asCard && asCardOverrides;
|
|
5782
|
+
});
|
|
5783
|
+
var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
|
|
5772
5784
|
|
|
5773
5785
|
var _excluded$j = ["text"],
|
|
5774
5786
|
_excluded2$3 = ["text"],
|
|
5775
5787
|
_excluded3 = ["text"];
|
|
5776
5788
|
var LENGTH_TEXT$1 = 28;
|
|
5789
|
+
var LENGTH_TEXT_PARAGRAPH = 130;
|
|
5777
5790
|
|
|
5778
5791
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
5779
5792
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -5791,7 +5804,13 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5791
5804
|
belowTitleTags = _ref.belowTitleTags,
|
|
5792
5805
|
middleText = _ref.middleText,
|
|
5793
5806
|
bottomText = _ref.bottomText,
|
|
5794
|
-
image = _ref.image
|
|
5807
|
+
image = _ref.image,
|
|
5808
|
+
_ref$asCard = _ref.asCard,
|
|
5809
|
+
asCard = _ref$asCard === void 0 ? false : _ref$asCard,
|
|
5810
|
+
_ref$disableCTA = _ref.disableCTA,
|
|
5811
|
+
disableCTA = _ref$disableCTA === void 0 ? false : _ref$disableCTA,
|
|
5812
|
+
_ref$disabledCTACopy = _ref.disabledCTACopy,
|
|
5813
|
+
disabledCTACopy = _ref$disabledCTACopy === void 0 ? 'Sold Out' : _ref$disabledCTACopy;
|
|
5795
5814
|
|
|
5796
5815
|
var _useState = React.useState(false),
|
|
5797
5816
|
showExtraContent = _useState[0],
|
|
@@ -5801,8 +5820,20 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5801
5820
|
return str.length >= n ? str.substr(0, n) : str;
|
|
5802
5821
|
};
|
|
5803
5822
|
|
|
5823
|
+
var getTitleLevel = function getTitleLevel(titleSize, isCard) {
|
|
5824
|
+
if (isCard) {
|
|
5825
|
+
return 5;
|
|
5826
|
+
}
|
|
5827
|
+
|
|
5828
|
+
if (titleSize === 'large') {
|
|
5829
|
+
return 3;
|
|
5830
|
+
}
|
|
5831
|
+
|
|
5832
|
+
return 2;
|
|
5833
|
+
};
|
|
5834
|
+
|
|
5804
5835
|
var imageToLeft = imagePosition === 'left';
|
|
5805
|
-
var titleLevel = titleSize
|
|
5836
|
+
var titleLevel = getTitleLevel(titleSize, asCard);
|
|
5806
5837
|
var isExtraContentPresent = !!children;
|
|
5807
5838
|
var anchorLink = title.replace(' ', '-').toLocaleLowerCase() + "-content";
|
|
5808
5839
|
|
|
@@ -5832,6 +5863,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5832
5863
|
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
|
|
5833
5864
|
|
|
5834
5865
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$1);
|
|
5866
|
+
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
5835
5867
|
var textLinkItems = textLinks ? textLinks.map(function (link) {
|
|
5836
5868
|
var _link$text = link.text,
|
|
5837
5869
|
textLinkText = _link$text === void 0 ? '' : _link$text,
|
|
@@ -5841,24 +5873,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5841
5873
|
}) : null;
|
|
5842
5874
|
return /*#__PURE__*/React__default.createElement(PromoWithTagsGrid, {
|
|
5843
5875
|
id: anchorLink,
|
|
5844
|
-
|
|
5876
|
+
"data-testid": "grid-wrapper",
|
|
5877
|
+
imageToLeft: imageToLeft,
|
|
5878
|
+
asCard: asCard
|
|
5845
5879
|
}, /*#__PURE__*/React__default.createElement(PromoWithTagsContentWrapper, {
|
|
5846
5880
|
"data-testid": "content-wrapper",
|
|
5847
5881
|
imageToLeft: imageToLeft,
|
|
5848
|
-
hideSection: showExtraContent
|
|
5882
|
+
hideSection: showExtraContent,
|
|
5883
|
+
asCard: asCard
|
|
5849
5884
|
}, /*#__PURE__*/React__default.createElement(PromoWithTagsContainer, null, !!(aboveTitleTags != null && aboveTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
5850
5885
|
marginBottom: 16
|
|
5851
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
5886
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
|
|
5852
5887
|
list: aboveTitleTags
|
|
5853
|
-
})), /*#__PURE__*/React__default.createElement(
|
|
5888
|
+
})), /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
|
|
5889
|
+
semanticLevel: 2,
|
|
5854
5890
|
level: titleLevel
|
|
5855
5891
|
}, title)), subtitle && /*#__PURE__*/React__default.createElement(PromoWithTagsSubtitle, null, subtitle), !!(belowTitleTags != null && belowTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
5856
5892
|
marginBottom: 8
|
|
5857
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
5893
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
|
|
5858
5894
|
list: belowTitleTags
|
|
5859
5895
|
})), /*#__PURE__*/React__default.createElement(PromoWithTagsText, {
|
|
5860
5896
|
dangerouslySetInnerHTML: {
|
|
5861
|
-
__html:
|
|
5897
|
+
__html: textTruncate
|
|
5862
5898
|
}
|
|
5863
5899
|
}), middleText && /*#__PURE__*/React__default.createElement(PromoWithTagsAdditionalText, {
|
|
5864
5900
|
dangerouslySetInnerHTML: {
|
|
@@ -5873,12 +5909,19 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5873
5909
|
"data-testid": "buttons-wrapper",
|
|
5874
5910
|
primaryButtonTextLength: primaryButtonText.length,
|
|
5875
5911
|
tertiaryButtonTextLength: tertiaryButtonText.length
|
|
5876
|
-
}, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null,
|
|
5912
|
+
}, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, disableCTA ? /*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
5913
|
+
bgColor: exports.Colors.MidGrey,
|
|
5914
|
+
onClick: function onClick() {
|
|
5915
|
+
return null;
|
|
5916
|
+
},
|
|
5917
|
+
"data-testid": "diabled-link"
|
|
5918
|
+
}, disabledCTACopy || primaryButtonTextTruncate) : !showExtraContent && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
|
|
5877
5919
|
onClick: defaultOnClickHandler
|
|
5878
5920
|
}, restPrimaryButton), primaryButtonTextTruncate)), tertiaryButton && /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate))), /*#__PURE__*/React__default.createElement(PromoWithTagsExtraContentWrapper, {
|
|
5879
5921
|
"data-testid": "extra-content-wrapper",
|
|
5880
5922
|
imageToLeft: imageToLeft
|
|
5881
|
-
}, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(
|
|
5923
|
+
}, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
|
|
5924
|
+
semanticLevel: 2,
|
|
5882
5925
|
level: titleLevel
|
|
5883
5926
|
}, title)), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
5884
5927
|
aspectRatio: exports.AspectRatio['4:3']
|