Add. new components from arrow library

.vscode/settings.json

@@ -11,5 +11,6 @@
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "editor.acceptSuggestionOnEnter": "on"
 }

app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/alternate-collection-filter.m.css

@@ -131,7 +131,7 @@
     display: block;
     font-size: var(--arrow-fs-s);
     line-height: var(--arrow-lh-2);
-    overflow: none;
+    overflow: unset;
   }
 }
 

app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { useDispatch, useSelector } from "react-redux";
 import { collectionToStories } from "@quintype/components";
 
@@ -93,7 +93,7 @@ const AlternateCollectionFilter = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="collection-filter"
-      style={{ backgroundColor: theme, color: textColor }}
+      style={{ backgroundColor: theme || "initial" }}
     >
       <div styleName={`wrapper ${getCustomStyleName}`}>
         <CollectionName

app/isomorphic/arrow/components/Rows/FourColTwelveStory/index.js

@@ -1,13 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { collectionToStories, Link } from "@quintype/components";
 import { HeroImage } from "../../Atoms/HeroImage";
 import { SectionTag } from "../../Atoms/SectionTag";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { Headline } from "../../Atoms/Headline";
-import { getTextColor, getSlug } from "../../../utils/utils";
+import { getSlug } from "../../../utils/utils";
 import { StateProvider } from "../../SharedContext";
 import { StoryCard } from "../../Molecules/StoryCard/index";
 import "./four-col-twelve-story.m.css";
