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

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,125 +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);
-  @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);
-  @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,62 +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, ...restProps }) => {
-  const { "file-name": fileName, url, "content-type": contentType } = element;
-
-  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 || defaultName;
-
-  return (
-    <div
-      data-test-id="attachment"
-      className="arrow-component arr--attachment-element"
-      styleName={textColor}
-      {...restProps}>
-      <div styleName="headline">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 ? "Preview" : "Download"}
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-AttachmentBase.propTypes = {
-  element: PropTypes.shape({
-    url: PropTypes.string,
-    fileName: PropTypes.string,
-    contentType: PropTypes.string
-  }),
-  render: PropTypes.func
-};
-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);
-  });
-});

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

@@ -1,33 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { withElementWrapper } from "../withElementWrapper";
-import { useStateValue } from "../../../SharedContext";
-import { getTextColor } from "../../../../utils/utils";
-import "./big-fact.m.css";
-
-const BigFactBase = ({ element, story, config, ...restProps }) => {
-  const configData = useStateValue() || {};
-  const textInvertColor = getTextColor(configData.theme);
-  const { content, attribution } = element.metadata;
-
-  return (
-    <div
-      className="arrow-component arr--bigfact-element"
-      data-test-id="bigfact"
-      styleName={`bigfact-element ${textInvertColor}`}
-      {...restProps}>
-      <div styleName="content">{content}</div>
-      <div styleName={`attribution ${textInvertColor}`} data-test-id="attribution">
-        {attribution}
-      </div>
-    </div>
-  );
-};
-
-BigFactBase.propTypes = {
-  element: PropTypes.shape({ metadata: PropTypes.shape({ content: PropTypes.string, attribution: PropTypes.string }) }),
-  story: PropTypes.object,
-  config: PropTypes.object
-};
-
-export const BigFact = withElementWrapper(BigFactBase);

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

@@ -1,9 +0,0 @@
-import React from "react";
-import { BigFact } from "./index";
-import { withStore } from "../../../../../storybook";
-import Readme from "./README.md";
-import { generateStoryElementData } from "../../../Fixture";
-
-const element = generateStoryElementData("bigfact");
-
-withStore("Atoms/Story Elements/BigFact", {}, Readme).add("Default", () => <BigFact element={element} />);

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

@@ -1,49 +0,0 @@
-# Block Quote
-
-Displays the Block quote story element of the story
-
-## Usage
-
-#### Block quote story element with default template
-
-```jsx
-<BlockQuote element={element} template="default" />
-```
-
-#### Block quote story element with background template
-
-```jsx
-<BlockQuote element={element} template="withBackground" />
-```
-
-#### Block quote story element with border template
-
-```jsx
-<BlockQuote element={element} template="withBorder" />
-```
-
-#### Block quote story element with background color
-
-```jsx
-const css = { backgroundShade: "#ff214b" };
-
-<BlockQuote element={element} template="withBackground" css={css} />;
-```
-
-#### Block quote story element with blockquote color
-
-```jsx
-const css = { blockQuoteColor: "#ff214b" };
-
-<BlockQuote element={element} template="default" css={css} />;
-```
-
-#### Replace default block quote element template with custom template passed using render
-
-```jsx
-const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-
-<BlockQuote element={element} render={customTemplate} />;
-```
-
-<!-- PROPS -->

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

@@ -1,26 +0,0 @@
-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";
-  return (
-    <div styleName="curve-wrapper" style={{ fill: `${lightColor || darkColor || color}` }}>
-      <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

@@ -1,26 +0,0 @@
-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";
-  return (
-    <div styleName="edge-wrapper" style={{ fill: `${lightColor || darkColor || color}` }}>
-      <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

@@ -1,4 +0,0 @@
-.edge-wrapper,
-.curve-wrapper {
-  fill: var(--arrow-c-brand1);
-}