feature(bc-footer): Final Styles Adjustments

johnsonandjohnson · Mar 11, 2022 · 4ef4a43 · 4ef4a43
1 parent 130129b
commit 4ef4a43
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 16 deletions.
diff --git a/packages/cx-elements/site.tailwind.config.js b/packages/cx-elements/site.tailwind.config.js
@@ -31,11 +31,11 @@ module.exports = {
         divider: '#D8D8D8',
         'body-copy': '#63666A',
         'header-copy': '#212121',
+        'footer-copy': '#FFFFFF',
       },
       'cx-secondary': {
         eyebrow: '#CC0099',
         'footer-bg': '#2B2B33',
-        'footer-text': '#FFFFFF',
       },
     },
     extend: {

diff --git a/packages/cx-elements/src/components/Element/Color/tokens/cxColor.ts b/packages/cx-elements/src/components/Element/Color/tokens/cxColor.ts
@@ -34,6 +34,6 @@ export default asTokenGroup(meta)({
   TextPrimaryBodyCopy: 'text-cx-primary-body-copy',
   TextPrimaryHeaderCopy: 'text-cx-primary-header-copy',
   BgSecondaryFooter: 'bg-cx-secondary-footer-bg',
-  TextSecondaryFooter: 'text-cx-secondary-footer-text',
+  TextPrimaryFooterCopy: 'text-cx-primary-footer-copy',
   TextSecondaryEyebrow: 'text-cx-secondary-eyebrow',
 });
diff --git a/packages/cx-layout/src/components/FooterMenu/FooterMenu.token.ts b/packages/cx-layout/src/components/FooterMenu/FooterMenu.token.ts
@@ -24,7 +24,10 @@ import { cxMenu } from './Menus';
 
 const Base = asFooterMenuToken({
   Core: {
-    Wrapper: addProps({ 'aria-label': 'Footer Menu' }),
+    Wrapper: addProps({
+      'aria-label': 'Footer Navigation Menu',
+      role: 'navigation',
+    }),
   },
   Components: {
     Wrapper: startWith(Nav),

diff --git a/packages/cx-layout/src/components/FooterMenu/Menus/Menu.tsx b/packages/cx-layout/src/components/FooterMenu/Menus/Menu.tsx
@@ -18,6 +18,7 @@ import { asCxTokenSpec, cxColor } from '@bodiless/cx-elements';
 import {
   A,
   Ul,
+  addProps,
   as,
   flowHoc,
   replaceWith,
@@ -32,6 +33,13 @@ const asMenuToken = asCxTokenSpec<ListComponents>();
 const WithMenuItem = asBodilessLink()(A);
 
 const Base = asMenuToken({
+  Core: {
+    Wrapper: addProps({
+      'aria-label': 'Navigation Menu',
+      role: 'menubar',
+    }),
+    Item: addProps({ role: 'menuitem' }),
+  },
   Components: {
     Title: replaceWith(WithMenuItem),
     _: flowHoc(
@@ -40,11 +48,15 @@ const Base = asMenuToken({
     ),
   },
   Layout: {
-    Wrapper: 'w-full md:flex md:justify-between md:flex-grow',
+    Wrapper: 'w-full md:flex md:justify-between md:flex-grow lg:h-full',
     Item: 'md:w-1/4',
   },
   Spacing: {
-    Item: 'mb-9 pb-9 last:mb-0 last:pb-0 md:mb-0 md:pb-0 lg:px-12',
+    Item: as(
+      'mb-9 pb-9 last:mb-0 last:pb-0',
+      'md:mb-0 md:pb-0 md:px-10 md:first:pl-0 md:last:pr-0',
+      'lg:px-12 lg:first:pl-12',
+    ),
   },
   Theme: {
     Item: as(
@@ -54,7 +66,7 @@ const Base = asMenuToken({
     ),
     Title: flowHoc(
       as(
-        cxColor.TextSecondaryFooter,
+        cxColor.TextPrimaryFooterCopy,
         'font-bold text-m-xl md:text-m-lg lg:text-base',
       ),
     ),

diff --git a/packages/cx-layout/src/components/FooterMenu/Menus/SubMenu.tsx b/packages/cx-layout/src/components/FooterMenu/Menus/SubMenu.tsx
@@ -18,6 +18,7 @@ import { asCxTokenSpec, cxColor } from '@bodiless/cx-elements';
 import {
   A,
   Ul,
+  addProps,
   as,
   flowHoc,
   replaceWith,
@@ -29,20 +30,24 @@ const asSubMenuToken = asCxTokenSpec<ListComponents>();
 const WithSubMenuItem = asBodilessLink()(A);
 
 const FooterSubMenu = asSubMenuToken({
+  Core: {
+    Wrapper: addProps({ role: 'menu' }),
+    Item: addProps({ role: 'menuitem' }),
+  },
   Components: {
     Wrapper: startWith(Ul),
     Title: replaceWith(WithSubMenuItem),
   },
   Theme: {
     Title: flowHoc(
       as(
-        cxColor.TextSecondaryFooter,
+        cxColor.TextPrimaryFooterCopy,
         'text-base font-medium md:text-sm lg:text-xs',
       ),
     ),
   },
   Spacing: {
-    Item: 'mt-5',
+    Item: 'mt-5 lg:mt-2',
   },
   Editors: {
     Title: asEditable('text', 'Submenu Item'),

diff --git a/packages/cx-layout/src/components/GlobalFooter/Rewards/Rewards.token.ts b/packages/cx-layout/src/components/GlobalFooter/Rewards/Rewards.token.ts
@@ -43,33 +43,33 @@ const Base = asRewardsToken({
     Wrapper: 'bg-cx-primary-card-bg md:bg-cx-secondary-footer-bg',
     Brand: as(
       'text-cx-primary-header-copy text-xl font-medium',
-      'md:text-cx-secondary-footer-text md:text-m-2xl',
+      'md:text-cx-primary-footer-copy md:text-m-2xl',
     ),
     Title: as(
       'text-cx-primary-header-copy text-m-xl font-bold',
-      'md:text-cx-secondary-footer-text md:text-base',
+      'md:text-cx-primary-footer-copy md:text-base',
       'lg:text-sm',
     ),
     Body: as(
       'text-cx-primary-header-copy text-sm',
-      'md:text-cx-secondary-footer-text md:text-base',
+      'md:text-cx-primary-footer-copy md:text-base',
       'lg:text-xs',
     ),
     FormTextFirstName: as(
       'bg-cx-primary-page-bg text-cx-primary-header-copy text-sm font-bold rounded',
-      'md:border md:border-cx-secondary-footer-text md:bg-cx-secondary-footer-bg md:text-cx-secondary-footer-text md:rounded-none',
+      'md:border md:border-cx-secondary-footer-text md:bg-cx-secondary-footer-bg md:text-cx-primary-footer-copy md:rounded-none',
       'lg:text-sm',
     ),
     FormTextEmail: as(
       'bg-cx-primary-page-bg text-cx-primary-header-copy text-sm font-bold rounded',
-      'md:border md:border-cx-secondary-footer-text md:bg-cx-secondary-footer-bg md:text-cx-secondary-footer-text md:rounded-none',
+      'md:border md:border-cx-secondary-footer-text md:bg-cx-secondary-footer-bg md:text-cx-primary-footer-copy md:rounded-none',
       'lg:text-sm',
     ),
     FormButton: as(
-      'bg-cx-primary-header-copy text-cx-secondary-footer-text text-sm font-bold rounded',
+      'bg-cx-primary-header-copy text-cx-primary-footer-copy text-sm font-bold rounded',
       'md:bg-cx-primary-card-bg md:text-cx-secondary-footer-bg md:rounded-none',
     ),
-    Footnote: 'text-xs md:text-cx-secondary-footer-text',
+    Footnote: 'text-xs md:text-cx-primary-footer-copy',
   },
   // @TODO: Placeholders must be replaced with editable fields.
   Content: {

diff --git a/packages/cx-layout/src/components/GlobalFooter/cxGlobalFooter.ts b/packages/cx-layout/src/components/GlobalFooter/cxGlobalFooter.ts
@@ -64,7 +64,7 @@ const Base = asGlobalFooterToken({
   Theme: {
     Wrapper: cxColor.BgSecondaryFooter,
     Copyright: as(
-      cxColor.TextSecondaryFooter,
+      cxColor.TextPrimaryFooterCopy,
       cxFontSize.XS,
       'border-white-400 border-t border-b md:border-0 lg:text-m-xs',
     ),