@@ -71,24 +71,24 @@ const SingleCol3Story = ({ collection, border, collectionNameTemplate, otherText
           />
           <SectionTag story={firstStory} />
           <Headline story={firstStory} headerLevel="4" premiumStoryIconConfig={config} />
-          <AuthorWithTime config={localizationConfig} story={firstStory} />
+          <AuthorWithTime config={localizationConfig} story={firstStory} collectionId={collection.id} />
         </StoryCard>
       </div>
 
       <div className="second-card">
         {rest.slice(0, 2).map((story, index) => {
           return (
-            <StoryCard key={index} story={story} isHorizontal theme={theme} border={border}>
+            <StoryCard config={config} key={index} story={story} isHorizontal theme={theme} border={border}>
               <HeroImage
                 story={story}
                 aspectRatio={[
-                  [4, 3],
-                  [4, 3],
+                  [16, 9],
+                  [16, 9],
                 ]}
               />
               <div styleName="small-card-content-container" className="small-card-container">
                 <Headline story={story} premiumStoryIconConfig={config} />
-                <AuthorWithTime config={localizationConfig} story={story} />
+                <AuthorWithTime config={localizationConfig} story={story} collectionId={collection.id} />
               </div>
             </StoryCard>
           );
@@ -115,13 +115,11 @@ const FourColTwelveStory = ({ collection = {}, publisherConfig = {}, config = {}
   // if number of collection is less than 4 return null
   if (getFilteredCollection.length < 4) return null;
 
-  const textColor = getTextColor(theme);
-
   return (
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="four-col-twelve-stories"
-      style={{ backgroundColor: theme, color: textColor }}
+      style={{ backgroundColor: theme || "initial" }}
     >
       <div styleName="columns-container">
         {getFilteredCollection.slice(0, 4).map((collection, index) => {
@@ -135,6 +133,7 @@ const FourColTwelveStory = ({ collection = {}, publisherConfig = {}, config = {}
               slug={slugName}
               otherTextData={otherTextData}
               theme={theme}
+              config={config}
             />
           );
         })}

app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/four-story-slider-portrait.m.css

@@ -1,8 +1,8 @@
-/*eslint-disable no-descending-specificity, scss/operator-no-unspaced */
 @custom-media --viewport-medium (width >=768px);
 @custom-media --viewport-desktop (width >=992px);
 @custom-media --viewport-mobile (width >=400px);
 
+/* stylelint-disable no-descending-specificity */
 .four-story-slider-portrait-wrapper {
   position: relative;
   margin: 0 0 var(--arrow-spacing-m) var(--arrow-spacing-s);

app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/index.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import React, { useState, useEffect } from "react";
 
 import { CollectionName } from "../../Atoms/CollectionName";
-import { getTextColor, getNumberOfStoriesToShow, navigateTo, generateNavigateSlug } from "../../../utils/utils";
+import { getNumberOfStoriesToShow, navigateTo, generateNavigateSlug } from "../../../utils/utils";
 import { HeroImage } from "../../Atoms/HeroImage";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
 import { ScrollSnap } from "../../Atoms/ScrollSnap";
@@ -16,6 +16,21 @@ import { StorycardContent } from "../../Molecules/StorycardContent";
 import "./four-story-slider-portrait.m.css";
 
 const FourStorySliderPortrait = ({ collection, config = {} }) => {
+  const [perView, setPerView] = useState(1);
+
+  useEffect(() => {
+    const deviceWidth = get(global, ["innerWidth"], 480);
+    if (deviceWidth > 992) setPerView(4);
+    else if (deviceWidth > 764) setPerView(3);
+    else setPerView(1);
+  }, []);
+
+  const items = collectionToStories(collection);
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  if (items.length < 1) {
+    return null;
+  }
   const {
     collectionNameBorderColor = "",
     borderColor = "",
@@ -30,27 +45,11 @@ const FourStorySliderPortrait = ({ collection, config = {} }) => {
     isInfinite = false,
   } = config;
   const { footerSlot } = footerSlotConfig;
-  const items = collectionToStories(collection);
-  if (items.length < 1) {
-    return null;
-  }
-
-  const dispatch = useDispatch();
-  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const url = generateNavigateSlug(collection, qtConfig);
-  const [perView, setPerView] = useState(1);
 
   const showNumberOfStoriesToShow = getNumberOfStoriesToShow(numberOfStoriesToShow);
-  const textColor = getTextColor(theme);
   const footerSlotComp = footerSlot ? footerSlot() : null;
 
-  useEffect(() => {
-    const deviceWidth = get(global, ["innerWidth"], 480);
-    if (deviceWidth > 992) setPerView(4);
-    else if (deviceWidth > 764) setPerView(3);
-    else setPerView(1);
-  }, []);
-
   const getItems = () => {
     return items.slice(0, showNumberOfStoriesToShow).map((story, index) => {
       return (
@@ -66,7 +65,7 @@ const FourStorySliderPortrait = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="four-story-slider-portrait"
-      style={{ backgroundColor: theme, color: textColor }}
+      style={{ backgroundColor: theme || "initial" }}
     >
       <div styleName="four-story-slider-portrait-wrapper">
         <CollectionName

app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/four-tabbed-big-story-slider.m.css

@@ -1,4 +1,3 @@
-/* eslint-disable scss/at-rule-no-unknown, no-descending-specificity */
 @value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value desktop from viewports;
@@ -39,7 +38,7 @@
       bottom: 10px;
       left: 10px;
       z-index: var(--z-index-1);
-      @media (--viewport-mobile) {
+      @media (max-width: mobile) {
         height: 24px;
         width: 24px;
       }

app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/index.js

@@ -17,7 +17,7 @@ import { CollectionName } from "../../Atoms/CollectionName";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { HeroImage } from "../../Atoms/HeroImage";
-import { StorycardContent } from "../../../components/Molecules/StorycardContent";
+import { StorycardContent } from "../../Molecules/StorycardContent";
 import { SectionTag } from "../../Atoms/SectionTag";
 import { Headline } from "../../Atoms/Headline";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
@@ -68,7 +68,7 @@ export const FourTabbedBigStorySlider = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="two-col-three-stories"
-      style={{ backgroundColor: theme, color: textColor }}
+      style={{ backgroundColor: theme || "initial" }}
     >
       <div styleName={`four-tabbed-big-story-slider ${getCustomStyleName}`}>
         <CollectionName
@@ -116,12 +116,12 @@ export const FourTabbedBigStorySlider = ({ collection, config = {} }) => {
   );
 };
 
-const DefaultStoryCardContent = ({ story, config = {}, borderColor, showSubheadline }) => {
-  const SectionTagborderColor = rgbToHex(borderColor);
+const DefaultStoryCardContentBase = ({ story, config = {}, borderColor, showSubheadline }) => {
+  const SectionTagBorderColor = rgbToHex(borderColor);
   const { localizationConfig = {} } = config;
   return (
     <div>
-      <SectionTag story={story} borderColor={SectionTagborderColor} isLightTheme />
+      <SectionTag story={story} borderColor={SectionTagBorderColor} isLightTheme />
       <Headline story={story} premiumStoryIconConfig={config} />
       <AuthorWithTime config={localizationConfig} story={story} isLightTheme />
       {showSubheadline && (
@@ -138,6 +138,7 @@ const DefaultStoryCardContent = ({ story, config = {}, borderColor, showSubheadl
 };
 
 export default StateProvider(FourTabbedBigStorySlider);
+const DefaultStoryCardContent = StateProvider(DefaultStoryCardContentBase);
 
 FourTabbedBigStorySlider.propTypes = {
   /**  collection is the array of objects which is returning by API  */
@@ -153,7 +154,7 @@ FourTabbedBigStorySlider.propTypes = {
   }),
 };
 
-DefaultStoryCardContent.propTypes = {
+DefaultStoryCardContentBase.propTypes = {
   story: PropTypes.object.isRequired,
   config: PropTypes.object,
   borderColor: PropTypes.string,

app/isomorphic/arrow/components/Rows/ListComponent/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { CollectionName } from "../../Atoms/CollectionName";
-import { generateNavigateSlug, getTextColor, navigateTo } from "../../../utils/utils";
+import { generateNavigateSlug, navigateTo } from "../../../utils/utils";
 import { collectionToStories } from "@quintype/components";
 import { HeroImage } from "../../Atoms/HeroImage";
 import { StorycardContent } from "../../Molecules/StorycardContent";
@@ -14,7 +14,7 @@ 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";
+import get from "lodash.get";
 
 const ListComponent = ({ collection, config = {}, getMoreStories, limit, hideButton, authorPrefix = "By" }) => {
   const storyItems = collectionToStories(collection);
@@ -95,17 +95,15 @@ const ListComponent = ({ collection, config = {}, getMoreStories, limit, hideBut
     }
   };
 
-  const textColor = getTextColor(theme);
-
   return (
-    <div className="full-width-with-padding arrow-component" style={{ backgroundColor: theme, color: textColor }}>
+    <div className="full-width-with-padding arrow-component" style={{ backgroundColor: theme || "initial" }}>
       <div styleName="list-wrapper ">
         <CollectionName
           collection={collection}
           collectionNameTemplate={collectionNameTemplate}
           collectionNameBorderColor={collectionNameBorderColor}
         />
-        <div styleName="wrapper" style={{ backgroundColor: theme, color: textColor }}>
+        <div styleName="wrapper" style={{ backgroundColor: theme || "initial" }}>
           <div styleName="list">
             {storyItems.slice(0, limit).map((story, index) => {
               return <div key={`default-${index}`}>{borderHandler(story)}</div>;

app/isomorphic/arrow/components/Rows/ThreeColFourteenStory/index.js

@@ -1,13 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { collectionToStories } from "@quintype/components";
 
 import { CollectionName } from "../../Atoms/CollectionName";
 import { HeroImage } from "../../Atoms/HeroImage";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { StateProvider } from "../../SharedContext";
-import { getTextColor, getSlot } from "../../../utils/utils";
+import { getSlot } from "../../../utils/utils";
 import { Headline } from "../../Atoms/Headline";
 import { Subheadline } from "../../Atoms/Subheadline/index";
 import { SectionTag } from "../../Atoms/SectionTag";
@@ -16,6 +16,8 @@ import "./three-col-fourteen-story.m.css";
 
 const ThreeColFourteenStories = ({ collection = {}, config = {} }) => {
   const items = collectionToStories(collection);
+  if (!items.length) return null;
+
   const {
     collectionNameBorderColor = "",
     borderColor = "",
@@ -26,12 +28,6 @@ const ThreeColFourteenStories = ({ collection = {}, config = {} }) => {
   } = config;
   const { type, component } = get(slotConfig, [0], {});
 
-  if (items.length < 1) {
-    return null;
-  }
-
-  const textColor = getTextColor(theme);
-
   const [firstStory, secondStory, ...restOftheStories] = items || [];
 
   const storyCallBack = (restOftheStories = []) => {
@@ -55,7 +51,7 @@ const ThreeColFourteenStories = ({ collection = {}, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="three-col-fourteen-stories"
-      style={{ backgroundColor: theme, color: textColor }}
+      style={{ backgroundColor: theme || "initial" }}
     >
       <div styleName="wrapper">
         <CollectionName

app/isomorphic/arrow/components/Rows/TwoColSevenStories/index.js

@@ -16,7 +16,7 @@ import { LoadmoreButton } from "../../Atoms/Loadmore";
 
 import "./two-col-seven-stories.m.css";
 import { useDispatch, useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 
 export const TwoColSevenStories = ({ collection, config = {} }) => {
   const items = collectionToStories(collection);
@@ -48,7 +48,7 @@ export const TwoColSevenStories = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="two-col-seven-stories"
-      style={{ backgroundColor: theme, color: textColor }}
+      style={{ backgroundColor: theme || "initial" }}
     >
       <div styleName="two-col-seven-story">
         <CollectionName