{"version":3,"file":"AramcoWorld_StoryPageHeader-DNWIJQjx.js","sources":["../../../src/project/AramcoWorld/Header/StoryPageHeader/index.tsx?chunkName=AramcoWorld_StoryPageHeader"],"sourcesContent":["import React, { type FC, useContext } from \"react\";\r\nimport { type StoryPageHeaderProps, type Article } from \"../../generated-types\";\r\nimport { Ribbon } from \"../../_Base/Components/Ribbon\";\r\nimport { ContentWrapper } from \"../../_Base/Components/ContentWrapper\";\r\nimport { AspectRatio, Box, Flex, Heading, Icon, Text as ChakraText, Link } from \"@chakra-ui/react\";\r\nimport { imageSizes } from \"../../_Base/Theme\";\r\nimport { sc } from \"../../_Base/Jss\";\r\nimport { type ItemReference, useSitecoreContext } from \"~/foundation/Jss\";\r\nimport { type Tag } from \"~/foundation/SitecoreContent/generated-types\";\r\nimport { useTranslation } from \"~/foundation/Dictionary\";\r\nimport { type GlobalDictionary } from \"../../dictionary\";\r\nimport { IconWatch } from \"../../_Base/Components/Icon\";\r\nimport { usePageTheme } from \"../../_Base/Theme/themable\";\r\nimport { ColorThemeContext } from \"../../_Base/Theme/ColorThemeContext\";\r\nimport TagList from \"../../_Base/Components/Tags/TagList\";\r\nimport { FaRegFilePdf } from \"react-icons/fa\";\r\ntype IssueFileValue = {\r\n\tsrc?: string;\r\n\tdisplayName?: string;\r\n\tname?: string;\r\n};\r\n\r\ntype IssueFileField = {\r\n\tvalue?: IssueFileValue;\r\n};\r\nconst StoryPageHeader: FC<StoryPageHeaderProps> = () => {\r\n\tconst { sitecoreContext } = useSitecoreContext<Article>();\r\n\tconst [t] = useTranslation<GlobalDictionary>();\r\n\tconst [theme] = useContext(ColorThemeContext);\r\n\tconst issueFile = sitecoreContext.route?.fields?.issueReference?.fields?.issueFile as IssueFileField;\r\n\treturn (\r\n\t\t<Ribbon data-rendering=\"StoryPageHeader\" position=\"relative\" pt={[\"4\", null, null, \"10\"]} pb={[\"8\", null, null, \"10\"]}\r\n\t\t\tsx={{ //this is to display the themed background-color below header/main navigation when scrolling up and down\r\n\t\t\t\t_before: {\r\n\t\t\t\t\tcontent: \"''\",\r\n\t\t\t\t\tdisplay: \"block\",\r\n\t\t\t\t\tposition: \"absolute\",\r\n\t\t\t\t\tbottom: \"100%\",\r\n\t\t\t\t\tbg: theme.ribbon.primaryBg,\r\n\t\t\t\t\th: [\"headerHXS\", null, \"headerHLG\"],\r\n\t\t\t\t\tw: \"100%\",\r\n\t\t\t\t}\r\n\t\t\t}}>\r\n\t\t\t<ContentWrapper>\r\n\t\t\t\t{(sitecoreContext.route?.fields?.image?.value?.src || sitecoreContext.pageEditing) &&\r\n\t\t\t\t\t<AspectRatio ratio={3 / 1} mb={[\"4\", null, null, \"8\"]}>\r\n\t\t\t\t\t\t<sc.AdvanceImage\r\n\t\t\t\t\t\t\tfields={sitecoreContext.route?.fields}\r\n\t\t\t\t\t\t\titemId={sitecoreContext.route?.itemId}\r\n\t\t\t\t\t\t\tfieldName=\"image\"\r\n\t\t\t\t\t\t\tsrcSet={[imageSizes.wide.sm, imageSizes.wide.md, imageSizes.wide.lg, imageSizes.wide.xl]}\r\n\t\t\t\t\t\t\tsizes={\"100vw\"}\r\n\t\t\t\t\t\t\tlazy={false}\r\n\t\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\t\tobjectFit: \"cover\",\r\n\t\t\t\t\t\t\t\tobjectPosition: \"center center\",\r\n\t\t\t\t\t\t\t\tminWidth: \"100%\",\r\n\t\t\t\t\t\t\t\tminHeight: \"100%\",\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</AspectRatio>\r\n\t\t\t\t}\r\n\t\t\t\t<Flex direction=\"column\" gap={[\"4\", null, null, \"5\"]}>\r\n\t\t\t\t\t{(sitecoreContext.route?.fields?.title?.value || sitecoreContext.pageEditing) &&\r\n\t\t\t\t\t\t<Heading\r\n\t\t\t\t\t\t\tas=\"h1\"\r\n\t\t\t\t\t\t\tsize={[\"mobileHeadline4\", null, null, \"desktopHeadline1\"]}\r\n\t\t\t\t\t\t\ttextAlign=\"center\"\r\n\t\t\t\t\t\t\tmarginX=\"auto\"\r\n\t\t\t\t\t\t\tmaxW=\"1164\"\r\n\t\t\t\t\t\t\tcolor={theme.ribbon.primaryColorBigText}>\r\n\t\t\t\t\t\t\t<sc.Text field={sitecoreContext.route?.fields?.title} />\r\n\t\t\t\t\t\t</Heading>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t<Flex direction={[\"column\", null, \"row\"]} gap={[\"4\", null, \"3\"]} grow=\"1\" alignItems={[\"flex-start\", null, \"center\"]} wrap=\"wrap\">\r\n\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t<Flex gap=\"2\"\r\n\t\t\t\t\t\t\t\tflexWrap=\"wrap\"\r\n\t\t\t\t\t\t\t\talignItems=\"center\"\r\n\t\t\t\t\t\t\t\tdirection={[\"row\"]}\r\n\t\t\t\t\t\t\t\tjustifyContent={\"start\"}>\r\n\t\t\t\t\t\t\t\t{sitecoreContext.route?.fields?.categoryTags && sitecoreContext.route?.fields?.categoryTags.length > 0 && (\r\n\r\n\t\t\t\t\t\t\t\t\t<TagList\r\n\t\t\t\t\t\t\t\t\t\ttags={sitecoreContext.route?.fields?.categoryTags as ItemReference<Tag>[]}\r\n\t\t\t\t\t\t\t\t\t\tbackgroundColor={theme.ribbon.tagDefaultBgColor}\r\n\t\t\t\t\t\t\t\t\t\tborderColor={theme.ribbon.tagDefaultBorderColor}\r\n\t\t\t\t\t\t\t\t\t\tvariant=\"defaultCategoryTag\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t{sitecoreContext.route?.fields?.categoryTags && sitecoreContext.route?.fields?.categoryTags.length > 0 && (\r\n\r\n\t\t\t\t\t\t\t\t\t<TagList\r\n\t\t\t\t\t\t\t\t\t\ttags={sitecoreContext.route?.fields?.topicTags as ItemReference<Tag>[]}\r\n\t\t\t\t\t\t\t\t\t\tbackgroundColor={theme.ribbon.tagDefaultBgColor}\r\n\t\t\t\t\t\t\t\t\t\tborderColor={\"transparent\"}\r\n\t\t\t\t\t\t\t\t\t\tvariant=\"defaultSubCategoryTagDark\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t</Flex>\r\n\t\t\t\t\t\t\t{(sitecoreContext.route?.fields?.readTime?.value || sitecoreContext.pageEditing) &&\r\n\t\t\t\t\t\t\t\t<ChakraText display=\"flex\" alignItems=\"center\" size=\"ps\" flexShrink=\"0\">\r\n\t\t\t\t\t\t\t\t\t<Icon as={IconWatch} aria-hidden=\"true\" fill=\"transparent\" boxSize=\"5\" />\r\n\t\t\t\t\t\t\t\t\t<Box as=\"span\" ps=\"2\" pe=\"1\">\r\n\t\t\t\t\t\t\t\t\t\t{t(\"article.readingTimeLabel\")}\r\n\t\t\t\t\t\t\t\t\t</Box>\r\n\t\t\t\t\t\t\t\t\t<sc.Text field={sitecoreContext.route?.fields?.readTime} />\r\n\t\t\t\t\t\t\t\t\t<Box as=\"span\" ps=\"1\">\r\n\t\t\t\t\t\t\t\t\t\t{t(\"article.readingUnit\")}\r\n\t\t\t\t\t\t\t\t\t</Box>\r\n\t\t\t\t\t\t\t\t</ChakraText>\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t{(sitecoreContext.route?.fields?.byline?.value || sitecoreContext.pageEditing) &&\r\n\t\t\t\t\t\t\t\t<ChakraText size=\"ps\" display=\"flex\" flexGrow=\"1\" justifyContent={[\"flex-start\", null, \"flex-end\"]} lineHeight=\"double\" textAlign=\"end\">\r\n\t\t\t\t\t\t\t\t\t<sc.Text field={sitecoreContext.route?.fields?.byline} />\r\n\t\t\t\t\t\t\t\t</ChakraText>\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t</>\r\n\t\t\t\t\t</Flex>\r\n\t\t\t\t\t{(sitecoreContext.route?.fields?.date || sitecoreContext.pageEditing) && (\r\n\t\t\t\t\t\t<Flex direction={[\"column\", null, \"row\"]} gap={[\"4\", null, \"3\"]} grow=\"1\" justifyContent={\"space-between\"} alignItems={[\"flex-start\", null, \"center\"]} wrap=\"wrap\">\r\n\t\t\t\t\t\t\t<ChakraText sx={{ fontSize: \"0.75rem\", fontWeight: \"700\" }}>\r\n\t\t\t\t\t\t\t\t<time dateTime={sitecoreContext.route?.fields?.date?.value} itemProp=\"dateModified\">\r\n\t\t\t\t\t\t\t\t\t<sc.Date field={sitecoreContext.route?.fields?.date} />\r\n\t\t\t\t\t\t\t\t</time>\r\n\t\t\t\t\t\t\t\t<meta itemProp=\"datePublished\" content={sitecoreContext.route?.fields?.date?.value} />\r\n\t\t\t\t\t\t\t</ChakraText>\r\n\t\t\t\t\t\t\t{(issueFile?.value?.src) && (\r\n\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\r\n\t\t\t\t\t\t\t\t\thref={issueFile.value.src}\r\n\t\t\t\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\t\t\t\t_hover: {\r\n\t\t\t\t\t\t\t\t\t\t\ttextDecoration: \"underline\"\r\n\t\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\t\tpadding: 0,\r\n\t\t\t\t\t\t\t\t\t\tfontWeight: \"700\",\r\n\t\t\t\t\t\t\t\t\t\tfontSize: \"0.75rem\"\r\n\t\t\t\t\t\t\t\t\t}}\r\n\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<Flex alignItems=\"center\">\r\n\t\t\t\t\t\t\t\t\t\t<ChakraText as=\"span\" me=\"1\">{t(\"article.seeIssueHereLabel\")}: </ChakraText>{issueFile.value.displayName || issueFile.value.name || \"Download File\"} <FaRegFilePdf style={{ marginInlineStart: \"2px\" }} />\r\n\t\t\t\t\t\t\t\t\t</Flex>\r\n\t\t\t\t\t\t\t\t</Link>\r\n\t\t\t\t\t\t\t)}\r\n\r\n\t\t\t\t\t\t</Flex>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</Flex>\r\n\t\t\t\t<Box mt=\"8\" w=\"100%\" h=\"1px\" bg={theme.ribbon.primaryBorderColor} aria-hidden=\"true\" />\r\n\t\t\t</ContentWrapper>\r\n\t\t</Ribbon>\r\n\t);\r\n};\r\n\r\nexport default usePageTheme()(StoryPageHeader);"],"names":["StoryPageHeader","sitecoreContext","useSitecoreContext","t","useTranslation","theme","useContext","ColorThemeContext","issueFile","_d","_c","_b","_a","jsx","Ribbon","ContentWrapper","_h","_g","_f","_e","AspectRatio","sc","_i","_j","imageSizes","jsxs","Flex","_m","_l","_k","Heading","_o","_n","Fragment","_q","_p","_s","_r","TagList","_u","_t","_w","_v","_y","_x","_A","_z","_D","_C","_B","ChakraText","Icon","IconWatch","Box","_F","_E","_I","_H","_G","_K","_J","_M","_L","_P","_O","_N","_R","_Q","_U","_T","_S","_V","Link","FaRegFilePdf","index","usePageTheme"],"mappings":"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"}