@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/lib/breakpointHooks/index.js

@@ -1,58 +1,60 @@
-import { breakpoints } from "@codecademy/gamut-styles";
-import { createBreakpoint } from "react-use";
-import mapValues from "lodash/mapValues";
+import { breakpoints as originalBreakpoints } from '@codecademy/gamut-styles';
+import mapValues from 'lodash/mapValues';
+import { createBreakpoint } from 'react-use';
+export const breakpoints = mapValues({
+  xxs: 0,
+  ...originalBreakpoints
+}, value => parseInt(value, 10));
 
-//#region src/lib/breakpointHooks/index.ts
-const breakpoints$1 = mapValues({
-	xxs: 0,
-	...breakpoints
-}, (value) => parseInt(value, 10));
 /**
-* useBreakpoint will provide the current breakpoint to a React component.
-*
-* If you think you need this, make sure to think twice.  It is really nice
-* to allow your styles layer to concern itself about the appearance of a
-* component at different screen sizes, and not have to maintain two different
-* components that could drift from eachother.  That being said, sometimes
-* The content, layout, and/or functionality of a mobile page/component can
-* be so different that it is non-performant or difficult to maintain the
-* changes in only styles.  For those cases where it is actually easier to maintain
-* two components or a programatic distinction of the breakpoint, this helper
-* exists.
-*
-* @deprecated
-* Use Box, LayoutGrid, or other responsive Gamut components instead.
-* JavaScript-time screen size checks are notorious for worsening page performance.
-* @see https://web.dev/cls
-*/
-const useBreakpoint = createBreakpoint(breakpoints$1);
-/**
-* @deprecated
-* Use Box, LayoutGrid, or other responsive Gamut components instead.
-* JavaScript-time screen size checks are notorious for worsening page performance.
-* @see https://web.dev/cls
-*/
-function useBreakpointAtOrAbove(breakpoint) {
-	return breakpoints$1[useBreakpoint()] >= breakpoints$1[breakpoint];
-}
+ * useBreakpoint will provide the current breakpoint to a React component.
+ *
+ * If you think you need this, make sure to think twice.  It is really nice
+ * to allow your styles layer to concern itself about the appearance of a
+ * component at different screen sizes, and not have to maintain two different
+ * components that could drift from eachother.  That being said, sometimes
+ * The content, layout, and/or functionality of a mobile page/component can
+ * be so different that it is non-performant or difficult to maintain the
+ * changes in only styles.  For those cases where it is actually easier to maintain
+ * two components or a programatic distinction of the breakpoint, this helper
+ * exists.
+ *
+ * @deprecated
+ * Use Box, LayoutGrid, or other responsive Gamut components instead.
+ * JavaScript-time screen size checks are notorious for worsening page performance.
+ * @see https://web.dev/cls
+ */
+export const useBreakpoint = createBreakpoint(breakpoints);
+
 /**
-* @deprecated
-* Use Box, LayoutGrid, or other responsive Gamut components instead.
-* JavaScript-time screen size checks are notorious for worsening page performance.
-* @see https://web.dev/cls
-*/
-function useBreakpointAt(breakpoint) {
-	return breakpoints$1[useBreakpoint()] === breakpoints$1[breakpoint];
+ * @deprecated
+ * Use Box, LayoutGrid, or other responsive Gamut components instead.
+ * JavaScript-time screen size checks are notorious for worsening page performance.
+ * @see https://web.dev/cls
+ */
+export function useBreakpointAtOrAbove(breakpoint) {
+  const currentBreakpoint = useBreakpoint();
+  return breakpoints[currentBreakpoint] >= breakpoints[breakpoint];
 }
+
 /**
-* @deprecated
-* Use Box, LayoutGrid, or other responsive Gamut components instead.
-* JavaScript-time screen size checks are notorious for worsening page performance.
-* @see https://web.dev/cls
-*/
-function useBreakpointAtOrBelow(breakpoint) {
-	return breakpoints$1[useBreakpoint()] <= breakpoints$1[breakpoint];
+ * @deprecated
+ * Use Box, LayoutGrid, or other responsive Gamut components instead.
+ * JavaScript-time screen size checks are notorious for worsening page performance.
+ * @see https://web.dev/cls
+ */
+export function useBreakpointAt(breakpoint) {
+  const currentBreakpoint = useBreakpoint();
+  return breakpoints[currentBreakpoint] === breakpoints[breakpoint];
 }
 
-//#endregion
-export { breakpoints$1 as breakpoints, useBreakpoint, useBreakpointAt, useBreakpointAtOrAbove, useBreakpointAtOrBelow };
+/**
+ * @deprecated
+ * Use Box, LayoutGrid, or other responsive Gamut components instead.
+ * JavaScript-time screen size checks are notorious for worsening page performance.
+ * @see https://web.dev/cls
+ */
+export function useBreakpointAtOrBelow(breakpoint) {
+  const currentBreakpoint = useBreakpoint();
+  return breakpoints[currentBreakpoint] <= breakpoints[breakpoint];
+}

package/dist/lib/catalogList/index.d.ts

@@ -0,0 +1,3 @@
+import { AppHeaderLinkItem, AppHeaderResourcesDataItem } from '../../AppHeader/shared';
+export declare const careerPaths: AppHeaderLinkItem[];
+export declare const liveLearningNavPanelItems: AppHeaderResourcesDataItem;

package/dist/lib/catalogList/index.js

@@ -1,52 +1,61 @@
-import { renderNewBadge } from "../resourcesList/index.js";
-
-//#region src/lib/catalogList/index.tsx
-const liveLearningHubItems = {
-	title: "Live Learning",
-	description: "Build skills faster through live learning with expert instructors.",
-	data: [{
-		id: "bootcamps",
-		href: "/bootcamps",
-		text: "Bootcamps",
-		description: "Learn live from industry experts.",
-		trackingTarget: "topnav_catalog_live_learning_bootcamps",
-		type: "link",
-		newTab: true,
-		badge: renderNewBadge()
-	}, {
-		id: "gk",
-		href: "/live-learning#GKLiveLearning",
-		text: "Codecademy x GK",
-		description: "Instructor-led courses, offered via our partner organization.",
-		trackingTarget: "topnav_catalog_live_learning_gk_codecademy",
-		type: "link",
-		newTab: true,
-		badge: renderNewBadge()
-	}]
-};
-const liveLearningNavPanelItems = (isCoachingEnabled) => ({
-	title: "Live Learning",
-	description: "Build skills faster through live, instructor-led sessions. Get real-time feedback, stay motivated, and deepen your understanding with expert guidance.",
-	data: [{
-		id: "bootcamps",
-		href: "/bootcamps",
-		text: "Bootcamps",
-		description: "Join live virtual bootcamps that span multiple weeks and help you build real-world, in-demand skills. Led by experts, each bootcamp includes instructor support, community, professional mentorship—and comes with Codecademy Pro access.",
-		trackingTarget: "topnav_catalog_live_learning_bootcamps",
-		type: "link",
-		newTab: true,
-		badge: renderNewBadge()
-	}, {
-		id: "coaching",
-		href: "/coaching",
-		text: isCoachingEnabled ? "Coaching" : "Coaching (Coming soon)",
-		description: "Get personalized mentorship from expert coaches to accelerate your career journey. Whether you're preparing for technical interviews, exploring career options, or seeking guidance, 1:1 coaching gives you tailored support to reach your goals.",
-		trackingTarget: "topnav_catalog_live_learning_coaching",
-		type: "link",
-		newTab: true,
-		badge: renderNewBadge()
-	}]
-});
-
-//#endregion
-export { liveLearningNavPanelItems };
+import { renderNewBadge } from '../resourcesList';
+export const careerPaths = [{
+  id: 'full-stack-engineer-career-path',
+  href: '/learn/paths/full-stack-engineer-career-path',
+  trackingTarget: 'topnav_catalog_career_full_stack_engineer',
+  text: 'Full-Stack Engineer',
+  type: 'link'
+}, {
+  id: 'back-end-engineer-career-path',
+  href: '/learn/paths/back-end-engineer-career-path',
+  trackingTarget: 'topnav_catalog_career_back-end-engineer',
+  text: 'Back-End Engineer',
+  type: 'link'
+}, {
+  id: 'ios-developer',
+  href: '/learn/paths/ios-developer',
+  trackingTarget: 'topnav_catalog_career_ios-developer',
+  text: 'iOS Developer',
+  type: 'link'
+}, {
+  id: 'front-end-engineer-career-path',
+  href: '/learn/paths/front-end-engineer-career-path',
+  trackingTarget: 'topnav_catalog_career_front-end-engineer',
+  text: 'Front-End Engineer',
+  type: 'link'
+}, {
+  id: 'computer-science',
+  href: '/learn/paths/computer-science',
+  trackingTarget: 'topnav_catalog_career_computer-science',
+  text: 'Computer Science',
+  type: 'link'
+}, {
+  id: 'data-science',
+  href: '/pages/data-science-career-specializations',
+  trackingTarget: 'topnav_catalog_career_data_science',
+  text: 'Data Scientist',
+  type: 'link'
+}];
+export const liveLearningNavPanelItems = {
+  title: 'Live Learning',
+  description: 'Build skills faster through live, instructor-led sessions. Get real-time feedback, stay motivated, and deepen your understanding with expert guidance.',
+  data: [{
+    id: 'bootcamps',
+    href: '/bootcamps',
+    text: 'Bootcamps',
+    description: 'Join live virtual bootcamps that span multiple weeks and help you build real-world, in-demand skills. Led by experts, each bootcamp includes instructor support, community, professional mentorship—and comes with Codecademy Pro access.',
+    trackingTarget: 'topnav_catalog_live_learning_bootcamps',
+    type: 'link',
+    newTab: true,
+    badge: renderNewBadge()
+  }, {
+    id: 'coaching',
+    href: '/coaching',
+    text: 'Coaching',
+    description: "Get personalized mentorship from expert coaches to accelerate your career journey. Whether you're preparing for technical interviews, exploring career options, or seeking guidance, 1:1 coaching gives you tailored support to reach your goals.",
+    trackingTarget: 'topnav_catalog_live_learning_coaching',
+    type: 'link',
+    newTab: true,
+    badge: renderNewBadge()
+  }]
+};

package/dist/lib/resourcesList/index.d.ts

@@ -0,0 +1,5 @@
+import { AppFooterResourcesDataItem, AppHeaderResourcesDataItem } from '../../AppHeader/shared';
+export declare const renderBadge: (text: string) => import("react/jsx-runtime").JSX.Element;
+export declare const renderNewBadge: (mt?: number) => import("react/jsx-runtime").JSX.Element;
+export declare const footerResourcesList: AppFooterResourcesDataItem[];
+export declare const getHeaderResourcesList: () => AppHeaderResourcesDataItem[];

package/dist/lib/resourcesList/index.js

@@ -1,66 +1,237 @@
-import { Badge } from "@codecademy/gamut";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/lib/resourcesList/index.tsx
-const renderNewBadge = (mt = 2) => /* @__PURE__ */ jsx(Badge, {
-	size: "sm",
-	mt,
-	ml: 8,
-	alignSelf: "start",
-	variant: "accent",
-	children: "New"
+import { Badge } from '@codecademy/gamut';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const renderBadge = text => /*#__PURE__*/_jsx(Badge, {
+  size: "sm",
+  ml: 8,
+  alignSelf: "center",
+  children: text
 });
-const footerResourcesList = [
-	{
-		id: "articles",
-		href: "/articles",
-		trackingTarget: "articles",
-		text: "Articles"
-	},
-	{
-		id: "blog",
-		href: "https://codecademy.com/resources/blog",
-		trackingTarget: "blog",
-		text: "Blog",
-		newTab: true
-	},
-	{
-		id: "cheatsheets",
-		href: "/resources/cheatsheets/all",
-		trackingTarget: "cheatsheets_home",
-		text: "Cheatsheets"
-	},
-	{
-		id: "challenges",
-		href: "/code-challenges",
-		trackingTarget: "challenges",
-		text: "Code challenges"
-	},
-	{
-		id: "docs",
-		href: "/resources/docs",
-		trackingTarget: "docs",
-		text: "Docs"
-	},
-	{
-		id: "projects",
-		href: "/projects",
-		trackingTarget: "projects",
-		text: "Projects"
-	},
-	{
-		id: "videos",
-		href: "/resources/videos",
-		trackingTarget: "videos_homepage",
-		text: "Videos"
-	},
-	{
-		id: "workspaces",
-		href: "https://codecademy.com/pages/workspaces",
-		trackingTarget: "workspaces",
-		text: "Workspaces"
-	}
-];
-
-//#endregion
-export { footerResourcesList, renderNewBadge };
+export const renderNewBadge = (mt = 2) => /*#__PURE__*/_jsx(Badge, {
+  size: "sm",
+  mt: mt,
+  ml: 8,
+  alignSelf: "start",
+  variant: "accent",
+  children: "New"
+});
+export const footerResourcesList = [{
+  id: 'ai-builder',
+  href: '/ai-builder',
+  trackingTarget: 'ai_builder',
+  text: 'AI Builder'
+}, {
+  id: 'articles',
+  href: '/articles',
+  trackingTarget: 'articles',
+  text: 'Articles'
+}, {
+  id: 'blog',
+  href: 'https://codecademy.com/resources/blog',
+  trackingTarget: 'blog',
+  text: 'Blog',
+  newTab: true
+}, {
+  id: 'cheatsheets',
+  href: '/resources/cheatsheets/all',
+  trackingTarget: 'cheatsheets_home',
+  text: 'Cheatsheets'
+}, {
+  id: 'challenges',
+  href: '/code-challenges',
+  trackingTarget: 'challenges',
+  text: 'Code challenges'
+}, {
+  id: 'docs',
+  href: '/resources/docs',
+  trackingTarget: 'docs',
+  text: 'Docs'
+}, {
+  id: 'projects',
+  href: '/projects',
+  trackingTarget: 'projects',
+  text: 'Projects'
+}, {
+  id: 'videos',
+  href: '/resources/videos',
+  trackingTarget: 'videos_homepage',
+  text: 'Videos'
+}, {
+  id: 'workspaces',
+  href: 'https://codecademy.com/pages/workspaces',
+  trackingTarget: 'workspaces',
+  text: 'Workspaces'
+}];
+export const getHeaderResourcesList = () => {
+  const inspirationSection = {
+    title: 'Inspiration & career',
+    links: [{
+      text: 'View all blog topics',
+      href: '/resources/blog',
+      id: 'view-all-inspiration',
+      trackingTarget: 'topnav_resources_inspiration_all',
+      type: 'link',
+      newTab: true
+    }],
+    data: [{
+      id: 'career-advice',
+      href: '/resources/blog/category/career/',
+      text: 'Career advice',
+      description: 'Get answers to questions about coding careers.',
+      trackingTarget: 'topnav_resources_inspiration_career_advice',
+      type: 'link',
+      newTab: true
+    }, {
+      id: 'learning-tips',
+      href: '/resources/blog/category/learning-tips/',
+      text: 'Learning tips',
+      description: 'Learn where to start and how to stay motivated.',
+      trackingTarget: 'topnav_resources_inspiration_learning_tips',
+      type: 'link',
+      newTab: true
+    }, {
+      id: 'career-center',
+      href: '/career-center',
+      text: 'Career Center',
+      description: 'Get tools to reach your tech career goals.',
+      trackingTarget: 'topnav_resources_inspiration_career_center',
+      type: 'link',
+      newTab: true,
+      badge: renderNewBadge()
+    }]
+  };
+  return [{
+    title: 'Docs',
+    description: 'Find definitions, code syntax, and more -- or contribute your own code documentation.',
+    links: [{
+      text: 'View all docs',
+      href: '/resources/docs',
+      id: 'view-all-docs',
+      trackingTarget: 'topnav_resources_docs_all',
+      type: 'link'
+    }, {
+      text: 'Contribute to docs',
+      href: '/pages/contribute-docs',
+      id: 'contribute-to-docs',
+      trackingTarget: 'topnav_resources_contribution_guide',
+      type: 'link'
+    }],
+    data: [{
+      id: 'c',
+      href: '/resources/docs/c',
+      trackingTarget: 'topnav_resources_docs_c',
+      text: 'C',
+      type: 'link'
+    }, {
+      id: 'html',
+      href: '/resources/docs/html',
+      trackingTarget: 'topnav_resources_docs_html',
+      text: 'HTML',
+      type: 'link'
+    }, {
+      id: 'python',
+      href: '/resources/docs/python',
+      trackingTarget: 'topnav_resources_docs_python',
+      text: 'Python',
+      type: 'link'
+    }, {
+      id: 'cpp',
+      href: '/resources/docs/cpp',
+      trackingTarget: 'topnav_resources_docs_cpp',
+      text: 'C++',
+      type: 'link'
+    }, {
+      id: 'java',
+      href: '/resources/docs/java',
+      trackingTarget: 'topnav_resources_docs_java',
+      text: 'Java',
+      type: 'link'
+    }, {
+      id: 'react',
+      href: '/resources/docs/react',
+      trackingTarget: 'topnav_resources_docs_react',
+      text: 'React',
+      type: 'link'
+    }, {
+      id: 'css',
+      href: '/resources/docs/css',
+      trackingTarget: 'topnav_resources_docs_css',
+      text: 'CSS',
+      type: 'link'
+    }, {
+      id: 'javascript',
+      href: '/resources/docs/javascript',
+      trackingTarget: 'topnav_resources_docs_javascript',
+      text: 'JavaScript',
+      type: 'link'
+    }, {
+      id: 'sql',
+      href: '/resources/docs/sql',
+      trackingTarget: 'topnav_resources_docs_sql',
+      text: 'SQL',
+      type: 'link'
+    }, {
+      id: 'git',
+      href: '/resources/docs/git',
+      trackingTarget: 'topnav_resources_docs_git',
+      text: 'Git',
+      type: 'link'
+    }, {
+      id: 'php',
+      href: '/resources/docs/php',
+      trackingTarget: 'topnav_resources_docs_php',
+      text: 'PHP',
+      type: 'link'
+    }, {
+      id: 'uiux',
+      href: '/resources/docs/uiux',
+      trackingTarget: 'topnav_resources_docs_uiux',
+      text: 'UI/UX',
+      type: 'link'
+    }]
+  }, {
+    title: 'Learning & practice tools',
+    data: [{
+      id: 'articles',
+      href: '/articles',
+      text: 'Articles',
+      description: 'Learn about technical concepts.',
+      trackingTarget: 'topnav_resources_learning_articles',
+      type: 'link'
+    }, {
+      id: 'cheatsheets',
+      href: '/resources/cheatsheets/all',
+      text: 'Cheatsheets',
+      description: 'Review concepts from your courses.',
+      trackingTarget: 'topnav_resources_learning_cheatsheets',
+      type: 'link'
+    }, {
+      id: 'code-challenges',
+      href: '/code-challenges',
+      text: 'Code challenges',
+      description: 'Test your knowledge and prep for interviews.',
+      trackingTarget: 'topnav_resources_learning_code_challenges',
+      type: 'link'
+    }, {
+      id: 'projects',
+      href: '/projects',
+      text: 'Projects',
+      description: 'Practice and build your portfolio.',
+      trackingTarget: 'topnav_resources_learning_projects',
+      type: 'link'
+    }, {
+      id: 'videos',
+      href: '/resources/videos',
+      text: 'Videos',
+      description: 'Watch tutorials, project walkthroughs, and more.',
+      trackingTarget: 'topnav_resources_learning_videos',
+      type: 'link'
+    }, {
+      id: 'workspaces',
+      href: '/pages/workspaces',
+      text: 'Workspaces',
+      description: 'Build and share projects in your browser.',
+      trackingTarget: 'topnav_resources_learning_workspaces',
+      type: 'link'
+    }]
+  }, inspirationSection];
+};

package/dist/png.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const imageUrl: string;
+  export default imageUrl;
+}

package/dist/react-freezeframe.d.ts

@@ -0,0 +1 @@
+declare module 'react-freezeframe';

package/dist/remoteAssets/components.d.ts

@@ -0,0 +1 @@
+export declare const BASE_STATIC_ASSET_PATH = "https://static-assets.codecademy.com/components";

package/dist/remoteAssets/components.js

@@ -1,5 +1 @@
-//#region src/remoteAssets/components.ts
-const BASE_STATIC_ASSET_PATH = "https://static-assets.codecademy.com/components";
-
-//#endregion
-export { BASE_STATIC_ASSET_PATH };
+export const BASE_STATIC_ASSET_PATH = 'https://static-assets.codecademy.com/components';

package/dist/stories/Atoms/Avatar.stories.js

@@ -0,0 +1,16 @@
+import { Avatar } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: Avatar,
+  args: {
+    alt: 'The Codey character drinking Boba tea',
+    src: 'https://content.codecademy.com/courses/free/boba.svg'
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(Avatar, {
+    ...args
+  }),
+  name: 'Avatar'
+};

package/dist/stories/Atoms/BetaSticker.stories.js

@@ -0,0 +1,21 @@
+import { BetaSticker } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: BetaSticker,
+  args: {}
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(BetaSticker, {
+    ...args
+  }),
+  name: 'BetaSticker'
+};
+export const Small = {
+  render: args => /*#__PURE__*/_jsx(BetaSticker, {
+    ...args
+  }),
+  args: {
+    size: 'small'
+  }
+};

package/dist/stories/Atoms/Logos/LogoCodecademy.stories.js

@@ -0,0 +1,8 @@
+import { LogoCodecademy } from '../../../Logos';
+const meta = {
+  component: LogoCodecademy
+};
+export default meta;
+export const Default = {
+  args: {}
+};

package/dist/stories/Atoms/Logos/LogoCodecademyMini.stories.js

@@ -0,0 +1,8 @@
+import { LogoCodecademyMini } from '../../../Logos';
+const meta = {
+  component: LogoCodecademyMini
+};
+export default meta;
+export const Default = {
+  args: {}
+};

package/dist/stories/Atoms/Logos/LogoCodecademyPro.stories.js

@@ -0,0 +1,8 @@
+import { LogoCodecademyPro } from '../../../Logos';
+const meta = {
+  component: LogoCodecademyPro
+};
+export default meta;
+export const Default = {
+  args: {}
+};

package/dist/stories/Atoms/Logos/LogoCodecademyTeams.stories.js

@@ -0,0 +1,8 @@
+import { LogoCodecademyTeams } from '../../../Logos';
+const meta = {
+  component: LogoCodecademyTeams
+};
+export default meta;
+export const Default = {
+  args: {}
+};

package/dist/stories/Atoms/Logos/LogoFromSkillsoft.stories.js

@@ -0,0 +1,9 @@
+import { LogoFromSkillsoft } from '../../../Logos';
+const meta = {
+  args: {
+    height: 40
+  },
+  component: LogoFromSkillsoft
+};
+export default meta;
+export const Default = {};