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

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

@@ -1,44 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { withElementWrapper } from "../withElementWrapper";
-import "./quote.m.css";
-import { shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
-import { useStateValue } from "../../../SharedContext";
-
-const QuoteBase = ({ element, template = "", css = {}, story = {}, config = {}, render, ...restProps }) => {
-  const configData = useStateValue() || {};
-  const textInvertColor = getTextColor(configData.theme);
-  const { content, attribution } = element.metadata;
-  if (!content) return null;
-  const { borderColor } = css;
-  const updateBorderColor = template === "borderLeft" && `4px solid ${borderColor}`;
-  const templateStyle = template ? `quote-${template}` : "quote";
-
-  return (
-    <div className="arrow-component arr--quote-element" data-test-id="quote" styleName={templateStyle} {...restProps}>
-      {template === "borderTopSmall" && (
-        <div styleName="line" style={borderColor && { backgroundColor: borderColor }} />
-      )}
-      <p
-        styleName={`text ${textInvertColor}`}
-        style={borderColor && { borderLeft: updateBorderColor }}
-        dangerouslySetInnerHTML={{ __html: content }}
-      />
-      <p data-test-id="quote-attribution" styleName={`attribution ${textInvertColor}`}>
-        {attribution}
-      </p>
-    </div>
-  );
-};
-
-QuoteBase.propTypes = {
-  element: PropTypes.shape({ metadata: PropTypes.shape({ content: PropTypes.string, attribution: PropTypes.string }) }),
-  /** template can be default, borderTopSmall and borderLeft  */
-  template: PropTypes.string,
-  story: shapeStory,
-  config: shapeConfig,
-  render: PropTypes.func,
-  css: PropTypes.object
-};
-
-export const Quote = withElementWrapper(QuoteBase);

package/src/components/Atoms/StoryElements/Quote/quote.m.css

@@ -1,111 +0,0 @@
-@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-
-.quote .text,
-.quote-borderNone .text,
-.quote-borderTopSmall .text,
-.quote-borderLeft .text,
-.dark {
-  font-weight: var(--arrow-fw-semi-bold);
-  color: var(--arrow-c-mono2);
-  line-height: var(--arrow-lh-5);
-  font-size: var(--arrow-fs-m);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-l);
-  }
-}
-
-.quote .text.light,
-.quote-borderNone .text.light,
-.quote-borderTopSmall .text.light,
-.quote-borderLeft .text.light {
-  color: var(--arrow-c-invert-mono2);
-}
-
-.quote .text,
-.quote-borderNone .text {
-  font-style: italic;
-}
-
-.quote-borderLeft .text {
-  border-left: 4px solid var(--arrow-c-brand1);
-  padding-left: var(--arrow-spacing-l);
-}
-
-.quote .attribution,
-.quote-borderNone .attribution,
-.quote-borderLeft .attribution,
-.quote-borderTopSmall .attribution,
-.dark {
-  font-size: var(--arrow-fs-s);
-  font-weight: var(--arrow-fw-semi-bold);
-  font-family: var(--arrow-typeface-secondary);
-  color: var(--arrow-c-mono4);
-  font-style: italic;
-  display: flex;
-  margin-top: var(--arrow-spacing-s);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-m);
-    margin-top: var(--arrow-spacing-m);
-  }
-}
-.quote .attribution.light,
-.quote-borderNone .attribution.light,
-.quote-borderLeft .attribution.light,
-.quote-borderTopSmall .attribution.light {
-  color: var(--arrow-c-invert-mono4);
-}
-
-.quote-borderLeft .attribution {
-  margin-left: var(--arrow-spacing-l);
-}
-
-.quote .attribution,
-.quote-borderNone .attribution {
-  justify-content: flex-end;
-}
-
-.quote-borderLeft .attribution,
-.quote-borderTopSmall .attribution {
-  justify-content: flex-start;
-}
-
-.quote .attribution:before,
-.quote-borderNone .attribution:before {
-  content: " ";
-  width: 12px;
-  height: 2px;
-  background-color: var(--arrow-c-mono4);
-  margin: var(--arrow-spacing-s) var(--arrow-spacing-xs) 0 0;
-}
-
-.quote .attribution.light:before,
-.quote-borderNone .attribution.light:before {
-  background-color: var(--arrow-c-invert-mono4);
-}
-
-html[dir="rtl"] {
-  .quote .attribution,
-  .quote-borderNone .attribution {
-    &::before {
-      content: none;
-    }
-    &::after {
-      content: " ";
-      width: 12px;
-      height: 2px;
-      background-color: var(--arrow-c-mono4);
-      margin: var(--arrow-spacing-s) var(--arrow-spacing-xs) 0 0;
-    }
-  }
-}
-
-.quote-borderTopSmall .line {
-  width: 32px;
-  height: 4px;
-  background-color: var(--arrow-c-brand1);
-  margin-bottom: var(--arrow-spacing-xs);
-  @media (min-width: mobile) {
-    margin-bottom: var(--arrow-spacing-s);
-  }
-}

