@quintype/arrow 3.15.1-perf.4 → 3.15.1-perf.8

package/esm/components/Molecules/StoryCard/READMEBORDER.md

@@ -0,0 +1,61 @@
+# StoryCard
+
+The _StoryCard_ component with different kinds of borders and box shadow modules used to represent a story within a Row with borders.
+
+The _StoryCard_ can be composible based on it's children(Atoms).
+
+### Default Story Card with Full Border
+
+```jsx
+<StoryCard story={story} border="full" />
+```
+
+### Default Story Card with Border Bottom
+
+```jsx
+<StoryCard story={story} border="bottom" />
+```
+
+### Default Story Card with Box Shadow
+
+```jsx
+<StoryCard story={story} border="box" />
+```
+
+### StoryCard using StoryCardContent
+
+```jsx
+<StoryCard story={story} border="full">
+  <HeroImage story={story} />
+  <StorycardContent story={story}>
+    <Headline story={story} />
+    <AuthorWithTime story={story} />
+  </StorycardContent>
+</StoryCard>
+```
+
+### StoryCard using StoryCardContent border Box and fullBleed False
+
+```jsx
+<StoryCard story={story} border="box">
+  <HeroImage story={story} FullBleed={false} />
+  <StorycardContent story={story}>
+    <Headline story={story} />
+    <AuthorWithTime story={story} />
+  </StorycardContent>
+</StoryCard>
+```
+
+### Horizontal StoryCard using StoryCardContent border full
+
+```jsx
+<StoryCard story={story} border="full" isHorizontal>
+  <HeroImage story={story} />
+  <StorycardContent story={story}>
+    <Headline story={story} />
+    <AuthorWithTime story={story} />
+  </StorycardContent>
+</StoryCard>
+```
+
+<!-- PROPS -->

package/esm/components/Molecules/StoryCard/index.js

