@royaloperahouse/chord 1.2.0 → 1.3.0-a-chord-development

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## [1.3.0]
+- Add Static Actvivity Cards as PromoWithTags variant
+
 ## [1.2.0]
 - Card: buttons do not change position on mobiles; 
 

package/README.md

@@ -1,67 +1,122 @@
-# Royal Opera House - chord 
+# Royal Opera House - Front End Design System
 
-Welcome to the Royal Opera House library components  `@royaloperahouse/chord`.
+Welcome to the Royal Opera House Front End Design System, `@royaloperahouse/chord`.
 
 This package is a library of UI components intended to be used in the ROH website.
 
+It uses React, TypeScript, TSDX and Storybook.
 
-## Install
+## Commands
+
+The required package dependencies need to be insalled using `yarn`. Once ready you can issue the following:
+
+To run Lint on the package use:
 
 ```bash
-    npm i --save @royaloperahouse/chord
+yarn lint # you can also use the --fix option to perform automatic fixes
 ```
+
+To run the unit tests (using Jest) use:
+
 ```bash
-    yarn add @royaloperahouse/chord
+yarn test # you can also use the -u option to update snapshots if needed
 ```
 
-## Usage
+To run the unit tests (using Jest) and store them for display in storybook use:
+
+```bash
+yarn test-storybook # you can also use the -u option to update snapshots if needed
+```
+
+To run storybook use:
+
+```bash
+yarn storybook
+```
 
-```javascript
-import {
-  Footer, GlobalStyles, ThemeProvider, ThemeType,
-} from '@royaloperahouse/chord';
+To build a static version of storybook use:
 
+```bash
+yarn build-storybook
 ```
-## Sample
-
-```javascript
-
-import {
-  Footer, GlobalStyles, ThemeProvider, ThemeType,
-} from '@royaloperahouse/chord';
-
-
-const App = ({ children }: InnerProps): React.ReactElement => (
-  <ErrorBoundary>
-    <ThemeProvider theme={ThemeType.Core}>
-      <GlobalStyles />
-      <Wrapper>
-        <Header />
-        <GlobalStyle />
-        <HealthBanner />
-        <ErrorBoundary>
-          <Content>
-            {children}
-          </Content>
-        </ErrorBoundary>
-        <LiveChat />
-      </Wrapper>
-      <Footer data={footerData} />
-    </ThemeProvider>
-  </ErrorBoundary>
-);
 