package/src/components/Atoms/StoryElements/Quote/quote.test.js

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { shallow, mount } from "enzyme";
-import { generateStoryElementData } from "../../../Fixture";
-import { Quote } from "./index";
-
-const element = generateStoryElementData("quote");
-
-describe("Quote Story Element", () => {
-  it("Should render default template", () => {
-    const wrapper = mount(<Quote element={element} template="borderNone" />);
-    expect(wrapper.find({ "data-test-id": "quote" }).prop("className")).toMatch(/quote-borderNone/);
-  });
-
-  it("Should render border left template", () => {
-    const wrapper = mount(<Quote element={element} template="borderLeft" />);
-    expect(wrapper.find({ "data-test-id": "quote" }).prop("className")).toMatch(/quote-borderLeft/);
-  });
-
-  it("Should render border top template", () => {
-    const wrapper = mount(<Quote element={element} template="borderTopSmall" />);
-    expect(wrapper.find({ "data-test-id": "quote" }).prop("className")).toMatch(/quote-borderTopSmall/);
-  });
-
-  it("Should render border left template with border color", () => {
-    const wrapper = shallow(<Quote template="borderLeft" element={element} css={{ borderColor: "#ff214b" }} />);
-    expect(wrapper.html()).toBe(
-      '<div data-test-id="quote" class="arrow-component arr--quote-element quote-m_quote-borderLeft__3QaAY "><p style="border-left:4px solid #ff214b" class="quote-m_text__2hXSE quote-m_dark__1migZ">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.</p><p data-test-id="quote-attribution" class="quote-m_attribution__20Y6O quote-m_dark__1migZ">Player</p></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(<Quote 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/Quote/stories.js

@@ -1,28 +0,0 @@
-import React from "react";
-import { Quote } from "./index";
-import { withStore, optionalSelect } from "../../../../../storybook";
-import Readme from "./README.md";
-import { generateStoryElementData } from "../../../Fixture";
-import { boolean, color } from "@storybook/addon-knobs";
-
-const element = generateStoryElementData("quote");
-const collectionTemplates = {
-  default: "borderNone",
-  borderLeft: "borderLeft",
-  borderTopSml: "borderTopSmall"
-};
-
-withStore("Atoms/Story Elements/Quote", {}, Readme)
-  .add("Default", () => (
-    <Quote
-      element={element}
-      template={optionalSelect("templates", collectionTemplates)}
-      opts={{ isExternalLink: boolean("External Link", true) }}
-      css={{ borderColor: color("Color", "#ff214b") }}
-    />
-  ))
-  .add("Custom", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.metadata.content }} />;
-    return <Quote element={element} render={customTemplate} />;
-  });

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

@@ -1,9 +0,0 @@
-## Reference
-
-Reference element displays the referenced content to the story.
-
-# Usage
-
-```jsx
-<Reference element={element} >
-```

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

@@ -1,52 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { withElementWrapper } from "../withElementWrapper";
-import { useStateValue } from "../../../SharedContext";
-import { getTextColor, shapeConfig } from "../../../../utils/utils";
-import { Link } from "@quintype/components";
-import "./reference.m.css";
-
-const ReferenceBase = ({ element, config = {}, opts = {}, ...restProps }) => {
-  if (!element) return null;
-
-  const configData = useStateValue() || {};
-  const textInvertColor = getTextColor(configData.theme);
-
-  const eleArr = element["story-elements"] && element["story-elements"].map((ref) => ref.metadata);
-  const { showHeadline = true, headlineText } = opts;
-
-  return (
-    <div className="arrow-component arr--reference-element" {...restProps}>
-      {eleArr &&
-        eleArr.map((metadata, index) => {
-          const { name = "", description = "", url } = metadata;
-          return (
-            <div styleName={`wrapper ${textInvertColor}`} key={index}>
-              <Link href={url} aria-label="reference-headline">
-                {showHeadline && (
-                  <div styleName="name" data-test-id="ref-headline">
-                    {headlineText || name}
-                  </div>
-                )}
-                <div styleName="description">{description}</div>
-              </Link>
-            </div>
-          );
-        })}
-    </div>
-  );
-};
-
-ReferenceBase.propTypes = {
-  element: PropTypes.shape({
-    "story-elements": PropTypes.arrayOf(
-      PropTypes.shape({
-        metadata: PropTypes.shape({ name: PropTypes.string, description: PropTypes.string, url: PropTypes.string })
-      })
-    )
-  }),
-  opts: PropTypes.shape({ hideHeadline: PropTypes.bool }),
-  config: shapeConfig
-};
-
-export const Reference = withElementWrapper(ReferenceBase);

package/src/components/Atoms/StoryElements/Reference/reference.m.css

@@ -1,42 +0,0 @@
-@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-@value tablet from viewports;
-
-.wrapper {
-  border-radius: var(--arrow-spacing-xxs);
-  padding: var(--arrow-spacing-m);
-  margin-bottom: var(--arrow-spacing-l);
-  @media (min-width: tablet) {
-    padding: var(--arrow-spacing-l);
-  }
-}
-
-.name {
-  font-size: var(--arrow-fs-m);
-  font-weight: var(--arrow-fw-bold);
-  line-height: var(--arrow-lh-3);
-  margin-bottom: var(--arrow-spacing-m);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-l);
-  }
-}
-
-.description {
-  font-size: var(--arrow-fs-s);
-  line-height: var(--arrow-lh-5);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-m);
-  }
-}
-
-.dark {
-  background-color: var(--arrow-c-mono7);
-  border: solid 1px var(--arrow-c-mono7);
-  color: var(--arrow-c-mono2);
-}
-
-.light {
-  background-color: var(--arrow-c-invert-mono7);
-  border: solid 1px var(--arrow-c-invert-mono7);
-  color: var(--arrow-c-invert-mono2);
-}

