@quintype/arrow 3.15.1-perf.3 → 3.15.1-perf.7

package/esm/components/Molecules/StorycardContent/README.md

@@ -0,0 +1,34 @@
+# StoryCard Content
+
+The _StoryCardContent_ component is a basic [molecule] used to represent a storyCard content within a Row.
+
+The _StoryCardContent_ can be composible based on it's children(Atoms).
+
+## Usage
+
+### Default Story Card
+
+```jsx
+<StoryCardContent story={story} />
+```
+
+### Story Card with Headline and Timestamp
+
+```jsx
+<StorycardContent story={story}>
+  <Headline story={story} />
+  <AuthorWithTime story={story} />
+</StorycardContent>
+```
+
+### Story Card with Headline, Author with Timestamp and Subheadline
+
+```jsx
+<StorycardContent story={story}>
+  <Headline story={story} />
+  <Subheadline story={story} />
+  <AuthorWithTime story={story} />
+</StorycardContent>
+```
+
+<!-- PROPS -->

package/esm/components/Molecules/StorycardContent/index.js

@@ -0,0 +1,86 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+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";
+var _styleModuleImportMap = {
+  "./storycardContent.m.css": {
+    "wrapper": "storycardContent-m_wrapper__TEmfA",
+    "horizontal-content-wrapper": "storycardContent-m_horizontal-content-wrapper__NgpuC",
+    "border-full": "storycardContent-m_border-full__2km37"
+  }
+};
+export var StorycardContent = function StorycardContent(_ref) {
+  var story = _ref.story,
+      children = _ref.children,
+      theme = _ref.theme,
+      border = _ref.border,
+      isHorizontalMobile = _ref.isHorizontalMobile,
+      headerLevel = _ref.headerLevel,
+      borderColor = _ref.borderColor,
+      config = _ref.config;
+  var textColor = getTextColor(theme);
+  var borderOptions = ["full"];
+  var SectionTagborderColor = rgbToHex(borderColor);
+  var borderTemplate = borderOptions.includes(border) ? "border-".concat(border) : "";
+  var horizontalCard = isHorizontalMobile ? "horizontal-content-wrapper" : "";
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "story-card-content",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    },
+    className: "arr--content-wrapper " + _getClassName("wrapper ".concat(borderTemplate, " ").concat(horizontalCard), _styleModuleImportMap)
+  }, children || /*#__PURE__*/React.createElement(DefaultStoryCardContent, {
+    story: story,
+    headerLevel: headerLevel,
+    isHorizontalMobile: isHorizontalMobile,
+    borderColor: SectionTagborderColor,
+    config: config
+  }));
+};
+
+var DefaultStoryCardContent = function DefaultStoryCardContent(_ref2) {
+  var story = _ref2.story,
+      headerLevel = _ref2.headerLevel,
+      borderColor = _ref2.borderColor,
+      _ref2$config = _ref2.config,
+      config = _ref2$config === void 0 ? {} : _ref2$config;
+  var SectionTagborderColor = rgbToHex(borderColor);
+  var _config$localizationC = config.localizationConfig,
+      localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTag, {
+    story: story,
+    borderColor: SectionTagborderColor
+  }), /*#__PURE__*/React.createElement(Headline, {
+    story: story,
+    headerLevel: headerLevel,
+    premiumStoryIconConfig: config
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    config: localizationConfig,
+    story: story
+  }));
+};
+
+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
+};

package/esm/components/Molecules/StorycardContent/stories.js

@@ -0,0 +1,45 @@
+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";
+var story = generateStory();
+withStore("Molecules/StoryCard Content", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "480px"
+    }
+  }, story());
+}).add("default", function () {
+  return /*#__PURE__*/React.createElement(StorycardContent, {
+    story: story
+  });
+}).add("Story Card with Headline and Timestamp", function () {
+  return /*#__PURE__*/React.createElement(StorycardContent, {
+    story: story
+  }, /*#__PURE__*/React.createElement(Headline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    story: story
+  }));
+}).add("Story Card with Headline, Author with Timestamp and Subheadline ", function () {
+  return /*#__PURE__*/React.createElement(StorycardContent, {
+    story: story
+  }, /*#__PURE__*/React.createElement(Headline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(Subheadline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    story: story
+  }));
+});

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

package/esm/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: () => <CustomAdOrWidget /> }],
+  showRowTitle: true,
+  showFooterButton: true,
+  buttonText: "Load More",
+  footerSlotConfig: { footerSlot: () => <CustomFooterSlot /> }
+};
+```
+
+### Use as a component
+
+```jsx
+<AlternateCollectionFilter collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

package/esm/components/Rows/AlternateCollectionFilter/alternate-collection-filter.m.css