@@ -0,0 +1,200 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import { Headline } from "../../Atoms/Headline/index";
+import { Subheadline } from "../../Atoms/Subheadline/index";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { HeroImage } from "../../Atoms/HeroImage/index";
+import { SectionTag } from "../../Atoms/SectionTag/index";
+import { getTextColor, isEmpty, rgbToHex } from "../../../utils/utils";
+import PropTypes from "prop-types";
+import "./storycard.m.css";
+var _styleModuleImportMap = {
+  "./storycard.m.css": {
+    "author-timestamp-wrapper": "storycard-m_author-timestamp-wrapper__20yjp",
+    "default-card": "storycard-m_default-card__1-POn",
+    "horizontal-card": "storycard-m_horizontal-card___7afz",
+    "backgroung-img": "storycard-m_backgroung-img__1FMJT",
+    "content-overlap": "storycard-m_content-overlap__1yNHR",
+    "border-full": "storycard-m_border-full__1nhy7",
+    "light": "storycard-m_light__3EhXN",
+    "dark": "storycard-m_dark__2wCTq",
+    "border-bottom": "storycard-m_border-bottom__2_E-I",
+    "border-boxShadow": "storycard-m_border-boxShadow__2-k3Z",
+    "center-align": "storycard-m_center-align__1Sn8-",
+    "content-bottom": "storycard-m_content-bottom__1QHeC",
+    "content-full": "storycard-m_content-full__2zJmU",
+    "content-boxShadow": "storycard-m_content-boxShadow__2IAWZ",
+    "hero-image": "storycard-m_hero-image__1H3MB",
+    "right-padding": "storycard-m_right-padding__12-lQ",
+    "horizontal-mob": "storycard-m_horizontal-mob__17JG2",
+    "content": "storycard-m_content__1Q9vq",
+    "border-default": "storycard-m_border-default__PEZ1x",
+    "card": "storycard-m_card__KJwRa",
+    "horizontal-image-last": "storycard-m_horizontal-image-last__3o6LY"
+  }
+};
+export var StoryCard = function StoryCard(_ref) {
+  var story = _ref.story,
+      children = _ref.children,
+      isHorizontal = _ref.isHorizontal,
+      aspectRatio = _ref.aspectRatio,
+      border = _ref.border,
+      useImageAsBackground = _ref.useImageAsBackground,
+      bgImgContentOverlap = _ref.bgImgContentOverlap,
+      theme = _ref.theme,
+      borderColor = _ref.borderColor,
+      isHorizontalMobile = _ref.isHorizontalMobile,
+      centerAlign = _ref.centerAlign,
+      headerLevel = _ref.headerLevel,
+      hideAuthorImage = _ref.hideAuthorImage,
+      prefix = _ref.prefix,
+      config = _ref.config,
+      isHorizontalWithImageLast = _ref.isHorizontalWithImageLast;
+  if (!story || isEmpty(story)) return /*#__PURE__*/React.createElement("div", null);
+  var borderOptions = ["default", "full", "bottom", "boxShadow"];
+  var borderTemplate = borderOptions.includes(border) ? "border-".concat(border) : ""; // TODO optimize conditions
+
+  var horizontalCardStyle = "default-card";
+  if (isHorizontal) horizontalCardStyle = "horizontal-card";else if (isHorizontalWithImageLast) horizontalCardStyle = "horizontal-image-last";
+  var bgImageClasses = useImageAsBackground ? "backgroung-img" : "";
+  var bgImgContentOverlapClass = bgImgContentOverlap ? "content-overlap" : "";
+  var textColor = getTextColor(theme);
+  var horizontalMobileClasses = isHorizontalMobile ? "horizontal-mob" : "";
+  var defaultStorycard = /*#__PURE__*/React.createElement(DefaultStoryCard, {
+    story: story,
+    aspectRatio: aspectRatio,
+    border: border,
+    isHorizontalMobile: isHorizontalMobile,
+    isHorizontal: isHorizontal,
+    centerAlign: centerAlign,
+    headerLevel: headerLevel,
+    borderColor: borderColor,
+    hideAuthorImage: hideAuthorImage,
+    prefix: prefix,
+    config: config,
+    isHorizontalWithImageLast: isHorizontalWithImageLast
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "story-card",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    },
+    className: "arr--story-card " + _getClassName("card ".concat(horizontalCardStyle, " ").concat(borderTemplate, " ").concat(textColor, " ").concat(bgImageClasses, " ").concat(bgImgContentOverlapClass, " ").concat(horizontalMobileClasses), _styleModuleImportMap)
+  }, children || defaultStorycard);
+};
+
+var DefaultStoryCard = function DefaultStoryCard(_ref2) {
+  var story = _ref2.story,
+      border = _ref2.border,
+      isHorizontal = _ref2.isHorizontal,
+      aspectRatio = _ref2.aspectRatio,
+      headerLevel = _ref2.headerLevel,
+      _ref2$isHorizontalMob = _ref2.isHorizontalMobile,
+      isHorizontalMobile = _ref2$isHorizontalMob === void 0 ? false : _ref2$isHorizontalMob,
+      _ref2$centerAlign = _ref2.centerAlign,
+      centerAlign = _ref2$centerAlign === void 0 ? false : _ref2$centerAlign,
+      borderColor = _ref2.borderColor,
+      hideAuthorImage = _ref2.hideAuthorImage,
+      prefix = _ref2.prefix,
+      isHorizontalWithImageLast = _ref2.isHorizontalWithImageLast,
+      config = _ref2.config;
+  var alignment = centerAlign ? "center-align" : "";
+  var SectionTagborderColor = rgbToHex(borderColor);
+  var _config$localizationC = config.localizationConfig,
+      localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isHorizontal ? /*#__PURE__*/React.createElement(HeroImage, {
+    config: config,
+    story: story,
+    isHorizontal: true,
+    isHorizontalMobile: isHorizontalMobile,
+    aspectRatio: aspectRatio
+  }) : isHorizontalWithImageLast ? /*#__PURE__*/React.createElement(HeroImage, {
+    config: config,
+    story: story,
+    isHorizontalWithImageLast: true,
+    isHorizontalMobile: isHorizontalMobile,
+    aspectRatio: aspectRatio
+  }) : /*#__PURE__*/React.createElement(HeroImage, {
+    story: story,
+    config: config,
+    isHorizontalMobile: isHorizontalMobile,
+    aspectRatio: aspectRatio
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "arr--story-content " + _getClassName("content ".concat(alignment), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement(SectionTag, {
+    story: story,
+    borderColor: SectionTagborderColor
+  }), /*#__PURE__*/React.createElement(Headline, {
+    story: story,
+    headerLevel: headerLevel,
+    premiumStoryIconConfig: config
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    config: localizationConfig,
+    story: story,
+    isBottom: true,
+    prefix: prefix,
+    hideAuthorImage: hideAuthorImage
+  }), /*#__PURE__*/React.createElement(Subheadline, {
+    story: story
+  })));
+};
+
+DefaultStoryCard.propTypes = {
+  story: PropTypes.object.isRequired,
+  border: PropTypes.oneOfType([PropTypes.string]),
+  isBottom: PropTypes.bool,
+  isHorizontal: PropTypes.bool,
+  aspectRatio: PropTypes.oneOfType([PropTypes.array]),
+  isHorizontalMobile: PropTypes.bool,
+  centerAlign: PropTypes.bool,
+  headerLevel: PropTypes.string,
+  borderColor: PropTypes.string,
+  hideAuthorImage: PropTypes.bool,
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  isHorizontalWithImageLast: PropTypes.bool
+};
+StoryCard.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+  children: PropTypes.node,
+
+  /** Flip the Story Card to Horizonal mode */
+  isHorizontal: PropTypes.bool,
+
+  /** Add border to the Story Card  */
+  border: PropTypes.oneOfType([PropTypes.string]),
+  // story card with background image
+  useImageAsBackground: PropTypes.bool,
+  // story card  content overlap with image
+  bgImgContentOverlap: PropTypes.bool,
+
+  /** add aspect ratio for hero image  */
+  aspectRatio: PropTypes.oneOfType([PropTypes.array]),
+
+  /** add theme(dark /light/custom color) for storycard  */
+  theme: PropTypes.string,
+
+  /** flip the story card mobile design horizontal */
+  isHorizontalMobile: PropTypes.bool,
+  // make content center align in desktop and left align in mobile
+  centerAlign: PropTypes.bool,
+  headerLevel: PropTypes.string,
+  borderColor: PropTypes.string,
+  // handle author image through storycard
+  hideAuthorImage: PropTypes.bool,
+  // handle author prefix through storycard
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  isHorizontalWithImageLast: PropTypes.bool
+};
+StoryCard.defaultProps = {
+  isHorizontal: false,
+  isHorizontalMobile: false,
+  border: "default",
+  theme: "",
+  centerAlign: false,
+  borderColor: "",
+  isHorizontalWithImageLast: false
+};