package/src/components/Atoms/StoryElements/Reference/reference.test.js

@@ -1,28 +0,0 @@
-import React from "react";
-import { mount, shallow } from "enzyme";
-import { Provider } from "react-redux";
-import { Reference } from ".";
-import { generateStoryElementData, generateStore } from "../../../Fixture";
-
-const element = generateStoryElementData("references");
-
-describe("Reference element", () => {
-  it("Should render default template of the reference element", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <Reference element={element} />;
-      </Provider>
-    );
-    expect(wrapper.find(Reference)).toHaveLength(1);
-  });
-
-  it("Should render headline if it is enabled", () => {
-    const wrapper = shallow(<Reference element={element} opts={{ hideHeadline: true }} />);
-    expect(wrapper.find({ "data-test-id": "ref-headline" }).length).toEqual(0);
-  });
-
-  it("Should not render headline if it is disabled", () => {
-    const wrapper = shallow(<Reference element={element} opts={{ hideHeadline: false }} />);
-    expect(wrapper.find({ "data-test-id": "ref-headline" }).length).toEqual(0);
-  });
-});

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

@@ -1,18 +0,0 @@
-import React from "react";
-import { Reference } from "./index";
-import { withStore } from "../../../../../storybook";
-import Readme from "./README.md";
-import { generateStoryElementData } from "../../../Fixture";
-import { boolean, text } from "@storybook/addon-knobs";
-
-const element = generateStoryElementData("references");
-
-withStore("Atoms/Story Elements/Reference", {}, Readme).add("Default", () => (
-  <Reference
-    element={element}
-    opts={{
-      showHeadline: boolean("Show Headline", true),
-      headlineText: text("Headline", "References")
-    }}
-  />
-));

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

