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

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

@@ -0,0 +1,61 @@
+import React from "react";
+import { LazyLoadImages, ResponsiveImage, Link } from "@quintype/components";
+import PropTypes from "prop-types";
+import get from "lodash.get";
+import { getSlug } from "../../../utils/utils";
+import "./magazine-cover-image.m.css";
+import { FallbackImage } from "../FallbackImage";
+
+export const MagazineCoverImageCard = ({ collection, config = {} }) => {
+  const imgAltText = get(collection, ["metadata", "magazine", "name"], "cover-image");
+  const coverImageData = get(collection, ["metadata", "cover-image"]) || {};
+  const { magazineSlug = "" } = config;
+  const {
+    "cover-image-url": coverUrl,
+    "cover-image-s3-key": covers3Key,
+    "cover-image-metadata": coverImageMetaData
+  } = coverImageData;
+
+  const slug = magazineSlug && collection && getSlug(collection, config);
+
+  return (
+    <div className="arr--magazine-cover-img" styleName="cover-image">
+      {covers3Key || coverUrl ? (
+        <figure styleName="image">
+          {covers3Key ? (
+            <Link href={slug} aria-label="magazine-cover-image">
+              <LazyLoadImages>
+                <ResponsiveImage
+                  slug={covers3Key}
+                  aspectRatio={[1, 2]}
+                  metadata={{ coverImageMetaData }}
+                  defaultWidth={400}
+                  imgParams={{ auto: ["format", "compress"] }}
+                  alt={imgAltText}
+                />
+              </LazyLoadImages>
+            </Link>
+          ) : (
+            <img src={coverUrl} alt="cover-image" loading="lazy" />
+          )}
+        </figure>
+      ) : (
+        <div styleName="fallback-img">
+          <FallbackImage slug={slug} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+MagazineCoverImageCard.propTypes = {
+  collection: PropTypes.shape({
+    "cover-image-url": PropTypes.string,
+    "cover-image-s3-key": PropTypes.string,
+    "cover-image-metadata": PropTypes.string,
+    slug: PropTypes.string
+  }),
+  config: PropTypes.shape({
+    magazineSlug: PropTypes.string
+  })
+};

package/src/components/Atoms/MagazineCoverImage/magazine-cover-image.m.css

@@ -0,0 +1,24 @@
+.cover-image {
+  position: relative;
+}
+
+.cover-image figure.image {
+  padding-top: 138%;
+}
+
+.image {
+  position: relative;
+}
+
+.image img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+}
+
+.fallback-img {
+  padding-top: 138%;
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { MagazineCoverImageCard } from "./index";
+import Readme from "./README.md";
+import { generateCollection } from "../../Fixture";
+import { config } from "@storybook/addon-actions";
+
+const collection = generateCollection({ stories: 4 });
+
+withStore(
+  "Atoms/Magazine CoverImage",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+).add("MagazineCoverImage", () => <MagazineCoverImageCard collection={collection} config={config} />);

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

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { CrownIcon } from "../../Svgs/crown";
+import { KeyIcon } from "../../Svgs/key";
+import { LockIcon } from "../../Svgs/lock";
+import { StarIcon } from "../../Svgs/star";
+
+export const PremiumStoryIcon = ({ width, height, color, iconType, positionTop }) => {
+  switch (iconType) {
+    case "crown":
+      return <CrownIcon width={width} height={height} color={color} positionTop={positionTop} />;
+    case "lock":
+      return <LockIcon width={width} height={height} color={color} positionTop={positionTop} />;
+    case "key":
+      return <KeyIcon width={width} height={height} color={color} positionTop={positionTop} />;
+    default:
+      return <StarIcon width={width} height={height} color={color} positionTop={positionTop} />;
+  }
+};
+
+PremiumStoryIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string,
+  iconType: PropTypes.string,
+  positionTop: PropTypes.string
+};

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

@@ -0,0 +1,15 @@
+# Publish Details
+
+Component to display the publish details for the story card.
+
+## Usage
+
+```jsx
+<PublishDetails story={story} />
+```
+
+```jsx
+<PublishDetails story={story} opts={{ showReadTime: true, enableUpdatedTime: true, enablePublishedTime: false, localizedPublishedOn: "ಪ್ರಕಟಿಸಲಾಗಿದೆ", localizedUpdatedOn: "ನವೀಕರಿಸಲಾಗಿದೆ" }} />
+
+<!-- PROPS -->
+```

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

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { getTextColor, getTimeStamp, timestampToFormat } from "../../../utils/utils";
+import { ReadTime } from "../ReadTime";
+
+import "./publish-details.m.css";
+import { useStateValue } from "../../SharedContext";
+
+export const PublishDetails = ({ story, opts = {} }) => {
+  const [direction, setDirection] = useState("ltr");
+  useEffect(() => {
+    const htmlElement = document.getElementsByTagName("HTML");
+    if (htmlElement && htmlElement.length > 0 && htmlElement[0].dir.toLocaleLowerCase() === "rtl") {
+      setDirection("rtl");
+    }
+  }, []);
+
+  const config = useStateValue() || {};
+  const { "first-published-at": firstPublishAt, "last-published-at": lastPublish, "updated-at": updatedAt } = story;
+  const { enableUpdatedTime, enablePublishedTime, showReadTime, localizedPublishedOn, localizedUpdatedOn } = opts;
+  const time = lastPublish || firstPublishAt;
+  const textColor = getTextColor(config.theme);
+  const timeStampProps =
+    direction === "rtl"
+      ? { ...opts, direction: direction, isTimeFirst: true, showTime: true }
+      : { ...opts, direction: direction, showTime: true };
+
+  return (
+    <div data-test-id="timeStamp" className="arrow-component arr-publish-details" styleName={`timeStamp ${textColor}`}>
+      <div data-test-id="publishDetails" styleName={`publish-details ${textColor}`}>
+        {enablePublishedTime && (
+          <>
+            {localizedPublishedOn || "Published on"} :&nbsp;
+            <div styleName="date">{getTimeStamp(time, timestampToFormat, timeStampProps)}</div>
+            {showReadTime && <ReadTime story={story} opts={opts} />}
+          </>
+        )}
+      </div>
+      {enableUpdatedTime && (
+        <div data-test-id="updateDetails" styleName={`update-details ${textColor}`}>
+          {localizedUpdatedOn || "Updated on"} :&nbsp;
+          <div styleName="date">{getTimeStamp(updatedAt, timestampToFormat, timeStampProps)}</div>
+          {showReadTime && <ReadTime story={story} opts={opts} />}
+        </div>
+      )}
+    </div>
+  );
+};
+
+PublishDetails.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.shape({
+    "first-published-at": PropTypes.number,
+    "last-published-at": PropTypes.number,
+    "read-time": PropTypes.number,
+    "updated-at": PropTypes.number
+  }),
+  opts: PropTypes.shape({
+    showReadTime: PropTypes.bool,
+    enableUpdatedTime: PropTypes.bool,
+    enablePublishedTime: PropTypes.bool
+  })
+};

package/src/components/Atoms/PublishDetail/publish-details.m.css

@@ -0,0 +1,47 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.timeStamp {
+  font-size: var(--arrow-fs-tiny);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-xs);
+  }
+}
+
+.timeStamp.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.timeStamp.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.publish-details {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+
+.update-details {
+  display: flex;
+  margin-top: var(--arrow-spacing-xs);
+}
+.dot-indicator {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--arrow-spacing-xs);
+}
+
+.timeStamp :global(.arr--read-time) {
+  font-size: var(--arrow-fs-tiny);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-xs);
+  }
+}
+
+.date.dark {
+  color: var(--arrow-c-mono2);
+}
+.date.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/src/components/Atoms/PublishDetail/publish-details.test.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import expect from "expect";
+import { generateStory } from "../../Fixture/index";
+import { PublishDetails } from "./index";
+
+const story = generateStory();
+
+describe("default author card", () => {
+  it("Should render default publish details componen", () => {
+    const wrapper = mount(<PublishDetails story={story} />);
+    expect(wrapper.find({ "data-test-id": "timeStamp" }).prop("className")).toMatch(/timeStamp/);
+  });
+  it("Should render without updated time", () => {
+    const wrapper = mount(<PublishDetails story={story} opts={{ enableUpdatedTime: false }} />);
+    expect(wrapper.find({ "data-test-id": "update-details" }).length).toEqual(0);
+  });
+  it("Should render without read time", () => {
+    const wrapper = mount(<PublishDetails story={story} opts={{ showReadTime: false }} />);
+    expect(wrapper.find({ "data-test-id": "read-time" }).length).toEqual(0);
+  });
+});

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import { PublishDetails } from "./index";
+import { boolean, text } from "@storybook/addon-knobs";
+import Readme from "./README.md";
+
+const story = generateStory();
+
+withStore("Atoms/Publish Details", {}, Readme).add("Default", () => (
+  <PublishDetails
+    story={story}
+    opts={{
+      showReadTime: boolean("Show read Time", true),
+      enableUpdatedTime: boolean("Enable Update Time", true),
+      enablePublishedTime: boolean("Enable Published Time", true),
+      localizedPublishedOn: text("Localise Published On", "ಪ್ರಕಟಿಸಲಾಗಿದೆ"),
+      localizedUpdatedOn: text("Localise Updated On", "ನವೀಕರಿಸಲಾಗಿದೆ")
+    }}
+  />
+));

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

