@codecademy/brand 4.0.0-alpha.b1cfc89ee2.0 → 4.0.0-alpha.b5e5d575e.0

package/dist/GlobalFooter/FooterLinks.cjs

@@ -1,52 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
-let _emotion_styled = require("@emotion/styled");
-_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/GlobalFooter/FooterLinks.tsx
-function FooterLinkItemsDefaults({ as = "ul", pl = 0, mb = 0, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-		as,
-		pl,
-		mb,
-		...props
-	});
-}
-const FooterLinkItems = (0, _emotion_styled.default)(FooterLinkItemsDefaults)`
-  list-style-type: none;
-`;
-const FooterLinkItem = _emotion_styled.default.li`
-  font-size: 0.875rem;
-  margin: 0.5rem 0;
-
-  ${_codecademy_gamut_styles.theme.breakpoints.sm} {
-    font-size: 1rem;
-    margin: 0.25rem 0;
-  }
-
-  ${_codecademy_gamut_styles.theme.breakpoints.md} {
-    margin: 0.15rem 0;
-  }
-`;
-const FooterLinkItemWithAnchor = ({ trackingTarget, footerOnClick, ...anchorProps }) => {
-	const anchorOnClick = (0, react.useCallback)((event) => {
-		footerOnClick({
-			event,
-			target: trackingTarget
-		});
-	}, [footerOnClick, trackingTarget]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterLinkItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-		...anchorProps,
-		onClick: anchorOnClick
-	}) });
-};
-
-//#endregion
-exports.FooterLinkItem = FooterLinkItem;
-exports.FooterLinkItemWithAnchor = FooterLinkItemWithAnchor;
-exports.FooterLinkItems = FooterLinkItems;
-//# sourceMappingURL=FooterLinks.cjs.map

package/dist/GlobalFooter/FooterLinks.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FooterLinks.cjs","names":["Box","theme","FooterLinkItemWithAnchor: React.FC<\n  ComponentProps<typeof Anchor> & {\n    trackingTarget: string;\n    footerOnClick: GlobalFooterClickHandler;\n  }\n>","Anchor"],"sources":["../../src/GlobalFooter/FooterLinks.tsx"],"sourcesContent":["import { Anchor, Box } from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { ComponentProps, useCallback } from 'react';\nimport * as React from 'react';\n\nimport { GlobalFooterClickHandler } from './types';\n\nfunction FooterLinkItemsDefaults({\n  as = 'ul',\n  pl = 0,\n  mb = 0,\n  ...props\n}: React.ComponentProps<typeof Box>) {\n  return <Box as={as} pl={pl} mb={mb} {...props} />;\n}\n\nexport const FooterLinkItems = styled(FooterLinkItemsDefaults)`\n  list-style-type: none;\n`;\n\nexport const FooterLinkItem = styled.li`\n  font-size: 0.875rem;\n  margin: 0.5rem 0;\n\n  ${theme.breakpoints.sm} {\n    font-size: 1rem;\n    margin: 0.25rem 0;\n  }\n\n  ${theme.breakpoints.md} {\n    margin: 0.15rem 0;\n  }\n`;\n\nexport const FooterLinkItemWithAnchor: React.FC<\n  ComponentProps<typeof Anchor> & {\n    trackingTarget: string;\n    footerOnClick: GlobalFooterClickHandler;\n  }\n> = ({ trackingTarget, footerOnClick, ...anchorProps }) => {\n  const anchorOnClick = useCallback(\n    (event: React.MouseEvent<Element, MouseEvent>) => {\n      footerOnClick({ event, target: trackingTarget });\n    },\n    [footerOnClick, trackingTarget]\n  );\n\n  return (\n    <FooterLinkItem>\n      <Anchor {...anchorProps} onClick={anchorOnClick} />\n    </FooterLinkItem>\n  );\n};\n"],"mappings":";;;;;;;;;;AAQA,SAAS,wBAAwB,EAC/B,KAAK,MACL,KAAK,GACL,KAAK,GACL,GAAG,SACgC;AACnC,QAAO,2CAACA;EAAQ;EAAQ;EAAQ;EAAI,GAAI;GAAS;;AAGnD,MAAa,kBAAkB,6BAAO,wBAAwB;;;AAI9D,MAAa,iBAAiB,wBAAO,EAAE;;;;IAInCC,+BAAM,YAAY,GAAG;;;;;IAKrBA,+BAAM,YAAY,GAAG;;;;AAKzB,MAAaC,4BAKR,EAAE,gBAAgB,eAAe,GAAG,kBAAkB;CACzD,MAAM,wCACH,UAAiD;AAChD,gBAAc;GAAE;GAAO,QAAQ;GAAgB,CAAC;IAElD,CAAC,eAAe,eAAe,CAChC;AAED,QACE,2CAAC,4BACC,2CAACC;EAAO,GAAI;EAAa,SAAS;GAAiB,GACpC"}

