@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1-version-upgrade.2

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,56 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import get from "lodash.get";
-import { useStateValue } from "../../SharedContext";
-import { getTextColor, infiniteStoryCards, infiniteScrollDisabled, toRelativeUrl } from "../../../utils/utils";
-import { useSelector } from "react-redux";
-import "./story-headline.m.css";
-import { PremiumStoryIcon } from "../PremiumStoryIcon";
-import { Link } from "@quintype/components";
-
-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";
-
-  const { infiniteScrollType, infiniteScrollStyle } =
-    useSelector((state) => get(state, ["qt", "config", "pagebuilder-config", "infiniteScroll"])) || {};
-
-  const clickableHeadline =
-    !infiniteScrollDisabled(infiniteScrollType) && infiniteStoryCards(infiniteScrollStyle) && !story?.firstStory;
-
-  function Headline() {
-    return (
-      <h1 data-testid="story-headline" className="arr--story--headline-h1" styleName={`headline ${textColor}`}>
-        <bdi dangerouslySetInnerHTML={{ __html: story.headline }} />
-      </h1>
-    );
-  }
-
-  return (
-    <div className="arrow-component arr--story-headline" styleName={wrapperClass}>
-      {premiumStory && (
-        <PremiumStoryIcon width={iconSize} height={iconSize} color={iconColor} iconType={iconStyle} positionTop="6px" />
-      )}
-      {clickableHeadline ? (
-        <Link href={toRelativeUrl(story?.url)}>
-          <Headline />
-        </Link>
-      ) : (
-        <Headline />
-      )}
-    </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/StoryReview/README.md

@@ -1,9 +0,0 @@
-# Story Review
-
-Displays the review title and rating in a review story template.
-
-## Usage
-
-```jsx
-<StoryReview story={story} theme="#ffffff" />
-```

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

@@ -1,39 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import get from "lodash/get";
-import { ReviewRating } from "@quintype/components";
-import { getTextColor } from "../../../utils/utils";
-import "./story-review.m.css";
-
-export const StoryReview = (props) => {
-  const storyTemplate = get(props, ["story", "story-template"], "");
-  if (storyTemplate !== "review") return null;
-
-  const reviewTitle = get(props, ["story", "metadata", "review-title"], "");
-  const ratingValue = get(props, ["story", "metadata", "review-rating", "value"], "0");
-  const theme = get(props, ["theme"], "");
-  const textColor = getTextColor(theme);
-
-  return (
-    <div className="arrow-component arr--story-review" styleName="wrapper" data-test-id="story-review">
-      <h5 styleName={`title ${textColor}`}>
-        {reviewTitle}
-        <span styleName="value">({ratingValue} / 5)</span>
-      </h5>
-      <ReviewRating value={ratingValue} />
-    </div>
-  );
-};
-
-StoryReview.propTypes = {
-  story: PropTypes.shape({
-    "story-template": PropTypes.string,
-    metadata: PropTypes.shape({
-      "review-title": PropTypes.string,
-      "review-rating": PropTypes.shape({
-        value: PropTypes.string
-      })
-    })
-  }),
-  theme: PropTypes.string
-};

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

@@ -1,8 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import { StoryReview } from "./index";
-import Readme from "./README.md";
-
-const story = generateStory();
-withStore("Atoms/Story Review", {}, Readme).add("Default", () => <StoryReview theme={"#fffff"} story={story} />);

package/src/components/Atoms/StoryReview/story-review.m.css

@@ -1,34 +0,0 @@
-.wrapper {
-  display: flex;
-  align-items: center;
-  margin: var(--arrow-spacing-l) 0;
-}
-
-.wrapper:global(.arr--story-review) .title {
-  font-size: var(--arrow-fs-m);
-}
-
-.value {
-  font-style: italic;
-  font-weight: var(--arrow-fw-normal);
-  margin: 0 0 0 var(--arrow-spacing-xxs);
-}
-
-.wrapper:global(.arr--story-review .review-rating) {
-  margin: 0 0 0 var(--arrow-spacing-m);
-  flex-shrink: 0;
-}
-
-.dark {
-  color: var(--arrow-c-mono2);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono2);
-}
-
-html[dir="rtl"] {
-  .wrapper:global(.arr--story-review .review-rating) {
-    margin: 0 var(--arrow-spacing-m) 0 0;
-  }
-}

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/` + encodeURIComponent(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,42 +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);
-}
-
-html[dir="ltr"] {
-  :global(.arr--story-tags) > :first-child {
-    margin-left: 0px;
-  }
-}
-
-html[dir="rtl"] {
-  :global(.arr--story-tags) > :first-child {
-    margin-right: 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 (!story.subheadline || !subheadline) return null;
-  const textColor = getTextColor(config.theme);
-
-  return (
-    <div
-      className={`p-alt arr--sub-headline arrow-component ${clazzName}`}
-      style={{
-        WebkitLineClamp: lineClamp || "none"
-      }}
-      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,83 +0,0 @@
-import React from "react";
-import get from "lodash.get";
-import { useSelector } from "react-redux";
-import { useStateValue } from "../../SharedContext";
-import { formatter, getStoryTemplate, getTextColor, getTheme, getTimeStamp } from "../../../utils/utils";
-import PropTypes from "prop-types";
-import "./timestamp.m.css";
-
-const timeMapping = {
-  published: "first-published-at",
-  updated: "last-published-at"
-};
-
-export const TimeStamp = ({ story, config = {}, layout, enableDarkModePreview = false }) => {
-  const configState = useStateValue() || {};
-  const isTime = get(config, ["showTime"], get(configState, ["showTime"], true));
-  let time = story["first-published-at"] || story["last-published-at"];
-  const theme = getTheme(configState, layout, enableDarkModePreview);
-  const textColor = getTextColor(theme);
-  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
-  const isLocalizedNumber = get(qtConfig, ["isLocalizedNumber"], false);
-  const languageCode = get(qtConfig, ["language", "ietf-code"], "en");
-  const direction = get(qtConfig, ["language", "direction"], "ltr");
-  const storyCardTime = get(qtConfig, ["pagebuilder-config", "general", "storyCardTime"], null);
-  const storyTemplate = getStoryTemplate(story, get(qtConfig, ["pagebuilder-config"], {}));
-
-  const { localization = {} } = get(qtConfig, ["pagebuilder-config", "general"], {});
-  const { localizedElements = {} } = localization;
-  const rtlWithoutCustomLabels =
-    direction === "rtl" && !get(localizedElements, ["months"]) && !get(localizedElements, ["meridiem"], {});
-  const updatedStyle = rtlWithoutCustomLabels ? `time ${textColor} wrapper` : `time ${textColor}`;
-
-  if (storyCardTime) {
-    const storyTime = storyTemplate === "live-blog" ? storyCardTime["liveBlog"] : storyCardTime["rest"];
-    if (storyTime) {
-      const mappedTime = timeMapping[storyTime];
-      time = story[mappedTime] || time;
-    }
-  }
-
-  const dateFormat = get(qtConfig, ["pagebuilder-config", "general", "dateFormat"], "dd-mon-yyyy");
-  const enableTimeTranslation = get(qtConfig, ["pagebuilder-config", "general", "enableTimeTranslation"], false);
-  const enableLocalization = get(
-    qtConfig,
-    ["pagebuilder-config", "general", "localization", "enableLocalization"],
-    false
-  );
-  const updatedConfig = {
-    direction: direction,
-    ...config,
-    dateFormat: dateFormat,
-    enableTimeTranslation: enableTimeTranslation,
-    enableLocalization: enableLocalization,
-    localizedMonths: enableLocalization && get(localizedElements, ["months"]),
-    localizedMeridiem: enableLocalization && get(localizedElements, ["meridiem"], {})
-  };
-
-  return (
-    <>
-      {isTime && (
-        <div className="time arr--publish-time" styleName={updatedStyle} data-test-id="publish-time">
-          <div>
-            {getTimeStamp({
-              date: time,
-              formatter: formatter,
-              config: updatedConfig,
-              languageCode,
-              isLocalizedNumber
-            })}
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-TimeStamp.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes.object,
-  config: PropTypes.object,
-  layout: PropTypes.string,
-  enableDarkModePreview: PropTypes.bool
-};

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,21 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.time {
-  display: flex;
-}
-
-.bottom-fix {
-  margin-top: auto;
-}
-
-.dark {
-  color: var(--arrow-c-mono4);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono4);
-}
-
-.wrapper {
-  direction: ltr;
-}