+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).
+
+To deploy the storybook publically:
+
+### Prerequisites
+
+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]`.
+
+You can get these values at:
+
+AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' ->
+'Command line or programmatic access'
+
+### Deployment
+
+To deploy, first *build* the storybook as above
+
+then use:
+
+```bash
+yarn deploy-storybook
 ```
 
-## Components
+This will deploy the contents of `./storybook-static` to S3 as a static site accessible at [chord.roh.org.uk](chord.roh.org.uk)
+
+To build the package use:
+
+```bash
+yarn build
+```
+
+To release a new version.
+
+Release will be published in npm (NPM_TOKEN will be required)
+Storybook will be pushed to bitbucket. *** Push will be done Ensure you don't have things pendint to push
+
+```bash
+ NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
+```
+
+
+MORE INFO TO FOLLOW - PARTICULARLY FOR THE CI SETUP AND HOW PACKAGES ARE PUSHED.
+
+# Recommended Use of Package
+
+The package is deployed to NPM, and can be installed using yarn or npm:
+
+```bash
+    npm i --save @royaloperahouse/chord
+```
+```bash
+    yarn add @royaloperahouse/chord
+```
+
+# Processes to follow prior to commits
+
+Before a commit is made you need to do the following:
+
+- Make sure that you are in your own work branch (properly named, including the JIRA ticket number and a short description)
+- `yarn lint` - ensure that you are not introducing errors
+- `yarn test` - ensure that tests are running as expected
+- `yarn test-storybook` - Save the test results to for the static site
+- `yarn build-storybook` - Update the static site
+- Commit your changes in your branch locally
 
-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
+Next, if you are ready to merge into the main development branch then:
 
-## Types
+- _*ensure that you pull the latest changes from that branch into your new branch, resolving any merge conflicts that may arise*_
+- Commit any merge changes locally
+- Push your branch changes to the origin repo
+- Raise a Pull Request to merge back into the main development branch, AND ensure that the required reviewers are assigned.
+- The reviewers may raise issues, and once resolved, they will be responsible for performing the merge.
 
-AspectRatio, CarouselType, Colors, FooterData, INavigationProps, INavTopProps, TickboxMode, ThemeType
+### Example
 
+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.
 
-## Documentation
+### Bundle analysis
 
-See Storybook as a reference
+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/dist/chord.cjs.development.js

@@ -2655,10 +2655,11 @@ var SponsorLogo = function SponsorLogo(_ref) {
 };
 
 var _templateObject$d;
+var SponsorshipStyledIframe = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  height: 80px;\n  margin: 0px;\n  overflow: hidden;\n  padding: 0;\n  width: 80px;\n\n  & > iframe {\n    border: 0;\n    display: block;\n    margin: 0px;\n    padding: 0px;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media ", " {\n    & {\n      height: 40px;\n      width: 40px;\n    }\n    & iframe {\n      height: 80px;\n      transform: scale(0.5) translate(-40px, -40px);\n      width: 80px;\n    }\n  }\n"])), devices.mobile);
+
 var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v3/rolex.html?size=80';
 var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
 var DEFAULT_DATA_ROH = 'ImgAdvert';
-var SponsorshipStyled = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  height: 80px;\n  margin: 0px;\n  overflow: hidden;\n  padding: 0;\n  width: 80px;\n\n  & > iframe {\n    border: 0;\n    display: block;\n    margin: 0px;\n    padding: 0px;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media ", " {\n    & {\n      height: 40px;\n      width: 40px;\n    }\n    & iframe {\n      height: 80px;\n      transform: scale(0.5) translate(-40px, -40px);\n      width: 80px;\n    }\n  }\n"])), devices.mobile);
 
 var Sponsorship = function Sponsorship(_ref) {
   var _ref$src = _ref.src,
@@ -2666,8 +2667,15 @@ var Sponsorship = function Sponsorship(_ref) {
       _ref$dataRoh = _ref.dataRoh,
       dataRoh = _ref$dataRoh === void 0 ? DEFAULT_DATA_ROH : _ref$dataRoh,
       _ref$title = _ref.title,
-      title = _ref$title === void 0 ? DEFAULT_SPONSORSHIP_TITLE : _ref$title;
-  return /*#__PURE__*/React__default.createElement(SponsorshipStyled, null, /*#__PURE__*/React__default.createElement("iframe", {
+      title = _ref$title === void 0 ? DEFAULT_SPONSORSHIP_TITLE : _ref$title,
+      isCustomImage = _ref.isCustomImage;
+  if (isCustomImage) return /*#__PURE__*/React__default.createElement("img", {
+    src: src,
+    alt: title,
+    "data-roh": dataRoh,
+    "data-testid": "custom-sponsor"
+  });
+  return /*#__PURE__*/React__default.createElement(SponsorshipStyledIframe, null, /*#__PURE__*/React__default.createElement("iframe", {
     src: src,
     scrolling: "no",
     "data-roh": dataRoh,
@@ -2974,9 +2982,10 @@ var BodyText = function BodyText(_ref3) {
   }, children);
 };
 var Header = function Header(_ref4) {
-  var level = _ref4.level,
+  var semanticLevel = _ref4.semanticLevel,
+      level = _ref4.level,
       children = _ref4.children;
-  var renderedTag = "h" + level;
+  var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
   return /*#__PURE__*/React__default.createElement(StyledTag, {
     tag: renderedTag,
     typography: "header",
@@ -5585,6 +5594,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
       link = _ref.link,
       _ref$sponsor = _ref.sponsor,
       sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
+      customSponsorData = _ref.customSponsorData,
       scrollHref = _ref.scrollHref,
       bgUrlDesktop = _ref.bgUrlDesktop,
       bgUrlDevice = _ref.bgUrlDevice;
@@ -5600,7 +5610,11 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
     "data-testid": "impact-wrapper"
   }, sponsor ? /*#__PURE__*/React__default.createElement(SponsorWrapper, {
     "data-testid": "impact-sponsor"
-  }, /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(ImpactGrid, null, children ? /*#__PURE__*/React__default.createElement(LogoWrapper$2, {
+  }, customSponsorData ? /*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
+    "data-testid": "impact-custom-sponsor"
+  }, customSponsorData, {
+    isCustomImage: true
+  })) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(ImpactGrid, null, children ? /*#__PURE__*/React__default.createElement(LogoWrapper$2, {
     "data-testid": "impact-logo"
   }, children) : null, text ? /*#__PURE__*/React__default.createElement(TextWrapper$1, {
     "data-testid": "impact-text"
@@ -5697,47 +5711,41 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-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;
+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;
 var LENGTH_TEXT = 28;
-var LENGTH_TEXT_TABLET$1 = 10;
-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"])), function (_ref) {
+var LENGTH_TEXT_TABLET$1 = 12;
+var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
+var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
+var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
+var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
+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) {
   var imageToLeft = _ref.imageToLeft;
-  return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
+  return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
 }, devices.tablet, function (_ref2) {
   var imageToLeft = _ref2.imageToLeft;
   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'";
-}, devices.mobile);
-var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
-  var imageToLeft = _ref3.imageToLeft;
-  return imageToLeft ? 'left' : 'right';
-}, devices.mobile);
-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) {
-  var imageToLeft = _ref4.imageToLeft;
-  return imageToLeft ? 'right' : 'left';
-}, devices.mobile, function (_ref5) {
-  var hideSection = _ref5.hideSection;
-  return hideSection ? 'none' : 'block';
+}, devices.mobile, function (asCard) {
+  return asCard ? "\n    grid-template-areas: " + GridTemplateAsCard + ";\n    @media " + devices.tablet + " {\n      grid-template-areas: " + GridTemplateAsCardTablet + ";\n    }\n  " : "";
 });
-var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 16px;\n  }\n"])));
-var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$e || (_templateObject5$e = /*#__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"])));
-var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__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 (_ref6) {
-  var theme = _ref6.theme;
+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"])));
+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) {
+  var theme = _ref3.theme;
   return theme.colors.black;
-}, function (_ref7) {
-  var theme = _ref7.theme;
+}, function (_ref4) {
+  var theme = _ref4.theme;
   return theme.colors.darkgrey;
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return theme.colors.primary;
 });
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__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 (_ref9) {
-  var hasTextLinks = _ref9.hasTextLinks;
+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) {
+  var hasTextLinks = _ref6.hasTextLinks;
   return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
-}, function (_ref10) {
-  var _ref10$primaryButtonT = _ref10.primaryButtonTextLength,
-      primaryButtonTextLength = _ref10$primaryButtonT === void 0 ? 0 : _ref10$primaryButtonT,
-      _ref10$tertiaryButton = _ref10.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref10$tertiaryButton === void 0 ? 0 : _ref10$tertiaryButton;
+}, function (_ref7) {
+  var _ref7$primaryButtonTe = _ref7.primaryButtonTextLength,
+      primaryButtonTextLength = _ref7$primaryButtonTe === void 0 ? 0 : _ref7$primaryButtonTe,
+      _ref7$tertiaryButtonT = _ref7.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref7$tertiaryButtonT === void 0 ? 0 : _ref7$tertiaryButtonT;
   var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -5745,11 +5753,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
   }
 
   return '';
-}, devices.mobile, devices.tablet, function (_ref11) {
-  var _ref11$primaryButtonT = _ref11.primaryButtonTextLength,
-      primaryButtonTextLength = _ref11$primaryButtonT === void 0 ? 0 : _ref11$primaryButtonT,
-      _ref11$tertiaryButton = _ref11.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref11$tertiaryButton === void 0 ? 0 : _ref11$tertiaryButton;
+}, devices.mobile, devices.tablet, function (_ref8) {
+  var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
+      primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
+      _ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
 
   if (isLinksLayoutColumnTablet) {
@@ -5758,22 +5766,40 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
 
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref12) {
-  var marginBottom = _ref12.marginBottom;
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref9) {
+  var marginBottom = _ref9.marginBottom;
   return marginBottom + "px";
 });
-var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
-var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
-var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
-var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__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);
-var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__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);
-var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n"])));
-var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObject15 = /*#__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);
+var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
+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"])));
+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"])));
+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);
+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);
+var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n"])));
+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);
+var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+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);
+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) {
+  var imageToLeft = _ref10.imageToLeft;
+  return imageToLeft ? 'left' : 'right';
+}, devices.mobile);
+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) {
+  var imageToLeft = _ref11.imageToLeft;
+  return imageToLeft ? 'right' : 'left';
+}, devices.mobile, function (_ref12) {
+  var hideSection = _ref12.hideSection;
+  return hideSection ? 'none' : 'block';
+}, function (asCard) {
+  return asCard && asCardOverrides;
+});
+var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 16px;\n  }\n"])));
 
 var _excluded$j = ["text"],
     _excluded2$3 = ["text"],
     _excluded3 = ["text"];
 var LENGTH_TEXT$1 = 28;
+var LENGTH_TEXT_PARAGRAPH = 130;
 
 var PromoWithTags = function PromoWithTags(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -5791,7 +5817,13 @@ var PromoWithTags = function PromoWithTags(_ref) {
       belowTitleTags = _ref.belowTitleTags,
       middleText = _ref.middleText,
       bottomText = _ref.bottomText,
-      image = _ref.image;
+      image = _ref.image,
+      _ref$asCard = _ref.asCard,
+      asCard = _ref$asCard === void 0 ? false : _ref$asCard,
+      _ref$disableCTA = _ref.disableCTA,
+      disableCTA = _ref$disableCTA === void 0 ? false : _ref$disableCTA,
+      _ref$disabledCTACopy = _ref.disabledCTACopy,
+      disabledCTACopy = _ref$disabledCTACopy === void 0 ? 'Sold Out' : _ref$disabledCTACopy;
 
   var _useState = React.useState(false),
       showExtraContent = _useState[0],
@@ -5801,8 +5833,20 @@ var PromoWithTags = function PromoWithTags(_ref) {
     return str.length >= n ? str.substr(0, n) : str;
   };
 
+  var getTitleLevel = function getTitleLevel(titleSize, isCard) {
+    if (isCard) {
+      return 5;
+    }
+
+    if (titleSize === 'large') {
+      return 3;
+    }
+
+    return 2;
+  };
+
   var imageToLeft = imagePosition === 'left';
-  var titleLevel = titleSize === 'large' ? 2 : 3;
+  var titleLevel = getTitleLevel(titleSize, asCard);
   var isExtraContentPresent = !!children;
   var anchorLink = title.replace(' ', '-').toLocaleLowerCase() + "-content";
 
@@ -5832,6 +5876,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
       restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
 
   var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$1);
+  var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
   var textLinkItems = textLinks ? textLinks.map(function (link) {
     var _link$text = link.text,
         textLinkText = _link$text === void 0 ? '' : _link$text,
@@ -5841,24 +5886,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }) : null;
   return /*#__PURE__*/React__default.createElement(PromoWithTagsGrid, {
     id: anchorLink,
-    imageToLeft: imageToLeft
+    "data-testid": "grid-wrapper",
+    imageToLeft: imageToLeft,
+    asCard: asCard
   }, /*#__PURE__*/React__default.createElement(PromoWithTagsContentWrapper, {
     "data-testid": "content-wrapper",
     imageToLeft: imageToLeft,
-    hideSection: showExtraContent
+    hideSection: showExtraContent,
+    asCard: asCard
   }, /*#__PURE__*/React__default.createElement(PromoWithTagsContainer, null, !!(aboveTitleTags != null && aboveTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
     marginBottom: 16
-  }, /*#__PURE__*/React__default.createElement(TypeTags, {
+  }, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
     list: aboveTitleTags
-  })), /*#__PURE__*/React__default.createElement(Header, {
+  })), /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
+    semanticLevel: 2,
     level: titleLevel
   }, title)), subtitle && /*#__PURE__*/React__default.createElement(PromoWithTagsSubtitle, null, subtitle), !!(belowTitleTags != null && belowTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
     marginBottom: 8
-  }, /*#__PURE__*/React__default.createElement(TypeTags, {
+  }, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
     list: belowTitleTags
   })), /*#__PURE__*/React__default.createElement(PromoWithTagsText, {
     dangerouslySetInnerHTML: {
-      __html: text
+      __html: textTruncate
     }
   }), middleText && /*#__PURE__*/React__default.createElement(PromoWithTagsAdditionalText, {
     dangerouslySetInnerHTML: {
@@ -5873,12 +5922,19 @@ var PromoWithTags = function PromoWithTags(_ref) {
     "data-testid": "buttons-wrapper",
     primaryButtonTextLength: primaryButtonText.length,
     tertiaryButtonTextLength: tertiaryButtonText.length
-  }, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, !showExtraContent && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
+  }, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, disableCTA ? /*#__PURE__*/React__default.createElement(PrimaryButton, {
+    bgColor: exports.Colors.MidGrey,
+    onClick: function onClick() {
+      return null;
+    },
+    "data-testid": "diabled-link"
+  }, disabledCTACopy || primaryButtonTextTruncate) : !showExtraContent && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
     onClick: defaultOnClickHandler
   }, restPrimaryButton), primaryButtonTextTruncate)), tertiaryButton && /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate))), /*#__PURE__*/React__default.createElement(PromoWithTagsExtraContentWrapper, {
     "data-testid": "extra-content-wrapper",
     imageToLeft: imageToLeft
-  }, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
+  }, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
+    semanticLevel: 2,
     level: titleLevel
   }, title)), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: exports.AspectRatio['4:3']