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

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,30 @@
+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 = () => (
+  <div styleName="image" className="arr--fallback-image">
+    <figure styleName="fallback-svg" className="arr--fallback-svg">
+      <ImageFallbackIcon />
+    </figure>
+  </div>
+);
+
+export const FallbackImage = ({ slug }) => {
+  if (slug) {
+    return (
+      <Link href={slug} aria-label="image-fallback">
+        {imageFallback()}
+      </Link>
+    );
+  } else {
+    return imageFallback();
+  }
+};
+
+FallbackImage.propTypes = {
+  slug: 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,26 @@
+@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);
+}

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

@@ -0,0 +1,76 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "@quintype/components";
+import { useStateValue } from "../../SharedContext";
+import get from "lodash.get";
+import { getTextColor, isExternalStory, getStoryUrl } from "../../../utils/utils";
+
+import "./headline.m.css";
+import { PremiumStoryIcon } from "../PremiumStoryIcon";
+
+export const Headline = ({ story, headerLevel, premiumStoryIconConfig = {}, isLink }) => {
+  const configData = useStateValue() || {};
+  const { 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 positionHeadline = () => {
+    switch (parseInt(headerLevel)) {
+      case 1:
+        return "-2px";
+      case 2:
+        return "2px";
+      case 3:
+        return "4px";
+      case 4:
+        return "5px";
+      default:
+        return "6px";
+    }
+  };
+
+  const textColor = getTextColor(configData.theme);
+  const wrapperClass = premiumStory ? "wrapper" : "";
+  const iconSize = "24px";
+
+  return (
+    <div className="arrow-component arr--headline" styleName={wrapperClass} data-test-id="headline">
+      {premiumStory && (
+        <PremiumStoryIcon
+          width={iconSize}
+          height={iconSize}
+          color={iconColor}
+          iconType={iconStyle}
+          positionTop={positionHeadline()}
+        />
+      )}
+      {isLink ? (
+        <Link href={getStoryUrl(story, `/${story.slug}`)} 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
+};
+
+Headline.defaultProps = {
+  headerLevel: "6",
+  isLink: true
+};

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 -->

package/src/components/Atoms/HeroImage/hero-image.m.css

@@ -0,0 +1,71 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.hero-image {
+  margin-bottom: var(--arrow-spacing-xs);
+  padding-right: 0;
+  flex-grow: 1;
+}
+.right-padding {
+  margin-bottom: 0;
+  padding-right: var(--arrow-spacing-s);
+  flex-grow: 1;
+}
+
+.left-padding {
+  margin-bottom: 0;
+  padding-left: var(--arrow-spacing-s);
+  flex-grow: 1;
+}
+
+.right-padding-mob {
+  margin-bottom: 0;
+  padding-right: var(--arrow-spacing-s);
+  flex-grow: 1;
+  flex-basis: 30%;
+  @media (--viewport-medium) {
+    padding-right: 0;
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.placeholder {
+  background-color: lightgray;
+}
+
+html[dir="rtl"] {
+  .right-padding,
+  .right-padding-mob {
+    padding-right: 0;
+    padding-left: var(--arrow-spacing-s);
+  }
+
+  .right-padding-mob {
+    @media (--viewport-medium) {
+      padding-left: 0;
+    }
+  }
+}
+
+.hero-image-mob {
+  margin-bottom: var(--arrow-spacing-xs);
+  padding-right: 0;
+  flex-grow: 1;
+  @media (--viewport-medium) {
+    /* margin-bottom: 0; */
+  }
+}
+.with-padding {
+  padding: 16px 16px 0 16px;
+}
+
+.image {
+  position: relative;
+}
+.image img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+}

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

@@ -0,0 +1,165 @@
+import { Link, ResponsiveHeroImage, ResponsiveImage } from "@quintype/components";
+import get from "lodash.get";
+import PropTypes from "prop-types";
+import React from "react";
+import { useSelector } from "react-redux";
+import { clientWidth, isExternalStory, getStoryUrl } from "../../../utils/utils";
+import { useStateValue } from "../../SharedContext";
+import { FallbackImage } from "../FallbackImage";
+import "./hero-image.m.css";
+
+export const HeroImage = ({
+  story,
+  FullBleed,
+  aspectRatio,
+  defaultWidth,
+  widths,
+  isHorizontal,
+  isHorizontalMobile,
+  isHorizontalWithImageLast,
+  defaultFallback,
+  isStoryPageImage
+}) => {
+  const { fallbackImageUrl = "" } = useStateValue() || {};
+
+  const showImagePlaceholder = useSelector((state) => get(state, ["qt", "config", "showPlaceholder"]));
+  const getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
+
+  const fullBleed = FullBleed ? "" : "with-padding";
+
+  let heroImageClass = "hero-image";
+  if (isHorizontal) heroImageClass = "right-padding";
+  else if (isHorizontalWithImageLast) heroImageClass = "left-padding";
+
+  const heroImageMobClasses = isHorizontalMobile ? "right-padding-mob" : "";
+
+  const getPadding = (aspectRatio) => {
+    const [height, width] = aspectRatio;
+    if (height > 0 && width > 0) {
+      const padding = (width / height) * 100;
+      return padding;
+    }
+    return 0;
+  };
+
+  const [mobileAspectRatio, desktopAspectRatio = mobileAspectRatio] = aspectRatio;
+  const isMobile = clientWidth("mobile");
+
+  const imageAspectRatio = isMobile ? mobileAspectRatio : desktopAspectRatio;
+  const imagePadding = isMobile ? getPadding(mobileAspectRatio) : getPadding(desktopAspectRatio);
+  const slug =
+    get(story, ["hero-image-s3-key"]) ||
+    get(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
+
+  const fallbackImage = () => {
+    if (!slug) {
+      if (fallbackImageUrl) {
+        return (
+          <figure
+            styleName={`image ${getPlaceholderStyleName}`}
+            className="arr--responsive-hero-image"
+            style={{
+              paddingTop: imagePadding + `%`
+            }}>
+            <ResponsiveImage
+              slug={!isStoryPageImage && fallbackImageUrl}
+              metadata={{}}
+              aspect-ratio={imageAspectRatio}
+              defaultWidth={defaultWidth}
+              widths={widths}
+              imgParams={{ auto: ["format", "compress"], fit: "max" }}
+              className=""
+              alt={"image-fallback"}
+            />
+          </figure>
+        );
+      }
+
+      return (
+        <>
+          {defaultFallback ? (
+            <div
+              styleName={`image ${getPlaceholderStyleName}`}
+              className="arr--fallback-hero-image"
+              data-test-id="arr--fallback-hero-image"
+              style={{
+                paddingTop: imagePadding + `%`
+              }}>
+              <FallbackImage />
+            </div>
+          ) : null}
+        </>
+      );
+    }
+    return (
+      <figure
+        styleName={`image ${getPlaceholderStyleName}`}
+        className="arr--responsive-hero-image"
+        style={{ paddingTop: imagePadding + `%` }}>
+        <ResponsiveHeroImage
+          story={story}
+          aspectRatio={imageAspectRatio}
+          defaultWidth={defaultWidth}
+          widths={widths}
+          imgParams={{ auto: ["format", "compress"], fit: "max" }}
+        />
+      </figure>
+    );
+  };
+
+  return (
+    story &&
+    (isStoryPageImage ? (
+      <div
+        className="arr--hero-image"
+        data-test-id="arr--hero-image"
+        styleName={`${heroImageClass} ${fullBleed} ${heroImageMobClasses}`}>
+        {fallbackImage()}
+      </div>
+    ) : (
+      <Link
+        className="arr--hero-image"
+        data-test-id="arr--hero-image"
+        href={getStoryUrl(story, `/${story.slug}`)}
+        externalLink={isExternalStory(story)}
+        styleName={`${heroImageClass} ${fullBleed} ${heroImageMobClasses}`}
+        aria-label="fallback-hero-image">
+        {fallbackImage()}
+      </Link>
+    ))
+  );
+};
+
+HeroImage.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+  /** Removes the Hero Image padding for the image to bleed over the margin */
+  FullBleed: PropTypes.bool,
+  /** The default width for the image, in case the browser does not support srcset */
+  defaultWidth: PropTypes.number,
+  /** The list of available widths */
+  widths: PropTypes.array,
+  // fatch the correct hero image
+  aspectRatio: PropTypes.array,
+
+  //  Hints for the browser to choose the best size
+  /** This prop is responsible for adding padding-right of the image and remove padding bottom of the image  */
+  isHorizontal: PropTypes.bool,
+  /** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
+  isHorizontalMobile: PropTypes.bool,
+  // this prop is responsive for rendering fallback image on story page
+  defaultFallback: PropTypes.bool,
+  isHorizontalWithImageLast: PropTypes.bool
+};
+
+HeroImage.defaultProps = {
+  FullBleed: true,
+  aspectRatio: [[1, 1], [16, 9]],
+  defaultWidth: 480,
+  widths: [250, 480, 640],
+  isHorizontal: false,
+  isHorizontalMobile: false,
+  defaultFallback: true,
+  isStoryPageImage: false,
+  isHorizontalWithImageLast: false
+};

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { HeroImage } from "./index";
+import Readme from "./README.md";
+
+import { withStore } from "../../../../storybook";
+
+const story = generateStory();
+
+withStore(
+  "Atoms/Hero Image",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+)
+  .add("Full Bleed Image", () => <HeroImage story={story} />)
+  .add("With Padding Image", () => <HeroImage story={story} FullBleed={false} aspectRatio={[[1, 1], [16, 9]]} />);

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

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const LoadMoreTarget = ({ collection, componentName, offset, limit }) => {
+  return (
+    <div
+      id={`ELM-${collection.id}`}
+      data-collection-slug={collection["slug"]}
+      data-component-name={componentName}
+      data-collection-offset={offset}
+      data-collection-limit={limit}
+    />
+  );
+};
+
+LoadMoreTarget.propTypes = {
+  collection: PropTypes.shape({
+    id: PropTypes.string,
+    slug: PropTypes.string
+  }),
+  componentName: PropTypes.string,
+  offset: PropTypes.number,
+  limit: PropTypes.number
+};

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Load more button Should render button and load items subsequently with SubsequentLoadCount as template property. 1`] = `
+<div
+  className="arr--button load-more-m_button__1mmf1 load-more-m_dark__3dfzb load-more-m_default__2_k4V"
+  data-test-id="load-more"
+>
+  Read More
+</div>
+`;
+
+exports[`Load more button Should render button and navigate to the corresponding url with NavigateToPage as template property. 1`] = `
+<a
+  aria-label="load-more"
+  data-test-id="load-more"
+  href="/"
+  onClick={[Function]}
+>
+  <div
+    className="arr--button load-more-m_button__1mmf1 load-more-m_dark__3dfzb load-more-m_default__2_k4V"
+  >
+    Read More
+  </div>
+</a>
+`;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { LinkBase } from "@quintype/components";
+import PropTypes from "prop-types";
+import { getTextColor, generateNavigateSlug } from "../../../utils/utils";
+import "./load-more.m.css";
+
+export const LoadmoreButton = ({
+  config = {},
+  collection,
+  template = "SubsequentLoadCount",
+  onClick,
+  navigate,
+  qtConfig
+}) => {
+  const { showButton = true, buttonText = "Read More", theme = "", customUrlPath = "" } = config;
+  if (!showButton) return null;
+
+  const textColor = getTextColor(theme);
+  const slug = customUrlPath ? `/${customUrlPath}` : generateNavigateSlug(collection, { ...qtConfig, ...config });
+
+  return template === "SubsequentLoadCount" ? (
+    <div className="arr--button" styleName={`button ${textColor} default`} onClick={onClick} data-test-id="load-more">
+      {buttonText}
+    </div>
+  ) : (
+    <LinkBase href={slug} navigateTo={navigate} data-test-id="load-more" aria-label="load-more">
+      <div className="arr--button" styleName={`button ${textColor} default`}>
+        {buttonText}
+      </div>
+    </LinkBase>
+  );
+};
+
+LoadmoreButton.propTypes = {
+  collection: PropTypes.object,
+  template: PropTypes.string,
+  config: PropTypes.object,
+  onClick: PropTypes.func,
+  navigate: PropTypes.func,
+  qtConfig: PropTypes.object
+};

package/src/components/Atoms/Loadmore/load-more.m.css

@@ -0,0 +1,23 @@
+.button {
+  padding: var(--arrow-spacing-xs) var(--arrow-spacing-l);
+  border: 1px solid;
+  display: flex;
+  margin: var(--arrow-spacing-m) auto var(--arrow-spacing-xs) auto;
+  font-size: var(--arrow-fs-xs);
+  border-radius: var(--arrow-spacing-xxs);
+  background-color: transparent;
+  width: fit-content;
+  cursor: pointer;
+}
+
+.default {
+  display: block;
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/src/components/Atoms/Loadmore/load-more.test.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import renderer from "react-test-renderer";
+import { LoadmoreButton } from "./index";
+import { Provider } from "react-redux";
+import { generateStore, generateCollection } from "../../Fixture";
+
+const collection = generateCollection();
+
+describe("Load more button", () => {
+  it("Should render button and load items subsequently with SubsequentLoadCount as template property.", () => {
+    const wrapper = renderer
+      .create(
+        <Provider store={generateStore}>
+          <LoadmoreButton template="SubsequentLoadCount" collection={collection} />
+        </Provider>
+      )
+      .toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("Should render button and navigate to the corresponding url with NavigateToPage as template property.", () => {
+    const wrapper = renderer
+      .create(
+        <Provider store={generateStore}>
+          <LoadmoreButton template="NavigateToPage" collection={collection} />
+        </Provider>
+      )
+      .toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { withStore, optionalSelect } from "../../../../storybook";
+import { LoadmoreButton } from "./index";
+import Readme from "./README.md";
+import { generateCollection } from "../../Fixture";
+
+const collection = generateCollection();
+
+const buttonOptions = {
+  NavigateToPage: "NavigateToPage",
+  SubsequentLoadCount: "SubsequentLoadCount",
+  CustomUrlPath: "CustomUrlPath"
+};
+
+withStore("Atoms/Button", {}, Readme).add("Buttons Options", () => (
+  <LoadmoreButton collection={collection} template={optionalSelect("Button Options", buttonOptions)} />
+));

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

@@ -0,0 +1,21 @@
+# MagazineCoverImage
+
+Magazine cover image is used to represent the cover of the magazine.
+
+## Usage
+
+Import the MagazineCoverImage and pass collection, props and the config.
+
+```jsx
+import { MagazineCoverImage } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+};
+<MagazineCoverImage collection={collection} config={contextConfig} >
+
+```