@quintype/arrow 3.20.0-perf-v2.0 → 3.20.0

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

@@ -1,161 +0,0 @@
-@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"] .wrapper {
-  margin-right: 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

@@ -1,48 +0,0 @@
-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"><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

@@ -1,82 +0,0 @@
-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={blockQuoteColor && { backgroundColor: blockQuoteColor }} />
-      </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={blockQuoteColor && { borderColor: blockQuoteColor }}>
-          <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

@@ -1,35 +0,0 @@
-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

@@ -1,43 +0,0 @@
-# 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

@@ -1,55 +0,0 @@
-@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(--arrow-c-mono2);
-    border-bottom: 1px solid var(--arrow-c-mono2);
-  }
-}
-.light {
-  color: var(--arrow-c-invert-mono1);
-  a {
-    color: var(--arrow-c-invert-mono2);
-    border-bottom: 1px solid var(--arrow-c-invert-mono2);
-  }
-}

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

@@ -1,46 +0,0 @@
-import * as React from "react";
-import { shallow, mount } from "enzyme";
-import { generateStoryElementData } from "../../../Fixture";
-import { Blurb } from "./index";
-
-const element = generateStoryElementData("blurb");
-
-describe("Blurb Story Element", () => {
-  it("Should render default template", () => {
-    const wrapper = mount(<Blurb element={element} template="default" />);
-    expect(wrapper.find({ "data-test-id": "blurb" }).prop("className")).toMatch(/blurb-default/);
-  });
-
-  it("Should render border template", () => {
-    const wrapper = mount(<Blurb element={element} template="withBorder" />);
-    expect(wrapper.find({ "data-test-id": "blurb" }).prop("className")).toMatch(/blurb-withBorder/);
-  });
-
-  it("Should render default template with external link", () => {
-    const wrapper = shallow(<Blurb template="default" opts={{ isExternalLink: true }} element={element} />);
-    expect(wrapper.html()).toBe(
-      '<div data-test-id="blurb" 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(<Blurb template="default" opts={{ isExternalLink: false }} element={element} />);
-    expect(wrapper.html()).toBe(
-      '<div data-test-id="blurb" 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(<Blurb template="withBorder" element={element} css={{ borderColor: "#ff214b" }} />);
-    expect(wrapper.find({ "data-test-id": "blurb" }).prop("style")).toEqual({ border: "solid 2px #ff214b" });
-  });
-
-  it("Should render custom template", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-    const wrapper = shallow(<Blurb element={element} render={customTemplate} />);
-    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

@@ -1,53 +0,0 @@
-import React, { useEffect, useState } from "react";
-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 content = element.text;
-  const { borderColor } = css;
-  const initBorderDirection =
-    template === "withBorder" ? { border: `solid 2px ${borderColor}` } : { borderLeft: `solid 2px ${borderColor}` };
-  const [borderDirection, setBorderDirection] = useState(initBorderDirection);
-  if (!content) return null;
-
-  useEffect(() => {
-    const htmlElement = document.getElementsByTagName("HTML");
-    if (htmlElement && htmlElement.length) {
-      if (htmlElement[0].dir.toLowerCase() === "rtl" && template !== "withBorder") {
-        setBorderDirection({ borderRight: `solid 2px ${borderColor}` });
-      }
-    }
-  }, []);
-
-  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={borderColor && borderDirection}
-      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

@@ -1,28 +0,0 @@
-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

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

package/src/components/Atoms/StoryElements/Image/image.m.css

@@ -1,21 +0,0 @@
-.element {
-  position: relative;
-}
-
-.loading {
-  position: fixed;
-  left: 0;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  /* To match it with lightbox overlay, hardcoding this value */
-  background: rgba(0, 0, 0, 0.85);
-  display: flex;
-  color: var(--arrow-c-light);
-  justify-content: center;
-  align-items: center;
-}
-
-.image-template {
-  position: relative;
-}

package/src/components/Atoms/StoryElements/Image/image.test.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-import { Provider } from "react-redux";
-import { Image } from ".";
-import { generateStoryElementData, generateStore } from "../../../Fixture";
-import { FullScreenImages } from "../../../Molecules/FullScreenImages";
-const element = generateStoryElementData("image");
-
-describe("Image Story Element", () => {
-  it("should render with correct elements", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <Image element={element} />
-      </Provider>
-    );
-    expect(wrapper.find("figure").length).toEqual(1);
-    expect(wrapper.find("CaptionAttribution").length).toEqual(1);
-    expect(wrapper.find(FullScreenImages).length).toEqual(1);
-  });
-});

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

@@ -1,60 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { ResponsiveImage } from "@quintype/components";
-import { withElementWrapper } from "../withElementWrapper";
-
-import "./image.m.css";
-import { shapeStory, shapeConfig } from "../../../../utils/utils";
-import { FullScreenImages } from "../../../Molecules/FullScreenImages";
-import { useStateValue } from "../../../SharedContext";
-import { CaptionAttribution } from "../../CaptionAttribution";
-import { HyperLink } from "../../Hyperlink";
-
-const ImageBase = ({ element, opts = {}, story = {}, config = {}, caption = true, ...restProps }) => {
-  if (!element) return null;
-  const configData = useStateValue() || {};
-
-  const ImageTemplate = ({ onClick }) => (
-    <div styleName="image-template">
-      <figure styleName="element" onClick={() => onClick()}>
-        <ResponsiveImage
-          slug={element["image-s3-key"]}
-          metadata={element["image-metadata"]}
-          alt={element["title"]}
-          aspectRatio={null}
-          defaultWidth={640}
-          widths={opts.imageWidths || [360, 640, 1200]}
-          imgParams={{ auto: ["format", "compress"] }}
-        />
-      </figure>
-      {element["hyperlink"] && <HyperLink hyperLink={element["hyperlink"]} />}
-    </div>
-  );
-
-  ImageTemplate.propTypes = {
-    onClick: PropTypes.func
-  };
-
-  return (
-    <div className="arrow-component arr--image-element" {...restProps} data-test-id="image-element">
-      <FullScreenImages template={ImageTemplate} element={element} imageSlug={element["image-s3-key"]} story={story} />
-      {caption && <CaptionAttribution element={element} config={configData} />}
-    </div>
-  );
-};
-
-ImageBase.propTypes = {
-  element: PropTypes.shape({
-    "image-s3-key": PropTypes.string,
-    "image-metadata": PropTypes.object,
-    "image-attribution": PropTypes.string,
-    title: PropTypes.string,
-    hyperlink: PropTypes.string
-  }),
-  caption: PropTypes.bool,
-  opts: PropTypes.shape({ imageWidths: PropTypes.array }),
-  story: shapeStory,
-  config: shapeConfig
-};
-
-export const Image = withElementWrapper(ImageBase);