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

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

@@ -1,79 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { ResponsiveImage } from "@quintype/components";
-import { withElementWrapper } from "../withElementWrapper";
-import { FullScreenImages } from "../../../Molecules/FullScreenImages";
-
-import { shapeStory, shapeConfig, clientWidth } from "../../../../utils/utils";
-
-import "./image-gallery.m.css";
-import { HyperLink } from "../../Hyperlink";
-
-const ImageGalleryBase = ({ element, template = "", opts = {}, story = {}, config = {}, ...restProps }) => {
-  if (!element) return null;
-  const isMobile = clientWidth("mobile");
-  const imageArr = element["story-elements"];
-  const imageBaseOnTemp = template === "template-2" && imageArr.length;
-  const renderImageDesktop = imageBaseOnTemp > 6 ? imageArr.slice(0, 6) : imageArr;
-  const renderMobile = imageBaseOnTemp > 4 ? imageArr.slice(0, 4) : imageArr;
-  const renderImage = isMobile ? renderMobile : renderImageDesktop;
-  const classes = template === "template-2" ? "template-2" : "";
-  const hyperlinkClass = (hyperlink) => (hyperlink ? "hyperlink-gallery-image" : "");
-
-  const LeftImages = () => {
-    const imageCountDesktop = imageBaseOnTemp > 6 && imageArr.length - 6;
-    const imageCountMobile = imageBaseOnTemp > 4 && imageArr.length - 4;
-    const imageCount = isMobile ? imageCountMobile : imageCountDesktop;
-    return <div styleName="left-images">{imageCount}</div>;
-  };
-
-  const ImageGalleryImagesTemplate = ({ onClickHandler }) => {
-    const images = renderImage.map((image, index) => (
-      <div key={index} styleName={hyperlinkClass(image["hyperlink"])}>
-        <figure
-          key={index}
-          data-text-id={`image-${index}`}
-          styleName={`image ${classes}`}
-          onClick={() => onClickHandler && onClickHandler(index)}>
-          <ResponsiveImage
-            slug={image["image-s3-key"]}
-            metadata={image["image-metadata"]}
-            alt={image["title"]}
-            aspectRatio={[1, 1]}
-            defaultWidth={640}
-            imgParams={{ auto: ["format", "compress"] }}
-          />
-        </figure>
-        {image["hyperlink"] && <HyperLink hyperLink={image["hyperlink"]} />}
-      </div>
-    ));
-
-    return (
-      <div
-        styleName="image-gallery"
-        className=" arrow-component arr--image-element"
-        {...restProps}
-        data-test-id="image-gallery">
-        {images}
-      </div>
-    );
-  };
-
-  ImageGalleryImagesTemplate.propTypes = {
-    onClickHandler: PropTypes.func
-  };
-
-  return <FullScreenImages template={ImageGalleryImagesTemplate} element={element} />;
-};
-
-ImageGalleryBase.propTypes = {
-  element: PropTypes.shape({
-    "story-elements": PropTypes.array
-  }),
-  opts: PropTypes.shape({ imageWidths: PropTypes.array }),
-  story: shapeStory,
-  config: shapeConfig,
-  template: PropTypes.string
-};
-
-export const ImageGallery = withElementWrapper(ImageGalleryBase);

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

@@ -1,23 +0,0 @@
-import React from "react";
-import { withStore, optionalSelect } from "../../../../../storybook";
-import { ImageGallery } from "./index";
-import Readme from "./README.md";
-import { generateStoryElementData } from "../../../Fixture";
-
-const element = generateStoryElementData("image-gallery");
-const imgaeGalleryTemplate = {
-  default: "",
-  template2: "template-2"
-};
-
-withStore(
-  "Atoms/Story Elements/Image gallery",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-).add("Default", () => <ImageGallery element={element} template={optionalSelect("templates", imgaeGalleryTemplate)} />);

package/src/components/Atoms/StoryElements/withElementWrapper.js

@@ -1,13 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-export const withElementWrapper = (StoryElement) => (props) => {
-  const { element, render, ...restProps } = props;
-  if (!element) return null;
-  if (render && typeof render === "function") return render(props);
-  return <StoryElement {...restProps} element={element} />;
-};
-
-withElementWrapper.propTypes = {
-  StoryElement: PropTypes.element
-};

