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

package/src/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css

@@ -1,320 +0,0 @@
-@import "../../../../../assets/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;
-  padding-right: 2px;
-  @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: 0 var(--arrow-spacing-xxs) 0 0;
-  }
-}
-
-.card-share {
-  display: flex;
-  justify-content: space-between;
-}
-
-.live-icon {
-  border-radius: 50%;
-  margin: 0 var(--arrow-fs-xs) 0 0;
-  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: 6px;
-  @include tablet {
-    margin-bottom: var(--arrow-spacing-s);
-  }
-}
-
-.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: 6px 0;
-  @include tablet {
-    margin: var(--arrow-spacing-s) 0;
-  }
-}
-
-.share-cards {
-  margin: 6px 0 var(--arrow-spacing-m);
-  @include desktop {
-    margin: var(--arrow-spacing-s) 0 var(--arrow-spacing-m);
-  }
-}
-
-.share-cards.dark {
-  border-bottom: 1px solid var(--arrow-c-mono5);
-}
-
-.share-cards.light {
-  border-bottom: 1px solid var(--arrow-c-invert-mono5);
-}
-
-.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);
-}
-
-.card-share :global(.desktop-share-wrapper) {
-  max-width: 42px;
-}
-
-.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;
-  }
-  .time-wrapper > time {
-    direction: rtl;
-  }
-  .time-wrapper.rtl-date-time > time {
-    direction: ltr;
-  }
-
-  .live-icon {
-    margin: 0 0 0 var(--arrow-fs-xs);
-  }
-
-  .time-wrapper {
-    svg {
-      margin: 0 0 0 var(--arrow-spacing-xxs);
-    }
-  }
-}
-
-.share {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.wrapper:global(.default .story-element-data-table),
-.wrapper:global(.headline-priority .story-element-data-table) {
-  @include tablet {
-    max-width: 48vw;
-  }
-  @include tablet-lg {
-    max-width: 100%;
-  }
-}

package/src/components/Rows/StoryTemplates/LiveBlogStoryTemplates/stories.js

@@ -1,114 +0,0 @@
-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 socialShareStyle = {
-  "Vertical Share": "sticky",
-  "Fixed Share": "fixed"
-};
-
-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 <AdPlaceholder height="250px" width="300px" />;
-};
-
-withStore(
-  "Rows/Story Templates/Live Blog Story Template",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-).add("Default", () => {
-  const templateConfig = {
-    socialShareStyle: optionalSelect("Social Share Style", socialShareStyle),
-    theme: color(label, defaultvalue),
-    noOfVisibleCards: -1,
-    initialLoadCount: text("Initial key events count", 4),
-    showSection: boolean("Show Section Tag", true),
-    templateType: optionalSelect("Template", templateTypes),
-    buttonText: text("Key Events Button text", "Load More"),
-    publishedDetails: {
-      enablePublishedTime: boolean("Show Published Time", true),
-      enableUpdatedTime: boolean("Show Updated Time", false),
-      showReadTime: boolean("Read time", false)
-    },
-    authorDetails: {
-      template: optionalSelect("Author templates", authorTemplate),
-      opts: {
-        showBio: boolean("Author Bio", false),
-        showImage: boolean("Author Image", false),
-        showName: boolean("Author Name", true),
-        showLabels: boolean("show labels", true),
-        showGuestAuthorName: boolean("show guest author name", false),
-        showGuestAuthorImage: boolean("show guest author image", false)
-      }
-    },
-    premiumStoryIconConfig: {
-      iconColor: "#F7B500",
-      iconType: "star",
-      enablePremiumStoryIcon: true
-    },
-    asideCollection: {
-      data: collection,
-      config: {
-        title: text("Aside Collection Title", "Trending"),
-        theme: color(label, defaultvalue),
-        showAuthor: boolean("Show Author", true),
-        showTime: boolean("Show Timestamp", true)
-      },
-      slots: slotData
-    }
-  };
-  return (
-    <LiveBlog
-      story={story}
-      config={templateConfig}
-      storyElementsConfig={storyElementsConfig}
-      adComponent={configurableSlot}
-      widgetComp={configurableSlot}
-      firstChild={<AdPlaceholder height="250px" width="300px" />}
-      secondChild={<AdPlaceholder height="250px" width="300px" />}
-    />
-  );
-});