@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

package/src/components/Atoms/StoryElements/BlockQuote/Svg/curve.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./icon.m.css";
+
+export const CurveIcon = ({ width, height, color, opacity }) => {
+  const lightColor = color === "light" && "#ffffff";
+  const darkColor = color === "dark" && "#0d0d0d";
+  const fillColor = lightColor || darkColor || color;
+  return (
+    <div styleName="curve-wrapper" style={fillColor ? { fill: fillColor } : {}}>
+      <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 64 64">
+        <path
+          fill="inherit"
+          opacity={opacity}
+          d="M61 44.702c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067-2.638-2.712-3.956-6.704-3.956-11.976 0-4.971.716-9.227 2.147-12.767 1.432-3.54 3.165-6.553 5.2-9.039 2.034-2.485 4.144-4.481 6.33-5.988 2.184-1.506 4.106-2.56 5.763-3.163l5.652 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.035 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.007 3.163C60.171 39.13 61 41.69 61 44.702zm-33.004 0c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067C3.319 49.22 2 45.229 2 39.957c0-4.971.716-9.227 2.148-12.767 1.431-3.54 3.164-6.553 5.199-9.039 2.034-2.485 4.144-4.481 6.33-5.988C17.86 10.657 19.782 9.603 21.44 9l5.651 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.034 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.008 3.163 1.657 2.11 2.486 4.67 2.486 7.683z"
+        />
+      </svg>
+    </div>
+  );
+};
+
+CurveIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string,
+  opacity: PropTypes.string
+};

package/src/components/Atoms/StoryElements/BlockQuote/Svg/edge.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./icon.m.css";
+
+export const EdgeIcon = ({ width, height, color, opacity }) => {
+  const lightColor = color === "light" && "#ffffff";
+  const darkColor = color === "dark" && "#0d0d0d";
+  const fillColor = lightColor || darkColor || color;
+  return (
+    <div styleName="edge-wrapper" style={fillColor ? { fill: fillColor } : {}}>
+      <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 64 64">
+        <path
+          fill="inherit"
+          opacity={opacity}
+          d="M16.858 29.836v4.727H28V60H4V29.836c0-9.6 2.606-16.727 7.746-21.187C15.3 5.564 19.8 4 25.122 4v13.627c-2.888 0-8.264 0-8.264 12.209zm40.264-12.21V4c-5.32 0-9.82 1.564-13.376 4.65C38.606 13.108 36 20.236 36 29.835V60h24V34.563H48.857v-4.727c0-12.21 5.377-12.21 8.265-12.21z"
+        />
+      </svg>
+    </div>
+  );
+};
+
+EdgeIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string,
+  opacity: PropTypes.string
+};

package/src/components/Atoms/StoryElements/BlockQuote/Svg/icon.m.css

@@ -0,0 +1,11 @@
+.edge-wrapper,
+.curve-wrapper {
+  fill: var(--arrow-c-brand1);
+}
+
+html[dir="rtl"] {
+  .edge-wrapper,
+  .curve-wrapper {
+    transform: scaleX(-1);
+  }
+}

package/src/components/Atoms/StoryElements/BlockQuote/block-quote.m.css