@@ -0,0 +1,13 @@
+# Read Time
+
+Component to display the read time for the story card.
+
+## Usage
+
+```jsx
+<ReadTime story={story} />
+```
+
+```jsx
+<ReadTime story={story} opts={{ showReadTime: true }} />
+```

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

@@ -0,0 +1,44 @@
+import get from "lodash.get";
+import React from "react";
+import PropTypes from "prop-types";
+import { getTextColor } from "../../../utils/utils";
+import { useStateValue } from "../../SharedContext";
+import "./read-time.m.css";
+import { Dot } from "../Dot/dot";
+
+export const ReadTime = ({ story, opts = {}, isLightTheme = false }) => {
+  const config = useStateValue() || {};
+  const showReadTime = get(config, ["showReadTime"]) || get(opts, ["showReadTime"], true);
+  const readTime = get(story, ["read-time"], 0);
+  const textColor = isLightTheme ? "light" : getTextColor(config.theme);
+
+  if (!showReadTime || !readTime) return null;
+
+  const timeToRead = get(opts, ["localizedTimeToRead"]) || "min read";
+
+  return (
+    <>
+      <div
+        className="arrow-component arr--read-time"
+        styleName={`read-time-wrapper ${textColor}`}
+        data-test-id="read-time">
+        <span styleName="dot-indicator" className="read-time-indicator">
+          <Dot color={textColor} />
+        </span>
+        <span>
+          {readTime} {timeToRead}
+        </span>
+      </div>
+    </>
+  );
+};
+
+ReadTime.propTypes = {
+  story: PropTypes.shape({
+    "read-time": PropTypes.number
+  }),
+  opts: PropTypes.shape({
+    showReadTime: PropTypes.bool
+  }),
+  isLightTheme: PropTypes.bool
+};

