@codecademy/brand 3.41.0-alpha.5a07edc219.0 → 3.41.0-alpha.a64d7e7ad2.0

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSection/index.js

@@ -0,0 +1,440 @@
+import { Anchor, Badge, Box, Column, FlexBox, GridBox, LayoutGrid, Text } from '@codecademy/gamut';
+import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
+import { TinyBlocks } from '@codecademy/gamut-illustrations';
+import { Background } from '@codecademy/gamut-styles';
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+import { useHeaderDisplayContext } from '../../../GlobalHeader/context';
+import { careerPaths, getTopSubjects, liveLearningHubItems, topLanguages } from '../../../lib/catalogList';
+import { DescriptionSectionContainer, LayoutGridAntiAliased, useMegaMenuHeaderResponsiveStyles } from '../../shared';
+import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
+import { BannerAnchor, StyledAnchorColumn, StyledColumn, StyledFillButton, SubjectAnchor, topicWrapperProps, useBannerResponsiveStyles } from './elements';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const quizAnchorData = {
+  text: 'Take our quiz',
+  id: 'quiz',
+  type: 'text-button',
+  href: '/explore/sorting-quiz',
+  trackingTarget: 'sorting_quiz'
+};
+const onboardingQuizAnchorData = {
+  text: 'Take our quiz',
+  id: 'onboarding_quiz',
+  type: 'text-button',
+  href: '/welcome/find-a-course',
+  trackingTarget: 'sorting_quiz'
+};
+const catalogButtonData = {
+  text: 'Explore all courses',
+  id: 'catalog',
+  type: 'text-button',
+  href: '/catalog',
+  trackingTarget: 'topnav_catalog_explore_full'
+};
+const uxDesignerCareerPathHighlight = {
+  text: 'Want to help shape digital products? Check out the new UX Designer career path.',
+  id: 'nav-highlight',
+  type: 'link',
+  href: '/learn/paths/ux-designer-career-path',
+  trackingTarget: 'topnav_catalog_banner_ux_designer_career_path'
+};
+export const AppHeaderCatalogSection = /*#__PURE__*/React.forwardRef(({
+  action,
+  item,
+  isOpen,
+  keyDownEvents,
+  handleClose
+}, ref) => {
+  const firstElemRef = useRef(null);
+  const {
+    setFirstItemRef
+  } = useAppHeaderDropdownContext();
+  const {
+    showOnboardingQuiz,
+    showSortingQuiz
+  } = useHeaderDisplayContext();
+  const tabIndex = isOpen === false ? -1 : 0;
+  const styles = useMegaMenuHeaderResponsiveStyles();
+  const bannerStyles = useBannerResponsiveStyles();
+  const showQuiz = showOnboardingQuiz || showSortingQuiz;
+  useEffect(() => {
+    if (setFirstItemRef && firstElemRef.current) {
+      setFirstItemRef(firstElemRef.current);
+    }
+  }, [setFirstItemRef, firstElemRef]);
+  const navHighlightData = uxDesignerCareerPathHighlight;
+  const topSubjects = getTopSubjects();
+  const onClick = (event, linkItem) => {
+    handleClose?.();
+    return action(event, linkItem);
+  };
+  const DescriptionSection = ({
+    title,
+    subtitle
+  }) => /*#__PURE__*/_jsxs(DescriptionSectionContainer, {
+    "data-focusablecatalog": "true",
+    "data-testid": "title-description-section",
+    tabIndex: -1,
+    flexDirection: "column",
+    children: [/*#__PURE__*/_jsx(Text, {
+      as: "h2",
+      variant: "title-xs",
+      mb: 8,
+      fontWeight: 700,
+      children: title
+    }), /*#__PURE__*/_jsx(Text, {
+      fontSize: 14,
+      children: subtitle
+    })]
+  });
+  return /*#__PURE__*/_jsxs(LayoutGridAntiAliased, {
+    onKeyDown: keyDownEvents,
+    ref: ref,
+    as: "ul",
+    p: 0,
+    children: [/*#__PURE__*/_jsx(StyledColumn, {
+      as: "li",
+      size: 12,
+      children: /*#__PURE__*/_jsxs(LayoutGrid, {
+        children: [/*#__PURE__*/_jsx(Column, {
+          size: {
+            xs: 12,
+            lg: 3
+          },
+          rowspan: 2,
+          children: /*#__PURE__*/_jsx(Background, {
+            ...styles,
+            px: {
+              _: 16,
+              xs: 32,
+              sm: 64,
+              md: 48,
+              lg: 24
+            },
+            py: {
+              _: 16,
+              sm: 32
+            },
+            borderBottom: 1,
+            children: /*#__PURE__*/_jsxs(FlexBox, {
+              height: "100%",
+              flexDirection: "column",
+              justifyContent: {
+                lg: 'space-between'
+              },
+              children: [/*#__PURE__*/_jsx(DescriptionSection, {
+                title: "Popular course topics",
+                subtitle: "Explore free or paid courses in topics that interest you."
+              }), /*#__PURE__*/_jsx(StyledFillButton, {
+                "data-focusablecatalog": "true",
+                href: catalogButtonData.href,
+                onClick: event => onClick(event, item),
+                tabIndex: tabIndex,
+                ref: firstElemRef,
+                children: catalogButtonData.text
+              })]
+            })
+          })
+        }), /*#__PURE__*/_jsx(Column, {
+          size: {
+            xs: 12,
+            lg: 8
+          },
+          py: 32,
+          pl: {
+            _: 16,
+            xs: 32,
+            sm: 64,
+            md: 48
+          },
+          children: /*#__PURE__*/_jsxs(GridBox, {
+            as: "ul",
+            gridTemplateColumns: {
+              _: '1fr',
+              lg: 'repeat(3, 1fr)'
+            },
+            gridTemplateRows: {
+              _: 'repeat(18, 1fr)',
+              lg: 'repeat(6, 1fr)'
+            },
+            listStyleType: "none",
+            gridAutoFlow: "column",
+            pl: 0,
+            children: [topLanguages.map(item => /*#__PURE__*/_jsx(Box, {
+              minHeight: 32,
+              ...topicWrapperProps,
+              children: /*#__PURE__*/_jsx(Anchor, {
+                "data-focusablecatalog": "true",
+                variant: "interface",
+                href: item.href,
+                onClick: event => onClick(event, item),
+                tabIndex: tabIndex,
+                children: /*#__PURE__*/_jsxs(FlexBox, {
+                  alignItems: "center",
+                  gap: 8,
+                  children: [item.text, item.badge]
+                })
+              })
+            }, item.id)), topSubjects.map(item => /*#__PURE__*/_jsx(Box, {
+              minHeight: 36,
+              ...topicWrapperProps,
+              children: /*#__PURE__*/_jsx(SubjectAnchor, {
+                "data-focusablecatalog": "true",
+                variant: "interface",
+                href: item.href,
+                onClick: event => onClick(event, item),
+                tabIndex: tabIndex,
+                children: item.text
+              })
+            }, item.id))]
+          })
+        }), /*#__PURE__*/_jsx(GridBox, {
+          ...bannerStyles,
+          gridColumnStart: {
+            xs: 1,
+            lg: 4
+          },
+          gridColumnEnd: "span 12",
+          py: 16,
+          px: {
+            _: 16,
+            xs: 32,
+            sm: 64,
+            md: 48
+          },
+          borderTop: 1,
+          children: /*#__PURE__*/_jsxs(BannerAnchor, {
+            variant: "interface",
+            href: navHighlightData.href,
+            onClick: event => onClick(event, navHighlightData),
+            "data-focusablecatalog": "true",
+            tabIndex: tabIndex,
+            children: [/*#__PURE__*/_jsxs(Box, {
+              display: {
+                xs: 'flex'
+              },
+              width: "100%",
+              alignItems: "center",
+              children: [/*#__PURE__*/_jsx(Badge, {
+                variant: "tertiary",
+                size: "sm",
+                mr: 8,
+                children: "New"
+              }), navHighlightData.text]
+            }), /*#__PURE__*/_jsx(MiniArrowRightIcon, {
+              justifySelf: "end",
+              alignSelf: "center"
+            })]
+          })
+        })]
+      })
+    }, "Popular course topics"), !item.hideCareerPaths && /*#__PURE__*/_jsx(StyledColumn, {
+      as: "li",
+      size: 12,
+      children: /*#__PURE__*/_jsxs(LayoutGrid, {
+        children: [/*#__PURE__*/_jsx(Column, {
+          size: {
+            xs: 12,
+            lg: 3
+          },
+          children: /*#__PURE__*/_jsx(Background, {
+            ...styles,
+            px: {
+              _: 16,
+              xs: 32,
+              sm: 64,
+              md: 48,
+              lg: 24
+            },
+            py: {
+              _: 16,
+              sm: 32
+            },
+            borderBottom: 1,
+            children: /*#__PURE__*/_jsx(DescriptionSection, {
+              title: "Top career paths",
+              subtitle: "Choose your career. We'll teach you the skills to get job-ready."
+            })
+          })
+        }), /*#__PURE__*/_jsx(Column, {
+          size: {
+            xs: 12,
+            lg: 8
+          },
+          children: /*#__PURE__*/_jsx(LayoutGrid, {
+            as: "ul",
+            py: 32,
+            pl: {
+              _: 16,
+              xs: 32,
+              sm: 64,
+              md: 48
+            },
+            children: careerPaths.map(item => /*#__PURE__*/_jsx(StyledAnchorColumn, {
+              as: "li",
+              size: {
+                _: 12,
+                lg: 4
+              },
+              children: /*#__PURE__*/_jsx(Anchor, {
+                "data-focusablecatalog": "true",
+                variant: "interface",
+                href: item.href,
+                onClick: event => onClick(event, item),
+                tabIndex: tabIndex,
+                children: item.text
+              })
+            }, item.id))
+          })
+        })]
+      })
+    }, "Top career paths"), /*#__PURE__*/_jsx(StyledColumn, {
+      as: "li",
+      size: 12,
+      children: /*#__PURE__*/_jsxs(LayoutGrid, {
+        children: [/*#__PURE__*/_jsx(Column, {
+          size: {
+            xs: 12,
+            lg: 3
+          },
+          children: /*#__PURE__*/_jsx(Background, {
+            ...styles,
+            px: {
+              _: 16,
+              xs: 32,
+              sm: 64,
+              md: 48,
+              lg: 24
+            },
+            py: {
+              _: 16,
+              sm: 32
+            },
+            children: /*#__PURE__*/_jsx(DescriptionSection, {
+              title: liveLearningHubItems.title,
+              subtitle: liveLearningHubItems.description || ''
+            })
+          })
+        }), /*#__PURE__*/_jsx(Column, {
+          size: {
+            xs: 12,
+            lg: 8
+          },
+          children: /*#__PURE__*/_jsx(LayoutGrid, {
+            as: "ul",
+            py: 32,
+            pl: {
+              _: 16,
+              xs: 32,
+              sm: 64,
+              md: 48
+            },
+            children: liveLearningHubItems.data.map(dataItem => {
+              const {
+                id,
+                href,
+                text,
+                badge,
+                newTab
+              } = dataItem;
+              return /*#__PURE__*/_jsx(Column, {
+                as: "li",
+                size: {
+                  _: 12,
+                  lg: 4
+                },
+                mb: {
+                  _: 16,
+                  lg: 0
+                },
+                children: /*#__PURE__*/_jsx(Anchor, {
+                  "data-focusableresource": "true",
+                  variant: "interface",
+                  href: href,
+                  onClick: event => onClick(event, dataItem),
+                  tabIndex: tabIndex,
+                  target: newTab ? '_blank' : '_self',
+                  children: 'description' in dataItem && /*#__PURE__*/_jsxs(_Fragment, {
+                    children: [/*#__PURE__*/_jsxs(FlexBox, {
+                      whiteSpace: "nowrap",
+                      children: [/*#__PURE__*/_jsx(Text, {
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        as: "h3",
+                        pb: 4,
+                        children: text
+                      }), badge]
+                    }), /*#__PURE__*/_jsx(Text, {
+                      fontSize: 14,
+                      pb: 4,
+                      pr: 40,
+                      children: dataItem.description
+                    })]
+                  })
+                })
+              }, id);
+            })
+          })
+        })]
+      })
+    }, "Live Learning"), showQuiz && /*#__PURE__*/_jsx(Column, {
+      px: {
+        _: 16,
+        xs: 32,
+        sm: 64,
+        md: 48,
+        lg: 24
+      },
+      py: 16,
+      children: /*#__PURE__*/_jsxs(FlexBox, {
+        alignItems: {
+          _: 'flex-start',
+          sm: 'center'
+        },
+        flexDirection: {
+          _: 'column',
+          sm: 'row'
+        },
+        children: [/*#__PURE__*/_jsxs(FlexBox, {
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Box, {
+            mr: 12,
+            children: /*#__PURE__*/_jsx(TinyBlocks, {
+              "aria-hidden": true,
+              height: 26,
+              width: 26
+            })
+          }), /*#__PURE__*/_jsx(Box, {
+            children: "Not sure where to begin?"
+          })]
+        }), /*#__PURE__*/_jsx(Box, {
+          children: /*#__PURE__*/_jsxs(Anchor, {
+            variant: "standard",
+            fontSize: 14,
+            fontWeight: 700,
+            textAlign: {
+              _: 'left',
+              lg: 'center'
+            },
+            href: showOnboardingQuiz ? onboardingQuizAnchorData.href : quizAnchorData.href,
+            "data-focusablecatalog": "true",
+            onClick: event => onClick(event, showOnboardingQuiz ? onboardingQuizAnchorData : quizAnchorData),
+            tabIndex: tabIndex,
+            ml: {
+              _: 0,
+              sm: 16
+            },
+            pt: {
+              _: 8,
+              sm: 0
+            },
+            children: [showOnboardingQuiz ? onboardingQuizAnchorData.text : quizAnchorData.text, /*#__PURE__*/_jsx("span", {
+              "aria-hidden": true,
+              children: "\xA0\u2192"
+            })]
+          })
+        })]
+      })
+    })]
+  });
+});

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesSection/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { RefObject } from 'react';
+import { AppHeaderAction, AppHeaderResourcesDataItem } from '../../shared';
+export type AppHeaderResourcesSectionProps = AppHeaderAction & {
+    resources: AppHeaderResourcesDataItem[];
+    ref?: RefObject<HTMLUListElement>;
+    role?: string;
+    id?: string;
+    keyDownEvents?: (event: React.KeyboardEvent) => void;
+    isOpen?: boolean;
+    handleClose?: () => void;
+};
+export declare const AppHeaderResourcesSection: React.ForwardRefExoticComponent<Omit<AppHeaderResourcesSectionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesSection/index.js

