@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

package/src/components/Atoms/CollectionName/stories.js

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { CollectionName } from "./index.js";
+import { withStore, optionalSelect } from "../../../../storybook";
+
+import { generateCollection } from "../../Fixture";
+import { color } from "@storybook/addon-knobs";
+
+import Readme from "./README.md";
+const collection = generateCollection();
+
+const collectionTemplates = {
+  default: "default",
+  borderBottom: "borderBottom",
+  borderLeft: "borderLeft",
+  crossLine: "crossLine",
+  borderBottomFull: "borderBottomFull"
+};
+
+withStore(
+  "Atoms/collection Title",
+  {
+    qt: {
+      config: {
+        sections: [
+          {
+            "domain-slug": null,
+            slug: "health",
+            name: "Health",
+            "section-url": "https://ace-web.qtstage.io/health",
+            id: 11181,
+            "parent-id": null,
+            "display-name": "Health",
+            collection: {
+              slug: "health",
+              name: "Health",
+              id: 15603
+            },
+            data: null
+          }
+        ]
+      }
+    }
+  },
+  Readme
+).add("default", () => (
+  <CollectionName
+    collection={collection}
+    collectionNameTemplate={optionalSelect("templates", collectionTemplates)}
+    collectionNameBorderColor={color("color for border", "#333")}
+  />
+));

package/src/components/Atoms/Divider/__snapshots__/divider.test.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Divider should render 1`] = `
+<div
+  className="arr--divider divider-m_light__w-7sy"
+>
+  <svg
+    height="10"
+    width="1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 0h1v10H0z"
+      fill="inherit"
+    />
+  </svg>
+</div>
+`;

package/src/components/Atoms/Divider/divider.m.css

@@ -0,0 +1,6 @@
+.dark {
+  fill: var(--arrow-c-mono4);
+}
+.light {
+  fill: var(--arrow-c-invert-mono4);
+}

package/src/components/Atoms/Divider/divider.test.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { Divider } from ".";
+
+describe("Divider", () => {
+  it("should render", () => {
+    const wrapper = shallow(<Divider />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/src/components/Atoms/Divider/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./divider.m.css";
+
+export const Divider = ({ width = "1", height = "10", color = "light" }) => {
+  return (
+    <div className="arr--divider" styleName={color}>
+      <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height}>
+        <path fill="inherit" d="M0 0h1v10H0z"></path>
+      </svg>
+    </div>
+  );
+};
+
+Divider.propTypes = {
+  /** height , width and color of the dot icon */
+  color: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string
+};

package/src/components/Atoms/Dot/dot.js

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./dot.m.css";
+
+export const Dot = ({ width = "3px", height = "3px", color = "light" }) => {
+  return (
+    <div className="arr--dot" styleName={color}>
+      <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 3 3">
+        <circle cx="87" cy="9" r="1" fill="inherit" fillRule="nonzero" transform="translate(-86 -8)" />
+      </svg>
+    </div>
+  );
+};
+
+Dot.propTypes = {
+  /** height , width and color of the dot icon */
+  color: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string
+};

package/src/components/Atoms/Dot/dot.m.css

@@ -0,0 +1,6 @@
+.dark {
+  fill: var(--arrow-c-mono4);
+}
+.light {
+  fill: var(--arrow-c-invert-mono4);
+}

package/src/components/Atoms/ExtendedLoadMore/README.md

@@ -0,0 +1,9 @@
+# Extended Load More
+
+Used for performance gains whilst to help with selective hydration
+
+## Usage 
+
+```jsx
+renderComponent(ExtendedLoadMore, elementId, store, { config, componentName: layout });
+```

package/src/components/Atoms/ExtendedLoadMore/__snapshots__/extended-load-more.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Extended Load more button Should render extended load more button 1`] = `
+<div
+  className="arr--button load-more-m_button__1mmf1 load-more-m_dark__3dfzb load-more-m_default__2_k4V"
+  onClick={[Function]}
+  style={Object {}}
+>
+  Read More
+</div>
+`;