@@ -1,10 +0,0 @@
-# Wrapper Story Element
-
-Story element is a a wrapper around `qt/components/StoryElement` which can be used as the fallback element handler component.
-For example, we can use `qt/arrow/StoryElement` for elements like, Table, File, JSEmbed, Polltype, Soundcloud etc
-
-## Usage
-
-```jsx
-<StoryElement element={element} />
-```

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

@@ -1,21 +0,0 @@
-import React from "react";
-import { StoryElement as QTCStoryElement } from "@quintype/components";
-import PropTypes from "prop-types";
-import { withElementWrapper } from "../withElementWrapper";
-import { shapeStory, shapeConfig } from "../../../../utils/utils";
-
-const StoryElementBase = ({ element, story = {}, config = {}, ...restProps }) => {
-  return (
-    <div {...restProps} data-test-id="story-elements">
-      <QTCStoryElement element={element} />
-    </div>
-  );
-};
-
-export const StoryElement = withElementWrapper(StoryElementBase);
-
-StoryElementBase.propTypes = {
-  element: PropTypes.object,
-  story: shapeStory,
-  config: shapeConfig
-};

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

@@ -1,20 +0,0 @@
-import React from "react";
-import { withStore } from "../../../../../storybook";
-import { StoryElement } from "./index";
-import Readme from "./README.md";
-import { generateStoryElementData } from "../../../Fixture";
-
-const elementJsembed = generateStoryElementData("jsembed");
-
-withStore(
-  "Atoms/Story Elements/StoryElement",
-
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-).add("should work with any jsembed ", () => <StoryElement element={elementJsembed} />);

package/src/components/Atoms/StoryElements/StoryElement/storyelement.test.js

@@ -1,13 +0,0 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { StoryElement } from ".";
-import { generateStoryElementData } from "../../../Fixture";
-import { StoryElement as QTCStoryElement } from "@quintype/components";
-const element = generateStoryElementData("jsembed");
-
-describe("Story Element", () => {
-  it("should render with correct elements", () => {
-    const wrapper = shallow(<StoryElement element={element} />).dive();
-    expect(wrapper.find(QTCStoryElement).length).toEqual(1);
-  });
-});

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

@@ -1,56 +0,0 @@
-# Summary
-
-Displays the Summary element of the story
-
-## Usage
-
-#### Summary story element with default template
-
-```jsx
-<Summary element={element} />
-```
-
-#### Summary story element with header template
-
-```jsx
-<Summary element={element} template="header" />
-```
-
-#### Summary story element with border template
-
-```jsx
-<Summary element={element} template="border" />
-```
-
-#### Summary story element with header background color
-
-```jsx
-const css = { headerBgColor: "#ff214b" };
-
-<Summary element={element} template="borderLeft" css={css} />;
-```
-
-#### Summary story element without headline.
-
-```jsx
-const opts = { hideHeadline: true };
-
-<Summary element={element} template="borderLeft" opts={opts} />;
-```
-
-#### Summary story element with custom headline.
-
-```jsx
-const opts = { headline: true };
-<Summary element={element} template="borderLeft" opts={opts} />;
-```
-
-#### Replace default Summary element template with custom template passed using render
-
-```jsx
-const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-
-<Summary element={element} render={customTemplate} />;
-```
-
-<!-- PROPS -->

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