package/src/components/Atoms/StoryElements/withElementWrapper.test.js

@@ -1,31 +0,0 @@
-/* eslint-disable react/prop-types */
-import * as React from "react";
-import { shallow } from "enzyme";
-import { withElementWrapper } from "./withElementWrapper";
-
-describe("Story Element Wrapper", () => {
-  const element = {
-    description: "",
-    type: "text",
-    metadata: {},
-    text: "<p>Coronavirus in India News Live Updates</p>"
-  };
-  const StoryElement = ({ element }) => <div dangerouslySetInnerHTML={{ __html: element.text }} />;
-  const Component = withElementWrapper(StoryElement);
-
-  it("should return null if element not present", () => {
-    const wrapper = shallow(<Component />);
-    expect(wrapper.html()).toBe(null);
-  });
-
-  it("should call render if it's present and is a function", () => {
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-    const wrapper = shallow(<Component element={element} render={customTemplate} />);
-    expect(wrapper.html()).toBe("<h3><p>Coronavirus in India News Live Updates</p></h3>");
-  });
-
-  it("should return the component passed if element is present and render is not valid", () => {
-    const wrapper = shallow(<Component element={element} />);
-    expect(wrapper.html()).toBe("<div><p>Coronavirus in India News Live Updates</p></div>");
-  });
-});

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

@@ -1,36 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import get from "lodash.get";
-import { useStateValue } from "../../SharedContext";
-import { getTextColor } from "../../../utils/utils";
-
-import "./story-headline.m.css";
-import { PremiumStoryIcon } from "../PremiumStoryIcon";
-
-export const StoryHeadline = ({ story, premiumStoryIconConfig = {} }) => {
-  const config = useStateValue() || {};
-  const textColor = getTextColor(config.theme);
-  const { iconColor = "#F7B500", iconStyle = "star", enablePremiumStoryIcon = false } = premiumStoryIconConfig;
-  const premiumStory = enablePremiumStoryIcon && get(story, ["access"]) === "subscription";
-  const wrapperClass = premiumStory ? "premium-wrapper" : "wrapper";
-  const iconSize = "40px";
-  return (
-    <div className="arrow-component arr--story-headline" styleName={wrapperClass}>
-      {premiumStory && (
-        <PremiumStoryIcon width={iconSize} height={iconSize} color={iconColor} iconType={iconStyle} positionTop="6px" />
-      )}
-      <h1 data-testid="story-headline" styleName={`headline ${textColor}`}>
-        <bdi dangerouslySetInnerHTML={{ __html: story.headline }} />
-      </h1>
-    </div>
-  );
-};
-
-StoryHeadline.propTypes = {
-  story: PropTypes.object.isRequired,
-  premiumStoryIconConfig: PropTypes.shape({
-    iconColor: PropTypes.string,
-    iconType: PropTypes.string,
-    enablePremiumStoryIcon: PropTypes.bool
-  })
-};

package/src/components/Atoms/StoryHeadline/story-headline.m.css

@@ -1,36 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.wrapper {
-  display: block;
-}
-
-:global(.arrow-component.arr--story-headline h1) {
-  margin: 0;
-}
-
-.headline {
-  margin-bottom: var(--arrow-spacing-xxs);
-  color: var(--arrow-c-mono2);
-  font-weight: var(--arrow-fw-semi-bold);
-  text-transform: unset;
-  @media (--viewport-medium) {
-    margin-bottom: var(--arrow-spacing-xs);
-  }
-}
-
-.premium-wrapper .headline {
-  display: inline;
-}
-
-.dark {
-  color: var(--arrow-c-mono2);
-}
-.light {
-  color: var(--arrow-c-invert-mono2);
-}
-
-html[dir="rtl"] {
-  .headline bdi {
-    direction: rtl;
-  }
-}

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

@@ -1,9 +0,0 @@
-## Story Tags
-
-Story tags describes the story and makes it easy for the readers to find what they're looking for.
-
-## Usage
-
-```jsx
-<StoryTags tags={story.tags} />
-```

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

