{"version":3,"sources":["webpack:///./src/templates/contentfulPoliciesPage.js","webpack:///./src/components/Dropdown.js","webpack:///./src/utils/order.js","webpack:///./src/components/seo/Page.js","webpack:///./src/components/MagicSelect.js"],"names":["Container","styled","div","attrs","className","responsive","sm","md","NavigationColumn","ContentColumn","TitleRow","PageTitle","h1","rem","PoliciesIcon","HeaderRow","hr","Color","ritualBlue","NavigationLinks","NavigationLink","MagicLink","p","current","ContentTitle","ContentSection","section","Font","dutch","circular","OrderedNavigationSlugs","ContentfulPoliciesPage","props","data","contentfulPageBasic","shortTitle","pageTitle","pageDescription","slug","navigationNodes","getNavigationNodes","state","seo","pagePath","title","description","allPolicyNodes","this","allContentfulPageBasic","nodes","orderArray","componentDidMount","updatePageData","label","updateLayoutState","banner","handleSelection","navigate","renderNavigation","selectOptions","map","node","value","key","to","options","currentOption","onSelectionMade","bind","render","body","id","defaultMessage","PoliciesBadge","dangerouslySetInnerHTML","__html","childMarkdownRemark","html","React","Component","SelectWrapper","media","mobile","DropDownWrapper","StyledSelect","select","ritualSecondaryDisabledBlue","white","rgba","DropdownLabel","Dropdown","children","CaretDown","array","order","property","sort","a","b","aIndex","indexOf","bIndex","PageSEO","image","Label","DropdownWrapper","ritualYellow","CustomSelect","button","CustomSelectTrigger","ritualSecondaryBlue","CustomSelectOptions","isOpen","CustomSelectOptionGroup","CustomSelectOption","MagicSelect","watchClickOutside","componentWillUnmount","document","removeEventListener","toggleCustomSelect","openSelectCustom","closeSelectCustom","setState","addEventListener","e","getElementsByClassName","contains","target","handleOptionClick","newCurrentValue","currentValue","handleOptionEnter","renderNativeOptions","optionGroups","group","option","index","renderCustomOptions","isCurrentOption","onClick","CheckRounded","onChange","aria-labelledby","aria-hidden","CaretUpRounded"],"mappings":"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","file":"component---src-templates-contentful-policies-page-js-2ff38e8ee756cf8d0d2d.js","sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { graphql, navigate } from \"gatsby\";\n\n// Components\nimport Row from \"../components/Row\";\nimport PageSEO from \"../components/seo/Page\";\nimport MagicLink from \"../components/MagicLink\";\nimport MagicSelect from \"../components/MagicSelect\";\nimport Text from \"../components/Text\";\n\n// Utils\nimport { Font, Color, responsive, rem } from \"../utils/style\";\nimport { Icons } from \"../utils/svg\";\nimport { orderArray } from \"../utils/order\";\n\nconst Container = styled.div.attrs({\n className: \"container\",\n})`\n margin-top: 84px;\n margin-bottom: 80px;\n\n ${responsive.sm`\n margin-top: 92px;\n padding: 0;\n `}\n\n ${responsive.md`\n margin-top: 128px;\n margin-bottom: 120px;\n `}\n`;\n\nconst NavigationColumn = styled.div.attrs({\n className: \"col-12 col-sm-3\",\n})`\n margin-bottom: 32px;\n\n ${responsive.sm`\n margin-bottom: 0;\n `}\n`;\n\nconst ContentColumn = styled.div.attrs({\n className: \"col-12 col-sm-9 col-md-7 offset-md-1\",\n})``;\n\nconst TitleRow = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n\n ${responsive.md`\n margin-bottom: 42px;\n `}\n`;\n\nconst PageTitle = styled.h1`\n margin: 0;\n font-size: ${rem(34)};\n line-height: ${rem(40)};\n letter-spacing: -0.5px;\n\n ${responsive.md`\n font-size: ${rem(66)};\n line-height: ${rem(72)};\n letter-spacing: -2px;\n `}\n`;\n\nconst PoliciesIcon = styled.div`\n svg {\n width: 56px;\n height: 56px;\n\n ${responsive.md`\n height: 96px;\n width: 96px;\n `}\n }\n`;\n\nconst HeaderRow = styled.hr`\n border: none;\n height: 2px;\n background-color: ${Color.ritualBlue};\n width: 100%;\n\n margin: 0 0 24px;\n\n ${responsive.sm`\n margin: 0 0 50px;\n `}\n\n ${responsive.md`\n margin: 0 0 80px;\n `}\n`;\n\nconst NavigationLinks = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst NavigationLink = styled(MagicLink)`\n width: fit-content;\n\n font-weight: 500;\n font-size: ${rem(16)};\n line-height: ${rem(24)};\n\n opacity: ${p => (p.current ? \"1\" : \"0.56\")};\n border-bottom: 2px solid\n ${p => (p.current ? Color.ritualBlue : \"transparent\")};\n\n &:hover {\n opacity: 1;\n }\n\n ${responsive.md`\n font-size: ${rem(18)};\n line-height: ${rem(26)};\n margin-bottom: 22px;\n `}\n\n &:last-of-type {\n margin-bottom: 0;\n }\n`;\n\nconst ContentTitle = styled.h1`\n margin: 0;\n font-weight: 500;\n\n margin-bottom: 32px;\n font-size: ${rem(26)};\n line-height: ${rem(36)};\n letter-spacing: -0.3px;\n\n ${responsive.md`\n margin-bottom: 40px;\n font-size: ${rem(40)};\n line-height: ${rem(54)};\n letter-spacing: -1.17px;\n `}\n`;\n\nconst ContentSection = styled.section`\n box-sizing: border-box;\n font-size: ${rem(16)};\n line-height: ${rem(26)};\n\n ${Font.dutch} strong, b {\n ${Font.circular};\n }\n\n & > p:first-child {\n display: inline-block;\n }\n\n & > p:nth-child(2) {\n display: inline-block;\n }\n\n & > p {\n margin-bottom: 24px;\n }\n\n & > hr:first-of-type {\n background-color: ${Color.ritualBlue};\n height: 2px;\n padding: 0;\n margin: 24px 0;\n\n ${responsive.md`\n margin: 40px 0;\n `}\n }\n\n & > h3,\n & > h4 {\n font-size: ${rem(18)};\n line-height: ${rem(28)};\n\n margin-top: 32px;\n margin-bottom: 24px;\n }\n\n a:link {\n font-weight: 500;\n cursor: pointer;\n font-size: inherit;\n line-height: ${rem(16)};\n transition: opacity 200ms ease-in-out;\n border-bottom: 1px solid ${Color.ritualBlue};\n\n &:hover {\n opacity: 0.56;\n }\n }\n\n ${responsive.sm`\n & > p {\n display: block;\n }\n `};\n\n ${responsive.md`\n font-size: ${rem(18)};\n line-height: ${rem(28)};\n\n & > h3,\n & > h4 {\n letter-spacing: -0.2px;\n font-size: ${rem(22)};\n line-height: ${rem(32)};\n\n margin-top: 40px;\n }\n `}\n`;\n\nconst OrderedNavigationSlugs = [\n \"privacy-policy\",\n \"terms-of-service\",\n \"reviews-policy\",\n \"diversity-equity-and-inclusion\",\n \"accessbility\",\n];\n\n/* eslint-disable react/prefer-stateless-function, react/prop-types */\nexport default class ContentfulPoliciesPage extends React.Component {\n constructor(props) {\n super(props);\n\n let {\n shortTitle,\n pageTitle,\n pageDescription,\n slug,\n } = props.data.contentfulPageBasic;\n\n this.slug = slug;\n this.shortTitle = shortTitle;\n this.navigationNodes = this.getNavigationNodes();\n\n this.state = {\n seo: {\n pagePath: slug,\n title: pageTitle,\n description: pageDescription,\n },\n };\n }\n\n getNavigationNodes() {\n const allPolicyNodes = [...this.props.data.allContentfulPageBasic.nodes];\n return orderArray(allPolicyNodes, OrderedNavigationSlugs, \"slug\");\n }\n\n componentDidMount() {\n this.props.updatePageData({\n label: \"Policy Page\",\n });\n\n this.props.updateLayoutState({\n banner: false,\n });\n }\n\n handleSelection(slug) {\n navigate(`/${slug}`);\n }\n\n renderNavigation() {\n const selectOptions = this.navigationNodes.map(node => {\n return {\n value: node.slug,\n title: node.shortTitle,\n };\n });\n\n return (\n <>\n \n \n {this.navigationNodes.map(node => {\n return (\n \n {node.shortTitle}\n \n );\n })}\n \n
\n \n
\n \n \n );\n }\n\n render() {\n let { title, body } = this.props.data.contentfulPageBasic;\n\n return (\n <>\n \n \n \n \n \n \n \n {/** TODO: Update icon */}\n \n \n \n \n \n {this.renderNavigation()}\n \n {title}\n \n \n \n \n \n );\n }\n}\n\nexport const pageQuery = graphql`\n query PoliciesPageQuery($locale: String!, $slug: String!) {\n contentfulPageBasic(node_locale: { eq: $locale }, slug: { eq: $slug }) {\n title\n shortTitle\n body {\n childMarkdownRemark {\n html\n }\n }\n pageTitle\n pageDescription\n slug\n }\n allContentfulPageBasic(\n filter: { node_locale: { eq: $locale }, type: { eq: \"policy\" } }\n ) {\n nodes {\n shortTitle\n slug\n }\n }\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Font, Color, media, rem, rgba } from \"../utils/style\";\nimport { Icons } from \"../utils/svg\";\n\nconst SelectWrapper = styled.div`\n position: relative;\n float: right;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n width: 100%;\n\n ${media.mobile`\n padding: 0 15px;\n `};\n`;\n\nconst DropDownWrapper = styled.div`\n position: relative;\n width: 100%;\n float: right;\n\n svg {\n position: absolute;\n right: 16px;\n top: 20px;\n width: 14px;\n }\n`;\n\nconst StyledSelect = styled.select`\n ${Font.circular}\n color: ${Color.ritualBlue};\n font-size: ${rem(16)};\n line-height: ${rem(22)};\n font-weight: 300;\n text-align: left;\n appearance: none;\n border: 1px solid ${Color.ritualSecondaryDisabledBlue};\n border-radius: 0;\n padding: 0 30px 0 1rem;\n height: 44px;\n outline: 0;\n background-color: ${Color.white};\n caret-color: ${Color.ritualBlue};\n width: 100%;\n\n &.product-selector {\n background-color: ${Color.white};\n\n optgroup {\n background-color: ${Color.white};\n background: ${Color.white};\n color: ${rgba(Color.ritualBlue, 0.56)};\n\n option {\n background-color: ${Color.white};\n color: ${Color.ritualBlue};\n }\n }\n }\n`;\n\nconst DropdownLabel = styled.label`\n ${Font.circular}\n color: ${Color.ritualBlue};\n font-size: ${rem(14)};\n line-height: ${rem(20)};\n font-weight: 300;\n text-align: left;\n letter-spacing: 0;\n margin-bottom: 8px;\n text-align: left;\n float: left;\n clear: both;\n`;\n\nconst Dropdown = ({ children, ...props }) => {\n return (\n \n {props.label && {props.label}}\n \n \n \n {children}\n \n \n \n );\n};\n\nexport default Dropdown;\n","export function orderArray(array, order, property) {\n // Make a copy to ensure we're not modifying the original data.\n array = [...array];\n\n return array.sort((a, b) => {\n const aIndex = order.indexOf(a[property]);\n const bIndex = order.indexOf(b[property]);\n\n if (aIndex < 0 && bIndex < 0) return 0;\n if (aIndex < 0) return 1;\n if (bIndex < 0) return -1;\n\n return aIndex - bIndex;\n });\n}\n","import React, { Component } from \"react\";\n\nimport GeneralTags from \"./GeneralTags\";\n\nclass PageSEO extends Component {\n render() {\n const { pagePath, title, description, image } = this.props;\n\n return (\n
\n \n
\n );\n }\n}\n\nexport default PageSEO;\n","import React from \"react\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { Font, Color, rem, responsive, rgba } from \"../utils/style\";\n\n// Components\nimport Dropdown from \"./Dropdown\";\nimport { Icons } from \"../utils/svg\";\n\n// Styled Elements\nconst SelectWrapper = styled.div`\n display: flex;\n flex-direction: column;\n width: 100%;\n\n ${responsive.sm`\n max-width: 270px;\n `}\n`;\n\nconst Label = styled.div`\n ${Font.circular}\n color: ${Color.ritualBlue};\n font-size: ${rem(14)};\n line-height: ${rem(20)};\n font-weight: 300;\n text-align: left;\n letter-spacing: 0;\n text-align: left;\n float: left;\n clear: both;\n`;\n\nconst DropdownWrapper = styled.div`\n position: relative;\n margin: 0 -15px;\n outline: ${Color.ritualYellow};\n display: block;\n cursor: pointer;\n\n ${responsive.sm`\n margin: 0;\n `}\n\n [data-whatintent=\"mouse\"] & {\n display: none;\n }\n`;\n\nconst CustomSelect = styled.button`\n position: relative;\n width: 100%;\n display: none;\n margin-top: 8px;\n background: transparent;\n border: none;\n padding: 0;\n text-align: left;\n color: ${Color.ritualBlue};\n\n &.isActive {\n display: block;\n }\n\n [data-whatintent=\"mouse\"] & {\n display: block;\n outline: none;\n }\n`;\n\nconst CustomSelectTrigger = styled.div`\n border: 1px solid ${Color.ritualSecondaryBlue};\n padding: 10px 16px;\n font-size: ${rem(16)};\n font-weight: 300;\n line-height: ${rem(22)};\n position: relative;\n cursor: pointer;\n display: flex;\n align-items: center;\n\n svg {\n position: absolute;\n right: 16px;\n top: 18px;\n width: 14px;\n height: 10px;\n }\n`;\n\nconst CustomSelectOptions = styled.div`\n display: ${p => (p.isOpen ? \"block\" : \"none\")};\n position: absolute;\n top: 46px;\n left: 0px;\n width: 100%;\n\n z-index: 40;\n padding: 24px 16px;\n background-color: ${Color.white};\n box-shadow: 0px 8px 30px -10px rgba(20, 43, 111, 0.16);\n border-top: none;\n`;\n\nconst CustomSelectOptionGroup = styled.div`\n p {\n color: ${rgba(Color.ritualBlue, 0.56)};\n font-size: ${rem(12)};\n letter-spacing: 0.8px;\n line-height: ${rem(20)};\n text-transform: uppercase;\n margin-bottom: 8px;\n user-select: none;\n }\n\n &:last-of-type {\n div:last-of-type {\n margin-bottom: 0;\n }\n }\n`;\n\nconst CustomSelectOption = styled.div`\n font-size: ${rem(16)};\n font-weight: 300;\n line-height: ${rem(22)};\n margin-bottom: 16px;\n\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n position: relative;\n cursor: pointer;\n user-select: none;\n\n :hover {\n opacity: 0.56;\n }\n\n &.current-option {\n font-weight: 500;\n }\n\n &:last-of-type {\n margin-bottom: 32px;\n }\n\n svg {\n position: absolute;\n top: 2px;\n right: 0px;\n width: 12px;\n }\n`;\n\nexport default class MagicSelect extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n isOpen: false,\n };\n\n this.watchClickOutside = this.watchClickOutside.bind(this);\n }\n\n componentWillUnmount() {\n document.removeEventListener(\"click\", this.watchClickOutside);\n }\n\n toggleCustomSelect() {\n const isClosed = !this.state.isOpen;\n\n if (isClosed) {\n this.openSelectCustom();\n } else {\n this.closeSelectCustom();\n }\n }\n\n openSelectCustom() {\n this.setState({\n isOpen: true,\n });\n\n // Add related event listeners\n document.addEventListener(\"click\", this.watchClickOutside);\n }\n\n closeSelectCustom() {\n this.setState({\n isOpen: false,\n });\n\n // Remove related event listeners\n document.removeEventListener(\"click\", this.watchClickOutside);\n }\n\n watchClickOutside(e) {\n const customSelectElement = document.getElementsByClassName(\n \"customSelect\",\n )[0];\n const didClickedOutside = !customSelectElement.contains(e.target);\n if (didClickedOutside) {\n this.closeSelectCustom();\n }\n }\n\n handleOptionClick(newCurrentValue) {\n this.setState({\n currentValue: newCurrentValue,\n isOpen: false,\n });\n\n this.props.onSelectionMade(newCurrentValue);\n }\n\n handleOptionEnter(e) {\n let newCurrentValue = e.target.value;\n\n this.setState({\n currentValue: newCurrentValue,\n isOpen: false,\n });\n\n this.props.onSelectionMade(newCurrentValue);\n }\n\n renderNativeOptions() {\n const optionGroups = this.props.optionGroups;\n\n // If options are nested under groups\n if (optionGroups) {\n return optionGroups.map(group => {\n return (\n \n {group.options.map((option, index) => {\n return (\n \n );\n })}\n \n );\n });\n // Options are not nested\n } else {\n return this.props.options.map((option, index) => {\n return (\n \n );\n });\n }\n }\n\n renderCustomOptions() {\n const optionGroups = this.props.optionGroups;\n // If options are nested under groups\n if (optionGroups) {\n return optionGroups.map(group => {\n return (\n \n

{group.label}

\n {group.options.map((option, index) => {\n let isCurrentOption =\n this.props.currentOption.value === option.value;\n return (\n \n {option.title}\n {isCurrentOption && }\n \n );\n })}\n \n );\n });\n // Options are not nested\n } else {\n return this.props.options.map((option, index) => {\n return (\n \n {option.title}\n \n );\n });\n }\n }\n\n render() {\n let { className, label, currentOption } = this.props;\n\n let { isOpen } = this.state;\n\n return (\n \n \n \n \n {this.renderNativeOptions()}\n \n \n\n {/* */}\n \n \n {this.props.currentOption.title}\n {isOpen ? : }\n \n \n {this.renderCustomOptions()}\n \n \n \n );\n }\n}\n"],"sourceRoot":""}