{"version":3,"file":"component---src-theme-organisms-category-banner-border-horizontal-index-ts-ae8b895ee36eff522ae1.js","mappings":"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","sources":["webpack://rlx-react-app-gatsby/./src/svg/Arrow.tsx","webpack://rlx-react-app-gatsby/./src/theme/organisms/CategoryBannerBorderHorizontal/CategoryBannerBorderHorizontal.tsx","webpack://rlx-react-app-gatsby/./.cache/gatsby-plugin-graphql-component/components/e28ce142-2241-532b-a516-93d0d9769c15.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 CategoryBannerBorderHorizontal(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 ref={wrapperRef} onClick={handleClick} to={props.link}>\n      <Label\n        overlayPosition={props.overlayPosition}\n        image={image}\n        overlayPositionTopBottom={props.overlayPositionTopBottom}\n        xPositionFocus={props.xPositionFocus}\n        yPositionFocus={props.yPositionFocus}\n      >\n        <div className=\"background-image\" ref={ref}>\n          <span></span>\n        </div>\n        <div className=\"content\">\n          <h3 className=\"title\">{props.title}</h3>\n          <div className=\"subtitle\" dangerouslySetInnerHTML={{ __html: props.subtitle }} />\n          <span>\n            {props.linktext} <ArrowSvg />\n          </span>\n        </div>\n      </Label>\n      <div className=\"border\"></div>\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Link)`\n  position: relative;\n  border: 1.35px solid #eeeced;\n  text-decoration: none;\n  display: block;\n\n  @media (min-width: ${ms.LAPTOP}px) {\n    margin-right: 0px;\n  }\n\n  > .border {\n    position: absolute;\n    top: 0%;\n    width: calc(100% - 30px);\n    height: calc(100% - 30px);\n    border: 1.35px solid #555555;\n    margin: 15px;\n\n    @media (min-width: ${ms.TABLET}px) {\n      width: calc(100% - 40px);\n      height: calc(100% - 40px);\n      margin: 20px;\n    }\n  }\n`\n\nconst Label = styled.div`\n  display: grid;\n  overflow: hidden;\n  grid-template-columns: repeat(1, 1fr);\n  grid-auto-rows: 1fr;\n  width: 100%;\n\n  @media (min-width: ${ms.TABLET}px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  > .background-image {\n    background-image: url(${(props) => props.image});\n    background-position-x: ${(props) => props.xPositionMobile}%;\n    background-position-y: ${(props) => props.yPositionMobile}%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    height: 100%;\n\n    @media (min-width: ${ms.TABLET}px) {\n      background-position-x: ${(props) => props.xPositionTablet}%;\n      background-position-y: ${(props) => props.yPositionTablet}%;\n      ${(props) =>\n        props.overlayPosition === 'left'\n          ? css`\n              order: 0;\n            `\n          : css`\n              order: 2;\n            `};\n    }\n\n    @media (min-width: ${ms.LAPTOP_L}px) {\n      background-position-x: ${(props) => props.xPositionDesktop}%;\n      background-position-y: ${(props) => props.yPositionDesktop}%;\n    }\n\n    @media (max-width: ${ms.TABLET}px) {\n      ${(props) =>\n        props.overlayPositionTopBottom === 'top'\n          ? css`\n              order: 0;\n            `\n          : css`\n              order: 2;\n            `};\n    }\n  }\n\n  > .content {\n    z-index: 3;\n    margin-left: 30px;\n    margin-right: 30px;\n    order: 1;\n\n    @media (max-width: ${ms.TABLET}px) {\n      ${(props) =>\n        props.overlayPositionTopBottom === 'top'\n          ? css`\n              margin-top: 20px;\n              margin-bottom: 15px;\n              padding-bottom: 35px;\n            `\n          : css`\n              margin-top: 15px;\n              margin-bottom: 20px;\n              padding-top: 20px;\n            `};\n    }\n\n    @media (min-width: ${ms.TABLET}px) {\n      margin-top: 40px;\n      margin-bottom: 30px;\n      ${(props) =>\n        props.overlayPosition === 'left'\n          ? css`\n              padding-bottom: 20px;\n            `\n          : css`\n              padding-left: 10px;\n            `};\n    }\n\n    @media (min-width: ${ms.LAPTOP}px) {\n      margin-top: 50px;\n      margin-bottom: 40px;\n      ${(props) =>\n        props.overlayPosition === 'left'\n          ? css`\n              padding-left: 10px;\n              padding-right: 20px;\n            `\n          : css`\n              padding-left: 20px;\n            `};\n    }\n\n    @media (min-width: ${ms.LAPTOP_L}px) {\n      margin-top: 70px;\n      margin-bottom: 70px;\n      margin-right: 20px;\n      margin-left: 0px;\n      ${(props) =>\n        props.overlayPosition === 'left'\n          ? css`\n              padding-left: 40px;\n              padding-right: 40px;\n            `\n          : css`\n              padding-left: 20px;\n            `};\n    }\n\n    > .title {\n      margin: 0;\n      margin-bottom: 10px;\n      ${ty([22, 0.84, 28], 'Cormorant Garamond', '500')}\n      max-height: 56px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n      color: #555;\n\n      @media (min-width: ${ms.LAPTOP_L}px) {\n        ${ty([26, 0.46, 36], 'Cormorant Garamond', '500')}\n        max-height: 68px;\n        margin-bottom: 15px;\n      }\n    }\n\n    > .subtitle {\n      margin-bottom: 10px;\n      min-height: 60px;\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      > p {\n        margin: 0px;\n        color: #262626;\n        ${ty([14, 0.42, 20], 'Open Sans')}\n\n        @media (min-width: ${ms.LAPTOP_L}px) {\n          margin-bottom: 35px;\n          ${ty([16, 0.48, 24])}\n        }\n      }\n\n      @media (min-width: ${ms.LAPTOP_L}px) {\n        margin-bottom: 35px;\n        height: 72px;\n      }\n    }\n\n    > span {\n      ${ty([16, 0.51, 20], 'Cormorant Garamond', 'normal', 'italic')}\n      text-decoration: none;\n      color: #262626;\n\n      @media (min-width: ${ms.LAPTOP_L}px) {\n        ${ty([18, 0.34, 26], 'Cormorant Garamond')}\n      }\n\n      > svg {\n        margin-left: 14px;\n      }\n    }\n    a:visited {\n      color: #262626;\n    }\n  }\n`\n","\n  const { hot } = require(\"react-hot-loader/root\")\n  import Component from \"/opt/build/repo/src/theme/organisms/CategoryBannerBorderHorizontal/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","CategoryBannerBorderHorizontal","useLazyImageSrc","context","optImg","base64","ref","image","useInView","wrapperRef","inView","wasInView","React","current","eecTrack","actions","Wrapper","onClick","to","link","Label","overlayPosition","overlayPositionTopBottom","xPositionFocus","yPositionFocus","className","title","dangerouslySetInnerHTML","__html","subtitle","linktext","styled","Link","ms","xPositionMobile","yPositionMobile","xPositionTablet","yPositionTablet","css","xPositionDesktop","yPositionDesktop","ty","hot","require","Component"],"sourceRoot":""}