package/dist/GlobalFooter/FooterLinks.mjs

@@ -1,47 +0,0 @@
-import { Anchor, Box } from "@codecademy/gamut";
-import { theme } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/GlobalFooter/FooterLinks.tsx
-function FooterLinkItemsDefaults({ as = "ul", pl = 0, mb = 0, ...props }) {
-	return /* @__PURE__ */ jsx(Box, {
-		as,
-		pl,
-		mb,
-		...props
-	});
-}
-const FooterLinkItems = styled(FooterLinkItemsDefaults)`
-  list-style-type: none;
-`;
-const FooterLinkItem = styled.li`
-  font-size: 0.875rem;
-  margin: 0.5rem 0;
-
-  ${theme.breakpoints.sm} {
-    font-size: 1rem;
-    margin: 0.25rem 0;
-  }
-
-  ${theme.breakpoints.md} {
-    margin: 0.15rem 0;
-  }
-`;
-const FooterLinkItemWithAnchor = ({ trackingTarget, footerOnClick, ...anchorProps }) => {
-	const anchorOnClick = useCallback((event) => {
-		footerOnClick({
-			event,
-			target: trackingTarget
-		});
-	}, [footerOnClick, trackingTarget]);
-	return /* @__PURE__ */ jsx(FooterLinkItem, { children: /* @__PURE__ */ jsx(Anchor, {
-		...anchorProps,
-		onClick: anchorOnClick
-	}) });
-};
-
-//#endregion
-export { FooterLinkItem, FooterLinkItemWithAnchor, FooterLinkItems };
-//# sourceMappingURL=FooterLinks.mjs.map

package/dist/GlobalFooter/FooterLinks.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FooterLinks.mjs","names":["FooterLinkItemWithAnchor: React.FC<\n  ComponentProps<typeof Anchor> & {\n    trackingTarget: string;\n    footerOnClick: GlobalFooterClickHandler;\n  }\n>"],"sources":["../../src/GlobalFooter/FooterLinks.tsx"],"sourcesContent":["import { Anchor, Box } from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { ComponentProps, useCallback } from 'react';\nimport * as React from 'react';\n\nimport { GlobalFooterClickHandler } from './types';\n\nfunction FooterLinkItemsDefaults({\n  as = 'ul',\n  pl = 0,\n  mb = 0,\n  ...props\n}: React.ComponentProps<typeof Box>) {\n  return <Box as={as} pl={pl} mb={mb} {...props} />;\n}\n\nexport const FooterLinkItems = styled(FooterLinkItemsDefaults)`\n  list-style-type: none;\n`;\n\nexport const FooterLinkItem = styled.li`\n  font-size: 0.875rem;\n  margin: 0.5rem 0;\n\n  ${theme.breakpoints.sm} {\n    font-size: 1rem;\n    margin: 0.25rem 0;\n  }\n\n  ${theme.breakpoints.md} {\n    margin: 0.15rem 0;\n  }\n`;\n\nexport const FooterLinkItemWithAnchor: React.FC<\n  ComponentProps<typeof Anchor> & {\n    trackingTarget: string;\n    footerOnClick: GlobalFooterClickHandler;\n  }\n> = ({ trackingTarget, footerOnClick, ...anchorProps }) => {\n  const anchorOnClick = useCallback(\n    (event: React.MouseEvent<Element, MouseEvent>) => {\n      footerOnClick({ event, target: trackingTarget });\n    },\n    [footerOnClick, trackingTarget]\n  );\n\n  return (\n    <FooterLinkItem>\n      <Anchor {...anchorProps} onClick={anchorOnClick} />\n    </FooterLinkItem>\n  );\n};\n"],"mappings":";;;;;;;AAQA,SAAS,wBAAwB,EAC/B,KAAK,MACL,KAAK,GACL,KAAK,GACL,GAAG,SACgC;AACnC,QAAO,oBAAC;EAAQ;EAAQ;EAAQ;EAAI,GAAI;GAAS;;AAGnD,MAAa,kBAAkB,OAAO,wBAAwB;;;AAI9D,MAAa,iBAAiB,OAAO,EAAE;;;;IAInC,MAAM,YAAY,GAAG;;;;;IAKrB,MAAM,YAAY,GAAG;;;;AAKzB,MAAaA,4BAKR,EAAE,gBAAgB,eAAe,GAAG,kBAAkB;CACzD,MAAM,gBAAgB,aACnB,UAAiD;AAChD,gBAAc;GAAE;GAAO,QAAQ;GAAgB,CAAC;IAElD,CAAC,eAAe,eAAe,CAChC;AAED,QACE,oBAAC,4BACC,oBAAC;EAAO,GAAI;EAAa,SAAS;GAAiB,GACpC"}