package/esm/components/Molecules/StoryCard/stories.js

@@ -0,0 +1,274 @@
+import { StoryCard } from "./index";
+import { Headline } from "../../Atoms/Headline/index";
+import { HeroImage } from "../../Atoms/HeroImage/index";
+import { TimeStamp } from "../../Atoms/TimeStamp/index";
+import { Author } from "../../Atoms/Author/index";
+import { Subheadline } from "../../Atoms/Subheadline/index";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { StorycardContent } from "../StorycardContent/index";
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { optionalSelect, withStore } from "../../../../storybook";
+import Readme from "./README.md";
+import ReadmeForBorder from "./READMEBORDER.md";
+import ReadmeForBgImage from "./READMEBGIMAGE.md";
+import { color } from "@storybook/addon-knobs";
+import "./storycard.m.css";
+var story = generateStory();
+var aspectRatioOptions = {
+  "[16,9]": [16, 9],
+  "[8,3]": [8, 3],
+  "[1,1]": [1, 1],
+  "[4, 3]": [4, 3],
+  "[2, 3]": [2, 3]
+};
+var label = "color";
+var defaultvalue = "#929292";
+var sectionTagBorderColor = "Section Tag Border Color";
+var defaultBorderColor = "#3a9fdd";
+var config = {};
+withStore("Molecules/StoryCard", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "480px"
+    }
+  }, story());
+}).add("Default Story Card", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    borderColor: color(sectionTagBorderColor, defaultBorderColor),
+    config: config
+  });
+}).add("Default with theme", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    theme: color(label, defaultvalue),
+    centerAlign: true,
+    borderColor: color(sectionTagBorderColor, defaultBorderColor),
+    config: config
+  });
+}).add("Default with mobile horizontal design", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    isHorizontalMobile: true,
+    borderColor: color(sectionTagBorderColor, defaultBorderColor),
+    config: config
+  });
+}).add("Horizontal Story Card", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    isHorizontal: true,
+    borderColor: color(sectionTagBorderColor, defaultBorderColor),
+    config: config
+  });
+}).add("Story Card w/ Image & Headline", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    story: story
+  }), /*#__PURE__*/React.createElement(Headline, {
+    story: story
+  }));
+}).add("Story Card w/ Image & Timestamp", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story
+  }, /*#__PURE__*/React.createElement(Headline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(TimeStamp, {
+    story: story
+  }));
+}).add("Story Card w/ Headline, Author & Subheadline", function () {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 200
+    }
+  }, /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    isBottom: true
+  }, /*#__PURE__*/React.createElement(Headline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(Subheadline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(Author, {
+    story: story,
+    isBottom: true
+  })));
+}).add("Story Card w/ Image, Headline & Subheadline Author+Timestamp ", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    story: story
+  }), /*#__PURE__*/React.createElement(Headline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(Subheadline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    story: story,
+    isBottom: true
+  }));
+}).add("Story Card w/o Image, Headline, Author+Timestamp & Subheadline", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    isHorizontal: true
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    story: story,
+    isHorizontal: true
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Headline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    story: story
+  }), /*#__PURE__*/React.createElement(Subheadline, {
+    story: story
+  })));
+}).add("Story Card using Story content", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    borderColor: color(sectionTagBorderColor, defaultBorderColor)
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    story: story
+  }), /*#__PURE__*/React.createElement(StorycardContent, {
+    story: story,
+    borderColor: color(sectionTagBorderColor, defaultBorderColor)
+  }));
+}).add("Story card with aspect ratio", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    aspectRatio: optionalSelect("Aspect Ratio", aspectRatioOptions),
+    borderColor: color(sectionTagBorderColor, defaultBorderColor),
+    config: config
+  });
+}).add("Story card with story object as null", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: null
+  });
+}).add("Story card with an empty story object", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: {}
+  });
+});
+withStore("Molecules/StoryCard(with Border)", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, ReadmeForBorder).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "650px"
+    }
+  }, story());
+}).add("without border", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    border: "",
+    borderColor: color(sectionTagBorderColor, defaultBorderColor),
+    config: config
+  });
+}).add("Default Story Card with Full Border", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    border: "full",
+    borderColor: color(sectionTagBorderColor, defaultBorderColor),
+    config: config
+  });
+}).add("Default Story Card with Border Bottom", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    border: "bottom",
+    borderColor: color(sectionTagBorderColor, defaultBorderColor),
+    config: config
+  });
+}).add("Default Story Card with Box Shadow", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    border: "boxShadow",
+    borderColor: color(sectionTagBorderColor, defaultBorderColor),
+    config: config
+  });
+}).add("StoryCard using StoryCardContent ", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    border: "full",
+    borderColor: color(sectionTagBorderColor, defaultBorderColor)
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    story: story
+  }), /*#__PURE__*/React.createElement(StorycardContent, {
+    story: story
+  }, /*#__PURE__*/React.createElement(Headline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    story: story
+  })));
+}).add("StoryCard using StoryCardContent border Box and fullBleed False", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    border: "box",
+    borderColor: color(sectionTagBorderColor, defaultBorderColor)
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    story: story,
+    FullBleed: false
+  }), /*#__PURE__*/React.createElement(StorycardContent, {
+    story: story
+  }, /*#__PURE__*/React.createElement(Headline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    story: story
+  })));
+}).add("Horizontal StoryCard using StoryCardContent border full ", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    border: "full",
+    isHorizontal: true,
+    borderColor: color(sectionTagBorderColor, defaultBorderColor)
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    story: story,
+    isHorizontal: true
+  }), /*#__PURE__*/React.createElement(StorycardContent, {
+    story: story
+  }, /*#__PURE__*/React.createElement(Headline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    story: story
+  })));
+});
+withStore("Molecules/StoryCard(with background image)", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, ReadmeForBgImage).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "400px"
+    }
+  }, story());
+}).add("Story Card with background image", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    useImageAsBackground: true,
+    borderColor: color(sectionTagBorderColor, defaultBorderColor)
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    story: story
+  }), /*#__PURE__*/React.createElement(StorycardContent, {
+    story: story
+  }));
+}).add("Story Card with background image and overlap with content", function () {
+  return /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    bgImgContentOverlap: true,
+    borderColor: color(sectionTagBorderColor, defaultBorderColor)
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    story: story
+  }), /*#__PURE__*/React.createElement(StorycardContent, {
+    story: story
+  }));
+});