package/src/components/Atoms/ExtendedLoadMore/extended-load-more.test.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import renderer from "react-test-renderer";
+import { ExtendedLoadMore } from "./index";
+import { Provider } from "react-redux";
+import { generateStore } from "../../Fixture";
+
+describe("Extended Load more button", () => {
+  it("Should render extended load more button", () => {
+    /* Useless test */
+    const wrapper = renderer
+      .create(
+        <Provider store={generateStore}>
+          <ExtendedLoadMore />
+        </Provider>
+      )
+      .toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/src/components/Atoms/ExtendedLoadMore/index.js

@@ -0,0 +1,114 @@
+/*
+ *  ************************************************************************
+ *  *  © [2015 - 2020] Quintype Technologies India Private Limited
+ *  *  All Rights Reserved.
+ *  *************************************************************************
+ */
+import get from "lodash/get";
+import PropTypes from "prop-types";
+import React, { lazy, Suspense, useState } from "react";
+import { getTextColor } from "../../../utils/utils";
+import "./../Loadmore/load-more.m.css";
+
+const getTemplate = (templateName) => {
+  switch (templateName) {
+    case "ArrowFourColGrid":
+      return lazy(() => import("../../Rows/FourColGrid"));
+    case "ArrowThreeColGrid":
+      return lazy(() => import("../../Rows/ThreeColGrid"));
+    case "ArrowOneColStoryList":
+      return lazy(() => import("../../Rows/OneColStoryList"));
+    case "ArrowFourColFiveStories":
+      return lazy(() => import("../../Rows/FourColFiveStories"));
+    case "ArrowOpinionCollection":
+      return lazy(() => import("../../Rows/OpinionCollection"));
+    case "ArrowSixColSixStories":
+      return lazy(() => import("../../Rows/SixColSixStories"));
+    case "ArrowThreeColFlexStories":
+      return lazy(() => import("../../Rows/ThreeColFlexStories"));
+    case "ArrowFourColPortraitStories":
+      return lazy(() => import("../../Rows/FourColPortraitStories"));
+    default:
+      return lazy(() => import("../../Rows/ThreeColGrid"));
+  }
+};
+
+export const ExtendedLoadMore = ({ config, componentName, WithArrowConfig, withSubsequentLoad }) => {
+  const showButton = get(config, ["showButton"], true);
+  const btnText = get(config, ["buttonText"], "Read More");
+  const theme = get(config, ["theme"], "");
+  const textColor = getTextColor(theme);
+
+  /* Open an array to maintain load-more initiated components to re-render */
+  const [components, setComponents] = useState([]);
+
+  const addComponent = async (event) => {
+    event.persist();
+    const collectionSlug = event.target.parentElement.getAttribute("data-collection-slug");
+    const offset = event.target.parentElement.getAttribute("data-collection-offset");
+    const limit = event.target.parentElement.getAttribute("data-collection-limit");
+
+    const Component = getTemplate(componentName);
+
+    const { items } = await (await fetch(
+      `/api/v1/collections/${collectionSlug}?item-type=story&offset=${offset}&limit=${limit}`
+    )).json();
+
+    if (items.length) {
+      const updatedOffset = parseInt(offset) + parseInt(limit);
+      event.target.parentElement.setAttribute("data-collection-offset", updatedOffset);
+    }
+
+    const updatedCompList = [
+      ...components,
+      {
+        // Passing a number below the initial collection length (which we will not know here)
+        // as the second parameter causes the Load More button to be rendered regardless of
+        // the value given to `isLoadMoreVisible`. Since this paramter will be ignored anyway,
+        // we pass in a number that is sufficiently always larger.
+        Component: WithArrowConfig(withSubsequentLoad(Component, limit || 10, true)),
+        props: {
+          collection: {
+            items
+          },
+          isLoadMoreVisible: false,
+          config
+        },
+        componentName
+      }
+    ];
+
+    setComponents(updatedCompList);
+  };
+
+  if (!showButton) return null;
+
+  /* TODO: !HACK! Remove this line post deployment */
+  const componentStyles = (componentName) => (componentName === "ArrowOneColStoryList" ? { marginLeft: 0 } : {});
+
+  return (
+    <>
+      {components.map(({ Component, props }, index) => (
+        <div style={{ maxWidth: 1172, margin: "auto" }} key={`extendedLoadMoreBase-key-${index}`}>
+          <Suspense fallback={<div>Loading...</div>}>
+            <Component {...props} />
+          </Suspense>
+        </div>
+      ))}
+      <div
+        className="arr--button"
+        styleName={`button ${textColor} default`}
+        style={componentStyles(componentName)}
+        onClick={addComponent}>
+        {btnText}
+      </div>
+    </>
+  );
+};
+
+ExtendedLoadMore.propTypes = {
+  componentName: PropTypes.string,
+  config: PropTypes.object,
+  WithArrowConfig: PropTypes.func,
+  withSubsequentLoad: PropTypes.func
+};

package/src/components/Atoms/FallbackImage/fallback.m.css

@@ -0,0 +1,33 @@
+.image-position {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+
+.image {
+  composes: image-position;
+  background: var(--fallback-img);
+}
+
+.image::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent 50%, transparent); */
+}
+
+.fallback-svg svg {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 100%;
+}

package/src/components/Atoms/FallbackImage/index.js

@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { ImageFallbackIcon } from "../../Svgs/fallbackImage";
+import { Link } from "@quintype/components";
+
+import "./fallback.m.css";
+
+const imageFallback = (roundedCorners, fallBackImageUrl) => {
+  const imageClassName = roundedCorners ? `arr--fallback-image ${roundedCorners}` : "arr--fallback-image";
+
+  return (
+    <div styleName="image" className={imageClassName}>
+      <figure styleName="fallback-svg" className="arr--fallback-svg">
+        {fallBackImageUrl ? (
+          <img src={fallBackImageUrl} data-src={fallBackImageUrl} alt="image-fallback" />
+        ) : (
+          <ImageFallbackIcon />
+        )}
+      </figure>
+    </div>
+  );
+};
+
+export const FallbackImage = ({ slug, roundedCorners = "", fallBackImageUrl }) => {
+  if (slug) {
+    return (
+      <Link href={slug} aria-label="image-fallback">
+        {imageFallback(roundedCorners, fallBackImageUrl)}
+      </Link>
+    );
+  } else {
+    return imageFallback(roundedCorners, fallBackImageUrl);
+  }
+};
+
+FallbackImage.propTypes = {
+  slug: PropTypes.string,
+  roundedCorners: PropTypes.string
+};

package/src/components/Atoms/Headline/README.md

@@ -0,0 +1,7 @@
+# Headline
+
+## Usage 
+```jsx
+<Headline story={story} headerLevel={1} />
+```
+<!-- PROPS -->

package/src/components/Atoms/Headline/headline.m.css

@@ -0,0 +1,67 @@
+@custom-media --viewport-medium (width >=768px);
+
+.wrapper {
+  margin-bottom: 6px;
+}
+
+.headline {
+  margin-bottom: var(--arrow-spacing-xxs);
+  color: var(--arrow-c-mono2);
+  font-weight: var(--arrow-fw-semi-bold);
+
+  @media (--viewport-medium) {
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.wrapper .headline {
+  display: inline;
+  margin-bottom: var(--arrow-spacing-xs);
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.live-icon::before {
+  content: "\25C9";
+  position: relative;
+  font-size: var(--arrow-fs-s);
+  color: var(--arrow-c-accent3);
+  animation: blink 1s linear infinite;
+  margin-right: var(--arrow-spacing-xs);
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+html[dir="rtl"] {
+  .live-icon::before {
+    margin-right: 0;
+    margin-left: var(--arrow-spacing-xs);
+  }
+}

package/src/components/Atoms/Headline/index.js

@@ -0,0 +1,112 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { Link } from "@quintype/components";
+import { useStateValue } from "../../SharedContext";
+import get from "lodash.get";
+import { getTextColor, isExternalStory, getStoryUrl, getTheme } from "../../../utils/utils";
+import { PremiumStoryIcon } from "../PremiumStoryIcon";
+
+import "./headline.m.css";
+
+export const Headline = ({
+  story,
+  headerLevel,
+  premiumStoryIconConfig = {},
+  isLink,
+  queryParam = {},
+  layout,
+  enableDarkModePreview = false
+}) => {
+  const configData = useStateValue() || {};
+  const {
+    darkIconColor = "#F7B500",
+    iconColor = "#F7B500",
+    iconStyle = "star",
+    enablePremiumStoryIcon = false
+  } = premiumStoryIconConfig;
+  const alternateHeadline = get(story, ["alternative", "home", "default", "headline"]);
+  const premiumStory = enablePremiumStoryIcon && get(story, ["access"]) === "subscription";
+  const headline = alternateHeadline || story.headline;
+  const HeaderTag = "h" + headerLevel;
+  const enableDarkMode = useSelector((state) => get(state, ["header", "isDarkModeEnabled"], false));
+
+  const positionHeadline = () => {
+    switch (parseInt(headerLevel)) {
+      case 1:
+        return "-2px";
+      case 2:
+        return "2px";
+      case 3:
+        return "4px";
+      case 4:
+        return "5px";
+      default:
+        return "6px";
+    }
+  };
+  const theme = getTheme(configData, layout, enableDarkModePreview);
+  const textColor = getTextColor(theme);
+  const newIconColor = enableDarkMode ? darkIconColor : iconColor;
+
+  const iconSize = "24px";
+  const getLiveIconConfig = useSelector((state) => get(state, ["qt", "data", "showLiveIcon"], false));
+  const showLiveIcon = get(premiumStoryIconConfig, ["showLiveIcon"], getLiveIconConfig);
+  const enableLiveIcon =
+    showLiveIcon && story["story-template"] === "live-blog" && !get(story, ["metadata", "is-closed"], false);
+  const liveIconStyle = premiumStory ? { position: "relative", top: positionHeadline() } : {};
+  const wrapperClass = premiumStory || enableLiveIcon ? "wrapper" : "";
+
+  return (
+    <div className="arrow-component arr--headline" styleName={wrapperClass} data-test-id="headline">
+      {(enableLiveIcon || premiumStory) && (
+        <span styleName="icon-wrapper">
+          {premiumStory && (
+            <PremiumStoryIcon
+              width={iconSize}
+              height={iconSize}
+              color={newIconColor}
+              iconType={iconStyle}
+              positionTop={positionHeadline()}
+            />
+          )}
+          {enableLiveIcon && <span style={liveIconStyle} styleName="live-icon"></span>}
+        </span>
+      )}
+      {isLink ? (
+        <Link
+          href={getStoryUrl(story, `/${story.slug}`, queryParam)}
+          externalLink={isExternalStory(story)}
+          aria-label="headline">
+          <HeaderTag styleName={`headline ${textColor}`}>{headline}</HeaderTag>
+        </Link>
+      ) : (
+        <HeaderTag styleName={`headline ${textColor}`}>{headline}</HeaderTag>
+      )}
+    </div>
+  );
+};
+
+Headline.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+  /** Header tags ranging h1-h6, where h[headerLevel] */
+  headerLevel: PropTypes.string,
+  premiumStoryIconConfig: PropTypes.shape({
+    iconColor: PropTypes.string,
+    iconType: PropTypes.string,
+    enablePremiumStoryIcon: PropTypes.bool
+  }),
+  isLink: PropTypes.bool,
+  queryParam: PropTypes.shape({
+    utmContent: PropTypes.string
+  }),
+  layout: PropTypes.string,
+  enableDarkModePreview: PropTypes.bool
+};
+
+Headline.defaultProps = {
+  headerLevel: "6",
+  isLink: true,
+  layout: ""
+};

package/src/components/Atoms/Headline/stories.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { optionalSelect, withStore } from "../../../../storybook";
+
+import { Headline } from "./index";
+import Readme from "./README.md";
+import { boolean, color } from "@storybook/addon-knobs";
+
+const story = generateStory();
+
+const headerLevelOptions = {
+  "No Value": "",
+  h1: 1,
+  h2: 2,
+  h3: 3,
+  h4: 4,
+  h5: 5,
+  h6: 6
+};
+
+const iconType = {
+  Star: "star",
+  Crown: "crown",
+  Lock: "lock",
+  Key: "key"
+};
+
+withStore(
+  "Atoms/Headline",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+).add(
+  "default",
+  () => (
+    <Headline
+      story={story}
+      headerLevel={optionalSelect("Header level", headerLevelOptions)}
+      premiumStoryIconConfig={{
+        iconColor: color("Icon color", "#F7B500"),
+        iconStyle: optionalSelect("Icon Types", iconType),
+        enablePremiumStoryIcon: boolean("Enable Premium Icon", true)
+      }}
+    />
+  ),
+  Readme
+);

package/src/components/Atoms/HeroImage/README.md

@@ -0,0 +1,13 @@
+# HeroImage
+Displays the Hero Image for a story with the help of the `ResponsiveHeroImage` component from the `@quintype/components` package.
+
+## Usage
+```jsx
+<HeroImage story={story} />
+```
+
+```jsx
+<HeroImage story={story} FullBleed={false} />
+```
+
+<!-- PROPS -->