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

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

@@ -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/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/` + 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,34 @@
+.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

@@ -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 (!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

@@ -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,37 @@
+import React from "react";
+import get from "lodash.get";
+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(configState, ["showTime"], true);
+
+  const time = story["last-published-at"] || story["first-published-at"];
+  const isBottomClasses = isBottom ? "bottom-fix" : "";
+  const textColor = getTextColor(configState.theme);
+
+  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)}</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+TimeStamp.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object,
+  isBottom: PropTypes.bool,
+  config: PropTypes.object
+};

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,22 @@
+@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);
+}