package/src/components/Atoms/ReadTime/read-time.m.css

@@ -0,0 +1,25 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.read-time-wrapper {
+  display: flex;
+  font-size: var(--arrow-fs-tiny);
+  line-height: var(--arrow-lh-2);
+}
+
+.dot-indicator {
+  padding: 0 var(--arrow-spacing-xs) var(--arrow-spacing-xs);
+}
+
+.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+html[dir="rtl"] {
+  .read-time-wrapper {
+    margin-right: var(--arrow-spacing-xs);
+  }
+}

package/src/components/Atoms/ReadTime/read-time.test.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import expect from "expect";
+import { generateStory } from "../../Fixture/index";
+import { ReadTime } from "./index";
+
+const story = generateStory();
+
+describe("Read time", () => {
+  it("Should render read time component", () => {
+    const wrapper = mount(<ReadTime story={story} opts={{ showReadTime: true }} />);
+    expect(wrapper.find({ "data-test-id": "read-time" }).prop("className")).toMatch(/read-time-wrapper/);
+  });
+  it("Should not render read time if showReadTime is false", () => {
+    const wrapper = mount(<ReadTime opts={{ showReadTime: false }} />);
+    expect(wrapper.find({ "data-test-id": "read-time" }).length).toEqual(0);
+  });
+});

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import { ReadTime } from "./index";
+import Readme from "./README.md";
+import { boolean } from "@storybook/addon-knobs";
+
+const story = generateStory();
+
+withStore("Atoms/Read Time", {}, Readme).add("default", () => {
+  return (
+    <ReadTime
+      story={story}
+      opts={{
+        showReadTime: boolean("Show Read Time", true)
+      }}
+    />
+  );
+});