package/esm/components/Molecules/StoryCard/storycard.m.css

@@ -0,0 +1,158 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.author-timestamp-wrapper {
+  display: flex;
+  align-items: center;
+}
+.default-card {
+  display: flex;
+  flex-direction: column;
+}
+.horizontal-card {
+  display: flex;
+  flex-direction: row;
+}
+
+.backgroung-img > a > figure::after {
+  @media (--viewport-medium) {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent 50%, transparent);
+  }
+}
+.backgroung-img > div:nth-child(2) {
+  @media (--viewport-medium) {
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-m) 48px;
+    position: absolute;
+    bottom: 0;
+    left: 15%;
+    right: 15%;
+  }
+}
+.backgroung-img img {
+  position: absolute;
+  bottom: 0;
+}
+
+.content-overlap > div:nth-child(2) {
+  @media (--viewport-medium) {
+    margin: 0 var(--arrow-spacing-m);
+    width: calc(100% - 32px);
+    background-color: var(--arrow-c-light);
+    padding: var(--arrow-spacing-m);
+    position: absolute;
+    bottom: 0;
+  }
+}
+.content-overlap img {
+  @media (--viewport-medium) {
+    position: absolute;
+    bottom: 0;
+  }
+}
+
+/* TODO: Refactor targetting of child  */
+.horizontal-card > div:first-child {
+  flex-basis: 30%;
+}
+
+.horizontal-card > div:nth-child(2) {
+  flex-basis: 70%;
+}
+
+.border-full.light {
+  border: 1px solid var(--light-border);
+}
+
+.border-full.dark {
+  border: 1px solid var(--dark-border);
+}
+
+.border-bottom.light {
+  border-bottom: 1px solid var(--light-border);
+  padding-bottom: var(--arrow-spacing-m);
+}
+
+.border-bottom.dark {
+  border-bottom: 1px solid var(--dark-border);
+  padding-bottom: var(--arrow-spacing-m);
+}
+
+.border-boxShadow {
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+}
+.center-align {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  @media (--viewport-medium) {
+    align-items: center;
+    text-align: center;
+  }
+}
+
+.content-bottom {
+  /* padding: 0 0 0 8px; */
+}
+.content-full,
+.content-boxShadow {
+  padding: var(--arrow-spacing-xs) var(--arrow-spacing-m);
+}
+.backgroung-img,
+.content-overlap {
+  position: relative;
+}
+
+.hero-image {
+  margin-bottom: var(--arrow-spacing-xs);
+  padding-right: 0;
+}
+.right-padding {
+  padding-bottom: 0;
+  padding-right: var(--arrow-spacing-xs);
+}
+
+.horizontal-mob {
+  display: flex;
+  flex-direction: row;
+  @media (--viewport-medium) {
+    flex-direction: column;
+  }
+}
+.horizontal-mob .hero-image {
+  flex-basis: 30%;
+  @media (--viewport-medium) {
+    flex-basis: 100%;
+  }
+}
+.horizontal-mob .content {
+  flex-basis: 70%;
+  @media (--viewport-medium) {
+    flex-basis: 100%;
+  }
+}
+
+.border-default {
+  border: none;
+  height: 100%;
+}
+.card {
+  height: 100%;
+}
+
+.horizontal-image-last {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.horizontal-image-last > div:first-child {
+  flex-basis: 30%;
+}
+
+.horizontal-image-last > div:nth-child(2) {
+  flex-basis: 70%;
+}

package/esm/components/Molecules/StoryCardWithBulletPoint/README.md

@@ -0,0 +1,9 @@
+# Story Card With Bullet Point
+
+Modified Story Card, with numbered bullet point
+
+## Usage
+
+```jsx
+<StoryCardWithBulletPoint story={story} card={card} bulletValue={bulletValue} />
+```