package/dist/GlobalFooter/FooterNavLinks/CatalogLinks.cjs

@@ -1,298 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_FooterHeading = require('../FooterHeading.cjs');
-const require_FooterLinks = require('../FooterLinks.cjs');
-const require_download_on_the_app_store = require('./assets/download-on-the-app-store.cjs');
-const require_get_it_on_google_play = require('./assets/get-it-on-google-play.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
-let _emotion_styled = require("@emotion/styled");
-_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/GlobalFooter/FooterNavLinks/CatalogLinks.tsx
-const defaultWidth = {
-	_: "50%",
-	md: "90%"
-};
-function MobileImageLinkDefaults({ display = "inline-block", variant: variant$1 = "interface", width = defaultWidth, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-		width,
-		display,
-		variant: variant$1,
-		...props
-	});
-}
-function MobileImageItemDefaults({ as = "li", display = "inline-block", my = 8, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-		as,
-		display,
-		my,
-		...props
-	});
-}
-const MobileImageItem = (0, _emotion_styled.default)(MobileImageItemDefaults)();
-const MobileImageLink = (0, _emotion_styled.default)(MobileImageLinkDefaults)();
-const CatalogLinksContainer = _emotion_styled.default.div`
-  border-top: 1px solid ${(0, _codecademy_gamut_styles.themed)("colors.navy")};
-  margin-top: 2rem;
-
-  ${_codecademy_gamut_styles.theme.breakpoints.sm} {
-    padding-top: 2rem;
-  }
-
-  ${_codecademy_gamut_styles.theme.breakpoints.md} {
-    border-left: 1px solid ${({ theme: theme$1 }) => theme$1.colors.navy};
-    border-top: none;
-    margin-left: 0;
-    margin-top: 0;
-    padding-left: 2rem;
-    padding-top: 0;
-  }
-
-  ${_codecademy_gamut_styles.theme.breakpoints.lg} {
-    padding-left: 4rem;
-  }
-`;
-const CatalogLinkArea = (0, _emotion_styled.default)(require_FooterLinks.FooterLinkItems)`
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  margin-bottom: 1rem;
-
-  ${(0, _codecademy_gamut_styles.variant)({ variants: { fullHeight: { maxHeight: { md: "none" } } } })}
-`;
-const CatalogFooterLinkItem = (0, _emotion_styled.default)(require_FooterLinks.FooterLinkItem)`
-  margin: 0.25rem 0;
-`;
-const languages = [
-	["bash", "Bash"],
-	["c", "C"],
-	["c-plus-plus", "C++"],
-	["c-sharp", "C#"],
-	["go", "Go"],
-	["html-css", "HTML & CSS"],
-	["java", "Java"],
-	["javascript", "JavaScript"],
-	["kotlin", "Kotlin"],
-	["php", "PHP"],
-	["python", "Python"],
-	["r", "R"],
-	["ruby", "Ruby"],
-	["sql", "SQL"],
-	["swift", "Swift"]
-];
-const subjects = [
-	["artificial-intelligence", "AI"],
-	["cloud-computing", "Cloud computing"],
-	["code-foundations", "Code foundations"],
-	["computer-science", "Computer science"],
-	["cybersecurity", "Cybersecurity"],
-	["data-analytics", "Data analytics"],
-	["data-science", "Data science"],
-	["data-visualization", "Data visualization"],
-	["developer-tools", "Developer tools"],
-	["devops", "DevOps"],
-	["game-development", "Game development"],
-	["information-technology", "IT"],
-	["machine-learning", "Machine learning"],
-	["math", "Math"],
-	["mobile-development", "Mobile development"],
-	["web-design", "Web design"],
-	["web-development", "Web development"]
-];
-const CatalogLinks = ({ onClick }) => {
-	const languagesList = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FooterHeading.FooterHeading, { children: "Languages" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogLinkArea, {
-		variant: "fullHeight",
-		children: languages.map(([slug, text]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogFooterLinkItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-			href: `/catalog/language/${slug}`,
-			onClick: (event) => onClick({
-				event,
-				target: slug
-			}),
-			variant: "interface",
-			whiteSpace: "nowrap",
-			children: text
-		}) }, slug))
-	})] });
-	const subjectsList = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FooterHeading.FooterHeading, { children: "Subjects" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogLinkArea, {
-		variant: "fullHeight",
-		children: subjects.map(([slug, text]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogFooterLinkItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-			href: `/catalog/subject/${slug}`,
-			onClick: (event) => onClick({
-				event,
-				target: slug
-			}),
-			variant: "interface",
-			whiteSpace: "nowrap",
-			children: text
-		}) }, slug))
-	})] });
-	const careerBuildingList = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FooterHeading.FooterHeading, { children: "Career building" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CatalogLinkArea, {
-		variant: "fullHeight",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogFooterLinkItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-				href: "/catalog/all",
-				onClick: (event) => onClick({
-					event,
-					target: "catalog"
-				}),
-				variant: "interface",
-				whiteSpace: "nowrap",
-				children: "Career paths"
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogFooterLinkItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-				href: "/career-center",
-				onClick: (event) => onClick({
-					event,
-					target: "career_services"
-				}),
-				variant: "interface",
-				whiteSpace: "nowrap",
-				children: "Career Center"
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogFooterLinkItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-				href: "/pages/interview-prep",
-				onClick: (event) => onClick({
-					event,
-					target: "interview_prep"
-				}),
-				variant: "interface",
-				whiteSpace: "nowrap",
-				children: "Interview prep"
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogFooterLinkItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-				href: "/pages/pro-certifications",
-				onClick: (event) => onClick({
-					event,
-					target: "pro_certifications"
-				}),
-				variant: "interface",
-				whiteSpace: "nowrap",
-				children: "Professional certification"
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogFooterLinkItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-				href: "/bootcamps",
-				onClick: (event) => onClick({
-					event,
-					target: "bootcamps"
-				}),
-				variant: "interface",
-				children: "Bootcamps"
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogFooterLinkItem, {
-				"aria-hidden": true,
-				children: "—"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogFooterLinkItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-				href: "/catalog/all",
-				onClick: (event) => onClick({
-					event,
-					target: "fullCatalog"
-				}),
-				variant: "interface",
-				children: "Full catalog"
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogFooterLinkItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-				href: "/catalog/subject/beta",
-				onClick: (event) => onClick({
-					event,
-					target: "betaContent"
-				}),
-				variant: "interface",
-				children: "Beta content"
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogFooterLinkItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-				href: "https://trello.com/b/vAgDXtT6/codecademy-releases-roadmap",
-				onClick: (event) => onClick({
-					event,
-					target: "roadmap"
-				}),
-				variant: "interface",
-				children: "Roadmap"
-			}) })
-		]
-	})] });
-	const appStoreLinks = (display) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
-		display,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FooterHeading.FooterHeading, { children: "Mobile" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_FooterLinks.FooterLinkItems, {
-			display: "flex",
-			flexDirection: "column",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileImageItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileImageLink, {
-				href: "https://itunes.apple.com/us/app/codecademy-go/id1376029326",
-				onClick: (event) => onClick({
-					event,
-					target: "apple_store"
-				}),
-				target: "_blank",
-				rel: "noopener",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-					alt: "Download on the App Store",
-					height: "calc(40px + 1rem)",
-					src: require_download_on_the_app_store.default,
-					width: "calc(120px + 1.5rem)"
-				})
-			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileImageItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileImageLink, {
-				href: "https://play.google.com/store/apps/details?id=com.ryzac.codecademygo",
-				onClick: (event) => onClick({
-					event,
-					target: "google_play"
-				}),
-				target: "_blank",
-				rel: "noopener",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-					alt: "Get it on Google Play",
-					height: "calc(40px + 1rem)",
-					src: require_get_it_on_google_play.default,
-					width: "calc(133px + 1.5rem)"
-				})
-			}) })]
-		})]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogLinksContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.LayoutGrid, {
-		columnGap: 24,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Column, {
-				size: {
-					_: 6,
-					sm: 4
-				},
-				children: subjectsList
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Column, {
-				size: {
-					_: 6,
-					sm: 4
-				},
-				children: languagesList
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Column, {
-				size: {
-					_: 6,
-					sm: 4
-				},
-				gridTemplateRows: "min-content",
-				children: [careerBuildingList, appStoreLinks({
-					_: "none",
-					sm: "unset"
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Column, {
-				size: 6,
-				display: {
-					_: "block",
-					sm: "none"
-				},
-				children: appStoreLinks({
-					_: "unset",
-					sm: "none"
-				})
-			})
-		]
-	}) });
-};
-
-//#endregion
-exports.CatalogLinks = CatalogLinks;
-//# sourceMappingURL=CatalogLinks.cjs.map