package/src/components/Atoms/ScrollSnap/SliderArrow/index.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { number, string, func } from "prop-types";
+
+import { getTextColor } from "../../../../utils/utils";
+import { LeftArrow } from "../../../Svgs/left-arrow";
+import { RightArrow } from "../../../Svgs/right-arrow";
+import { useStateValue } from "../../../SharedContext";
+
+import "./slider-arrow.m.css";
+
+export const SliderArrow = ({ selectedIndex, previousClick, nextClick, noOfItems, perView, languageDirection }) => {
+  if (noOfItems < 1) {
+    return null;
+  }
+
+  const config = useStateValue() || {};
+  const textColor = getTextColor(config.theme);
+
+  const rightArrowView = () => {
+    if (selectedIndex >= noOfItems - perView) return false;
+    return true;
+  };
+
+  const getLeftArrowClassName = languageDirection === "rtl" ? "left-arrow-rtl" : "left-arrow-ltr";
+  const getRightArrowClassName = languageDirection === "rtl" ? "right-arrow-rtl" : "right-arrow-ltr";
+  return (
+    <>
+      {selectedIndex !== 0 ? (
+        <button
+          onClick={previousClick}
+          styleName={`arrow left-arrow-${textColor} ${getLeftArrowClassName}`}
+          className={`left-arrow ${getLeftArrowClassName}`}>
+          <LeftArrow color={textColor === "dark" ? "#fff" : "#333"} />
+        </button>
+      ) : null}
+
+      {selectedIndex < noOfItems - 1 && rightArrowView() ? (
+        <button
+          onClick={nextClick}
+          styleName={`arrow right-arrow-${textColor} ${getRightArrowClassName}`}
+          className={`right-arrow ${getRightArrowClassName}`}>
+          <RightArrow color={textColor === "dark" ? "#fff" : "#333"} />
+        </button>
+      ) : null}
+    </>
+  );
+};
+
+SliderArrow.propTypes = {
+  noOfItems: number,
+  perView: number,
+  slideIndicator: string,
+  previousClick: func,
+  nextClick: func,
+  selectedIndex: number,
+  languageDirection: string
+};

package/src/components/Atoms/ScrollSnap/SliderArrow/slider-arrow.m.css