@@ -1,68 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { withElementWrapper } from "../withElementWrapper";
-import { getTextColor, updateContentLinks, shapeStory, shapeConfig } from "../../../../utils/utils";
-
-import "./summary.m.css";
-import { useStateValue } from "../../../SharedContext";
-
-const SummaryBase = ({
-  element,
-  template = "",
-  opts = {},
-  css = {},
-  story = {},
-  config = {},
-  render,
-  ...restProps
-}) => {
-  const configData = useStateValue() || {};
-  const textInvertColor = getTextColor(configData.theme);
-  const content = element.text;
-  if (!content) return null;
-
-  const { headerBgColor } = css;
-  const { isExternalLink = true, headline = "Summary", hideHeadline = false } = opts;
-  let text = (isExternalLink && updateContentLinks(content)) || content;
-
-  const supportedTemplates = ["header", "border"];
-  const templateStyle = supportedTemplates.includes(template) ? `summary-${template}` : "summary";
-
-  const contentBorder = hideHeadline ? `content-border` : "";
-  const renderTemplate = template === "header" || template === "border";
-  const updateHeaderColor = renderTemplate ? `${headerBgColor}` : "";
-  const textColor = renderTemplate ? getTextColor(headerBgColor) : "";
-  const updateContentColor = template === "header" ? "" : textInvertColor;
-
-  return (
-    <div
-      className="arrow-component arr--summary-element arr-custom-style"
-      styleName={templateStyle}
-      data-test-id="summary"
-      {...restProps}>
-      {!hideHeadline && (
-        <div styleName={`heading-wrapper ${textInvertColor}`} data-test-id="summary-headline">
-          <div styleName={`headline ${textColor} ${textInvertColor}`} style={{ backgroundColor: updateHeaderColor }}>
-            {headline}
-          </div>
-        </div>
-      )}
-      <div
-        styleName={`content ${contentBorder} ${updateContentColor} ${textInvertColor}`}
-        dangerouslySetInnerHTML={{ __html: text }}
-      />
-    </div>
-  );
-};
-
-SummaryBase.propTypes = {
-  element: PropTypes.shape({ text: PropTypes.string }),
-  template: PropTypes.string,
-  opts: PropTypes.shape({ isExternalLink: PropTypes.bool, headline: PropTypes.string, hideHeadline: PropTypes.bool }),
-  story: shapeStory,
-  config: shapeConfig,
-  render: PropTypes.func,
-  css: PropTypes.shape({ headerBgColor: PropTypes.string })
-};
-
-export const Summary = withElementWrapper(SummaryBase);

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

@@ -1,33 +0,0 @@
-import React from "react";
-import { withStore, optionalSelect } from "../../../../../storybook";
-import { generateStoryElementData } from "../../../Fixture";
-import Readme from "./README.md";
-import { Summary } from "./index";
-import { color, boolean, text } from "@storybook/addon-knobs";
-
-const element = generateStoryElementData("summary");
-
-const summaryTemplate = {
-  default: "",
-  header: "header",
-  border: "border"
-};
-
-withStore("Atoms/Story Elements/Summary", {}, Readme)
-  .add("Default", () => (
-    <Summary
-      element={element}
-      template={optionalSelect("templates", summaryTemplate)}
-      css={{ headerBgColor: color("Color", "#ff214b") }}
-      opts={{
-        isExternalLink: boolean("External Link", true),
-        headline: text("Headline", "Summary"),
-        hideHeadline: boolean("Hide Headline", false)
-      }}
-    />
-  ))
-  .add("Custom", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-    return <Summary element={element} render={customTemplate} />;
-  });