@@ -0,0 +1,194 @@
+import _styled from "@emotion/styled/base";
+import { Anchor, Column, FlexBox, LayoutGrid, Text } from '@codecademy/gamut';
+import { Background, css } from '@codecademy/gamut-styles';
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+import { DescriptionSectionContainer, LayoutGridAntiAliased, useMegaMenuHeaderResponsiveStyles } from '../../shared';
+import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StyledColumn = /*#__PURE__*/_styled(Column, {
+  target: "e1wdl1ig0",
+  label: "StyledColumn"
+})(css({
+  borderBottom: 1,
+  borderColor: 'border-primary'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzU2VjdGlvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJxQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc1NlY3Rpb24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQW5jaG9yLCBDb2x1bW4sIEZsZXhCb3gsIExheW91dEdyaWQsIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBCYWNrZ3JvdW5kLCBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgUmVmT2JqZWN0LCB1c2VFZmZlY3QsIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJMaW5rSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRGF0YUl0ZW0sXG4gIERlc2NyaXB0aW9uU2VjdGlvbkNvbnRhaW5lcixcbiAgTGF5b3V0R3JpZEFudGlBbGlhc2VkLFxuICB1c2VNZWdhTWVudUhlYWRlclJlc3BvbnNpdmVTdHlsZXMsXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJEcm9wZG93bkNvbnRleHQgfSBmcm9tICcuLi9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyJztcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyUmVzb3VyY2VzU2VjdGlvblByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICByZXNvdXJjZXM6IEFwcEhlYWRlclJlc291cmNlc0RhdGFJdGVtW107XG4gIHJlZj86IFJlZk9iamVjdDxIVE1MVUxpc3RFbGVtZW50PjtcbiAgcm9sZT86IHN0cmluZztcbiAgaWQ/OiBzdHJpbmc7XG4gIGtleURvd25FdmVudHM/OiAoZXZlbnQ6IFJlYWN0LktleWJvYXJkRXZlbnQpID0+IHZvaWQ7XG4gIGlzT3Blbj86IGJvb2xlYW47XG4gIGhhbmRsZUNsb3NlPzogKCkgPT4gdm9pZDtcbn07XG5cbmNvbnN0IFN0eWxlZENvbHVtbiA9IHN0eWxlZChDb2x1bW4pKFxuICBjc3MoeyBib3JkZXJCb3R0b206IDEsIGJvcmRlckNvbG9yOiAnYm9yZGVyLXByaW1hcnknIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQXBwSGVhZGVyUmVzb3VyY2VzU2VjdGlvbiA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxEaXZFbGVtZW50LFxuICBBcHBIZWFkZXJSZXNvdXJjZXNTZWN0aW9uUHJvcHNcbj4oKHsgcmVzb3VyY2VzLCBhY3Rpb24sIGlzT3Blbiwga2V5RG93bkV2ZW50cywgaGFuZGxlQ2xvc2UgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IHRhYkluZGV4ID0gaXNPcGVuID09PSBmYWxzZSA/IC0xIDogMDtcbiAgY29uc3Qgc3R5bGVzID0gdXNlTWVnYU1lbnVIZWFkZXJSZXNwb25zaXZlU3R5bGVzKCk7XG4gIGNvbnN0IHsgc2V0Rmlyc3RJdGVtUmVmIH0gPSB1c2VBcHBIZWFkZXJEcm9wZG93bkNvbnRleHQoKTtcbiAgY29uc3QgZmlyc3RFbGVtUmVmID0gdXNlUmVmPEhUTUxBbmNob3JFbGVtZW50PihudWxsKTtcblxuICBjb25zdCBvbkNsaWNrID0gKFxuICAgIGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50PEhUTUxBbmNob3JFbGVtZW50LCBNb3VzZUV2ZW50PixcbiAgICBsaW5rSXRlbTogQXBwSGVhZGVyTGlua0l0ZW1cbiAgKSA9PiB7XG4gICAgaGFuZGxlQ2xvc2U/LigpO1xuICAgIHJldHVybiBhY3Rpb24oZXZlbnQsIGxpbmtJdGVtKTtcbiAgfTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChzZXRGaXJzdEl0ZW1SZWYgJiYgZmlyc3RFbGVtUmVmLmN1cnJlbnQpIHtcbiAgICAgIHNldEZpcnN0SXRlbVJlZihmaXJzdEVsZW1SZWYuY3VycmVudCk7XG4gICAgfVxuICB9LCBbc2V0Rmlyc3RJdGVtUmVmLCBmaXJzdEVsZW1SZWZdKTtcblxuICBjb25zdCBEZXNjcmlwdGlvblNlY3Rpb246IFJlYWN0LkZDPHtcbiAgICB0aXRsZTogc3RyaW5nO1xuICAgIHN1YnRpdGxlPzogc3RyaW5nO1xuICB9PiA9ICh7IHRpdGxlLCBzdWJ0aXRsZSB9KSA9PiAoXG4gICAgPERlc2NyaXB0aW9uU2VjdGlvbkNvbnRhaW5lclxuICAgICAgZGF0YS1mb2N1c2FibGVyZXNvdXJjZT1cInRydWVcIlxuICAgICAgdGFiSW5kZXg9ey0xfVxuICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgPlxuICAgICAgPFRleHRcbiAgICAgICAgYXM9XCJoMlwiXG4gICAgICAgIHZhcmlhbnQ9XCJ0aXRsZS14c1wiXG4gICAgICAgIHByPXt7IF86IDk2LCBtZDogMTYgfX1cbiAgICAgICAgbXI9e3sgXzogOTYsIG1kOiAwIH19XG4gICAgICA+XG4gICAgICAgIHt0aXRsZX1cbiAgICAgIDwvVGV4dD5cbiAgICAgIHtzdWJ0aXRsZSAmJiAoXG4gICAgICAgIDxUZXh0IGZvbnRTaXplPXsxNH0gbXk9ezh9PlxuICAgICAgICAgIHtzdWJ0aXRsZX1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgKX1cbiAgICA8L0Rlc2NyaXB0aW9uU2VjdGlvbkNvbnRhaW5lcj5cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxMYXlvdXRHcmlkQW50aUFsaWFzZWQgb25LZXlEb3duPXtrZXlEb3duRXZlbnRzfSByZWY9e3JlZn0gYXM9XCJ1bFwiIHA9ezB9PlxuICAgICAge3Jlc291cmNlcy5tYXAoKHNlY3Rpb24sIHNlY3Rpb25JbmRleCkgPT4ge1xuICAgICAgICBjb25zdCB7IHRpdGxlLCBkZXNjcmlwdGlvbiwgbGlua3MsIGRhdGEgfSA9IHNlY3Rpb247XG4gICAgICAgIGNvbnN0IGJvcmRlckJvdHRvbSA9IHNlY3Rpb25JbmRleCA9PT0gcmVzb3VyY2VzLmxlbmd0aCAtIDEgPyAnbm9uZScgOiAxO1xuXG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPFN0eWxlZENvbHVtbiBzaXplPXsxMn0ga2V5PXt0aXRsZX0gYXM9XCJsaVwiPlxuICAgICAgICAgICAgPExheW91dEdyaWQ+XG4gICAgICAgICAgICAgIDxDb2x1bW4gc2l6ZT17eyB4czogMTIsIG1kOiAzIH19PlxuICAgICAgICAgICAgICAgIDxCYWNrZ3JvdW5kXG4gICAgICAgICAgICAgICAgICB7Li4uc3R5bGVzfVxuICAgICAgICAgICAgICAgICAgcHg9e3sgXzogMTYsIHhzOiAzMiB9fVxuICAgICAgICAgICAgICAgICAgcHk9e3sgXzogMTYsIHNtOiAyNCB9fVxuICAgICAgICAgICAgICAgICAgYm9yZGVyQm90dG9tPXtib3JkZXJCb3R0b219XG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgPERlc2NyaXB0aW9uU2VjdGlvbiB0aXRsZT17dGl0bGV9IHN1YnRpdGxlPXtkZXNjcmlwdGlvbn0gLz5cbiAgICAgICAgICAgICAgICAgIHtsaW5rcyAmJiAoXG4gICAgICAgICAgICAgICAgICAgIDxGbGV4Qm94IGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIiBhbGlnbkl0ZW1zPVwiZmxleC1zdGFydFwiPlxuICAgICAgICAgICAgICAgICAgICAgIHtsaW5rcy5tYXAoKGxpbmssIGxpbmtJbmRleCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgPEFuY2hvclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJzdGFuZGFyZFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezE0fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGZvbnRXZWlnaHQ9ezcwMH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0ZXh0QWxpZ249e3sgXzogJ2NlbnRlcicsIG1kOiAnbGVmdCcgfX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBocmVmPXtsaW5rLmhyZWZ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZGF0YS1mb2N1c2FibGVyZXNvdXJjZT1cInRydWVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eyhcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50PEhUTUxBbmNob3JFbGVtZW50PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICkgPT4gb25DbGljayhldmVudCwgbGluayl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG10PXt7IF86IDE2LCBsZzogZGVzY3JpcHRpb24gPyAxNiA6IDI0IH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgdGFyZ2V0PXtsaW5rLm5ld1RhYiA/ICdfYmxhbmsnIDogJ19zZWxmJ31cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBrZXk9e2xpbmsuaWR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVmPXtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNlY3Rpb25JbmRleCA9PT0gMCAmJiBsaW5rSW5kZXggPT09IDBcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPyBmaXJzdEVsZW1SZWZcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgOiB1bmRlZmluZWRcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7bGluay50ZXh0fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuIGFyaWEtaGlkZGVuPiZuYnNwO+KGkjwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgPC9BbmNob3I+XG4gICAgICAgICAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgIDwvQmFja2dyb3VuZD5cbiAgICAgICAgICAgICAgPC9Db2x1bW4+XG4gICAgICAgICAgICAgIDxDb2x1bW4gc2l6ZT17eyB4czogMTIsIG1kOiA4IH19PlxuICAgICAgICAgICAgICAgIDxMYXlvdXRHcmlkXG4gICAgICAgICAgICAgICAgICBhcz1cInVsXCJcbiAgICAgICAgICAgICAgICAgIHB0PXszMn1cbiAgICAgICAgICAgICAgICAgIHBiPXsyNH1cbiAgICAgICAgICAgICAgICAgIHBsPXt7IF86IDE2LCBzbTogNjQsIG1kOiA0OCB9fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtkYXRhLm1hcCgoaXRlbSkgPT4ge1xuICAgICAgICAgICAgICAgICAgICBjb25zdCB7IGlkLCBocmVmLCB0ZXh0LCBiYWRnZSwgbmV3VGFiIH0gPSBpdGVtO1xuXG4gICAgICAgICAgICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICAgICAgICAgICAgPENvbHVtbiBhcz1cImxpXCIga2V5PXtpZH0gc2l6ZT17eyBfOiAxMiwgbGc6IDQgfX0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8QW5jaG9yXG4gICAgICAgICAgICAgICAgICAgICAgICAgIGRhdGEtZm9jdXNhYmxlcmVzb3VyY2U9XCJ0cnVlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIGhyZWY9e2hyZWZ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eyhcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQW5jaG9yRWxlbWVudD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgKSA9PiBvbkNsaWNrKGV2ZW50LCBpdGVtKX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgICAgICAgICAgICAgICAgICAgICB0YXJnZXQ9e25ld1RhYiA/ICdfYmxhbmsnIDogJ19zZWxmJ31cbiAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgeydkZXNjcmlwdGlvbicgaW4gaXRlbSA/IChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEZsZXhCb3ggd2hpdGVTcGFjZT1cIm5vd3JhcFwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGZvbnRTaXplPXsxNn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmb250V2VpZ2h0PVwiYm9sZFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcGI9ezR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7dGV4dH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7YmFkZ2V9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VGV4dCBmb250U2l6ZT17MTR9IHBiPXsyNH0gcHI9ezQwfT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2l0ZW0uZGVzY3JpcHRpb259XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPFRleHQgZm9udFNpemU9ezE2fSBwYj17OH0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7dGV4dH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0FuY2hvcj5cbiAgICAgICAgICAgICAgICAgICAgICA8L0NvbHVtbj5cbiAgICAgICAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgIDwvTGF5b3V0R3JpZD5cbiAgICAgICAgICAgICAgPC9Db2x1bW4+XG4gICAgICAgICAgICA8L0xheW91dEdyaWQ+XG4gICAgICAgICAgPC9TdHlsZWRDb2x1bW4+XG4gICAgICAgICk7XG4gICAgICB9KX1cbiAgICA8L0xheW91dEdyaWRBbnRpQWxpYXNlZD5cbiAgKTtcbn0pO1xuIl19 */");
+export const AppHeaderResourcesSection = /*#__PURE__*/React.forwardRef(({
+  resources,
+  action,
+  isOpen,
+  keyDownEvents,
+  handleClose
+}, ref) => {
+  const tabIndex = isOpen === false ? -1 : 0;
+  const styles = useMegaMenuHeaderResponsiveStyles();
+  const {
+    setFirstItemRef
+  } = useAppHeaderDropdownContext();
+  const firstElemRef = useRef(null);
+  const onClick = (event, linkItem) => {
+    handleClose?.();
+    return action(event, linkItem);
+  };
+  useEffect(() => {
+    if (setFirstItemRef && firstElemRef.current) {
+      setFirstItemRef(firstElemRef.current);
+    }
+  }, [setFirstItemRef, firstElemRef]);
+  const DescriptionSection = ({
+    title,
+    subtitle
+  }) => /*#__PURE__*/_jsxs(DescriptionSectionContainer, {
+    "data-focusableresource": "true",
+    tabIndex: -1,
+    flexDirection: "column",
+    children: [/*#__PURE__*/_jsx(Text, {
+      as: "h2",
+      variant: "title-xs",
+      pr: {
+        _: 96,
+        md: 16
+      },
+      mr: {
+        _: 96,
+        md: 0
+      },
+      children: title
+    }), subtitle && /*#__PURE__*/_jsx(Text, {
+      fontSize: 14,
+      my: 8,
+      children: subtitle
+    })]
+  });
+  return /*#__PURE__*/_jsx(LayoutGridAntiAliased, {
+    onKeyDown: keyDownEvents,
+    ref: ref,
+    as: "ul",
+    p: 0,
+    children: resources.map((section, sectionIndex) => {
+      const {
+        title,
+        description,
+        links,
+        data
+      } = section;
+      const borderBottom = sectionIndex === resources.length - 1 ? 'none' : 1;
+      return /*#__PURE__*/_jsx(StyledColumn, {
+        size: 12,
+        as: "li",
+        children: /*#__PURE__*/_jsxs(LayoutGrid, {
+          children: [/*#__PURE__*/_jsx(Column, {
+            size: {
+              xs: 12,
+              md: 3
+            },
+            children: /*#__PURE__*/_jsxs(Background, {
+              ...styles,
+              px: {
+                _: 16,
+                xs: 32
+              },
+              py: {
+                _: 16,
+                sm: 24
+              },
+              borderBottom: borderBottom,
+              children: [/*#__PURE__*/_jsx(DescriptionSection, {
+                title: title,
+                subtitle: description
+              }), links && /*#__PURE__*/_jsx(FlexBox, {
+                flexDirection: "column",
+                alignItems: "flex-start",
+                children: links.map((link, linkIndex) => {
+                  return /*#__PURE__*/_jsxs(Anchor, {
+                    variant: "standard",
+                    fontSize: 14,
+                    fontWeight: 700,
+                    textAlign: {
+                      _: 'center',
+                      md: 'left'
+                    },
+                    href: link.href,
+                    "data-focusableresource": "true",
+                    onClick: event => onClick(event, link),
+                    tabIndex: tabIndex,
+                    mt: {
+                      _: 16,
+                      lg: description ? 16 : 24
+                    },
+                    target: link.newTab ? '_blank' : '_self',
+                    ref: sectionIndex === 0 && linkIndex === 0 ? firstElemRef : undefined,
+                    children: [link.text, /*#__PURE__*/_jsx("span", {
+                      "aria-hidden": true,
+                      children: "\xA0\u2192"
+                    })]
+                  }, link.id);
+                })
+              })]
+            })
+          }), /*#__PURE__*/_jsx(Column, {
+            size: {
+              xs: 12,
+              md: 8
+            },
+            children: /*#__PURE__*/_jsx(LayoutGrid, {
+              as: "ul",
+              pt: 32,
+              pb: 24,
+              pl: {
+                _: 16,
+                sm: 64,
+                md: 48
+              },
+              children: data.map(item => {
+                const {
+                  id,
+                  href,
+                  text,
+                  badge,
+                  newTab
+                } = item;
+                return /*#__PURE__*/_jsx(Column, {
+                  as: "li",
+                  size: {
+                    _: 12,
+                    lg: 4
+                  },
+                  children: /*#__PURE__*/_jsx(Anchor, {
+                    "data-focusableresource": "true",
+                    variant: "interface",
+                    href: href,
+                    onClick: event => onClick(event, item),
+                    tabIndex: tabIndex,
+                    target: newTab ? '_blank' : '_self',
+                    children: 'description' in item ? /*#__PURE__*/_jsxs(_Fragment, {
+                      children: [/*#__PURE__*/_jsxs(FlexBox, {
+                        whiteSpace: "nowrap",
+                        children: [/*#__PURE__*/_jsx(Text, {
+                          fontSize: 16,
+                          fontWeight: "bold",
+                          as: "h3",
+                          pb: 4,
+                          children: text
+                        }), badge]
+                      }), /*#__PURE__*/_jsx(Text, {
+                        fontSize: 14,
+                        pb: 24,
+                        pr: 40,
+                        children: item.description
+                      })]
+                    }) : /*#__PURE__*/_jsx(Text, {
+                      fontSize: 16,
+                      pb: 8,
+                      children: text
+                    })
+                  })
+                }, id);
+              })
+            })
+          })]
+        })
+      }, title);
+    })
+  });
+});

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

@@ -1,3 +1,6 @@
 import { AppHeaderLinkItem, AppHeaderResourcesDataItem } from '../../AppHeader/shared';
 export declare const careerPaths: AppHeaderLinkItem[];
+export declare const liveLearningHubItems: AppHeaderResourcesDataItem;
 export declare const liveLearningNavPanelItems: (isCoachingEnabled?: boolean) => AppHeaderResourcesDataItem;
+export declare const topLanguages: AppHeaderLinkItem[];
+export declare const getTopSubjects: () => AppHeaderLinkItem[];