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

package/src/components/Molecules/PortraitStoryCard/portrait-story-card.m.css

@@ -0,0 +1,42 @@
+@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);
+    }
+
+    .with-rounded-corners figure::after {
+      border-radius: 12px;
+    }
+  }
+}

package/src/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) => <div style={{ maxWidth: "320px" }}>{story()}</div>)
+
+  .add("Default", () => <PortraitStoryCard story={story} />);

package/src/components/Molecules/SliderHorizontalCard/README.md

@@ -0,0 +1,14 @@
+# SliderHorizontalCard(Row/Organisms)
+
+The _SliderHorizontalCard_ component is a basic [molecule](https://bradfrost.com/blog/post/atomic-web-design/#organisms) used to represent a molecule with atoms.
+
+Horizontal Slider Card is a horozontal card with same width for image and content.
+## Usage
+
+### Default SliderHorizontalCard
+
+```jsx
+<SliderHorizontalCard collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

package/src/components/Molecules/SliderHorizontalCard/index.js

@@ -0,0 +1,44 @@
+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 { isEmpty } from "../../../utils/utils";
+
+import PropTypes from "prop-types";
+
+import "./slider-horizontal-card.m.css";
+
+export const SliderHorizontalCard = ({
+  story,
+  border = "",
+  theme = "",
+  headerLevel,
+  borderColor = "",
+  config = {}
+}) => {
+  if (!story || isEmpty(story)) return <div />;
+  const borderStyle = border === "full" ? "border" : "";
+  const { localizationConfig = {} } = config;
+  return (
+    <div styleName={`horizontal ${borderStyle}`} style={{ backgroundColor: theme || "initial" }}>
+      <HeroImage config={config} story={story} aspectRatio={[[4, 3], [16, 9]]} />
+      <div className="arr--content" styleName="content">
+        <SectionTag story={story} borderColor={borderColor} />
+        <Headline story={story} headerLevel={headerLevel} premiumStoryIconConfig={config} />
+        <Subheadline story={story} />
+        <AuthorWithTime config={localizationConfig} story={story} isBottom prefix="By" />
+      </div>
+    </div>
+  );
+};
+
+SliderHorizontalCard.propTypes = {
+  story: PropTypes.object.isRequired,
+  border: PropTypes.string,
+  theme: PropTypes.string,
+  headerLevel: PropTypes.string,
+  borderColor: PropTypes.string,
+  config: PropTypes.object
+};

package/src/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);
+}

package/src/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", () => (
+    <SliderHorizontalCard story={story} borderColor={color(sectionTagBorderColor, defaultvalue)} />
+  ))
+  .add("Horizontal card for slider with empty story", () => (
+    <SliderHorizontalCard story={null} borderColor={color(sectionTagBorderColor, defaultvalue)} />
+  ));

package/src/components/Molecules/SocialShareTemplate/README.md

@@ -0,0 +1,118 @@
+# Social Share Template
+
+A template for social share on story page
+
+## Usage
+
+#### Social share template with horizontal share
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  iconType: "plain-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with vertical share
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "plain-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with plain svg
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "plain-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with plain color svg
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "plain-color-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with square svg
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "square-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with circular svg
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "circular-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with circular color svg
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "circular-color-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+<!-- PROPS -->

package/src/components/Molecules/SocialShareTemplate/__snapshots__/social-share-template.test.js.snap

@@ -0,0 +1,285 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Social Share Template Should not render facebook icon if url not passed 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "store": Object {
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Object {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "onStateChange": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <SocialShareTemplate
+    fbUrl=""
+    iconType="plain-svg"
+    linkedinUrl="https://twitter.com/"
+    theme="#ffff"
+    twitterUrl="https://twitter.com/"
+    whatsappUrl="https://twitter.com/"
+  />
+</ContextProvider>
+`;
+
+exports[`Social Share Template Should not render linkedin icon if url not passed 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "store": Object {
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Object {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "onStateChange": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <SocialShareTemplate
+    fbUrl="https://twitter.com/"
+    iconType="plain-svg"
+    linkedinUrl=""
+    theme="#ffff"
+    twitterUrl="https://twitter.com/"
+    whatsappUrl="https://twitter.com/"
+  />
+</ContextProvider>
+`;
+
+exports[`Social Share Template Should not render social share template if url is not passed 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "store": Object {
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Object {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "onStateChange": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <SocialShareTemplate
+    fbUrl=""
+    fullUrl=""
+    iconType="plain-svg"
+    linkedinUrl=""
+    theme="#ffff"
+    twitterUrl=""
+    whatsappUrl=""
+  />
+</ContextProvider>
+`;
+
+exports[`Social Share Template Should not render twitter icon if url not passed 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "store": Object {
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Object {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "onStateChange": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <SocialShareTemplate
+    fbUrl="https://twitter.com/"
+    iconType="plain-svg"
+    linkedinUrl="https://twitter.com/"
+    theme="#ffff"
+    twitterUrl=""
+    whatsappUrl="https://twitter.com/"
+  />
+</ContextProvider>
+`;
+
+exports[`Social Share Template Should not render whatsapp icon if url not passed 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "store": Object {
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Object {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "onStateChange": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <SocialShareTemplate
+    fbUrl="https://twitter.com/"
+    iconType="plain-svg"
+    linkedinUrl="https://twitter.com/"
+    theme="#ffff"
+    twitterUrl="https://twitter.com/"
+    whatsappUrl=""
+  />
+</ContextProvider>
+`;
+
+exports[`Social Share Template Should render horizontal social share template 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "store": Object {
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Object {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "onStateChange": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <SocialShareTemplate
+    fbUrl="https://www.facebook.com"
+    iconType="plain-svg"
+    linkedinUrl="https://twitter.com/"
+    theme="#ffff"
+    twitterUrl="https://twitter.com/"
+    whatsappUrl="https://twitter.com/"
+  />
+</ContextProvider>
+`;
+
+exports[`Social Share Template Should render template if theme and icon is not passed 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "store": Object {
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Object {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "onStateChange": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <SocialShareTemplate
+    fbUrl="https://twitter.com/"
+    fullUrl="https://twitter.com/"
+    iconType="plain-svg"
+    linkedinUrl="https://twitter.com/"
+    mailtoUrl="https://twitter.com/"
+    theme=""
+    twitterUrl="https://twitter.com/"
+    whatsappUrl="https://twitter.com/"
+  />
+</ContextProvider>
+`;
+
+exports[`Social Share Template Should render vertical social share template 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "store": Object {
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Object {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "onStateChange": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <SocialShareTemplate
+    fbUrl="https://www.facebook.com"
+    iconType="plain-svg"
+    linkedinUrl="https://twitter.com/"
+    socialShareStyle="sticky"
+    theme="#ffff"
+    twitterUrl="https://twitter.com/"
+    whatsappUrl="https://twitter.com/"
+  />
+</ContextProvider>
+`;