@codecademy/brand 3.5.0 → 3.6.0-alpha.63c16a9e8d.0

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/NavPanels.js

@@ -119,64 +119,136 @@ export const SkillPathsPanel = ({
     })
   });
 };
-const providers = ['AWS', 'Microsoft', 'Google', 'COMPTIA', 'ISC2'];
+const getCertificationProviderLogoUrl = fileName => `https://static-assets.codecademy.com/assets/certification-provider-logos/catalog-dropdown/${fileName}`;
+const providers = [{
+  name: 'Microsoft',
+  logoUrl: getCertificationProviderLogoUrl('microsoft-2.svg'),
+  hubType: 'subhub'
+}, {
+  name: 'CompTIA',
+  logoUrl: getCertificationProviderLogoUrl('comptia-1.svg'),
+  hubType: 'subhub'
+}, {
+  name: 'ISC2',
+  logoUrl: getCertificationProviderLogoUrl('isc2-1.svg'),
+  hubType: 'subhub'
+}, {
+  name: 'AWS',
+  logoUrl: getCertificationProviderLogoUrl('aws-2.svg'),
+  hubType: 'subhub'
+}, {
+  name: 'Google',
+  logoUrl: getCertificationProviderLogoUrl('google-1.svg'),
+  hubType: 'certification-prep'
+}, {
+  name: 'Cisco',
+  logoUrl: getCertificationProviderLogoUrl('cisco-2.svg'),
+  hubType: 'certification-prep'
+}, {
+  name: 'IIBA',
+  logoUrl: getCertificationProviderLogoUrl('iiba-2.svg'),
+  hubType: 'certification-prep'
+}, {
+  name: 'ISTQB',
+  logoUrl: getCertificationProviderLogoUrl('istqb-1.svg'),
+  hubType: 'certification-prep'
+}, {
+  name: 'ISACA',
+  logoUrl: getCertificationProviderLogoUrl('isaca-1.svg'),
+  hubType: 'certification-prep'
+}, {
+  name: 'Kubernetes',
+  logoUrl: getCertificationProviderLogoUrl('kubernetes-1.svg'),
+  hubType: 'certification-prep'
+}, {
+  name: 'Oracle',
+  logoUrl: getCertificationProviderLogoUrl('oracle-1.svg'),
+  hubType: 'certification-prep'
+}, {
+  name: 'Project Management Institute',
+  logoUrl: getCertificationProviderLogoUrl('pmi-1.svg'),
+  hubType: 'certification-prep'
+}];
+const Image = Box.withComponent('img', {
+  target: "eqfnvo0",
+  label: "Image"
+});
 const ProviderChip = ({
-  text,
+  name,
   href,
+  imgSrc,
   tabIndex
 }) => {
   return /*#__PURE__*/_jsx(Anchor, {
     href: href,
     variant: "interface",
     tabIndex: tabIndex,
-    children: /*#__PURE__*/_jsx(FlexBox, {
-      border: 1,
-      borderColor: "border-secondary",
-      borderRadius: "md",
-      py: 1.5,
-      px: 8,
-      children: /*#__PURE__*/_jsx(Text, {
-        children: text
+    width: "100%",
+    height: "100%",
+    display: "block",
+    children: /*#__PURE__*/_jsx(Card, {
+      borderColor: "border-tertiary",
+      borderRadius: "lg",
+      isInteractive: true,
+      width: "100%",
+      height: "100%",
+      p: 8,
+      children: /*#__PURE__*/_jsx(Image, {
+        src: imgSrc,
+        alt: name,
+        display: "block",
+        m: "auto",
+        height: 52
       })
     })
-  }, text);
+  }, name);
 };
 export const CertificationPathsPanel = ({
   tabIndex = 0
 }) => {
   return /*#__PURE__*/_jsxs(PanelLayout, {
     heading: "Certification paths",
-    description: "Get ready for certification exams with guided learning paths.",
+    description: "Prepare for top industry certifications with a guided path. Each one includes expert-reviewed lessons, hands-on projects, and practice tests to help you pass the exam.",
     linkItem: {
       type: 'link',
       href: '/catalog?type=certification-path',
-      text: 'View all certification paths',
+      text: 'Explore all certification paths',
       trackingTarget: 'catalog-header-view-all-certification-paths',
       id: 'view-all-certification-paths'
     },
     tabIndex: tabIndex,
-    children: [/*#__PURE__*/_jsxs(FlexBox, {
-      gap: 8,
-      children: [providers.map(provider => /*#__PURE__*/_jsx(ProviderChip, {
-        text: provider,
-        href: `/search?query=${provider} certifications`,
-        tabIndex: tabIndex
-      }, provider)), /*#__PURE__*/_jsx(ProviderChip, {
-        text: "+ More providers",
-        href: "/catalog/certification-prep",
-        tabIndex: tabIndex
-      }, "more-providers")]
+    children: [/*#__PURE__*/_jsx(Text, {
+      as: "h3",
+      fontSize: 18,
+      fontWeight: "bold",
+      children: "Providers"
     }), /*#__PURE__*/_jsx(GridBox, {
       gridTemplateColumns: {
         _: '1fr',
-        md: 'repeat(3, 1fr)'
+        xs: 'repeat(2, 1fr)',
+        sm: 'repeat(3, 1fr)',
+        md: 'repeat(4, 1fr)'
       },
-      gap: 16,
-      children: Array.from({
-        length: 6
-      }).map((_, index) => /*#__PURE__*/_jsx(CareerPathCard, {
-        tabIndex: tabIndex
-      }, `${index}-card`))
+      gap: 24,
+      width: "100%",
+      as: "ul",
+      listStyle: "none",
+      p: 0,
+      m: 0,
+      children: providers.map(({
+        name,
+        logoUrl,
+        hubType
+      }) => /*#__PURE__*/_jsx(Box, {
+        as: "li",
+        width: "100%",
+        children: /*#__PURE__*/_jsx(ProviderChip, {
+          name: name,
+          href: hubType === 'subhub' ? `/search?query=${name} certifications` : `/catalog/certification-prep?provider=${name.toLowerCase()}`,
+          imgSrc: logoUrl,
+          tabIndex: tabIndex
+        })
+      }, name))
     })]
   });
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/brand",
   "description": "Brand component library for Codecademy",
-  "version": "3.5.0",
+  "version": "3.6.0-alpha.63c16a9e8d.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",