package/dist/GlobalFooter/FooterNavLinks/CatalogLinks.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"CatalogLinks.cjs","names":["Anchor","variant","Box","theme","FooterLinkItems","FooterLinkItem","CatalogLinks: React.FC<CatalogLinksProps>","FooterHeading","downloadOnTheAppStore","getItOnGooglePlay","LayoutGrid","Column"],"sources":["../../../src/GlobalFooter/FooterNavLinks/CatalogLinks.tsx"],"sourcesContent":["import { Anchor, Box, BoxProps, Column, LayoutGrid } from '@codecademy/gamut';\nimport { theme, themed, variant } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nimport { FooterHeading } from '../FooterHeading';\nimport { FooterLinkItem, FooterLinkItems } from '../FooterLinks';\nimport { GlobalFooterClickHandler } from '../types';\nimport downloadOnTheAppStore from './assets/download-on-the-app-store.svg';\nimport getItOnGooglePlay from './assets/get-it-on-google-play.png';\n\nconst defaultWidth = {\n  _: '50%',\n  md: '90%',\n};\n\nfunction MobileImageLinkDefaults({\n  display = 'inline-block',\n  variant = 'interface',\n  width = defaultWidth,\n  ...props\n}: React.ComponentProps<typeof Anchor>) {\n  return (\n    <Anchor width={width} display={display} variant={variant} {...props} />\n  );\n}\n\nfunction MobileImageItemDefaults({\n  as = 'li',\n  display = 'inline-block',\n  my = 8,\n  ...props\n}: React.ComponentProps<typeof Box>) {\n  return <Box as={as} display={display} my={my} {...props} />;\n}\n\nconst MobileImageItem = styled(MobileImageItemDefaults)();\n\nconst MobileImageLink = styled(MobileImageLinkDefaults)();\n\nconst CatalogLinksContainer = styled.div`\n  border-top: 1px solid ${themed('colors.navy')};\n  margin-top: 2rem;\n\n  ${theme.breakpoints.sm} {\n    padding-top: 2rem;\n  }\n\n  ${theme.breakpoints.md} {\n    border-left: 1px solid ${({ theme }) => theme.colors.navy};\n    border-top: none;\n    margin-left: 0;\n    margin-top: 0;\n    padding-left: 2rem;\n    padding-top: 0;\n  }\n\n  ${theme.breakpoints.lg} {\n    padding-left: 4rem;\n  }\n`;\n\nconst CatalogLinkArea = styled(FooterLinkItems)<{ variant?: 'fullHeight' }>`\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  margin-bottom: 1rem;\n\n  ${variant({ variants: { fullHeight: { maxHeight: { md: 'none' } } } })}\n`;\n\nconst CatalogFooterLinkItem = styled(FooterLinkItem)`\n  margin: 0.25rem 0;\n`;\n\nconst languages = [\n  ['bash', 'Bash'],\n  ['c', 'C'],\n  ['c-plus-plus', 'C++'],\n  ['c-sharp', 'C#'],\n  ['go', 'Go'],\n  ['html-css', 'HTML & CSS'],\n  ['java', 'Java'],\n  ['javascript', 'JavaScript'],\n  ['kotlin', 'Kotlin'],\n  ['php', 'PHP'],\n  ['python', 'Python'],\n  ['r', 'R'],\n  ['ruby', 'Ruby'],\n  ['sql', 'SQL'],\n  ['swift', 'Swift'],\n];\n\nconst subjects = [\n  ['artificial-intelligence', 'AI'],\n  ['cloud-computing', 'Cloud computing'],\n  ['code-foundations', 'Code foundations'],\n  ['computer-science', 'Computer science'],\n  ['cybersecurity', 'Cybersecurity'],\n  ['data-analytics', 'Data analytics'],\n  ['data-science', 'Data science'],\n  ['data-visualization', 'Data visualization'],\n  ['developer-tools', 'Developer tools'],\n  ['devops', 'DevOps'],\n  ['game-development', 'Game development'],\n  ['information-technology', 'IT'],\n  ['machine-learning', 'Machine learning'],\n  ['math', 'Math'],\n  ['mobile-development', 'Mobile development'],\n  ['web-design', 'Web design'],\n  ['web-development', 'Web development'],\n];\n\nexport type CatalogLinksProps = {\n  onClick: GlobalFooterClickHandler;\n  userGeo?: string;\n};\n\nexport const CatalogLinks: React.FC<CatalogLinksProps> = ({ onClick }) => {\n  const languagesList = (\n    <Box>\n      <FooterHeading>Languages</FooterHeading>\n      <CatalogLinkArea variant=\"fullHeight\">\n        {languages.map(([slug, text]) => (\n          <CatalogFooterLinkItem key={slug}>\n            <Anchor\n              href={`/catalog/language/${slug}`}\n              onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n                onClick({ event, target: slug })\n              }\n              variant=\"interface\"\n              whiteSpace=\"nowrap\"\n            >\n              {text}\n            </Anchor>\n          </CatalogFooterLinkItem>\n        ))}\n      </CatalogLinkArea>\n    </Box>\n  );\n\n  const subjectsList = (\n    <Box>\n      <FooterHeading>Subjects</FooterHeading>\n      <CatalogLinkArea variant=\"fullHeight\">\n        {subjects.map(([slug, text]) => (\n          <CatalogFooterLinkItem key={slug}>\n            <Anchor\n              href={`/catalog/subject/${slug}`}\n              onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n                onClick({ event, target: slug })\n              }\n              variant=\"interface\"\n              whiteSpace=\"nowrap\"\n            >\n              {text}\n            </Anchor>\n          </CatalogFooterLinkItem>\n        ))}\n      </CatalogLinkArea>\n    </Box>\n  );\n\n  const careerBuildingList = (\n    <Box>\n      <FooterHeading>Career building</FooterHeading>\n      <CatalogLinkArea variant=\"fullHeight\">\n        <CatalogFooterLinkItem>\n          <Anchor\n            href=\"/catalog/all\"\n            onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n              onClick({ event, target: 'catalog' })\n            }\n            variant=\"interface\"\n            whiteSpace=\"nowrap\"\n          >\n            Career paths\n          </Anchor>\n        </CatalogFooterLinkItem>\n        <CatalogFooterLinkItem>\n          <Anchor\n            href=\"/career-center\"\n            onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n              onClick({ event, target: 'career_services' })\n            }\n            variant=\"interface\"\n            whiteSpace=\"nowrap\"\n          >\n            Career Center\n          </Anchor>\n        </CatalogFooterLinkItem>\n        <CatalogFooterLinkItem>\n          <Anchor\n            href=\"/pages/interview-prep\"\n            onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n              onClick({ event, target: 'interview_prep' })\n            }\n            variant=\"interface\"\n            whiteSpace=\"nowrap\"\n          >\n            Interview prep\n          </Anchor>\n        </CatalogFooterLinkItem>\n        <CatalogFooterLinkItem>\n          <Anchor\n            href=\"/pages/pro-certifications\"\n            onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n              onClick({ event, target: 'pro_certifications' })\n            }\n            variant=\"interface\"\n            whiteSpace=\"nowrap\"\n          >\n            Professional certification\n          </Anchor>\n        </CatalogFooterLinkItem>\n        <CatalogFooterLinkItem>\n          <Anchor\n            href=\"/bootcamps\"\n            onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n              onClick({ event, target: 'bootcamps' })\n            }\n            variant=\"interface\"\n          >\n            Bootcamps\n          </Anchor>\n        </CatalogFooterLinkItem>\n        <CatalogFooterLinkItem aria-hidden>—</CatalogFooterLinkItem>\n        <CatalogFooterLinkItem>\n          <Anchor\n            href=\"/catalog/all\"\n            onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n              onClick({ event, target: 'fullCatalog' })\n            }\n            variant=\"interface\"\n          >\n            Full catalog\n          </Anchor>\n        </CatalogFooterLinkItem>\n        <CatalogFooterLinkItem>\n          <Anchor\n            href=\"/catalog/subject/beta\"\n            onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n              onClick({ event, target: 'betaContent' })\n            }\n            variant=\"interface\"\n          >\n            Beta content\n          </Anchor>\n        </CatalogFooterLinkItem>\n        <CatalogFooterLinkItem>\n          <Anchor\n            href=\"https://trello.com/b/vAgDXtT6/codecademy-releases-roadmap\"\n            onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n              onClick({ event, target: 'roadmap' })\n            }\n            variant=\"interface\"\n          >\n            Roadmap\n          </Anchor>\n        </CatalogFooterLinkItem>\n      </CatalogLinkArea>\n    </Box>\n  );\n\n  const appStoreLinks = (display: BoxProps['display']) => (\n    <Box display={display}>\n      <FooterHeading>Mobile</FooterHeading>\n      <FooterLinkItems display=\"flex\" flexDirection=\"column\">\n        <MobileImageItem>\n          <MobileImageLink\n            href=\"https://itunes.apple.com/us/app/codecademy-go/id1376029326\"\n            onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n              onClick({ event, target: 'apple_store' })\n            }\n            target=\"_blank\"\n            rel=\"noopener\"\n          >\n            <img\n              alt=\"Download on the App Store\"\n              height=\"calc(40px + 1rem)\"\n              src={downloadOnTheAppStore}\n              width=\"calc(120px + 1.5rem)\"\n            />\n          </MobileImageLink>\n        </MobileImageItem>\n        <MobileImageItem>\n          <MobileImageLink\n            href=\"https://play.google.com/store/apps/details?id=com.ryzac.codecademygo\"\n            onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>\n              onClick({ event, target: 'google_play' })\n            }\n            target=\"_blank\"\n            rel=\"noopener\"\n          >\n            <img\n              alt=\"Get it on Google Play\"\n              height=\"calc(40px + 1rem)\"\n              src={getItOnGooglePlay}\n              width=\"calc(133px + 1.5rem)\"\n            />\n          </MobileImageLink>\n        </MobileImageItem>\n      </FooterLinkItems>\n    </Box>\n  );\n\n  // Footer items change placement depending on screen size\n  return (\n    <CatalogLinksContainer>\n      <LayoutGrid columnGap={24}>\n        <Column size={{ _: 6, sm: 4 }}>{subjectsList}</Column>\n        <Column size={{ _: 6, sm: 4 }}>{languagesList}</Column>\n        <Column size={{ _: 6, sm: 4 }} gridTemplateRows=\"min-content\">\n          {careerBuildingList}\n          {/* desktop/tablet */}\n          {appStoreLinks({ _: 'none', sm: 'unset' })}\n        </Column>\n        <Column size={6} display={{ _: 'block', sm: 'none' }}>\n          {/* mobile */}\n          {appStoreLinks({ _: 'unset', sm: 'none' })}\n        </Column>\n      </LayoutGrid>\n    </CatalogLinksContainer>\n  );\n};\n"],"mappings":"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"}