@@ -0,0 +1,170 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.blockquote-withBackground::before {
+  @media (min-width: mobile) {
+    content: "";
+    padding-top: 56.25%;
+  }
+}
+
+.icon {
+  width: 48px;
+  height: 48px;
+  @media (min-width: mobile) {
+    width: 64px;
+    height: 64px;
+  }
+}
+
+.icon-border {
+  display: flex;
+  margin-bottom: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    margin-bottom: var(--arrow-spacing-m);
+  }
+}
+
+.blockquote .icon,
+.blockquote-default .icon {
+  margin-bottom: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    margin-bottom: unset;
+    margin-right: var(--arrow-spacing-l);
+  }
+}
+
+.blockquote-withBorder .icon {
+  margin-right: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    margin-right: var(--arrow-spacing-l);
+  }
+}
+
+.blockquote-withBackground .icon {
+  margin-bottom: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    margin-bottom: var(--arrow-spacing-m);
+  }
+}
+
+.blockquote-withBorder .border {
+  width: 100%;
+  height: 2px;
+  background-color: var(--arrow-c-brand1);
+  margin-top: 36px;
+}
+
+.blockquote .content,
+.blockquote-default .content,
+.blockquote-withBorder .content,
+.blockquote-withBackground .content {
+  font-family: var(--arrow-typeface-primary);
+  font-size: var(--arrow-fs-l);
+  font-weight: var(--arrow-fw-bold);
+  margin-bottom: var(--arrow-spacing-s);
+  line-height: var(--arrow-lh-3);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-huge);
+  }
+}
+
+.blockquote .content,
+.blockquote-default .content {
+  @media (min-width: mobile) {
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.blockquote-withBorder .content {
+  margin-bottom: var(--arrow-spacing-xs);
+}
+
+.blockquote-withBorder .wrapper {
+  border-bottom: solid 2px var(--arrow-c-brand1);
+}
+
+.blockquote .attribution,
+.blockquote-default .attribution,
+.blockquote-withBorder .attribution,
+.blockquote-withBackground .attribution {
+  font-family: var(--arrow-typeface-secondary);
+  font-size: var(--arrow-fs-m);
+  font-weight: var(--arrow-fw-bold);
+  font-style: italic;
+  line-height: var(--arrow-lh-5);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.blockquote-withBorder .attribution {
+  margin-bottom: var(--arrow-spacing-l);
+}
+
+.blockquote-withBackground .attribution {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.blockquote-withBackground {
+  background-color: var(--arrow-c-brand1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.blockquote-withBorder {
+  display: block;
+}
+
+.blockquote-withBackground .attribution::before {
+  content: "–";
+  color: inherit;
+  margin-right: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    margin-right: var(--arrow-spacing-s);
+  }
+}
+
+.blockquote-withBackground .quote-wrapper {
+  padding: 48px;
+  @media (min-width: mobile) {
+    padding: 96px;
+  }
+}
+
+.blockquote .quote-wrapper,
+.blockquote-default .quote-wrapper {
+  @media (min-width: mobile) {
+    display: flex;
+  }
+}
+
+html[dir="rtl"] {
+  .blockquote .icon,
+  .blockquote-default .icon {
+    @media (min-width: mobile) {
+      margin: 0 0 0 var(--arrow-spacing-l);
+    }
+  }
+
+  .icon {
+    margin: 0 0 0 var(--arrow-spacing-l);
+  }
+}
+
+.attribution.dark {
+  color: var(--arrow-c-mono4);
+}
+.attribution.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.content.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.content.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/src/components/Atoms/StoryElements/BlockQuote/block-quote.test.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { generateStoryElementData } from "../../../Fixture";
+import { BlockQuote } from "./index";
+
+const element = generateStoryElementData("blockquote");
+
+describe("Block Quote Story Element", () => {
+  it("Should render default template", () => {
+    const wrapper = mount(<BlockQuote element={element} template="default" />);
+    expect(wrapper.find({ "data-test-id": "blockquote" }).prop("className")).toMatch(/blockquote-default/);
+  });
+
+  it("Should render with background template", () => {
+    const wrapper = mount(<BlockQuote element={element} template="withBackground" />);
+    expect(wrapper.find({ "data-test-id": "blockquote" }).prop("className")).toMatch(/blockquote-withBackground/);
+  });
+
+  it("Should render with border template", () => {
+    const wrapper = mount(<BlockQuote element={element} template="withBorder" />);
+    expect(wrapper.find({ "data-test-id": "blockquote" }).prop("className")).toMatch(/blockquote-withBorder/);
+  });
+
+  it("Should render background template with background color", () => {
+    const wrapper = shallow(
+      <BlockQuote template="withBackground" element={element} css={{ backgroundColor: "#ff214b" }} />
+    );
+    expect(wrapper.html()).toBe(
+      '<div data-test-id="blockquote" class="arrow-component arr--block-quote block-quote-m_blockquote-withBackground__1yW-u block-quote-m_dark__HaZuG "><div class="block-quote-m_quote-wrapper__83bEy"><div class="block-quote-m_icon__m-EIZ"><div class="icon-m_curve-wrapper__3-sLV" style="fill:#0d0d0d"><svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 64 64"><path fill="inherit" opacity=".4" d="M61 44.702c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067-2.638-2.712-3.956-6.704-3.956-11.976 0-4.971.716-9.227 2.147-12.767 1.432-3.54 3.165-6.553 5.2-9.039 2.034-2.485 4.144-4.481 6.33-5.988 2.184-1.506 4.106-2.56 5.763-3.163l5.652 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.035 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.007 3.163C60.171 39.13 61 41.69 61 44.702zm-33.004 0c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067C3.319 49.22 2 45.229 2 39.957c0-4.971.716-9.227 2.148-12.767 1.431-3.54 3.164-6.553 5.199-9.039 2.034-2.485 4.144-4.481 6.33-5.988C17.86 10.657 19.782 9.603 21.44 9l5.651 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.034 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.008 3.163 1.657 2.11 2.486 4.67 2.486 7.683z"></path></svg></div></div><div class="block-quote-m_wrapper__2KEhw" style="border-color:unset"><div class="block-quote-m_content__xpMqX block-quote-m_dark__HaZuG">After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</div><div class="block-quote-m_attribution__2m4s2 block-quote-m_dark__HaZuG">Player</div></div></div></div>'
+    );
+  });
+
+  it("Should render default template with blockquote color", () => {
+    const wrapper = shallow(<BlockQuote template="default" element={element} css={{ blockQuoteColor: "#ff214b" }} />);
+    expect(wrapper.html()).toBe(
+      '<div data-test-id="blockquote" class="arrow-component arr--block-quote block-quote-m_blockquote-default__fZ8a1 "><div class="block-quote-m_quote-wrapper__83bEy"><div class="block-quote-m_icon__m-EIZ"><div class="icon-m_curve-wrapper__3-sLV" style="fill:#ff214b"><svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 64 64"><path fill="inherit" d="M61 44.702c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067-2.638-2.712-3.956-6.704-3.956-11.976 0-4.971.716-9.227 2.147-12.767 1.432-3.54 3.165-6.553 5.2-9.039 2.034-2.485 4.144-4.481 6.33-5.988 2.184-1.506 4.106-2.56 5.763-3.163l5.652 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.035 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.007 3.163C60.171 39.13 61 41.69 61 44.702zm-33.004 0c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067C3.319 49.22 2 45.229 2 39.957c0-4.971.716-9.227 2.148-12.767 1.431-3.54 3.164-6.553 5.199-9.039 2.034-2.485 4.144-4.481 6.33-5.988C17.86 10.657 19.782 9.603 21.44 9l5.651 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.034 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.008 3.163 1.657 2.11 2.486 4.67 2.486 7.683z"></path></svg></div></div><div class="block-quote-m_wrapper__2KEhw" style="border-color:#ff214b"><div class="block-quote-m_content__xpMqX block-quote-m_dark__HaZuG">After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</div><div class="block-quote-m_attribution__2m4s2 block-quote-m_dark__HaZuG">Player</div></div></div></div>'
+    );
+  });
+
+  it("Should render custom template", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.metadata.content }} />;
+    const wrapper = shallow(<BlockQuote element={element} render={customTemplate} />);
+    expect(wrapper.html()).toBe(
+      "<h3>After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</h3>"
+    );
+  });
+});

package/src/components/Atoms/StoryElements/BlockQuote/index.js

@@ -0,0 +1,82 @@
+import React from "react";
+import get from "lodash.get";
+import PropTypes from "prop-types";
+import { clientWidth, getTextColor, shapeConfig, shapeStory } from "../../../../utils/utils";
+import { withElementWrapper } from "../withElementWrapper";
+import { CurveIcon } from "./Svg/curve";
+import { EdgeIcon } from "./Svg/edge";
+import "./block-quote.m.css";
+import { useStateValue } from "../../../SharedContext";
+
+const SelectionOfIcon = (iconType, template, blockQuoteColor, quoteColor) => {
+  const isMobile = clientWidth("mobile");
+  const dimension = isMobile ? "48px" : "64px";
+
+  if (template === "withBackground") {
+    if (iconType === "edgeIcon") {
+      return <EdgeIcon width={dimension} height={dimension} color={quoteColor} opacity=".4" />;
+    }
+    return <CurveIcon width={dimension} height={dimension} color={quoteColor} opacity=".4" />;
+  }
+
+  if (template !== "withBackground") {
+    if (iconType === "edgeIcon") {
+      return <EdgeIcon width={dimension} height={dimension} color={blockQuoteColor} />;
+    }
+    return <CurveIcon width={dimension} height={dimension} color={blockQuoteColor} />;
+  }
+};
+
+export const BlockQuoteBase = ({ element, template, css = {}, story = {}, config = {}, render, ...restProps }) => {
+  const { content, attribution } = get(element, ["metadata"]);
+  if (!content) return null;
+
+  const { blockQuoteColor, backgroundShade, iconType } = css;
+  const templateStyle = template ? `blockquote-${template}` : "blockquote";
+  const isBackground = template === "withBackground";
+  const textColor = isBackground ? getTextColor(backgroundShade) : "";
+  const theme = isBackground && backgroundShade ? { backgroundColor: backgroundShade } : {};
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(isBackground ? theme.backgroundColor : configData.theme);
+
+  const updateStructure = () => {
+    return template === "withBorder" ? (
+      <div styleName="icon-border">
+        <div styleName="icon">{SelectionOfIcon(iconType, template, blockQuoteColor, textColor)}</div>
+        <div styleName="border" style={{ backgroundColor: blockQuoteColor || "initial" }} />
+      </div>
+    ) : (
+      <div styleName="icon">{SelectionOfIcon(iconType, template, blockQuoteColor, textColor)}</div>
+    );
+  };
+
+  return (
+    <div
+      className="arrow-component arr--block-quote"
+      data-test-id="blockquote"
+      styleName={`${templateStyle} ${textColor}`}
+      style={theme}
+      {...restProps}>
+      <div styleName="quote-wrapper">
+        {updateStructure()}
+        <div styleName="wrapper" style={{ borderColor: blockQuoteColor || "unset" }}>
+          <div styleName={`content ${textInvertColor}`} dangerouslySetInnerHTML={{ __html: content }} />
+          <div styleName={`attribution ${textInvertColor}`} dangerouslySetInnerHTML={{ __html: attribution }} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+BlockQuoteBase.propTypes = {
+  element: PropTypes.shape({
+    metadata: PropTypes.shape({ content: PropTypes.string, attribution: PropTypes.string })
+  }),
+  template: PropTypes.string,
+  story: shapeStory,
+  config: shapeConfig,
+  render: PropTypes.func,
+  css: PropTypes.object
+};
+
+export const BlockQuote = withElementWrapper(BlockQuoteBase);

package/src/components/Atoms/StoryElements/BlockQuote/stories.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { generateStoryElementData } from "../../../Fixture";
+import { BlockQuote } from "./index";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import Readme from "./README.md";
+import { color } from "@storybook/addon-knobs";
+
+const templateStyle = {
+  Default: "default",
+  "With Background": "withBackground",
+  "With Border": "withBorder"
+};
+const element = generateStoryElementData("blockquote");
+const iconStyle = {
+  "Curve Icon": "curveIcon",
+  "Edge Icon": "edgeIcon"
+};
+
+withStore("Atoms/Story Elements/Block Quote", {}, Readme)
+  .add("Default", () => (
+    <BlockQuote
+      element={element}
+      template={optionalSelect("Template Options", templateStyle)}
+      css={{
+        blockQuoteColor: color("Block quote color", "#ff214b"),
+        backgroundShade: color("Background color", "#ff214b"),
+        iconType: optionalSelect("Icon Types", iconStyle)
+      }}
+    />
+  ))
+  .add("Custom", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.metadata.content }} />;
+    return <BlockQuote element={element} render={customTemplate} />;
+  });

package/src/components/Atoms/StoryElements/Blurb/README.md

@@ -0,0 +1,43 @@
+# Blurb
+
+Displays the blurb story element of the story
+
+## Usage
+
+#### Blurb story element with default template
+
+```jsx
+<Blurb element={element} template="default" />
+```
+
+#### Blurb story element with border template
+
+```jsx
+<Blurb element={element} template="withBorder" />
+```
+
+#### Blurb story element with external links opening in new tab
+
+```jsx
+const opts = { isExternalLink: true };
+
+<Blurb element={element} template="default" opts={opts} />;
+```
+
+#### Blurb story element with border color
+
+```jsx
+const css = { borderColor: "#ff214b" };
+
+<Blurb element={element} template="withBorder" css={css} />;
+```
+
+#### Replace default blurb element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+
+<Blurb element={element} render={customTemplate} />;
+```
+
+<!-- PROPS -->

package/src/components/Atoms/StoryElements/Blurb/blurb.m.css

@@ -0,0 +1,56 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.blurb blockquote,
+.blurb-default blockquote,
+.blurb-withBorder blockquote {
+  font-family: var(--arrow-typeface-secondary);
+  font-size: var(--arrow-fs-s);
+  line-height: var(--arrow-lh-5);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.blurb blockquote,
+.blurb-default blockquote {
+  font-style: italic;
+  padding-left: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    padding-left: var(--arrow-spacing-l);
+  }
+}
+
+.blurb-withBorder blockquote {
+  padding: var(--arrow-spacing-s) var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-l);
+  }
+}
+
+html[dir="rtl"] {
+  .blurb blockquote,
+  .blurb-default blockquote {
+    padding-left: 0;
+    padding-right: var(--arrow-spacing-m);
+    @media (min-width: mobile) {
+      padding-right: var(--arrow-spacing-l);
+    }
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono1);
+  a {
+    color: var(--primaryColor, var(--arrow-c-mono2));
+    border-bottom: 1px solid var(--primaryColor, var(--arrow-c-mono2));
+  }
+}
+
+.light {
+  color: var(--arrow-c-invert-mono1);
+  a {
+    color: var(--primaryColor, var(--arrow-c-invert-mono2));
+    border-bottom: 1px solid var(--primaryColor, var(--arrow-c-invert-mono2));
+  }
+}

package/src/components/Atoms/StoryElements/Blurb/blurb.test.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { generateStoryElementData, generateStore } from "../../../Fixture";
+import { Blurb } from "./index";
+import { Provider } from "react-redux";
+
+const element = generateStoryElementData("blurb");
+
+describe("Blurb Story Element", () => {
+  it("Should render default template", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <Blurb element={element} template="default" />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "blurb" }).prop("className")).toMatch(/blurb-default/);
+  });
+
+  it("Should render border template", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <Blurb element={element} template="withBorder" />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "blurb" }).prop("className")).toMatch(/blurb-withBorder/);
+  });
+
+  it("Should render default template with external link", () => {
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <Blurb template="default" opts={{ isExternalLink: true }} element={element} />
+      </Provider>
+    );
+    expect(wrapper.html()).toBe(
+      '<div data-test-id="blurb" style="border-left:2px solid unset" class="arrow-component arr-custom-style arr--blurb-element blurb-m_blurb-default__JR86y blurb-m_dark__1eErz "><blockquote>Although the many story changes might be hard for book purists to accept, <a aria-label=\'content\' target=\'_blank\' href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></div>'
+    );
+  });
+
+  it("Should render default template without external link", () => {
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <Blurb template="default" opts={{ isExternalLink: false }} element={element} />
+      </Provider>
+    );
+    expect(wrapper.html()).toBe(
+      '<div data-test-id="blurb" style="border-left:2px solid unset" class="arrow-component arr-custom-style arr--blurb-element blurb-m_blurb-default__JR86y blurb-m_dark__1eErz "><blockquote>Although the many story changes might be hard for book purists to accept, <a href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></div>'
+    );
+  });
+
+  it("Should render the border template with border color", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <Blurb template="withBorder" element={element} css={{ borderColor: "#ff214b" }} />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "blurb" }).prop("style")).toEqual({ border: "2px solid #ff214b" });
+  });
+
+  it("Should render custom template", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <Blurb element={element} render={customTemplate} />
+      </Provider>
+    );
+    expect(wrapper.html()).toBe(
+      '<h3><blockquote>Although the many story changes might be hard for book purists to accept, <a href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></h3>'
+    );
+  });
+});

package/src/components/Atoms/StoryElements/Blurb/index.js

@@ -0,0 +1,50 @@
+import React from "react";
+import get from "lodash/get";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { updateContentLinks, shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
+import "./blurb.m.css";
+import { useStateValue } from "../../../SharedContext";
+
+const BlurbBase = ({ element, template = "", opts = {}, css = {}, story = {}, config = {}, render, ...restProps }) => {
+  const { borderColor } = css;
+  const languageDirection = useSelector((state) => get(state, ["qt", "config", "language", "direction"], "ltr"));
+  const content = element.text;
+  if (!content) return null;
+  const initBorderDirection =
+    template === "withBorder"
+      ? { border: `2px solid ${borderColor || "unset"}` }
+      : languageDirection === "rtl"
+      ? { borderRight: `2px solid ${borderColor || "unset"}` }
+      : { borderLeft: `2px solid ${borderColor || "unset"}` };
+
+  const { isExternalLink = true } = opts;
+  let text = (isExternalLink && updateContentLinks(content)) || content;
+  const templateStyle = template ? `blurb-${template}` : "blurb";
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  return (
+    <div
+      className="arrow-component arr-custom-style arr--blurb-element"
+      styleName={`${templateStyle} ${textInvertColor}`}
+      data-test-id="blurb"
+      style={initBorderDirection}
+      dangerouslySetInnerHTML={{ __html: text }}
+      {...restProps}
+    />
+  );
+};
+
+BlurbBase.propTypes = {
+  element: PropTypes.shape({ text: PropTypes.string }),
+  /** templates can be either default or withBorder */
+  template: PropTypes.string,
+  opts: PropTypes.shape({ isExternalLink: PropTypes.bool }),
+  story: shapeStory,
+  config: shapeConfig,
+  render: PropTypes.func,
+  css: PropTypes.object
+};
+
+export const Blurb = withElementWrapper(BlurbBase);

package/src/components/Atoms/StoryElements/Blurb/stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import { generateStoryElementData } from "../../../Fixture";
+import Readme from "./README.md";
+import { Blurb } from "./index";
+import { color, boolean } from "@storybook/addon-knobs";
+
+const templateStyle = {
+  Default: "default",
+  "Blurb with Border": "withBorder"
+};
+
+const element = generateStoryElementData("blurb");
+
+withStore("Atoms/Story Elements/Blurb", {}, Readme)
+  .add("Default", () => (
+    <Blurb
+      element={element}
+      template={optionalSelect("Template Options", templateStyle)}
+      css={{ borderColor: color("Color", "#ff214b") }}
+      opts={{ isExternalLink: boolean("External Link", true) }}
+    />
+  ))
+  .add("Custom", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    return <Blurb element={element} render={customTemplate} />;
+  });

package/src/components/Atoms/StoryElements/Image/README.md

@@ -0,0 +1,13 @@
+# Image Story Element
+
+Displays the image story element of the story
+
+## Usage
+
+#### Default Image story element
+
+```jsx
+<Image element={element} />
+```
+
+<!-- PROPS -->