@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1

package/src/components/Atoms/StoryElements/AlsoRead/also-read.test.js

@@ -1,83 +0,0 @@
-import * as React from "react";
-import { shallow, mount } from "enzyme";
-import { generateStoryElementData, generateStory, generateStore } from "../../../Fixture";
-import { AlsoRead } from "./index";
-
-import { Provider } from "react-redux";
-import { Link } from "@quintype/components";
-
-const element = generateStoryElementData("also-read");
-const story = generateStory();
-
-describe("Alsoread Story Element", () => {
-  it("Should render default template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AlsoRead story={story} element={element} template="default" />
-      </Provider>
-    );
-    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-default/);
-  });
-
-  it("Should render image right align template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AlsoRead story={story} element={element} template="imageRightAlign" />
-      </Provider>
-    );
-    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-imageRightAlign/);
-  });
-
-  it("Should render text left align template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AlsoRead story={story} element={element} template="textLeftAlign" />
-      </Provider>
-    );
-    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-textLeftAlign/);
-  });
-
-  it("Should render default template with fallback image", () => {
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <AlsoRead element={element} template="default" css={{ textColor: "#3333" }} />
-      </Provider>
-    );
-    expect(wrapper.html()).toBe(
-      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-default__3cYER "><div class="also-read-m_card-image-wrapper__3GFzu"><div class="arr--fallback-also-read also-read-m_image__2jdRP also-read-m_card-image__3CwAv"><div class="arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"><figure class="arr--fallback-svg fallback-m_fallback-svg__tK9fL"><svg width="40" height="30" viewBox="0 0 102 76" version="1.1"><g id="demo-home-copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-377.000000, -314.000000)"><g id="Group-13" transform="translate(377.000000, 314.000000)"><path d="M43.2,49.7 L62.2,19.2 L87.2,59.4 L17,59.4 L32.8,39.4 L43.2,49.7 Z M29.9,28.6 C25.8683213,28.6 22.6,25.3316787 22.6,21.3 C22.6,17.2683213 25.8683213,14 29.9,14 C33.9316787,14 37.2,17.2683213 37.2,21.3 C37.2,25.3316787 33.9316787,28.6 29.9,28.6 Z" id="Combined-Shape" fill="#99B0CB" fill-rule="nonzero"></path><rect id="Rectangle-19" stroke="#99B0CB" stroke-width="3" x="1.5" y="1.5" width="99" height="73" rx="3"></rect></g></g></svg></figure></div></div></div><div class="also-read-m_content-wrapper__26AZX"><div style="color:#3333" class="also-read-m_headline__VzF-c also-read-m_dark__1pUib">How is the coronavirus impacting people with disabilities?</div></div></a>'
-    );
-  });
-
-  it("Should render default template with text color", () => {
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <AlsoRead story={story} element={element} template="default" css={{ textColor: "#3333" }} />
-      </Provider>
-    );
-    expect(wrapper.html()).toBe(
-      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-default__3cYER " href="https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities"><div class="also-read-m_card-image-wrapper__3GFzu"><figure class="also-read-m_card-image__3CwAv"><img src="//thumbor-stg.assettype.com/ace%2F2020-04%2F9adec2ac-d37c-496f-abcc-98309a4bb356%2Ff90b71cdf10141ff9913b72bcfd29768_18.jpg?w=480&amp;auto=format%2Ccompress" srcSet="//thumbor-stg.assettype.com/ace%2F2020-04%2F9adec2ac-d37c-496f-abcc-98309a4bb356%2Ff90b71cdf10141ff9913b72bcfd29768_18.jpg?w=250&amp;auto=format%2Ccompress 250w,//thumbor-stg.assettype.com/ace%2F2020-04%2F9adec2ac-d37c-496f-abcc-98309a4bb356%2Ff90b71cdf10141ff9913b72bcfd29768_18.jpg?w=480&amp;auto=format%2Ccompress 480w,//thumbor-stg.assettype.com/ace%2F2020-04%2F9adec2ac-d37c-496f-abcc-98309a4bb356%2Ff90b71cdf10141ff9913b72bcfd29768_18.jpg?w=640&amp;auto=format%2Ccompress 640w" sizes="(max-width: 768px) 90vw, 20vw" alt="hero image caption" width="100%" height="100%" class="qt-image arr-image-placeholder "/></figure></div><div class="also-read-m_content-wrapper__26AZX"><div style="color:#3333" class="also-read-m_headline__VzF-c also-read-m_dark__1pUib">How is the coronavirus impacting people with disabilities?</div></div></a>'
-    );
-  });
-
-  it("Should render text left align template with custom title", () => {
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <AlsoRead story={story} element={element} template="textLeftAlign" opts={{ title: "Also-Read" }} />
-      </Provider>
-    );
-    expect(wrapper.html()).toBe(
-      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-textLeftAlign__S0Dxe " href="https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities"><div class="also-read-m_default-text__hp2dp also-read-m_dark__1pUib">Also-Read</div><div class="also-read-m_content-wrapper__26AZX"><div class="also-read-m_headline__VzF-c also-read-m_dark__1pUib">How is the coronavirus impacting people with disabilities?</div></div></a>'
-    );
-  });
-
-  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}>
-        <AlsoRead element={element} render={customTemplate} />
-      </Provider>
-    );
-    expect(wrapper.html()).toBe("<h3>How is the coronavirus impacting people with disabilities?</h3>");
-  });
-});

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

