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

package/src/components/Atoms/AudioPlayer/PlayerControls.js

@@ -1,155 +0,0 @@
-import React, { useState } from "react";
-import { ForwardSvgIcon } from "../../Svgs/TTS-Icons/ForwordIconSvg";
-import { BackwardSvgIcon } from "../../Svgs/TTS-Icons/BackwardIconSvg";
-import { CloseIcon } from "../../Svgs/TTS-Icons/ClosePlayerIconSvg";
-import { PlaySvgIcon } from "../../Svgs/TTS-Icons/PlayIconSvg";
-import { PauseSvgIcon } from "../../Svgs/TTS-Icons/PauseIconSvg";
-import { ReplaySvgIcon } from "../../Svgs/TTS-Icons/ReplayIcon";
-import { useSelector } from "react-redux";
-import get from "lodash.get";
-import PropTypes from "prop-types";
-import "./audio.m.css";
-
-export function SpeedSelector({ playbackRate, handleSpeedChange, playBackSpeedTitle = "", isDarkMode }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const speedSelectorStyleName = isDarkMode ? "playback-speed-container-dark" : "playback-speed-container";
-  return (
-    <div styleName={`hover-pointer ${speedSelectorStyleName}`} onClick={() => setIsOpen(!isOpen)} data-test-id="audio-player-speed">
-      <div>{playbackRate}x</div>
-      {isOpen && (
-        <div styleName="playback-speed-select">
-          <CustomSelect
-            playBackSpeedTxt={playBackSpeedTitle}
-            handleSpeedChange={handleSpeedChange}
-            playbackRate={playbackRate}
-            isDarkMode={isDarkMode}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function CustomSelect({ playBackSpeedTxt, handleSpeedChange, playbackRate, isDarkMode }) {
-  const speeds = ["0.25", "0.50", "0.75", "1.0", "1.25", "1.50", "1.75", "2.0"];
-  const selectedIndex = speeds.findIndex((speed) => playbackRate == parseFloat(speed));
-  const popupBg = isDarkMode ? "popup-dark" : "popup";
-  const { primaryColor = "", darkPrimaryColor = "" } = useSelector((state) =>
-    get(state, ["qt", "config", "pagebuilder-config", "general"], {})
-  );
-  const selectedSpeedColor = isDarkMode ? darkPrimaryColor : primaryColor;
-
-  return (
-    <div styleName={popupBg} data-test-id="audio-speed-popup">
-      <div styleName="popup-title-container">
-        <div styleName="popup-title">{playBackSpeedTxt || "Playback Speed"}</div>
-        <ClosePlayerIcon isDarkMode={isDarkMode} />
-      </div>
-      <div styleName="separator"></div>
-      <ul styleName="speed-list">
-        {speeds.map((speed, index) => (
-          <li
-            onClick={() => handleSpeedChange(speeds[index])}
-            styleName={isDarkMode ? "speed-list-item-dark" : "speed-list-item"}
-            style={{ color: selectedIndex === index ? selectedSpeedColor : "" }}
-            key={"item" + index}>
-            {" "}
-            {speed}{" "}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-export function BackwardIcon({ handleBackward, isDarkMode }) {
-  return (
-    <div onClick={handleBackward} styleName="backward-icon hover-pointer" data-test-id="audio-backward">
-      <BackwardSvgIcon isDarkMode={isDarkMode} />
-    </div>
-  );
-}
-
-export function ForwardIcon({ handleForward, isDarkMode }) {
-  return (
-    <div onClick={handleForward} styleName="forward-icon hover-pointer" data-test-id="audio-forward">
-      <ForwardSvgIcon isDarkMode={isDarkMode} />
-    </div>
-  );
-}
-
-export function PlayIcon({ handlePlayPause, isDarkMode }) {
-  return (
-    <div onClick={handlePlayPause} styleName="hover-pointer play-icon" data-test-id="audio-play">
-      <PlaySvgIcon isDarkMode={isDarkMode} />
-    </div>
-  );
-}
-
-export function PauseIcon({ handlePlayPause, isDarkMode }) {
-  return (
-    <div onClick={handlePlayPause} styleName="hover-pointer pause-icon" data-test-id="audio-pause">
-      <PauseSvgIcon isDarkMode={isDarkMode} />
-    </div>
-  );
-}
-
-export function ClosePlayerIcon({ callBack = (value) => null, isDarkMode }) {
-  return (
-    <div onClick={() => callBack(false)} styleName="close-icon hover-pointer" data-test-id="audio-close">
-      <CloseIcon isDarkMode={isDarkMode} />
-    </div>
-  );
-}
-
-export function ReplayPlayerIcon({ callBack = (value) => null, isDarkMode }) {
-  return (
-    <div onClick={() => callBack(false)} styleName="close-icon hover-pointer" data-test-id="audio-replay">
-      <ReplaySvgIcon isDarkMode={isDarkMode} />
-    </div>
-  );
-}
-
-SpeedSelector.propTypes = {
-  playbackRate: PropTypes.number,
-  handleSpeedChange: PropTypes.func,
-  playBackSpeedTitle: PropTypes.string,
-  isDarkMode: PropTypes.bool
-};
-
-CustomSelect.propTypes = {
-  playbackRate: PropTypes.number,
-  handleSpeedChange: PropTypes.func,
-  playBackSpeedTxt: PropTypes.string,
-  isDarkMode: PropTypes.bool
-};
-
-BackwardIcon.propTypes = {
-  handleBackward: PropTypes.func,
-  isDarkMode: PropTypes.bool
-};
-
-ForwardIcon.propTypes = {
-  handleForward: PropTypes.func,
-  isDarkMode: PropTypes.bool
-};
-
-PlayIcon.propTypes = {
-  handlePlayPause: PropTypes.func,
-  isDarkMode: PropTypes.bool
-};
-
-PauseIcon.propTypes = {
-  handlePlayPause: PropTypes.func,
-  isDarkMode: PropTypes.bool
-};
-
-ClosePlayerIcon.propTypes = {
-  callBack: PropTypes.func,
-  isDarkMode: PropTypes.bool
-};
-
-ReplayPlayerIcon.propTypes = {
-  callBack: PropTypes.func,
-  isDarkMode: PropTypes.bool
-};

package/src/components/Atoms/AudioPlayer/ProgressBar.js

@@ -1,24 +0,0 @@
-import React, { useRef, useLayoutEffect } from "react";
-import "./progressbar.m.css";
-
-export function ProgressBar({ progress, handleSeek, isDarkMode }) {
-  const sliderRef = useRef();
-
-  useLayoutEffect(() => {
-    const sliderEl = sliderRef.current;
-    const sliderValue = sliderEl?.value;
-    if (sliderValue) {
-      sliderEl.style.background = isDarkMode
-        ? `linear-gradient(to right, #ccc ${sliderValue}%, #000000 ${sliderValue}%)`
-        : `linear-gradient(to right, #000000 ${sliderValue}%, #ccc ${sliderValue}%)`;
-    }
-  }, [progress]);
-
-  const progressBarStyle = isDarkMode ? "progress-bar-dark" : "progress-bar";
-
-  return (
-    <div styleName={progressBarStyle}>
-      <input ref={sliderRef} type="range" min="0" max="100" value={progress} onChange={handleSeek} />
-    </div>
-  );
-}

package/src/components/Atoms/AudioPlayer/audio.m.css

@@ -1,201 +0,0 @@
-.audio-prompt-dark,
-.audio-prompt {
-  display: flex;
-  width: fit-content;
-  height: var(--arrow-spacing-40);
-  padding: var(--arrow-spacing-xs) 14px;
-  justify-content: space-evenly;
-  align-items: center;
-  border-radius: var(--arrow-spacing-40);
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  margin-top: var(--arrow-spacing-xs);
-  margin-bottom: var(--arrow-spacing-m);
-}
-
-.audio-prompt-dark {
-  background-color: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.hover-pointer {
-  cursor: pointer;
-}
-
-.audio-prompt-title {
-  font-weight: var(--arrow-fw-semi-bold);
-  font-size: var(--arrow-fs-tiny);
-  font-family: var(--arrow-typeface-secondary);
-  margin-left: var(--arrow-spacing-xxs);
-}
-
-.dark {
-  color: var(--arrow-c-mono1);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono1);
-}
-
-.audio-container {
-  width: var(--arrow-fw-500);
-  height: var(--arrow-fw-500);
-}
-
-.player-controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--arrow-fs-xs);
-  margin-top: var(--arrow-fs-big);
-}
-
-.playback-controls {
-  display: flex;
-  align-items: center;
-}
-
-.backward-forward-controls {
-  display: flex;
-  margin-right: var(--arrow-spacing-l);
-}
-
-.close-icon {
-  margin-right: var(--arrow-spacing-s);
-}
-
-.close-icon,
-.play-icon,
-.pause-icon {
-  flex-shrink: 0;
-  display: flex;
-}
-
-.pause-icon,
-.play-icon {
-  margin-left: var(--arrow-spacing-s);
-}
-
-.player-track-dark,
-.player-track {
-  display: flex;
-  align-items: center;
-  border-radius: var(--arrow-spacing-xxs);
-  height: 56px;
-  border: 0.8px solid rgba(0, 0, 0, 0.08);
-  background-color: #ffffff12;
-}
-
-.player-track-dark {
-  background-color: rgba(255, 255, 255, 0.16);
-}
-
-.player-title {
-  color: "#000000";
-  font-size: var(--arrow-fs-xs);
-  font-weight: var(--arrow-fw-semi-bold);
-  font-family: var(--arrow-typeface-secondary);
-}
-
-.playback-speed-container-dark,
-.playback-speed-container {
-  width: 38px;
-  height: 22px;
-  background-color: #ebebeb;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: var(--arrow-spacing-xxxs);
-  position: relative;
-  font-size: small;
-  border-radius: var(--arrow-spacing-xxs);
-}
-
-.playback-speed-container-dark {
-  background-color: rgba(209, 209, 209, 0.2);
-}
-
-.playback-speed-select {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 2;
-}
-
-.popup-dark,
-.popup {
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  padding: var(--arrow-spacing-20);
-  border-radius: var(--arrow-spacing-xs);
-  box-shadow: 0px var(--arrow-spacing-xxs) var(--arrow-spacing-l) 0px rgba(0, 0, 0, 0.08);
-  text-align: center;
-  width: 360px;
-  height: 390px;
-
-  @media (max-width: 768px) {
-    width: 84%;
-  }
-}
-
-.popup-dark {
-  background: rgba(0, 0, 0, 0.8);
-}
-
-.popup-title-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.popup-title {
-  font-weight: var(--arrow-fw-bold);
-  text-align: left;
-  font-size: var(--arrow-fs-xs);
-}
-
-.separator {
-  height: 1px;
-  background: rgba(0, 0, 0, 0.14);
-  margin: 10px 0;
-}
-
-.speed-list {
-  text-align: left;
-  list-style-type: none;
-}
-
-.speed-list-item-dark,
-.speed-list-item {
-  padding: var(--arrow-spacing-xs) 0;
-  margin-bottom: var(--arrow-spacing-xs);
-}
-
-.speed-list-item:hover {
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.speed-list-item-dark:hover {
-  color: rgba(255, 255, 255, 0.2);
-}
-
-.player-container {
-  max-width: 100%;
-  margin-bottom: var(--arrow-spacing-m);
-}
-
-.forward-icon {
-  width: var(--arrow-spacing-xl);
-  height: var(--arrow-spacing-xl);
-}
-
-.backward-icon {
-  width: var(--arrow-spacing-xl);
-  height: var(--arrow-spacing-xl);
-  margin-right: 18px;
-}

package/src/components/Atoms/AudioPlayer/index.js

@@ -1,59 +0,0 @@
-import React, { useState } from "react";
-import { AudioSpeakerIcon } from "../../Svgs/TTS-Icons/AudioSpeakerIcon";
-import { AudioPlayerBase } from "./PlayerBase";
-import "./audio.m.css";
-import PropTypes from "prop-types";
-import { useStateValue } from "../../SharedContext";
-import { getTextColor } from "../../../utils/utils";
-
-export function AudioPlayer({ audioUrl = "", enableDarkMode = false, listenButtonTitle, playBackSpeedTitle }) {
-  const [listenMode, setListenMode] = useState(false);
-  const config = useStateValue() || {};
-
-  return (
-    <>
-      {listenMode ? (
-        <AudioPlayerBase
-          setListenMode={setListenMode}
-          audioUrl={audioUrl}
-          listenButtonTitle={listenButtonTitle}
-          playBackSpeedTitle={playBackSpeedTitle}
-          enableDarkMode={enableDarkMode}
-        />
-      ) : (
-        <TtsCTAText
-          setListenMode={setListenMode}
-          listenButtonTitle={listenButtonTitle}
-          enableDarkMode={enableDarkMode}
-          config={config}
-        />
-      )}
-    </>
-  );
-}
-
-function TtsCTAText({ setListenMode, listenButtonTitle, enableDarkMode, config }) {
-  const styleName = enableDarkMode ? "audio-prompt-dark" : "audio-prompt";
-  const textColor = getTextColor(config.theme);
-
-  return (
-    <div styleName={`${styleName} hover-pointer`} data-test-id="audio-prompt" onClick={() => setListenMode(true)}>
-      <AudioSpeakerIcon isDarkMode={enableDarkMode} />
-      <span styleName={`audio-prompt-title ${textColor}`}>{listenButtonTitle || "Listen to this article"}</span>
-    </div>
-  );
-}
-
-AudioPlayer.propTypes = {
-  audioUrl: PropTypes.string,
-  enableDarkMode: PropTypes.bool,
-  listenButtonTitle: PropTypes.string,
-  playBackSpeedTitle: PropTypes.string
-};
-
-TtsCTAText.propTypes = {
-  setListenMode: PropTypes.func,
-  listenButtonTitle: PropTypes.string,
-  enableDarkMode: PropTypes.bool,
-  config: PropTypes.object
-};

package/src/components/Atoms/AudioPlayer/progressbar.m.css

@@ -1,48 +0,0 @@
-.progress-bar-dark,
-.progress-bar {
-  flex-grow: 1;
-  background-color: "#DBDBDB";
-  display: flex;
-  margin: 0 var(--arrow-spacing-xs);
-  input[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-    padding: 0;
-    width: 98%;
-    cursor: pointer;
-    outline: none;
-    border-radius: 16px;
-    height: 6px;
-    background: #ccc;
-  }
-
-  input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    height: 15px;
-    width: 15px;
-    background-color: #000000;
-    border-radius: 50%;
-    border: none;
-    transition: 0.2s ease-in-out;
-  }
-
-  input[type="range"]::-moz-range-thumb {
-    height: 15px;
-    width: 15px;
-    background-color: #000000;
-    border-radius: 50%;
-    border: none;
-    transition: 0.2s ease-in-out;
-  }
-}
-
-.progress-bar-dark {
-  input[type="range"]::-webkit-slider-thumb {
-    background-color: white;
-  }
-
-  input[type="range"]::-moz-range-thumb {
-    background-color: white;
-  }
-}

package/src/components/Atoms/Author/README.md

@@ -1,19 +0,0 @@
-# Author
-
-Displays the author for the story card based on the first author from the Story API reponse.
-
-## Usage
-
-```jsx
-<Author story={story} />
-```
-
-```jsx
-<Author story={story} hideAuthorImage />
-```
-
-```jsx
-<Author story={story} prefix="By" />
-```
-
-<!-- PROPS -->

package/src/components/Atoms/Author/author.m.css

@@ -1,62 +0,0 @@
-@custom-media --viewport-medium (width >=768px);
-
-.author {
-  display: flex;
-  align-items: center;
-  color: var(--arrow-c-mono4);
-}
-
-.author-image {
-  border-radius: 100%;
-  width: var(--arrow-spacing-l);
-  height: var(--arrow-spacing-l);
-  margin-right: var(--arrow-spacing-xs);
-  overflow: hidden;
-}
-
-.author-image figure,
-.author-image img {
-  /* width & height need to be explicitly set for improving CLS */
-  height: 100%;
-  width: 100%;
-}
-
-.author-name {
-  margin: auto var(--arrow-spacing-xs) auto 0;
-  word-break: break-all;
-}
-
-.prefix {
-  margin: auto var(--arrow-spacing-xxs) auto 0;
-}
-
-.rtl-image {
-  display: none;
-}
-
-html[dir="rtl"] {
-  .author-name {
-    margin-right: 0;
-  }
-
-  .prefix {
-    margin-right: 0;
-    margin-left: var(--arrow-spacing-xxs);
-  }
-
-  .ltr-image {
-    display: none;
-  }
-
-  .rtl-image {
-    display: block;
-  }
-}
-
-.dark {
-  color: var(--arrow-c-mono4);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono4);
-}

package/src/components/Atoms/Author/index.js

@@ -1,112 +0,0 @@
-import React from "react";
-import { useSelector, connect } from "react-redux";
-import PropTypes from "prop-types";
-import get from "lodash.get";
-import { useStateValue } from "../../SharedContext";
-import { Link } from "@quintype/components";
-import { getTextColor, getTheme } from "../../../utils/utils";
-import { ResponsiveLazyImg } from "../ResponsiveImg";
-
-import "./author.m.css";
-
-const AuthorBase = ({
-  story,
-  hideAuthorImage,
-  isBottom,
-  prefix = "",
-  config = {},
-  layout,
-  enableDarkModePreview = false
-}) => {
-  const configData = useStateValue() || {};
-  const isAuthor = get(configData, ["showAuthor"], true);
-  const { "avatar-url": avatarUrl, "avatar-s3-key": avatarS3Key, name: authorName, slug } = get(
-    story,
-    ["authors", "0"],
-    ""
-  );
-  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"]));
-  const theme = getTheme(configData, layout, enableDarkModePreview);
-  const textColor = getTextColor(theme);
-  const mountAt = get(config, ["mountAt"], "");
-
-  const authorImage = (dir) => {
-    if (!avatarUrl && !avatarS3Key) {
-      return null;
-    }
-    return (
-      <div styleName={`author-image ${dir}-image`} data-test-id="author-image" className="arr--author-image">
-        <figure>
-          {avatarS3Key ? (
-            <ResponsiveLazyImg
-              slug={avatarS3Key}
-              aspectRatio={[1, 1]}
-              defaultWidth={400}
-              imgParams={{ auto: ["format", "compress"] }}
-              alt={authorName}
-              isBotRequest={isBotRequest}
-            />
-          ) : (
-            <img src={avatarUrl} alt={authorName} />
-          )}
-        </figure>
-      </div>
-    );
-  };
-  const isPrefix = (dir) => {
-    if (prefix) {
-      return (
-        <div className="arr-author-prefix" styleName={`prefix ${textColor}`}>
-          {prefix}
-        </div>
-      );
-    }
-    return !hideAuthorImage && authorImage(dir);
-  };
-  return (
-    <>
-      {isAuthor && (
-        <Link
-          className="author-name arr-author-name arrow-component"
-          href={`${mountAt}/author/` + slug}
-          styleName="author"
-          aria-label="author-name">
-          {isPrefix("ltr")}
-          <div className="author-name" styleName={`author-name ${textColor}`} data-test-id="author-name">
-            {authorName || story["author-name"]}
-          </div>
-          {!prefix && isPrefix("rtl")}
-        </Link>
-      )}
-    </>
-  );
-};
-
-function mapStateToProps(state) {
-  return {
-    config: get(state, ["qt", "config"], {})
-  };
-}
-
-export const Author = connect(mapStateToProps)(AuthorBase);
-
-AuthorBase.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes.object.isRequired,
-  /** Hide Author Avatar Image */
-  hideAuthorImage: PropTypes.bool,
-  // fix Author bottom of the storyCard
-  isBottom: PropTypes.bool,
-  // fix prefix before the author name
-  prefix: PropTypes.string,
-  config: PropTypes.object,
-  layout: PropTypes.string,
-  enableDarkModePreview: PropTypes.bool
-};
-
-AuthorBase.defaultProps = {
-  hideAuthorImage: false,
-  isBottom: false,
-  prefix: "",
-  layout: ""
-};

package/src/components/Atoms/Author/stories.js

@@ -1,23 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import { Author } from "./index";
-import Readme from "./README.md";
-
-const story = generateStory();
-
-withStore(
-  "Atoms/Author",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-)
-  .add("With Author Image", () => <Author story={story} />)
-  .add("With Prefix", () => <Author story={story} prefix="By" />)
-  .add("Without Author Image", () => <Author story={story} hideAuthorImage />);