{"version":3,"file":"component---src-theme-organisms-category-banner-border-index-ts-8dece86e9e1507526d9b.js","mappings":"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","sources":["webpack://rlx-react-app-gatsby/./src/svg/Arrow.tsx","webpack://rlx-react-app-gatsby/./src/theme/organisms/CategoryBannerBorder/CategoryBannerBorder.tsx","webpack://rlx-react-app-gatsby/./.cache/gatsby-plugin-graphql-component/components/e17d2c7e-bb15-5991-9fa5-2ffb094138bc.js"],"sourcesContent":["import * as React from 'react'\n\ntype Props = {\n  color?: string\n}\n\nexport default function Arrow(props: Props) {\n  let color = props.color || '#262626'\n  return (\n    <svg\n      width=\"42px\"\n      height=\"9px\"\n      viewBox=\"0 0 42 9\"\n      version=\"1.1\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Line 4</title>\n      <g id=\"shop-design\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n        <g\n          id=\"desktop-home-wide-full\"\n          transform=\"translate(-882.000000, -1020.000000)\"\n          fill={color}\n          fillRule=\"nonzero\"\n        >\n          <g id=\"Group-7\" transform=\"translate(140.000000, 870.000000)\">\n            <g id=\"teaser-02\" transform=\"translate(600.000000, 0.000000)\">\n              <g id=\"button\" transform=\"translate(41.000000, 139.000000)\">\n                <path\n                  id=\"Line-4\"\n                  d=\"M133.5,11 L142.5,15.5 L133.5,20 L133.5,16 L101.5,16 L101.5,15 L133.5,15 L133.5,11 Z\"\n                ></path>\n              </g>\n            </g>\n          </g>\n        </g>\n      </g>\n    </svg>\n  )\n}\n","import useLazyImageSrc from 'hooks/useLazyImageSrc'\nimport * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport * as t from './types'\nimport ty from 'utils/typographie'\nimport ArrowSvg from 'svg/Arrow'\nimport Link from 'theme/atoms/Link'\nimport { ms } from 'modules/browser/const'\nimport useInView from 'hooks/useInView'\nimport * as actions from './actions'\n\nexport default function CategoryBannerBorder(props: t.Props) {\n  const [ref, image] = useLazyImageSrc(\n    props.context.optImg,\n    props.context.base64,\n    100,\n  )\n  const [wrapperRef, inView] = useInView()\n  const wasInView = React.useRef(false)\n\n  React.useEffect(() => {\n    if (inView && !wasInView.current) {\n      wasInView.current = true\n      props.eecTrack && actions.scrollIntoView(props)\n    }\n  }, [inView, props])\n\n  const handleClick = () => props.eecTrack && actions.click(props)\n\n  return (\n    <Wrapper\n      overlayPosition={props.overlayPosition}\n      overlayPositionTopBottom={props.overlayPositionTopBottom}\n      ref={wrapperRef}\n      onClick={handleClick}\n      to={props.link}\n    >\n      <div className=\"border\"></div>\n      <Label\n        overlayPosition={props.overlayPosition}\n        overlayPositionTopBottom={props.overlayPositionTopBottom}\n      >\n        <div className=\"content\">\n          <h3 className=\"title\">{props.title}</h3>\n          <div className=\"subtitle\" dangerouslySetInnerHTML={{ __html: props.subtitle }} />\n          <div className=\"link\">\n            <span>\n              {props.linktext} <ArrowSvg />\n            </span>\n          </div>\n        </div>\n        <img ref={ref} src={image} alt={props.alt}></img>\n      </Label>\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Link)`\n  position: relative;\n  display: block;\n  text-decoration: none;\n  color: #262626;\n  &:hover {\n    color: #262626;\n  }\n\n  > .border {\n    position: absolute;\n    top: 0%;\n    width: calc(100% - 15px);\n    height: calc(100% - 15px);\n    border: 1.35px solid #555555;\n    margin-bottom: 15px;\n\n    ${(props) =>\n      props.overlayPosition === 'left'\n        ? css``\n        : css`\n            margin-left: 15px;\n          `};\n\n    @media (min-width: ${ms.LAPTOP_L}px) {\n      width: calc(100% - 30px);\n      height: calc(100% - 40px);\n    }\n  }\n`\nconst Label = styled.div`\n  display: grid;\n  overflow: hidden;\n  grid-template-columns: repeat(1, 1fr);\n  width: 100%;\n\n  > .content {\n    z-index: 3;\n    width: 100%;\n\n    ${(props) =>\n      props.overlayPositionTopBottom === 'top'\n        ? css`\n            order: 0;\n            margin-top: 20px;\n            margin-bottom: 10px;\n\n            @media (min-width: ${ms.LAPTOP_L}px) {\n              margin-top: 30px;\n            }\n          `\n        : css`\n            order: 2;\n            margin-top: 15px;\n            margin-bottom: 30px;\n          `};\n\n    ${(props) =>\n      props.overlayPosition === 'left'\n        ? css`\n            text-align: left;\n            padding-left: 15px;\n            padding-right: 30px;\n\n            @media (min-width: ${ms.LAPTOP_L}px) {\n              padding-left: 40px;\n              padding-right: 80px;\n            }\n          `\n        : css`\n            text-align: right;\n            padding-left: 30px;\n            padding-right: 15px;\n\n            @media (min-width: ${ms.LAPTOP_L}px) {\n              padding-left: 80px;\n              padding-right: 40px;\n            }\n          `};\n\n    > .title {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n      margin: 0;\n      ${ty([22, 0.84, 28], 'Cormorant Garamond', '500')}\n      margin-bottom: 10px;\n\n      @media (min-width: ${ms.LAPTOP_L}px) {\n        ${ty([26, 0.46, 36], 'Cormorant Garamond', '500')}\n        margin-bottom: 15px;\n      }\n    }\n    > .subtitle {\n      min-height: 60px;\n      margin-bottom: 10px;\n\n      > p {\n        height: 60px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 3;\n        margin: 0px;\n        color: #262626;\n        ${ty([14, 0.42, 20], 'Open Sans')}\n\n        @media (min-width: ${ms.LAPTOP_L}px) {\n          ${ty([16, 0.48, 24], 'Open Sans')}\n          height: 72px;\n        }\n      }\n\n      @media (min-width: ${ms.LAPTOP_L}px) {\n        margin-bottom: 15px;\n      }\n    }\n\n    > .link {\n      > span {\n        ${ty([16, 0.51, 20], 'Cormorant Garamond', 'normal', 'italic')}\n        color: #262626;\n        text-decoration: none;\n\n        @media (min-width: ${ms.LAPTOP_L}px) {\n          ${ty([18, 0.34, 26], 'Cormorant Garamond')}\n        }\n        > svg {\n          margin-left: 14px;\n        }\n      }\n      a:visited {\n        color: #262626;\n      }\n    }\n  }\n\n  > img {\n    width: 100%;\n\n    ${(props) =>\n      props.overlayPosition === 'left'\n        ? css`\n            padding-left: 15px;\n\n            @media (min-width: ${ms.LAPTOP_L}px) {\n              padding-left: 40px;\n            }\n          `\n        : css`\n            padding-right: 15px;\n\n            @media (min-width: ${ms.LAPTOP_L}px) {\n              padding-right: 40px;\n            }\n          `};\n  }\n`\n","\n  const { hot } = require(\"react-hot-loader/root\")\n  import Component from \"/opt/build/repo/src/theme/organisms/CategoryBannerBorder/index.ts\"\n\n  export default hot(Component)\n  "],"names":["Arrow","props","color","width","height","viewBox","version","xmlns","id","stroke","strokeWidth","fill","fillRule","transform","d","CategoryBannerBorder","useLazyImageSrc","context","optImg","base64","ref","image","useInView","wrapperRef","inView","wasInView","React","current","eecTrack","actions","Wrapper","overlayPosition","overlayPositionTopBottom","onClick","to","link","className","Label","title","dangerouslySetInnerHTML","__html","subtitle","linktext","src","alt","styled","Link","css","ms","ty","hot","require","Component"],"sourceRoot":""}