@@ -1,33 +0,0 @@
-import React from "react";
-import get from "lodash.get";
-import PropTypes, { string } from "prop-types";
-import { useStateValue } from "../../SharedContext";
-import { Link } from "@quintype/components";
-import "./tags.m.css";
-import { getTextColor } from "../../../utils/utils";
-
-export const StoryTags = ({ tags = [], template = "", config, borderColor = "" }) => {
-  const configData = useStateValue() || {};
-  const textColor = getTextColor(configData.theme);
-  const mountAt = get(config, ["mountAt"], "");
-  const templateStyle = template === "roundCorners" ? "roundCorners" : "";
-  return (
-    <div className="arrow-component arr--story-tags">
-      {tags.length > 0 &&
-        tags.map((tag, index) => (
-          <div styleName={`tags ${templateStyle} ${textColor}`} key={index} data-test-id="story-tag">
-            <Link href={`${mountAt}/topic/` + tag.slug} aria-label="story-tag-name">
-              {tag.name}
-            </Link>
-          </div>
-        ))}
-    </div>
-  );
-};
-
-StoryTags.propTypes = {
-  tags: PropTypes.array,
-  borderColor: PropTypes.string,
-  config: PropTypes.object,
-  template: string
-};

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

@@ -1,25 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore, optionalSelect } from "../../../../storybook";
-import { StoryTags } from "./index";
-import Readme from "./README.md";
-
-const story = generateStory();
-
-const templateStyles = {
-  default: "",
-  "Round corners": "roundCorners"
-};
-
-withStore(
-  "Atoms/StoryTags",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-).add("Default", () => <StoryTags tags={story.tags} template={optionalSelect("Tag Styles", templateStyles)} />);

package/src/components/Atoms/StoryTags/story-tags.test.js

@@ -1,18 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-import { Provider } from "react-redux";
-import { StoryTags } from ".";
-import { generateStore, generateStory } from "../../Fixture";
-
-const story = generateStory();
-
-describe("Story Tags", () => {
-  it("Should render default template with tags", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <StoryTags tags={story.tags} />;
-      </Provider>
-    );
-    expect(wrapper.find(StoryTags)).toHaveLength(1);
-  });
-});

package/src/components/Atoms/StoryTags/tags.m.css

@@ -1,34 +0,0 @@
-.tags {
-  display: inline-block;
-  font-size: var(--arrow-fs-xs);
-  text-align: center;
-  border-radius: 3px;
-  margin: var(--arrow-spacing-xs);
-  padding: 5px var(--arrow-fs-xs) 7px;
-}
-
-.tags.roundCorners {
-  border-radius: var(--arrow-fs-xs);
-}
-
-.tags.dark {
-  color: var(--arrow-c-mono4);
-  border: 1px solid var(--dark-border);
-}
-
-.tags.light {
-  color: var(--arrow-c-invert-mono4);
-  border: 1px solid var(--light-border);
-}
-
-.tags.dark:hover {
-  background-color: var(--arrow-c-mono7);
-}
-
-.tags.light:hover {
-  background-color: var(--arrow-c-invert-mono7);
-}
-
-:global(.arr--story-tags) > :first-child {
-  margin-left: 0px;
-}

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

@@ -1,17 +0,0 @@
-# Subheadline
-
-Displays the subheadline of the story in the story card.
-
-## Usage
-
-```jsx
-<Subheadline story={story} truncateChars={200} />
-```
-
-<!-- PROPS -->
-
-We can pass `showFullContent` as props to show the complete sunheadline without truncating.
-
-```jsx
-<Subheadline story={story} truncateChars={200} />
-```

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

