@quintype/arrow 3.0.0-spike-skeleton-layout.21 → 3.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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