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

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

@@ -0,0 +1,31 @@
+/* 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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,36 @@
+@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

@@ -0,0 +1,9 @@
+# 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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,34 @@
+.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

@@ -0,0 +1,9 @@
+## 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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,42 @@
+.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

@@ -0,0 +1,17 @@
+# 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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,17 @@
+@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

@@ -0,0 +1,9 @@
+# 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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,21 @@
+@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;
+}