{"version":3,"file":"js/StoryVogue-f280150a909c7a7b4b00.chunk.js","mappings":"kQAKA,IAAMA,EAAmB,WAAH,OACpBC,EAAAA,cAAA,WACEA,EAAAA,cAAA,SAAG,8EACHA,EAAAA,cAAA,SAAG,gIAIHA,EAAAA,cAAA,SAAG,yCAAyC,mCAExC,EAgBR,QAbmB,WAAH,OACdA,EAAAA,cAACC,EAAAA,EAAK,CACJC,MAAM,iBACNC,MAAM,QACNC,YAAaJ,EAAAA,cAACD,EAAgB,MAC9BM,eAAgBC,EAChBC,gBAAiBD,EACjBE,UAAU,QACVC,WAAW,uBACXC,SAAS,wBACT,C,iFC8FJ,QAnGc,SAACC,GACb,IACET,EAWES,EAXFT,MACAU,EAUED,EAVFC,SACAT,EASEQ,EATFR,MACAU,EAQEF,EARFE,WACAC,EAOEH,EAPFG,iBACAV,EAMEO,EANFP,YACAC,EAKEM,EALFN,eACAE,EAIEI,EAJFJ,gBACAE,EAGEE,EAHFF,WACAC,EAEEC,EAFFD,SAAQK,EAENJ,EADFH,UAAAA,OAAS,IAAAO,EAAG,OAAMA,EAEdC,EAjBe,SAiBeR,EAjBN,QAAU,OAyCxC,OACER,EAAAA,cAAA,OAAKiB,UAAU,mIACbjB,EAAAA,cAAA,OACEiB,UAAWC,IACT,0HATwB,CAC9BC,KAAM,yFACNC,MAAO,yFAQuBZ,KAG1BR,EAAAA,cAAA,OAAKiB,UAAU,gDACZf,GACCF,EAAAA,cAAA,OAAKiB,UAAU,wEACZf,GAGLF,EAAAA,cAAA,OAAKiB,UAAWC,IAAG,6DAA8DL,IAC9EV,GAEFS,GAAYZ,EAAAA,cAAA,OAAKiB,UAAU,mBAAmBL,GAC/CZ,EAAAA,cAAA,OAAKiB,UAAWC,IAAG,2BAA4BJ,IAAoBV,KAGvEJ,EAAAA,cAAA,OACEiB,UAAWC,IACT,wDAlCkB,CACxBC,KAAM,yDACNC,MAAO,wDACPC,IAAK,GACLC,OAAQ,IA+BgBN,KAGpBhB,EAAAA,cAAA,OACEiB,UAAWC,IACT,2HA9CmB,CAC3BC,KAAM,6BACNC,MAAO,4BACPC,IAAK,4BACLC,OAAQ,6BA2CqBN,KAGvBhB,EAAAA,cAAA,OAAKiB,UAAU,iCACbjB,EAAAA,cAACuB,EAAAA,EAAK,CACJN,UAAWC,IACT,0IA3DK,CACjBC,KAAM,gDACNC,MAAO,sDACPC,IAAK,yDACLC,OAAQ,iDAwDeN,GACX,gBAEFb,MAAOM,EACPe,IAAKd,EACLe,IAAKlB,OAKbP,EAAAA,cAAA,OAAKiB,UAAU,sEACbjB,EAAAA,cAAA,OAAKiB,UAAU,aACbjB,EAAAA,cAACuB,EAAAA,EAAK,CACJN,UAAU,iDACVd,MAAOM,EACPe,IAAKd,EACLe,IAAKpB,MAMjB,C","sources":["webpack://printivity/./client/app/bundles/App/pages/HomePage/StoryVogue.tsx","webpack://printivity/./client/app/styleguide/components/Story/Story.tsx"],"sourcesContent":["import * as React from 'react';\nimport Story from 'styleguide/components/Story/Story';\n\nimport img from 'assets/images/stories/make-something-vogue.jpg';\n\nconst DescriptionBlock = () => (\n  <div>\n    <p>Bringing an idea from concept to life can be tricky - but you&apos;ve got help.</p>\n    <p>\n      Learn about design, discuss product recommendations, review production options, and have your files\n      checked before ordering.\n    </p>\n    <p>Focus on showcasing your originality.</p>\n    You can leave the details to us.\n  </div>\n);\n\nconst StoryVogue = () => (\n  <Story\n    intro=\"Make Something\"\n    title=\"Vogue\"\n    description={<DescriptionBlock />}\n    imageUrlMobile={img}\n    imageUrlDesktop={img}\n    direction=\"right\"\n    imageTitle=\"Make Something Vogue\"\n    imageAlt=\"Make something vogue\"\n  />\n);\n\nexport default StoryVogue;\n","import * as React from 'react';\nimport cn from 'classnames';\nimport Image from '../Image/Image';\n\ninterface Props {\n  intro?: string;\n  subtitle?: string;\n  title: string;\n  titleStyle?: string;\n  descriptionStyle?: string;\n  description: JSX.Element;\n  imageUrlMobile: string;\n  imageUrlDesktop: string;\n  imageTitle: string;\n  imageAlt: string;\n  direction: 'left' | 'right' | 'top' | 'bottom';\n}\n\nfunction getImageOrder(textOrder: string | 'left') {\n  return textOrder === 'left' ? 'right' : 'left';\n}\n\nconst Story = (props: Props) => {\n  const {\n    intro,\n    subtitle,\n    title,\n    titleStyle,\n    descriptionStyle,\n    description,\n    imageUrlMobile,\n    imageUrlDesktop,\n    imageTitle,\n    imageAlt,\n    direction = 'left',\n  } = props;\n  const imagePosition = getImageOrder(direction);\n  const imageStyle = {\n    left: 'xs:left-[12px] lg:left-[16px] 2xl:left-[20px]',\n    right: 'xs:-right-[12px] lg:-right-[16px] 2xl:-right-[20px]',\n    top: 'xs:-bottom-[12px] lg:-bottom-[16px] 2xl:-bottom-[20px]',\n    bottom: 'xs:-top-[12px] lg:-top-[16px] 2xl:-top-[20px]',\n  };\n  const backgroundImageStyle = {\n    left: ' ml-[10px] md:ml-4 md:ml-6',\n    right: 'mr-[10px] md:mr-4 md:mr-6',\n    top: 'mt-[10px] md:mt-4 md:mt-6',\n    bottom: 'mb-[10px] md:mb-4 md:mb-6',\n  };\n  const imageWrapperStyle = {\n    left: 'order-2  xs:ml-0 md:-ml-[100px] md:-ml-[60px] md:ml-0 ',\n    right: 'order-3 xs:mr-0 md:-mr-[100px] md:-mr-[60px] md:mr-0 ',\n    top: '',\n    bottom: '',\n  };\n  const descriptionWrapperStyle = {\n    left: 'order-2 justify-start xs:ml-5 lg:pr-[80px] 3xl:pr-52 xl:ml-0 ml-[10px] md:ml-4 md:ml-6',\n    right: 'order-3 justify-end xs:ml-5 lg:pl-[80px] 3xl:pl-52  xl:ml-0 mr-[10px] md:mr-4 md:mr-6',\n  };\n\n  return (\n    <div className=\"flex md:gap-4 my-10 flex-nowrap overflow-hidden p-0 first:mt-16 last:mb-20 md:justify-center md:last:mb-32 -md:flex-col-reverse\">\n      <div\n        className={cn(\n          'z-1 text-center md:flex md:flex-row md:flex-wrap md:content-center md:items-start md:justify-start md:text-left -md:p-5',\n          descriptionWrapperStyle[direction],\n        )}\n      >\n        <div className=\"xs:w-full md:max-w-[412px] 3xl:max-w-[448px]\">\n          {intro && (\n            <div className=\"w-full font-hvBold text-xl md:w-1/2 md:text-4xl lg:text-5xl -md:mt-6\">\n              {intro}\n            </div>\n          )}\n          <div className={cn('font-hvBold text-6xl text-blue xs:mb-2 md:mb-6 lg:text-9xl', titleStyle)}>\n            {title}\n          </div>\n          {subtitle && <div className=\"heading-bold-xs\">{subtitle}</div>}\n          <div className={cn('paragraph-medium-desktop', descriptionStyle)}>{description}</div>\n        </div>\n      </div>\n      <div\n        className={cn(\n          'flex flex-row content-center items-center -md:!hidden',\n          imageWrapperStyle[imagePosition],\n        )}\n      >\n        <div\n          className={cn(\n            'rounded-xl bg-blue md:max-h-[360px] lg:max-h-[480px] xl:max-h-[730px] md:max-w-[360px] lg:max-w-[480px] xl:max-w-[730px]',\n            backgroundImageStyle[imagePosition],\n          )}\n        >\n          <div className=\"flex xs:py-3 lg:py-4 2xl:py-5\">\n            <Image\n              className={cn(\n                'relative h-full w-full rounded-xl md:max-h-[320px] lg:max-h-[440px] xl:max-h-[680px] md:max-w-[320px] lg:max-w-[440px] xl:max-w-[680px]',\n                imageStyle[imagePosition],\n                'object-cover',\n              )}\n              title={imageTitle}\n              alt={imageAlt}\n              url={imageUrlDesktop}\n            />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative order-5 rounded-xl bg-blue text-right shadow-lg md:hidden\">\n        <div className=\"flex py-3\">\n          <Image\n            className=\"relative h-full w-full rounded-xl object-cover\"\n            title={imageTitle}\n            alt={imageAlt}\n            url={imageUrlMobile}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Story;\n"],"names":["DescriptionBlock","React","Story","intro","title","description","imageUrlMobile","img","imageUrlDesktop","direction","imageTitle","imageAlt","props","subtitle","titleStyle","descriptionStyle","_props$direction","imagePosition","className","cn","left","right","top","bottom","Image","alt","url"],"sourceRoot":""}