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

package/src/components/Atoms/SocialSharePopup/social-share-popup.m.css

@@ -0,0 +1,287 @@
+@import "../../../../assets/stylesheets/mixins.scss";
+
+.custom-popup-wrapper,
+.basic-popup-wrapper {
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-m) 40px;
+  border-radius: var(--arrow-spacing-xs) var(--arrow-spacing-xs) 0 0;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1101;
+  @include desktop {
+    padding: 14px 14px var(--arrow-spacing-s);
+    width: 274px;
+    border-radius: var(--arrow-spacing-m);
+    position: absolute;
+    top: 56px;
+    right: unset;
+    bottom: unset;
+    z-index: 99;
+  }
+}
+
+.custom-popup-wrapper {
+  @include desktop {
+    top: 54px;
+    left: unset;
+  }
+}
+
+.content-width-2 {
+  @include desktop {
+    width: 124px;
+  }
+}
+
+.content-width-3 {
+  @include desktop {
+    width: 174px;
+  }
+}
+
+.content-width-4 {
+  @include desktop {
+    width: 224px;
+  }
+}
+
+.content-width-5 {
+  @include desktop {
+    width: 274px;
+  }
+}
+
+.content-width-6 {
+  @include desktop {
+    width: 324px;
+  }
+}
+
+.dark.custom-popup-wrapper,
+.dark.basic-popup-wrapper {
+  background-color: var(--arrow-c-light);
+  box-shadow: 0px -2px 18px 0px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.light.custom-popup-wrapper,
+.light.basic-popup-wrapper {
+  background-color: var(--arrow-c-dark);
+  box-shadow: 0px -2px 18px 0px rgba(0, 0, 0, 0.14);
+  border: 1px solid rgba(0, 0, 0, 0.14);
+}
+
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--arrow-spacing-xs);
+}
+
+.close {
+  cursor: pointer;
+  padding: var(--arrow-spacing-xxs) 0 var(--arrow-spacing-xxs) var(--arrow-spacing-xxs);
+}
+
+.share-text {
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-semi-bold);
+}
+
+.dark .share-text {
+  color: #000000;
+}
+
+.light .share-text {
+  color: #ffffff;
+}
+
+.share-icon-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.icon-wrapper {
+  list-style-type: none;
+  cursor: pointer;
+  padding: 6px;
+  margin: 6px var(--arrow-spacing-xs) 0 0;
+  border-radius: 2px;
+  width: 44px;
+  height: 44px;
+  flex-shrink: 0;
+  @include desktop {
+    margin: 6px 0 0 6px;
+  }
+}
+
+.dark .icon-wrapper {
+  background-color: var(--arrow-c-accent5);
+}
+
+.light .icon-wrapper {
+  background-color: #ffffff12;
+}
+
+.dark.custom-popup-wrapper::before,
+.dark.basic-popup-wrapper::before {
+  color: var(--arrow-c-light);
+}
+
+.light.custom-popup-wrapper::before,
+.light.basic-popup-wrapper::before {
+  color: var(--arrow-c-dark);
+}
+
+.triangle {
+  @include desktop {
+    position: absolute;
+    width: 16px;
+    height: 14px;
+    background-color: rgba(0, 0, 0, 0.1);
+    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+    top: -13px;
+    z-index: 9;
+  }
+}
+
+.triangle::after {
+  @include desktop {
+    content: "";
+    position: absolute;
+    top: 2px;
+    width: 14px;
+    height: 12px;
+    background-color: var(--arrow-c-light);
+    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+    box-sizing: border-box;
+    z-index: -1;
+  }
+}
+
+.light .triangle {
+  background-color: rgba(0, 0, 0, 0.14);
+}
+
+.light .triangle::after {
+  background-color: var(--arrow-c-dark);
+}
+
+html[dir="ltr"] {
+  .basic-popup-wrapper .triangle {
+    @include desktop {
+      left: 32px;
+    }
+  }
+  .basic-popup-wrapper .triangle::after {
+    @include desktop {
+      left: 1px;
+    }
+  }
+
+  .basic-popup-wrapper {
+    @include desktop {
+      left: 0%;
+    }
+  }
+
+  .custom-popup-wrapper .triangle {
+    @include desktop {
+      right: 14px;
+    }
+  }
+  .custom-popup-wrapper .triangle::after {
+    @include desktop {
+      right: 1px;
+    }
+  }
+
+  .custom-popup-wrapper {
+    @include desktop {
+      right: 0;
+    }
+  }
+
+  .share-icon-wrapper :nth-child(1),
+  .share-icon-wrapper :nth-child(7) {
+    @include desktop {
+      margin-left: 0;
+    }
+  }
+}
+
+html[dir="rtl"] {
+  .basic-popup-wrapper .triangle {
+    @include desktop {
+      right: 32px;
+    }
+  }
+
+  .basic-popup-wrapper .triangle::after {
+    @include desktop {
+      right: 1px;
+    }
+  }
+
+  .icon-wrapper {
+    margin: 6px 6px 0 0;
+  }
+
+  .basic-popup-wrapper {
+    @include desktop {
+      right: 0%;
+    }
+  }
+
+  .custom-popup-wrapper .triangle {
+    @include desktop {
+      left: 14px;
+    }
+  }
+
+  .custom-popup-wrapper .triangle::after {
+    @include desktop {
+      left: 1px;
+    }
+  }
+
+  .custom-popup-wrapper {
+    @include desktop {
+      left: 0;
+    }
+  }
+
+  .share-icon-wrapper :nth-child(1),
+  .share-icon-wrapper :nth-child(7) {
+    @include desktop {
+      margin-right: 0;
+    }
+  }
+}
+
+.icon-wrapper :global(.copied-msg) {
+  position: absolute;
+  padding: 5px;
+  border-radius: 3px;
+  pointer-events: none;
+  transform: translate(-50%, -100%);
+  white-space: nowrap;
+  z-index: 1000;
+}
+
+.icon-wrapper :global(.copied-msg.hidden) {
+  display: none;
+}
+
+.dark .icon-wrapper :global(.copied-msg) {
+  background-color: #333;
+  color: white;
+}
+
+.light .icon-wrapper :global(.copied-msg) {
+  background-color: #333;
+  color: white;
+}

