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

package/dist/index.js

@@ -0,0 +1,86 @@
+export * as LayoutMenuVariant from './LayoutMenuVariant';
+export * from './AbbreviatedCommunityEventCard';
+export * from './AppBar';
+export * from './AppBar/AppBarSection';
+export * from './AppBarDeprecated';
+export * from './AppBarDeprecated/AppBarSectionDeprecated';
+export * from './AppHeader';
+export * from './AppHeader/AppHeaderElements/AppHeaderDropdown';
+export * from './AppHeader/AppHeaderElements/AppHeaderLink';
+export * from './AppHeader/AppHeaderElements/AppHeaderLogo';
+export * from './AppHeader/shared/types';
+export * from './AppHeaderMobile';
+export * from './AppHeaderMobile/AppHeaderMainMenuMobile';
+export * from './AppHeaderMobile/AppHeaderSubMenuMobile';
+export * from './Avatar';
+export * from './AvatarChooser';
+export * from './BackToTopAnchor';
+export * from './Banner';
+export * from './Banner/CountdownTimer';
+export * from './BetaSticker';
+export * from './CareerPathCard';
+export * from './Carousel';
+export * from './CertificationPathCard';
+export * from './CoachingSessionCard';
+export * from './CommunityEventCard';
+export * from './CommunityEventToast';
+export * from './ContentGroupBaseCard';
+export * from './ContentGroupBaseCard/types';
+export * from './ContentGroupBaseCard/helpers';
+export * from './CourseCard';
+export * from './CurriculumCard';
+export * from './CurriculumCard/Difficulty';
+export * from './CurriculumCard/Difficulty/types';
+export * from './CurriculumCard/Difficulty/helpers';
+export * from './DropdownButton';
+export * from './EmptySection';
+export * from './NotFoundContent';
+export * from './ErrorContents';
+export * from './GlobalFooter';
+export * from './GlobalHeader';
+export * from './GlobalPage';
+export * from './Grid';
+export * from './HorizontalScrollMenu';
+export * from './HubCard';
+export * from './InfoCard';
+export * from './InstructorCard';
+export * from './Konamimojisplosion';
+export * from './LandingPage';
+export * from './LayoutMenu';
+export * from './LearningOutcomeAssessmentScores';
+export * from './LearningOutcomeBadges';
+export * from './LearningOutcomeCard';
+export * from './LearningOutcomeFlyout';
+export * from './LearningOutcomeTile';
+export * from './lib/breakpointHooks';
+export * from './ListSection';
+export * from './Loading';
+export * from './LoadingCurriculumCard';
+export * from './Logos';
+export * from './MarketingToaster';
+export * from './NotificationList';
+export * from './NotificationList/NotificationItem';
+export * from './NotificationList/typings';
+export * from './PageAlerts';
+export * from './PageLayoutWithSidebarMenu';
+export * from './PageSection';
+export * from './PastDue';
+export * from './PausableImage';
+export * from './PlanCard';
+export * from './PlanCardTeams';
+export * from './PlanCard/PlanCardBanner';
+export * from './PlanCard/types';
+export * from './PricingSection';
+export * from './ProductFeatureShowcase';
+export * from './ProLogoAlt';
+export * from './RatingsBar';
+export * from './Recurly';
+export * from './ResourceCard';
+export * from './ScoreSummary';
+export * from './ScoreSummary/SubScores';
+export * from './ScoreSummary/types';
+export * from './SkillPathCard';
+export * from './SocialMediaSharing';
+export * from './SocialMediaSharingDropdown';
+export * from './Testimonial';
+export * from './AppHeader/Search/SearchWorker';

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

@@ -0,0 +1,43 @@
+export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BreakpointMinWidths = Record<Breakpoint, number>;
+export declare const breakpoints: BreakpointMinWidths;
+/**
+ * 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 declare const useBreakpoint: () => keyof typeof 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
+ */
+export declare function useBreakpointAtOrAbove(breakpoint: Breakpoint): boolean;
+/**
+ * @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 declare function useBreakpointAt(breakpoint: Breakpoint): boolean;
+/**
+ * @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 declare function useBreakpointAtOrBelow(breakpoint: Breakpoint): boolean;

package/dist/lib/breakpointHooks/index.js

@@ -0,0 +1,60 @@
+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));
+
+/**
+ * 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
+ */
+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
+ */
+export function useBreakpointAt(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
+ */
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,237 @@
+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
+});
+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

@@ -0,0 +1 @@
+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 = {};

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

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

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

@@ -0,0 +1,29 @@
+import { Background } from '@codecademy/gamut-styles';
+import { ProLabel } from '../../../Logos/ProLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: ProLabel
+};
+export default meta;
+export const Default = {
+  args: {
+    variant: 'cutout'
+  }
+};
+export const Cutout = {
+  args: {
+    variant: 'cutout'
+  }
+};
+export const Transparent = {
+  args: {
+    variant: 'transparent'
+  },
+  render: args => /*#__PURE__*/_jsx(Background, {
+    bg: "navy",
+    p: 8,
+    children: /*#__PURE__*/_jsx(ProLabel, {
+      ...args
+    })
+  })
+};

package/dist/stories/Atoms/RatingsBar.stories.js

@@ -0,0 +1,16 @@
+import { RatingsBar } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: RatingsBar,
+  args: {
+    minimumPercent: 5,
+    percent: 75
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(RatingsBar, {
+    ...args
+  }),
+  name: 'RatingsBar'
+};