@@ -0,0 +1,254 @@
+@custom-media --viewport-medium (width >= 768px);
+@custom-media --viewport-desktop (width > 1024px);
+
+.navigator {
+  visibility: hidden;
+  position: relative;
+}
+
+.wrapper {
+  padding: 0 var(--arrow-spacing-s);
+
+  :global {
+    .arr--headline h6 {
+      margin-bottom: var(--arrow-spacing-xs);
+    }
+
+    .arr--read-time {
+      position: relative;
+      top: -4px;
+    }
+
+    .read-time-indicator {
+      position: relative;
+      top: -2px;
+      padding-bottom: 0;
+    }
+
+    .arr--publish-time {
+      position: relative;
+      top: -1px;
+    }
+
+    .arr-separator {
+      top: -7px;
+    }
+
+    .arr--button {
+      margin: var(--arrow-spacing-l) auto;
+    }
+  }
+
+  @media (--viewport-medium) {
+    padding: unset;
+  }
+}
+
+.light-wrapper {
+  :global {
+    .arr--collection-name h3,
+    .arr--headline h6 {
+      color: var(--arrow-c-invert-mono1);
+    }
+
+    .section-tag,
+    .author-name,
+    .arr--publish-time,
+    .arr--read-time {
+      color: var(--arrow-c-invert-mono3);
+    }
+  }
+}
+
+.collection-filter {
+  @media (--viewport-desktop) {
+    display: grid;
+    grid-template-columns: 3fr 1px 9fr;
+    grid-column-gap: var(--arrow-spacing-l);
+    margin-bottom: var(--arrow-spacing-l);
+  }
+}
+
+.divider.dark {
+  @media (--viewport-desktop) {
+    border-left: 1px solid var(--dark-border);
+  }
+}
+
+.divider.light {
+  @media (--viewport-desktop) {
+    border-left: 1px solid var(--light-border);
+  }
+}
+
+.subCollection-wrapper {
+  position: relative;
+  min-height: 100px;
+}
+
+.cards {
+  display: block;
+
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: var(--arrow-spacing-l);
+  }
+
+  @media (--viewport-desktop) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.cards .card {
+  margin-bottom: var(--arrow-spacing-l);
+
+  @media (--viewport-medium) {
+    margin-bottom: unset;
+  }
+}
+
+.card-wrapper {
+  @media (--viewport-medium) {
+    display: flex;
+    align-items: flex-start;
+  }
+}
+
+.child-collections {
+  display: flex;
+  font-size: var(--arrow-fs-xs);
+  margin-bottom: var(--arrow-spacing-m);
+  scroll-snap-type: x mandatory;
+  overflow: scroll;
+  scrollbar-width: none;
+
+  @media (--viewport-medium) {
+    margin-bottom: var(--arrow-spacing-l);
+  }
+
+  @media (--viewport-desktop) {
+    display: block;
+    font-size: var(--arrow-fs-s);
+    line-height: var(--arrow-lh-2);
+    overflow: none;
+  }
+}
+
+.child-collections::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.child-collection.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.child-collection.light {
+  color: var(--arrow-c-invert-mono3);
+}
+
+.child-collection {
+  margin: 0 var(--arrow-spacing-s) var(--arrow-spacing-s);
+  cursor: pointer;
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-bold);
+  width: max-content;
+
+  @media (--viewport-desktop) {
+    font-size: var(--arrow-fs-s);
+    margin: 0 0 var(--arrow-spacing-l) 0;
+  }
+}
+
+.child-collection-wrapper {
+  display: flex;
+  scroll-snap-align: start;
+}
+
+.child-collection.dark:hover,
+.open-subchild > .child-collection.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.child-collection.light:hover,
+.open-subchild > .child-collection.light {
+  color: var(--arrow-c-invert-mono1);
+}
+
+.open-subchild {
+  border-bottom: var(--arrow-spacing-xxs) solid var(--arrow-c-brand1);
+
+  @media (--viewport-desktop) {
+    border-bottom: unset;
+  }
+}
+
+.open-subchild > .navigator {
+  @media (--viewport-desktop) {
+    visibility: visible;
+    width: var(--arrow-spacing-l);
+    transition: width 0.35s ease-in-out;
+    animation: fadein 2s;
+  }
+}
+
+/* tringle design */
+.navigator:before {
+  @media (--viewport-medium) {
+    content: "";
+    border-style: solid;
+    border-width: var(--arrow-spacing-xxs) var(--arrow-spacing-xxs) var(--arrow-spacing-xxs) var(--arrow-spacing-xs);
+    border-color: transparent transparent transparent var(--arrow-c-mono2);
+    position: absolute;
+    right: 0;
+    top: var(--arrow-spacing-xs);
+  }
+}
+
+.navigator.dark:before {
+  @media (--viewport-medium) {
+    border-color: transparent transparent transparent var(--arrow-c-mono2);
+  }
+}
+
+.navigator.light:before {
+  @media (--viewport-medium) {
+    border-color: transparent transparent transparent var(--arrow-c-invert-mono2);
+  }
+}
+
+.subCollection-stories {
+  :global {
+    .section-tag {
+      font-weight: normal;
+    }
+  }
+}
+
+.collection-filter .subCollection-stories {
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+  animation-duration: 1s;
+  animation-delay: 1s;
+}
+
+html[dir="rtl"] {
+  .open-subchild > .navigator {
+    height: var(--arrow-spacing-l);
+    transform: rotate(-180deg);
+  }
+}
+
+.no-button-wrapper {
+  margin-top: var(--arrow-spacing-l);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}