package/src/components/Atoms/SocialSharePopup/social-share-popup.test.js

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { shallow } from "enzyme";
+import { SocialSharePopup } from "./index";
+
+describe("Social Share Template", () => {
+  it("Should render social share popup", () => {
+    const data = {
+      fbUrl: "https://www.facebook.com",
+      twitterUrl: "https://twitter.com/",
+      linkedinUrl: "https://twitter.com/",
+      whatsappUrl: "https://twitter.com/",
+      redditUrl: "https://www.reddit.com/",
+      theme: "#ffff",
+      iconType: "plain-svg",
+      closePopup: "",
+      socialShareIconsOrder: ["facebook"]
+    };
+    const wrapper = shallow(<SocialSharePopup {...data} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Should not render facebook icon if url not passed", () => {
+    const data = {
+      fbUrl: "",
+      twitterUrl: "https://twitter.com/",
+      linkedinUrl: "https://twitter.com/",
+      whatsappUrl: "https://twitter.com/",
+      redditUrl: "https://www.reddit.com/",
+      theme: "#ffff",
+      iconType: "plain-svg",
+      closePopup: "",
+      socialShareIconsOrder: ["facebook"]
+    };
+    const wrapper = shallow(<SocialSharePopup {...data} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Should not render twitter icon if url not passed", () => {
+    const data = {
+      fbUrl: "https://twitter.com/",
+      twitterUrl: "",
+      linkedinUrl: "https://twitter.com/",
+      whatsappUrl: "https://twitter.com/",
+      theme: "#ffff",
+      iconType: "plain-svg",
+      vertical: true,
+      closePopup: "",
+      socialShareIconsOrder: ["facebook"]
+    };
+    const wrapper = shallow(<SocialSharePopup {...data} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Should not render whatsapp icon if url not passed", () => {
+    const data = {
+      fbUrl: "https://twitter.com/",
+      twitterUrl: "https://twitter.com/",
+      linkedinUrl: "https://twitter.com/",
+      whatsappUrl: "",
+      theme: "#ffff",
+      iconType: "plain-svg",
+      vertical: true,
+      closePopup: "",
+      socialShareIconsOrder: ["facebook"]
+    };
+    const wrapper = shallow(<SocialSharePopup {...data} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Should not render linkedin icon if url not passed", () => {
+    const data = {
+      fbUrl: "https://twitter.com/",
+      twitterUrl: "https://twitter.com/",
+      linkedinUrl: "",
+      whatsappUrl: "https://twitter.com/",
+      theme: "#ffff",
+      iconType: "plain-svg",
+      vertical: true,
+      closePopup: "",
+      socialShareIconsOrder: ["facebook"]
+    };
+    const wrapper = shallow(<SocialSharePopup {...data} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Should render template if theme and icon is not passed", () => {
+    const data = {
+      fbUrl: "https://twitter.com/",
+      twitterUrl: "https://twitter.com/",
+      linkedinUrl: "https://twitter.com/",
+      whatsappUrl: "https://twitter.com/",
+      theme: "",
+      iconType: "plain-svg",
+      vertical: true,
+      closePopup: "",
+      socialShareIconsOrder: ["facebook"]
+    };
+    const wrapper = shallow(<SocialSharePopup {...data} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { SocialSharePopup } from "./index";
+import Readme from "./README.md";
+
+const props = {
+  fbUrl: "https://www.facebook.com",
+  fullUrl:
+    "https://ace-web.qtstage.io/anything/recent-stories/newsready-player-one-review-spielberg-spins-a-dizzying-vr-yarn",
+  iconType: "plain-svg",
+  linkedinUrl: "https://www.linkedin.com",
+  mailtoUrl:
+    "mailto:?subject=Ready%20Player%20One%20review%20%E2%80%93%20Spielberg%C2%A0&body=https%3A%2F%2Face-web.qtstage.io%2Fanything%2Frecent-stories%2Fnews%2Fready-player-one-review-spielberg-spins-a-dizzying-vr-yarn",
+  publisherUrl: undefined,
+  theme: "#ffffff",
+  title: "Ready Player One review – Spielberg ",
+  twitterUrl: "https://twitter.com"
+};
+withStore("Atoms/Social Share Popup", {}, Readme).add("default", () => <SocialSharePopup {...props} />);

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

@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { getTextColor } from "../../../utils/utils";
+import { useSelector } from "react-redux";
+import get from "lodash.get";
+import "./sponsored-lable.m.css";
+
+export function SponsoredLabel({ story, sponsoredStoryConfig, isStoryPage }) {
+  const storyMetaData = get(story, ["metadata"], {});
+  const isSponsoredStory = storyMetaData.hasOwnProperty("sponsored-by");
+  if (!isSponsoredStory) return null;
+
+  const storySponsoredBy = get(storyMetaData, ["sponsored-by"], "");
+  const enableDarkMode = useSelector((state) => get(state, ["header", "isDarkModeEnabled"], false));
+  const {
+    sponsoredStoryPageLabel,
+    sponsoredLabelColor,
+    sponsoredLabelDarkColor,
+    sponsoredStoryRowLabel
+  } = sponsoredStoryConfig;
+
+  const sponsoredBy = sponsoredStoryPageLabel || `Sponsored by`;
+  const storyPageLabel = sponsoredBy + `: ${storySponsoredBy}`;
+  const storyRowLabel = sponsoredStoryRowLabel || "Sponsored";
+
+  const labelText = isStoryPage ? storyPageLabel : storyRowLabel;
+  const labelStyle = isStoryPage ? "story-label" : "card-label";
+
+  const lightBgColor = sponsoredLabelColor || "#E6E6E6";
+  const darkBgColor = sponsoredLabelDarkColor || "#404040";
+  const labelBgColor = enableDarkMode ? darkBgColor : lightBgColor;
+  const textColor = getTextColor(labelBgColor) === "light" ? "#ffffff" : "#000000";
+
+  return (
+    <div
+      style={{ background: labelBgColor, color: textColor }}
+      styleName={`sponsored-label ${labelStyle}`}
+      data-test-id={isStoryPage ? "sponsored-tag" : "sponsored-tag-cards"}>
+      {labelText}
+    </div>
+  );
+}
+
+SponsoredLabel.propTypes = {
+  story: PropTypes.object,
+  sponsoredStoryConfig: PropTypes.object,
+  isStoryPage: PropTypes.bool
+};
+
+SponsoredLabel.defaultProps = {
+  isStoryPage: false
+};

package/src/components/Atoms/SponsoredLabel/sponsored-lable.m.css

@@ -0,0 +1,17 @@
+.sponsored-label {
+  display: flex;
+  align-items: center;
+  border-radius: var(--arrow-spacing-xxs);
+  padding: 2px var(--arrow-spacing-xxs);
+  font-size: var(--arrow-fs-tiny);
+  font-weight: 450;
+  max-width: fit-content;
+}
+
+.story-label {
+  margin: var(--arrow-spacing-xxs) 0 12px 0;
+}
+
+.card-label {
+  margin: var(--arrow-spacing-xxs) 0;
+}

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

@@ -0,0 +1,127 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { PhotoIcon1, PhotoIcon2, PhotoIcon3, PhotoIcon4 } from "../../Svgs/photo-icons";
+import { VideoIcon1, VideoIcon2, VideoIcon3, VideoIcon4, VideoIcon5 } from "../../Svgs/video-icons";
+import { VisualStoryIcon1, VisualStoryIcon2, VisualStoryIcon3, VisualStoryIcon4 } from "../../Svgs/visual-story-icons";
+
+function PhotoDemarcationIcon({ iconConfig, enableDarkMode, iconColor, darkIconColor }) {
+  const { enablePhotoDemarcationIcon = false, iconStyle } = iconConfig || {};
+  if (!enablePhotoDemarcationIcon) return <></>;
+
+  const iconBackground = (enableDarkMode ? darkIconColor : iconColor) || "#000000";
+  switch (iconStyle) {
+    case "photoIcon2":
+      return <PhotoIcon2 background={iconBackground} />;
+    case "photoIcon3":
+      return <PhotoIcon3 background={iconBackground} />;
+    case "photoIcon4":
+      return <PhotoIcon4 background={iconBackground} />;
+    default:
+      return <PhotoIcon1 background={iconBackground} />;
+  }
+}
+
+function VideoDemarcationIcon({ iconConfig, enableDarkMode, iconColor, darkIconColor }) {
+  const { enableVideoDemarcationIcon = false, iconStyle } = iconConfig || {};
+  if (!enableVideoDemarcationIcon) return <></>;
+
+  const iconBackground = (enableDarkMode ? darkIconColor : iconColor) || "#000000";
+  switch (iconStyle) {
+    case "videoIcon2":
+      return <VideoIcon2 background={iconBackground} />;
+    case "videoIcon3":
+      return <VideoIcon3 background={iconBackground} />;
+    case "videoIcon4":
+      return <VideoIcon4 background={iconBackground} />;
+    case "videoIcon5":
+      return <VideoIcon5 background={iconBackground} />;
+    default:
+      return <VideoIcon1 background={iconBackground} />;
+  }
+}
+
+function VisualStoryDemarcationIcon({ iconConfig, enableDarkMode, iconColor, darkIconColor }) {
+  const { enableVisualStoryDemarcationIcon = false, iconStyle } = iconConfig || {};
+  if (!enableVisualStoryDemarcationIcon) return <></>;
+
+  const iconBackground = (enableDarkMode ? darkIconColor : iconColor) || "#000000";
+  switch (iconStyle) {
+    case "visualStoryIcon2":
+      return <VisualStoryIcon2 background={iconBackground} />;
+    case "visualStoryIcon3":
+      return <VisualStoryIcon3 background={iconBackground} />;
+    case "visualStoryIcon4":
+      return <VisualStoryIcon4 background={iconBackground} />;
+    default:
+      return <VisualStoryIcon1 background={iconBackground} />;
+  }
+}
+
+export function StoryDemarcationIcon({ storyTemplate, rowsConfig = {}, enableDarkMode }) {
+  const {
+    photoDemarcationIcon = {},
+    videoDemarcationIcon = {},
+    visualStoryDemarcationIcon = {},
+    iconColor,
+    darkIconColor
+  } = rowsConfig || {};
+
+  switch (storyTemplate) {
+    case "photo":
+      return (
+        <PhotoDemarcationIcon
+          iconConfig={photoDemarcationIcon}
+          enableDarkMode={enableDarkMode}
+          iconColor={iconColor}
+          darkIconColor={darkIconColor}
+        />
+      );
+    case "video":
+      return (
+        <VideoDemarcationIcon
+          iconConfig={videoDemarcationIcon}
+          enableDarkMode={enableDarkMode}
+          iconColor={iconColor}
+          darkIconColor={darkIconColor}
+        />
+      );
+    case "visual-story":
+      return (
+        <VisualStoryDemarcationIcon
+          iconConfig={visualStoryDemarcationIcon}
+          enableDarkMode={enableDarkMode}
+          iconColor={iconColor}
+          darkIconColor={darkIconColor}
+        />
+      );
+    default:
+      return <></>;
+  }
+}
+
+StoryDemarcationIcon.propTypes = {
+  storyTemplate: PropTypes.string,
+  rowsConfig: PropTypes.object,
+  enableDarkMode: PropTypes.bool
+};
+
+VideoDemarcationIcon.propTypes = {
+  iconConfig: PropTypes.object,
+  enableDarkMode: PropTypes.bool,
+  iconColor: PropTypes.string,
+  darkIconColor: PropTypes.string
+};
+
+VisualStoryDemarcationIcon.propTypes = {
+  iconConfig: PropTypes.object,
+  enableDarkMode: PropTypes.bool,
+  iconColor: PropTypes.string,
+  darkIconColor: PropTypes.string
+};
+
+PhotoDemarcationIcon.propTypes = {
+  iconConfig: PropTypes.object,
+  enableDarkMode: PropTypes.bool,
+  iconColor: PropTypes.string,
+  darkIconColor: PropTypes.string
+};

package/src/components/Atoms/StoryElements/AISummary/ai-icons.js

@@ -0,0 +1,51 @@
+import React from "react";
+
+export const AI_ICONS = {
+  star: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M5.825 21L7.45 13.975L2 9.25L9.2 8.625L12 2L14.8 8.625L22 9.25L16.55 13.975L18.175 21L12 17.275L5.825 21ZM17.25 7L17.775 4.775L16 3.3L18.35 3.1L19.25 1L20.15 3.1L22.5 3.3L20.725 4.775L21.25 7L19.25 5.825L17.25 7Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  sparkle: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <g clipPath="url(#clip0_6169_488)">
+        <path
+          d="M12 0C11.4591 4.41494 11.2803 7.21839 10.2234 9.02811C8.4958 11.2775 5.50126 11.4917 0 12C5.41209 12.6548 8.33831 12.7968 10.071 14.8574C11.3655 16.6815 11.5845 19.5033 12 24C12.7057 18.168 12.8162 15.2229 15.3734 13.547C17.1915 12.6688 19.9046 12.4771 24 12C18.9219 11.3779 15.9755 11.2347 14.2214 9.68344C12.7382 7.91523 12.58 4.97914 12 0Z"
+          fill="currentColor"
+        />
+        <path d="M18 8L18.94 5.94L21 5L18.94 4.06L18 2L17.06 4.06L15 5L17.06 5.94L18 8Z" fill="currentColor" />
+      </g>
+      <defs>
+        <clipPath id="clip0_6169_488">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  ),
+  wand: (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m14.06 9.02.92.92L5.92 19H5v-.92zM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94zM11 5l.627-1.373L13 3l-1.373-.627L11 1l-.627 1.373L9 3l1.373.627zm-5 5 .94-2.06L9 7l-2.06-.94L6 4l-.94 2.06L3 7l2.06.94zm12 5-.94 2.06L15 18l2.06.94L18 21l.94-2.06L21 18l-2.06-.94z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  diamond: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M9.93743 15.5C9.84815 15.1539 9.66777 14.8381 9.41505 14.5854C9.16232 14.3327 8.8465 14.1523 8.50043 14.063L2.36543 12.481C2.26076 12.4513 2.16864 12.3883 2.10304 12.3014C2.03744 12.2146 2.00195 12.1088 2.00195 12C2.00195 11.8912 2.03744 11.7854 2.10304 11.6986C2.16864 11.6118 2.26076 11.5487 2.36543 11.519L8.50043 9.93601C8.84638 9.84681 9.16212 9.66658 9.41483 9.41404C9.66754 9.16151 9.84799 8.84589 9.93743 8.50001L11.5194 2.36501C11.5488 2.25992 11.6118 2.16735 11.6987 2.1014C11.7857 2.03545 11.8918 1.99976 12.0009 1.99976C12.11 1.99976 12.2162 2.03545 12.3031 2.1014C12.39 2.16735 12.453 2.25992 12.4824 2.36501L14.0634 8.50001C14.1527 8.84608 14.3331 9.1619 14.5858 9.41462C14.8385 9.66734 15.1544 9.84773 15.5004 9.93701L21.6354 11.518C21.7409 11.5471 21.834 11.61 21.9003 11.6971C21.9666 11.7841 22.0025 11.8906 22.0025 12C22.0025 12.1094 21.9666 12.2159 21.9003 12.3029C21.834 12.39 21.7409 12.4529 21.6354 12.482L15.5004 14.063C15.1544 14.1523 14.8385 14.3327 14.5858 14.5854C14.3331 14.8381 14.1527 15.1539 14.0634 15.5L12.4814 21.635C12.452 21.7401 12.389 21.8327 12.3021 21.8986C12.2152 21.9646 12.109 22.0003 11.9999 22.0003C11.8908 22.0003 11.7847 21.9646 11.6977 21.8986C11.6108 21.8327 11.5478 21.7401 11.5184 21.635L9.93743 15.5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M20 3V7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M22 5H18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M4 17V19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M5 18H3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+};