@@ -1,54 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import get from "lodash.get";
-import { useStateValue } from "../../SharedContext";
-
-import { getTextColor, truncate } from "../../../utils/utils";
-
-import "./subheadline.m.css";
-
-// either truncate or line clamp should be used
-export const Subheadline = ({
-  story,
-  truncateChars = 200,
-  lineClamp,
-  clazzName = "",
-  forceShowAtom,
-  showFullContent
-}) => {
-  const config = useStateValue() || {};
-  const subheadline = forceShowAtom || get(config, ["showSubheadline"], true);
-  if (!subheadline) return null;
-  const textColor = getTextColor(config.theme);
-
-  return (
-    <div
-      className={`p-alt arr--sub-headline arrow-component ${clazzName}`}
-      style={{
-        WebkitLineClamp: lineClamp
-      }}
-      styleName={`subheadline ${textColor}`}
-      data-test-id="subheadline">
-      {showFullContent || typeof lineClamp === "number"
-        ? story.subheadline
-        : truncate(story.subheadline, truncateChars, true)}
-    </div>
-  );
-};
-
-Subheadline.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes.object.isRequired,
-  //  Restricts the number of lines for subheadline.
-  lineClamp: PropTypes.number,
-  /** Number of characters to truncate the subheadline */
-  truncateChars: PropTypes.number,
-  clazzName: PropTypes.string,
-  forceShowAtom: PropTypes.bool,
-  showFullContent: PropTypes.bool
-};
-
-Subheadline.defaultProps = {
-  forceShowAtom: false,
-  showFullContent: false
-};

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

@@ -1,12 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import { Subheadline } from "./index";
-import Readme from "./README.md";
-
-const story = generateStory();
-
-withStore("Atoms/Subheadline", {}, Readme)
-  .add("Default", () => <Subheadline story={story} />)
-  .add("with truncate chars of 50", () => <Subheadline story={story} truncateChars={50} />)
-  .add("with line clamp of 1", () => <Subheadline story={story} lineClamp={1} />);

package/src/components/Atoms/Subheadline/subheadline.m.css

@@ -1,17 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.subheadline {
-  margin-bottom: var(--arrow-spacing-xxs);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  @media (--viewport-medium) {
-    margin-bottom: var(--arrow-spacing-xs);
-  }
-}
-.dark {
-  color: var(--arrow-c-mono4);
-}
-.light {
-  color: var(--arrow-c-invert-mono4);
-}

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

@@ -1,9 +0,0 @@
-# Timestamp
-The timestamp component for story card based on the `last-published-at` or `first-published-at`.
-
-## Usage
-```jsx
-<TimeStamp story={story} />
-```
-
-<!-- PROPS -->

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

@@ -1,40 +0,0 @@
-import React from "react";
-import get from "lodash.get";
-import { useSelector } from "react-redux";
-import { useStateValue } from "../../SharedContext";
-import { formatter, getTextColor, getTimeStamp } from "../../../utils/utils";
-import PropTypes from "prop-types";
-import "./timestamp.m.css";
-
-export const TimeStamp = ({ story, isBottom, config = {} }) => {
-  const configState = useStateValue() || {};
-  const isTime = get(config, ["showTime"], get(configState, ["showTime"], true));
-  const time = story["last-published-at"] || story["first-published-at"];
-  const isBottomClasses = isBottom ? "bottom-fix" : "";
-  const textColor = getTextColor(configState.theme);
-  const isLocalizedNumber = useSelector((state) => get(state, ["qt", "config", "isLocalizedNumber"], false));
-  const languageCode = isLocalizedNumber
-    ? useSelector((state) => get(state, ["qt", "config", "language", "ietf-code"], "en"))
-    : "en";
-
-  return (
-    <>
-      {isTime && (
-        <div
-          className="time arr--publish-time"
-          styleName={`time  ${textColor} ${isBottomClasses}`}
-          data-test-id="publish-time">
-          <div styleName="time-wrapper">{getTimeStamp(time, formatter, config, languageCode)}</div>
-        </div>
-      )}
-    </>
-  );
-};
-
-TimeStamp.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes.object,
-  isBottom: PropTypes.bool,
-  config: PropTypes.object,
-  languageCode: PropTypes.string
-};

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

@@ -1,9 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import { TimeStamp } from "./index";
-import Readme from "./README.md";
-
-const story = generateStory();
-
-withStore("Atoms/Time Stamp", {}, Readme).add("default", () => <TimeStamp story={story} />);

package/src/components/Atoms/TimeStamp/timestamp.m.css

@@ -1,22 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.time {
-  display: flex;
-  margin-bottom: 2px;
-}
-
-.time-wrapper {
-  margin-bottom: var(--arrow-spacing-xxs);
-}
-
-.bottom-fix {
-  margin-top: auto;
-}
-
-.dark {
-  color: var(--arrow-c-mono4);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono4);
-}