@@ -1,126 +0,0 @@
-import React from "react";
-import get from "lodash.get";
-import { Link } from "@quintype/components";
-import { withElementWrapper } from "../withElementWrapper";
-import PropTypes from "prop-types";
-import { FallbackImage } from "../../FallbackImage";
-import { isEmpty, shapeConfig, getTextColor } from "../../../../utils/utils";
-import { useStateValue } from "../../../SharedContext";
-import { useSelector } from "react-redux";
-import { ResponsiveLazyImg } from "../../ResponsiveImg";
-import "./also-read.m.css";
-import {
-  alsoReadImgSizes,
-  alsoReadImgWidths,
-  alsoReadDefaultImgSizes,
-  alsoReadDefaultImgWidths
-} from "../../../../utils/img-size-utils";
-
-const DisplayImage = ({ story, linkedImage, isDefault }) => {
-  const alternateText = story["hero-image-alt-text"] || story["hero-image-caption"] || story["headline"];
-  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"], false));
-  const fallBackImageUrl = useSelector((state) =>
-    get(state, ["qt", "config", "pagebuilder-config", "general", "fallbackImage", "url"])
-  );
-
-  return (
-    <div styleName="card-image-wrapper">
-      {!isEmpty(linkedImage) ? (
-        <figure styleName="card-image">
-          <ResponsiveLazyImg
-            slug={linkedImage}
-            aspectRatio={[16, 9]}
-            defaultWidth={480}
-            widths={isDefault ? alsoReadDefaultImgWidths : alsoReadImgWidths}
-            sizes={isDefault ? alsoReadDefaultImgSizes : alsoReadImgSizes}
-            imgParams={{ auto: ["format", "compress"] }}
-            alt={alternateText}
-            isBotRequest={isBotRequest}
-            className={"arr-image-placeholder"}
-          />
-        </figure>
-      ) : (
-        <div styleName="image card-image" className="arr--fallback-also-read">
-          <FallbackImage fallBackImageUrl={fallBackImageUrl} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-DisplayImage.propTypes = {
-  story: PropTypes.shape({
-    "hero-image-alt-text": PropTypes.string,
-    "hero-image-caption": PropTypes.string,
-    headline: PropTypes.string
-  }),
-  linkedImage: PropTypes.string,
-  isDefault: PropTypes.bool
-};
-
-const AlsoReadBase = ({
-  story = {},
-  element,
-  template = "",
-  opts = {},
-  css = {},
-  config = {},
-  render,
-  ...restProps
-}) => {
-  const content = element.text;
-  if (!content) return null;
-
-  const linkedStories = get(story, ["linked-stories"], {});
-  const linkedStoryId = get(element, ["metadata", "linked-story-id"]);
-  const linkedStorySlug = get(linkedStories, [linkedStoryId, "url"]);
-  const linkedImage = get(linkedStories, [linkedStoryId, "hero-image-s3-key"], "");
-  const storyUrl = linkedStorySlug && linkedStorySlug;
-  const configData = useStateValue() || {};
-  const textInvertColor = getTextColor(configData.theme);
-  const { title = "" } = opts;
-  const { textColor = "" } = css;
-  const displayTitle = title || "Also Read";
-  const isDefault = template === "" || template === "default";
-  const isRightAlign = template === "imageRightAlign";
-  const templateStyle = template ? `alsoread-${template}` : "alsoread-default";
-
-  return (
-    <Link
-      className="arrow-component arr--also-read-element"
-      styleName={templateStyle}
-      data-test-id="also-read"
-      href={storyUrl}
-      aria-label="also-read"
-      {...restProps}>
-      {!isDefault && <div styleName={`default-text ${textInvertColor}`}>{displayTitle}</div>}
-      {isDefault && <DisplayImage story={story} linkedImage={linkedImage} isDefault={isDefault} />}
-      <div styleName="content-wrapper">
-        <div
-          styleName={`headline ${textInvertColor}`}
-          style={textColor ? { color: textColor } : {}}
-          dangerouslySetInnerHTML={{ __html: content }}
-        />
-        {isRightAlign && <DisplayImage story={story} linkedImage={linkedImage} isDefault={isDefault} />}
-      </div>
-    </Link>
-  );
-};
-
-AlsoReadBase.propTypes = {
-  /**  template can be default, textLeftAlign or imageRightAlign */
-  template: PropTypes.string,
-  story: PropTypes.shape({ "linked-stories": PropTypes.object }),
-  element: PropTypes.shape({
-    text: PropTypes.string,
-    metadata: PropTypes.shape({
-      linkedStoryId: PropTypes.shape({ url: PropTypes.string, "hero-image-s3-key": PropTypes.string })
-    })
-  }),
-  opts: PropTypes.shape({ title: PropTypes.string }),
-  config: shapeConfig,
-  render: PropTypes.func,
-  css: PropTypes.object
-};
-
-export const AlsoRead = withElementWrapper(AlsoReadBase);

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

@@ -1,40 +0,0 @@
-import React from "react";
-import { withStore, optionalSelect } from "../../../../../storybook";
-import { color, text } from "@storybook/addon-knobs";
-import { AlsoRead } from "./index";
-import { generateStoryElementData, generateStory } from "../../../Fixture";
-import Readme from "./README.md";
-
-const element = generateStoryElementData("also-read");
-const story = generateStory();
-const templateStyle = {
-  Default: "default",
-  "Image Right Align": "imageRightAlign",
-  "Text Left Align": "textLeftAlign"
-};
-
-withStore(
-  "Atoms/Story Elements/Also Read",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-)
-  .add("Default", () => (
-    <AlsoRead
-      story={story}
-      element={element}
-      template={optionalSelect("Template Options", templateStyle)}
-      css={{ textColor: color("Color", "#ff214b") }}
-      opts={{ title: text("Title", "Also read") }}
-    />
-  ))
-  .add("Custom", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-    return <AlsoRead element={element} render={customTemplate} />;
-  });

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

@@ -1,21 +0,0 @@
-# Attachment
-
-Component to display the attachment element.
-
-## Usage
-
-#### Attachment story element with default template
-
-```jsx
-<Attachment element={element} />
-```
-
-#### Replace default attachment element template with custom template passed using render
-
-```jsx
-const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element["file-name"] }} />;
-
-<Attachment element={element} />;
-```
-
-<!-- PROPS -->

package/src/components/Atoms/StoryElements/Attachment/__snapshots__/attachment.test.js.snap

@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Attachment Story Element Should render default template 1`] = `
-<AttachmentBase
-  element={
-    Object {
-      "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-      "description": "",
-      "family-id": "95bf1052-d663-446d-ace7-d014325e0027",
-      "file-name": "document__7_ (1).docx",
-      "id": "2f648c29-ef8f-442c-903a-263f82e631dd",
-      "metadata": Object {
-        "file-size": 8209,
-      },
-      "page-url": "/story/7155b5c2-80a4-4922-bdf1-73f1ff04311e/element/2f648c29-ef8f-442c-903a-263f82e631dd",
-      "s3-key": "ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
-      "subtype": "attachment",
-      "title": "",
-      "type": "file",
-      "url": "https://thumbor-stg.assettype.com/ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
-    }
-  }
-/>
-`;
-
-exports[`Attachment Story Element Should render default template with default file-name if not passed 1`] = `
-<AttachmentBase
-  element={
-    Object {
-      "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-      "description": "",
-      "family-id": "95bf1052-d663-446d-ace7-d014325e0027",
-      "file-name": "",
-      "id": "2f648c29-ef8f-442c-903a-263f82e631dd",
-      "metadata": Object {
-        "file-size": 8209,
-      },
-      "page-url": "/story/7155b5c2-80a4-4922-bdf1-73f1ff04311e/element/2f648c29-ef8f-442c-903a-263f82e631dd",
-      "s3-key": "ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
-      "subtype": "attachment",
-      "title": "",
-      "type": "file",
-      "url": "https://thumbor-stg.assettype.com/ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
-    }
-  }
-/>
-`;

package/src/components/Atoms/StoryElements/Attachment/attachment.m.css

@@ -1,127 +0,0 @@
-@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-@value tablet from viewports;
-
-.headline {
-  font-size: var(--arrow-fs-s);
-  font-weight: var(--arrow-fw-bold);
-  line-height: var(--arrow-lh-3);
-  padding-bottom: var(--arrow-spacing-xs);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-l);
-    padding-bottom: var(--arrow-spacing-s);
-    @media (min-width: tablet) {
-      padding-bottom: var(--arrow-spacing-m);
-    }
-  }
-}
-
-.button-wrapper {
-  border-radius: 3px;
-  font-size: var(--arrow-fs-tiny);
-  line-height: var(--arrow-lh-4);
-  text-align: center;
-  padding: 6px var(--arrow-spacing-m);
-  flex-shrink: 0;
-  @media (min-width: tablet) {
-    margin-left: var(--arrow-spacing-m);
-  }
-}
-
-.file-name {
-  font-size: var(--arrow-fs-s);
-  line-height: var(--arrow-lh-5);
-  margin-bottom: var(--arrow-spacing-m);
-  word-break: break-word;
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-m);
-    line-height: var(--arrow-lh-3);
-    @media (min-width: tablet) {
-      margin-bottom: unset;
-    }
-  }
-}
-
-.dark .headline,
-.dark .file-name,
-.dark .button-wrapper {
-  color: var(--arrow-c-mono2);
-}
-
-.light .headline,
-.light .file-name,
-.light .button-wrapper {
-  color: var(--arrow-c-invert-mono2);
-}
-
-.pdf {
-  width: 35px;
-  height: 35px;
-  font-size: var(--arrow-fs-tiny);
-  font-weight: var(--arrow-fw-bold);
-  color: var(--arrow-c-light);
-  border-radius: 6px;
-  background-color: #db5449;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: var(--arrow-spacing-m);
-  flex-shrink: 0;
-  @media (min-width: mobile) {
-    width: 45px;
-    height: 45px;
-    border-radius: var(--arrow-spacing-xs);
-  }
-}
-.doc {
-  composes: pdf;
-  background-color: #007bd8;
-}
-
-.wrapper {
-  display: flex;
-  padding: var(--arrow-spacing-m);
-  border-radius: var(--arrow-spacing-xxs);
-  @media (min-width: tablet) {
-    padding: var(--arrow-spacing-l);
-  }
-}
-
-.dark .wrapper {
-  border: solid 1px var(--arrow-c-mono7);
-  background-color: var(--arrow-c-mono7);
-}
-
-.light .wrapper {
-  border: solid 1px var(--arrow-c-invert-mono7);
-  background-color: var(--arrow-c-invert-mono7);
-}
-
-.dark .button-wrapper {
-  border: solid 1px var(--arrow-c-mono2);
-}
-
-.light .button-wrapper {
-  border: solid 1px var(--arrow-c-invert-mono2);
-}
-
-.content-wrapper {
-  @media (min-width: tablet) {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-}
-
-html[dir="rtl"] {
-  .doc,
-  .pdf,
-  .headline {
-    margin-right: 0;
-  }
-
-  .content-wrapper {
-    margin-right: var(--arrow-spacing-m);
-  }
-}

package/src/components/Atoms/StoryElements/Attachment/attachment.test.js

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { shallow } from "enzyme";
-import { generateStoryElementData } from "../../../Fixture";
-import { Attachment } from "./index";
-
-let element = generateStoryElementData("attachment");
-
-describe("Attachment Story Element", () => {
-  it("Should render default template", () => {
-    const wrapper = shallow(<Attachment element={element} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("Should not render default template if url is not passed", () => {
-    const wrapper = shallow(<Attachment element={{ ...element, url: "" }} />);
-    expect(wrapper.find({ "data-test-id": "attachment" }).length).toEqual(0);
-  });
-
-  it("Should not render default template if content-type is not passed", () => {
-    const wrapper = shallow(<Attachment element={{ ...element, "content-type": "" }} />);
-    expect(wrapper.find({ "data-test-id": "attachment" }).length).toEqual(0);
-  });
-
-  it("Should render default template with default file-name if not passed", () => {
-    const wrapper = shallow(<Attachment element={{ ...element, "file-name": "" }} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("Should render PDF icon if content-type is pdf", () => {
-    const wrapper = shallow(<Attachment element={element} />);
-    expect(wrapper.find({ "data-test-id": "doc" }).length).toEqual(0);
-  });
-
-  it("Should render DOC icon if content-type is doc", () => {
-    element = { ...element, "content-type": "application/doc" };
-    const wrapper = shallow(<Attachment element={element} />);
-    expect(wrapper.find({ "data-test-id": "pdf" }).length).toEqual(0);
-  });
-});

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

@@ -1,63 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./attachment.m.css";
-import { Link } from "@quintype/components";
-import { withElementWrapper } from "../withElementWrapper";
-import { useStateValue } from "../../../SharedContext";
-import { getTextColor } from "../../../../utils/utils";
-
-const AttachmentBase = ({ element = {}, render, opts = {}, ...restProps }) => {
-  const { "file-name": fileName, url, "content-type": contentType } = element;
-  const { attachmentTxt, previewTxt } = opts;
-  if (!contentType || !url) return null;
-  const attachmentType = { PDF: "application/pdf" };
-  const isPdf = contentType === attachmentType.PDF;
-  const configData = useStateValue() || {};
-  const textColor = getTextColor(configData.theme);
-  const defaultName = isPdf ? "Attached PDF" : "Attached DOC";
-  const defaultFileName = fileName ? fileName.replace(/\.pdf$/, "") : defaultName;
-
-  return (
-    <div
-      data-test-id="attachment"
-      className="arrow-component arr--attachment-element"
-      styleName={textColor}
-      {...restProps}>
-      <div styleName="headline">{attachmentTxt || "Attachment"}</div>
-      <div styleName="wrapper">
-        {isPdf ? (
-          <div data-test-id="pdf" styleName="pdf">
-            PDF
-          </div>
-        ) : (
-          <div data-test-id="doc" styleName="doc">
-            DOC
-          </div>
-        )}
-        <div styleName="content-wrapper">
-          <div styleName="file-name" dangerouslySetInnerHTML={{ __html: defaultFileName }} />
-          <Link
-            styleName="button-wrapper"
-            href={url}
-            target="_blank"
-            rel="noopener noreferrer"
-            download
-            aria-label="button">
-            {isPdf ? previewTxt || "Preview" : "Download"}
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-AttachmentBase.propTypes = {
-  element: PropTypes.shape({
-    url: PropTypes.string,
-    fileName: PropTypes.string,
-    contentType: PropTypes.string
-  }),
-  render: PropTypes.func,
-  opts: PropTypes.shape({ attachmentTxt: PropTypes.string, previewTxt: PropTypes.string })
-};
-export const Attachment = withElementWrapper(AttachmentBase);

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

@@ -1,48 +0,0 @@
-import React from "react";
-import { withStore } from "../../../../../storybook";
-import { Attachment } from "./index";
-import { generateStoryElementData } from "../../../Fixture";
-import Readme from "./README.md";
-
-const doc = {
-  description: "",
-  "page-url": "/story/7155b5c2-80a4-4922-bdf1-73f1ff04311e/element/2f648c29-ef8f-442c-903a-263f82e631dd",
-  type: "file",
-  "family-id": "95bf1052-d663-446d-ace7-d014325e0027",
-  title: "",
-  id: "2f648c29-ef8f-442c-903a-263f82e631dd",
-  "file-name": "document__7_ (1).docx",
-  url: "https://thumbor-stg.assettype.com/ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
-  "s3-key": "ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
-  "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-  metadata: {
-    "file-size": 8209
-  },
-  subtype: "attachment"
-};
-
-const pdf = {
-  description: "",
-  "page-url": "/story/a9068be5-70ce-4d55-86d0-687546f921ea/element/62393c55-50ed-4310-81c2-01cc0ef17446",
-  type: "file",
-  "family-id": "591f90c3-e98e-43dc-8509-9f11f5335af6",
-  title: "",
-  id: "62393c55-50ed-4310-81c2-01cc0ef17446",
-  "file-name": "resume-samples.pdf",
-  url: "https://thumbor-stg.assettype.com/ace/2019-07/6dcf2021-615b-43e6-85f3-21acb8953cea/resume_samples.pdf",
-  "s3-key": "ace/2019-07/6dcf2021-615b-43e6-85f3-21acb8953cea/resume_samples.pdf",
-  "content-type": "application/pdf",
-  metadata: {
-    "file-size": 301808
-  },
-  subtype: "attachment"
-};
-const element = generateStoryElementData("attachment");
-withStore("Atoms/Story Elements/Attachment", Readme)
-  .add("PDF", () => <Attachment element={pdf} />)
-  .add("DOC", () => <Attachment element={doc} />)
-  .add("Custom", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element["file-name"] }} />;
-    return <Attachment element={element} render={customTemplate} />;
-  });

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

@@ -1,9 +0,0 @@
-## BigFact
-
-BigFact displays the big fact content of the story element.
-
-# Usage
-
-```jsx
-<BigFact element={element}>
-```

package/src/components/Atoms/StoryElements/BigFact/big-fact.m.css

@@ -1,41 +0,0 @@
-@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-
-.bigfact-element {
-  border-bottom: 1px solid var(--arrow-c-mono5);
-  border-top: 1px solid var(--arrow-c-mono5);
-}
-
-.bigfact-element.light {
-  border-bottom: 1px solid var(--arrow-c-invert-mono5);
-  border-top: 1px solid var(--arrow-c-invert-mono5);
-}
-
-.content {
-  font-size: var(--arrow-fs-huge);
-  font-weight: var(--arrow-fw-bold);
-  color: var(--arrow-c-brand1);
-  padding: var(--arrow-spacing-m) 0 var(--arrow-spacing-xxs) 0;
-  @media (min-width: mobile) {
-    font-size: 48px;
-    padding: var(--arrow-spacing-m) 0 var(--arrow-spacing-xs) 0;
-    line-height: var(--arrow-lh-3);
-  }
-}
-
-.attribution {
-  font-size: var(--arrow-fs-s);
-  font-style: italic;
-  line-height: var(--arrow-lh-5);
-  padding-bottom: var(--arrow-spacing-m);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-m);
-  }
-}
-
-.dark {
-  color: var(--arrow-c-mono1);
-}
-.light {
-  color: var(--arrow-c-invert-mono1);
-}

package/src/components/Atoms/StoryElements/BigFact/big-fact.test.js

@@ -1,21 +0,0 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { BigFact } from "./index";
-import { generateStoryElementData } from "../../../Fixture";
-import "./big-fact.m.css";
-
-const element = generateStoryElementData("bigfact");
-describe("Component: BigFact", () => {
-  test("It should display the big fact element content and attribution", () => {
-    const wrapper = mount(<BigFact element={element} />);
-    expect(wrapper.find({ "data-test-id": "bigfact" }).prop("className")).toMatch(/bigfact-element/);
-  });
-  it("Should not render attribution value if there is no data", () => {
-    const wrapper = shallow(<BigFact element={element} />);
-    expect(wrapper.find({ "data-test-id": "attribution" }).length).toEqual(0);
-  });
-  test("It should not render the BigFact component if the data is null", () => {
-    const component = shallow(<BigFact />);
-    expect(component.contains(<BigFact />)).toBe(false);
-  });
-});