+```
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/index.js
new file mode 100644
index 000000000..a7f8ab037
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/index.js
@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { useStateValue } from "../../../SharedContext";
+import { getTextColor, shapeConfig } from "../../../../utils/utils";
+import { Link } from "@quintype/components";
+import "./reference.m.css";
+
+const ReferenceBase = ({ element, config = {}, opts = {}, ...restProps }) => {
+ if (!element) return null;
+
+ const configData = useStateValue() || {};
+ const textInvertColor = getTextColor(configData.theme);
+
+ const eleArr = element["story-elements"] && element["story-elements"].map((ref) => ref.metadata);
+ const { showHeadline = true, headlineText } = opts;
+
+ return (
+
+ {eleArr &&
+ eleArr.map((metadata, index) => {
+ const { name = "", description = "", url } = metadata;
+ return (
+
+
+ {showHeadline && (
+
+ {headlineText || name}
+
+ )}
+
{description}
+
+
+ );
+ })}
+
+
+ );
+ expect(wrapper.find(Reference)).toHaveLength(1);
+ });
+
+ it("Should render headline if it is enabled", () => {
+ const wrapper = shallow(
+
+ );
+};
+
+export const StoryElement = withElementWrapper(StoryElementBase);
+
+StoryElementBase.propTypes = {
+ element: PropTypes.object,
+ story: shapeStory,
+ config: shapeConfig,
+};
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/stories.js
new file mode 100644
index 000000000..a4d378f70
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/stories.js
@@ -0,0 +1,20 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { StoryElement } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+
+const elementJsembed = generateStoryElementData("jsembed");
+
+withStore(
+ "Atoms/Story Elements/StoryElement",
+
+ {
+ qt: {
+ config: {
+ "cdn-image": "thumbor-stg.assettype.com",
+ },
+ },
+ },
+ Readme
+).add("should work with any jsembed ", () =>
+ {!hideHeadline && (
+
+ )}
+
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries , but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
"
+ );
+ });
+});
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Text/README.md b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/README.md
new file mode 100644
index 000000000..eed9bfefd
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/README.md
@@ -0,0 +1,32 @@
+# Text Story Element
+
+Displays the text story element of the story
+
+## Usage
+
+#### Default text story element
+```jsx
+
+ );
+};
+
+TextBase.propTypes = {
+ element: PropTypes.shape({ text: PropTypes.string }),
+ opts: PropTypes.shape({ isExternalLink: PropTypes.bool }),
+ css: PropTypes.shape({ hyperlinkColor: PropTypes.string, textColor: PropTypes.string }),
+ story: shapeStory,
+ config: shapeConfig,
+};
+
+export const Text = withElementWrapper(TextBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Text/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/stories.js
new file mode 100644
index 000000000..a90e83907
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/stories.js
@@ -0,0 +1,32 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { Text } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+import { boolean, color } from "@storybook/addon-knobs";
+
+const element = generateStoryElementData("text");
+
+withStore("Atoms/Story Elements/Text", {}, Readme)
+ .add("Default", () => (
+ Virtual reality is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. Steven Spielberg 2019s Ready Player One .
Virtual reality is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. Steven Spielberg 2019s Ready Player One .
Virtual reality is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. Steven Spielberg 2019s Ready Player One .
'
+ );
+ });
+});
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Video/README.md b/app/isomorphic/arrow/components/Atoms/StoryElements/Video/README.md
new file mode 100644
index 000000000..eb3a81883
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Video/README.md
@@ -0,0 +1,9 @@
+# Video Story Element
+
+Video story element is a simple component used to display a video story.
+
+## Usage
+
+```jsx
+
+
+ );
+};
+
+Videobase.propTypes = {
+ element: PropTypes.object,
+ story: shapeStory,
+ config: shapeConfig,
+ loadIframeOnClick: PropTypes.bool,
+};
+
+export const Video = withElementWrapper(Videobase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Video/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Video/stories.js
new file mode 100644
index 000000000..9bfc981ec
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Video/stories.js
@@ -0,0 +1,24 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { Video } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+
+const elementYoutube = generateStoryElementData("youtube-video");
+const elementDailyMotion = generateStoryElementData("dailymotion-video");
+const elementTwitter = generateStoryElementData("tweet");
+withStore(
+ "Atoms/Story Elements/Video",
+
+ {
+ qt: {
+ config: {
+ "cdn-image": "thumbor-stg.assettype.com",
+ },
+ },
+ },
+ Readme
+)
+ .add("Default with youtube video", () =>
+
+ );
+ expect(wrapper.find(FullScreenImages).length).toEqual(1);
+ });
+});
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/index.js
new file mode 100644
index 000000000..57ed5f329
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/index.js
@@ -0,0 +1,82 @@
+/* eslint-disable no-unused-vars */
+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 {imageCount}
;
+ };
+
+ const ImageGalleryImagesTemplate = ({ onClickHandler }) => {
+ const images = renderImage.map((image, index) => (
+
+ onClickHandler && onClickHandler(index)}
+ >
+
+ {image.hyperlink &&
+ ));
+
+ return (
+
+ {images}
+
+ );
+ };
+
+ ImageGalleryImagesTemplate.propTypes = {
+ onClickHandler: PropTypes.func,
+ };
+
+ return Coronavirus in India News Live Updates
",
+ };
+ const StoryElement = ({ element }) =>
;
+ const Component = withElementWrapper(StoryElement);
+
+ it("should return null if element not present", () => {
+ const wrapper = shallow(Coronavirus in India News Live Updates
");
+ });
+
+ it("should return the component passed if element is present and render is not valid", () => {
+ const wrapper = shallow(Coronavirus in India News Live Updates
+ {premiumStory && (
+
+ )}
+
+
+
+ {tags.length > 0 &&
+ tags.map((tag, index) => (
+
+
+ ))}
+
+
+ );
+ expect(wrapper.find(StoryTags)).toHaveLength(1);
+ });
+});
diff --git a/app/isomorphic/arrow/components/Atoms/StoryTags/tags.m.css b/app/isomorphic/arrow/components/Atoms/StoryTags/tags.m.css
new file mode 100644
index 000000000..eaadb386c
--- /dev/null
+++ b/app/isomorphic/arrow/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;
+}
diff --git a/app/isomorphic/arrow/components/Atoms/Subheadline/README.md b/app/isomorphic/arrow/components/Atoms/Subheadline/README.md
new file mode 100644
index 000000000..a5bd1aff7
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/Subheadline/README.md
@@ -0,0 +1,17 @@
+# Subheadline
+
+Displays the subheadline of the story in the story card.
+
+## Usage
+
+```jsx
+
+ {showFullContent || typeof lineClamp === "number"
+ ? story.subheadline
+ : truncate(story.subheadline, truncateChars, true)}
+
+ );
+};
+
+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,
+};
diff --git a/app/isomorphic/arrow/components/Atoms/Subheadline/stories.js b/app/isomorphic/arrow/components/Atoms/Subheadline/stories.js
new file mode 100644
index 000000000..fd48e813a
--- /dev/null
+++ b/app/isomorphic/arrow/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", () =>
+
{getTimeStamp(time, formatter, config, languageCode)}
+
text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1568977881112,
+ "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
+ "card-added-at": 1568977256690,
+ status: "draft",
+ id: "8db07059-5344-4859-bfbb-441148b13a02",
+ "content-id": "8db07059-5344-4859-bfbb-441148b13a02",
+ version: 4,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Untitled Sep 20, 2019 04:30 PM",
+ message: "Social Description",
+ image: {
+ key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ url: null,
+ attribution: "attribution",
+ caption: "caption",
+ metadata: {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
+ "content-type": "story",
+ "content-updated-at": 1568978486084,
+ "author-id": 299252,
+ "owner-id": 299252,
+ "linked-story-ids": [],
+ access: null,
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1568977881440,
+ "hero-image-caption": "caption",
+ version: 7,
+ "story-template": "video",
+ "sequence-no": null,
+ "created-at": 1568978481003,
+ authors: [
+ {
+ id: 299252,
+ name: "Ashwini Mohan",
+ slug: "ashwini-mohan",
+ "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Ashwini Mohan",
+ },
+ },
+ {
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "associated-metadata": {},
+ type: "story",
+ story: {
+ "updated-at": 1568978484435,
+ seo: {
+ "meta-description": "Meta description",
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 299252,
+ "author-name": "Ashwini Mohan",
+ tags: [
+ {
+ id: 168475,
+ name: "news",
+ "meta-description": null,
+ slug: "news",
+ "tag-type": "Tag",
+ },
+ ],
+ headline: "Untitled Sep 20, 2019 04:30 PM",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ slug: "recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "last-published-at": 1568978485926,
+ subheadline: "TESTING DESCRIPTION FIELD.",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "business",
+ name: "Business",
+ "section-url": "https://ace-web.qtstage.io/recent-stories/news/business",
+ id: 5752,
+ "parent-id": 5670,
+ "display-name": "Business",
+ collection: {
+ slug: "business1",
+ name: "Business News",
+ id: 2729,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key":
+ "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+ },
+ "access-level-value": null,
+ "content-created-at": 1568977220927,
+ "owner-name": "Ashwini Mohan",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ comments: null,
+ entities: {},
+ "published-at": 1568978485926,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: "Social Description",
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "attribution",
+ "bullet-type": "123",
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "hero-image-s3-key":
+ "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ contributors: [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/b4f33f98-8814-4675-97f0-75e447e43ab8/element/212be322-baaa-46a1-ae92-7f8f79fc4107",
+ type: "youtube-video",
+ "family-id": "e6b6aecf-3bc6-451b-ac69-33aa3d79ce6b",
+ title: "",
+ id: "212be322-baaa-46a1-ae92-7f8f79fc4107",
+ url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
+ "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
+ metadata: {},
+ subtype: null,
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1568977881112,
+ "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
+ "card-added-at": 1568977256690,
+ status: "draft",
+ id: "8db07059-5344-4859-bfbb-441148b13a02",
+ "content-id": "8db07059-5344-4859-bfbb-441148b13a02",
+ version: 4,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Untitled Sep 20, 2019 04:30 PM",
+ message: "Social Description",
+ image: {
+ key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ url: null,
+ attribution: "attribution",
+ caption: "caption",
+ metadata: {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
+ "content-type": "story",
+ "content-updated-at": 1568978486084,
+ "author-id": 299252,
+ "owner-id": 299252,
+ "linked-story-ids": [],
+ access: null,
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1568977881440,
+ "hero-image-caption": "caption",
+ version: 7,
+ "story-template": "video",
+ "sequence-no": null,
+ "created-at": 1568978481003,
+ authors: [
+ {
+ id: 299252,
+ name: "Ashwini Mohan",
+ slug: "ashwini-mohan",
+ "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Ashwini Mohan",
+ },
+ },
+ {
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "associated-metadata": {},
+ type: "story",
+ story: {
+ "updated-at": 1568978484435,
+ seo: {
+ "meta-description": "Meta description",
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 299252,
+ "author-name": "Ashwini Mohan",
+ tags: [
+ {
+ id: 168475,
+ name: "news",
+ "meta-description": null,
+ slug: "news",
+ "tag-type": "Tag",
+ },
+ ],
+ headline: "Untitled Sep 20, 2019 04:30 PM",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ slug: "recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "last-published-at": 1568978485926,
+ subheadline: "TESTING DESCRIPTION FIELD.",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "business",
+ name: "Business",
+ "section-url": "https://ace-web.qtstage.io/recent-stories/news/business",
+ id: 5752,
+ "parent-id": 5670,
+ "display-name": "Business",
+ collection: {
+ slug: "business1",
+ name: "Business News",
+ id: 2729,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key":
+ "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+ },
+ "access-level-value": null,
+ "content-created-at": 1568977220927,
+ "owner-name": "Ashwini Mohan",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ comments: null,
+ entities: {},
+ "published-at": 1568978485926,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: "Social Description",
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "attribution",
+ "bullet-type": "123",
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "hero-image-s3-key":
+ "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ contributors: [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/b4f33f98-8814-4675-97f0-75e447e43ab8/element/212be322-baaa-46a1-ae92-7f8f79fc4107",
+ type: "youtube-video",
+ "family-id": "e6b6aecf-3bc6-451b-ac69-33aa3d79ce6b",
+ title: "",
+ id: "212be322-baaa-46a1-ae92-7f8f79fc4107",
+ url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
+ "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
+ metadata: {},
+ subtype: null,
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1568977881112,
+ "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
+ "card-added-at": 1568977256690,
+ status: "draft",
+ id: "8db07059-5344-4859-bfbb-441148b13a02",
+ "content-id": "8db07059-5344-4859-bfbb-441148b13a02",
+ version: 4,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Untitled Sep 20, 2019 04:30 PM",
+ message: "Social Description",
+ image: {
+ key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ url: null,
+ attribution: "attribution",
+ caption: "caption",
+ metadata: {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
+ "content-type": "story",
+ "content-updated-at": 1568978486084,
+ "author-id": 299252,
+ "owner-id": 299252,
+ "linked-story-ids": [],
+ access: null,
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1568977881440,
+ "hero-image-caption": "caption",
+ version: 7,
+ "story-template": "video",
+ "sequence-no": null,
+ "created-at": 1568978481003,
+ authors: [
+ {
+ id: 299252,
+ name: "Ashwini Mohan",
+ slug: "ashwini-mohan",
+ "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Ashwini Mohan",
+ },
+ },
+ {
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "associated-metadata": {},
+ type: "story",
+ story: {
+ "updated-at": 1568978484435,
+ seo: {
+ "meta-description": "Meta description",
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 299252,
+ "author-name": "Ashwini Mohan",
+ tags: [
+ {
+ id: 168475,
+ name: "news",
+ "meta-description": null,
+ slug: "news",
+ "tag-type": "Tag",
+ },
+ ],
+ headline: "Untitled Sep 20, 2019 04:30 PM",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ slug: "recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "last-published-at": 1568978485926,
+ subheadline: "TESTING DESCRIPTION FIELD.",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "business",
+ name: "Business",
+ "section-url": "https://ace-web.qtstage.io/recent-stories/news/business",
+ id: 5752,
+ "parent-id": 5670,
+ "display-name": "Business",
+ collection: {
+ slug: "business1",
+ name: "Business News",
+ id: 2729,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key":
+ "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+ },
+ "access-level-value": null,
+ "content-created-at": 1568977220927,
+ "owner-name": "Ashwini Mohan",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ comments: null,
+ entities: {},
+ "published-at": 1568978485926,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: "Social Description",
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "attribution",
+ "bullet-type": "123",
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "hero-image-s3-key":
+ "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ contributors: [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/b4f33f98-8814-4675-97f0-75e447e43ab8/element/212be322-baaa-46a1-ae92-7f8f79fc4107",
+ type: "youtube-video",
+ "family-id": "e6b6aecf-3bc6-451b-ac69-33aa3d79ce6b",
+ title: "",
+ id: "212be322-baaa-46a1-ae92-7f8f79fc4107",
+ url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
+ "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
+ metadata: {},
+ subtype: null,
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1568977881112,
+ "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
+ "card-added-at": 1568977256690,
+ status: "draft",
+ id: "8db07059-5344-4859-bfbb-441148b13a02",
+ "content-id": "8db07059-5344-4859-bfbb-441148b13a02",
+ version: 4,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Untitled Sep 20, 2019 04:30 PM",
+ message: "Social Description",
+ image: {
+ key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ url: null,
+ attribution: "attribution",
+ caption: "caption",
+ metadata: {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
+ "content-type": "story",
+ "content-updated-at": 1568978486084,
+ "author-id": 299252,
+ "owner-id": 299252,
+ "linked-story-ids": [],
+ access: null,
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1568977881440,
+ "hero-image-caption": "caption",
+ version: 7,
+ "story-template": "video",
+ "sequence-no": null,
+ "created-at": 1568978481003,
+ authors: [
+ {
+ id: 299252,
+ name: "Ashwini Mohan",
+ slug: "ashwini-mohan",
+ "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Ashwini Mohan",
+ },
+ },
+ {
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "associated-metadata": {},
+ type: "story",
+ story: {
+ "updated-at": 1568978484435,
+ seo: {
+ "meta-description": "Meta description",
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 299252,
+ "author-name": "Ashwini Mohan",
+ tags: [
+ {
+ id: 168475,
+ name: "news",
+ "meta-description": null,
+ slug: "news",
+ "tag-type": "Tag",
+ },
+ ],
+ headline: "Untitled Sep 20, 2019 04:30 PM",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ slug: "recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "last-published-at": 1568978485926,
+ subheadline: "TESTING DESCRIPTION FIELD.",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "business",
+ name: "Business",
+ "section-url": "https://ace-web.qtstage.io/recent-stories/news/business",
+ id: 5752,
+ "parent-id": 5670,
+ "display-name": "Business",
+ collection: {
+ slug: "business1",
+ name: "Business News",
+ id: 2729,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key":
+ "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+ },
+ "access-level-value": null,
+ "content-created-at": 1568977220927,
+ "owner-name": "Ashwini Mohan",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ comments: null,
+ entities: {},
+ "published-at": 1568978485926,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: "Social Description",
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "attribution",
+ "bullet-type": "123",
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "hero-image-s3-key":
+ "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ contributors: [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/b4f33f98-8814-4675-97f0-75e447e43ab8/element/212be322-baaa-46a1-ae92-7f8f79fc4107",
+ type: "youtube-video",
+ "family-id": "e6b6aecf-3bc6-451b-ac69-33aa3d79ce6b",
+ title: "",
+ id: "212be322-baaa-46a1-ae92-7f8f79fc4107",
+ url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
+ "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
+ metadata: {},
+ subtype: null,
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1568977881112,
+ "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
+ "card-added-at": 1568977256690,
+ status: "draft",
+ id: "8db07059-5344-4859-bfbb-441148b13a02",
+ "content-id": "8db07059-5344-4859-bfbb-441148b13a02",
+ version: 4,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Untitled Sep 20, 2019 04:30 PM",
+ message: "Social Description",
+ image: {
+ key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ url: null,
+ attribution: "attribution",
+ caption: "caption",
+ metadata: {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
+ "content-type": "story",
+ "content-updated-at": 1568978486084,
+ "author-id": 299252,
+ "owner-id": 299252,
+ "linked-story-ids": [],
+ access: null,
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1568977881440,
+ "hero-image-caption": "caption",
+ version: 7,
+ "story-template": "video",
+ "sequence-no": null,
+ "created-at": 1568978481003,
+ authors: [
+ {
+ id: 299252,
+ name: "Ashwini Mohan",
+ slug: "ashwini-mohan",
+ "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Ashwini Mohan",
+ },
+ },
+ {
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "associated-metadata": {},
+ type: "story",
+ story: {
+ "updated-at": 1568978484435,
+ seo: {
+ "meta-description": "Meta description",
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 299252,
+ "author-name": "Ashwini Mohan",
+ tags: [
+ {
+ id: 168475,
+ name: "news",
+ "meta-description": null,
+ slug: "news",
+ "tag-type": "Tag",
+ },
+ ],
+ headline: "Untitled Sep 20, 2019 04:30 PM",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ slug: "recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "last-published-at": 1568978485926,
+ subheadline: "TESTING DESCRIPTION FIELD.",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "business",
+ name: "Business",
+ "section-url": "https://ace-web.qtstage.io/recent-stories/news/business",
+ id: 5752,
+ "parent-id": 5670,
+ "display-name": "Business",
+ collection: {
+ slug: "business1",
+ name: "Business News",
+ id: 2729,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key":
+ "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+ },
+ "access-level-value": null,
+ "content-created-at": 1568977220927,
+ "owner-name": "Ashwini Mohan",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ comments: null,
+ entities: {},
+ "published-at": 1568978485926,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: "Social Description",
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "attribution",
+ "bullet-type": "123",
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "hero-image-s3-key":
+ "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ contributors: [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/b4f33f98-8814-4675-97f0-75e447e43ab8/element/212be322-baaa-46a1-ae92-7f8f79fc4107",
+ type: "youtube-video",
+ "family-id": "e6b6aecf-3bc6-451b-ac69-33aa3d79ce6b",
+ title: "",
+ id: "212be322-baaa-46a1-ae92-7f8f79fc4107",
+ url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
+ "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
+ metadata: {},
+ subtype: null,
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1568977881112,
+ "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
+ "card-added-at": 1568977256690,
+ status: "draft",
+ id: "8db07059-5344-4859-bfbb-441148b13a02",
+ "content-id": "8db07059-5344-4859-bfbb-441148b13a02",
+ version: 4,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Untitled Sep 20, 2019 04:30 PM",
+ message: "Social Description",
+ image: {
+ key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ url: null,
+ attribution: "attribution",
+ caption: "caption",
+ metadata: {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
+ "content-type": "story",
+ "content-updated-at": 1568978486084,
+ "author-id": 299252,
+ "owner-id": 299252,
+ "linked-story-ids": [],
+ access: null,
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1568977881440,
+ "hero-image-caption": "caption",
+ version: 7,
+ "story-template": "video",
+ "sequence-no": null,
+ "created-at": 1568978481003,
+ authors: [
+ {
+ id: 299252,
+ name: "Ashwini Mohan",
+ slug: "ashwini-mohan",
+ "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Ashwini Mohan",
+ },
+ },
+ {
+ id: 40827,
+ "associated-metadata": {},
+ type: "collection",
+ name: "col02",
+ slug: "col02",
+ template: "default",
+ metadata: {
+ "cover-image": {},
+ },
+ "collection-date": null,
+ },
+ {
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "associated-metadata": {},
+ type: "story",
+ story: {
+ "updated-at": 1568978484435,
+ seo: {
+ "meta-description": "Meta description",
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 299252,
+ "author-name": "Ashwini Mohan",
+ tags: [
+ {
+ id: 168475,
+ name: "news",
+ "meta-description": null,
+ slug: "news",
+ "tag-type": "Tag",
+ },
+ ],
+ headline: "Untitled Sep 20, 2019 04:30 PM",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ slug: "recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "last-published-at": 1568978485926,
+ subheadline: "TESTING DESCRIPTION FIELD.",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "business",
+ name: "Business",
+ "section-url": "https://ace-web.qtstage.io/recent-stories/news/business",
+ id: 5752,
+ "parent-id": 5670,
+ "display-name": "Business",
+ collection: {
+ slug: "business1",
+ name: "Business News",
+ id: 2729,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key":
+ "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+ },
+ "access-level-value": null,
+ "content-created-at": 1568977220927,
+ "owner-name": "Ashwini Mohan",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ comments: null,
+ entities: {},
+ "published-at": 1568978485926,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: "Social Description",
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "attribution",
+ "bullet-type": "123",
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "hero-image-s3-key":
+ "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ contributors: [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/b4f33f98-8814-4675-97f0-75e447e43ab8/element/212be322-baaa-46a1-ae92-7f8f79fc4107",
+ type: "youtube-video",
+ "family-id": "e6b6aecf-3bc6-451b-ac69-33aa3d79ce6b",
+ title: "",
+ id: "212be322-baaa-46a1-ae92-7f8f79fc4107",
+ url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
+ "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
+ metadata: {},
+ subtype: null,
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1568977881112,
+ "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
+ "card-added-at": 1568977256690,
+ status: "draft",
+ id: "8db07059-5344-4859-bfbb-441148b13a02",
+ "content-id": "8db07059-5344-4859-bfbb-441148b13a02",
+ version: 4,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Untitled Sep 20, 2019 04:30 PM",
+ message: "Social Description",
+ image: {
+ key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ url: null,
+ attribution: "attribution",
+ caption: "caption",
+ metadata: {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
+ "content-type": "story",
+ "content-updated-at": 1568978486084,
+ "author-id": 299252,
+ "owner-id": 299252,
+ "linked-story-ids": [],
+ access: null,
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1568977881440,
+ "hero-image-caption": "caption",
+ version: 7,
+ "story-template": "video",
+ "sequence-no": null,
+ "created-at": 1568978481003,
+ authors: [
+ {
+ id: 299252,
+ name: "Ashwini Mohan",
+ slug: "ashwini-mohan",
+ "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Ashwini Mohan",
+ },
+ },
+ {
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "associated-metadata": {},
+ type: "story",
+ story: {
+ "updated-at": 1568978484435,
+ seo: {
+ "meta-description": "Meta description",
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 299252,
+ "author-name": "Ashwini Mohan",
+ tags: [
+ {
+ id: 168475,
+ name: "news",
+ "meta-description": null,
+ slug: "news",
+ "tag-type": "Tag",
+ },
+ ],
+ headline: "Untitled Sep 20, 2019 04:30 PM",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ slug: "recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "last-published-at": 1568978485926,
+ subheadline: "TESTING DESCRIPTION FIELD.",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "business",
+ name: "Business",
+ "section-url": "https://ace-web.qtstage.io/recent-stories/news/business",
+ id: 5752,
+ "parent-id": 5670,
+ "display-name": "Business",
+ collection: {
+ slug: "business1",
+ name: "Business News",
+ id: 2729,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key":
+ "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+ },
+ "access-level-value": null,
+ "content-created-at": 1568977220927,
+ "owner-name": "Ashwini Mohan",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ comments: null,
+ entities: {},
+ "published-at": 1568978485926,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: "Social Description",
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "attribution",
+ "bullet-type": "123",
+ id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
+ "hero-image-s3-key":
+ "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ contributors: [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/b4f33f98-8814-4675-97f0-75e447e43ab8/element/212be322-baaa-46a1-ae92-7f8f79fc4107",
+ type: "youtube-video",
+ "family-id": "e6b6aecf-3bc6-451b-ac69-33aa3d79ce6b",
+ title: "",
+ id: "212be322-baaa-46a1-ae92-7f8f79fc4107",
+ url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
+ "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
+ metadata: {},
+ subtype: null,
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1568977881112,
+ "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
+ "card-added-at": 1568977256690,
+ status: "draft",
+ id: "8db07059-5344-4859-bfbb-441148b13a02",
+ "content-id": "8db07059-5344-4859-bfbb-441148b13a02",
+ version: 4,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Untitled Sep 20, 2019 04:30 PM",
+ message: "Social Description",
+ image: {
+ key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+ url: null,
+ attribution: "attribution",
+ caption: "caption",
+ metadata: {
+ width: 1024,
+ height: 576,
+ "focus-point": [676, 312],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
+ "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
+ "content-type": "story",
+ "content-updated-at": 1568978486084,
+ "author-id": 299252,
+ "owner-id": 299252,
+ "linked-story-ids": [],
+ access: null,
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1568977881440,
+ "hero-image-caption": "caption",
+ version: 7,
+ "story-template": "video",
+ "sequence-no": null,
+ "created-at": 1568978481003,
+ authors: [
+ {
+ id: 299252,
+ name: "Ashwini Mohan",
+ slug: "ashwini-mohan",
+ "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Ashwini Mohan",
+ },
+ },
+ {
+ id: 42230,
+ "associated-metadata": {},
+ type: "collection",
+ name: "New Collection for test 123",
+ slug: "new-collection-for-test-123",
+ template: "section",
+ metadata: {
+ "cover-image": {
+ "cover-image-url":
+ "http://thumbor-stg.assettype.com/ace/2018-10/7caece74-bdc3-4f1e-bcc7-80d7129d770c/trailer.jpeg",
+ "cover-image-metadata": {
+ width: 720,
+ "mime-type": "image/jpeg",
+ height: 1080,
+ "focus-point": [350, 648],
+ },
+ "cover-image-s3-key": "ace/2018-10/7caece74-bdc3-4f1e-bcc7-80d7129d770c/trailer.jpeg",
+ caption: "thugs of hindustan",
+ },
+ },
+ "collection-date": null,
+ },
+ {
+ id: 67979,
+ "associated-metadata": {},
+ type: "collection",
+ name: "Collection Test",
+ slug: "collectiontest",
+ template: "default",
+ metadata: {
+ "cover-image": null,
+ },
+ "collection-date": null,
+ },
+ {
+ id: 68415,
+ "associated-metadata": {},
+ type: "collection",
+ name: "Foo test collection",
+ slug: "foo",
+ template: "default",
+ metadata: {
+ "cover-image": null,
+ },
+ "collection-date": null,
+ },
+ {
+ id: "7afda60c-1360-4320-bbe2-d6e29a8bcb1d",
+ "associated-metadata": {},
+ type: "story",
+ story: {
+ "updated-at": 1570786673740,
+ seo: {
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 187245,
+ "author-name": "Shreya Shukla",
+ tags: [],
+ headline: "Subscribed story time stamp test",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "7afda60c-1360-4320-bbe2-d6e29a8bcb1d",
+ slug: "health/time-stamp-test",
+ "linked-stories": {
+ "39b60649-aa6f-49f6-8365-0981b799b3b7": {
+ "author-name": "Shitesh Jain",
+ headline: "New Summary test",
+ "story-content-id": "39b60649-aa6f-49f6-8365-0981b799b3b7",
+ slug: "current-affairs/new-summary-test",
+ sections: [
+ {
+ id: 6449,
+ name: "Current Affairs",
+ slug: "current-affairs",
+ data: null,
+ },
+ ],
+ "hero-image-metadata": {
+ width: 960,
+ "mime-type": "image/png",
+ height: 603,
+ "focus-point": [535, 225],
+ },
+ "hero-image-s3-key": "ace/2018-12/d65b8758-9130-417f-bd97-c181661d6701/cat_1285634_960_720.png",
+ url: "https://ace-web.qtstage.io/current-affairs/new-summary-test",
+ "content-updated-at": 1555409545429,
+ "author-id": 234915,
+ "first-published-at": 1555408930663,
+ authors: [
+ {
+ id: 234915,
+ name: "Shitesh Jain",
+ slug: "shitesh-jain-4",
+ "avatar-url": "https://lh3.googleusercontent.com/a-/AAuE7mBO5TOGmzwz6_e4-1i0wQ2-Z8qEnkyp3GWL-aGm",
+ "avatar-s3-key": null,
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ },
+ },
+ "last-published-at": 1570786676787,
+ subheadline:
+ "time stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp test",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "health",
+ name: "Health",
+ "section-url": "https://ace-web.qtstage.io/health",
+ id: 11181,
+ "parent-id": null,
+ "display-name": "Health",
+ collection: {
+ slug: "health",
+ name: "Health",
+ id: 15603,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key":
+ "ace/story-audio/2019-10/7afda60c-1360-4320-bbe2-d6e29a8bcb1d/.cd246a47-5dd8-4636-8db7-d15b205ca999.mp3",
+ },
+ "access-level-value": null,
+ "content-created-at": 1569910912673,
+ "owner-name": "Shreya Shukla",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 266,
+ height: 190,
+ },
+ comments: null,
+ entities: {},
+ "published-at": 1570786676787,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: null,
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "Bacardi test ",
+ "bullet-type": "123",
+ id: "7afda60c-1360-4320-bbe2-d6e29a8bcb1d",
+ "hero-image-s3-key": "ace/2018-12/89a3fa9c-0b79-4140-b0ef-d1a35ea0b733/dog4.jpeg",
+ contributors: [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/7afda60c-1360-4320-bbe2-d6e29a8bcb1d/element/14890d2e-936a-459e-aed5-dd8e330c38d3",
+ type: "text",
+ "family-id": "950885ec-e6c2-4ee7-9269-d2de475338d2",
+ title: "",
+ id: "14890d2e-936a-459e-aed5-dd8e330c38d3",
+ metadata: {},
+ subtype: "summary",
+ text: "time stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp test
",
+ },
+ ],
+ "card-updated-at": 1569910964026,
+ "content-version-id": "fcf58ef5-1e24-41b0-ae31-d0de0594cf7f",
+ "card-added-at": 1569910912686,
+ status: "draft",
+ id: "a6781258-a4ee-49e6-aec5-f5383db3abfa",
+ "content-id": "a6781258-a4ee-49e6-aec5-f5383db3abfa",
+ version: 3,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Subscribed story time stamp test",
+ message: null,
+ image: {
+ key: "ace/2018-12/89a3fa9c-0b79-4140-b0ef-d1a35ea0b733/dog4.jpeg",
+ url: null,
+ attribution: "Bacardi test ",
+ caption: "test image caption ",
+ metadata: {
+ width: 266,
+ height: 190,
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/7afda60c-1360-4320-bbe2-d6e29a8bcb1d/element/cfd952a3-ce14-455d-bc27-6fd8ba9720c8",
+ type: "text",
+ "family-id": "3cd75898-e31f-404c-ad68-16f4b4aa6be7",
+ title: "",
+ id: "cfd952a3-ce14-455d-bc27-6fd8ba9720c8",
+ metadata: {
+ "linked-story": {
+ headline: "New Summary test",
+ "story-content-id": "39b60649-aa6f-49f6-8365-0981b799b3b7",
+ "highlighted-text": "",
+ id: "39b60649-aa6f-49f6-8365-0981b799b3b7",
+ "highlighted-headline": null,
+ },
+ "linked-story-id": "39b60649-aa6f-49f6-8365-0981b799b3b7",
+ },
+ subtype: "also-read",
+ text: "New Summary test",
+ },
+ {
+ description: "",
+ "page-url": "/story/7afda60c-1360-4320-bbe2-d6e29a8bcb1d/element/927048d7-7410-4c11-83df-12ddcc6e0705",
+ type: "text",
+ "family-id": "575266d7-935b-4ec1-bd80-2e5deee1b7be",
+ title: "",
+ id: "927048d7-7410-4c11-83df-12ddcc6e0705",
+ metadata: {},
+ subtype: null,
+ text: "n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is
",
+ },
+ {
+ description: "",
+ "page-url": "/story/7afda60c-1360-4320-bbe2-d6e29a8bcb1d/element/1b742dc6-b708-40f4-a365-03340bf111bf",
+ type: "text",
+ "family-id": "3e89c0ef-3f77-472f-a437-cc269c151578",
+ title: "",
+ id: "1b742dc6-b708-40f4-a365-03340bf111bf",
+ metadata: {},
+ subtype: null,
+ text: "a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.
",
+ },
+ ],
+ "card-updated-at": 1569910964026,
+ "content-version-id": "21fc3ac1-304d-46fe-a467-e114cca94ef7",
+ "card-added-at": 1569910960556,
+ status: "draft",
+ id: "399ed9ee-84b3-44fa-918c-5d3e6db3a00b",
+ "content-id": "399ed9ee-84b3-44fa-918c-5d3e6db3a00b",
+ version: 2,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Subscribed story time stamp test",
+ message: null,
+ image: {
+ key: "ace/2018-12/89a3fa9c-0b79-4140-b0ef-d1a35ea0b733/dog4.jpeg",
+ url: null,
+ attribution: "Bacardi test ",
+ caption: "test image caption ",
+ metadata: {
+ width: 266,
+ height: 190,
+ },
+ },
+ },
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/7afda60c-1360-4320-bbe2-d6e29a8bcb1d/element/6afe8b08-59af-4886-8d55-92bbf5fbebeb",
+ type: "text",
+ "family-id": "4cb68e4c-556e-49e4-917f-41a9754815f6",
+ title: "",
+ id: "6afe8b08-59af-4886-8d55-92bbf5fbebeb",
+ metadata: {},
+ subtype: null,
+ text: "a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.
",
+ },
+ ],
+ "card-updated-at": 1570786670702,
+ "content-version-id": "68b4c7d6-489c-42c3-b61a-83b159168dc3",
+ "card-added-at": 1570786670702,
+ status: "draft",
+ id: "e46eb9a5-c0eb-40a1-84c4-da93b83ec752",
+ "content-id": "e46eb9a5-c0eb-40a1-84c4-da93b83ec752",
+ version: 1,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Subscribed story time stamp test",
+ message: null,
+ image: {
+ key: "ace/2018-12/89a3fa9c-0b79-4140-b0ef-d1a35ea0b733/dog4.jpeg",
+ url: null,
+ attribution: "Bacardi test ",
+ caption: "test image caption ",
+ metadata: {
+ width: 266,
+ height: 190,
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/7afda60c-1360-4320-bbe2-d6e29a8bcb1d/element/10d364a0-ddf3-433b-ab07-235f29e21041",
+ type: "text",
+ "family-id": "cfc8d303-17cc-4e8f-9bf2-0815e840358c",
+ title: "",
+ id: "10d364a0-ddf3-433b-ab07-235f29e21041",
+ metadata: {},
+ subtype: null,
+ text: "a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.
",
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1570786670702,
+ "content-version-id": "c3a31b91-b606-4524-a36b-a35fbd174585",
+ "card-added-at": 1570786670702,
+ status: "draft",
+ id: "f96ce2f4-550b-476a-889a-24e0b1b8d704",
+ "content-id": "f96ce2f4-550b-476a-889a-24e0b1b8d704",
+ version: 1,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Subscribed story time stamp test",
+ message: null,
+ image: {
+ key: "ace/2018-12/89a3fa9c-0b79-4140-b0ef-d1a35ea0b733/dog4.jpeg",
+ url: null,
+ attribution: "Bacardi test ",
+ caption: "test image caption ",
+ metadata: {
+ width: 266,
+ height: 190,
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/health/time-stamp-test",
+ "story-version-id": "fd873d9b-5f08-4d8e-ac03-eb3f30eaf619",
+ "content-type": "story",
+ "content-updated-at": 1570786676934,
+ "author-id": 187245,
+ "owner-id": 187245,
+ "linked-story-ids": ["39b60649-aa6f-49f6-8365-0981b799b3b7"],
+ access: "subscription",
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1569910964399,
+ "hero-image-caption": "test image caption ",
+ version: 5,
+ "story-template": "text",
+ "sequence-no": null,
+ "created-at": 1570786670689,
+ authors: [
+ {
+ id: 187245,
+ name: "Shreya Shukla",
+ slug: "shreya-shukla-2",
+ "avatar-url":
+ "https://lh6.googleusercontent.com/-pBdJGAfN81c/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfmrjS-gWdYzH3Gtmuib3KbVLdixw/photo.jpg",
+ "avatar-s3-key": null,
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Shreya Shukla",
+ },
+ },
+ {
+ id: "f299b7e4-affa-4f22-8143-c700a736f1bd",
+ "associated-metadata": {},
+ type: "story",
+ story: {
+ "updated-at": 1570794627091,
+ seo: {
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 187245,
+ "author-name": "Shreya Shukla",
+ tags: [],
+ headline: "Login demo story",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "f299b7e4-affa-4f22-8143-c700a736f1bd",
+ slug: "parent-sec/child-sec/demo-story-2",
+ "last-published-at": 1570794629699,
+ subheadline: "demo story",
+ alternative: {
+ home: {
+ default: {
+ headline: "alternate story",
+ "hero-image": null,
+ },
+ },
+ },
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "child-sec",
+ name: "child-sec",
+ "section-url": "https://ace-web.qtstage.io/parent-sec/child-sec",
+ id: 11825,
+ "parent-id": 11824,
+ "display-name": "child-sec",
+ collection: {
+ slug: "child-sec-parent-sec",
+ name: "child-sec (parent-sec)",
+ id: 17115,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key":
+ "ace/story-audio/2019-10/f299b7e4-affa-4f22-8143-c700a736f1bd/.d60110cf-9fdd-4366-8e36-6f0cfb3956e7.mp3",
+ },
+ "access-level-value": null,
+ "content-created-at": 1569826641547,
+ "owner-name": "Shreya Shukla",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 760,
+ "mime-type": "image/jpeg",
+ height: 506,
+ "focus-point": [439, 232],
+ },
+ comments: null,
+ entities: {},
+ "published-at": 1570794629699,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: null,
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "happy panda",
+ "bullet-type": "123",
+ id: "f299b7e4-affa-4f22-8143-c700a736f1bd",
+ "hero-image-s3-key": "ace/2019-05/8eb4b983-f33f-4fa4-926b-115b7dd60c21/panda.jpg",
+ contributors: [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/f299b7e4-affa-4f22-8143-c700a736f1bd/element/9c89611d-b826-48f4-9a26-bab2ddc0eb88",
+ type: "text",
+ "family-id": "3845f45a-f599-4a01-ba1d-4224318a13e8",
+ title: "",
+ id: "9c89611d-b826-48f4-9a26-bab2ddc0eb88",
+ metadata: {},
+ subtype: "summary",
+ text: "We're experiencing a problem here, our developers are on the case. Please try it later.
",
+ },
+ ],
+ "card-updated-at": 1569826764243,
+ "content-version-id": "f341dc46-b043-4c8d-ac8f-ec737e5f1c25",
+ "card-added-at": 1569826743217,
+ status: "draft",
+ id: "92eb9283-6877-4b5e-a0f4-205415da4493",
+ "content-id": "92eb9283-6877-4b5e-a0f4-205415da4493",
+ version: 3,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Login demo story",
+ message: null,
+ image: {
+ key: "ace/2019-05/8eb4b983-f33f-4fa4-926b-115b7dd60c21/panda.jpg",
+ url: null,
+ attribution: "happy panda",
+ caption: "panda",
+ metadata: {
+ width: 760,
+ "mime-type": "image/jpeg",
+ height: 506,
+ "focus-point": [439, 232],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/f299b7e4-affa-4f22-8143-c700a736f1bd/element/c7686ef5-2969-44b2-b1a8-6ad7935450e5",
+ type: "text",
+ "family-id": "16677d69-5bcf-4b66-a07a-460eb77b3384",
+ title: "",
+ id: "c7686ef5-2969-44b2-b1a8-6ad7935450e5",
+ metadata: {},
+ subtype: null,
+ text: "Card2
",
+ },
+ ],
+ "card-updated-at": 1570794624997,
+ "content-version-id": "51549b8a-6773-4566-8b94-7bde39b8a750",
+ "card-added-at": 1570794624997,
+ status: "draft",
+ id: "ece586e2-eb7f-462c-841c-f74ac424fc50",
+ "content-id": "ece586e2-eb7f-462c-841c-f74ac424fc50",
+ version: 1,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Login demo story",
+ message: null,
+ image: {
+ key: "ace/2019-05/8eb4b983-f33f-4fa4-926b-115b7dd60c21/panda.jpg",
+ url: null,
+ attribution: "happy panda",
+ caption: "panda",
+ metadata: {
+ width: 760,
+ "mime-type": "image/jpeg",
+ height: 506,
+ "focus-point": [439, 232],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/f299b7e4-affa-4f22-8143-c700a736f1bd/element/2ec760e4-9194-4ea2-86a0-6ab0070cb0dd",
+ type: "text",
+ "family-id": "a60e47f7-cd38-4a4b-819f-3485678ebdb9",
+ title: "",
+ id: "2ec760e4-9194-4ea2-86a0-6ab0070cb0dd",
+ metadata: {},
+ subtype: null,
+ text: "card 3
",
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1570794624997,
+ "content-version-id": "6ae26343-7c87-484f-a5a7-b4f41855b50c",
+ "card-added-at": 1570794624997,
+ status: "draft",
+ id: "18a2fdb0-3e43-40f7-99e9-67ad0bf2bbca",
+ "content-id": "18a2fdb0-3e43-40f7-99e9-67ad0bf2bbca",
+ version: 1,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Login demo story",
+ message: null,
+ image: {
+ key: "ace/2019-05/8eb4b983-f33f-4fa4-926b-115b7dd60c21/panda.jpg",
+ url: null,
+ attribution: "happy panda",
+ caption: "panda",
+ metadata: {
+ width: 760,
+ "mime-type": "image/jpeg",
+ height: 506,
+ "focus-point": [439, 232],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/parent-sec/child-sec/demo-story-2",
+ "story-version-id": "06320d9a-db59-4ff7-ad18-4b2e3649b1bb",
+ "content-type": "story",
+ "content-updated-at": 1570794629865,
+ "author-id": 187245,
+ "owner-id": 187245,
+ "linked-story-ids": [],
+ access: "login",
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1569826764621,
+ "hero-image-caption": "panda",
+ version: 9,
+ "story-template": "text",
+ "sequence-no": null,
+ "created-at": 1570794624975,
+ authors: [
+ {
+ id: 187245,
+ name: "Shreya Shukla",
+ slug: "shreya-shukla-2",
+ "avatar-url":
+ "https://lh6.googleusercontent.com/-pBdJGAfN81c/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfmrjS-gWdYzH3Gtmuib3KbVLdixw/photo.jpg",
+ "avatar-s3-key": null,
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Shreya Shukla",
+ },
+ },
+ {
+ id: "8ed73f9f-ac4e-453b-8508-1b5fbd99e71d",
+ "associated-metadata": {},
+ type: "story",
+ story: {
+ "updated-at": 1571032556498,
+ seo: {
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 187245,
+ "author-name": "Shreya Shukla",
+ tags: [],
+ headline: "listicle with bullets.",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "8ed73f9f-ac4e-453b-8508-1b5fbd99e71d",
+ slug: "lifestyle/listicle-with-reverse-count",
+ "last-published-at": 1571032559396,
+ subheadline: "listicle with reverse countlisticle with reverse countlisticle with reverse count",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "lifestyle",
+ name: "Lifestyle",
+ "section-url": "https://ace-web.qtstage.io/lifestyle",
+ id: 5751,
+ "parent-id": null,
+ "display-name": "Lifestyle",
+ collection: {
+ slug: "lifestyle-updated-slug",
+ name: "sports",
+ id: 2728,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key":
+ "ace/story-audio/2019-10/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/.f6427b6a-1695-4718-9ced-9c1eab9303e8.mp3",
+ },
+ "access-level-value": 100,
+ "content-created-at": 1559584761098,
+ "owner-name": "Shreya Shukla",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 528,
+ height: 350,
+ },
+ comments: null,
+ entities: {},
+ "published-at": 1571032559396,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: null,
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution":
+ "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestatt",
+ "bullet-type": "bullets",
+ id: "8ed73f9f-ac4e-453b-8508-1b5fbd99e71d",
+ "hero-image-s3-key": "ace/2018-12/c19f080d-024d-4080-8bb0-13a2d85242a2/rose_blue_flower_rose_blooms_67636.jpeg",
+ contributors: [],
+ cards: [
+ {
+ "card-type": "introduction",
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/f4e0e915-046b-485f-99a2-b6627d2952c7",
+ type: "text",
+ "family-id": "f93b4a80-b160-47d9-bea6-8e8f6b9eb502",
+ title: "",
+ id: "f4e0e915-046b-485f-99a2-b6627d2952c7",
+ metadata: {},
+ subtype: null,
+ text: "Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.
",
+ },
+ ],
+ "card-updated-at": 1564139386962,
+ "content-version-id": "7d8792eb-5e65-461b-b956-44ded3f0d24b",
+ "card-added-at": 1559584761115,
+ status: "draft",
+ id: "442ab923-a0ee-46c6-8f2a-9d1e77897219",
+ "content-id": "442ab923-a0ee-46c6-8f2a-9d1e77897219",
+ version: 4,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "listicle with bullets.",
+ message: null,
+ image: {
+ key: "ace/2018-12/c19f080d-024d-4080-8bb0-13a2d85242a2/rose_blue_flower_rose_blooms_67636.jpeg",
+ url: null,
+ attribution:
+ "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestatt",
+ caption:
+ "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontesta",
+ metadata: {
+ width: 528,
+ height: 350,
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/5368bde6-ccb6-4982-8d55-11847b9f3154",
+ type: "title",
+ "family-id": "6ac7aefc-ca88-40d3-b44d-d17df2f0d399",
+ title: "",
+ id: "5368bde6-ccb6-4982-8d55-11847b9f3154",
+ metadata: {},
+ subtype: null,
+ text: "hello i am first carddfghjkljhgfdfghj",
+ },
+ {
+ description: "",
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/772acc11-18a5-4708-9bbf-358e49cd74ce",
+ type: "text",
+ "family-id": "b95f7938-cba5-4f24-a2b0-8d9a7916e5a7",
+ title: "",
+ id: "772acc11-18a5-4708-9bbf-358e49cd74ce",
+ metadata: {},
+ subtype: null,
+ text: "Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.
",
+ },
+ {
+ description: "",
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/1c9a67ee-4dd9-46ef-9302-d1e8287761f0",
+ type: "text",
+ "family-id": "9b455959-c6bb-4f1d-b632-44302281455f",
+ title: "",
+ id: "1c9a67ee-4dd9-46ef-9302-d1e8287761f0",
+ metadata: {},
+ subtype: null,
+ text: "hello
",
+ },
+ ],
+ "card-updated-at": 1571032554331,
+ "content-version-id": "1ed6c4b7-bcc0-4a86-827d-35dc78d60ecb",
+ "card-added-at": 1559584761115,
+ status: "draft",
+ id: "c1fbebd8-b22e-48e4-a4bc-2238295be273",
+ "content-id": "c1fbebd8-b22e-48e4-a4bc-2238295be273",
+ version: 4,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "listicle with bullets.",
+ message: null,
+ image: {
+ key: "ace/2018-12/c19f080d-024d-4080-8bb0-13a2d85242a2/rose_blue_flower_rose_blooms_67636.jpeg",
+ url: null,
+ attribution:
+ "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestatt",
+ caption:
+ "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontesta",
+ metadata: {
+ width: 528,
+ height: 350,
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/8295725e-fc67-45ad-8a97-5df01700b9c5",
+ type: "title",
+ "family-id": "8c7bc2d4-f2dd-474a-b512-4bd4d5468922",
+ title: "",
+ id: "8295725e-fc67-45ad-8a97-5df01700b9c5",
+ metadata: {},
+ subtype: null,
+ text: "hello i am second card ",
+ },
+ {
+ description: "",
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/27475841-6f66-49c8-a90a-1f03cd4b96a6",
+ type: "text",
+ "family-id": "eb7f0486-93f7-4264-8bc2-1412293972e7",
+ title: "",
+ id: "27475841-6f66-49c8-a90a-1f03cd4b96a6",
+ metadata: {},
+ subtype: null,
+ text: "Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.
",
+ },
+ {
+ description: "",
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/d6aaf29f-5009-4855-af3f-97db32afd742",
+ type: "text",
+ "family-id": "5b8cf546-9619-4aa1-8e50-c3cd7f4edcb2",
+ title: "",
+ id: "d6aaf29f-5009-4855-af3f-97db32afd742",
+ metadata: {},
+ subtype: "summary",
+ text: "Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.
",
+ },
+ ],
+ "card-updated-at": 1559584934935,
+ "content-version-id": "879d8715-b71a-439c-a222-cb568e0a9870",
+ "card-added-at": 1559584761115,
+ status: "draft",
+ id: "677afe0a-76af-4d72-825b-3aa815e912f3",
+ "content-id": "677afe0a-76af-4d72-825b-3aa815e912f3",
+ version: 2,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "listicle with bullets.",
+ message: null,
+ image: {
+ key: "ace/2018-12/c19f080d-024d-4080-8bb0-13a2d85242a2/rose_blue_flower_rose_blooms_67636.jpeg",
+ url: null,
+ attribution:
+ "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestatt",
+ caption:
+ "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontesta",
+ metadata: {
+ width: 528,
+ height: 350,
+ },
+ },
+ },
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/52f3c740-4060-4151-962a-fbe6cba30e4f",
+ type: "title",
+ "family-id": "4bb2a1d1-2f09-40f9-a872-f2459b56932f",
+ title: "",
+ id: "52f3c740-4060-4151-962a-fbe6cba30e4f",
+ metadata: {},
+ subtype: null,
+ text: "hello i am third card ",
+ },
+ {
+ description: "",
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/6e3384be-dd15-4e1d-b4cc-2c6c9de35750",
+ type: "text",
+ "family-id": "8f1fd420-05a4-4a31-ab3f-57a4db8d40e2",
+ title: "",
+ id: "6e3384be-dd15-4e1d-b4cc-2c6c9de35750",
+ metadata: {
+ content:
+ "Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.",
+ attribution: "someone",
+ },
+ subtype: "blockquote",
+ text: 'Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly. someone Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.
",
+ },
+ ],
+ "card-updated-at": 1559584934935,
+ "content-version-id": "d65bf540-af25-47ab-b438-2cad006de1ac",
+ "card-added-at": 1559584761115,
+ status: "draft",
+ id: "427b4e00-f182-4fc9-8e7e-ca10a56b5e9f",
+ "content-id": "427b4e00-f182-4fc9-8e7e-ca10a56b5e9f",
+ version: 2,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "listicle with bullets.",
+ message: null,
+ image: {
+ key: "ace/2018-12/c19f080d-024d-4080-8bb0-13a2d85242a2/rose_blue_flower_rose_blooms_67636.jpeg",
+ url: null,
+ attribution:
+ "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestatt",
+ caption:
+ "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontesta",
+ metadata: {
+ width: 528,
+ height: 350,
+ },
+ },
+ },
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/b50cd4c2-8e64-40f1-8825-05888179be4f",
+ type: "title",
+ "family-id": "9c4762e0-41f1-45c2-8a6b-1f49b16adaa3",
+ title: "",
+ id: "b50cd4c2-8e64-40f1-8825-05888179be4f",
+ metadata: {},
+ subtype: null,
+ text: "This is 4th card",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ "mime-type": "image/jpeg",
+ width: 276,
+ height: 182,
+ },
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/2a6ccb57-a1ee-4133-aae9-b6781e6f5c2c",
+ type: "image",
+ "family-id": "16589660-75c6-4fc7-8e73-61de136d04b9",
+ "image-attribution": "",
+ title: "",
+ id: "2a6ccb57-a1ee-4133-aae9-b6781e6f5c2c",
+ "image-s3-key": "ace/2019-02/45734b07-c503-4e8a-b7f3-017aed5ba1d7/images.jpeg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ ],
+ "card-updated-at": 1561458187551,
+ "content-version-id": "1380eb36-9c21-4879-be8c-3e6e3ed8d6da",
+ "card-added-at": 1561458183510,
+ status: "draft",
+ id: "301503ba-6962-4e12-9811-e3981e787813",
+ "content-id": "301503ba-6962-4e12-9811-e3981e787813",
+ version: 2,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "listicle with bullets.",
+ message: null,
+ image: {
+ key: "ace/2019-02/45734b07-c503-4e8a-b7f3-017aed5ba1d7/images.jpeg",
+ url: null,
+ attribution: "",
+ caption: null,
+ metadata: {
+ "mime-type": "image/jpeg",
+ width: 276,
+ height: 182,
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/5d399d4b-4194-4deb-b2df-97d8b49d3323",
+ type: "title",
+ "family-id": "d51bfda1-54c6-4da2-a23d-e4451e5f0c05",
+ title: "",
+ id: "5d399d4b-4194-4deb-b2df-97d8b49d3323",
+ metadata: {},
+ subtype: null,
+ text: "This is fifth card",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ width: 1024,
+ "mime-type": "image/jpeg",
+ height: 768,
+ },
+ "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/717d2b94-43dd-42a0-af5c-840c8d4e22fb",
+ type: "image",
+ "family-id": "f17adad4-8762-4f98-905e-130ceacb2711",
+ "image-attribution": "",
+ title: "",
+ id: "717d2b94-43dd-42a0-af5c-840c8d4e22fb",
+ "image-s3-key": "ace/2019-02/45b42adb-8eb6-4f96-8fde-2138e319a39f/jpeg_43.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1561458187551,
+ "content-version-id": "f9574387-5fbe-4c45-b918-86f2d72736e9",
+ "card-added-at": 1561458183510,
+ status: "draft",
+ id: "88cbfa23-98be-46b6-a47a-168399a45e76",
+ "content-id": "88cbfa23-98be-46b6-a47a-168399a45e76",
+ version: 2,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "listicle with bullets.",
+ message: null,
+ image: {
+ key: "ace/2019-02/45b42adb-8eb6-4f96-8fde-2138e319a39f/jpeg_43.jpg",
+ url: null,
+ attribution: "",
+ caption: null,
+ metadata: {
+ width: 1024,
+ "mime-type": "image/jpeg",
+ height: 768,
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/lifestyle/listicle-with-reverse-count",
+ "story-version-id": "de2bbceb-432e-4c1b-ad47-3ee517cd3c61",
+ "content-type": "story",
+ "content-updated-at": 1571032559605,
+ "author-id": 187245,
+ "owner-id": 187245,
+ "linked-story-ids": [],
+ access: "subscription",
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1559584940824,
+ "hero-image-caption":
+ "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontesta",
+ version: 21,
+ "story-template": "listicle",
+ "sequence-no": null,
+ "created-at": 1571032554310,
+ authors: [
+ {
+ id: 187245,
+ name: "Shreya Shukla",
+ slug: "shreya-shukla-2",
+ "avatar-url":
+ "https://lh6.googleusercontent.com/-pBdJGAfN81c/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfmrjS-gWdYzH3Gtmuib3KbVLdixw/photo.jpg",
+ "avatar-s3-key": null,
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Shreya Shukla",
+ },
+ },
+ {
+ id: "f8803324-6cdf-434c-b9a7-b89cc5309ed7",
+ "associated-metadata": {},
+ type: "story",
+ story: {
+ "updated-at": 1571034606062,
+ seo: {
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 331449,
+ "author-name": "Ekta Patnaik",
+ tags: [],
+ headline: "live blog test hero image",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "f8803324-6cdf-434c-b9a7-b89cc5309ed7",
+ slug: "elections-2018/live-blog-test-hero-image",
+ "last-published-at": 1571034606123,
+ subheadline: "subtile test for cat",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "elections-2018",
+ name: "Elections 2018",
+ "section-url": "https://ace-web.qtstage.io/elections-2018",
+ id: 18454,
+ "parent-id": null,
+ "display-name": "Elections 2018",
+ collection: {
+ slug: "elections-2018",
+ name: "Elections 2018",
+ id: 23928,
+ },
+ data: {
+ color: "#7b4f4f",
+ },
+ },
+ ],
+ "story-audio": {
+ "s3-key": null,
+ },
+ "access-level-value": null,
+ "content-created-at": 1569328762732,
+ "owner-name": "Ekta Patnaik",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 586,
+ height: 781,
+ },
+ comments: null,
+ entities: {},
+ "published-at": 1571034606123,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: null,
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": null,
+ "bullet-type": "123",
+ id: "f8803324-6cdf-434c-b9a7-b89cc5309ed7",
+ "hero-image-s3-key": "ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg",
+ contributors: [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "image-url":
+ "https://thumbor-stg.assettype.com/ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg",
+ "member-id": 94985,
+ "image-metadata": {
+ width: 586,
+ height: 781,
+ },
+ "uploaded-at": 1567659556059,
+ "page-url": "/story/f8803324-6cdf-434c-b9a7-b89cc5309ed7/element/2e9023af-9273-4f0b-ba9c-3e769fc8e3a0",
+ type: "image",
+ "family-id": "15f35589-5213-4f3b-8c6e-6c61ad9fd1d4",
+ "image-attribution": "",
+ title: "",
+ id: "2e9023af-9273-4f0b-ba9c-3e769fc8e3a0",
+ "image-s3-key": "ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1569328777159,
+ "content-version-id": "1793fbc8-a4eb-4681-8688-538a34206d0f",
+ "card-added-at": 1569328762738,
+ status: "draft",
+ id: "0524a15f-e668-4ec4-a66e-811f1ef87d6b",
+ "content-id": "0524a15f-e668-4ec4-a66e-811f1ef87d6b",
+ version: 3,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "live blog test hero image",
+ message: null,
+ image: {
+ key: "ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg",
+ url: "https://thumbor-stg.assettype.com/ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg",
+ attribution: "",
+ caption: null,
+ metadata: {
+ width: 586,
+ height: 781,
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/elections-2018/live-blog-test-hero-image",
+ "story-version-id": "a97d774a-eca5-4fab-8fb8-722c11dafa21",
+ "content-type": "story",
+ "content-updated-at": 1571034606198,
+ "author-id": 331449,
+ "owner-id": 331449,
+ "linked-story-ids": [],
+ access: null,
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1569328777608,
+ "hero-image-caption": null,
+ version: 5,
+ "story-template": "live-blog",
+ "sequence-no": null,
+ "created-at": 1571034606062,
+ authors: [
+ {
+ id: 331449,
+ name: "Ekta Patnaik",
+ slug: "ekta-patnaik",
+ "avatar-url":
+ "https://lh4.googleusercontent.com/-dsCFV4xALkk/AAAAAAAAAAI/AAAAAAAAAA8/UrIF-fDvZYU/photo.jpg",
+ "avatar-s3-key": "ace/2019-07/8c418178-ede3-4e8e-995d-9b703cb589e7/IMG_20190502_000217.jpg",
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "hero-image-url":
+ "https://thumbor-stg.assettype.com/ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg",
+ "publish-at": null,
+ "assignee-name": "Ekta Patnaik",
+ },
+ },
+ ],
+ "created-at": 1571041151571,
+ metadata: {
+ "cover-image": {
+ "cover-image-s3-key": "ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg",
+ "cover-image-metadata": {
+ width: 586,
+ height: 781,
+ "focus-point": [293, 391],
+ },
+ caption: "",
+ "cover-image-url":
+ "https://thumbor-stg.assettype.com/ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg",
+ },
+ },
+};
diff --git a/app/isomorphic/arrow/components/Fixture/dummyStory.js b/app/isomorphic/arrow/components/Fixture/dummyStory.js
new file mode 100644
index 000000000..1a29af88b
--- /dev/null
+++ b/app/isomorphic/arrow/components/Fixture/dummyStory.js
@@ -0,0 +1,2188 @@
+function createUUID() {
+ var dt = new Date().getTime();
+ var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+ var r = (dt + Math.random() * 16) % 16 | 0;
+ dt = Math.floor(dt / 16);
+ return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
+ });
+ return uuid;
+}
+
+export const dummyStory = {
+ access: "subscription",
+ "updated-at": 1564650013782,
+ seo: {
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 123981,
+ "author-name": "Ravigopal Kesari",
+ tags: [
+ {
+ id: 163455,
+ name: "politics",
+ "meta-description": null,
+ slug: "politics",
+ "tag-type": "Tag",
+ },
+ {
+ id: 169510,
+ name: "review",
+ "meta-description": null,
+ slug: "review",
+ "tag-type": "Tag",
+ },
+ ],
+ customSlotAfterStory: {
+ config: { targetingId: "" },
+ layout: "Leaderboard",
+ layoutLabel: "Leaderboard",
+ type: "ad",
+ },
+ headline: "Ready Player One review \u2013 Spielberg\u00A0",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "a3561065-11ce-4281-9d86-325934aa2146",
+ slug: "recent-stories/news/ready-player-one-review-spielberg-spins-a-dizzying-vr-yarn",
+ "linked-stories": {
+ "2d0008f7-768f-4667-822f-cb531d9627f4": {
+ "author-name": "Feed Migrator",
+ headline: "How is the coronavirus impacting people with disabilities?",
+ "story-content-id": "2d0008f7-768f-4667-822f-cb531d9627f4",
+ slug: "coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities",
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "coronavirus",
+ name: "Coronavirus",
+ "section-url": "https://ace-web.qtstage.io/anything/coronavirus",
+ id: 42239,
+ "parent-id": null,
+ "display-name": "Coronavirus",
+ collection: {
+ slug: "coronavirus",
+ name: "Coronavirus",
+ id: 92836,
+ },
+ data: null,
+ },
+ ],
+ "hero-image-metadata": {
+ "original-url": "https://www.aljazeera.com/mritems/Images/2020/4/19/f90b71cdf10141ff9913b72bcfd29768_18.jpg",
+ },
+ "hero-image-s3-key": "ace/2020-04/9adec2ac-d37c-496f-abcc-98309a4bb356/f90b71cdf10141ff9913b72bcfd29768_18.jpg",
+ url: "https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities",
+ "content-updated-at": 1587491154824,
+ "author-id": 934395,
+ "first-published-at": 1587405627183,
+ authors: [
+ {
+ id: 934395,
+ name: "Feed Migrator",
+ slug: "feed-migrator",
+ "avatar-url": null,
+ "avatar-s3-key": null,
+ "twitter-handle": null,
+ bio: null,
+ },
+ ],
+ },
+ },
+ "last-published-at": 1564650017054,
+ subheadline:
+ "This spectacular gaming ride whizzes through a limitless futurescape – while also taking a puzzling detour to the shiny",
+ alternative: {
+ home: {
+ default: {
+ headline: "Movie Review: Why Ready Player One is Amazing, immerses viewers ",
+ "hero-image": {
+ "hero-image-metadata": {
+ width: 1080,
+ height: 1330,
+ "focus-point": [525, 207],
+ },
+ "hero-image-attribution": "attribution",
+ "hero-image-s3-key":
+ "ace/2018-01/7f028fc9-48fa-4e6c-b2b3-8baf1e6e8928/22520141_862918130543643_474831853139210771_o.jpg",
+ "hero-image-caption": "",
+ "hero-image-url":
+ "https://thumbor-stg.assettype.com/ace/2018-01/7f028fc9-48fa-4e6c-b2b3-8baf1e6e8928/22520141_862918130543643_474831853139210771_o.jpg",
+ "temporary-hero-image-key": null,
+ },
+ },
+ },
+ },
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "news",
+ name: "News",
+ "section-url": "https://ace-web.qtstage.io/section/news",
+ id: 5670,
+ "parent-id": 5773,
+ "display-name": "News ",
+ collection: {
+ slug: "news",
+ name: "News",
+ id: 3795,
+ },
+ data: null,
+ },
+ {
+ "domain-slug": null,
+ slug: "recent-stories",
+ name: "Recent stories",
+ "section-url": "https://ace-web.qtstage.io/anything/recent-stories",
+ id: 5773,
+ "parent-id": null,
+ "display-name": "Recent stories",
+ collection: {
+ slug: "recent",
+ name: "Recent stories",
+ id: 2760,
+ },
+ data: null,
+ },
+ {
+ "domain-slug": null,
+ slug: "film",
+ name: "Film",
+ "section-url": "https://ace-web.qtstage.io/section/film",
+ id: 5749,
+ "parent-id": 5670,
+ "display-name": "Film Display name",
+ collection: {
+ slug: "film-manual-collection",
+ name: "Film",
+ id: 2725,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key": "story-audio/ace/2019-08/a3561065-11ce-4281-9d86-325934aa2146/12132634-d337-471b-9e92-1ce7b4d15bfb.mp3",
+ },
+ "read-time": 2,
+ "access-level-value": 23,
+ "content-created-at": 1524115986915,
+ "owner-name": "Ravigopal Kesari",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-hyperlink": "https://www.google.com",
+ "hero-image-metadata": {
+ width: 1920,
+ height: 1080,
+ "mime-type": "image/png",
+ "file-size": 587085,
+ "file-name": "ready-player-one-hd-wallpapers-70749-6537851.png",
+ "focus-point": [883, 411],
+ },
+ comments: null,
+ "word-count": 323,
+ entities: {},
+ "published-at": 1564650017054,
+ "is-live-blog": false,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary:
+ "Passport is authentication middleware for Node. It is designed to serve a singular purpose: authenticate requests. When writing modules, encapsulation is a virtue, so Passport delegates all other functionality to the application. This separation of concerns keeps code clean and maintainable, and makes Passport extremely easy to integrate into an application.",
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ "is-amp-supported": false,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "Quis Nostrud",
+ "bullet-type": "123",
+ id: createUUID(),
+ "hero-image-s3-key":
+ "ace/2018-01/7f028fc9-48fa-4e6c-b2b3-8baf1e6e8928/22520141_862918130543643_474831853139210771_o.jpg",
+ contributors: [],
+ "associated-series-collection-ids": [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/49ed61fb-647e-4d23-9097-3c5088cc3fa7/element/d08cb2d1-0316-4af3-ad93-192824111745",
+ type: "text",
+ "family-id": "7e42ab53-fb73-49e9-b0fe-51a889cd3f97",
+ title: "",
+ id: "d08cb2d1-0316-4af3-ad93-192824111745",
+ metadata: {
+ "cta-title": "CTA text button",
+ "cta-url": "https://www.google.com",
+ "open-in-new-tab": true,
+ "no-follow": true,
+ },
+ subtype: "cta",
+ text: 'CTA text button The human eye can distinguish around 10 million different colors!
Color processing begins at a very early level in the visual system (even within the retina) through initial color opponent mechanisms.
Virtual reality is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. Steven Spielberg 2019s Ready Player One .
',
+ },
+ {
+ description: "",
+ "image-metadata": {
+ width: 6016,
+ height: 4016,
+ "mime-type": "image/jpeg",
+ "focus-point": [2741, 1930],
+ },
+ "page-url": "/story/560b39d9-ae5b-44ef-acc7-04db4472b4f8/element/6c6cf4a8-6700-4829-8076-88373a1436b1",
+ type: "image",
+ "family-id": "286afa67-910e-45aa-a795-d13508726663",
+ "image-attribution": "Quintype Media Gallery",
+ title: "Nature as it's best",
+ id: "6c6cf4a8-6700-4829-8076-88373a1436b1",
+ "image-s3-key": "demo/2018-11/b1fa99ff-b05d-464b-97b9-83cd8f2bf65d/2072.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "page-url": "/story/a3561065-11ce-4281-9d86-325934aa2146/element/4abd5e1d-4f02-433a-af48-2733a63682b9",
+ type: "composite",
+ "family-id": "aa26b0a8-f7e2-4466-a1ee-75cfc54c69d1",
+ "story-elements": [
+ {
+ description: "",
+ title: "",
+ subtype: null,
+ metadata: {
+ description:
+ "In the year 2045, people can escape their harsh reality in the OASIS, an immersive virtual world where you can go anywhere, do anything, be anyone-the only limits are your own imagination. OASIS creator James Halliday left his immense fortune and control of the Oasis to the winner of a contest designed to find a worthy heir. When unlikely hero Wade Watts conquers the first challenge of the reality-bending treasure hunt, he and his friends-known as the High Five-are hurled into a fantastical universe of discovery and danger to save the OASIS and their world.",
+ url: "https://www.rottentomatoes.com/m/ready_player_one/",
+ name: "Ready player One review from rotten tomatoes",
+ },
+ text: '',
+ id: "47afb0c6-aa50-446c-8e55-c10c604c5246",
+ "family-id": "6b236f36-ce8a-4f9a-b70e-844367f13af0",
+ type: "text",
+ },
+ ],
+ title: "",
+ id: "4abd5e1d-4f02-433a-af48-2733a63682b9",
+ metadata: {},
+ subtype: "references",
+ },
+ {
+ description: "",
+ "page-url": "/story/a3561065-11ce-4281-9d86-325934aa2146/element/80f39709-fdf6-40b4-9d8c-a2db549ce621",
+ type: "text",
+ "family-id": "338160c1-cb62-4328-b866-abbb13cf0e1b",
+ title: "",
+ id: "80f39709-fdf6-40b4-9d8c-a2db549ce621",
+ metadata: {
+ content:
+ "After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.",
+ attribution: "Player",
+ },
+ subtype: "quote",
+ text: 'After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest. Player Is Ready Player One book better than the movie?
',
+ answer:
+ "Ready Player One is the latest example. I read Earnest Cline's book movie . ... The book generally fares better with reviewers, averaging 4.6 out of 5 stars on Amazon, while the movie scores 73% on Rotten Tomatoes.
",
+ interviewer: {
+ "author-collection-id": null,
+ "updated-at": 1565606538341,
+ slug: "reena-singh-2",
+ "last-name": null,
+ "publisher-id": 97,
+ name: "Reena Singh",
+ "avatar-url":
+ "https://thumbor-stg.assettype.com/ace/2019-08/565bba26-4f05-4e63-b619-511a2a2bd5b7/images.jpeg",
+ settings: null,
+ source: null,
+ "first-name": null,
+ "communication-email": null,
+ bio: null,
+ id: 300199,
+ "avatar-s3-key": "ace/2019-08/565bba26-4f05-4e63-b619-511a2a2bd5b7/images.jpeg",
+ "twitter-handle": null,
+ "created-at": 1551268188983,
+ metadata: {},
+ },
+ interviewee: {
+ "author-collection-id": null,
+ "updated-at": 1565606538341,
+ slug: "reena-singh-2",
+ "last-name": null,
+ "publisher-id": 97,
+ name: "Reena Singh",
+ "avatar-url":
+ "https://thumbor-stg.assettype.com/ace/2019-08/565bba26-4f05-4e63-b619-511a2a2bd5b7/images.jpeg",
+ settings: null,
+ source: null,
+ "first-name": null,
+ "communication-email": null,
+ bio: null,
+ id: 300199,
+ "avatar-s3-key": "ace/2019-08/565bba26-4f05-4e63-b619-511a2a2bd5b7/images.jpeg",
+ "twitter-handle": null,
+ "created-at": 1551268188983,
+ metadata: {},
+ },
+ },
+ subtype: "q-and-a",
+ text: 'Is Ready Player One book better than the movie?
Ready Player One is the latest example. I read Earnest Cline\'s book movie . ... The book generally fares better with reviewers, averaging 4.6 out of 5 stars on Amazon, while the movie scores 73% on Rotten Tomatoes.
Is Ready Player One book better than the movie?
',
+ },
+ {
+ description: "",
+ "page-url": "/story/a3561065-11ce-4281-9d86-325934aa2146/element/ac5e114b-5144-401b-9d60-6e706f708a87",
+ type: "text",
+ "family-id": "b857e675-9923-47b3-bb2f-a467bbc5977d",
+ title: "",
+ id: "ac5e114b-5144-401b-9d60-6e706f708a87",
+ metadata: {
+ interviewee: {
+ "author-collection-id": null,
+ "updated-at": 1565606538341,
+ slug: "reena-singh-2",
+ "last-name": null,
+ "publisher-id": 97,
+ name: "Reena Singh",
+ "avatar-url":
+ "https://thumbor-stg.assettype.com/ace/2019-08/565bba26-4f05-4e63-b619-511a2a2bd5b7/images.jpeg",
+ settings: null,
+ source: null,
+ "first-name": null,
+ "communication-email": null,
+ bio: null,
+ id: 300199,
+ "avatar-s3-key": "ace/2019-08/565bba26-4f05-4e63-b619-511a2a2bd5b7/images.jpeg",
+ "twitter-handle": null,
+ "created-at": 1551268188983,
+ metadata: {},
+ },
+ },
+ subtype: "answer",
+ text: "Ready Player One is the latest example. I read Earnest Cline's book a couple months before watching Steven Spielberg's movie . ... The book better with reviewers, averaging 4.6 out of 5 stars on Amazon, while the movie scores 73% on Rotten Tomatoes.
",
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ {
+ description: "",
+ "page-url": "/story/a3561065-11ce-4281-9d86-325934aa2146/element/0e1e9777-e0e6-45f9-b212-264db2d8eeb5",
+ type: "text",
+ "family-id": "7be340e2-8e00-4bba-b640-cdbd57ba2719",
+ title: "",
+ id: "0e1e9777-e0e6-45f9-b212-264db2d8eeb5",
+ metadata: {
+ content:
+ "Although the many story changes might be hard for book purists to accept, Steven Spielberg has lovingly captured the zeitgeist of '80s nostalgia in this adventure.",
+ },
+ subtype: "blurb",
+ text: 'Although the many story changes might be hard for book purists to accept, Steven Spielberg has lovingly captured the zeitgeist of 80s nostalgia in this adventure. ',
+ },
+ {
+ description: "",
+ "page-url": "/story/a3561065-11ce-4281-9d86-325934aa2146/element/48546269-f61b-42f3-945c-5358d14f3429",
+ type: "text",
+ "family-id": "33c7c7c1-1001-46f1-b77d-0553805ded84",
+ title: "",
+ id: "48546269-f61b-42f3-945c-5358d14f3429",
+ metadata: {
+ content:
+ "After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.",
+ attribution: "Player",
+ },
+ subtype: "blockquote",
+ text: 'After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest. Player Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries , but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
",
+ },
+ {
+ description: "",
+ "page-url": "/story/8f1c0e1f-afd6-4169-96c2-243d88013bd1/element/b35ef956-35ce-4431-a68d-018760a4ddda",
+ type: "composite",
+ "family-id": "97761d2a-de16-4135-945f-ac5706ecc1a6",
+ "story-elements": [
+ {
+ description: "",
+ "image-metadata": {
+ "original-url":
+ "https://www.washingtonpost.com/resizer/_I2QC1BPsP-wxv7XSvBBK48bv8E=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/OP2ZX3T6KYI6VBGCA6JNQWIZCE.jpg",
+ },
+ type: "image",
+ "family-id": "0444a13c-f52a-43ff-8564-b52411ffdefc",
+ "image-attribution": "",
+ title: "",
+ id: "738163f6-4796-4a44-8e7b-b0160a83fa42",
+ "image-s3-key": "ace/2020-04/b6b55f73-a713-4087-849b-a7dbb04826e6/OP2ZX3T6KYI6VBGCA6JNQWIZCE.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ "original-url":
+ "https://media3.s-nbcnews.com/j/newscms/2020_16/3314681/200419-michelle-tom-cover-cs-509p_6155bfe91e67a4f93ecc2cf00530c404.nbcnews-fp-1200-630.jpg",
+ },
+ type: "image",
+ "family-id": "5173f4e7-f94c-4e7a-ba54-806ae1a7deef",
+ "image-attribution": "",
+ title: "",
+ id: "2486b7db-4d88-4fc3-899e-425c105f48ba",
+ "image-s3-key":
+ "ace/2020-04/e58b991e-4a82-4fca-818d-c1f8fd6e98e6/200419_michelle_tom_cover_cs_509p_6155bfe91e67a4f93ecc2cf00530c404_nbcnews_fp_1200_630.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ "original-url": "https://www.dw.com/image/53181437_304.jpg",
+ },
+ type: "image",
+ "family-id": "5f454472-b7ed-4a18-b923-452332c16125",
+ "image-attribution": "",
+ title: "",
+ id: "3dd778d9-dc96-4798-876f-069b8d47c177",
+ "image-s3-key": "ace/2020-04/ea98e4fb-f8a8-4b18-a2b0-8ec03b17820c/53181437_304.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ "original-url":
+ "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+ },
+ type: "image",
+ "family-id": "67ae55bd-3f34-417b-8951-fb525da321f2",
+ "image-attribution": "",
+ title: "",
+ id: "bc8d79e8-04d5-447e-80b7-99e211b1d1ec",
+ "image-s3-key": "ace/2020-04/aef8d5e1-d2fc-4f77-968b-50ff0c4764ea/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ "original-url":
+ "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+ },
+ type: "image",
+ "family-id": "67ae55bd-3f34-417b-8951-fb525da321f2",
+ "image-attribution": "",
+ title: "",
+ id: "bc8d79e8-04d5-447e-80b7-99e211b1d1ec",
+ "image-s3-key": "ace/2020-04/aef8d5e1-d2fc-4f77-968b-50ff0c4764ea/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ "original-url":
+ "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+ },
+ type: "image",
+ "family-id": "67ae55bd-3f34-417b-8951-fb525da321f2",
+ "image-attribution": "",
+ title: "",
+ id: "bc8d79e8-04d5-447e-80b7-99e211b1d1ec",
+ "image-s3-key": "ace/2020-04/aef8d5e1-d2fc-4f77-968b-50ff0c4764ea/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ "original-url":
+ "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+ },
+ type: "image",
+ "family-id": "67ae55bd-3f34-417b-8951-fb525da321f2",
+ "image-attribution": "",
+ title: "",
+ id: "bc8d79e8-04d5-447e-80b7-99e211b1d1ec",
+ "image-s3-key": "ace/2020-04/aef8d5e1-d2fc-4f77-968b-50ff0c4764ea/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ "original-url":
+ "https://www.aljazeera.com/mritems/Images/2020/4/19/e69c7b29e024420d95e519b96edfc7aa_18.jpg",
+ },
+ type: "image",
+ "family-id": "096ff456-dd70-45f8-9953-4ac78c6c332c",
+ "image-attribution": "",
+ title: "",
+ id: "3a7139bd-ab4c-4c2e-bf0d-4e0ff6903e19",
+ "image-s3-key":
+ "ace/2020-04/7cebf55c-27c1-4e73-839f-85d1399a354e/e69c7b29e024420d95e519b96edfc7aa_18.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ "original-url":
+ "https://media.khou.com/assets/KHOU/images/55ceb4cc-e4a7-4a99-bc29-34ed175c4df2/55ceb4cc-e4a7-4a99-bc29-34ed175c4df2_1140x641.jpg",
+ },
+ type: "image",
+ "family-id": "69f2fa84-f55b-4176-a48e-9cc0521b610d",
+ "image-attribution": "",
+ title: "",
+ id: "5b1501e0-9a91-4720-8660-531511bded39",
+ "image-s3-key":
+ "ace/2020-04/167805cc-a440-41fe-bccf-132660d4350f/55ceb4cc_e4a7_4a99_bc29_34ed175c4df2_1140x641.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ ],
+ title: "",
+ id: "b35ef956-35ce-4431-a68d-018760a4ddda",
+ metadata: {
+ type: "gallery",
+ },
+ subtype: "image-gallery",
+ },
+ ],
+ "card-updated-at": 1587559563683,
+ "content-version-id": "11beb6bf-bcb3-4ea2-8764-7355fc40811b",
+ "card-added-at": 1524115986932,
+ status: "draft",
+ id: "954331a6-4e5e-4d96-8204-74f56ce1f837",
+ "content-id": "954331a6-4e5e-4d96-8204-74f56ce1f837",
+ version: 32,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Ready Player One review – Spielberg ",
+ message: "Ready Player One review – Spielberg spins a dizzying VR yarn",
+ image: {
+ key: "ace/2019-08/e3103795-ebb4-4c6c-93f0-2e829037e008/ready_player_one_hd_wallpapers_70749_6537851.png",
+ url: null,
+ attribution: null,
+ caption: null,
+ metadata: {
+ width: 1920,
+ height: 1080,
+ "mime-type": "image/png",
+ "file-size": 587085,
+ "file-name": "ready-player-one-hd-wallpapers-70749-6537851.png",
+ "focus-point": [883, 411],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/a3561065-11ce-4281-9d86-325934aa2146/element/d42210d4-4c37-475c-ac6e-414821ad2e57",
+ type: "youtube-video",
+ "family-id": "43f1bf4c-2144-4f86-b36e-d910ff76eb8d",
+ title: "",
+ id: "d42210d4-4c37-475c-ac6e-414821ad2e57",
+ url: "https://www.youtube.com/watch?v=cSp1dM2Vj48&feature=youtu.be",
+ "embed-url": "https://www.youtube.com/embed/cSp1dM2Vj48",
+ metadata: {},
+ subtype: null,
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: 'Virtual reality is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. Steven Spielberg 2019s Ready Player One .
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1524116209278,
+ "content-version-id": "f1e7f3ea-21f2-4801-b6d7-2022ee079478",
+ "card-added-at": 1524116147733,
+ status: "draft",
+ id: "464e6388-3a0d-49ca-aea7-bce0893259ba",
+ "content-id": "464e6388-3a0d-49ca-aea7-bce0893259ba",
+ version: 3,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Ready Player One review – Spielberg ",
+ message: "Ready Player One review – Spielberg spins a dizzying VR yarn",
+ image: {
+ key: "ace/2019-08/e3103795-ebb4-4c6c-93f0-2e829037e008/ready_player_one_hd_wallpapers_70749_6537851.png",
+ url: null,
+ attribution: null,
+ caption: null,
+ metadata: {
+ width: 1920,
+ height: 1080,
+ "mime-type": "image/png",
+ "file-size": 587085,
+ "file-name": "ready-player-one-hd-wallpapers-70749-6537851.png",
+ "focus-point": [883, 411],
+ },
+ },
+ },
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/anything/recent-stories/news/ready-player-one-review-spielberg-spins-a-dizzying-vr-yarn",
+ "story-version-id": "28c7b47d-3b37-49f6-a0ba-2886d14182e4",
+ "content-type": "story",
+ "content-updated-at": 1564650017530,
+ "author-id": 123981,
+ "owner-id": 123981,
+ "linked-story-ids": [],
+ "promotional-message": 'text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1524116216298,
+ "hero-image-caption": "hero image caption",
+ version: 47,
+ "story-template": "review",
+ "sequence-no": null,
+ "created-at": 1564650011136,
+ authors: [
+ {
+ id: 94980,
+ name: "Stephen Wertheim",
+ social: {
+ twitter: {
+ url: "https://www.twitter.com/sabqorg",
+ handle: "elonmusk",
+ },
+ },
+ slug: "stephen-wertheim",
+ "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ {
+ id: 123981,
+ name: "Ravigopal Kesari",
+ slug: "ravigopal-kesari",
+ social: {
+ twitter: {
+ url: "https://www.twitter.com/sabqorg",
+ handle: "elonmusk",
+ },
+ },
+ "avatar-url":
+ "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
+ "avatar-s3-key": null,
+ "twitter-handle": null,
+ bio: null,
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ },
+ ],
+ metadata: {
+ "review-title": "Ready Player One",
+ "review-rating": {
+ label: "1",
+ value: "1",
+ },
+ "sponsored-by": "quint",
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Ravigopal Kesari",
+};
+
+export const dummyPhotoStory = {
+ access: "subscription",
+ "updated-at": 1599115419318,
+ seo: {
+ "claim-reviews": {
+ story: null,
+ },
+ },
+ "assignee-id": 187245,
+ "author-name": "Shreya Shukla",
+ "hero-image-hyperlink": "https://www.google.com",
+ tags: [
+ {
+ id: 274973,
+ name: "50th Anniversary",
+ "meta-description": "5th Anniversary of quintype",
+ "meta-title": "5th Anniversary of qt",
+ slug: "50th-anniversary",
+ "tag-type": "Tag",
+ },
+ {
+ id: 1092771,
+ name: "Newzealand",
+ "meta-description": null,
+ "meta-title": null,
+ slug: "newzealand",
+ "tag-type": "Tag",
+ },
+ {
+ id: 1292529,
+ name: "50",
+ "meta-description": null,
+ "meta-title": null,
+ slug: "50",
+ "tag-type": "Tag",
+ },
+ {
+ id: 1292530,
+ name: "bangalore",
+ "meta-description": null,
+ "meta-title": null,
+ slug: "bangalore",
+ "tag-type": "Tag",
+ },
+ ],
+ customSlotAfterStory: {
+ config: { targetingId: "" },
+ layout: "Leaderboard",
+ layoutLabel: "Leaderboard",
+ type: "ad",
+ },
+ headline: "Karnataka tourism",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "231f55c0-ba92-4da6-a2c0-697c520f860f",
+ slug: "child-sec/2020/09/02/karnataka-tourism",
+ "last-published-at": 1599115422319,
+ subheadline: "At vero eos et accusamus iusto odio dignissimos ducimus qui blanditiis pre.",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "child-sec",
+ name: "child-sec",
+ "section-url": "https://ace-web.qtstage.io/parent-sec/child-sec",
+ id: 11825,
+ "parent-id": 11824,
+ "display-name": "child-sec",
+ collection: {
+ slug: "child-sec-parent-sec",
+ name: "child-sec (parent-sec)",
+ id: 17115,
+ },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key": "ace/story-audio/2020-09/231f55c0-ba92-4da6-a2c0-697c520f860f/.0fc573c1-97de-4644-8a26-bf65c4d6f0d9.mp3",
+ },
+ "read-time": 2,
+ "access-level-value": null,
+ "content-created-at": 1599069527074,
+ "owner-name": "Shreya Shukla",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ "original-url": "https://www.india.com/wp-content/uploads/2014/09/vikasa-soudha-245043_960_720.jpg",
+ width: 625,
+ height: 470,
+ },
+ comments: null,
+ "word-count": 245,
+ entities: {},
+ "published-at": 1599115422319,
+ "is-live-blog": false,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: null,
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ "is-amp-supported": false,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "Credits: Quintype",
+ "bullet-type": "123",
+ id: "231f55c0-ba92-4da6-a2c0-697c520f860f",
+ "hero-image-s3-key": "ace/2020-06/58fb1855-a741-4b69-9c9b-57eafe34ff04/vikasa_soudha_245043_960_720.jpg",
+ contributors: [],
+ "associated-series-collection-ids": [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "image-metadata": {
+ width: 1920,
+ height: 1080,
+ "focus-point": [964, 507],
+ },
+ "page-url": "/story/231f55c0-ba92-4da6-a2c0-697c520f860f/element/7798674b-46f4-429c-95ce-cb5d334277e4",
+ type: "image",
+ "family-id": "968c8fc8-874e-4982-8eca-9ac5c6ee93aa",
+ "image-attribution": "Supreme Court Justice Clarence Thomas in 2007. ",
+ title: "nature",
+ id: "7798674b-46f4-429c-95ce-cb5d334277e4",
+ "image-s3-key": "ace/2018-12/fcdb3782-886c-47ce-a84f-0ef5e051d639/Images_9.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "page-url": "/story/231f55c0-ba92-4da6-a2c0-697c520f860f/element/664c9d54-f0c2-4016-a80e-7c7ed1d64330",
+ type: "title",
+ "family-id": "d1941b1b-1b4f-4d35-8d2d-6d5c12fabc25",
+ title: "",
+ id: "664c9d54-f0c2-4016-a80e-7c7ed1d64330",
+ metadata: {},
+ subtype: null,
+ text: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus",
+ },
+ {
+ description: "",
+ "page-url": "/story/231f55c0-ba92-4da6-a2c0-697c520f860f/element/3bd855a8-9db1-404b-b193-6b4ec7a4c6f2",
+ type: "text",
+ "family-id": "7994eec8-b28a-47ee-b954-e652d7b829ad",
+ title: "",
+ id: "3bd855a8-9db1-404b-b193-6b4ec7a4c6f2",
+ metadata: {},
+ subtype: null,
+ text: "Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
",
+ },
+ {
+ config: { targetingId: "" },
+ layout: "Leaderboard",
+ layoutLabel: "Leaderboard",
+ type: "ad",
+ },
+ ],
+ "card-updated-at": 1599070341951,
+ "content-version-id": "7160cfea-8a20-48a6-a67c-c5c1bf26a062",
+ "card-added-at": 1599069777782,
+ status: "draft",
+ id: "aaf2ca9d-af7d-4c26-9caf-a16f1e104c21",
+ "content-id": "aaf2ca9d-af7d-4c26-9caf-a16f1e104c21",
+ version: 11,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Karnataka tourism",
+ message: null,
+ image: {
+ key: "ace/2018-12/fcdb3782-886c-47ce-a84f-0ef5e051d639/Images_9.jpg",
+ url: null,
+ attribution: "Supreme Court Justice Clarence Thomas in 2007. ",
+ caption: null,
+ metadata: {
+ width: 1920,
+ height: 1080,
+ "focus-point": [964, 507],
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "image-metadata": {
+ "original-url":
+ "https://s.rfi.fr/media/display/ddb13a2c-e9b1-11ea-9cf1-005056bf87d6/w:1280/p:16x9/f4da51e521694ef3b14820c2fd32709e691f058e.jpg",
+ width: 1280,
+ height: 720,
+ },
+ "page-url": "/story/231f55c0-ba92-4da6-a2c0-697c520f860f/element/d33f9a51-4bc6-4205-8784-86cb11027115",
+ type: "image",
+ "family-id": "f7ff58e5-dbba-485c-bbcf-9119a764afd5",
+ "image-attribution": "Credits: Quintype",
+ title: "Supreme Court Justice Clarence Thomas in 2007. ",
+ id: "d33f9a51-4bc6-4205-8784-86cb11027115",
+ "image-s3-key":
+ "ace/2020-08/04562266-d044-4cf3-8ff3-58ab0b084d33/f4da51e521694ef3b14820c2fd32709e691f058e.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "page-url": "/story/231f55c0-ba92-4da6-a2c0-697c520f860f/element/530154d6-f1eb-4e12-8c87-6a49e8269cc6",
+ type: "text",
+ "family-id": "34bccdf3-115a-4179-b76e-e38742093c03",
+ title: "",
+ id: "530154d6-f1eb-4e12-8c87-6a49e8269cc6",
+ metadata: {},
+ subtype: "summary",
+ text: "Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
",
+ },
+ {
+ description: "",
+ "page-url": "/story/231f55c0-ba92-4da6-a2c0-697c520f860f/element/19d75234-ba0a-47d1-b9d3-b79c936b5802",
+ type: "text",
+ "family-id": "25db509b-047b-44ae-adc4-608037504f9f",
+ title: "",
+ id: "19d75234-ba0a-47d1-b9d3-b79c936b5802",
+ metadata: {
+ content:
+ "Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+ attribution: "Quintype",
+ },
+ subtype: "quote",
+ text: 'Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Quintype Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Quintype Grand Central Terminal, Park Avenue, New York is the world's
",
+ answer: "largest railway station
",
+ },
+ subtype: "q-and-a",
+ text: 'Grand Central Terminal, Park Avenue, New York is the world\'s
For which of the following disciplines is Nobel Prize awarded?
",
+ answer: "Physics and Chemistry
Physiology or Medicine
Literature, Peace and Economics
",
+ },
+ subtype: "q-and-a",
+ text: 'For which of the following disciplines is Nobel Prize awarded?
Physics and Chemistry
Physiology or Medicine
Literature, Peace and Economics
Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ "original-url":
+ "https://s.rfi.fr/media/display/e21e72c0-ec66-11ea-9857-005056a964fe/w:1280/p:16x9/8bfca0efa60a7b897690bea687d9cb3b991611ff_0.jpg",
+ width: 1280,
+ height: 720,
+ },
+ "page-url": "/story/231f55c0-ba92-4da6-a2c0-697c520f860f/element/613fcdb4-c551-4deb-be2f-ff50428235ec",
+ type: "image",
+ "family-id": "587b768d-9169-45c7-be30-98caa96b5c27",
+ "image-attribution": "",
+ title: "",
+ id: "613fcdb4-c551-4deb-be2f-ff50428235ec",
+ "image-s3-key":
+ "ace/2020-09/12d48d3c-dac1-4b99-b961-a724c92c6cc2/8bfca0efa60a7b897690bea687d9cb3b991611ff_0.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "page-url": "/story/231f55c0-ba92-4da6-a2c0-697c520f860f/element/3f57c4cb-0736-4c89-94a2-3891e6cf1dce",
+ type: "text",
+ "family-id": "28688b87-0abc-4703-b3be-6ad78de90f72",
+ title: "",
+ id: "3f57c4cb-0736-4c89-94a2-3891e6cf1dce",
+ metadata: {},
+ subtype: "summary",
+ text: "Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
",
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: ' text promotional message
',
+ metadata: {
+ "promotional-message": true,
+ },
+ },
+ ],
+ "card-updated-at": 1599072759773,
+ "content-version-id": "d92aae5f-7d65-4260-853f-c440373905c4",
+ "card-added-at": 1599072125631,
+ status: "draft",
+ id: "92cea38b-f39a-4e1d-b510-9342cc6e792d",
+ "content-id": "92cea38b-f39a-4e1d-b510-9342cc6e792d",
+ version: 2,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Karnataka tourism",
+ message: null,
+ image: {
+ key: "ace/2020-09/12d48d3c-dac1-4b99-b961-a724c92c6cc2/8bfca0efa60a7b897690bea687d9cb3b991611ff_0.jpg",
+ url: null,
+ attribution: "",
+ caption: null,
+ metadata: {
+ "original-url":
+ "https://s.rfi.fr/media/display/e21e72c0-ec66-11ea-9857-005056a964fe/w:1280/p:16x9/8bfca0efa60a7b897690bea687d9cb3b991611ff_0.jpg",
+ width: 1280,
+ height: 720,
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/child-sec/2020/09/02/karnataka-tourism",
+ "story-version-id": "fb04a248-7855-484c-ab2f-9b71e45fe7e7",
+ "content-type": "story",
+ "content-updated-at": 1599115422655,
+ "author-id": 187245,
+ "owner-id": 187245,
+ "linked-story-ids": [],
+ "promotional-message": ' text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1599070346878,
+ "hero-image-caption": "Supreme Court Justice Clarence Thomas in 2007. ",
+ version: 19,
+ "story-template": "photo",
+ "sequence-no": null,
+ "created-at": 1599115401203,
+ authors: [
+ {
+ slug: "shreya-shukla-2",
+ social: {
+ twitter: {
+ handle: "shuklashreya801",
+ },
+ },
+ name: "Shreya Shukla",
+ "contributor-role": {
+ id: 873,
+ name: "Author",
+ },
+ "avatar-url":
+ "https://lh6.googleusercontent.com/-pBdJGAfN81c/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfmrjS-gWdYzH3Gtmuib3KbVLdixw/photo.jpg",
+ bio: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi ",
+ id: 187245,
+ "avatar-s3-key": null,
+ "twitter-handle": "shuklashreya801",
+ },
+ ],
+ metadata: {
+ "card-share": {
+ shareable: false,
+ },
+ },
+ "publish-at": null,
+ "assignee-name": "Shreya Shukla",
+};
+
+export const dummyLiveBlogStory = {
+ access: "subscription",
+ "updated-at": 1601277247375,
+ seo: { "meta-keywords": [], "claim-reviews": { story: null } },
+ "assignee-id": 425675,
+ "author-name": "Bindiya H",
+ "hero-image-hyperlink": "https://www.google.com",
+ tags: [
+ {
+ id: 163463,
+ name: "entertainment",
+ "meta-description": null,
+ "meta-title": null,
+ slug: "entertainment",
+ "tag-type": "Tag",
+ },
+ {
+ id: 1209598,
+ name: "government",
+ "meta-description": null,
+ "meta-title": null,
+ slug: "government",
+ "tag-type": "Tag",
+ },
+ {
+ id: 1409326,
+ name: "liveblog",
+ "meta-description": null,
+ "meta-title": null,
+ slug: "liveblog",
+ "tag-type": "Tag",
+ },
+ ],
+ customSlotAfterStory: {
+ config: { targetingId: "" },
+ layout: "Leaderboard",
+ layoutLabel: "Leaderboard",
+ type: "ad",
+ },
+ headline: "Live blog story ",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "4270e6db-f238-46d4-8b6d-788ede41760e",
+ slug: "entertainment/2020/09/28/live-blog-story-3",
+ "last-published-at": 1601277247484,
+ subheadline: "At vero eos et accusamus iusto odio dignissimos ducimus qui blanditiis pre.",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "entertainment",
+ name: "Entertainment",
+ "section-url": "https://ace-web.qtstage.io/news/entertainment",
+ id: 6447,
+ "parent-id": 38586,
+ "display-name": "Entertainment",
+ collection: { slug: "entertainment", name: "Entertainment", id: 3946 },
+ data: null,
+ },
+ ],
+ "story-audio": { "s3-key": null },
+ "read-time": 0,
+ "access-level-value": null,
+ "content-created-at": 1601276754377,
+ "owner-name": "Bindiya H",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
+ comments: null,
+ "word-count": 0,
+ entities: {},
+ "published-at": 1601277247484,
+ "is-live-blog": true,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: null,
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ "is-amp-supported": true,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "Google",
+ "bullet-type": "123",
+ id: "4270e6db-f238-46d4-8b6d-788ede41760e",
+ "hero-image-s3-key": "ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ contributors: [],
+ "associated-series-collection-ids": [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/4270e6db-f238-46d4-8b6d-788ede41760e/element/3a569347-2bed-4763-bf3b-b58df01ad6cc",
+ type: "title",
+ "family-id": "844074a7-2b25-423a-b3c8-88461db91a26",
+ title: "",
+ id: "3a569347-2bed-4763-bf3b-b58df01ad6cc",
+ metadata: {},
+ subtype: null,
+ text: "Sed ut perspiciatis unde omnis iste natus error",
+ },
+ {
+ description: "",
+ "page-url": "/story/4270e6db-f238-46d4-8b6d-788ede41760e/element/739cf8a1-26d8-48fb-8cbf-771b1161ed68",
+ type: "text",
+ "family-id": "6b3e107b-02d4-4d72-b523-64bbf809246b",
+ title: "",
+ id: "739cf8a1-26d8-48fb-8cbf-771b1161ed68",
+ metadata: {},
+ subtype: null,
+ text: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
",
+ },
+ ],
+ "card-updated-at": 1601431229891,
+ "content-version-id": "254fdb13-fa12-426f-a50b-8846847158a5",
+ "card-added-at": 1601431063377,
+ status: "draft",
+ id: "5c8900ed-4676-45f4-a7b6-aa28746370fc",
+ "content-id": "5c8900ed-4676-45f4-a7b6-aa28746370fc",
+ version: 2,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Live Updates",
+ message: null,
+ image: {
+ key: "ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ attribution: "Google",
+ caption: "Saque ipsa quae ab illo inventore veritatis et quip",
+ metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/4270e6db-f238-46d4-8b6d-788ede41760e/element/8ee1c6ed-57d8-4891-8a77-e789b2d33c29",
+ type: "title",
+ "family-id": "fab4dbe9-acce-43cb-8d3e-3b7d83afe04a",
+ title: "",
+ id: "8ee1c6ed-57d8-4891-8a77-e789b2d33c29",
+ metadata: {},
+ subtype: null,
+ text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium",
+ },
+ {
+ description: "",
+ "page-url": "/story/4270e6db-f238-46d4-8b6d-788ede41760e/element/78142993-d358-4c17-b610-9c80101f32b1",
+ type: "text",
+ "family-id": "ec1e356a-d274-4f71-9ef9-4f070c907894",
+ title: "",
+ id: "78142993-d358-4c17-b610-9c80101f32b1",
+ metadata: {},
+ subtype: null,
+ text: "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.
",
+ },
+ {
+ description: "",
+ "image-url":
+ "https://thumbor-stg.assettype.com/ace/2020-09/55df83b2-3181-49f3-b1d9-31cc91dda1be/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
+ "member-id": 934395,
+ "image-metadata": {
+ "original-url":
+ "https://s.rfi.fr/media/display/a1b6b938-01c2-11eb-ba87-005056a964fe/w:1280/p:16x9/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
+ width: 1280,
+ height: 720,
+ },
+ "uploaded-at": 1601327722596,
+ "page-url": "/story/4270e6db-f238-46d4-8b6d-788ede41760e/element/bf739a18-6878-485a-adc7-d608d767f123",
+ type: "image",
+ "family-id": "98f289da-3a92-48e0-ac66-2c0381b9fbc8",
+ "image-attribution": "",
+ title: "Premier League",
+ id: "bf739a18-6878-485a-adc7-d608d767f123",
+ "image-s3-key":
+ "ace/2020-09/55df83b2-3181-49f3-b1d9-31cc91dda1be/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ ],
+ "card-updated-at": 1601431229891,
+ "content-version-id": "2640b2cd-e57e-47b8-9a09-0c9e61bec4a9",
+ "card-added-at": 1601372749401,
+ status: "draft",
+ id: "42c89975-2f45-472e-ae09-73fec6f020b7",
+ "content-id": "42c89975-2f45-472e-ae09-73fec6f020b7",
+ version: 3,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Live Updates",
+ message: null,
+ image: {
+ key: "ace/2020-09/55df83b2-3181-49f3-b1d9-31cc91dda1be/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
+ url: "https://thumbor-stg.assettype.com/ace/2020-09/55df83b2-3181-49f3-b1d9-31cc91dda1be/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
+ attribution: "",
+ caption: null,
+ metadata: {
+ "original-url":
+ "https://s.rfi.fr/media/display/a1b6b938-01c2-11eb-ba87-005056a964fe/w:1280/p:16x9/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
+ width: 1280,
+ height: 720,
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/4270e6db-f238-46d4-8b6d-788ede41760e/element/1cef89d6-c934-4f3c-b4d1-56460eb076e4",
+ type: "title",
+ "family-id": "f73118f0-74b8-4b9f-b2f6-c3b26852e110",
+ title: "",
+ id: "1cef89d6-c934-4f3c-b4d1-56460eb076e4",
+ metadata: {},
+ subtype: null,
+ text: "Sed ut perspiciatis unde omnis iste natus error ",
+ },
+ ],
+ "card-updated-at": 1601431229891,
+ "content-version-id": "89935f86-dba4-4f90-b7ea-f59db58554f7",
+ "card-added-at": 1601289122939,
+ status: "draft",
+ id: "69fb8bd4-77e8-4b17-bca4-c229b92ce57f",
+ "content-id": "69fb8bd4-77e8-4b17-bca4-c229b92ce57f",
+ version: 6,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Live Updates",
+ message: null,
+ image: {
+ key: "ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ attribution: "Google",
+ caption: "Saque ipsa quae ab illo inventore veritatis et quip",
+ metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
+ },
+ },
+ attributes: { "key-event": true },
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/4270e6db-f238-46d4-8b6d-788ede41760e/element/1cef89d6-c934-4f3c-b4d1-56460eb076e4",
+ type: "title",
+ "family-id": "f73118f0-74b8-4b9f-b2f6-c3b26852e110",
+ title: "",
+ id: "1cef89d6-c934-4f3c-b4d1-56460eb076e4",
+ metadata: {},
+ subtype: null,
+ text: "Sed ut perspiciatis unde omnis iste natus error ",
+ },
+ ],
+ "card-updated-at": 1601431229891,
+ "content-version-id": "89935f86-dba4-4f90-b7ea-f59db58554f7",
+ "card-added-at": 1601289122939,
+ status: "draft",
+ id: "69fb8bd4-77e8-4b17-bca4-c229b92ce57f",
+ "content-id": "69fb8bd4-77e8-4b17-bca4-c229b92ce57f",
+ version: 6,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Live Updates",
+ message: null,
+ image: {
+ key: "ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ attribution: "Google",
+ caption: "Saque ipsa quae ab illo inventore veritatis et quip",
+ metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
+ },
+ },
+ attributes: { "key-event": true },
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/4270e6db-f238-46d4-8b6d-788ede41760e/element/1cef89d6-c934-4f3c-b4d1-56460eb076e4",
+ type: "title",
+ "family-id": "f73118f0-74b8-4b9f-b2f6-c3b26852e110",
+ title: "",
+ id: "1cef89d6-c934-4f3c-b4d1-56460eb076e4",
+ metadata: {},
+ subtype: null,
+ text: "Sed ut perspiciatis unde omnis iste natus error ",
+ },
+ ],
+ "card-updated-at": 1601431229891,
+ "content-version-id": "89935f86-dba4-4f90-b7ea-f59db58554f7",
+ "card-added-at": 1601289122939,
+ status: "draft",
+ id: "69fb8bd4-77e8-4b17-bca4-c229b92ce57f",
+ "content-id": "69fb8bd4-77e8-4b17-bca4-c229b92ce57f",
+ version: 6,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Live Updates",
+ message: null,
+ image: {
+ key: "ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ attribution: "Google",
+ caption: "Saque ipsa quae ab illo inventore veritatis et quip",
+ metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
+ },
+ },
+ attributes: { "key-event": true },
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/4270e6db-f238-46d4-8b6d-788ede41760e/element/b62c0458-b8eb-4f3d-9f3b-86d04447a909",
+ type: "title",
+ "family-id": "b716edab-a036-4db6-8ca1-9d119afcac3d",
+ title: "",
+ id: "b62c0458-b8eb-4f3d-9f3b-86d04447a909",
+ metadata: {},
+ subtype: null,
+ text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium",
+ },
+ ],
+ "card-updated-at": 1601277247407,
+ "content-version-id": "49686375-3b2c-4f02-93a8-e47d1a063e1f",
+ "card-added-at": 1601277247407,
+ status: "draft",
+ id: "ea05dbab-e2d7-41f2-9055-5287bb659c6f",
+ "content-id": "ea05dbab-e2d7-41f2-9055-5287bb659c6f",
+ version: 1,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Live Updates",
+ message: null,
+ image: {
+ key: "ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ attribution: "Google",
+ caption: "Saque ipsa quae ab illo inventore veritatis et quip",
+ metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
+ },
+ },
+ attributes: { "key-event": true },
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/4270e6db-f238-46d4-8b6d-788ede41760e/element/3ca72d69-09d3-47be-8921-a993c111fd9e",
+ type: "title",
+ "family-id": "6ddbc420-4f89-488e-9332-d16ed4e4c481",
+ title: "",
+ id: "3ca72d69-09d3-47be-8921-a993c111fd9e",
+ metadata: {},
+ subtype: null,
+ text: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus",
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: ' text promotional message
',
+ metadata: { "promotional-message": true },
+ },
+ ],
+ "card-updated-at": 1601277247407,
+ "content-version-id": "0acfbcb5-c770-498e-8439-a137e031dede",
+ "card-added-at": 1601277247407,
+ status: "draft",
+ id: "e4bf3f6e-cb5f-4a3e-b1cd-965b523da0e3",
+ "content-id": "e4bf3f6e-cb5f-4a3e-b1cd-965b523da0e3",
+ version: 1,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "Live Updates",
+ message: null,
+ image: {
+ key: "ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ attribution: "Google",
+ caption: "Saque ipsa quae ab illo inventore veritatis et quip",
+ metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
+ },
+ },
+ attributes: { "key-event": true },
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/entertainment/2020/09/28/live-blog-story-3",
+ "story-version-id": "dbc68251-e21d-4b1f-b8d2-e6ec972249ce",
+ "content-type": "story",
+ "content-updated-at": 1601431232290,
+ "author-id": 425675,
+ "owner-id": 425675,
+ "linked-story-ids": [],
+ "promotional-message": ' text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1601276764461,
+ "hero-image-caption": "Saque ipsa quae ab illo inventore veritatis et quip",
+ version: 10,
+ "story-template": "live-blog",
+ "sequence-no": null,
+ "created-at": 1601431229862,
+ authors: [
+ {
+ slug: "bindiya-h",
+ social: { twitter: { handle: "h_bindiya" } },
+ name: "Bindiya H",
+ "contributor-role": { id: 873, name: "Author" },
+ "avatar-url":
+ "https://lh6.googleusercontent.com/-T9_sTsD4Qco/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rc0KarItXiZkh68r6sgS4QwAApcbg/photo.jpg",
+ bio: "Biooo ?",
+ id: 425675,
+ "avatar-s3-key": null,
+ "twitter-handle": "h_bindiya",
+ },
+ ],
+ metadata: { "is-closed": false, "card-share": { shareable: false } },
+ "hero-image-url": "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
+ "publish-at": null,
+ "assignee-name": "Bindiya H",
+};
+
+export const dummyListicleStory = {
+ access: "subscription",
+ "updated-at": 1602234193104,
+ seo: { "claim-reviews": { story: null } },
+ "assignee-id": 927927,
+ "author-name": "Pravin Atigre",
+ "hero-image-hyperlink": "https://www.google.com",
+ tags: [
+ { id: 1421524, name: "health", "meta-description": null, "meta-title": null, slug: "health", "tag-type": "Tag" },
+ { id: 1421525, name: "culture", "meta-description": null, "meta-title": null, slug: "culture", "tag-type": "Tag" },
+ {
+ id: 1421526,
+ name: "workplace",
+ "meta-description": null,
+ "meta-title": null,
+ slug: "workplace",
+ "tag-type": "Tag",
+ },
+ ],
+ customSlotAfterStory: {
+ config: { targetingId: "" },
+ layout: "Leaderboard",
+ layoutLabel: "Leaderboard",
+ type: "ad",
+ },
+ headline: "It pays to be kind: improving workplace culture through kindness",
+ "storyline-id": null,
+ votes: {},
+ "story-content-id": "307e5a1b-5cf0-4321-8193-827b2add174f",
+ slug: "health/2020/10/08/it-pays-to-be-kind-improving-workplace-culture-through-kindness",
+ "last-published-at": 1602234199516,
+ subheadline: "Neque porro quisquam est, qui dolorem ipsum quia dolor sit.",
+ alternative: {},
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "health",
+ name: "Health",
+ "section-url": "https://ace-web.qtstage.io/news/health",
+ id: 11181,
+ "parent-id": 38586,
+ "display-name": "Health",
+ collection: { slug: "health", name: "Health", id: 15603 },
+ data: null,
+ },
+ ],
+ "story-audio": {
+ "s3-key": "ace/story-audio/2020-10/307e5a1b-5cf0-4321-8193-827b2add174f/.0e6d9a89-3bb7-47b0-8bee-a34b5f75f5e9.mp3",
+ },
+ "read-time": 2,
+ "access-level-value": null,
+ "content-created-at": 1602154991378,
+ "owner-name": "Pravin Atigre",
+ "custom-slug": null,
+ "push-notification": null,
+ "publisher-id": 97,
+ "hero-image-metadata": {
+ width: 1600,
+ height: 900,
+ "mime-type": "image/jpeg",
+ "file-size": 228062,
+ "file-name": "seo.jpg",
+ },
+ comments: null,
+ "word-count": 232,
+ entities: {},
+ "published-at": 1602234199516,
+ "is-live-blog": false,
+ "breaking-news-linked-story-id": null,
+ "storyline-title": null,
+ summary: null,
+ "push-notification-title": null,
+ "external-id": null,
+ "canonical-url": null,
+ "is-amp-supported": true,
+ autotags: [],
+ "linked-entities": [],
+ status: "published",
+ "hero-image-attribution": "Credits: Asif Asharaf",
+ "bullet-type": "123",
+ id: "307e5a1b-5cf0-4321-8193-827b2add174f",
+ "hero-image-s3-key": "ace/2020-10/ec88fad0-ed4d-44ec-9930-72e9d897bdd0/seo.jpg",
+ contributors: [],
+ "associated-series-collection-ids": [],
+ cards: [
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/5ffad09b-7db1-489a-8308-f7d63c745c70",
+ type: "title",
+ "family-id": "d3bf6239-6723-4291-a7d1-6164c808d07d",
+ title: "",
+ id: "5ffad09b-7db1-489a-8308-f7d63c745c70",
+ metadata: {},
+ subtype: null,
+ text: "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit",
+ },
+ {
+ description: "",
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/f24c83a4-dd3d-47fe-8d05-90f6ada10632",
+ type: "text",
+ "family-id": "0a4af70b-2434-4038-8134-87cdc60fc379",
+ title: "",
+ id: "f24c83a4-dd3d-47fe-8d05-90f6ada10632",
+ metadata: {},
+ subtype: null,
+ text: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
",
+ },
+ ],
+ "card-updated-at": 1602234185925,
+ "content-version-id": "9378abd6-2cec-4bdd-88b2-005cc6d1775f",
+ "card-added-at": 1602155475842,
+ status: "draft",
+ id: "aeb377da-eb9f-4013-ae19-fb6fb821e926",
+ "content-id": "aeb377da-eb9f-4013-ae19-fb6fb821e926",
+ version: 9,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "It pays to be kind: improving workplace culture through kindness",
+ message: null,
+ image: {
+ key: "ace/2020-10/ec88fad0-ed4d-44ec-9930-72e9d897bdd0/seo.jpg",
+ url: null,
+ attribution: "Credits: Asif Asharaf",
+ caption: "Saque ipsa quae ab illo inventore veritatis et quip",
+ metadata: {
+ width: 1600,
+ height: 900,
+ "mime-type": "image/jpeg",
+ "file-size": 228062,
+ "file-name": "seo.jpg",
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/82244bcd-c453-41c4-a215-bb038f569375",
+ type: "title",
+ "family-id": "11f060e0-a1aa-4963-9778-24f6b6eca401",
+ title: "",
+ id: "82244bcd-c453-41c4-a215-bb038f569375",
+ metadata: {},
+ subtype: null,
+ text: "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit",
+ },
+ {
+ description: "",
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/ae7131f6-450a-4589-9995-812ba5832c58",
+ type: "text",
+ "family-id": "a970d458-c7d8-4512-8420-4bf3a4046caf",
+ title: "",
+ id: "ae7131f6-450a-4589-9995-812ba5832c58",
+ metadata: {},
+ subtype: null,
+ text: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
",
+ },
+ ],
+ "card-updated-at": 1602155725655,
+ "content-version-id": "43ff8777-4176-4294-95a3-5aaee8e34537",
+ "card-added-at": 1602155520864,
+ status: "draft",
+ id: "70988ea9-90a0-42ea-b2b1-1f7374de06e1",
+ "content-id": "70988ea9-90a0-42ea-b2b1-1f7374de06e1",
+ version: 7,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "It pays to be kind: improving workplace culture through kindness",
+ message: null,
+ image: {
+ key: "ace/2020-10/ec88fad0-ed4d-44ec-9930-72e9d897bdd0/seo.jpg",
+ url: null,
+ attribution: "Credits: Asif Asharaf",
+ caption: "Saque ipsa quae ab illo inventore veritatis et quip",
+ metadata: {
+ width: 1600,
+ height: 900,
+ "mime-type": "image/jpeg",
+ "file-size": 228062,
+ "file-name": "seo.jpg",
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/d3cbfcce-a503-499d-80cd-52fce2215ef3",
+ type: "title",
+ "family-id": "1b8bcf8e-19cb-4d16-ac0e-bb4f0939dbbf",
+ title: "",
+ id: "d3cbfcce-a503-499d-80cd-52fce2215ef3",
+ metadata: {},
+ subtype: null,
+ text: "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit",
+ },
+ {
+ description: "",
+ "image-metadata": {
+ width: 960,
+ height: 540,
+ "mime-type": "image/jpeg",
+ "file-size": 26544,
+ "file-name": "quintype-website_2020-01_2f2ba42d-7a45-4a60-b4af-7d4758f27f5d_Untitled_presentation.jpg",
+ },
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/a7f79ffa-4be0-4207-a495-a035a020cac3",
+ type: "image",
+ "family-id": "6d5d82b8-f879-476d-84a2-1f62f74acdd5",
+ "image-attribution": "Jon Doe",
+ title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.",
+ id: "a7f79ffa-4be0-4207-a495-a035a020cac3",
+ "image-s3-key":
+ "ace/2020-10/920f35b9-023e-44d2-b4de-69dce8587bf7/quintype_website_2020_01_2f2ba42d_7a45_4a60_b4af_7d4758f27f5d_Untitled_presentation.jpg",
+ metadata: {},
+ subtype: null,
+ hyperlink: "https://www.google.com/",
+ },
+ {
+ description: "",
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/2a248f86-3181-4456-9f96-f7e56668fbc1",
+ type: "text",
+ "family-id": "b9a1fdd8-5727-4e5a-86a6-467922aa155f",
+ title: "",
+ id: "2a248f86-3181-4456-9f96-f7e56668fbc1",
+ metadata: {},
+ subtype: null,
+ text: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
",
+ },
+ ],
+ "card-updated-at": 1602156067786,
+ "content-version-id": "dbfeb570-f9aa-4875-9c3d-f48bf551dd91",
+ "card-added-at": 1602155541845,
+ status: "draft",
+ id: "d6876a49-9319-4c24-9bf9-881ea454b967",
+ "content-id": "d6876a49-9319-4c24-9bf9-881ea454b967",
+ version: 10,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "It pays to be kind: improving workplace culture through kindness",
+ message: null,
+ image: {
+ key: "ace/2020-10/920f35b9-023e-44d2-b4de-69dce8587bf7/quintype_website_2020_01_2f2ba42d_7a45_4a60_b4af_7d4758f27f5d_Untitled_presentation.jpg",
+ url: null,
+ attribution: "Jon Doe",
+ caption: null,
+ metadata: {
+ width: 960,
+ height: 540,
+ "mime-type": "image/jpeg",
+ "file-size": 26544,
+ "file-name": "quintype-website_2020-01_2f2ba42d-7a45-4a60-b4af-7d4758f27f5d_Untitled_presentation.jpg",
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ {
+ "story-elements": [
+ {
+ description: "",
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/20db973e-4612-4933-9acd-5a6d4c3d281d",
+ type: "text",
+ "family-id": "b8f84eb7-4a91-45ba-a5d3-95d5f48c7772",
+ title: "",
+ id: "20db973e-4612-4933-9acd-5a6d4c3d281d",
+ metadata: {},
+ subtype: null,
+ text: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
",
+ },
+ {
+ id: "00000000-0000-0000-0000-000000000000",
+ description: "",
+ title: "",
+ subtype: null,
+ type: "text",
+ text: ' text promotional message
',
+ metadata: { "promotional-message": true },
+ },
+ ],
+ "card-updated-at": 1602156067786,
+ "content-version-id": "dc523cfa-dcf2-41b5-ab7a-b5c3577e11f7",
+ "card-added-at": 1602156035607,
+ status: "draft",
+ id: "539c1ed1-79e5-4771-a304-60b46d8376c6",
+ "content-id": "539c1ed1-79e5-4771-a304-60b46d8376c6",
+ version: 2,
+ metadata: {
+ "social-share": {
+ shareable: false,
+ title: "It pays to be kind: improving workplace culture through kindness",
+ message: null,
+ image: {
+ key: "ace/2020-10/ec88fad0-ed4d-44ec-9930-72e9d897bdd0/seo.jpg",
+ url: null,
+ attribution: "Credits: Asif Asharaf",
+ caption: "Saque ipsa quae ab illo inventore veritatis et quip",
+ metadata: {
+ width: 1600,
+ height: 900,
+ "mime-type": "image/jpeg",
+ "file-size": 228062,
+ "file-name": "seo.jpg",
+ },
+ },
+ },
+ attributes: {},
+ },
+ },
+ ],
+ url: "https://ace-web.qtstage.io/health/2020/10/08/it-pays-to-be-kind-improving-workplace-culture-through-kindness",
+ "story-version-id": "8768d161-6433-4f1e-b8ef-e632d180ede9",
+ "content-type": "story",
+ "content-updated-at": 1602234199729,
+ "author-id": 927927,
+ "owner-id": 927927,
+ "linked-story-ids": [],
+ "promotional-message": ' text promotional message
',
+ "asana-project-id": null,
+ "first-published-at": 1602155728566,
+ "hero-image-caption": "Saque ipsa quae ab illo inventore veritatis et quip",
+ version: 18,
+ "story-template": "listicle",
+ "sequence-no": null,
+ "created-at": 1602234185901,
+ authors: [
+ {
+ slug: "pravin-atigre",
+ social: null,
+ name: "Pravin Atigre",
+ "contributor-role": { id: 873, name: "Author" },
+ "avatar-url":
+ "https://lh3.googleusercontent.com/-I9kNTMFkn3E/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdZeM4LMMdylmULvtrAvmeVF9DmAQ/photo.jpg",
+ bio: null,
+ id: 927927,
+ "avatar-s3-key": null,
+ "twitter-handle": null,
+ },
+ ],
+ metadata: { "card-share": { shareable: false } },
+ "publish-at": null,
+ "assignee-name": "Pravin Atigre",
+};
diff --git a/app/isomorphic/arrow/components/Fixture/index.js b/app/isomorphic/arrow/components/Fixture/index.js
new file mode 100644
index 000000000..27305cbd7
--- /dev/null
+++ b/app/isomorphic/arrow/components/Fixture/index.js
@@ -0,0 +1,420 @@
+/* eslint-disable no-undef */
+import configJSON from "./config.json";
+import { dummyStory, dummyPhotoStory, dummyLiveBlogStory, dummyListicleStory } from "./dummyStory";
+import get from "lodash/get";
+import { createStore } from "redux";
+
+export const generateConfig = () => configJSON;
+
+export const generateStory = (storyType, data = {}) => {
+ switch (storyType) {
+ case "photo-story":
+ return Object.assign(dummyPhotoStory, data);
+ case "live-blog":
+ return Object.assign(dummyLiveBlogStory, data);
+ case "listicle-story":
+ return Object.assign(dummyListicleStory, data);
+ default:
+ return Object.assign(dummyStory, data);
+ }
+};
+
+export const generateCollection = ({ stories = 0, subCollections = [], itemMeta = {} } = {}) => {
+ const items = subCollections;
+ Array(stories)
+ .fill({ type: "story", ...itemMeta })
+ .forEach((item, index) => {
+ const story = generateStory();
+ const itm = Object.assign({}, item, { id: story.id, story });
+ items.push(itm);
+ });
+ return {
+ type: "collection",
+ name: "Politics",
+ id: parseInt(Math.random() * 10 ** 10),
+ slug: "collection-slug",
+ template: "section",
+ "created-at": 1597163351395,
+ metadata: {
+ "cover-image": {
+ "cover-image-url":
+ "https://thumbor-stg.assettype.com/ace/2020-08/f71dd527-cbc6-4cc9-94c2-8feee917f7e9/fortune.jpg",
+ metadata: {
+ width: 914,
+ height: 1200,
+ "mime-type": "image/jpeg",
+ "file-size": 179037,
+ "file-name": "fortune.jpg",
+ },
+ "cover-image-s3-key": "ace/2020-08/f71dd527-cbc6-4cc9-94c2-8feee917f7e9/fortune.jpg",
+ caption: "Some Politician",
+ },
+ section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }],
+ },
+ summary:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam felis sed tellus mattis ultricies. Maecenas accumsan hendrerit turpis, a sollicitudin velit viverra nec. Praesent pretium, orci ac sodales volutpat, tellus orci rutrum metus.",
+ items: items,
+ };
+};
+
+export const generateCollections = (count = 0) => {
+ const collections = [];
+ Array(count)
+ .fill(0)
+ .forEach(() => {
+ collections.push(generateCollection({ stories: 10 }));
+ });
+
+ return {
+ type: "collection",
+ name: "News",
+ id: parseInt(Math.random() * 10 ** 10),
+ slug: "collection-slug",
+ template: "section",
+ metadata: {
+ "cover-image": {
+ "cover-image-url":
+ "http://d9zv4zsfqrm9s.cloudfront.net/ace/2017-12/c811b029-962f-4364-b376-ec1548d67494/earth.jpg",
+ "cover-image-metadata": {
+ width: 600,
+ height: 600,
+ "mime-type": "image/jpeg",
+ "focus-point": [355, 204],
+ },
+ "cover-image-s3-key": "vikatan/2019-01/f0b702ac-bfd1-4dd6-8e33-52cbb0bb3153/143203_thumb.jpg",
+ caption: "Some Politician",
+ },
+ section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }],
+ },
+ summary: "This is a collection concerned with politics",
+ items: collections,
+ };
+};
+
+export const generateCollectionsWithStories = (count = 0) => {
+ const items = generateCollection({ stories: 12 });
+ const collec = generateCollections(2);
+ const collections = [];
+ const merged = items.items.concat(collec.items);
+
+ Array(count)
+ .fill(0)
+ .forEach(() => {
+ collections.push(generateCollection({ stories: 12 }));
+ });
+
+ return {
+ type: "collection",
+ name: "News",
+ id: parseInt(Math.random() * 10 ** 10),
+ slug: "collection-slug",
+ template: "section",
+ metadata: {
+ "cover-image": {
+ "cover-image-url":
+ "http://d9zv4zsfqrm9s.cloudfront.net/ace/2017-12/c811b029-962f-4364-b376-ec1548d67494/earth.jpg",
+ "cover-image-metadata": {
+ width: 600,
+ height: 600,
+ "mime-type": "image/jpeg",
+ "focus-point": [355, 204],
+ },
+ "cover-image-s3-key": "vikatan/2019-01/f0b702ac-bfd1-4dd6-8e33-52cbb0bb3153/143203_thumb.jpg",
+ caption: "Some Politician",
+ },
+ section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }],
+ },
+ summary: "This is a collection concerned with politics",
+ items: merged,
+ };
+};
+
+export const generateSubMenu = () => {
+ return {
+ items: [
+ {
+ "tag-name": null,
+ "item-id": 22564,
+ rank: 5493,
+ title: "Link 1",
+ "item-type": "section",
+ "section-slug": "gurupeyarchi",
+ "tag-slug": null,
+ id: 5493,
+ "parent-id": null,
+ url: "https://vikatan-web.qtstage.io/section/gurupeyarchi",
+ "section-name": "அமெரிக்காவில்",
+ data: {
+ color: "#c7c7c7",
+ },
+ items: [
+ {
+ "tag-name": null,
+ "item-id": 22384,
+ rank: 5494,
+ title: "Link 2",
+ "item-type": "section",
+ "section-slug": "cinema",
+ "tag-slug": null,
+ id: 5494,
+ "parent-id": 5493,
+ url: "https://vikatan-web.qtstage.io/section/cinema",
+ "section-name": "அமெரிக்காவில்",
+ data: {
+ color: "#f7f7f7",
+ },
+ },
+ {
+ "tag-name": null,
+ "item-id": 23089,
+ rank: 5504,
+ title: "Child 1",
+ "item-type": "section",
+ "section-slug": "dry6feb2019",
+ "tag-slug": null,
+ id: 5504,
+ "parent-id": 5493,
+ url: "https://vikatan-web.qtstage.io/section/dry6feb2019",
+ "section-name": "அமெரிக்காவில்",
+ data: {
+ color: "#000000",
+ },
+ },
+ ],
+ },
+ ],
+ };
+};
+export const authorData = {
+ slug: "parvathi-mohan-2",
+ name: "Lucy Douglas",
+ social: {
+ twitter: {
+ url: "https://twitter.com/Reena00659364",
+ handle: "Twitter",
+ },
+ youtube: {
+ url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+ handle: "Youtube",
+ },
+ facebook: {
+ url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+ handle: "Facebook",
+ },
+ linkedin: {
+ url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+ handle: "LinkedIn",
+ },
+ whatsapp: {
+ url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+ handle: "Whatsapp",
+ },
+ instagram: {
+ url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+ handle: "Instagram",
+ },
+ pinterest: {
+ url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+ handle: "Pinterest",
+ },
+ },
+ bio: "Lucy Douglas is a freelance journalist based in London. She has a particular interest in small business, startups and the founders behind them and, in a previous life, was an assistant-editor at Professional Beauty magazine, where she road-tested spas up and down the country and checked out the latest advances.",
+ id: 94985,
+ "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+ "twitter-handle": "quintype_inc",
+ stats: {
+ contributions: null,
+ },
+ metadata: {},
+};
+
+export const generateStoryElementData = (elementType) => {
+ const story = generateStory();
+ const storyElements = get(story, ["cards", "0", "story-elements"]);
+ return storyElements.find((element) => {
+ const { subtype, type } = element;
+ if (subtype) return subtype === elementType;
+ return type === elementType;
+ });
+};
+
+export const generateMagazineIssues = () => {
+ return [
+ {
+ collection: {
+ id: 106138,
+ name: "Manifique",
+ metadata: {
+ "cover-image": {
+ success: true,
+ url: "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-09/874/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg",
+ metadata: {
+ width: 4000,
+ height: 6000,
+ "mime-type": "image/jpeg",
+ "file-size": 2574353,
+ "file-name": "aleksandra-tanasienko-oQi_UdQDkzw-unsplash.jpg",
+ },
+ "extracted-data": {
+ artist: "",
+ },
+ attribution: "",
+ "cover-image-url":
+ "https://thumbor-stg.assettype.com/ace/2020-09/f20cecc2-2466-4e3d-8b04-f013d880a9d0/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg",
+ "cover-image-s3-key":
+ "ace/2020-09/f20cecc2-2466-4e3d-8b04-f013d880a9d0/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg",
+ },
+ entities: {
+ collectionEntities: {
+ magazine: [
+ {
+ id: 199563,
+ name: "New Magazine",
+ type: "magazine",
+ "entity-type-id": 382,
+ },
+ ],
+ },
+ },
+ },
+ "collection-date": null,
+ slug: "manifique",
+ template: "collection",
+ "data-source": "manual",
+ "created-at": 1599639879798,
+ },
+ },
+ {
+ collection: {
+ id: 106137,
+ name: "High Times",
+ metadata: {
+ "cover-image": {
+ success: true,
+ url: "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-28/294/da90b29ce035b5a3a134da39e94d654c.jpg",
+ metadata: {
+ width: 474,
+ height: 581,
+ "mime-type": "image/jpeg",
+ "file-size": 49921,
+ "file-name": "da90b29ce035b5a3a134da39e94d654c.jpg",
+ },
+ "extracted-data": {
+ artist: "",
+ },
+ attribution: "",
+ "cover-image-url":
+ "https://thumbor-stg.assettype.com/ace/2020-09/92f5453c-4477-40d3-9a44-3cf0c245b268/da90b29ce035b5a3a134da39e94d654c.jpg",
+ "cover-image-s3-key":
+ "ace/2020-09/92f5453c-4477-40d3-9a44-3cf0c245b268/da90b29ce035b5a3a134da39e94d654c.jpg",
+ },
+ entities: {
+ collectionEntities: {
+ magazine: [
+ {
+ id: 199563,
+ name: "New Magazine",
+ type: "magazine",
+ "entity-type-id": 382,
+ },
+ ],
+ },
+ },
+ },
+ "collection-date": null,
+ slug: "high-times",
+ template: "collection",
+ "data-source": "manual",
+ "created-at": 1599639711992,
+ },
+ },
+ {
+ collection: {
+ id: 106131,
+ name: "New Magazine Issue",
+ metadata: {
+ "cover-image": {
+ success: true,
+ url: "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-09/1200/alexis_zacharko_07rXq3YroVM_unsplash.jpg",
+ metadata: {
+ width: 3456,
+ height: 5184,
+ "mime-type": "image/jpeg",
+ "file-size": 3084612,
+ "file-name": "alexis-zacharko-07rXq3YroVM-unsplash.jpg",
+ "focus-point": [2154, 2269],
+ },
+ "extracted-data": {
+ artist: "",
+ },
+ attribution: "",
+ "cover-image-url":
+ "https://thumbor-stg.assettype.com/ace/2020-09/ed79b1ed-5d63-4ec1-8a4b-da87d8ed7edc/alexis_zacharko_07rXq3YroVM_unsplash.jpg",
+ "cover-image-s3-key":
+ "ace/2020-09/ed79b1ed-5d63-4ec1-8a4b-da87d8ed7edc/alexis_zacharko_07rXq3YroVM_unsplash.jpg",
+ },
+ entities: {
+ collectionEntities: {
+ magazine: [
+ {
+ id: 199563,
+ name: "New Magazine",
+ type: "magazine",
+ "entity-type-id": 382,
+ },
+ ],
+ },
+ },
+ },
+ "collection-date": null,
+ slug: "new-magazine-issue",
+ template: "collection",
+ "data-source": "manual",
+ "created-at": 1599616208142,
+ },
+ },
+ {
+ collection: {
+ id: 106089,
+ name: "First Magazine Collection",
+ metadata: {
+ "cover-image": {
+ "cover-image-s3-key": "ace/2020-07/3e3dc7df-8a1c-462d-a236-265d45c28651/evil_caat.jpg",
+ "cover-image-metadata": {
+ "mime-type": "image/jpeg",
+ "focus-point": [3444, 3222],
+ width: 6000,
+ "file-size": 10319729,
+ "file-name": "evil caat.jpg",
+ height: 4000,
+ },
+ caption: null,
+ "cover-image-url":
+ "https://thumbor-stg.assettype.com/ace/2020-07/3e3dc7df-8a1c-462d-a236-265d45c28651/evil_caat.jpg",
+ },
+ entities: {
+ collectionEntities: {
+ magazine: [
+ {
+ id: 199563,
+ name: "New Magazine",
+ type: "magazine",
+ "entity-type-id": 382,
+ },
+ ],
+ },
+ },
+ },
+ "collection-date": null,
+ slug: "first-magazine-collection",
+ template: "collection",
+ "data-source": "automated",
+ "created-at": 1599571645414,
+ },
+ },
+ ];
+};
+
+const reducer = () => ({ qt: { config: { "cdn-image": "thumbor-stg.assettype.com" } } });
+export const generateStore = createStore(reducer);
diff --git a/app/isomorphic/arrow/components/Fixture/slot-config.js b/app/isomorphic/arrow/components/Fixture/slot-config.js
new file mode 100644
index 000000000..36c973fb2
--- /dev/null
+++ b/app/isomorphic/arrow/components/Fixture/slot-config.js
@@ -0,0 +1,29 @@
+export const slotConfig = [{ type: "ad" }];
+
+export const slotData = [
+ {
+ type: "widget",
+ layout: "widget",
+ layoutLabel: "Custom Widget",
+ pageType: "story",
+ widgetCode: "V2lkZ2V0JTIwMQ==",
+ config: {
+ customCode: "V2lkZ2V0JTIwMQ==",
+ },
+ },
+ {
+ type: "collection",
+ collectionSlug: "",
+ title: "",
+ },
+ {
+ type: "widget",
+ layout: "widget",
+ layoutLabel: "Custom Widget",
+ pageType: "story",
+ widgetCode: "V2lkZ2V0JTIwMg==",
+ config: {
+ customCode: "V2lkZ2V0JTIwMg==",
+ },
+ },
+];
diff --git a/app/isomorphic/arrow/components/Molecules/FullScreenImages/fullscreenimages.scss b/app/isomorphic/arrow/components/Molecules/FullScreenImages/fullscreenimages.scss
new file mode 100644
index 000000000..38188c25c
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/FullScreenImages/fullscreenimages.scss
@@ -0,0 +1,56 @@
+@import "../../../../../../node_modules/react-image-lightbox/style.css";
+
+.arr--image-lightbox {
+ .icon.loader {
+ color: var(--arrow-c-brand1);
+ }
+
+ .ril__toolbarRightSide {
+ flex-grow: 1;
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .ril__toolbar {
+ bottom: 0;
+ top: auto;
+ }
+
+ img.ril__image {
+ width: unset;
+ max-width: 100%;
+ }
+
+ .ril__zoomInButton {
+ position: relative;
+ border-right: 1px solid var(--arrow-c-mono7);
+ background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgPHBhdGggZD0iTS0zLTRoMjR2MjRILTN6IiBvcGFjaXR5PSIuMzg0Ii8+CiAgICAgICAgPGcgZmlsbD0iI0ZGRiI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik04IDBoMXYxN0g4eiIvPgogICAgICAgICAgICA8cGF0aCBkPSJNMTcgOHYxSDBWOHoiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=")
+ no-repeat center;
+ }
+
+ .ril__zoomOutButton {
+ position: relative;
+ border-right: 1px solid var(--arrow-c-mono7);
+ background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxIiB2aWV3Qm94PSIwIDAgMTcgMSI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgIDxwYXRoIGQ9Ik0tMy0xMmgyNHYyNEgtM3oiIG9wYWNpdHk9Ii4zODQiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTcgMHYxSDBWMHoiLz4KICAgIDwvZz4KPC9zdmc+Cg==")
+ no-repeat center;
+ }
+
+ .ril__zoomInButton,
+ .ril__zoomOutButton,
+ .ril__closeButton {
+ width: 48px;
+ height: 48px;
+ }
+ .ril__navButtons {
+ outline: none;
+ border-radius: 0;
+ }
+
+ .ril__toolbarItem .arr--hyperlink-button {
+ position: unset;
+ svg {
+ position: relative;
+ top: 10px;
+ }
+ }
+}
diff --git a/app/isomorphic/arrow/components/Molecules/FullScreenImages/index.js b/app/isomorphic/arrow/components/Molecules/FullScreenImages/index.js
new file mode 100644
index 000000000..1a7b0c516
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/FullScreenImages/index.js
@@ -0,0 +1,98 @@
+import React, { useState, Suspense, lazy } from "react";
+import { useSelector } from "react-redux";
+import get from "lodash/get";
+import PropTypes from "prop-types";
+import "./fullscreenimages.scss";
+import { Loading } from "../../Svgs/Loading/loading";
+import { HyperLink } from "../../Atoms/Hyperlink";
+
+const Lightbox = lazy(() => import("react-image-lightbox"));
+
+export const FullScreenImages = ({ imageSlug = "", template, element = {}, props }) => {
+ const cdnImage = useSelector((state) => get(state, ["qt", "config", "cdn-image"]));
+ const [photoIndex, handleImage] = useState(0);
+ const [isOpen, handleOpen] = useState(false);
+ const deviceWidth = get(global, ["innerWidth"], 0);
+
+ const hyperlinks = get(element, ["story-elements"], []).map((image) => image.hyperlink);
+
+ let imageUrlList = [];
+ if (!imageSlug) {
+ imageUrlList = get(element, ["story-elements"], []).map(
+ (image) => `//${cdnImage}/${image["image-s3-key"]}?w=${deviceWidth}`
+ );
+ }
+
+ const onClickHandler = (index) => {
+ handleOpen(true);
+ handleImage(index);
+ };
+ const onClickKey = imageSlug ? "onClick" : "onClickHandler";
+
+ const imageUrlListLength = imageUrlList.length;
+ const onMoveNext = (imageUrlListLength) => {
+ const next = (photoIndex + 1) % imageUrlListLength;
+ handleImage(next);
+ };
+
+ const onMovePrev = (imageUrlListLength) => {
+ const prev = (photoIndex + imageUrlListLength - 1) % imageUrlListLength;
+ handleImage(prev);
+ };
+
+ const onClose = () => {
+ handleImage(0);
+ handleOpen(false);
+ };
+
+ const getHyperLink = () => {
+ if (element.hyperlink || hyperlinks[photoIndex]) {
+ return
+
+ );
+ };
+
+ return (
+
+ {React.createElement(template, {
+ [onClickKey]: onClickHandler,
+ ...props,
+ })}
+ {isOpen ? (
+
+ );
+};
+FullScreenImages.propTypes = {
+ imageSlug: PropTypes.string,
+ template: PropTypes.func,
+ element: PropTypes.shape({
+ "story-elements": PropTypes.array,
+ }),
+ props: PropTypes.object,
+};
diff --git a/app/isomorphic/arrow/components/Molecules/KeyEvents/README.md b/app/isomorphic/arrow/components/Molecules/KeyEvents/README.md
new file mode 100644
index 000000000..ff89b8faf
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/KeyEvents/README.md
@@ -0,0 +1,21 @@
+# Key Events
+
+Key events is used to represent the event templates for a live blog story.
+
+## Usage
+
+```jsx
+import { KeyEvents } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+
+const config = {
+ theme: #333333;
+}
+
+
+
+
+
+ {storyElements.map((element, index) => element.type === "title" &&
{element.text} )}
+ {showLoadMore && lastElement && loadCards && (
+
+ )}
+
+
+ );
+};
+
+KeyEventCards.propTypes = {
+ card: PropTypes.shape({
+ "card-added-at": PropTypes.number,
+ "story-elements": PropTypes.array,
+ id: PropTypes.string,
+ }),
+ config: PropTypes.object,
+ slug: PropTypes.string,
+ story: PropTypes.object,
+ elements: PropTypes.array,
+ index: PropTypes.number,
+ cardLength: PropTypes.number,
+ loadCards: PropTypes.bool,
+ showLoadMore: PropTypes.bool,
+};
+
+const KeyEvents = ({ story = {}, config = {}, showLoadMore = true, publishedDetails = {} }) => {
+ const keyEventsTitle = get(publishedDetails, ["localizedKeyEvents"], "Key Events") || "Key Events";
+ const cards = get(story, ["cards"], []);
+ const { theme, initialLoadCount = 4 } = config;
+ const textColor = getTextColor(theme);
+ const [initialCount, updatedCount] = useState(initialLoadCount);
+ const cardsWithKeyEvents = cards.filter((card) => get(card.metadata, ["attributes", "key-event"]));
+ const lastElement = cardsWithKeyEvents.length > initialCount;
+ const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+
+ const onClick = () => {
+ updatedCount(initialCount + initialLoadCount);
+ };
+
+ if (cardsWithKeyEvents.length < 1) {
+ return null;
+ }
+
+ const showAllCards = !showLoadMore ? cardsWithKeyEvents.slice(0, 4) : cardsWithKeyEvents.slice(0, initialCount);
+
+ const keyEvents = showAllCards.map((card, index, source) => (
+
+
{keyEventsTitle}
+
{keyEvents}
+ {showLoadMore && lastElement && (
+
+ )}
+
+
+ {upperCase(pageTitle)}
+
+
+ {pageDescription}
+
+ {showButton && (
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ )}
+
+
+
+
+ );
+};
+
+PortraitStoryCard.propTypes = {
+ border: PropTypes.string,
+ theme: PropTypes.string,
+ headerLevel: PropTypes.string,
+ separator: PropTypes.string,
+ borderColor: PropTypes.string,
+ config: PropTypes.object,
+ story: PropTypes.object,
+};
+
+export default StateProvider(PortraitStoryCard);
diff --git a/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/portrait-story-card.m.css b/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/portrait-story-card.m.css
new file mode 100644
index 000000000..add11a0ff
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/portrait-story-card.m.css
@@ -0,0 +1,38 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.wrapper {
+ :global {
+ .arr--story-card > div:nth-child(2) {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: var(--arrow-spacing-xs);
+
+ @media (--viewport-medium) {
+ padding: var(--arrow-spacing-m);
+ }
+ }
+ .arr--headline > a > h6,
+ .author-name,
+ .arr--content-wrapper time,
+ .arr--read-time,
+ .section-tag {
+ color: var(--arrow-c-light);
+ }
+
+ .arr--hero-image {
+ margin-bottom: 0;
+ }
+
+ .arr--hero-image figure::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: linear-gradient(0deg, var(--arrow-c-mono3), transparent 70%, transparent);
+ }
+ }
+}
diff --git a/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/stories.js b/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/stories.js
new file mode 100644
index 000000000..4bbbe9e9f
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/stories.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+import Readme from "./README.md";
+import { generateStory } from "../../Fixture";
+import PortraitStoryCard from "./index";
+import { withStore } from "../../../../storybook";
+
+const story = generateStory();
+
+withStore(
+ "molecules/Portrait Story Card ",
+ {
+ qt: {
+ config: {
+ "cdn-image": "thumbor-stg.assettype.com",
+ mountAt: "/sub-directory",
+ },
+ },
+ },
+ Readme
+)
+ .addDecorator((story) => {story()}
)
+
+ .add("Default", () =>
;
+ const borderStyle = border === "full" ? "border" : "";
+ const textColor = getTextColor(theme);
+ const { localizationConfig = {} } = config;
+ return (
+
+ );
+};
+
+SliderHorizontalCard.propTypes = {
+ story: PropTypes.object.isRequired,
+ border: PropTypes.string,
+ theme: PropTypes.string,
+ headerLevel: PropTypes.string,
+ borderColor: PropTypes.string,
+ config: PropTypes.object,
+};
diff --git a/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/slider-horizontal-card.m.css b/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/slider-horizontal-card.m.css
new file mode 100644
index 000000000..c8623d3e2
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/slider-horizontal-card.m.css
@@ -0,0 +1,42 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.horizontal {
+ display: flex;
+ flex-direction: column;
+ @media (--viewport-medium) {
+ display: grid;
+ flex-direction: column;
+ grid-template-columns: 1fr 1fr;
+ grid-column-gap: 24px;
+ }
+}
+.content {
+ flex-basis: 50%;
+ @media (--viewport-medium) {
+ margin: var(--arrow-spacing-l) 40px var(--arrow-spacing-l) 0;
+ }
+}
+
+.border .content {
+ @media (--viewport-medium) {
+ margin: var(--arrow-spacing-l) 40px var(--arrow-spacing-l) 0;
+ }
+}
+
+html[dir="rtl"] {
+ .content,
+ .border .content {
+ @media (--viewport-medium) {
+ margin: var(--arrow-spacing-l) 0 var(--arrow-spacing-l) 40px;
+ }
+ }
+}
+
+.horizontal > :first-child {
+ @media (--viewport-medium) {
+ margin-bottom: 0;
+ }
+}
+.border {
+ border: 1px solid var(--arrow-c-mono5);
+}
diff --git a/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/stories.js b/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/stories.js
new file mode 100644
index 000000000..e8374fd30
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/stories.js
@@ -0,0 +1,30 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { SliderHorizontalCard } from "./index";
+import Readme from "./README.md";
+import { color } from "@storybook/addon-knobs";
+import { withStore } from "../../../../storybook";
+
+const story = generateStory();
+
+const defaultvalue = "#3a9fdd";
+const sectionTagBorderColor = "Section Tag Border Color";
+
+withStore(
+ "molecules/Horizontal Slider Card ",
+ {
+ qt: {
+ config: {
+ "cdn-image": "thumbor-stg.assettype.com",
+ mountAt: "/sub-directory",
+ },
+ },
+ },
+ Readme
+)
+ .add("Default horizontal card for slider", () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {icon}
+
+
+ ) : null;
+};
+ShareItem.propTypes = {
+ name: PropTypes.string,
+ url: PropTypes.string,
+ icon: PropTypes.node,
+ dataTestId: PropTypes.string,
+};
+
+function getActionIcon(open, color) {
+ if (!open) return
+ {getActionIcon(isOpen, iconColor)}
+
+ );
+ };
+
+ const clickHandler = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const popUpWrapper = () => {
+ return (
+
+ {!isOpen &&
}
+ {isOpen && (
+ <>
+
+
+ {
+ setIsOpen(false);
+ }}
+ />
+
+
+
+ )}
+
+
+
+ {shareIcon()}
+ {iconsList.map((iconData, index) => (
+
+
+ {popUpWrapper()}
+
+
+```
+
+### Story Card w/ Image & Timestamp
+
+```jsx
+
+
+```
+
+### Story Card w/ Headline, Author & Subheadline
+
+```jsx
+
+
+```
+
+### Story Card w/ Image, Headline, Author+Timestamp & Subheadline
+
+```jsx
+
+
+```
+
+### Story Card using Story content
+
+```jsx
+
+
+```
+
+### Story Card using aspect ratio
+
+```jsx
+
+
+```
+
+### Story Card with background image and overlap with content
+
+```jsx
+
+
+```
+
+
diff --git a/app/isomorphic/arrow/components/Molecules/StoryCard/READMEBORDER.md b/app/isomorphic/arrow/components/Molecules/StoryCard/READMEBORDER.md
new file mode 100644
index 000000000..a853a14bb
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/StoryCard/READMEBORDER.md
@@ -0,0 +1,61 @@
+# StoryCard
+
+The _StoryCard_ component with different kinds of borders and box shadow modules used to represent a story within a Row with borders.
+
+The _StoryCard_ can be composible based on it's children(Atoms).
+
+### Default Story Card with Full Border
+
+```jsx
+
+
+
+
+```
+
+### StoryCard using StoryCardContent border Box and fullBleed False
+
+```jsx
+
+
+
+
+```
+
+### Horizontal StoryCard using StoryCardContent border full
+
+```jsx
+
+
+
+
+```
+
+
diff --git a/app/isomorphic/arrow/components/Molecules/StoryCard/index.js b/app/isomorphic/arrow/components/Molecules/StoryCard/index.js
new file mode 100644
index 000000000..d539ed78c
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/StoryCard/index.js
@@ -0,0 +1,185 @@
+import React from "react";
+import { Headline } from "../../Atoms/Headline/index";
+import { Subheadline } from "../../Atoms/Subheadline/index";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { HeroImage } from "../../Atoms/HeroImage/index";
+import { SectionTag } from "../../Atoms/SectionTag/index";
+import { getTextColor, isEmpty, rgbToHex } from "../../../utils/utils";
+import { StateProvider } from "../../SharedContext";
+
+import PropTypes from "prop-types";
+
+import "./storycard.m.css";
+
+const StoryCardBase = ({
+ story,
+ children,
+ isHorizontal,
+ aspectRatio,
+ border,
+ useImageAsBackground,
+ bgImgContentOverlap,
+ theme,
+ borderColor,
+ isHorizontalMobile,
+ centerAlign,
+ headerLevel,
+ hideAuthorImage,
+ prefix,
+ config,
+ isHorizontalWithImageLast,
+}) => {
+ if (!story || isEmpty(story)) return
;
+ const borderOptions = ["default", "full", "bottom", "boxShadow"];
+ const borderTemplate = borderOptions.includes(border) ? `border-${border}` : "";
+ // TODO optimize conditions
+
+ let horizontalCardStyle = "default-card";
+ if (isHorizontal) horizontalCardStyle = "horizontal-card";
+ else if (isHorizontalWithImageLast) horizontalCardStyle = "horizontal-image-last";
+
+ const bgImageClasses = useImageAsBackground ? "backgroung-img" : "";
+ const bgImgContentOverlapClass = bgImgContentOverlap ? "content-overlap" : "";
+ const textColor = getTextColor(theme);
+ const horizontalMobileClasses = isHorizontalMobile ? "horizontal-mob" : "";
+
+ const defaultStorycard = (
+
+ {children || defaultStorycard}
+
+ );
+};
+
+const DefaultStoryCard = ({
+ story,
+ border,
+ isHorizontal,
+ aspectRatio,
+ headerLevel,
+ isHorizontalMobile = false,
+ centerAlign = false,
+ borderColor,
+ hideAuthorImage,
+ prefix,
+ isHorizontalWithImageLast,
+ config,
+}) => {
+ const alignment = centerAlign ? "center-align" : "";
+ const SectionTagborderColor = rgbToHex(borderColor);
+ const { localizationConfig = {} } = config;
+
+ return (
+ <>
+ {isHorizontal ? (
+ {story()}
)
+ .add("Default Story Card", () => (
+
+
+ ))
+ .add("Story Card w/ Image & Timestamp", () => (
+
+
+ ))
+ .add("Story Card w/ Headline, Author & Subheadline", () => (
+
+ ))
+
+ .add("Story Card w/ Image, Headline & Subheadline Author+Timestamp ", () => (
+
+
+ ))
+ .add("Story Card w/o Image, Headline, Author+Timestamp & Subheadline", () => (
+
+
+ ))
+ .add("Story Card using Story content", () => (
+
+
+ ))
+ .add("Story card with aspect ratio", () => (
+ {story()}
)
+ .add("without border", () => (
+
+
+
+
+ ))
+ .add("StoryCard using StoryCardContent border Box and fullBleed False", () => (
+
+
+
+
+ ))
+ .add("Horizontal StoryCard using StoryCardContent border full ", () => (
+
+
+
+
+ ));
+
+withStore(
+ "Molecules/StoryCard(with background image)",
+ {
+ qt: {
+ config: {
+ "cdn-image": "thumbor-stg.assettype.com",
+ },
+ },
+ },
+ ReadmeForBgImage
+)
+ .addDecorator((story) => {story()}
)
+ .add("Story Card with background image", () => (
+
+
+ ))
+ .add("Story Card with background image and overlap with content", () => (
+
+
+ ));
diff --git a/app/isomorphic/arrow/components/Molecules/StoryCard/storycard.m.css b/app/isomorphic/arrow/components/Molecules/StoryCard/storycard.m.css
new file mode 100644
index 000000000..f75ac4d98
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/StoryCard/storycard.m.css
@@ -0,0 +1,158 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.author-timestamp-wrapper {
+ display: flex;
+ align-items: center;
+}
+.default-card {
+ display: flex;
+ flex-direction: column;
+}
+.horizontal-card {
+ display: flex;
+ flex-direction: row;
+}
+
+.backgroung-img > a > figure::after {
+ @media (--viewport-medium) {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent 50%, transparent);
+ }
+}
+.backgroung-img > div:nth-child(2) {
+ @media (--viewport-medium) {
+ padding: var(--arrow-spacing-m) var(--arrow-spacing-m) 48px;
+ position: absolute;
+ bottom: 0;
+ left: 15%;
+ right: 15%;
+ }
+}
+.backgroung-img img {
+ position: absolute;
+ bottom: 0;
+}
+
+.content-overlap > div:nth-child(2) {
+ @media (--viewport-medium) {
+ margin: 0 var(--arrow-spacing-m);
+ width: calc(100% - 32px);
+ background-color: var(--arrow-c-light);
+ padding: var(--arrow-spacing-m);
+ position: absolute;
+ bottom: 0;
+ }
+}
+.content-overlap img {
+ @media (--viewport-medium) {
+ position: absolute;
+ bottom: 0;
+ }
+}
+
+/* TODO: Refactor targetting of child */
+.horizontal-card > div:first-child {
+ flex-basis: 30%;
+}
+
+.horizontal-card > div:nth-child(2) {
+ flex-basis: 70%;
+}
+
+.border-full.light {
+ border: 1px solid var(--light-border);
+}
+
+.border-full.dark {
+ border: 1px solid var(--dark-border);
+}
+
+.border-bottom.light {
+ border-bottom: 1px solid var(--light-border);
+ padding-bottom: var(--arrow-spacing-m);
+}
+
+.border-bottom.dark {
+ border-bottom: 1px solid var(--dark-border);
+ padding-bottom: var(--arrow-spacing-m);
+}
+
+.border-boxShadow {
+ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+}
+.center-align {
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+ @media (--viewport-medium) {
+ align-items: center;
+ text-align: center;
+ }
+}
+
+.content-bottom {
+ /* padding: 0 0 0 8px; */
+}
+.content-full,
+.content-boxShadow {
+ padding: var(--arrow-spacing-xs) var(--arrow-spacing-m);
+}
+.backgroung-img,
+.content-overlap {
+ position: relative;
+}
+
+.hero-image {
+ margin-bottom: var(--arrow-spacing-xs);
+ padding-right: 0;
+}
+.right-padding {
+ padding-bottom: 0;
+ padding-right: var(--arrow-spacing-xs);
+}
+
+.horizontal-mob {
+ display: flex;
+ flex-direction: row;
+ @media (--viewport-medium) {
+ flex-direction: column;
+ }
+}
+.horizontal-mob .hero-image {
+ flex-basis: 30%;
+ @media (--viewport-medium) {
+ flex-basis: 100%;
+ }
+}
+.horizontal-mob .content {
+ flex-basis: 70%;
+ @media (--viewport-medium) {
+ flex-basis: 100%;
+ }
+}
+
+.border-default {
+ border: none;
+ height: 100%;
+}
+.card {
+ height: 100%;
+}
+
+.horizontal-image-last {
+ display: flex;
+ flex-direction: row-reverse;
+}
+
+.horizontal-image-last > div:first-child {
+ flex-basis: 30%;
+}
+
+.horizontal-image-last > div:nth-child(2) {
+ flex-basis: 70%;
+}
diff --git a/app/isomorphic/arrow/components/Molecules/StoryCardWithBulletPoint/README.md b/app/isomorphic/arrow/components/Molecules/StoryCardWithBulletPoint/README.md
new file mode 100644
index 000000000..c029a9b08
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/StoryCardWithBulletPoint/README.md
@@ -0,0 +1,9 @@
+# Story Card With Bullet Point
+
+Modified Story Card, with numbered bullet point
+
+## Usage
+
+```jsx
+
;
+
+ case "bigfact":
+ return
+
+ );
+
+ case "slideshow":
+ return (
+
+
+ );
+
+ case "youtube-video":
+ case "dailymotion-video":
+ return (
+
+
+ );
+ case "attachment":
+ return
+
+ );
+ case "references":
+ const { opts: { showHeadline = true, headlineText = "" } = {} } = references;
+ return (
+
+
+ );
+ }
+};
+
+const MainImageWrapper = ({ imageElement, story, children, config, card }) => {
+ return (
+ <>
+
+
+ );
+};
+
+MainImageWrapper.propTypes = {
+ story: PropTypes.object,
+ imageElement: PropTypes.object,
+ config: PropTypes.object,
+ children: PropTypes.node,
+ card: PropTypes.shape({
+ id: PropTypes.string,
+ }),
+};
+
+export const StoryElementCard = ({
+ story,
+ card,
+ heroVideoElementId = -1,
+ config,
+ isLive,
+ theme,
+ adComponent,
+ widgetComp,
+}) => {
+ const textColor = getTextColor(theme);
+ const isLiveBlog = isLive ? "live-blog" : "";
+ let shouldRunFBMobileVideoFix = true;
+
+ return (
+
+ {get(card, ["story-elements"], []).map((element, index) => {
+ if (element.id === heroVideoElementId) return false;
+ if (element.subtype && element.subtype === "facebook-post" && shouldRunFBMobileVideoFix) {
+ facebookMobileVideoResizeFix();
+ shouldRunFBMobileVideoFix = false;
+ }
+ const tableStyle = element && element.subtype === "table" ? "table" : "";
+ const cardId = get(card, ["id"], "");
+ return (
+
+ {getElement(story, element, config, adComponent, widgetComp, index, cardId)}
+
+ );
+ })}
+
+ {get(card, ["story-elements"], []).map((element, index) => {
+ const cardId = get(card, ["id"], "");
+ if (element.type === "image") {
+ return
;
+ } else {
+ if (element.subtype && element.subtype === "facebook-post" && shouldRunFBMobileVideoFix) {
+ facebookMobileVideoResizeFix();
+ shouldRunFBMobileVideoFix = false;
+ }
+ return (
+
+ {getElement(story, element, config, adComponent, widgetComp, index, cardId)}
+
+ );
+ }
+ })}
+
+
+```
+
+### Story Card with Headline, Author with Timestamp and Subheadline
+
+```jsx
+
+
+```
+
+
diff --git a/app/isomorphic/arrow/components/Molecules/StorycardContent/index.js b/app/isomorphic/arrow/components/Molecules/StorycardContent/index.js
new file mode 100644
index 000000000..3f0a2cd4e
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/StorycardContent/index.js
@@ -0,0 +1,77 @@
+import React from "react";
+import { Headline } from "../../Atoms/Headline";
+import { SectionTag } from "../../Atoms/SectionTag";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { getTextColor, rgbToHex } from "../../../utils/utils";
+
+import PropTypes from "prop-types";
+
+import "./storycardContent.m.css";
+
+export const StorycardContent = ({
+ story,
+ children,
+ theme,
+ border,
+ isHorizontalMobile,
+ headerLevel,
+ borderColor,
+ config,
+}) => {
+ const textColor = getTextColor(theme);
+ const borderOptions = ["full"];
+ const SectionTagborderColor = rgbToHex(borderColor);
+ const borderTemplate = borderOptions.includes(border) ? `border-${border}` : "";
+ const horizontalCard = isHorizontalMobile ? "horizontal-content-wrapper" : "";
+ return (
+
+ {children || (
+
+ );
+};
+
+const DefaultStoryCardContent = ({ story, headerLevel, borderColor, config = {} }) => {
+ const SectionTagborderColor = rgbToHex(borderColor);
+ const { localizationConfig = {} } = config;
+ return (
+
+ );
+};
+
+DefaultStoryCardContent.propTypes = {
+ story: PropTypes.object.isRequired,
+ border: PropTypes.string,
+ theme: PropTypes.string,
+ isHorizontalMobile: PropTypes.bool,
+ headerLevel: PropTypes.string,
+ borderColor: PropTypes.string,
+ config: PropTypes.object,
+};
+
+StorycardContent.propTypes = {
+ story: PropTypes.object.isRequired,
+ children: PropTypes.node,
+ theme: PropTypes.string,
+ border: PropTypes.string,
+ isHorizontalMobile: PropTypes.bool,
+ headerLevel: PropTypes.string,
+ borderColor: PropTypes.string,
+ config: PropTypes.object,
+};
diff --git a/app/isomorphic/arrow/components/Molecules/StorycardContent/stories.js b/app/isomorphic/arrow/components/Molecules/StorycardContent/stories.js
new file mode 100644
index 000000000..862b436e4
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/StorycardContent/stories.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import { StorycardContent } from "./index";
+import Readme from "./README.md";
+
+import { Headline } from "../../Atoms/Headline/index";
+import { Subheadline } from "../../Atoms/Subheadline/index";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+
+const story = generateStory();
+
+withStore(
+ "Molecules/StoryCard Content",
+ {
+ qt: {
+ config: {
+ "cdn-image": "thumbor-stg.assettype.com",
+ mountAt: "/sub-directory",
+ },
+ },
+ },
+ Readme
+)
+ .addDecorator((story) => {story()}
)
+ .add("default", () =>
+
+ ))
+ .add("Story Card with Headline, Author with Timestamp and Subheadline ", () => (
+
+
+ ));
diff --git a/app/isomorphic/arrow/components/Molecules/StorycardContent/storycardContent.m.css b/app/isomorphic/arrow/components/Molecules/StorycardContent/storycardContent.m.css
new file mode 100644
index 000000000..790c9cc36
--- /dev/null
+++ b/app/isomorphic/arrow/components/Molecules/StorycardContent/storycardContent.m.css
@@ -0,0 +1,21 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.wrapper {
+ flex-basis: 70%;
+ @media (--viewport-medium) {
+ flex-basis: 100%;
+ }
+}
+.horizontal-content-wrapper.border-full {
+ padding: 16px 16px 16px 0;
+ @media (--viewport-medium) {
+ padding: 0 16px 16px 16px;
+ }
+}
+
+.border-full {
+ padding: 12px 0 0 0;
+ @media (--viewport-medium) {
+ padding: 0 16px 16px 16px;
+ }
+}
diff --git a/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/README.md b/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/README.md
new file mode 100644
index 000000000..dd69b048f
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/README.md
@@ -0,0 +1,38 @@
+# Alternate Collection Filter
+
+The _AlternateCollectionFilter_ component is a collection of collections in a tabbed interface.
+
+## Usage
+
+### Import
+
+```jsx
+import { AlternateCollectionFilter } from "@quintype/arrow";
+```
+
+### Setting the Row context
+
+```jsx
+const contextConfig = {
+ theme: "#ffffff",
+ border: "",
+ collectionNameTemplate: "default",
+ sectionTagTemplate: "solid",
+ showSection: true,
+ showAuthor: true,
+ showTime: true,
+ slotConfig: [{ type: "story", component: () =>
+
+
+
+
+ {getFilteredCollection.map((subCollections, index) => {
+ return (
+
+
openChildCollectionItems(event, index, subCollections.id)}
+ >
+ {subCollections.name}
+
+
+
+ );
+ })}
+
+
+
+ {loading ? (
+
+ ) : (
+
+
+ {items.slice(0, 6).map((story, index) => (
+
+
+
+
+ ))}
+
+
+ )}
+
+
+ {items.length > 6 && (
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ )}
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color("Collection Name Border Color", collectionNameDefaultValue),
+ borderColor: color("Section Tag Border Color", sectionTagDefaultvalue),
+ theme: color("color", defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ showRowTitle: boolean("Row title", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ mock.onGet(API_REQUEST).reply(200, nestedCollection);
+
+ return
+
+ );
+ expect(wrapper.find(AsideCollection)).toHaveLength(1);
+ });
+ it("Should render template with array of stories", () => {
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "aside-collection" }).prop("className")).toMatch(/aside-collection/);
+ });
+ it("Should render `no stories message` if there are no stories", () => {
+ const wrapper = shallow(
+ {storyList && storyList.length > 0 ? (
+ storyList.slice(0, 4).map((item) => {
+ const story = item.story || item;
+ return (
+
+
+
+
+
+ {isHorizontal &&
}
+
+
+
+
+ );
+ })
+ ) : (
+
+ No stories found.
+
+ )}
+
+
+ );
+ }
+ const isSticky = sticky ? "sticky" : "";
+ const asideSlot = (type, slot, index) => {
+ switch (type) {
+ case "ad":
+ return (
+
+ {adComponent({ ...slot, id: `ad-${index}_${storyId}` })}
+
+ );
+ case "widget":
+ return (
+
+ {widgetComp({ ...slot, id: `widget-${index}_${storyId}` })}
+
+ );
+
+ case "collection":
+ return (
+
+
+ );
+ }
+ };
+
+ return (
+
+ {enableKeyEvents && (
+
+ );
+};
+
+AsideCollection.propTypes = {
+ data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+ config: PropTypes.object,
+ opts: PropTypes.object,
+ horizontal: PropTypes.bool,
+ slots: PropTypes.array,
+ adComponent: PropTypes.func,
+ widgetComp: PropTypes.func,
+ sticky: PropTypes.bool,
+ keyEventsData: PropTypes.shape({
+ story: PropTypes.object,
+ config: PropTypes.object,
+ showLoadMore: PropTypes.boolean,
+ }),
+ enableKeyEvents: PropTypes.boolean,
+ storyId: PropTypes.string,
+};
+
+export default StateProvider(AsideCollection);
+export { StoryCollection };
diff --git a/app/isomorphic/arrow/components/Rows/AsideCollection/stories.js b/app/isomorphic/arrow/components/Rows/AsideCollection/stories.js
new file mode 100644
index 000000000..fde8357c4
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/AsideCollection/stories.js
@@ -0,0 +1,52 @@
+import { boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import AsideCollection from ".";
+import { collectionNameTemplates, optionalSelect, withStore } from "../../../../storybook";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import { generateStory } from "../../Fixture";
+import { slotData } from "../../Fixture/slot-config";
+import Readme from "./README.md";
+
+const story = generateStory();
+const stories = [story, story, story];
+const label = "Background color";
+const defaultvalue = "#ffffff";
+const collectionNameDefaultValue = "#3a9fdd";
+const collectionNameBorderColorLabel = "Collection Name Border Color";
+
+const configurableSlot = () => {
+ return
+
+
+ {collection.summary && (
+
+ {collection.summary}
+
+ )}
+
+
+ {getFilteredCollection.map((subCollections, index) => {
+ return (
+ openChildCollectionItems(event, index, subCollections.id)}
+ data-test-id={subCollections.name}
+ >
+ {subCollections.name}
+
+ );
+ })}
+
+
+
+
+ {loading ? (
+
+ ) : (
+
+ {items.length === 0 &&
No more stories to load.
}
+ {items.map((story, index) => (
+
+
+
+
+ ))}
+
+ )}
+
+ {isAdWidgetEnabled &&
{adWidgetSlot}
}
+
+
+ {items.length >= 12 && (
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ )}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color("Collection Name Border Color", collectionNameDefaultValue),
+ theme: color("color", defaultvalue),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ showRowTitle: boolean("Row title", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showButton: boolean("Show button", true),
+ slotConfig: [
+ {
+ type: "ad",
+ component: () =>
+
+```
+
+```jsx
+const contextConfig = {
+ theme: #333333;
+ enableBio: false;
+ enableSocialLinks: true;
+};
+
+
+```
+
+```jsx
+const contextConfig = {
+ theme: #333333;
+ enableBio: false;
+ enableSocialLinks: true;
+};
+
+
+```
diff --git a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css
new file mode 100644
index 000000000..d42a96e5b
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css
@@ -0,0 +1,279 @@
+/* eslint-disable scss/at-rule-no-unknown */
+@value mobile: 768px;
+@value tablet: 992px;
+@value desktop: 1025px;
+
+.connect {
+ font-size: var(--arrow-spacing-m);
+ line-height: var(--arrow-lh-5);
+ color: var(--arrow-c-mono4);
+ align-self: center;
+ margin-bottom: var(--arrow-spacing-xxs);
+}
+
+.social-share {
+ flex: 1;
+ padding: var(--arrow-spacing-xs);
+}
+
+.share-icon {
+ display: flex;
+ align-items: flex-end;
+ margin-right: var(--arrow-spacing-l);
+}
+
+.default .author-image {
+ align-self: center;
+ @media (min-width: mobile) {
+ grid-column: 8/12;
+ }
+}
+
+.default .author-name {
+ color: var(--arrow-c-mono2);
+ font-weight: var(--arrow-fw-bold);
+ line-height: var(--arrow-lh-5);
+ align-self: center;
+ margin: var(--arrow-spacing-xs) 0 var(--arrow-spacing-xxs);
+ @media (min-width: mobile) {
+ line-height: var(--arrow-lh-2);
+ align-self: flex-start;
+ }
+}
+
+.default .author-description {
+ margin: var(--arrow-spacing-s) 0;
+ color: var(--arrow-c-mono4);
+ font-size: var(--arrow-spacing-m);
+ line-height: var(--arrow-lh-5);
+ white-space: pre-line;
+}
+
+.default .wrapper {
+ display: flex;
+ flex-direction: column-reverse;
+ padding: 0 var(--arrow-spacing-s) var(--arrow-spacing-m) var(--arrow-spacing-s);
+ @media (min-width: mobile) {
+ display: grid;
+ grid-gap: var(--arrow-fs-l);
+ grid-template-columns: repeat(12, 1fr);
+ padding: 0 0 var(--arrow-fs-xxl) 0;
+ }
+}
+
+.default .introduction-card {
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ flex-direction: column;
+ @media (min-width: mobile) {
+ grid-column: 2/8;
+ }
+ @media (min-width: tablet) {
+ grid-column: 2/7;
+ }
+}
+
+.default .social-wrapper {
+ margin-top: var(--arrow-spacing-xs);
+ display: flex;
+ justify-content: space-between;
+ @media (min-width: mobile) {
+ align-items: center;
+ }
+ @media (min-width: tablet) {
+ margin-top: unset;
+ position: relative;
+ align-items: unset;
+ }
+}
+
+.default .connect {
+ @media (min-width: tablet) {
+ margin-bottom: var(--arrow-spacing-xs);
+ }
+}
+
+.default .linkWrapper {
+ display: flex;
+}
+
+.default .social-connect-wrapper {
+ @media (min-width: mobile) {
+ display: flex;
+ }
+ @media (min-width: tablet) {
+ margin-top: var(--arrow-spacing-xs);
+ display: block;
+ }
+}
+
+.default :global(.desktop-share-wrapper) {
+ @media (min-width: tablet) {
+ position: absolute;
+ right: 0;
+ max-width: 42px;
+ }
+}
+
+.default .social-wrapper > :nth-child(2) {
+ margin-top: var(--arrow-spacing-xxs);
+ @media (min-width: mobile) {
+ margin-top: unset;
+ }
+}
+
+.default .social-connect-wrapper > :nth-child(2) {
+ margin-left: unset;
+ @media (min-width: mobile) {
+ margin-left: var(--arrow-spacing-xs);
+ }
+ @media (min-width: tablet) {
+ margin-left: unset;
+ }
+}
+
+.default .wrapper.dark {
+ border-bottom: 1px solid var(--dark-border);
+}
+
+.default .wrapper.light {
+ border-bottom: 1px solid var(--light-border);
+}
+
+.small-circle {
+ @media (min-width: mobile) {
+ padding: var(--arrow-spacing-l) var(--arrow-spacing-s);
+ height: 100%;
+ @media (min-width: tablet) {
+ padding: var(--arrow-spacing-xl);
+ }
+ }
+}
+
+.small-circle.border {
+ border-radius: 3px;
+ padding: var(--arrow-spacing-m);
+ @media (min-width: mobile) {
+ padding: var(--arrow-spacing-l) var(--arrow-spacing-s);
+ }
+ @media (min-width: tablet) {
+ padding: var(--arrow-spacing-xl);
+ }
+}
+
+.small-circle.border.dark {
+ border: solid 1px var(--dark-border);
+}
+
+.small-circle.border.light {
+ border: solid 1px var(--light-border);
+}
+
+.small-circle .wrapper {
+ display: flex;
+ flex-direction: column-reverse;
+}
+
+.small-circle .introduction-card {
+ @media (min-width: mobile) {
+ text-align: center;
+ }
+}
+
+.small-circle .author-image {
+ display: flex;
+ align-items: center;
+ @media (min-width: mobile) {
+ justify-content: center;
+ align-items: unset;
+ }
+}
+
+.small-circle .social-wrapper {
+ @media (min-width: mobile) {
+ justify-content: center;
+ }
+}
+
+.small-circle .author-name {
+ color: var(--arrow-c-mono2);
+ font-size: var(--arrow-fs-s);
+ line-height: var(--arrow-lh-3);
+ font-weight: var(--arrow-fw-bold);
+ @media (min-width: mobile) {
+ font-size: var(--arrow-fs-m);
+ margin-top: var(--arrow-spacing-m);
+ }
+}
+
+.small-circle .author-image > div {
+ margin-right: var(--arrow-spacing-m);
+ @media (min-width: mobile) {
+ margin-right: unset;
+ }
+}
+
+.small-circle .author-description,
+.small-circle .connect {
+ font-size: var(--arrow-fs-tiny);
+ line-height: var(--arrow-lh-5);
+ color: var(--arrow-c-mono4);
+ @media (min-width: mobile) {
+ font-size: var(--arrow-fs-tiny);
+ }
+}
+
+.small-circle .author-description {
+ position: relative;
+ max-height: 63px;
+ overflow: hidden;
+ margin-top: var(--arrow-spacing-xs);
+}
+
+.small-circle .fade-out {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 90%;
+ height: 21px;
+ background-image: inherit;
+}
+
+.small-circle .social-connect-wrapper {
+ margin-top: var(--arrow-spacing-xxs);
+ @media (min-width: mobile) {
+ margin-top: var(--arrow-spacing-xs);
+ }
+}
+
+.small-circle.border .social-connect-wrapper {
+ margin-top: var(--arrow-spacing-xs);
+}
+
+.default .dark,
+.small-circle .dark {
+ color: var(--arrow-c-mono2);
+}
+
+.default .light,
+.small-circle .light {
+ color: var(--arrow-c-invert-mono2);
+}
+
+.default .social-connect-wrapper > :nth-child(2),
+.small-circle .social-connect-wrapper > :nth-child(1) {
+ padding-left: unset;
+}
+
+.small-circle .social-share {
+ padding: var(--arrow-spacing-m) var(--arrow-spacing-xs) var(--arrow-spacing-xs);
+}
+
+html[dir="rtl"] {
+ .default :global(.desktop-share-wrapper) {
+ @media (min-width: tablet) {
+ position: static;
+ }
+ }
+}
diff --git a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.test.js b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.test.js
new file mode 100644
index 000000000..aeb35ea00
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.test.js
@@ -0,0 +1,106 @@
+import React from "react";
+import { mount } from "enzyme";
+import AuthorIntroductionCard from ".";
+import { generateStore, authorData } from "../../Fixture";
+import { Provider } from "react-redux";
+
+describe("Author Intro component", () => {
+ it("Should render default template with border, author bio and social-links enabled", () => {
+ const contextConfig = {
+ theme: "#ffffff",
+ enableBio: true,
+ enableSocialLinks: true,
+ };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/default/);
+ expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(7);
+ expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(1);
+ });
+
+ it("Should render default template with border, author bio and social-links disabled", () => {
+ const contextConfig = {
+ theme: "#ffffff",
+ enableBio: false,
+ enableSocialLinks: false,
+ };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/default/);
+ expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(0);
+ expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(0);
+ });
+
+ it("Should render square template with border, author bio and social-links enabled", () => {
+ const contextConfig = {
+ theme: "#ffffff",
+ enableBio: true,
+ enableSocialLinks: true,
+ };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/default/);
+ expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(7);
+ expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(1);
+ });
+
+ it("Should render square template with border, author bio and social-links disabled", () => {
+ const contextConfig = {
+ theme: "#ffffff",
+ enableBio: false,
+ enableSocialLinks: false,
+ };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/default/);
+ expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(0);
+ expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(0);
+ });
+
+ it("Should render small cirlce template with border, author bio and social-links enabled", () => {
+ const contextConfig = {
+ theme: "#ffffff",
+ enableBio: true,
+ enableSocialLinks: true,
+ borderSupport: true,
+ };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/small-circle/);
+ expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/border/);
+ expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(7);
+ expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(1);
+ });
+
+ it("Should render small cirlce template with border, author bio and social-links disabled", () => {
+ const contextConfig = {
+ theme: "#ffffff",
+ enableBio: false,
+ enableSocialLinks: false,
+ borderSupport: false,
+ };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/small-circle/);
+ expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(0);
+ expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(0);
+ });
+});
diff --git a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
new file mode 100644
index 000000000..4bc4a9c44
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
@@ -0,0 +1,123 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { getTextColor, sharePageUrl, clientWidth } from "../../../utils/utils";
+import AuthorImage from "../../Atoms/AuthorImage";
+import { SocialShareTemplate } from "../../Molecules/SocialShareTemplate/index";
+import { SocialShare } from "@quintype/components";
+import "./author-intro.m.css";
+import { Facebook } from "../../Svgs/SocialIcons/facebook";
+import { Youtube } from "../../Svgs/SocialIcons/youtube";
+import { Twitter } from "../../Svgs/SocialIcons/twitter";
+import { LinkedIn } from "../../Svgs/SocialIcons/linkedin";
+import { Instagram } from "../../Svgs/SocialIcons/instagram";
+import { WhatsApp } from "../../Svgs/SocialIcons/whatsapp";
+import { Pinterest } from "../../Svgs/SocialIcons/pinterest";
+
+const AuthorIntroductionCard = ({ data = {}, config = {}, template = "" }) => {
+ const { theme = "", enableBio = true, enableSocialLinks = true, borderSupport = true } = config;
+ const textColor = getTextColor(theme);
+ const { name, bio, social } = data;
+ const isSmallCircle = template === "smallCircle";
+ const authorCardStyle = isSmallCircle ? "small-circle" : "default";
+ const isMobile = clientWidth("mobile");
+ const isFullWidth = !isSmallCircle ? "full-width-with-padding" : "";
+ const supportBorder = isSmallCircle && borderSupport ? "border" : "";
+
+ const getIcon = (item) => {
+ switch (item) {
+ case "twitter":
+ return
+
+
+ {isSmallCircle && isMobile ? null :
{name} }
+ {enableBio && bio && (
+
+ {bio}
+ {isSmallCircle && (
+
+ )}
+
+ )}
+
+
+ {enableSocialLinks && social && (
+ <>
+ {template !== "smallCircle" &&
Connect :
}
+ {Object.entries(social).map((item, index) =>
+ item.length > 0 && item[1] ? (
+ // can add Social Networks without the url so adding an additional check below
+ item[1].url ? (
+
+ {getIcon(item[0])}
+
+ ) : null
+ ) : null
+ )}
+
+ )}
+
+ {!isSmallCircle && (
+
+ )}
+
+
+
+
+ {isSmallCircle && isMobile &&
{name} }
+
+
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "authors-list" }).prop("className")).toMatch(/arr--authors-list/);
+ });
+
+ it("Should not render authors list component if data is absent", () => {
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "authors-list" }).length).toBe(0);
+ });
+
+ it("Should render Authors List component with Load More disabled", () => {
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find(LoadmoreButton).length).toEqual(0);
+ });
+
+ it("Should render Authors List component with Load More enabled", () => {
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find(LoadmoreButton).length).toEqual(1);
+ });
+});
diff --git a/app/isomorphic/arrow/components/Rows/AuthorsList/authors-list.m.css b/app/isomorphic/arrow/components/Rows/AuthorsList/authors-list.m.css
new file mode 100644
index 000000000..7f84de8c1
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/AuthorsList/authors-list.m.css
@@ -0,0 +1,23 @@
+/* eslint-disable scss/at-rule-no-unknown */
+@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.wrapper {
+ margin: 0 var(--arrow-spacing-s);
+ @media (min-width: mobile) {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-gap: var(--arrow-spacing-l);
+ margin: 0 var(--arrow-spacing-l);
+ }
+ @media (min-width: tablet) {
+ margin: 0;
+ }
+}
+
+.linkWrapper :global(.arr--author-intro-card) {
+ margin-bottom: var(--arrow-spacing-m);
+ @media (min-width: mobile) {
+ margin-bottom: unset;
+ }
+}
diff --git a/app/isomorphic/arrow/components/Rows/AuthorsList/index.js b/app/isomorphic/arrow/components/Rows/AuthorsList/index.js
new file mode 100644
index 000000000..0d9049906
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/AuthorsList/index.js
@@ -0,0 +1,52 @@
+import React from "react";
+import { Link } from "@quintype/components";
+import PropTypes from "prop-types";
+import { getTextColor } from "../../../utils/utils";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import AuthorIntroductionCard from "../AuthorIntroductionCard";
+import { StateProvider } from "../../SharedContext";
+import "./authors-list.m.css";
+import { useSelector } from "react-redux";
+import get from "lodash/get";
+
+const AuthorsList = ({ data = [], config = {}, getMoreData, hideLoadmore = false, limit }) => {
+ if (data.length < 1) return null;
+ const { theme } = config;
+ const textColor = getTextColor(theme);
+ const mountAt = config.mountAt || "";
+ const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+
+ return (
+
+
+ {data.slice(0, limit).map((author, index) => (
+
+
+
+ ))}
+
+ {!hideLoadmore && (
+
+ )}
+
+
+
+
+ );
+
+ const getHorizontalCard = (story, index) => (
+
+
+
+
+ );
+
+ const storySlot = (items) => {
+ return (
+
+ {items.slice(6, 9).map((story, index) => {
+ return (
+
+
+
+
+ );
+ })}
+
+
+
+
+
+ {getFilteredCollection.map((subCollections, index) => {
+ return (
+
+
openChildCollectionItems(event, index, subCollections.id)}
+ >
+ {subCollections.name}
+
+
+
+ );
+ })}
+
+
+
+ {loading ? (
+
+ ) : (
+
+
+ {items.slice(0, 1).map((story, index) => {
+ return (
+
+
+
+
+ );
+ })}
+ {items.slice(1, 4).map((story, index) => {
+ return
{getVerticalCard(story, index)} ;
+ })}
+
+
+
+ {items.slice(4, 6).map((story, index) => {
+ return {getHorizontalCard(story, index)} ;
+ })}
+ {getSlot(type, component, () => storySlot(items))}
+
+
+ )}
+
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color("Collection Name Border Color", collectionNameDefaultValue),
+ borderColor: color("Section Tag Border Color", sectionTagDefaultvalue),
+ theme: color("color", defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ slotConfig: [{ type: "story", component: configurableSlot }],
+ showRowTitle: boolean("Row title", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ mock.onGet(API_REQUEST).reply(200, nestedCollection);
+
+ return
+
+ {storyItems.slice(0, 1).map((story, index) => {
+ return (
+
+ );
+ })}
+ {storyItems.slice(1, 4).map((story, index) => {
+ return (
+
+ );
+ })}
+ {storyItems.slice(4, 5).map((story, index) => {
+ return (
+
+ );
+ })}
+
+ {storyItems.slice(6, 7).map((story, index) => {
+ return (
+
+ );
+ })}
+ {storyItems.slice(7, 10).map((story, index) => {
+ return (
+
+ );
+ })}
+ {storyItems.slice(10, 11).map((story, index) => {
+ return (
+
+ );
+ })}
+
+
+ {storyItems.slice(2, 3).map((story, index) => {
+ return (
+
+
+ );
+ })}
+ {storyItems.slice(3, 5).map((story, index) => {
+ return (
+
+
+
+ );
+ })}
+ {storyItems.slice(5, 6).map((story, index) => {
+ return (
+
+
+
+ );
+ })}
+
+
+
+ {storyItems.slice(0, 1).map((story, index) => {
+ return (
+
+
+ );
+ })}
+ {storyItems.slice(1, 2).map((story, index) => {
+ return (
+
+
+ );
+ })}
+
+
+ {slot}
+
+
+ {storyItems.slice(2, 3).map((story, index) => {
+ return (
+
+
+ );
+ })}
+ {storyItems.slice(3, 6).map((story, index) => {
+ return (
+
+
+
+ );
+ })}
+
+
+ {storyItems.slice(0, 1).map((story, index) => {
+ return (
+
+
+ );
+ })}
+ {storyItems.slice(1, 2).map((story, index) => {
+ return (
+
+
+ );
+ })}
+
+ {slot}
+
+
+ navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showRowTitle: boolean("Row Title disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ showSubheadline: boolean("Subheadline disable", true),
+ withseparator: boolean("separator", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ slotConfig: optionalSelect("Slot Config", slotConfigOptions, [{ type: "story" }]),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+ return
+ {storyCard(story)}
+
+ );
+
+ const getLoadMore = (opts) => {
+ if (!isLoadMoreVisible) return null;
+
+ if (isolatedLoadMore) {
+ return (
+
+ loadMore(opts)}
+ navigate={() => navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+ );
+ };
+
+ const renderStories = hideFirstCard ? stories : otherStories;
+
+ return (
+
+
+
+
+ {!hideFirstCard && (
+
+ {storyCard(firstStory)}
+
+ )}
+
+ {renderStories.slice(0, 3).map((story, index) => otherCards(story, index))}
+ {adWidgetSlot}
+ {renderStories.slice(3).map((story, index) => otherCards(story, index))}
+
+
+ {getLoadMore({ isLoading, renderStories, getMoreStories, subsequentLoadCount })}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ slotConfig: [{ type: "story", component: configurableSlot }],
+ showSection: boolean("Section tag", true),
+ showAuthor: boolean("Author", true),
+ showTime: boolean("Timestamp", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ showButton: boolean("Show button", true),
+ buttonText: text("Button text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ showReadTime: boolean("Read time", true),
+ border: optionalSelect("Border settings", border),
+ };
+ return
+ loadMore(opts)}
+ navigate={() => navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+ );
+ };
+
+ return (
+
+
+
+
+ {storyItems.map((story, index) => {
+ return (
+
+
+
+
+
+
+ );
+ })}
+
+ {getLoadMore({ isLoading, storyItems, getMoreStories, subsequentLoadCount })}
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ showRowTitle: boolean("Row title", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ subsequentLoadCount: text("Subsequent Load", 8),
+ };
+
+ return
+ loadMore(opts)}
+ navigate={() => navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+ );
+ };
+
+ return (
+
+
+
+
+ {storyItems.map((story, index) => {
+ return (
+
+ );
+ })}
+
+ {getLoadMore({ isLoading, storyItems, getMoreStories, subsequentLoadCount })}
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", false),
+ showAuthor: boolean("Author disable", false),
+ showTime: boolean("Timestamp disable", true),
+ showRowTitle: boolean("Row title", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", false),
+ subsequentLoadCount: text("Subsequent Load", 8),
+ };
+
+ return
+
+
+
+
+
+ {otherStories.slice(0, showNumberOfStoriesInEachColumn).map((story, index) => {
+ return (
+
+
+ );
+ })}
+
+
+
navigateTo(dispatch, generateNavigateSlug(collection, qtConfig))}
+ qtConfig={qtConfig}
+ />
+
+ {childCollections.slice(0, 4).map((collection, index) => getChildCollectionData(collection, config, index))}
+
+ );
+};
+
+FourColSixteenStories.propTypes = {
+ collection: PropTypes.object.isRequired,
+ config: PropTypes.shape({
+ theme: PropTypes.string,
+ }),
+};
+
+export default StateProvider(FourColSixteenStories);
diff --git a/app/isomorphic/arrow/components/Rows/FourColSixteenStories/stories.js b/app/isomorphic/arrow/components/Rows/FourColSixteenStories/stories.js
new file mode 100644
index 000000000..872c3a843
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/FourColSixteenStories/stories.js
@@ -0,0 +1,47 @@
+import React from "react";
+import FourColSixteenStories from ".";
+import { generateCollections } from "../../Fixture";
+import { color, boolean, text, number } from "@storybook/addon-knobs";
+import Readme from "./README.md";
+import {
+ withStore,
+ optionalSelect,
+ sectionTagTemplates,
+ collectionNameTemplates,
+ footerButton,
+} from "../../../../storybook";
+
+const collection = generateCollections(4);
+
+withStore(
+ "Rows/Four Col Sixteen Stories",
+ {
+ qt: {
+ config: {
+ "cdn-image": "thumbor-stg.assettype.com",
+ },
+ },
+ },
+ Readme
+)
+ .addDecorator((story) => {story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color("Collection Name Border Color", "#3a9fdd"),
+ borderColor: color("Section Tag Border Color", "#3a9fdd"),
+ theme: color("BG Color", "#ffffff"),
+ withSeparator: boolean("Separator", true),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ showRowTitle: boolean("Row title", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ numberOfStoriesToShowInEachColumn: number("Number of stories to show in each column", 4),
+ };
+ return
+
+
+ {contentPosition === "top" && text && Icon && (
+
+
+ )}
+
+
+
+
+ {rest.slice(0, 2).map((story, index) => {
+ return (
+
+
+ );
+ })}
+
+ {contentPosition === "bottom" && text && Icon && (
+
+
+ )}
+
+
+ {getFilteredCollection.slice(0, 4).map((collection, index) => {
+ const slugName = getSlug(collection, publisherConfig);
+ return (
+
+ {footerSlotComp}
+
{story()}
)
+ .add("Default", () => {
+ const otherTextData = {
+ text: "hello",
+ textColor: color(" text color", "#345678"),
+ contentPosition: optionalSelect("Other text Position", otherTextPositionOptions),
+ Icon: IconComp,
+ };
+
+ const publisherConfig = {
+ sections: [
+ {
+ "domain-slug": null,
+ slug: "collection-slug",
+ name: "Health",
+ "section-url": "https://ace-web.qtstage.io/collection-slug",
+ id: 11181,
+ "parent-id": null,
+ "display-name": "Health",
+ collection: {
+ slug: "health",
+ name: "Health",
+ id: 15603,
+ },
+ data: null,
+ },
+ ],
+ };
+
+ const contextConfig = {
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border Level", borderOptions),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showSection: boolean("Section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ showRowTitle: boolean("Row title", true),
+ collectionNameTemplate: optionalSelect("Collection row Templates", collectionNameTemplates),
+ showSubheadline: boolean("Subheadline", true),
+ showReadTime: boolean("Read time", true),
+ };
+ return (
+
+
+ );
+ });
+ };
+
+ return (
+
+
+
+ {items.length > 4 ? (
+
+ {getItems()}
+
+ ) : (
+
{getItems()}
+ )}
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showRowTitle: boolean("Row Title disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ numberOfStoriesToShow: number("Number of slide to show", 10),
+ navigationArrows: boolean("Arrows enable", true),
+ isInfinite: boolean("Autoplay", false),
+ slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return {story()}
)
+ .add("Support Rtl ", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showRowTitle: boolean("Row Title disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ numberOfStoriesToShow: number("Number of slide to show", 10),
+ navigationArrows: boolean("Arrows enable", true),
+ isInfinite: boolean("Autoplay", false),
+ slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return
+
+ );
+ });
+ };
+
+ return (
+
+
+
+ {showNumberOfStoriesToShow > 4 ? (
+
+ {getItems()}
+
+ ) : (
+
+ {getItems()}
+
+ )}
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showRowTitle: boolean("Row Title disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ numberOfStoriesToShow: number("Number of slide to show", 10),
+ navigationArrows: boolean("Arrows enable", true),
+ isInfinite: boolean("Autoplay", false),
+ slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return {story()}
)
+ .add("Support Rtl ", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showRowTitle: boolean("Row Title disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ numberOfStoriesToShow: number("Number of slide to show", 10),
+ navigationArrows: boolean("Arrows enable", true),
+ isInfinite: boolean("Autoplay", false),
+ slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return
+
+
+
+
+
+
+
+
+
+ {items.map((story, index) => (
+
updateActiveTab(story, index)}
+ key={story.id}
+ className={`story-headline-container ${getActiveIndexStylename(index === active)}`}
+ >
+
+ ))}
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ {footerSlotComp}
+
+
+
+
+
+ {showSubheadline && (
+
+
+
+ )}
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ theme: color(label, defaultvalue),
+ showRowTitle: boolean("Row title", true),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ showSubheadline: boolean("Show subheadline", true),
+ };
+
+ return
+
+
+
+
+
+ {items.slice(0, showNumberOfStoriesToShow).map((story, index) => {
+ return (
+
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Support Rtl ", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ collectionNameTemplate: optionalSelect("Collection Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showRowTitle: boolean("Row Title disable", true),
+ showTime: boolean("Timestamp disable", true),
+ showSubheadline: boolean("subheadline enable ", false),
+ isFullWidth: boolean("isFullWidth", false),
+ numberOfStoriesToShow: number("Number of slide to show", 8),
+ isInfinite: boolean("Autoplay", false),
+ slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
+ navigationArrows: boolean("Arrows enable", true),
+ contentAlignment: optionalSelect("content alignment", contentAlignment),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+ return
+
+
+
+
+ {items.slice(0, showNumberOfStoriesToShow).map((story, index) => {
+ return (
+
+
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ {footerSlotComp}
+ {story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ showRowTitle: boolean("Row title", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ collectionNameTemplate: optionalSelect("Collection row Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ buttonText: text("Footer text"),
+ slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
+ navigationArrows: boolean("Arrows enable", true),
+ isInfinite: boolean("Autoplay", false),
+ numberOfStoriesToShow: number("Number of slide to show", 3),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+ return {story()}
)
+ .add("Support Rtl ", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ showRowTitle: boolean("Row title", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ collectionNameTemplate: optionalSelect("Collection row Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ buttonText: text("Footer text"),
+ slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
+ navigationArrows: boolean("Arrows enable", true),
+ isInfinite: boolean("Autoplay", false),
+ numberOfStoriesToShow: number("Number of slide to show", 3),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+ return
+```
diff --git a/app/isomorphic/arrow/components/Rows/ListComponent/index.js b/app/isomorphic/arrow/components/Rows/ListComponent/index.js
new file mode 100644
index 000000000..aaf4cae71
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/ListComponent/index.js
@@ -0,0 +1,152 @@
+import React from "react";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { generateNavigateSlug, getTextColor, navigateTo } from "../../../utils/utils";
+import { collectionToStories } from "@quintype/components";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { Headline } from "../../Atoms/Headline";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { SectionTag } from "../../Atoms/SectionTag";
+import PropTypes from "prop-types";
+import { StateProvider } from "../../SharedContext";
+import "./list-component.m.css";
+import { Subheadline } from "../../Atoms/Subheadline";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { useDispatch, useSelector } from "react-redux";
+import get from "lodash/get";
+
+const ListComponent = ({ collection, config = {}, getMoreStories, limit, hideButton, authorPrefix = "By" }) => {
+ const storyItems = collectionToStories(collection);
+ if (storyItems.length < 1) {
+ return null;
+ }
+ const {
+ collectionNameBorderColor = "",
+ borderColor = "",
+ theme = "",
+ border = "",
+ collectionNameTemplate = "",
+ footerButton = "",
+ localizationConfig = {},
+ } = config;
+
+ const dispatch = useDispatch();
+ const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+ const url = generateNavigateSlug(collection, qtConfig);
+
+ const borderHandler = (story) => {
+ switch (border) {
+ case "bottom":
+ return (
+
+
+ );
+ case "full":
+ return (
+
+ );
+ default:
+ return (
+
+
+ );
+ }
+ };
+
+ const textColor = getTextColor(theme);
+
+ return (
+
+
+
+
+
+ {storyItems.slice(0, limit).map((story, index) => {
+ return
{borderHandler(story)}
;
+ })}
+
+
+ {!hideButton && (
+
+ {getMoreStories ? (
+ navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ ) : null}
+
+ )}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ border: optionalSelect("Border Level", borderOptions),
+ showSection: boolean("Section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ initialLoadCount: text("Initial Load Count", 6),
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+ return
+ {getOpinions(6)}
+
{slotConfig()}
+
+ {items.slice(0, numberOfStories).map((story, index) => (
+
+ {localizedNumbers && localizedNumbers.length > 0 ? (
+
{localizedNumbers[index]}
+ ) : (
+
{index + 1}
+ )}
+
+
+ ))}
+
+
+
+
+ {getFilteredCollection.map((subCollections, index) => {
+ return (
+
+
openChildCollectionItems(event, index, subCollections.id)}
+ >
+ {subCollections.name}
+
+
+ );
+ })}
+
+
+
{loading ?
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color("Collection Name Border Color", collectionNameDefaultValue),
+ theme: color("color", defaultvalue),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ slotConfig: configurableSlot,
+ showRowTitle: boolean("Row title", true),
+ };
+
+ mock.onGet(API_REQUEST).reply(200, nestedCollection);
+
+ return
+
+```
diff --git a/app/isomorphic/arrow/components/Rows/MagazineEditions/index.js b/app/isomorphic/arrow/components/Rows/MagazineEditions/index.js
new file mode 100644
index 000000000..7c3a0d647
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/MagazineEditions/index.js
@@ -0,0 +1,92 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useDispatch, useSelector } from "react-redux";
+import { MagazineCoverImageCard } from "../../Atoms/MagazineCoverImage";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { generateNavigateSlug, getTextColor, getTimeStamp, navigateTo, timestampToFormat } from "../../../utils/utils";
+import "./magazine-editions.m.css";
+import { StateProvider } from "../../SharedContext";
+import get from "lodash/get";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+
+const MagazineEditions = ({ collection = [], config = {}, onClick, limit, showLoadmore = false }) => {
+ if (!collection.length) return null;
+ const {
+ theme = "",
+ collectionNameTemplate = "",
+ showRowTitle = true,
+ rowTitle = "Other Issues",
+ editionNameFormat = "magazineDate",
+ template = "NavigateToPage",
+ } = config;
+ const textColor = getTextColor(theme);
+ const issues = collection.map((issue) => issue.collection) || [];
+ const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+ const dispatch = useDispatch();
+ const url = generateNavigateSlug(collection, { ...qtConfig, ...config });
+
+ return (
+
+
+ {showRowTitle && (
+
+ )}
+
+ {issues.slice(0, limit).map((issue, index) => {
+ const { name, "created-at": createdAt, "collection-date": issueDate } = issue;
+ const date = issueDate || createdAt;
+ const timeStampConfig = {
+ isUpperCase: true,
+ disableMeridiem: true,
+ };
+ return (
+
+
+
+ {editionNameFormat === "magazineTitle"
+ ? name
+ : getTimeStamp(date, timestampToFormat, timeStampConfig)}
+
+
+ );
+ })}
+
+ {showLoadmore && (
+
navigateTo(dispatch, url)}
+ />
+ )}
+
+
+
+ );
+ expect(wrapper.find(MagazineEditions)).toHaveLength(1);
+ });
+
+ it("Should render `no editions message` if there are no editions", () => {
+ const wrapper = shallow(
+
+```
diff --git a/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/index.js b/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/index.js
new file mode 100644
index 000000000..cc6fd7dba
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/index.js
@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { generateNavigateSlug, getTextColor, getTimeStamp, navigateTo, timestampToFormat } from "../../../utils/utils";
+import "./magazine-cards.m.css";
+import { StateProvider } from "../../SharedContext";
+import { MagazineCoverImageCard } from "../../Atoms/MagazineCoverImage";
+import { useDispatch, useSelector } from "react-redux";
+import get from "lodash/get";
+import upperCase from "lodash/upperCase";
+
+const MagazineHeaderCard = ({ collection = {}, config = {} }) => {
+ const { "created-at": createdAt, "collection-date": issueDate, summary } = collection;
+ const { theme = "", customUrlPath = "", magazineTitle = "", magazinePageUrl = "", magazineSlug = "" } = config;
+ const textColor = getTextColor(theme);
+ const dispatch = useDispatch();
+ const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+ const url = generateNavigateSlug(collection, qtConfig, customUrlPath);
+ const date = issueDate || createdAt;
+ const timeStampConfig = {
+ isUpperCase: true,
+ disableMeridiem: true,
+ };
+ return (
+
+
+
+
+
+
+
+ {summary}
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+
+
+
+```
diff --git a/app/isomorphic/arrow/components/Rows/MagazineWidget/index.js b/app/isomorphic/arrow/components/Rows/MagazineWidget/index.js
new file mode 100644
index 000000000..ff56ae12e
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/MagazineWidget/index.js
@@ -0,0 +1,128 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import {
+ getTextColor,
+ getTimeStamp,
+ clientWidth,
+ generateNavigateSlug,
+ navigateTo,
+ timestampToFormat,
+} from "../../../utils/utils";
+import "../MagazineHeaderCard/magazine-cards.m.css";
+import { StateProvider } from "../../SharedContext";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { Headline } from "../../Atoms/Headline";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { MagazineCoverImageCard } from "../../Atoms/MagazineCoverImage";
+import { useDispatch, useSelector } from "react-redux";
+import get from "lodash/get";
+
+const MagazineWidget = ({ collection = {}, config = {} }) => {
+ const { "created-at": createdAt, "collection-date": issueDate, summary, items, metadata = {} } = collection;
+ const { theme = "", footerButton = "", border, localizationConfig = {}, navigate = true, magazineSlug = "" } = config;
+ const textColor = getTextColor(theme);
+ const dispatch = useDispatch();
+ const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+
+ const updatedMagazineSlug =
+ magazineSlug || get(metadata, ["entities", "collectionEntities", "magazine", 0, "slug"], "");
+ const updatedConfig = { ...config, magazineSlug: updatedMagazineSlug };
+
+ const url = generateNavigateSlug(collection, {
+ ...qtConfig,
+ ...updatedConfig,
+ });
+ const sliceValue = 4;
+ const isTablet = clientWidth("tablet");
+ const timeStampConfig = {
+ isUpperCase: true,
+ disableMeridiem: true,
+ };
+ const date = issueDate || createdAt;
+
+ const storyCards = (items) => {
+ return (
+
+ {items.slice(0, sliceValue).map((storyItems, index) => {
+ const story = storyItems.story;
+ const isMobile = clientWidth("mobile");
+ const borderBottom = () => {
+ const lastStoryIndex = 3;
+ const lastTwoStoriesIndex = [2, 3];
+ if (isMobile && !lastStoryIndex === index) {
+ return "bottom";
+ }
+ if (!lastTwoStoriesIndex.includes(index)) {
+ return "bottom";
+ }
+ };
+
+ const borderSettings = border === "borderBottom" ? borderBottom() : "";
+ return (
+ <>
+
+
+
+
+
+ );
+ })}
+
+ {storyCards(items)}
+ navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+ );
+ };
+ return (
+
+
+
+
+
+ {getTimeStamp(date, timestampToFormat, timeStampConfig)}
+
+
+
+ {summary}
+
+ {!isTablet && bottomCard()}
+
+ {isTablet && bottomCard()}
+
+
+```
diff --git a/app/isomorphic/arrow/components/Rows/OneColStoryList/index.js b/app/isomorphic/arrow/components/Rows/OneColStoryList/index.js
new file mode 100644
index 000000000..3edea9541
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/OneColStoryList/index.js
@@ -0,0 +1,219 @@
+import { collectionToStories } from "@quintype/components";
+import get from "lodash/get";
+import PropTypes from "prop-types";
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { ProgressiveHydration } from "../../../hydration-component";
+import { generateNavigateSlug, getSlot, getTextColor, navigateTo } from "../../../utils/utils";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { Headline } from "../../Atoms/Headline";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { SectionTag } from "../../Atoms/SectionTag";
+import { Subheadline } from "../../Atoms/Subheadline";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { StateProvider } from "../../SharedContext";
+import "./one-col-story-list.m.css";
+import { LoadMoreTarget } from "../../Atoms/LoadMoreTarget";
+
+const loadMore = ({ isLoading, storyItems, getMoreStories, subsequentLoadCount = 8 }) => {
+ if (isLoading) return;
+ const limit = subsequentLoadCount;
+ const offset = storyItems.length;
+ getMoreStories(offset, limit);
+};
+
+const OneColStoryList = ({
+ collection,
+ config = {},
+ getMoreStories,
+ isLoadMoreVisible,
+ isLoading,
+ isolatedLoadMore,
+}) => {
+ const storyItems = collectionToStories(collection);
+ if (!storyItems.length) return null;
+ const {
+ collectionNameBorderColor = "",
+ borderColor = "",
+ theme = "",
+ border = "",
+ slotConfig = [],
+ collectionNameTemplate = "",
+ footerSlotConfig = {},
+ footerButton = "",
+ localizationConfig = {},
+ subsequentLoadCount = 8,
+ } = config;
+
+ const { footerSlot } = footerSlotConfig;
+ const { type, component } = get(slotConfig, [0], {});
+
+ const dispatch = useDispatch();
+ const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+
+ const getLoadMore = (opts) => {
+ if (!isLoadMoreVisible) return null;
+ if (isolatedLoadMore) {
+ return (
+
+ loadMore(opts)}
+ navigate={() => navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+ );
+ };
+
+ const footerSlotComp = footerSlot ? footerSlot() : null;
+ const borderHandler = (story) => {
+ switch (border) {
+ case "bottom":
+ return (
+
+
+ );
+ case "full":
+ return (
+
+ );
+ default:
+ return (
+
+
+ );
+ }
+ };
+
+ const textColor = getTextColor(theme);
+ return (
+
+
+
+
+
+ {storyItems.slice(0, 1).map((story, index) => {
+ return
{borderHandler(story)}
;
+ })}
+
+
+ {storyItems.slice(1).map((story, index) => {
+ return
{borderHandler(story)}
;
+ })}
+
+
+ {getSlot(
+ type,
+ component,
+ () => null,
+ () => null
+ )}
+
+
+
+ {getLoadMore({ isLoading, storyItems, getMoreStories, subsequentLoadCount })}
+
{footerSlotComp}
+
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ border: optionalSelect("Border Level", borderOptions),
+ showSection: boolean("Section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ slotConfig: [{ type: "ad", component: configurableSlot }],
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+ return
+ loadMore(opts)}
+ navigate={() => navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+ );
+ };
+
+ const getAuthorCard = (story) => {
+ const authorData = get(story, ["authors", "0"]);
+ return (
+
+ );
+ };
+
+ const countStyleName = stories.length === 2 || stories.length === 3 ? `count-${stories.length}` : "";
+
+ return (
+
+
+
+
+ {slot ? (
+ <>
+
+ {stories.slice(0, 4).map((story) => getAuthorCard(story))}
+
+
{slot}
+
+ ) : (
+ stories.map((story) => getAuthorCard(story))
+ )}
+
+ {getLoadMore({ isLoading, stories, getMoreStories, subsequentLoadCount })}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ theme: color(label, defaultvalue),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ showAuthor: boolean("Show Author", true),
+ showTime: boolean("Timestamp", true),
+ showButton: boolean("Show button", true),
+ buttonText: text("Button text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ showReadTime: boolean("Read time", true),
+ border: optionalSelect("Border settings", border),
+ };
+ return {story()}
)
+ .add("With AD", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ theme: color(label, defaultvalue),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ showAuthor: boolean("Show Author", true),
+ showTime: boolean("Timestamp", true),
+ showButton: boolean("Show button", true),
+ buttonText: text("Button text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ showReadTime: boolean("Read time", true),
+ border: optionalSelect("Border settings", border),
+ slotConfig: [{ type: "ad", component: configurableSlot }],
+ };
+ return
+ loadMore(opts)}
+ navigate={() => navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+ );
+ };
+
+ return (
+
+
+
+
+ {stories.map((story, index) => (
+
+ ))}
+
+ {getLoadMore({ isLoading, stories, getMoreStories, subsequentLoadCount })}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ slotConfig: [{ type: "story", component: configurableSlot }],
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return
+
+```
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/__snapshots__/listicle-story.test.js.snap b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/__snapshots__/listicle-story.test.js.snap
new file mode 100644
index 000000000..b5769e1eb
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/__snapshots__/listicle-story.test.js.snap
@@ -0,0 +1,841 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Listicle Story Templates Should render listicle story template with section tag 1`] = `
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est",
+ "title": "",
+ "type": "text",
+ },
+ ],
+ "version": 9,
+ },
+ Object {
+ "card-added-at": 1602155520864,
+ "card-updated-at": 1602155725655,
+ "content-id": "70988ea9-90a0-42ea-b2b1-1f7374de06e1",
+ "content-version-id": "43ff8777-4176-4294-95a3-5aaee8e34537",
+ "id": "70988ea9-90a0-42ea-b2b1-1f7374de06e1",
+ "metadata": Object {
+ "attributes": Object {},
+ "social-share": Object {
+ "image": Object {
+ "attribution": "Credits: Asif Asharaf",
+ "caption": "Saque ipsa quae ab illo inventore veritatis et quip",
+ "key": "ace/2020-10/ec88fad0-ed4d-44ec-9930-72e9d897bdd0/seo.jpg",
+ "metadata": Object {
+ "file-name": "seo.jpg",
+ "file-size": 228062,
+ "height": 900,
+ "mime-type": "image/jpeg",
+ "width": 1600,
+ },
+ "url": null,
+ },
+ "message": null,
+ "shareable": false,
+ "title": "It pays to be kind: improving workplace culture through kindness",
+ },
+ },
+ "status": "draft",
+ "story-elements": Array [
+ Object {
+ "description": "",
+ "family-id": "11f060e0-a1aa-4963-9778-24f6b6eca401",
+ "id": "82244bcd-c453-41c4-a215-bb038f569375",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/82244bcd-c453-41c4-a215-bb038f569375",
+ "subtype": null,
+ "text": "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit",
+ "title": "",
+ "type": "title",
+ },
+ Object {
+ "description": "",
+ "family-id": "a970d458-c7d8-4512-8420-4bf3a4046caf",
+ "id": "ae7131f6-450a-4589-9995-812ba5832c58",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/ae7131f6-450a-4589-9995-812ba5832c58",
+ "subtype": null,
+ "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
",
+ "title": "",
+ "type": "text",
+ },
+ ],
+ "version": 7,
+ },
+ Object {
+ "card-added-at": 1602155541845,
+ "card-updated-at": 1602156067786,
+ "content-id": "d6876a49-9319-4c24-9bf9-881ea454b967",
+ "content-version-id": "dbfeb570-f9aa-4875-9c3d-f48bf551dd91",
+ "id": "d6876a49-9319-4c24-9bf9-881ea454b967",
+ "metadata": Object {
+ "attributes": Object {},
+ "social-share": Object {
+ "image": Object {
+ "attribution": "Jon Doe",
+ "caption": null,
+ "key": "ace/2020-10/920f35b9-023e-44d2-b4de-69dce8587bf7/quintype_website_2020_01_2f2ba42d_7a45_4a60_b4af_7d4758f27f5d_Untitled_presentation.jpg",
+ "metadata": Object {
+ "file-name": "quintype-website_2020-01_2f2ba42d-7a45-4a60-b4af-7d4758f27f5d_Untitled_presentation.jpg",
+ "file-size": 26544,
+ "height": 540,
+ "mime-type": "image/jpeg",
+ "width": 960,
+ },
+ "url": null,
+ },
+ "message": null,
+ "shareable": false,
+ "title": "It pays to be kind: improving workplace culture through kindness",
+ },
+ },
+ "status": "draft",
+ "story-elements": Array [
+ Object {
+ "description": "",
+ "family-id": "1b8bcf8e-19cb-4d16-ac0e-bb4f0939dbbf",
+ "id": "d3cbfcce-a503-499d-80cd-52fce2215ef3",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/d3cbfcce-a503-499d-80cd-52fce2215ef3",
+ "subtype": null,
+ "text": "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit",
+ "title": "",
+ "type": "title",
+ },
+ Object {
+ "description": "",
+ "family-id": "6d5d82b8-f879-476d-84a2-1f62f74acdd5",
+ "hyperlink": "https://www.google.com/",
+ "id": "a7f79ffa-4be0-4207-a495-a035a020cac3",
+ "image-attribution": "Jon Doe",
+ "image-metadata": Object {
+ "file-name": "quintype-website_2020-01_2f2ba42d-7a45-4a60-b4af-7d4758f27f5d_Untitled_presentation.jpg",
+ "file-size": 26544,
+ "height": 540,
+ "mime-type": "image/jpeg",
+ "width": 960,
+ },
+ "image-s3-key": "ace/2020-10/920f35b9-023e-44d2-b4de-69dce8587bf7/quintype_website_2020_01_2f2ba42d_7a45_4a60_b4af_7d4758f27f5d_Untitled_presentation.jpg",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/a7f79ffa-4be0-4207-a495-a035a020cac3",
+ "subtype": null,
+ "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.",
+ "type": "image",
+ },
+ Object {
+ "description": "",
+ "family-id": "b9a1fdd8-5727-4e5a-86a6-467922aa155f",
+ "id": "2a248f86-3181-4456-9f96-f7e56668fbc1",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/2a248f86-3181-4456-9f96-f7e56668fbc1",
+ "subtype": null,
+ "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
",
+ "title": "",
+ "type": "text",
+ },
+ ],
+ "version": 10,
+ },
+ Object {
+ "card-added-at": 1602156035607,
+ "card-updated-at": 1602156067786,
+ "content-id": "539c1ed1-79e5-4771-a304-60b46d8376c6",
+ "content-version-id": "dc523cfa-dcf2-41b5-ab7a-b5c3577e11f7",
+ "id": "539c1ed1-79e5-4771-a304-60b46d8376c6",
+ "metadata": Object {
+ "attributes": Object {},
+ "social-share": Object {
+ "image": Object {
+ "attribution": "Credits: Asif Asharaf",
+ "caption": "Saque ipsa quae ab illo inventore veritatis et quip",
+ "key": "ace/2020-10/ec88fad0-ed4d-44ec-9930-72e9d897bdd0/seo.jpg",
+ "metadata": Object {
+ "file-name": "seo.jpg",
+ "file-size": 228062,
+ "height": 900,
+ "mime-type": "image/jpeg",
+ "width": 1600,
+ },
+ "url": null,
+ },
+ "message": null,
+ "shareable": false,
+ "title": "It pays to be kind: improving workplace culture through kindness",
+ },
+ },
+ "status": "draft",
+ "story-elements": Array [
+ Object {
+ "description": "",
+ "family-id": "b8f84eb7-4a91-45ba-a5d3-95d5f48c7772",
+ "id": "20db973e-4612-4933-9acd-5a6d4c3d281d",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/20db973e-4612-4933-9acd-5a6d4c3d281d",
+ "subtype": null,
+ "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
",
+ "title": "",
+ "type": "text",
+ },
+ Object {
+ "description": "",
+ "id": "00000000-0000-0000-0000-000000000000",
+ "metadata": Object {
+ "promotional-message": true,
+ },
+ "subtype": null,
+ "text": " text promotional message
",
+ "title": "",
+ "type": "text",
+ },
+ ],
+ "version": 2,
+ },
+ ],
+ "comments": null,
+ "content-created-at": 1602154991378,
+ "content-type": "story",
+ "content-updated-at": 1602234199729,
+ "contributors": Array [],
+ "created-at": 1602234185901,
+ "custom-slug": null,
+ "customSlotAfterStory": Object {
+ "config": Object {
+ "targetingId": "",
+ },
+ "layout": "Leaderboard",
+ "layoutLabel": "Leaderboard",
+ "type": "ad",
+ },
+ "entities": Object {},
+ "external-id": null,
+ "first-published-at": 1602155728566,
+ "headline": "It pays to be kind: improving workplace culture through kindness",
+ "hero-image-attribution": "Credits: Asif Asharaf",
+ "hero-image-caption": "Saque ipsa quae ab illo inventore veritatis et quip",
+ "hero-image-hyperlink": "https://www.google.com",
+ "hero-image-metadata": Object {
+ "file-name": "seo.jpg",
+ "file-size": 228062,
+ "height": 900,
+ "mime-type": "image/jpeg",
+ "width": 1600,
+ },
+ "hero-image-s3-key": "ace/2020-10/ec88fad0-ed4d-44ec-9930-72e9d897bdd0/seo.jpg",
+ "id": "307e5a1b-5cf0-4321-8193-827b2add174f",
+ "is-amp-supported": true,
+ "is-live-blog": false,
+ "last-published-at": 1602234199516,
+ "linked-entities": Array [],
+ "linked-story-ids": Array [],
+ "metadata": Object {
+ "card-share": Object {
+ "shareable": false,
+ },
+ },
+ "owner-id": 927927,
+ "owner-name": "Pravin Atigre",
+ "promotional-message": " text promotional message
",
+ "publish-at": null,
+ "published-at": 1602234199516,
+ "publisher-id": 97,
+ "push-notification": null,
+ "push-notification-title": null,
+ "read-time": 2,
+ "sections": Array [
+ Object {
+ "collection": Object {
+ "id": 15603,
+ "name": "Health",
+ "slug": "health",
+ },
+ "data": null,
+ "display-name": "Health",
+ "domain-slug": null,
+ "id": 11181,
+ "name": "Health",
+ "parent-id": 38586,
+ "section-url": "https://ace-web.qtstage.io/news/health",
+ "slug": "health",
+ },
+ ],
+ "seo": Object {
+ "claim-reviews": Object {
+ "story": null,
+ },
+ },
+ "sequence-no": null,
+ "slug": "health/2020/10/08/it-pays-to-be-kind-improving-workplace-culture-through-kindness",
+ "status": "published",
+ "story-audio": Object {
+ "s3-key": "ace/story-audio/2020-10/307e5a1b-5cf0-4321-8193-827b2add174f/.0e6d9a89-3bb7-47b0-8bee-a34b5f75f5e9.mp3",
+ },
+ "story-content-id": "307e5a1b-5cf0-4321-8193-827b2add174f",
+ "story-template": "listicle",
+ "story-version-id": "8768d161-6433-4f1e-b8ef-e632d180ede9",
+ "storyline-id": null,
+ "storyline-title": null,
+ "subheadline": "Neque porro quisquam est, qui dolorem ipsum quia dolor sit.",
+ "summary": null,
+ "tags": Array [
+ Object {
+ "id": 1421524,
+ "meta-description": null,
+ "meta-title": null,
+ "name": "health",
+ "slug": "health",
+ "tag-type": "Tag",
+ },
+ Object {
+ "id": 1421525,
+ "meta-description": null,
+ "meta-title": null,
+ "name": "culture",
+ "slug": "culture",
+ "tag-type": "Tag",
+ },
+ Object {
+ "id": 1421526,
+ "meta-description": null,
+ "meta-title": null,
+ "name": "workplace",
+ "slug": "workplace",
+ "tag-type": "Tag",
+ },
+ ],
+ "updated-at": 1602234193104,
+ "url": "https://ace-web.qtstage.io/health/2020/10/08/it-pays-to-be-kind-improving-workplace-culture-through-kindness",
+ "version": 18,
+ "votes": Object {},
+ "word-count": 232,
+ }
+ }
+ storyElementsConfig={
+ Object {
+ "also-read": Object {},
+ "answer": Object {},
+ "blockquote": Object {},
+ "blurb": Object {},
+ "q-and-a": Object {},
+ "question": Object {},
+ "quote": Object {},
+ "references": Object {},
+ "summary": Object {},
+ }
+ }
+ />
+
+`;
+
+exports[`Listicle Story Templates Should render listicle story template without section tag 1`] = `
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est",
+ "title": "",
+ "type": "text",
+ },
+ ],
+ "version": 9,
+ },
+ Object {
+ "card-added-at": 1602155520864,
+ "card-updated-at": 1602155725655,
+ "content-id": "70988ea9-90a0-42ea-b2b1-1f7374de06e1",
+ "content-version-id": "43ff8777-4176-4294-95a3-5aaee8e34537",
+ "id": "70988ea9-90a0-42ea-b2b1-1f7374de06e1",
+ "metadata": Object {
+ "attributes": Object {},
+ "social-share": Object {
+ "image": Object {
+ "attribution": "Credits: Asif Asharaf",
+ "caption": "Saque ipsa quae ab illo inventore veritatis et quip",
+ "key": "ace/2020-10/ec88fad0-ed4d-44ec-9930-72e9d897bdd0/seo.jpg",
+ "metadata": Object {
+ "file-name": "seo.jpg",
+ "file-size": 228062,
+ "height": 900,
+ "mime-type": "image/jpeg",
+ "width": 1600,
+ },
+ "url": null,
+ },
+ "message": null,
+ "shareable": false,
+ "title": "It pays to be kind: improving workplace culture through kindness",
+ },
+ },
+ "status": "draft",
+ "story-elements": Array [
+ Object {
+ "description": "",
+ "family-id": "11f060e0-a1aa-4963-9778-24f6b6eca401",
+ "id": "82244bcd-c453-41c4-a215-bb038f569375",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/82244bcd-c453-41c4-a215-bb038f569375",
+ "subtype": null,
+ "text": "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit",
+ "title": "",
+ "type": "title",
+ },
+ Object {
+ "description": "",
+ "family-id": "a970d458-c7d8-4512-8420-4bf3a4046caf",
+ "id": "ae7131f6-450a-4589-9995-812ba5832c58",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/ae7131f6-450a-4589-9995-812ba5832c58",
+ "subtype": null,
+ "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
",
+ "title": "",
+ "type": "text",
+ },
+ ],
+ "version": 7,
+ },
+ Object {
+ "card-added-at": 1602155541845,
+ "card-updated-at": 1602156067786,
+ "content-id": "d6876a49-9319-4c24-9bf9-881ea454b967",
+ "content-version-id": "dbfeb570-f9aa-4875-9c3d-f48bf551dd91",
+ "id": "d6876a49-9319-4c24-9bf9-881ea454b967",
+ "metadata": Object {
+ "attributes": Object {},
+ "social-share": Object {
+ "image": Object {
+ "attribution": "Jon Doe",
+ "caption": null,
+ "key": "ace/2020-10/920f35b9-023e-44d2-b4de-69dce8587bf7/quintype_website_2020_01_2f2ba42d_7a45_4a60_b4af_7d4758f27f5d_Untitled_presentation.jpg",
+ "metadata": Object {
+ "file-name": "quintype-website_2020-01_2f2ba42d-7a45-4a60-b4af-7d4758f27f5d_Untitled_presentation.jpg",
+ "file-size": 26544,
+ "height": 540,
+ "mime-type": "image/jpeg",
+ "width": 960,
+ },
+ "url": null,
+ },
+ "message": null,
+ "shareable": false,
+ "title": "It pays to be kind: improving workplace culture through kindness",
+ },
+ },
+ "status": "draft",
+ "story-elements": Array [
+ Object {
+ "description": "",
+ "family-id": "1b8bcf8e-19cb-4d16-ac0e-bb4f0939dbbf",
+ "id": "d3cbfcce-a503-499d-80cd-52fce2215ef3",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/d3cbfcce-a503-499d-80cd-52fce2215ef3",
+ "subtype": null,
+ "text": "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit",
+ "title": "",
+ "type": "title",
+ },
+ Object {
+ "description": "",
+ "family-id": "6d5d82b8-f879-476d-84a2-1f62f74acdd5",
+ "hyperlink": "https://www.google.com/",
+ "id": "a7f79ffa-4be0-4207-a495-a035a020cac3",
+ "image-attribution": "Jon Doe",
+ "image-metadata": Object {
+ "file-name": "quintype-website_2020-01_2f2ba42d-7a45-4a60-b4af-7d4758f27f5d_Untitled_presentation.jpg",
+ "file-size": 26544,
+ "height": 540,
+ "mime-type": "image/jpeg",
+ "width": 960,
+ },
+ "image-s3-key": "ace/2020-10/920f35b9-023e-44d2-b4de-69dce8587bf7/quintype_website_2020_01_2f2ba42d_7a45_4a60_b4af_7d4758f27f5d_Untitled_presentation.jpg",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/a7f79ffa-4be0-4207-a495-a035a020cac3",
+ "subtype": null,
+ "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.",
+ "type": "image",
+ },
+ Object {
+ "description": "",
+ "family-id": "b9a1fdd8-5727-4e5a-86a6-467922aa155f",
+ "id": "2a248f86-3181-4456-9f96-f7e56668fbc1",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/2a248f86-3181-4456-9f96-f7e56668fbc1",
+ "subtype": null,
+ "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
",
+ "title": "",
+ "type": "text",
+ },
+ ],
+ "version": 10,
+ },
+ Object {
+ "card-added-at": 1602156035607,
+ "card-updated-at": 1602156067786,
+ "content-id": "539c1ed1-79e5-4771-a304-60b46d8376c6",
+ "content-version-id": "dc523cfa-dcf2-41b5-ab7a-b5c3577e11f7",
+ "id": "539c1ed1-79e5-4771-a304-60b46d8376c6",
+ "metadata": Object {
+ "attributes": Object {},
+ "social-share": Object {
+ "image": Object {
+ "attribution": "Credits: Asif Asharaf",
+ "caption": "Saque ipsa quae ab illo inventore veritatis et quip",
+ "key": "ace/2020-10/ec88fad0-ed4d-44ec-9930-72e9d897bdd0/seo.jpg",
+ "metadata": Object {
+ "file-name": "seo.jpg",
+ "file-size": 228062,
+ "height": 900,
+ "mime-type": "image/jpeg",
+ "width": 1600,
+ },
+ "url": null,
+ },
+ "message": null,
+ "shareable": false,
+ "title": "It pays to be kind: improving workplace culture through kindness",
+ },
+ },
+ "status": "draft",
+ "story-elements": Array [
+ Object {
+ "description": "",
+ "family-id": "b8f84eb7-4a91-45ba-a5d3-95d5f48c7772",
+ "id": "20db973e-4612-4933-9acd-5a6d4c3d281d",
+ "metadata": Object {},
+ "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/20db973e-4612-4933-9acd-5a6d4c3d281d",
+ "subtype": null,
+ "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
",
+ "title": "",
+ "type": "text",
+ },
+ Object {
+ "description": "",
+ "id": "00000000-0000-0000-0000-000000000000",
+ "metadata": Object {
+ "promotional-message": true,
+ },
+ "subtype": null,
+ "text": " text promotional message
",
+ "title": "",
+ "type": "text",
+ },
+ ],
+ "version": 2,
+ },
+ ],
+ "comments": null,
+ "content-created-at": 1602154991378,
+ "content-type": "story",
+ "content-updated-at": 1602234199729,
+ "contributors": Array [],
+ "created-at": 1602234185901,
+ "custom-slug": null,
+ "customSlotAfterStory": Object {
+ "config": Object {
+ "targetingId": "",
+ },
+ "layout": "Leaderboard",
+ "layoutLabel": "Leaderboard",
+ "type": "ad",
+ },
+ "entities": Object {},
+ "external-id": null,
+ "first-published-at": 1602155728566,
+ "headline": "It pays to be kind: improving workplace culture through kindness",
+ "hero-image-attribution": "Credits: Asif Asharaf",
+ "hero-image-caption": "Saque ipsa quae ab illo inventore veritatis et quip",
+ "hero-image-hyperlink": "https://www.google.com",
+ "hero-image-metadata": Object {
+ "file-name": "seo.jpg",
+ "file-size": 228062,
+ "height": 900,
+ "mime-type": "image/jpeg",
+ "width": 1600,
+ },
+ "hero-image-s3-key": "ace/2020-10/ec88fad0-ed4d-44ec-9930-72e9d897bdd0/seo.jpg",
+ "id": "307e5a1b-5cf0-4321-8193-827b2add174f",
+ "is-amp-supported": true,
+ "is-live-blog": false,
+ "last-published-at": 1602234199516,
+ "linked-entities": Array [],
+ "linked-story-ids": Array [],
+ "metadata": Object {
+ "card-share": Object {
+ "shareable": false,
+ },
+ },
+ "owner-id": 927927,
+ "owner-name": "Pravin Atigre",
+ "promotional-message": " text promotional message
",
+ "publish-at": null,
+ "published-at": 1602234199516,
+ "publisher-id": 97,
+ "push-notification": null,
+ "push-notification-title": null,
+ "read-time": 2,
+ "sections": Array [
+ Object {
+ "collection": Object {
+ "id": 15603,
+ "name": "Health",
+ "slug": "health",
+ },
+ "data": null,
+ "display-name": "Health",
+ "domain-slug": null,
+ "id": 11181,
+ "name": "Health",
+ "parent-id": 38586,
+ "section-url": "https://ace-web.qtstage.io/news/health",
+ "slug": "health",
+ },
+ ],
+ "seo": Object {
+ "claim-reviews": Object {
+ "story": null,
+ },
+ },
+ "sequence-no": null,
+ "slug": "health/2020/10/08/it-pays-to-be-kind-improving-workplace-culture-through-kindness",
+ "status": "published",
+ "story-audio": Object {
+ "s3-key": "ace/story-audio/2020-10/307e5a1b-5cf0-4321-8193-827b2add174f/.0e6d9a89-3bb7-47b0-8bee-a34b5f75f5e9.mp3",
+ },
+ "story-content-id": "307e5a1b-5cf0-4321-8193-827b2add174f",
+ "story-template": "listicle",
+ "story-version-id": "8768d161-6433-4f1e-b8ef-e632d180ede9",
+ "storyline-id": null,
+ "storyline-title": null,
+ "subheadline": "Neque porro quisquam est, qui dolorem ipsum quia dolor sit.",
+ "summary": null,
+ "tags": Array [
+ Object {
+ "id": 1421524,
+ "meta-description": null,
+ "meta-title": null,
+ "name": "health",
+ "slug": "health",
+ "tag-type": "Tag",
+ },
+ Object {
+ "id": 1421525,
+ "meta-description": null,
+ "meta-title": null,
+ "name": "culture",
+ "slug": "culture",
+ "tag-type": "Tag",
+ },
+ Object {
+ "id": 1421526,
+ "meta-description": null,
+ "meta-title": null,
+ "name": "workplace",
+ "slug": "workplace",
+ "tag-type": "Tag",
+ },
+ ],
+ "updated-at": 1602234193104,
+ "url": "https://ace-web.qtstage.io/health/2020/10/08/it-pays-to-be-kind-improving-workplace-culture-through-kindness",
+ "version": 18,
+ "votes": Object {},
+ "word-count": 232,
+ }
+ }
+ storyElementsConfig={
+ Object {
+ "also-read": Object {},
+ "answer": Object {},
+ "blockquote": Object {},
+ "blurb": Object {},
+ "q-and-a": Object {},
+ "question": Object {},
+ "quote": Object {},
+ "references": Object {},
+ "summary": Object {},
+ }
+ }
+ />
+
+`;
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js
new file mode 100644
index 000000000..e0f0af249
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js
@@ -0,0 +1,307 @@
+import { SocialShare } from "@quintype/components";
+import React from "react";
+import { useSelector } from "react-redux";
+import get from "lodash/get";
+import PropTypes from "prop-types";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { HeroImage } from "../../../Atoms/HeroImage";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import { StateProvider } from "../../../SharedContext";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import "./listicle-story.m.css";
+import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import AsideCollection from "../../AsideCollection";
+
+const ListicleStoryTemplate = ({
+ story = {},
+ config = {},
+ storyElementsConfig,
+ adComponent,
+ widgetComp = () => {},
+ firstChild,
+ secondChild,
+}) => {
+ const {
+ theme = "",
+ noOfVisibleCards = -1,
+ publishedDetails = {},
+ templateType = "",
+ authorDetails = {
+ template: "default",
+ },
+ asideCollection = {},
+ showSection,
+ sectionTagSettings,
+ premiumStoryIconConfig = {},
+ } = config;
+ const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+ const { "bullet-type": storyBulletType = "" } = story;
+ const storyId = get(story, ["id"], "");
+ const isNumberedBullet = storyBulletType !== "bullets";
+ const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
+
+ // Content Blocks
+ const HeroImageBlock = (settings) => {
+ const { widths = [320, 480, 768, 1024, 1140], aspectRatio = [[16, 9]] } = settings;
+ return (
+
+
+ );
+ const HeadlineBlock = () => (
+
+
{showSection &&
+
+
+
+ {visibledCards.map((card, index) => {
+ return (
+
+ {!isNumberedBullet ? (
+
+ ) : (
+ {index + 1}.
+ )}
+
+ );
+ })}
+ {firstChild}
+
+
+ {secondChild}
+
+ {renderTemplate()}
+
+ );
+};
+
+ListicleStoryTemplate.propTypes = {
+ story: PropTypes.object,
+ config: PropTypes.shape({
+ templateType: PropTypes.string,
+ authorCard: PropTypes.object,
+ asideCollection: PropTypes.object,
+ }),
+ firstChild: PropTypes.node,
+ secondChild: PropTypes.node,
+ storyElementsConfig: PropTypes.object,
+ adComponent: PropTypes.func,
+ widgetComp: PropTypes.func,
+ premiumStoryIconConfig: PropTypes.object,
+};
+
+export default StateProvider(ListicleStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css
new file mode 100644
index 000000000..7a0d1e1e1
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css
@@ -0,0 +1,249 @@
+@import "../../../../../../assets/arrow/stylesheets/mixins.scss";
+:root {
+ --grid-container-width: 1140px;
+ --fluid-grid-container-width: 1440px;
+}
+
+/* Generinc style */
+.headline-block :global(.arr--story-headline) {
+ font-size: var(--arrow-fs-28);
+ line-height: normal;
+ @include tablet {
+ font-size: var(--arrow-fs-big);
+ line-height: var(--arrow-lh-2);
+ }
+}
+
+.headline-block :global(.arr--sub-headline) {
+ font-size: var(--arrow-fs-s);
+ font-style: italic;
+ margin: var(--arrow-spacing-xs) 0 var(--arrow-spacing-l);
+ @include tablet {
+ font-size: var(--arrow-fs-m);
+ margin-bottom: var(--arrow-spacing-xl);
+ }
+}
+
+.section-tag {
+ margin-bottom: var(--arrow-spacing-s);
+}
+.caption-attribution-block {
+ margin-bottom: var(--arrow-spacing-l);
+ @include tablet {
+ margin-bottom: var(--arrow-spacing-xl);
+ }
+}
+
+.body-block :global(.arr--element-container) {
+ margin-top: var(--arrow-spacing-s);
+ @include tablet {
+ margin-top: var(--arrow-spacing-m);
+ }
+}
+
+.body-block :global(.story-element-title) {
+ line-height: var(--arrow-lh-2);
+}
+
+.timestamp-social-share {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: var(--arrow-spacing-xxs) 0 var(--arrow-spacing-l);
+}
+
+.bullet-style-number {
+ font-size: var(--arrow-fs-l);
+ font-weight: var(--arrow-fw-bold);
+ color: var(--arrow-c-brand1);
+ @include tablet {
+ font-size: var(--arrow-fs-huge);
+ font-weight: var(--arrow-fw-semi-bold);
+ }
+}
+
+.bullet-style-dash {
+ content: "";
+ width: 24px;
+ height: 8px;
+ background-color: var(--arrow-c-brand1);
+ @include tablet {
+ height: 12px;
+ }
+}
+
+.story-tags > * {
+ margin: var(--arrow-spacing-l) 0;
+}
+
+/* Layout */
+.grid-container {
+ max-width: var(--grid-container-width);
+ padding: 0 var(--arrow-spacing-s);
+ margin: 0 auto;
+ @include tablet {
+ display: grid;
+ grid-column-gap: 24px;
+ grid-template-columns: repeat(12, 1fr);
+ padding: 0 var(--arrow-spacing-l);
+
+ .full-grid {
+ grid-column: 1 / 13;
+ @include desktop {
+ margin: 0 -24px;
+ }
+ }
+ }
+}
+
+.left-column {
+ @include tablet {
+ grid-column: 1 / 8;
+ }
+
+ @include desktop {
+ grid-column: 1 / 9;
+ }
+}
+
+.right-column {
+ @include tablet {
+ grid-column: 8 / 13;
+ }
+
+ @include desktop {
+ grid-column: 9 / 13;
+ }
+}
+
+.right-column :global(.aside-collection-ad-slot:first-child) {
+ margin-top: 0;
+}
+
+.center-column {
+ @include tablet {
+ grid-column: 3 / 11;
+ }
+}
+
+/* Template specific */
+.hero-faded-relative {
+ position: relative;
+}
+.hero-faded-wrapper {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ z-index: var(--z-index-1);
+ background: rgb(0 0 0 / 0.5);
+
+ display: flex;
+ align-items: center;
+
+ @include tablet {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ }
+}
+
+.hero-faded-wrapper .headline-content-holder {
+ padding: 0 24px;
+
+ @include tablet {
+ grid-column: 2 / 12;
+ }
+ @include desktop {
+ grid-column: 3 / 11;
+ }
+}
+
+.numbered-bullet-style :global(.arr--story-page-card-wrapper) > :last-child {
+ margin-bottom: var(--arrow-spacing-xl);
+}
+
+.hero-faded-wrapper .headline-content-holder :global(.arr--story-headline),
+.hero-faded-wrapper .headline-content-holder :global(.arr--sub-headline),
+.hero-faded-wrapper .headline-content-holder :global(.arr--section-name .section-tag) {
+ color: var(--arrow-c-light);
+}
+
+.sideway-grid {
+ padding: 0 var(--arrow-spacing-s);
+ @include tablet {
+ display: grid;
+ max-width: var(--fluid-grid-container-width);
+ margin: 0 auto var(--arrow-spacing-l);
+ padding: 0 0 0 24px;
+ grid-template-columns: repeat(12, 1fr);
+ grid-column-gap: 24px;
+ }
+
+ @include desktop {
+ padding: 0;
+ }
+}
+
+.sideway-headline {
+ @include tablet {
+ grid-column: 1 / 6;
+ display: flex;
+ align-items: center;
+ }
+ @include desktop {
+ grid-column: 2 / 7;
+ }
+}
+
+.sideway-hero {
+ @include tablet {
+ grid-column: 6 / 13;
+
+ .caption-attribution-block {
+ margin-bottom: 0;
+ }
+ }
+ @include desktop {
+ grid-column: 7 / 13;
+ }
+}
+
+.headline-priority-grid {
+ @include tablet {
+ grid-column: 1 / 13;
+ }
+
+ @include desktop {
+ grid-column: 1 / 9;
+ }
+}
+
+.hero-priority-template,
+.headline-priority-template,
+.headline-hero-priority-template,
+.hero-overlay-template,
+.headline-sideway-template {
+ margin-top: var(--arrow-spacing-s);
+ @include tablet {
+ margin-top: var(--arrow-spacing-l);
+ }
+ @include desktop {
+ margin-top: var(--arrow-spacing-xl);
+ }
+}
+
+.numbered-bullet-style :global(.arr--story-page-card-wrapper) > * {
+ margin-top: var(--arrow-spacing-xs);
+ margin-bottom: var(--arrow-spacing-s);
+ @include tablet {
+ margin-bottom: var(--arrow-spacing-20);
+ @include desktop {
+ margin-top: var(--arrow-spacing-xxs);
+ }
+ }
+}
+
+.numbered-bullet-style :global(.story-element-title) h2 {
+ padding: 0;
+}
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.test.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.test.js
new file mode 100644
index 000000000..a4bcd2635
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.test.js
@@ -0,0 +1,47 @@
+import * as React from "react";
+import { shallow } from "enzyme";
+import { generateStory } from "../../../Fixture";
+import ListicleStoryTemplate from "./index";
+import { mockIntersectionObserver } from "../../../../utils/testing-utils";
+
+const story = generateStory("listicle-story");
+
+const storyElementsConfig = {
+ summary: {},
+ blurb: {},
+ blockquote: {},
+ quote: {},
+ "also-read": {},
+ "q-and-a": {},
+ question: {},
+ answer: {},
+ references: {},
+};
+
+beforeEach(() => {
+ mockIntersectionObserver();
+});
+
+describe("Listicle Story Templates", () => {
+ it("Should render listicle story template with section tag", () => {
+ const templateConfig = {
+ templateType: "default",
+ showSection: true,
+ };
+ const wrapper = shallow(
+
+
+```
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js
new file mode 100644
index 000000000..59c8edda7
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js
@@ -0,0 +1,58 @@
+/* eslint-disable max-len */
+import React from "react";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import get from "lodash/get";
+import { LiveBlogStoryTemplates } from "./templates";
+import { StateProvider } from "../../../SharedContext";
+import "./live-blog.m.css";
+
+const LiveBlogStoryTemplate = ({
+ story = {},
+ config = {},
+ storyElementsConfig,
+ adComponent,
+ widgetComp,
+ firstChild,
+ secondChild,
+}) => {
+ const { theme = "", templateType = "default", verticalShare = "" } = config;
+
+ const containerClass = templateType !== "hero-overlay" ? "container" : "";
+ const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
+
+ return (
+
+
+ );
+};
+
+LiveBlogStoryTemplate.propTypes = {
+ story: PropTypes.object,
+ config: PropTypes.shape({
+ templateType: PropTypes.string,
+ }),
+ firstChild: PropTypes.node,
+ secondChild: PropTypes.node,
+ storyElementsConfig: PropTypes.object,
+ adComponent: PropTypes.func,
+ widgetComp: PropTypes.func,
+};
+
+export default StateProvider(LiveBlogStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css
new file mode 100644
index 000000000..53bd4563b
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css
@@ -0,0 +1,326 @@
+@import "../../../../../../assets/arrow/stylesheets/mixins.scss";
+
+.header-details {
+ margin-top: var(--arrow-spacing-l);
+ @include tablet {
+ margin-top: var(--arrow-spacing-xl);
+ }
+}
+
+.header-details :global(.arr--sub-headline) {
+ font-size: var(--arrow-fs-s);
+ font-style: italic;
+ @include tablet {
+ font-size: var(--arrow-fs-m);
+ }
+}
+
+.wrapper :global(.gap-32) {
+ margin-top: var(--arrow-spacing-l);
+ @include tablet {
+ margin-top: var(--arrow-spacing-xl);
+ }
+}
+
+.container :global(.story-element-title) {
+ line-height: var(--arrow-lh-2);
+}
+
+.container :global(.arr--caption-attribution) {
+ margin: var(--arrow-spacing-xs) 0;
+}
+
+.live-headline {
+ display: flex;
+ align-items: center;
+}
+
+.time-wrapper {
+ display: flex;
+ align-items: center;
+ font-size: var(--arrow-fs-tiny);
+ svg {
+ margin-right: var(--arrow-spacing-xxs);
+ }
+}
+
+.card-share {
+ display: flex;
+ justify-content: space-between;
+}
+
+.live-icon {
+ border-radius: 50%;
+ margin-right: var(--arrow-fs-xs);
+ animation: blink 1s linear infinite;
+}
+
+@keyframes blink {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+
+.timestamp-social-share {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: var(--arrow-fs-l);
+ @include tablet {
+ margin-bottom: 40px;
+ }
+}
+
+.header-wrapper {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: container-start / 10;
+ }
+}
+
+.grid-col-full {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: grid-start / grid-end;
+ }
+}
+
+.grid-container {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: container-start/container-end;
+ margin: var(--arrow-spacing-xl) 0 0;
+ }
+}
+
+.top-space {
+ @include tablet {
+ margin-top: var(--arrow-spacing-xl);
+ }
+}
+
+.grid-col-9-15 {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: 9/15;
+ margin: var(--arrow-spacing-xl) 0 0;
+ }
+}
+
+.grid-col-2-9 {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: container-start / 9;
+ margin-bottom: var(--arrow-spacing-xl);
+ }
+}
+
+.sideway {
+ align-self: center;
+}
+
+.grid-col-9-14 {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: 9 / 14;
+ grid-row: 1 / auto;
+ margin-top: var(--arrow-spacing-xl);
+ }
+}
+
+.grid-col-4-12 {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: 4 / 12;
+ }
+}
+
+.side-column {
+ grid-column: 1/5;
+ @include tablet {
+ margin-top: 40px;
+ grid-column: 10 / container-end;
+ grid-row: 2 / auto;
+ @include desktop {
+ margin-top: 60px;
+ }
+ }
+}
+
+.story-details {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: var(--arrow-spacing-l);
+ @include tablet {
+ margin-bottom: var(--arrow-spacing-xl);
+ }
+}
+
+.headline-space {
+ margin: 0 0 var(--arrow-spacing-l);
+ @include tablet {
+ margin: 0 0 var(--arrow-spacing-xl);
+ }
+}
+
+.grid-col-9-15 > :global(.arr--caption-attribution) {
+ @include tablet {
+ margin: var(--arrow-spacing-xs) 0;
+ }
+}
+
+.overlay-hero {
+ grid-column: 1/5;
+ grid-row: 1/2;
+ margin-top: var(--arrow-spacing-s);
+ @include tablet {
+ grid-column: container-start/container-end;
+ margin-top: var(--arrow-spacing-xl);
+ }
+}
+
+.overlay-hero > :global(.arr--hero-image) img {
+ -webkit-filter: blur(4px);
+ filter: blur(4px);
+ opacity: 0.5;
+}
+
+.overlay-grid {
+ align-self: center;
+ z-index: var(--z-index-9);
+ grid-row: 1/2;
+ grid-column: 1/5;
+ padding: 0 36px;
+ @include tablet {
+ grid-column: 4/12;
+ padding: 0;
+ }
+}
+
+.key-events {
+ margin: var(--arrow-fs-l) 0 36px;
+}
+
+.share-cards.dark {
+ border-bottom: 1px solid var(--arrow-c-mono5);
+ margin-bottom: var(--arrow-spacing-m);
+}
+
+.share-cards.light {
+ border-bottom: 1px solid var(--arrow-c-invert-mono5);
+ margin-bottom: var(--arrow-spacing-m);
+}
+
+.time-wrapper.dark {
+ color: var(--arrow-c-mono4);
+}
+
+.time-wrapper.light {
+ color: var(--arrow-c-invert-mono4);
+}
+
+.space-32 > * {
+ margin-top: var(--arrow-spacing-l);
+}
+
+.sticky :global(.arr--share) {
+ grid-column: 4/5;
+ justify-self: flex-end;
+ @include tablet {
+ grid-column: 9 / grid-end;
+ @include desktop {
+ position: sticky;
+ position: -webkit-sticky;
+ grid-column: 3/4;
+ grid-row: 2/3;
+ align-self: flex-start;
+ margin-top: var(--arrow-spacing-xs);
+ top: 120px;
+ }
+ }
+}
+
+.card-share :global(.desktop-share-wrapper) {
+ max-width: 42px;
+}
+
+.sticky:global(.default) {
+ :global(.arr--share) {
+ @include tablet {
+ grid-column: 9/10;
+ @include desktop {
+ grid-column: grid-start/container-start;
+ }
+ }
+ }
+}
+
+.sticky:global(.headline-priority) {
+ :global(.arr--share) {
+ @include tablet {
+ grid-column: 8/9;
+ @include desktop {
+ grid-column: grid-start/container-start;
+ }
+ }
+ }
+}
+
+.sticky:global(.headline-hero-priority) {
+ :global(.arr--share) {
+ @include desktop {
+ grid-row: 3/4;
+ }
+ }
+}
+
+.sticky .index-2 {
+ z-index: 2;
+ @include desktop {
+ z-index: unset;
+ }
+}
+
+.grid-row-1-2 {
+ @include desktop {
+ grid-row: 1/2;
+ }
+}
+
+.grid-row-2-3 {
+ @include desktop {
+ grid-row: 2/3;
+ }
+}
+
+.grid-row-3-4 {
+ @include desktop {
+ grid-row: 3/4;
+ }
+}
+
+.grid-row-1-6 {
+ @include tablet {
+ grid-row: 1/6;
+ }
+}
+
+.tablet-index-2 {
+ @include tablet {
+ z-index: 2;
+ }
+}
+
+html[dir="rtl"] {
+ .time-wrapper {
+ direction: ltr;
+ flex-direction: row-reverse;
+ }
+}
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/stories.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/stories.js
new file mode 100644
index 000000000..93f14a41c
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/stories.js
@@ -0,0 +1,120 @@
+import { boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { optionalSelect, withStore } from "../../../../../storybook";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { generateCollection, generateStory } from "../../../Fixture";
+import { slotData } from "../../../Fixture/slot-config";
+import LiveBlog from "./index";
+import Readme from "./README.md";
+
+const story = generateStory("live-blog");
+const collection = generateCollection({ stories: 4 });
+
+const storyElementsConfig = {
+ summary: {},
+ blurb: {},
+ blockquote: {},
+ quote: {},
+ "also-read": {},
+ "q-and-a": {},
+ question: {},
+ answer: {},
+};
+
+const label = "BG Color";
+const defaultvalue = "#ffffff";
+
+const authorTemplate = {
+ default: "default",
+ leftAligned: "leftAligned",
+ centerAligned: "centerAligned",
+};
+
+const iconTypeOptions = {
+ "Circular Color Svg": "circular-color-svg",
+ "Circular Plain Svg": "circular-plain-svg",
+ "Plain Svg": "plain-svg",
+ "Plain Color Svg": "plain-color-svg",
+ "Square Svg": "square-svg",
+};
+
+const shareType = {
+ "Vertical Share": "sticky",
+ "Horizontal Share": "",
+};
+
+const templateTypes = {
+ default: "default",
+ "Hero Overlay": "hero-overlay",
+ "Headline Sideway": "headline-sideway",
+ "Hero Priority": "hero-priority",
+ "Headline Priority": "headline-priority",
+ "Headline Hero Priority": "headline-hero-priority",
+};
+
+const configurableSlot = () => {
+ return
+
+
+ {!isBlogClosed && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ const SocialShareComponent = () => {
+ return (
+
+
+ );
+ };
+
+ const showKeyEvents = () => {
+ if ((templateType === "default" || templateType === "headline-priority") && !isMobile) {
+ return null;
+ }
+ return keyEvents();
+ };
+
+ const StoryData = () => {
+ return (
+ <>
+
+
+ {!verticalShare &&
}
+
+ {firstChild}
+
+
+ );
+ };
+
+ const DefaultTemplate = (story) => {
+ return (
+ <>
+
+
+
+
+ {verticalShare &&
+ {asideCollection && (
+
+ )}
+
+
+
+
+
+
+ {verticalShare &&
+
+
+
+
+
+ {verticalShare &&
+
+
+
+
+
+ {verticalShare &&
+ {asideCollection && (
+
+ )}
+
+
+
+
+ {verticalShare &&
+
+
+
+
+
+ {verticalShare &&
+
+ );
+ };
+
+ const SocialShareComponent = () => {
+ return (
+
+
+ );
+ };
+
+ const StoryData = () => (
+ <>
+ {authorDetails && (
+
+
+ {!verticalShare &&
}
+
+ {firstChild}
+
+
+ );
+
+ const renderImages = (imageRender) => {
+ switch (imageRender) {
+ case "fullBleed":
+ return "grid-col-full";
+ case "container":
+ return "grid-container";
+ default:
+ return "grid-col-full";
+ }
+ };
+
+ const DefaultTemplate = ({ story }) => {
+ return (
+ <>
+
+
+
+
+ {verticalShare &&
+
+
+
+ {verticalShare &&
+
+
+
+
+
+ {verticalShare && children
;
+
+const storyElementsConfig = {
+ summary: {},
+ blurb: {},
+ blockquote: {},
+ quote: {},
+ "also-read": {},
+ "q-and-a": {},
+ question: {},
+ answer: {},
+};
+
+const templateConfig = {
+ theme: "#ffffff",
+ noOfVisibleCards: -1,
+ publishedDetails: {
+ enablePublishedTime: true,
+ enableUpdatedTime: false,
+ showReadTime: true,
+ },
+ asideCollection: {
+ data: collection,
+ config: {
+ collectionNameBorderColor: "#3a9fdd",
+ title: "Trending",
+ theme: "#ffffff",
+ adSlot: [{ type: "ad", component: configurableSlot }],
+ },
+ },
+};
+
+beforeEach(() => {
+ mockIntersectionObserver();
+});
+
+describe("photo Story Templates", () => {
+ it("Should render photo story template with image full-bleed", () => {
+ const config = Object.assign({ imageRender: "fullBleed" }, templateConfig);
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "hero-image" }).prop("className")).toMatch(/grid-col-full/);
+ });
+ it("Should render photo story template with image with in container", () => {
+ const config = Object.assign({ imageRender: "container" }, templateConfig);
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "hero-image" }).prop("className")).toMatch(/grid-containe/);
+ });
+
+ it("Should render hero priority center align template", () => {
+ const config = { ...templateConfig, templateType: "hero-priority-center", imageRender: "container" };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "photo-story-hero-priority-center-container" }).prop("className")).toMatch(
+ /hero-priority-center/
+ );
+ });
+
+ it("Should render hero priority left align template", () => {
+ const config = { ...templateConfig, templateType: "default", imageRender: "container" };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "photo-story-default-container" }).prop("className")).toMatch(/default/);
+ });
+
+ it("Should render headline priority template", () => {
+ const config = { ...templateConfig, templateType: "headline-priority", imageRender: "container" };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "photo-story-headline-priority-container" }).prop("className")).toMatch(
+ /headline-priority/
+ );
+ });
+});
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css
new file mode 100644
index 000000000..ebc07873d
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css
@@ -0,0 +1,175 @@
+@import "../../../../../../assets/arrow/stylesheets/mixins.scss";
+
+.grid-col-full {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: grid-start / grid-end;
+ }
+}
+.grid-container {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: container-start / container-end;
+ }
+}
+
+.grid-col-2-10 {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: container-start / 9;
+ @include desktop {
+ grid-column: container-start / 10;
+ }
+ }
+}
+.grid-col-10-14 {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: 9 / container-end;
+ grid-row: 2 / auto;
+ @include desktop {
+ grid-column: 10 / container-end;
+ }
+ }
+}
+.grid-col-4-12 {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: 4 / 12;
+ }
+}
+.grid-col-2-9 {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: container-start / 9;
+ }
+}
+
+.grid-col-9-14 {
+ grid-column: 1/5;
+ @include tablet {
+ grid-column: 9 / 14;
+ grid-row: 2 / 6;
+ }
+}
+.story-details {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: var(--arrow-spacing-l);
+ @include tablet {
+ margin-bottom: var(--arrow-spacing-xl);
+ }
+}
+.side-space {
+ margin-top: var(--arrow-spacing-m);
+ @include tablet {
+ margin-top: var(--arrow-spacing-l);
+ }
+}
+:global(.gap-32) {
+ margin-top: var(--arrow-spacing-l);
+ @include tablet {
+ margin-top: var(--arrow-spacing-xl);
+ }
+}
+
+.header-details {
+ :global(.arr--sub-headline) {
+ font-size: var(--arrow-fs-s);
+ font-style: italic;
+ @include tablet {
+ font-size: var(--arrow-fs-m);
+ }
+ }
+ .space-12 {
+ margin-top: var(--arrow-spacing-m);
+ @include tablet {
+ margin-top: var(--arrow-spacing-xl);
+ }
+ }
+}
+
+.story-tags {
+ margin: var(--arrow-spacing-l) 0;
+}
+
+.sticky :global(.arr--share) {
+ grid-column: 4/5;
+ justify-self: flex-end;
+ @include tablet {
+ grid-column: 8/9;
+ @include desktop {
+ position: sticky;
+ position: -webkit-sticky;
+ grid-column: grid-start/container-start;
+ grid-row: 2/3;
+ align-self: flex-start;
+ margin-top: var(--arrow-spacing-xs);
+ top: 120px;
+ }
+ }
+}
+
+.sticky:global(.hero-priority-center) {
+ :global(.arr--share) {
+ @include tablet {
+ grid-column: 9 / grid-end;
+ @include desktop {
+ grid-column: 3/4;
+ }
+ }
+ }
+}
+
+.sticky .index-2 {
+ z-index: 2;
+ @include desktop {
+ z-index: unset;
+ }
+}
+
+.tablet-index-2 {
+ @include tablet {
+ z-index: 2;
+ }
+}
+
+.fullBleed {
+ margin: unset;
+}
+
+.fullBleed:global(.headline-priority) .side-space.index-2 {
+ @include mobile {
+ margin: var(--arrow-spacing-m) 0 0;
+ }
+}
+
+.fullBleed:global(.headline-priority) .grid-container,
+.fullBleed:global(.headline-priority) .grid-col-9-14 {
+ @include mobile {
+ margin: 0 var(--arrow-spacing-s);
+ }
+}
+
+.fullBleed:global(.headline-priority) .side-space {
+ @include mobile {
+ margin: var(--arrow-spacing-m) var(--arrow-spacing-s) 0;
+ }
+}
+
+.fullBleed .space-12 {
+ @include mobile {
+ margin: 0 var(--arrow-spacing-s) 0;
+ }
+}
+
+.space-12 .header-details {
+ @include mobile {
+ margin-top: var(--arrow-spacing-xl);
+ }
+}
+
+.space-32 > * {
+ margin-top: var(--arrow-spacing-l);
+}
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/stories.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/stories.js
new file mode 100644
index 000000000..94cbab6f6
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/stories.js
@@ -0,0 +1,123 @@
+import { boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { optionalSelect, withStore } from "../../../../../storybook";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { generateCollection, generateStory } from "../../../Fixture";
+import { slotData } from "../../../Fixture/slot-config";
+import PhotoStory from "./index";
+
+const story = generateStory("photo-story");
+const collection = generateCollection({ stories: 4 });
+const collectionNameDefaultValue = "#3a9fdd";
+const collectionNameBorderColorLabel = "Aside Collection Name Border Color";
+
+const imageTypeOptions = {
+ "Full Bleed": "fullBleed",
+ "With In Container": "container",
+};
+
+const templates = {
+ "Hero Priority Left": "default",
+ "Hero Priority Center": "hero-priority-center",
+ "Headline Priority": "headline-priority",
+};
+
+const iconTypeOptions = {
+ "Circular Color Svg": "circular-color-svg",
+ "Circular Plain Svg": "circular-plain-svg",
+ "Plain Svg": "plain-svg",
+ "Plain Color Svg": "plain-color-svg",
+ "Square Svg": "square-svg",
+};
+
+const storyElementsConfig = {
+ summary: {},
+ blurb: {},
+ blockquote: {},
+ quote: {},
+ "also-read": {},
+ "q-and-a": {},
+ question: {},
+ answer: {},
+};
+
+const label = "BG Color";
+const defaultvalue = "#ffffff";
+
+const authorTemplate = {
+ default: "default",
+ leftAligned: "leftAligned",
+ centerAligned: "centerAligned",
+};
+
+const shareType = {
+ "Vertical Share": "sticky",
+ "Horizontal Share": "",
+};
+
+const configurableSlot = () => {
+ return
+
}
+ secondChild={
}
+ />
+
+
+```
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/index.js
new file mode 100644
index 000000000..e90a2a412
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/index.js
@@ -0,0 +1,75 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { useSelector } from "react-redux";
+import kebabCase from "lodash/kebabCase";
+import { StateProvider } from "../../../SharedContext";
+import { StoryTemplate } from "./templates";
+import get from "lodash/get";
+import "./text-story.m.css";
+
+const TextStoryTemplate = ({
+ story = {},
+ config = {},
+ storyElementsConfig,
+ adComponent,
+ widgetComp,
+ firstChild,
+ secondChild,
+}) => {
+ const {
+ theme = "",
+ templateType = "default",
+ imageRender = "fullBleed",
+ sort = "headline-first",
+ verticalShare = "",
+ } = config;
+ const sortOption = templateType === "hero-vertical-priority" ? sort : "";
+
+ const supportImageType = {
+ default: imageRender,
+ "hero-priority-center": imageRender,
+ "headline-hero-priority": imageRender,
+ "hero-vertical-priority": imageRender,
+ };
+
+ const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
+
+ const dataTestId = supportImageType[templateType]
+ ? `text-story-${templateType}-${kebabCase(supportImageType[templateType])}`
+ : `text-story-${templateType}`;
+ return (
+
+
+ );
+};
+
+TextStoryTemplate.propTypes = {
+ story: PropTypes.object,
+ config: PropTypes.shape({
+ templateType: PropTypes.string,
+ authorCard: PropTypes.object,
+ asideCollection: PropTypes.object,
+ }),
+ firstChild: PropTypes.node,
+ secondChild: PropTypes.node,
+ storyElementsConfig: PropTypes.object,
+ adComponent: PropTypes.func,
+ widgetComp: PropTypes.func,
+};
+
+export default StateProvider(TextStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/stories.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/stories.js
new file mode 100644
index 000000000..b84dee978
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/stories.js
@@ -0,0 +1,125 @@
+import { boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { optionalSelect, withStore } from "../../../../../storybook";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { generateCollection, generateStory } from "../../../Fixture";
+import { slotData } from "../../../Fixture/slot-config";
+import TextStoryTemplate from "./index";
+import Readme from "./README.md";
+
+const story = generateStory();
+const collection = generateCollection({ stories: 4 });
+const authorTemplate = {
+ default: "default",
+ leftAligned: "leftAligned",
+ centerAligned: "centerAligned",
+ "No value": "",
+};
+const imageTypeOptions = {
+ "Full Bleed": "fullBleed",
+ "With In Container": "container",
+};
+
+const iconTypeOptions = {
+ "Circular Color Svg": "circular-color-svg",
+ "Circular Plain Svg": "circular-plain-svg",
+ "Plain Svg": "plain-svg",
+ "Plain Color Svg": "plain-color-svg",
+ "Square Svg": "square-svg",
+};
+
+const templates = {
+ "Hero Priority Left": "default",
+ "Hero Priority Center": "hero-priority-center",
+ "Headline Hero Priority": "headline-hero-priority",
+ "Hero Vertical Priority": "hero-vertical-priority",
+ "Headline Priority": "headline-priority",
+ "Headline Overlay Priority": "headline-overlay-priority",
+};
+
+const storyElementsConfig = {
+ summary: {},
+ blurb: {},
+ blockquote: {},
+ quote: {},
+ "also-read": {},
+ "q-and-a": {},
+ question: {},
+ answer: {},
+};
+
+const configurableSlot = () => {
+ return
+
+ );
+ };
+
+ const AsideCollectionCard = () => {
+ return (
+ asideCollection && (
+
+ )
+ );
+ };
+
+ const SocialShareComponent = () => {
+ return (
+
+
+ );
+ };
+
+ const StoryData = () => {
+ return (
+
+ {authorDetails &&
}
+
+
+ {!verticalShare &&
}
+
+ {visibledCards.map((card) => {
+ return (
+
+ );
+ })}
+ {firstChild}
+
+
+ {secondChild}
+
+
+
+
+ {verticalShare &&
+
+
+
+
+
+ {verticalShare &&
+
+
+
+ {verticalShare &&
+
+
+
+ {verticalShare &&
+
+
+
+ {verticalShare &&
+
+
+
+ {verticalShare && children
;
+
+const storyElementsConfig = {
+ summary: {},
+ blurb: {},
+ blockquote: {},
+ quote: {},
+ "also-read": {},
+ "q-and-a": {},
+ question: {},
+ answer: {},
+};
+
+const templateConfig = {
+ theme: "#ffffff",
+ sort: "image-first",
+ noOfVisibleCards: -1,
+ publishedDetails: {
+ enablePublishedTime: true,
+ enableUpdatedTime: false,
+ showReadTime: true,
+ },
+ asideCollection: {
+ data: collection,
+ config: {
+ collectionNameBorderColor: "#3a9fdd",
+ title: "Trending",
+ theme: "#ffffff",
+ adSlot: [{ type: "ad", component: configurableSlot }],
+ },
+ },
+ authorDetails: {
+ template: "default",
+ opts: {
+ showBio: false,
+ showImage: true,
+ showName: true,
+ },
+ },
+};
+
+beforeEach(() => {
+ mockIntersectionObserver();
+});
+
+describe("Text Story Templates", () => {
+ it("Should render text story template with image full-bleed", () => {
+ const config = { ...templateConfig, imageRender: "fullBleed" };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "text-story-default-full-bleed" }).prop("className")).toMatch(/fullBleed/);
+ });
+
+ it("Should render text story template with in container image", () => {
+ const config = { ...templateConfig, templateType: "hero-priority-center", imageRender: "container" };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "text-story-hero-priority-center-container" }).prop("className")).toMatch(
+ /container/
+ );
+ });
+
+ it("Should render hero priority center align template", () => {
+ const config = { ...templateConfig, templateType: "hero-priority-center", imageRender: "container" };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "text-story-hero-priority-center-container" }).prop("className")).toMatch(
+ /hero-priority-center/
+ );
+ expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
+ });
+
+ it("Should render hero priority left align template", () => {
+ const config = { ...templateConfig, templateType: "default", imageRender: "container" };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "text-story-default-container" }).prop("className")).toMatch(/default/);
+ expect(wrapper.find("SideColumn").length).toEqual(1);
+ });
+
+ it("Should render headline hero priority template", () => {
+ const config = { ...templateConfig, templateType: "headline-hero-priority", imageRender: "container" };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "text-story-headline-hero-priority-container" }).prop("className")).toMatch(
+ /headline-hero-priority/
+ );
+ expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
+ });
+
+ it("Should render hero vertical priority template", () => {
+ const config = { ...templateConfig, templateType: "hero-vertical-priority", imageRender: "container" };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "text-story-hero-vertical-priority-container" }).prop("className")).toMatch(
+ /hero-vertical-priority/
+ );
+ expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
+ });
+
+ it("Should render headline priority template", () => {
+ const config = { ...templateConfig, templateType: "headline-priority" };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "text-story-headline-priority" }).prop("className")).toMatch(
+ /headline-priority/
+ );
+ expect(wrapper.find("SideColumn").length).toEqual(1);
+ });
+
+ it("Should render headline overlay priority template", () => {
+ const config = { ...templateConfig, templateType: "headline-overlay-priority" };
+ const wrapper = mount(
+
+
+ );
+ expect(wrapper.find({ "data-test-id": "text-story-headline-overlay-priority" }).prop("className")).toMatch(
+ /headline-overlay-priority/
+ );
+ expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
+ });
+});
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/README.md b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/README.md
new file mode 100644
index 000000000..fccb68dfa
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/README.md
@@ -0,0 +1,31 @@
+# Video Story Template
+
+Video story template is a basic component used to represent a video story.
+
+## Usage
+
+## Default Video Story
+
+```jsx
+
+
+```
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/index.js
new file mode 100644
index 000000000..81eb70e4d
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/index.js
@@ -0,0 +1,240 @@
+import { SocialShare } from "@quintype/components";
+import PropTypes from "prop-types";
+import React from "react";
+import { useSelector } from "react-redux";
+import get from "lodash/get";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import { Video } from "../../../Atoms/StoryElements/Video";
+import AsideCollection from "../../AsideCollection";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { StateProvider } from "../../../SharedContext";
+import "./video-story.m.css";
+
+const VideoStoryTemplate = ({
+ story = {},
+ config = {},
+ storyElementsConfig,
+ widgetComp,
+ adComponent,
+ firstChild,
+ secondChild,
+}) => {
+ const heroVideo =
+ story.cards
+ .flatMap((card) => card["story-elements"])
+ .find(
+ ({ type, subtype }) => type === "youtube-video" || (type === "jsembed" && subtype === "dailymotion-video")
+ ) || {};
+
+ const {
+ theme = "",
+ authorCard = {},
+ authorDetails = {
+ template: "default",
+ },
+ asideCollection = {},
+ templateType = "",
+ noOfVisibleCards = -1,
+ publishedDetails = {},
+ verticalShare = "",
+ shareIconType = "plain-color-svg",
+ premiumStoryIconConfig = {},
+ } = config;
+
+ const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+ const storyId = get(story, ["id"], "");
+ const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
+
+ const HeroVideo = () => {
+ return (
+
+
+ );
+ };
+
+ const SocialShareComponent = () => {
+ return (
+
+
+ );
+ };
+
+ const HeaderCard = () => {
+ return (
+
+
+ );
+ };
+
+ const StoryData = () => {
+ return (
+
+
+
+
+ {!verticalShare &&
}
+
+ {visibledCards.map((card) => {
+ return (
+
+ );
+ })}
+ {firstChild}
+
+
+ {secondChild}
+
+
+ {verticalShare &&
+
+
+
+
+
+ {verticalShare &&
+
+
+ {verticalShare &&
+ {getStoryTemplate(templateType)}
+
+ );
+};
+
+VideoStoryTemplate.propTypes = {
+ story: PropTypes.object,
+ config: PropTypes.shape({
+ templateType: PropTypes.string,
+ authorCard: PropTypes.object,
+ asideCollection: PropTypes.object,
+ }),
+ firstChild: PropTypes.node,
+ secondChild: PropTypes.node,
+ storyElementsConfig: PropTypes.object,
+ adComponent: PropTypes.func,
+ widgetComp: PropTypes.func,
+};
+
+export default StateProvider(VideoStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/stories.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/stories.js
new file mode 100644
index 000000000..1121032f3
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/stories.js
@@ -0,0 +1,204 @@
+import { boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { generateCollection, generateStory } from "../../../Fixture";
+import { slotData } from "../../../Fixture/slot-config";
+import VideoStoryTemplate from "./index";
+import Readme from "./README.md";
+
+const story = generateStory();
+const collection = generateCollection({ stories: 4 });
+const collectionNameDefaultValue = "#3a9fdd";
+const collectionNameBorderColorLabel = "Aside Collection Name Border Color";
+
+const shareType = {
+ "Vertical Share": "sticky",
+ "Horizontal Share": "",
+};
+
+const label = "BG Color";
+const defaultvalue = "#ffffff";
+const iconTypeOptions = {
+ "Circular Color Svg": "circular-color-svg",
+ "Circular Plain Svg": "circular-plain-svg",
+ "Plain Svg": "plain-svg",
+ "Plain Color Svg": "plain-color-svg",
+ "Square Svg": "square-svg",
+};
+
+const configurableSlot = () => {
+ return
+
{tagName}
+
{tagDescription}
+
+ loadMore(opts)}
+ navigate={() => navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+ );
+ };
+
+ return (
+
+
+
+ {isAdWidgetEnabled && !hideFirstCard ? (
+ <>
+
+
+ {stories.slice(0, 4).map((story) => (
+
+
{adWidgetSlot}
+
+
+ {stories.slice(4).map((story) => (
+
+
+ ) : (
+
+ {stories.map((story) => (
+
+ )}
+ {getLoadMore({ isLoading, stories, getMoreStories, subsequentLoadCount })}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ slotConfig: [{ type: "ad", component: configurableSlot }],
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return
+
+
+
+
+
+
+
+
+ {secondStory && (
+
+ )}
+
+
+ {restOftheStories.length > 0 &&
+ restOftheStories.slice(0, 6).map((item) => {
+ return (
+
+
+ {restOftheStories.length > 0 &&
+ restOftheStories.slice(6, 10).map((item) => {
+ return (
+
+ );
+ })}
+
{getSlot(type, component, () => storyCallBack(restOftheStories))}
+
+
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border Level", borderOptions),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", false),
+ showTime: boolean("Timestamp disable", false),
+ showRowTitle: boolean("Row title", true),
+ showSubheadline: boolean("show sub headline", false),
+ slotConfig: [{ type: "ad", component: configurableSlot }],
+ showReadTime: boolean("Read time", true),
+ };
+
+ return
+ loadMore(opts)}
+ navigate={() => navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+ );
+ };
+
+ const storyCard = (story) => {
+ return (
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+ {storyItems.slice(0, 2).map((story, index) => {
+ return
{storyCard(story)} ;
+ })}
+ {storyItems.length < 2 &&
}
+ {adWidgetSlot}
+ {storyItems.slice(2).map((story, index) => {
+ return
{storyCard(story)} ;
+ })}
+
+ {getLoadMore({ isLoading, storyItems, getMoreStories, subsequentLoadCount })}
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ slotConfig: [{ type: "story", component: configurableSlot }],
+ showRowTitle: boolean("Row title", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return
+
+ );
+ };
+
+ const storyCardWidthoutBorder = (story) => {
+ return (
+
+
+ );
+ };
+
+ const storySlot = () => {
+ return (
+
+ {storyItems.slice(5, 6).map((story, index) => {
+ return (
+
+ {storyCardComponent(story)}
+
+ );
+ })}
+ {storyItems.slice(6, 7).map((story, index) => {
+ return (
+
+ {storyCardWidthoutBorder(story)}
+
+ );
+ })}
+
+
+
+
+
+ {storyItems.slice(0, 1).map((story, index) => {
+ return (
+
+
+ );
+ })}
+
+
+
+ {storyItems.slice(1, 3).map((story, index) => {
+ return (
+
+ {storyCardComponent(story)}
+
+ );
+ })}
+ {storyItems.slice(3, 4).map((story, index) => {
+ return (
+
+ {storyCardWidthoutBorder(story)}
+
+ );
+ })}
+
+
+ {storyItems.slice(4, 5).map((story, index) => {
+ return (
+
+ {storyCardComponent(story)}
+
+ );
+ })}
+
{slot}
+
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ slotConfig: [{ type: "story", component: configurableSlot }],
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return
+
+ );
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
{getSlot(type, component, storySlot)}
+
+
+
+
+
+
+
+ {items.slice(3, 6).map((story, index) => (
+
+
+
+
+ ))}
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ slotConfig: [{ type: "story", component: configurableSlot }],
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return
+
+
+
+ {otherStories.slice(0, 3).map((story) => (
+
+ ))}
+
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+
+ {childCollections
+ .slice(0, collectionCount)
+ .map((childCollection, index) => getChildCollectionData(childCollection, config, index, qtConfig))}
+ {!isSlotTypeStory && adWidgetComponent &&
{adWidgetComponent()}
}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color("Collection Name Border Color", "#c70000"),
+ theme: color("BG Color", "#ffffff"),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ borderColor: color("Section Tag Border Color", "#3a9fdd"),
+ withSeparator: boolean("Separator", true),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates, "borderLeft"),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ slotConfig: [{ type: "story", component: configurableSlot }],
+ };
+
+ return
+
+
+
+
+
+
+
+
+
+ {items.slice(1, 4).map((story, index) => {
+ if (index === 2) {
+ return (
+
+
+
+
+ );
+ }
+ return (
+
+
+
+
+ );
+ })}
+
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return
+
+
+
+ {restStories.slice(0, 3).map((story, index) => (
+
+ {showBullet && (
+
+
+
+ ))}
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color("Collection Name Border Color", "#3a9fdd"),
+ borderColor: color("Section Tag Border Color", "#3a9fdd"),
+ theme: color("color", "#ffffff"),
+ showBorder: boolean("Show Border", true),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("Show Section", true),
+ showAuthor: boolean("Show Author", true),
+ showTime: boolean("Show Time", true),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ showBullet: boolean("Show Bullet", true),
+ customBulletColor: color("Bullet Color", ""),
+ bulletColorType: optionalSelect("Bullet Color Type", bulletColorTypeTemplates),
+ };
+
+ return
+
+
+
+
+
+
+ {items.slice(1, 5).map((story, index) => {
+ return (
+
+
+
+
+ );
+ })}
+ {adWidgetSlot ? (
+
{adWidgetSlot}
+ ) : (
+ items.slice(5, 7).map((story, index) => {
+ return (
+
+
+
+
+ );
+ })
+ )}
+
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return {story()}
)
+ .add("With AD", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ slotConfig: [{ type: "ad", component: configurableSlot }],
+ };
+
+ return
+
+
+
+ );
+ });
+
+ const slot = getSlot(type, component, storySlot);
+ return (
+
+
+
+
+
+
+
+ {otherStories.slice(0, 3).map((story, index) => {
+ return (
+
+
+
+
+ );
+ })}
+
+
{slot}
+
+
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ template="NavigateToPage"
+ />
+ {story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ slotConfig: [{ type: "story", component: configurableSlot }],
+ showSection: boolean("Section tag", true),
+ showAuthor: boolean("Author", true),
+ showTime: boolean("Timestamp", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ showButton: boolean("Show button", true),
+ buttonText: text("Button text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ showReadTime: boolean("Read time", true),
+ border: optionalSelect("Border settings", border),
+ };
+ return
+
+
+
+
+
+
+
+ {firstCollectionStories.slice(1, 5).map((story, index) => {
+ return (
+
+
+
+
+ );
+ })}
+
+
navigateTo(dispatch, generateNavigateSlug(childCollections[0], qtConfig))}
+ qtConfig={qtConfig}
+ />
+
+
+
+
+
+ {sidebarCollectionStories.slice(0, 4).map((story) => (
+
+
+ ))}
+
+
+
+
+ {adWidgetSlot ? (
+
{adWidgetSlot}
+ ) : (
+ sidebarCollectionStories.slice(5, 8).map((story) => (
+
+
+ ))
+ )}
+
+
+
navigateTo(dispatch, generateNavigateSlug(childCollections[1], qtConfig))}
+ qtConfig={qtConfig}
+ />
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color("Collection Name Border Color", "#3a9fdd"),
+ borderColor: color("Section Tag Border Color", "#3a9fdd"),
+ theme: color("color", "#ffffff"),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("Show Section", true),
+ showAuthor: boolean("Show Author", true),
+ showTime: boolean("Show Time", true),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ slotConfig: [{ type: "ad", component: configurableSlot }],
+ };
+
+ return
+
+
+
+
+
+
+
+
+
+ {items.slice(1, 3).map((story, index) => {
+ if (index === 1) {
+ return (
+
+
+
+
+ );
+ } else
+ return (
+
+
+
+
+ );
+ })}
+
+
+
navigateTo(dispatch, url)}
+ qtConfig={qtConfig}
+ />
+ {footerSlotComp}
+
+
{story()}
)
+ .add("Default", () => {
+ const contextConfig = {
+ collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+ borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+ theme: color(label, defaultvalue),
+ border: optionalSelect("Border", borderTemplate),
+ collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+ sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+ showSection: boolean("section disable", true),
+ showAuthor: boolean("Author disable", true),
+ showTime: boolean("Timestamp disable", true),
+ footerButton: optionalSelect("Footer Button", footerButton),
+ buttonText: text("Footer text", "Read More"),
+ showRowTitle: boolean("Row title", true),
+ footerSlotConfig: { footerSlot: footerSlot },
+ showButton: boolean("Show button", true),
+ showReadTime: boolean("Read time", true),
+ };
+
+ return
+
+ );
+
+export const useStateValue = () => useContext(StateContext);
diff --git a/app/isomorphic/arrow/components/Svgs/Loading/loading.js b/app/isomorphic/arrow/components/Svgs/Loading/loading.js
new file mode 100644
index 000000000..1fb520e4e
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/Loading/loading.js
@@ -0,0 +1,134 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./loading.m.css";
+
+export const Loading = ({ width = 40, height = 30, iconColor = "#99B0CB" }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+Facebook.propTypes = {
+ color: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/instagram.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/instagram.js
new file mode 100644
index 000000000..16163c849
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/instagram.js
@@ -0,0 +1,26 @@
+import React from "react";
+
+export const Instagram = () => {
+ return (
+
+
+
+
+
+
+ );
+};
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/linkedin.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/linkedin.js
new file mode 100644
index 000000000..0c2b09506
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/linkedin.js
@@ -0,0 +1,16 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const LinkedIn = ({ color = "#0077B5" }) => {
+ return (
+
+
+ );
+};
+LinkedIn.propTypes = {
+ color: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/pinterest.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/pinterest.js
new file mode 100644
index 000000000..de95b5f9b
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/pinterest.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+export const Pinterest = () => {
+ return (
+
+
+ );
+};
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/twitter.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/twitter.js
new file mode 100644
index 000000000..ffd784a64
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/twitter.js
@@ -0,0 +1,16 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const Twitter = ({ color = "#1CB7EB" }) => {
+ return (
+
+
+ );
+};
+Twitter.propTypes = {
+ color: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/whatsapp.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/whatsapp.js
new file mode 100644
index 000000000..f9f1369bc
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/whatsapp.js
@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const WhatsApp = ({ color = "#4AC959" }) => {
+ return (
+
+
+ );
+};
+
+WhatsApp.propTypes = {
+ color: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/youtube.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/youtube.js
new file mode 100644
index 000000000..3b812e160
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/youtube.js
@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const Youtube = ({ color = "#F61C0D" }) => {
+ return (
+
+
+ );
+};
+Youtube.propTypes = {
+ color: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/caret-right.svg b/app/isomorphic/arrow/components/Svgs/caret-right.svg
new file mode 100644
index 000000000..dc4d38619
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/caret-right.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/app/isomorphic/arrow/components/Svgs/clock-icon.js b/app/isomorphic/arrow/components/Svgs/clock-icon.js
new file mode 100644
index 000000000..db257b544
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/clock-icon.js
@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const ClockIcon = ({ color = "#333" }) => {
+ return (
+
+
+ );
+};
+
+ClockIcon.propTypes = {
+ color: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/close-icon.js b/app/isomorphic/arrow/components/Svgs/close-icon.js
new file mode 100644
index 000000000..553ea311f
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/close-icon.js
@@ -0,0 +1,15 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const CloseIcon = ({ color = "#333" }) => {
+ return (
+
+
+
+
+ );
+};
+CloseIcon.propTypes = {
+ color: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/crown.js b/app/isomorphic/arrow/components/Svgs/crown.js
new file mode 100644
index 000000000..b4462b32d
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/crown.js
@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const CrownIcon = ({ height, width, color = "#D8D8D8", positionTop }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+CrownIcon.propTypes = {
+ height: PropTypes.string,
+ width: PropTypes.string,
+ color: PropTypes.string,
+ positionTop: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/fallbackImage.js b/app/isomorphic/arrow/components/Svgs/fallbackImage.js
new file mode 100644
index 000000000..fabe2e795
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/fallbackImage.js
@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const ImageFallbackIcon = ({ width = 40, height = 30, iconColor = "#99B0CB" }) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+ImageFallbackIcon.propTypes = {
+ width: PropTypes.object,
+ height: PropTypes.object,
+ iconColor: PropTypes.object,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/hyperlink.js b/app/isomorphic/arrow/components/Svgs/hyperlink.js
new file mode 100644
index 000000000..94c6728ac
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/hyperlink.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+export const HyperLinkIcon = () => {
+ return (
+
+
+
+
+ );
+};
diff --git a/app/isomorphic/arrow/components/Svgs/key.js b/app/isomorphic/arrow/components/Svgs/key.js
new file mode 100644
index 000000000..de8bb6bf2
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/key.js
@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const KeyIcon = ({ height, width, color = "#D5D5D5", positionTop }) => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+KeyIcon.propTypes = {
+ height: PropTypes.string,
+ width: PropTypes.string,
+ color: PropTypes.string,
+ positionTop: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/left-arrow.js b/app/isomorphic/arrow/components/Svgs/left-arrow.js
new file mode 100644
index 000000000..b24fb7aa3
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/left-arrow.js
@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const LeftArrow = ({ color = "#333" }) => {
+ return (
+
+
+
+
+ );
+};
+
+LeftArrow.propTypes = {
+ color: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/liveicon.js b/app/isomorphic/arrow/components/Svgs/liveicon.js
new file mode 100644
index 000000000..aef20513a
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/liveicon.js
@@ -0,0 +1,14 @@
+import React from "react";
+
+function LiveIcon() {
+ return (
+
+
+ );
+}
+
+export default LiveIcon;
diff --git a/app/isomorphic/arrow/components/Svgs/lock.js b/app/isomorphic/arrow/components/Svgs/lock.js
new file mode 100644
index 000000000..57dbbd5c1
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/lock.js
@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const LockIcon = ({ height, width, color = "#D5D5D5", positionTop }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+LockIcon.propTypes = {
+ height: PropTypes.string,
+ width: PropTypes.string,
+ color: PropTypes.string,
+ positionTop: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/right-arrow.js b/app/isomorphic/arrow/components/Svgs/right-arrow.js
new file mode 100644
index 000000000..3b89a3295
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/right-arrow.js
@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const RightArrow = ({ color = "#333" }) => {
+ return (
+
+
+
+
+ );
+};
+
+RightArrow.propTypes = {
+ color: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/share-icon.js b/app/isomorphic/arrow/components/Svgs/share-icon.js
new file mode 100644
index 000000000..47b111b52
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/share-icon.js
@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const ShareIcon = ({ color = "#0D0D0D" }) => {
+ return (
+
+
+ );
+};
+
+ShareIcon.propTypes = {
+ color: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/star.js b/app/isomorphic/arrow/components/Svgs/star.js
new file mode 100644
index 000000000..285c2b812
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/star.js
@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const StarIcon = ({ width, height, color = "#D5D5D5", positionTop = "" }) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+StarIcon.propTypes = {
+ height: PropTypes.string,
+ width: PropTypes.string,
+ color: PropTypes.string,
+ positionTop: PropTypes.string,
+};
diff --git a/app/isomorphic/arrow/components/Svgs/user-fallback-icon.js b/app/isomorphic/arrow/components/Svgs/user-fallback-icon.js
new file mode 100644
index 000000000..a134dc0e2
--- /dev/null
+++ b/app/isomorphic/arrow/components/Svgs/user-fallback-icon.js
@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const UserFallbackIcon = ({ width = 120, height = 120 }) => {
+ return (
+
+
+ );
+};
+
+UserFallbackIcon.propTypes = {
+ width: PropTypes.object,
+ height: PropTypes.object,
+};
diff --git a/app/isomorphic/arrow/components/Typography/README.md b/app/isomorphic/arrow/components/Typography/README.md
new file mode 100644
index 000000000..f4e416152
--- /dev/null
+++ b/app/isomorphic/arrow/components/Typography/README.md
@@ -0,0 +1,7 @@
+# Typography for Arrow
+
+A modular typescale is maintained by the library as a set of standard defaults for any type related styling.
+
+The following are the default implementations by Arrow. This can be bypassed by overriding the values in the project that imports `@quintype/arrow`.
+
+
diff --git a/app/isomorphic/arrow/components/Typography/index.js b/app/isomorphic/arrow/components/Typography/index.js
new file mode 100644
index 000000000..9bfecf0e5
--- /dev/null
+++ b/app/isomorphic/arrow/components/Typography/index.js
@@ -0,0 +1,47 @@
+import React from "react";
+import "./style.m.css";
+
+export const Typography = () => {
+ return (
+
+
Typscale
+
+
+ title-h1
+ These violent delights have violent ends.
+
+
+ title-h2
+ These violent delights have violent ends.
+
+
+ title-h3
+ These violent delights have violent ends.
+
+
+ title-h4
+ These violent delights have violent ends.
+
+
+ paragraph
+ These violent delights have violent ends.
+
+
+ paragraph-alt
+ These violent delights have violent ends.
+
+
+ author name
+ These violent delights have violent ends.
+
+
+ section-tag
+ These violent delights have violent ends.
+
+
+ timestamp
+ These violent delights have violent ends.
+
+
{story()}
)
+ .add("Typography", () => {
+ return {story()}
)
+ .addParameters({
+ options: {
+ showPanel: false,
+ },
+ readme: {
+ content: readme,
+ codeTheme: "a11y-dark",
+ },
+ })
+ .add("Getting Started", () =>
);
diff --git a/app/isomorphic/arrow/hydration-component/index.js b/app/isomorphic/arrow/hydration-component/index.js
new file mode 100644
index 000000000..0e158e034
--- /dev/null
+++ b/app/isomorphic/arrow/hydration-component/index.js
@@ -0,0 +1,37 @@
+import React, { useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+import useNearScreen from "./useNearScreen";
+
+import PropTypes from "prop-types";
+
+const EMPTY_HTML = { __html: "" };
+const isServer = typeof window === "undefined";
+
+export const ProgressiveHydration = (props) => {
+ const { children } = props;
+ const ref = useRef(null);
+ const isNearScreen = useNearScreen({ ref });
+
+ useEffect(() => {
+ const { current: el } = ref;
+ // CLIENT:
+ // If we want to force the hydration OR the element is near screen
+ // then we hydrate the content to get the functionality ready
+ if (isNearScreen) {
+ const action = el.hasChildNodes() ? "hydrate" : "render";
+ ReactDOM[action](children, el);
+ }
+ }, [children, isNearScreen]);
+
+ // SERVER: Just render the content as usual
+ if (isServer) {
+ return {children}
;
+ }
+
+ // CLIENT: Avoid hydration until we say so
+ return
;
+};
+
+ProgressiveHydration.propTypes = {
+ children: PropTypes.element,
+};
diff --git a/app/isomorphic/arrow/hydration-component/useNearScreen.js b/app/isomorphic/arrow/hydration-component/useNearScreen.js
new file mode 100644
index 000000000..d5fc0f14c
--- /dev/null
+++ b/app/isomorphic/arrow/hydration-component/useNearScreen.js
@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+
+let observer;
+const isClient = typeof window !== "undefined";
+
+const hasIntersectionObserverSupport = () => typeof window.IntersectionObserver !== "undefined";
+
+// import intersection observer polyfill only if on client
+// and if not supported by browser
+const getIntersectionObserver = () => {
+ return Promise.resolve(isClient && !hasIntersectionObserverSupport() && import("intersection-observer"));
+};
+
+// options for intersection observer in order to improve the effect
+const intersectionObserverOptions = {
+ root: null, // windows viewport will be used
+ rootMargin: "200px 0px 0px 0px",
+};
+
+const handleIntersect = (entries, observer) => {
+ entries
+ .filter((entry) => entry.isIntersecting)
+ .forEach((entry) => {
+ const { target } = entry;
+ target._onIntersect(observer);
+ });
+};
+
+// get observer from the cache or create a new one
+const getObserver = () =>
+ getIntersectionObserver().then((_) => {
+ if (observer) return observer;
+ if (isClient) {
+ return new window.IntersectionObserver(handleIntersect, intersectionObserverOptions);
+ }
+ });
+
+export default ({ ref }) => {
+ const [show, setShow] = useState(false);
+
+ useEffect(() => {
+ const { current } = ref;
+ if (!current) return;
+ // get observer async and only when needed
+ getObserver().then((observer) => observer.observe(current));
+ // mutate the current target to add a method to be executed when intersecting
+ current._onIntersect = (observer) => {
+ setShow(true);
+ observer.unobserve(current);
+ };
+ // clean observed element when unmounted
+ return () => (current._isSubscribed = false);
+ }, [ref]);
+
+ return show;
+};
diff --git a/app/isomorphic/arrow/index.js b/app/isomorphic/arrow/index.js
new file mode 100644
index 000000000..f2bc3256c
--- /dev/null
+++ b/app/isomorphic/arrow/index.js
@@ -0,0 +1,91 @@
+/**
+ * IMPORTANT NOTE:
+ * Please make sure to make a corresponding entry in entry-points.js
+ * every export here needs to have a corresponding entry in entry-points.js
+ */
+
+// ATOMS
+export { Author } from "./components/Atoms/Author";
+export { AuthorWithTime } from "./components/Atoms/AuthorWithTimestamp";
+export { CollectionName } from "./components/Atoms/CollectionName";
+export { Headline } from "./components/Atoms/Headline";
+export { HeroImage } from "./components/Atoms/HeroImage";
+export { LoadmoreButton } from "./components/Atoms/Loadmore";
+export { ExtendedLoadMore } from "./components/Atoms/ExtendedLoadMore";
+export { SectionTag } from "./components/Atoms/SectionTag";
+export { Subheadline } from "./components/Atoms/Subheadline";
+export { TimeStamp } from "./components/Atoms/TimeStamp";
+export { LoadMoreTarget } from "./components/Atoms/LoadMoreTarget";
+export { ScrollSnap } from "./components/Atoms/ScrollSnap";
+
+// STORY ELEMENTS
+export { Text } from "./components/Atoms/StoryElements/Text";
+export { Quote } from "./components/Atoms/StoryElements/Quote";
+export { Blurb } from "./components/Atoms/StoryElements/Blurb";
+export { AlsoRead } from "./components/Atoms/StoryElements/AlsoRead";
+export { Summary } from "./components/Atoms/StoryElements/Summary";
+export { BlockQuote } from "./components/Atoms/StoryElements/BlockQuote";
+export { Image } from "./components/Atoms/StoryElements/Image";
+export { Video } from "./components/Atoms/StoryElements/Video";
+export { BigFact } from "./components/Atoms/StoryElements/BigFact";
+export { StoryElement } from "./components/Atoms/StoryElements/StoryElement";
+export { QuestionAnswer } from "./components/Atoms/StoryElements/QuestionAnswer";
+export { ImageGallery } from "./components/Atoms/StoryElements/imageGallery";
+export { Reference } from "./components/Atoms/StoryElements/Reference";
+export { Attachment } from "./components/Atoms/StoryElements/Attachment";
+export { ImageSlideshow } from "./components/Atoms/StoryElements/ImageSlideshow";
+
+// MOLECULES
+export { StoryCard } from "./components/Molecules/StoryCard";
+export { StorycardContent } from "./components/Molecules/StorycardContent";
+export { StoryElementCard } from "./components/Molecules/StoryElementCard";
+export { SocialShareTemplate } from "./components/Molecules/SocialShareTemplate";
+export { default as KeyEvents } from "./components/Molecules/KeyEvents";
+export { PageIntroductionCard } from "./components/Molecules/PageIntroductionCard";
+export { default as PortraitStoryCard } from "./components/Molecules/PortraitStoryCard";
+
+// ROWS
+export { default as FourColGrid } from "./components/Rows/FourColGrid";
+export { default as OneColStoryList } from "./components/Rows/OneColStoryList";
+export { default as ThreeColGrid } from "./components/Rows/ThreeColGrid";
+export { default as TwoColFourStories } from "./components/Rows/TwoColFourStory";
+export { default as TwoColThreeStories } from "./components/Rows/TwoColThreeStory";
+export { default as TwoColSevenStories } from "./components/Rows/TwoColSevenStories";
+export { default as ThreeColSixStories } from "./components/Rows/ThreeColSixStories";
+export { default as ThreeColSevenStory } from "./components/Rows/ThreeColSevenStory";
+export { default as ElevenStories } from "./components/Rows/ElevenStories";
+export { default as CollectionFilter } from "./components/Rows/CollectionFilter";
+export { default as HalfScreenSlider } from "./components/Rows/HalfScreenSlider";
+export { default as FourStorySlider } from "./components/Rows/FourStorySlider";
+export { default as FourStorySliderPortrait } from "./components/Rows/FourStorySliderPortrait";
+export { default as FullScreenSlider } from "./components/Rows/FullScreenSlider";
+export { default as ThreeColFourteenStories } from "./components/Rows/ThreeColFourteenStory";
+export { default as FourColTwelveStories } from "./components/Rows/FourColTwelveStory";
+export { default as TagIntroductionCard } from "./components/Rows/TagIntroductionCard";
+export { default as AuthorIntroductionCard } from "./components/Rows/AuthorIntroductionCard";
+export { default as AuthorsList } from "./components/Rows/AuthorsList";
+export { default as AsideCollection } from "./components/Rows/AsideCollection";
+export { StoryCollection } from "./components/Rows/AsideCollection";
+export { default as VideoStoryTemplate } from "./components/Rows/StoryTemplates/VideoStoryTemplates";
+export { default as TextStoryTemplate } from "./components/Rows/StoryTemplates/TextStoryTemplates";
+export { default as LiveBlogStoryTemplate } from "./components/Rows/StoryTemplates/LiveBlogStorytemplates";
+export { default as ListicleStoryTemplate } from "./components/Rows/StoryTemplates/ListicleStoryTemplates";
+export { default as ListComponent } from "./components/Rows/ListComponent";
+export { default as MagazineEditions } from "./components/Rows/MagazineEditions";
+export { default as MagazineWidget } from "./components/Rows/MagazineWidget";
+export { default as MagazineHeaderCard } from "./components/Rows/MagazineHeaderCard";
+export { default as PhotoStoryTemplates } from "./components/Rows/StoryTemplates/PhotoStoryTemplates";
+export { default as FourColSixteenStories } from "./components/Rows/FourColSixteenStories";
+export { default as FourColFiveStories } from "./components/Rows/FourColFiveStories";
+export { default as TwoColSixStories } from "./components/Rows/TwoColSixStories";
+export { default as TwoColFourStoryHighlight } from "./components/Rows/TwoColFourStoryHighlight";
+export { default as OpinionCollection } from "./components/Rows/OpinionCollection";
+export { default as ThreeColFlexStories } from "./components/Rows/ThreeColFlexStories";
+export { default as SixColSixStories } from "./components/Rows/SixColSixStories";
+export { default as TwoColTenStoriesSidebar } from "./components/Rows/TwoColTenStoriesSidebar";
+export { default as ThreeColTwelveStories } from "./components/Rows/ThreeColTwelveStories";
+export { default as FourTabbedBigStorySlider } from "./components/Rows/FourTabbedBigStorySlider";
+export { default as AlternateCollectionFilter } from "./components/Rows/AlternateCollectionFilter";
+export { default as FourColPortraitStories } from "./components/Rows/FourColPortraitStories";
+export { default as AstrologyCollection } from "./components/Rows/AstrologyCollection";
+export { default as Listicles } from "./components/Rows/Listicles";
diff --git a/app/isomorphic/arrow/utils/testing-utils.js b/app/isomorphic/arrow/utils/testing-utils.js
new file mode 100644
index 000000000..602d12d55
--- /dev/null
+++ b/app/isomorphic/arrow/utils/testing-utils.js
@@ -0,0 +1,8 @@
+export function mockIntersectionObserver() {
+ const mockIntersectionObserver = jest.fn();
+ mockIntersectionObserver.mockReturnValue({
+ observe: jest.fn().mockReturnValue(null),
+ unobserve: jest.fn().mockReturnValue(null),
+ });
+ window.IntersectionObserver = mockIntersectionObserver;
+}
diff --git a/app/isomorphic/arrow/utils/utils.js b/app/isomorphic/arrow/utils/utils.js
new file mode 100644
index 000000000..c9394ddc6
--- /dev/null
+++ b/app/isomorphic/arrow/utils/utils.js
@@ -0,0 +1,330 @@
+import get from "lodash/get";
+import PropTypes from "prop-types";
+import upperCase from "lodash/upperCase";
+import Timeago from "react-timeago";
+import React from "react";
+import lowerCase from "lodash/lowerCase";
+import { format, utcToZonedTime } from "date-fns-tz";
+
+const canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+
+export const sharePageUrl = canUseDOM && window.location.href;
+
+export function truncate(string = "", limit = 60, ellipsis = true) {
+ const putEllipsis = ellipsis ? " ..." : "";
+ return typeof string === "string" && string.length > limit ? string.substring(0, limit) + putEllipsis : string;
+}
+
+export const timestampToFormat = (value, unit, suffix, timestamp, config = {}, languageCode = "en") => {
+ const {
+ showTime = false,
+ isTimeFirst = false,
+ isUpperCase = false,
+ disableMeridiem = false,
+ timeFormat = "12hours",
+ localizedZeroToPad,
+ } = config;
+ const monthList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+ const dateTime = new Date(timestamp);
+ const date = dateTime.getDate().toString().padStart(2, 0);
+
+ const month = monthList[dateTime.getMonth()];
+ let localizedMonth = month;
+ if (isUpperCase) {
+ localizedMonth = upperCase(month);
+ }
+
+ const year = dateTime.getFullYear();
+ const { localizedMeridiem, localizedMonths, direction = "ltr" } = config;
+ const time = formatAMPM(timestamp, timeFormat, localizedZeroToPad, languageCode);
+ let timeWithLocalizedMeridiem = time;
+ let timetoShow;
+
+ if (localizedMonths) {
+ localizedMonth = get(localizedMonths, [lowerCase(month)]) || month;
+ }
+ const localizedDate = Number(date).toLocaleString(languageCode);
+ const localizedYear = year.toLocaleString(languageCode).replace(/,/g, "");
+
+ if (localizedMeridiem) {
+ const isAm = time.includes("am");
+ const { am = "am", pm = "pm" } = localizedMeridiem;
+ timeWithLocalizedMeridiem = (isAm ? time.replace("am", am) : time.replace("pm", pm)) || time;
+ }
+
+ if (direction === "rtl") {
+ timetoShow = showTime ? `${timeWithLocalizedMeridiem}` : "";
+ return `${localizedDate} ${localizedMonth}, ${localizedYear} ${timetoShow} `;
+ } else {
+ if (disableMeridiem) {
+ return `${localizedMonth} ${localizedDate}, ${localizedYear}`;
+ } else if (isTimeFirst) {
+ return `${timeWithLocalizedMeridiem}, ${localizedDate} ${localizedMonth} ${localizedYear}`;
+ } else {
+ timetoShow = showTime ? `, ${timeWithLocalizedMeridiem}` : "";
+ return `${localizedDate} ${localizedMonth}, ${localizedYear}${timetoShow}`;
+ }
+ }
+};
+
+export function formatter(value, unit, suffix, date, config, languageCode) {
+ const showDateForUnits = ["day", "week", "month", "year"];
+ // suffix here refers to ago
+ // unit here refers to seconds, minute, minutes,...
+ const localizedSuffix = get(config, ["localizedPublishTime", suffix]) || suffix;
+ let localizedUnitOfTime;
+
+ if ((unit === "hour" && value > 23) || showDateForUnits.indexOf(unit) !== -1) {
+ return timestampToFormat(value, unit, suffix, date, config, languageCode);
+ } else if (value > 1) {
+ localizedUnitOfTime = get(config, ["localizedPublishTime", `${unit}s`]) || `${unit}s`;
+ return `${value.toLocaleString(languageCode)} ${localizedUnitOfTime} ${localizedSuffix}`;
+ }
+ localizedUnitOfTime = get(config, ["localizedPublishTime", unit]) || unit;
+ return `${value.toLocaleString(languageCode)} ${localizedUnitOfTime} ${localizedSuffix} `;
+}
+
+function formatAMPM(timestamp, timeFormat = "12hours", localizedZeroToPad, languageCode) {
+ const dateTime = new Date(timestamp);
+ let hours = dateTime.getHours();
+ let minutes = dateTime.getMinutes();
+ const ampm = hours >= 12 ? "pm" : "am";
+ hours = hours % 12;
+ hours = hours || 12;
+ const padZero = languageCode === "en" ? "0" : localizedZeroToPad;
+ minutes = minutes < 10 ? padZero + minutes.toLocaleString(languageCode) : minutes.toLocaleString(languageCode);
+ const strTime = hours.toLocaleString(languageCode) + ":" + minutes + " " + ampm.toLocaleString(languageCode);
+ if (timeFormat === "24hours") {
+ return dateTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+ }
+ return strTime;
+}
+
+export const hexToRGB = (hex) => {
+ const r = parseInt(hex.slice(1, 3), 16);
+ const g = parseInt(hex.slice(3, 5), 16);
+ const b = parseInt(hex.slice(5, 7), 16);
+ return { r, g, b };
+};
+
+export const getLuminanceOfColor = (hex) => {
+ const { r, g, b } = hexToRGB(hex);
+ return r * 0.299 + g * 0.587 + b * 0.114;
+};
+
+export const rgbToHex = (color = "rgba(255, 255, 255, 0)") => {
+ const rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+ return rgba && rgba.length === 4
+ ? "#" +
+ ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) +
+ ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) +
+ ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2)
+ : color;
+};
+
+const clientWidths = {
+ mobile: 767,
+ tablet: 1024,
+};
+
+export const clientWidth = (device) => {
+ const foundDeviceWidth = get(clientWidths, device);
+ if (foundDeviceWidth) {
+ return get(global, "document.documentElement.clientWidth") <= foundDeviceWidth;
+ }
+ return false;
+};
+
+export const getTextColor = (theme = "rgb(255,255,255)") => {
+ const isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
+ const getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
+ const textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
+ return textColor;
+};
+
+export function getNumberOfStoriesToShow(numberOfStoriesToShow) {
+ return numberOfStoriesToShow ? parseInt(numberOfStoriesToShow) : 1;
+}
+
+export const getSlot = (type, component, storyCallback, collectionCallback) => {
+ switch (type) {
+ case "story":
+ return storyCallback();
+ case "collection":
+ return collectionCallback();
+ default:
+ return component ? component() : null;
+ }
+};
+
+export const getSlug = (collection, config = {}) => {
+ const { magazineSlug = "", isArchivePage = false } = config;
+ if (isArchivePage) {
+ return `/magazine/archive/${magazineSlug}`;
+ }
+ if (magazineSlug) {
+ return `/magazine/${magazineSlug}/${collection.slug}`;
+ }
+ const isSection = collection.template === "section";
+ if (isSection) {
+ const sectionId = get(collection, ["metadata", "section", "0", "id"], "");
+ const { sections } = config;
+ const section = sections && sections.find((section) => section.id === sectionId);
+ return section ? section["section-url"] : "/";
+ }
+ return `/collection/${collection.slug}`;
+};
+
+export function isExternalStory(story = {}) {
+ const { "story-template": storyTemplate = "", metadata = {} } = story;
+ return storyTemplate === "news-elsewhere" ? get(metadata, ["reference-url"], "") : "";
+}
+
+// Adds target='_blank' attribute to anchor tags if not present
+export const updateContentLinks = (content) => {
+ let updatedContent = content;
+ const anchorTagsList = content.match(/()/g);
+ anchorTagsList &&
+ anchorTagsList.forEach((anchorTag) => {
+ const isTargetPresent = /target=/g.test(anchorTag);
+ if (!isTargetPresent) {
+ updatedContent = updatedContent.replace(
+ anchorTag,
+ ` {
+ return (
+ value == null || // From standard.js: Always use === - but value == null is allowed to check null || undefined
+ (typeof value === "object" && Object.entries(value).length === 0 && value.constructor === Object) ||
+ (typeof value === "string" && value.trim().length === 0)
+ );
+};
+
+export const shapeConfig = PropTypes.shape({
+ "sketches-host": PropTypes.string,
+ "cdn-name": PropTypes.string,
+ "cdn-image": PropTypes.string,
+});
+
+export const shapeStory = PropTypes.shape({
+ headline: PropTypes.string,
+ "last-published-at": PropTypes.number,
+ subheadline: PropTypes.string,
+});
+
+export const getStoryUrl = (story, defaultValue = "") => {
+ return get(story, ["story-template"]) === "news-elsewhere"
+ ? get(story, ["metadata", "reference-url"], "")
+ : story.url || defaultValue;
+};
+
+export const detectComponent = (component, adComponent, widgetComp) => {
+ const { type } = component;
+ switch (type) {
+ case "ad":
+ return adComponent(component);
+ case "widget":
+ return widgetComp(component);
+ default:
+ return null;
+ }
+};
+
+export const facebookMobileVideoResizeFix = () => {
+ if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(max-width: 767px)").matches) {
+ const applyFixAfterTime = 3000;
+ const aspectRatioAdjustmentFactor = 0.7;
+ setTimeout(() => {
+ document
+ .querySelectorAll(".story-element-jsembed.story-element-jsembed-facebook-post span")
+ .forEach((element) => {
+ if (!element.classList.contains("fixed-mobile-fb-video")) {
+ element.style.height = `${Math.ceil(element.offsetHeight * aspectRatioAdjustmentFactor)}px`;
+ element.classList.add("fixed-mobile-fb-video");
+ }
+ });
+ }, applyFixAfterTime);
+ }
+};
+
+export const navigateTo = (dispatch, url = "") => {
+ global.app.navigateToPage(dispatch, url);
+};
+
+export const generateNavigateSlug = (collection = {}, config = {}, customUrlPath) => {
+ if (customUrlPath) {
+ return customUrlPath;
+ }
+ const { magazineSlug = "", isArchivePage = false } = config;
+ if (isArchivePage) {
+ return `/magazine/archive/${magazineSlug}`;
+ }
+ if (magazineSlug) {
+ return `/magazine/${magazineSlug}/${collection.slug}`;
+ }
+ if (collection) {
+ return getSlug(collection, config);
+ }
+ return "/";
+};
+
+export const getCollectionData = async (collectionSlug, mountAtPrefix = "") => {
+ try {
+ const result = await (
+ await fetch(`${mountAtPrefix}/api/v1/collections/${collectionSlug}?item-type=story&limit=6`)
+ ).json();
+ return result;
+ } catch (err) {
+ // eslint-disable-next-line no-console
+ console.error(err);
+ }
+};
+
+export function getAuthorTwitterUrl(author) {
+ const twitterUrl = get(author, ["social", "twitter", "url"], null);
+ const twitterHandle = get(author, ["social", "twitter", "handle"], null);
+
+ if (!author) return "";
+
+ if (twitterUrl) {
+ return twitterUrl;
+ }
+
+ if (twitterHandle && twitterHandle.startsWith("@")) {
+ return `https://www.twitter.com/${twitterHandle.slice(1)}`;
+ }
+
+ if (twitterHandle) {
+ return `https://www.twitter.com/${twitterHandle}`;
+ }
+
+ return "";
+}
+
+export const getTimeStamp = (date, formatter, config = {}, languageCode, template, timezone = null) => {
+ if (timezone && template === "story") {
+ const zonedTime = timezone && utcToZonedTime(date, timezone);
+ const formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", { timeZone: timezone });
+ const timeStamp = timestampToFormat("", "", "", date, config);
+ return {timeStamp} ;
+ }
+
+ return (
+ formatter(value, unit, suffix, date, config, languageCode)}
+ />
+ );
+};
+
+export function removeHtmlTags(str) {
+ if (str === null || str === "") return false;
+ else str = str.toString();
+
+ return str.replace(/(<([^>]+)>)/gi, "");
+}
diff --git a/app/isomorphic/arrow/utils/utils.test.js b/app/isomorphic/arrow/utils/utils.test.js
new file mode 100644
index 000000000..afd72702f
--- /dev/null
+++ b/app/isomorphic/arrow/utils/utils.test.js
@@ -0,0 +1,108 @@
+import { updateContentLinks, isEmpty, sharePageUrl, getAuthorTwitterUrl } from "./utils";
+
+describe("updateContentLinks", () => {
+ it("should add target='_blank' to anchor tags if target attribute not present", () => {
+ const content =
+ "Coronavirus in India News Live Updates: India has recorded the highest single-day spike in fresh cases of novel coronavirus with the number crossing 1,300.";
+ const updatedContent = updateContentLinks(content);
+ expect(updatedContent).toBe(
+ "
Coronavirus in India News Live Updates: India has recorded the highest single-day spike in fresh cases of novel coronavirus with the number crossing 1,300."
+ );
+ });
+});
+
+describe("getAuthorTwitterUrl", () => {
+ const author = {
+ id: 123981,
+ name: "Ravigopal Kesari",
+ slug: "ravigopal-kesari",
+ };
+ const socialData = {
+ social: {
+ twitter: {
+ url: "https://www.twitter.com/sabqorg",
+ handle: "elonmusk",
+ },
+ },
+ };
+ it("should return empty string when the author object doesn't have 'social' key", () => {
+ const authorTwitterLink = getAuthorTwitterUrl(author);
+ expect(authorTwitterLink).toBe("");
+ });
+
+ it("should return twitter url when both url and handle are present", () => {
+ const modifiedAuthor = Object.assign({}, author, socialData);
+ const authorTwitterLink = getAuthorTwitterUrl(modifiedAuthor);
+ expect(authorTwitterLink).toBe("https://www.twitter.com/sabqorg");
+ });
+
+ it("should return twitter handle link when url is not present", () => {
+ const socialData = {
+ social: {
+ twitter: {
+ handle: "elonmusk",
+ },
+ },
+ };
+
+ const modifiedAuthor = Object.assign({}, author, socialData);
+ const authorTwitterLink = getAuthorTwitterUrl(modifiedAuthor);
+ expect(authorTwitterLink).toBe("https://www.twitter.com/elonmusk");
+ });
+
+ it("should strip @ in twitter handle and construct link", () => {
+ const socialData = {
+ social: {
+ twitter: {
+ handle: "@elonmusk",
+ },
+ },
+ };
+ const modifiedAuthor = Object.assign({}, author, socialData);
+ const authorTwitterLink = getAuthorTwitterUrl(modifiedAuthor);
+ expect(authorTwitterLink).toBe("https://www.twitter.com/elonmusk");
+ });
+});
+
+describe("isEmpty", () => {
+ it("should return true if the value is null/ undefined", () => {
+ const value = null;
+ const result = isEmpty(value);
+ expect(result).toBe(true);
+ });
+
+ it("should return true if the value is an empty string", () => {
+ const value = "";
+ const result = isEmpty(value);
+ expect(result).toBe(true);
+ });
+
+ it("should return true if the value is an empty object", () => {
+ const value = {};
+ const result = isEmpty(value);
+ expect(result).toBe(true);
+ });
+
+ it("should return false if the value is not null/ undefined", () => {
+ const value = 6;
+ const result = isEmpty(value);
+ expect(result).toBe(false);
+ });
+
+ it("should return false if the value is not an empty string", () => {
+ const value = "value";
+ const result = isEmpty(value);
+ expect(result).toBe(false);
+ });
+
+ it("should return false if the value is not an empty object", () => {
+ const value = { data: "read" };
+ const result = isEmpty(value);
+ expect(result).toBe(false);
+ });
+
+ it("should return window if the page url is defined", () => {
+ const result = sharePageUrl;
+ expect(result).toBe(window.location.href);
+ });
+});
diff --git a/app/isomorphic/components/collection-templates/arrow-rows/eleven-stories/index.js b/app/isomorphic/components/collection-templates/arrow-rows/eleven-stories/index.js
index f08d78658..a50d6f414 100644
--- a/app/isomorphic/components/collection-templates/arrow-rows/eleven-stories/index.js
+++ b/app/isomorphic/components/collection-templates/arrow-rows/eleven-stories/index.js
@@ -1,16 +1,16 @@
import React from "react";
-import { ElevenStories } from "@quintype/arrow";
+import ElevenStories from "../../../../arrow/components/Rows/ElevenStories";
import { object } from "prop-types";
export const ArrowElevenStories = ({ collection }) => {
const config = {
- buttonText: `${collection.name} News`
+ buttonText: `${collection.name} News`,
};
return
- app.registerPageView({ pageType: "story-page", data: { story: item.story } }, `/${item.story.slug}`)
- }
- onItemFocus={item => console.log(`Story In View: ${item.story.headline}`)}
- />
+
+
+ app.registerPageView({ pageType: "story-page", data: { story: item.story } }, `/${item.story.slug}`)
+ }
+ onItemFocus={(item) => console.log(`Story In View: ${item.story.headline}`)}
+ />
+
);
}
StoryPage.propTypes = {
data: shape({
- story: object
- })
+ story: object,
+ }),
};
export const StoryPagePreview = WithPreview(StoryPage, (data, story) =>
Object.assign({}, data, {
story,
- relatedStories: Array(5).fill(story)
+ relatedStories: Array(5).fill(story),
})
);
diff --git a/app/isomorphic/components/pages/tag.js b/app/isomorphic/components/pages/tag.js
index 582369b99..3722cb188 100644
--- a/app/isomorphic/components/pages/tag.js
+++ b/app/isomorphic/components/pages/tag.js
@@ -2,19 +2,19 @@ import get from "lodash/get";
import React, { useState } from "react";
import PropTypes from "prop-types";
import { useSelector } from "react-redux";
-import { OneColStoryList } from "@quintype/arrow";
+import OneColStoryList from "../../arrow/components/Rows/OneColStoryList";
import { DfpComponent } from "../ads/dfp-component";
import { getLoadMoreStories } from "../utils";
-const TagPage = props => {
+const TagPage = (props) => {
// will be getting initially 9 stories, but showing only 8 for loadmore functionality
- const adConfig = useSelector(state => get(state, ["qt", "config", "ads-config", "slots", "listing_page_ads"], {}));
+ const adConfig = useSelector((state) => get(state, ["qt", "config", "ads-config", "slots", "listing_page_ads"], {}));
const [storiesToRender, setStoriesToRender] = useState(8);
const [tagPageStories, setStories] = useState(props.data.stories);
const collection = {
- items: tagPageStories.slice(0, storiesToRender)
+ items: tagPageStories.slice(0, storiesToRender),
};
const getMoreStories = async (offset, limit) => {
@@ -26,7 +26,7 @@ const TagPage = props => {
setStories: setStories,
storiesToRender: storiesToRender,
setStoriesToRender: setStoriesToRender,
- stories: tagPageStories
+ stories: tagPageStories,
});
};
@@ -52,5 +52,5 @@ const TagPage = props => {
export { TagPage };
TagPage.propTypes = {
- data: PropTypes.object
+ data: PropTypes.object,
};
diff --git a/app/isomorphic/components/story-grid.js b/app/isomorphic/components/story-grid.js
index 73734671c..31b94bda5 100644
--- a/app/isomorphic/components/story-grid.js
+++ b/app/isomorphic/components/story-grid.js
@@ -1,13 +1,13 @@
import React from "react";
import { useSelector } from "react-redux";
-import get from "lodash.get";
+import get from "lodash/get";
import { Link, ResponsiveImage } from "@quintype/components";
import { shape, string, object, integer, arrayOf } from "prop-types";
import "./story-grid.m.css";
function StoryGridStoryItem(props) {
- const showImagePlaceholder = useSelector(state => get(state, ["qt", "config", "showPlaceholder"]));
+ const showImagePlaceholder = useSelector((state) => get(state, ["qt", "config", "showPlaceholder"]));
const getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
return (
@@ -36,12 +36,12 @@ const storyPropType = shape({
"hero-image-s3-key": string,
"hero-image-metadata": object,
headline: string,
- "author-name": string
+ "author-name": string,
});
StoryGridStoryItem.propTypes = {
story: storyPropType,
- position: integer
+ position: integer,
};
export function StoryGrid({ stories = [] }) {
@@ -59,5 +59,5 @@ export function StoryGrid({ stories = [] }) {
}
StoryGrid.propTypes = {
- stories: arrayOf(storyPropType)
+ stories: arrayOf(storyPropType),
};
diff --git a/app/isomorphic/components/story-templates/index.js b/app/isomorphic/components/story-templates/index.js
new file mode 100644
index 000000000..fb401dfe0
--- /dev/null
+++ b/app/isomorphic/components/story-templates/index.js
@@ -0,0 +1,7 @@
+import TextStory from "./text-story";
+import LiveBlogStory from "./live-blog";
+import ListicleStory from "./listicle-story";
+import PhotoStory from "./photo-story";
+import VideoStory from "./video-story";
+
+export { TextStory, LiveBlogStory, ListicleStory, PhotoStory, VideoStory };
diff --git a/app/isomorphic/components/story-templates/listicle-story/index.js b/app/isomorphic/components/story-templates/listicle-story/index.js
new file mode 100644
index 000000000..961139dd8
--- /dev/null
+++ b/app/isomorphic/components/story-templates/listicle-story/index.js
@@ -0,0 +1,13 @@
+import React from "react";
+import ListicleStoryTemplate from "../../../arrow/components/Rows/StoryTemplates/ListicleStoryTemplates";
+import { object } from "prop-types";
+
+const ListicleStory = ({ story }) => {
+ return
+
+
<%_ if(!isProduction) { _%>
