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

package/src/components/Rows/StoryTemplates/PhotoStoryTemplates/photo-story.test.js

@@ -0,0 +1,144 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { generateStory, generateCollection, generateStore } from "../../../Fixture";
+import PhotoStory from "./index";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { Provider } from "react-redux";
+import { mockIntersectionObserver } from "../../../../utils/testing-utils";
+
+const story = generateStory("photo-story");
+const collection = generateCollection({ stories: 4 });
+const configurableSlot = () => {
+  return <AdPlaceholder height="250px" width="300px" />;
+};
+
+const child = <div>children</div>;
+
+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(
+      <Provider store={generateStore}>
+        <PhotoStory
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    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(
+      <Provider store={generateStore}>
+        <PhotoStory
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    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(
+      <Provider store={generateStore}>
+        <PhotoStory
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    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(
+      <Provider store={generateStore}>
+        <PhotoStory
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    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(
+      <Provider store={generateStore}>
+        <PhotoStory
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "photo-story-headline-priority-container" }).prop("className")).toMatch(
+      /headline-priority/
+    );
+  });
+});

package/src/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css

@@ -0,0 +1,175 @@
+@import "../../../../../assets/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);
+}

package/src/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 <AdPlaceholder height="250px" width="300px" />;
+};
+
+withStore("Rows/Story Templates/Photo Story Template", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}).add("Default", () => {
+  const templateConfig = {
+    shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
+    verticalShare: optionalSelect("Share Type", shareType),
+    theme: color(label, defaultvalue),
+    noOfVisibleCards: -1,
+    showSection: boolean("Show Section Tag", true),
+    templateType: optionalSelect("Template Options", templates),
+    imageRender: optionalSelect("image Options", imageTypeOptions),
+    publishedDetails: {
+      enablePublishedTime: boolean("Show Published Time", true),
+      enableUpdatedTime: boolean("Show Updated Time", false),
+      showReadTime: boolean("Read time", true)
+    },
+    authorDetails: {
+      template: optionalSelect("temp", authorTemplate),
+      opts: {
+        showBio: boolean("bio", true),
+        showImage: boolean("image", true),
+        showName: boolean("Author Name", true)
+      }
+    },
+    premiumStoryIconConfig: {
+      iconColor: "#F7B500",
+      iconType: "star",
+      enablePremiumStoryIcon: true
+    },
+    asideCollection: {
+      data: collection,
+      config: {
+        collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+        title: text("Aside Collection Title", "Trending"),
+        theme: color(label, defaultvalue),
+        adSlot: [{ type: "ad", component: configurableSlot }],
+        showAuthor: boolean("Author", true),
+        showTime: boolean("Timestamp", true)
+      },
+      slots: slotData
+    }
+  };
+
+  return (
+    <div>
+      <PhotoStory
+        story={story}
+        config={templateConfig}
+        storyElementsConfig={storyElementsConfig}
+        adComponent={configurableSlot}
+        widgetComp={configurableSlot}
+        firstChild={<AdPlaceholder height="250px" width="300px" />}
+        secondChild={<AdPlaceholder height="250px" width="300px" />}
+      />
+    </div>
+  );
+});

package/src/components/Rows/StoryTemplates/TextStoryTemplates/README.md

@@ -0,0 +1,49 @@
+# Text Story Template
+
+Text story template is a basic component used to represent a text story.
+
+## Usage
+
+## Hero Priority Left Align text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Hero Priority Center Align Text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Headline Hero Priority Text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Hero Vertical Priority Text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Headline Priority Text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Hero Overlay Priority Text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Template with Children
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig}>
+  <Children />
+</TextStoryTemplate>
+```

package/src/components/Rows/StoryTemplates/TextStoryTemplates/index.js

@@ -0,0 +1,69 @@
+import PropTypes from "prop-types";
+import React from "react";
+import kebabCase from "lodash.kebabcase";
+import { StateProvider } from "../../../SharedContext";
+import { StoryTemplate } from "./templates";
+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 dataTestId = supportImageType[templateType]
+    ? `text-story-${templateType}-${kebabCase(supportImageType[templateType])}`
+    : `text-story-${templateType}`;
+  return (
+    <div
+      data-test-id={dataTestId}
+      className="arrow-component arr-story-grid arr--content-wrapper arr--text-story-template-wrapper"
+      styleName={`${templateType} ${verticalShare} ${supportImageType[templateType] || ""} ${sortOption}`}
+      style={{ backgroundColor: theme }}>
+      <StoryTemplate
+        story={story}
+        config={config}
+        storyElementsConfig={storyElementsConfig}
+        adComponent={adComponent}
+        widgetComp={widgetComp}
+        firstChild={firstChild}
+        secondChild={secondChild}
+      />
+    </div>
+  );
+};
+
+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);

package/src/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 <AdPlaceholder height="250px" width="300px" />;
+};
+
+const sortFirstOptions = {
+  "Headline First": "headline-first",
+  "Image First": "image-first"
+};
+
+const shareType = {
+  "Vertical Share": "sticky",
+  "Horizontal Share": ""
+};
+
+withStore(
+  "Rows/Story Templates/Text Story Template",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+).add("default", () => {
+  const templateConfig = {
+    shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
+    verticalShare: optionalSelect("Share Type", shareType),
+    theme: color("BG Color", "#ffffff"),
+    imageRender: optionalSelect("Image Type", imageTypeOptions),
+    sort: optionalSelect("Sort Options", sortFirstOptions),
+    noOfVisibleCards: -1,
+    showSection: boolean("Show Section Tag", true),
+    templateType: optionalSelect("Template Options", templates),
+    publishedDetails: {
+      enablePublishedTime: boolean("Show Published Time", true),
+      enableUpdatedTime: boolean("Show Updated Time", false),
+      showReadTime: boolean("Read time", true)
+    },
+    premiumStoryIconConfig: {
+      iconColor: "#F7B500",
+      iconType: "star",
+      enablePremiumStoryIcon: true
+    },
+    asideCollection: {
+      data: collection,
+      config: {
+        collectionNameBorderColor: color("Aside Collection Name Border Color", "#3a9fdd"),
+        title: text("Aside Collection Title", "Trending"),
+        theme: color("BG Color", "#ffffff")
+      },
+      slots: slotData
+    },
+    authorDetails: {
+      template: optionalSelect("Author Template Options", authorTemplate, "default"),
+      opts: {
+        showBio: false,
+        showImage: true,
+        showName: true
+      }
+    }
+  };
+  return (
+    <TextStoryTemplate
+      story={story}
+      config={templateConfig}
+      storyElementsConfig={storyElementsConfig}
+      adComponent={configurableSlot}
+      widgetComp={configurableSlot}
+      firstChild={<AdPlaceholder height="250px" width="300px" />}
+      secondChild={<AdPlaceholder height="250px" width="300px" />}
+    />
+  );
+});