@@ -0,0 +1,45 @@
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  background-color: var(--arrow-c-light);
+  opacity: 0.8;
+  padding: var(--arrow-spacing-l) var(--arrow-spacing-s);
+  border: none;
+  border-radius: 0;
+  @media only screen and (max-width: 767px) {
+    top: calc(25% + 40px);
+  }
+}
+
+.left-arrow-dark,
+.right-arrow-dark {
+  background-color: var(--arrow-c-dark);
+}
+.left-arrow-light,
+.right-arrow-light {
+  background-color: var(--arrow-c-light);
+}
+
+.left-arrow-ltr {
+  left: 0;
+}
+
+.right-arrow-ltr {
+  right: 0;
+}
+
+.left-arrow-rtl {
+  right: 0;
+  left: unset;
+}
+.left-arrow-rtl svg,
+.right-arrow-rtl svg {
+  transform: rotate(180deg);
+}
+
+.right-arrow-rtl {
+  left: 0;
+  right: unset;
+}

package/src/components/Atoms/ScrollSnap/SliderIndicator/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { array, number, string, func } from "prop-types";
+
+import { getTextColor } from "../../../../utils/utils";
+import { useStateValue } from "../../../SharedContext";
+
+import "./slider-indicator.m.css";
+
+export const SliderIndicator = ({ indicatorItems, indicatorClick, selectedIndex, indicatorType }) => {
+  if (indicatorItems.length < 1) {
+    return null;
+  }
+
+  const config = useStateValue() || {};
+  const textColor = getTextColor(config.theme);
+
+  return (
+    <ul styleName="indicators" className="slider-indicators">
+      {indicatorItems.map((_, index) => (
+        <li
+          key={`slider-${index}`}
+          styleName="indicator"
+          className="indicator"
+          onClick={(e) => indicatorClick(e, index)}>
+          <button
+            styleName={`indicator-button indicator-${indicatorType} indicator-${indicatorType}-${textColor}`}
+            className={`indicator-button indicator-${indicatorType}`}
+            aria-pressed={selectedIndex === index ? "true" : "false"}></button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+SliderIndicator.propTypes = {
+  indicatorItems: array,
+  perView: number,
+  indicatorType: string,
+  indicatorClick: func,
+  selectedIndex: number
+};

package/src/components/Atoms/ScrollSnap/SliderIndicator/slider-indicator.m.css

@@ -0,0 +1,71 @@
+.indicators {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  list-style: none;
+  font-family: var(--arrow-typeface-secondary);
+  cursor: pointer;
+  line-height: 0;
+}
+
+.indicator {
+  margin: var(--arrow-spacing-xs) 0;
+  padding: 4px;
+}
+
+.indicator-button {
+  background: none;
+  border: none;
+  overflow: hidden;
+  padding: var(--arrow-spacing-s) var(--arrow-spacing-xxs);
+  cursor: pointer;
+}
+
+.indicator-dots {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--arrow-c-dark);
+  border: 1px solid var(--arrow-c-dark);
+  padding: 0;
+  opacity: 0.25;
+}
+
+.indicator-dots-dark[aria-pressed="true"] {
+  background-color: var(--arrow-c-dark);
+  opacity: 1;
+}
+
+.indicator-dots-light {
+  background-color: var(--arrow-c-light);
+  border-color: var(--arrow-c-light);
+}
+
+.indicator-dots-light[aria-pressed="true"] {
+  background-color: var(--arrow-c-light);
+  opacity: 1;
+}
+
+.indicator-dashes {
+  display: inline-block;
+  width: var(--arrow-spacing-s);
+  height: 2px;
+  padding: 0;
+}
+.indicator-dashes-dark {
+  opacity: 0.25;
+  background-color: var(--arrow-c-dark);
+}
+.indicator-dashes-light {
+  opacity: 0.25;
+  background-color: var(--arrow-c-light);
+}
+
+.indicator-dashes-dark[aria-pressed="true"] {
+  background-color: var(--arrow-c-dark);
+  opacity: 1;
+}
+.indicator-dashes-light[aria-pressed="true"] {
+  background-color: var(--arrow-c-light);
+  opacity: 1;
+}