fix(vital-header, vital-footer): convert to default breakpoints and a…

…djust header/footer (#1575) * fix(cx-layout): Reset TW & fixed up footer/header * fix vital colors * fix(vita-layout): address feedback
johnsonandjohnson · Apr 26, 2022 · 537cbab · 537cbab
1 parent 7f3d885
commit 537cbab
Show file tree

Hide file tree

Showing 16 changed files with 71 additions and 76 deletions.
diff --git a/packages/vital-elements/src/components/Spacing/tokens/vitalSpacing.ts b/packages/vital-elements/src/components/Spacing/tokens/vitalSpacing.ts
@@ -29,7 +29,7 @@ const meta = {
  */
 export default asTokenGroup(meta)({
   WithSiteMargin: 'mx-site-percent md:mx-md-site-percent xl:px-40',
-  WithSiteXLConstraint: 'xl:container xl:mx-auto',
+  WithSiteXLConstraint: '2xl:container 2xl:mx-auto',
   Gutter: 'p-1 md:p-2 lg:p-3',
   GutterOffset: '-mx-1 md:-mx-2 lg:-mx-3',
 });
diff --git a/packages/vital-layout/src/components/Footer/Rewards/tokens/vitalRewards.ts b/packages/vital-layout/src/components/Footer/Rewards/tokens/vitalRewards.ts
@@ -20,16 +20,29 @@ import {
 } from '@bodiless/fclasses';
 import { asRewardsToken } from '../RewardsClean';
 
+/*
+ * @TODO
+ * all the styling/tokens for vitalRewards is a placeholder for looks only
+ * and could be cleaned up and follow correct patterns when this component
+ * is actually built.
+ */
+
+const RewardsFormElement = as(
+  'bg-vital-primary-page-bg text-vital-primary-header-copy',
+  '2xl:border 2xl:border-vital-secondary-footer-text 2xl:bg-vital-secondary-footer-bg 2xl:text-vital-primary-footer-copy',
+);
+const RewardColorCopy = 'text-vital-primary-header-copy 2xl:text-vital-primary-footer-copy';
+
 const Base = asRewardsToken({
   Components: {
     Wrapper: startWith(Div),
   },
   Layout: {
-    Wrapper: 'w-full',
+    Wrapper: 'w-full max-w-3xl mx-auto',
     FormWrapper: 'md:flex md:justify-between lg:block',
     FormTextFirstName: 'w-full lg:w-44 lg:block',
     FormTextEmail: 'w-full lg:w-44 lg:block',
-    FormButton: 'w-full lg:w-48 lg:block',
+    FormButton: 'w-full lg:w-full lg:block',
   },
   Spacing: {
     Brand: 'mb-8 md:mb-4 lg:mb-2',
@@ -42,34 +55,25 @@ const Base = asRewardsToken({
   // @TODO: Rewards colors needs to be organized/setup and updated.
   Theme: {
     Brand: as(
-      'text-vital-primary-header-copy text-xl font-medium',
-      'md:text-vital-primary-footer-copy md:text-m-2xl',
+      'text-xl lg:text-m-2xl font-medium',
+      RewardColorCopy,
     ),
     Title: as(
-      'text-vital-primary-header-copy text-m-xl font-bold',
-      'md:text-vital-primary-footer-copy md:text-base',
-      'lg:text-sm',
+      'text-m-xl md:text-base lg:text-sm font-bold',
+      RewardColorCopy,
     ),
     Body: as(
-      'text-vital-primary-header-copy text-sm',
-      'md:text-vital-primary-footer-copy md:text-base',
-      'lg:text-xs',
-    ),
-    FormTextFirstName: as(
-      'bg-vital-primary-page-bg text-vital-primary-header-copy text-sm font-bold rounded',
-      'md:border md:border-vital-secondary-footer-text md:bg-vital-secondary-footer-bg md:text-vital-primary-footer-copy md:rounded-none',
-      'lg:text-sm',
-    ),
-    FormTextEmail: as(
-      'bg-vital-primary-page-bg text-vital-primary-header-copy text-sm font-bold rounded',
-      'md:border md:border-vital-secondary-footer-text md:bg-vital-secondary-footer-bg md:text-vital-primary-footer-copy md:rounded-none',
-      'lg:text-sm',
+      'text-sm md:text-base lg:text-xs',
+      RewardColorCopy,
     ),
+    FormTextFirstName: RewardsFormElement,
+    FormTextEmail: RewardsFormElement,
     FormButton: as(
-      'bg-vital-primary-header-copy text-vital-primary-footer-copy text-sm font-bold rounded',
-      'md:bg-vital-primary-card-bg md:text-vital-secondary-footer-bg md:rounded-none',
+      'bg-vital-primary-header-copy 2xl:bg-vital-primary-card-bg ',
+      'text-vital-primary-footer-copy 2xl:text-vital-secondary-footer-bg',
+      'text-sm font-bold rounded lg:rounded-none',
     ),
-    Footnote: 'text-xs md:text-vital-primary-footer-copy',
+    Footnote: 'text-xs 2xl:text-vital-primary-footer-copy',
   },
   // @TODO: Placeholders must be replaced with editable fields.
   Content: {
@@ -80,7 +84,7 @@ const Base = asRewardsToken({
       children: 'Email Signup & Rewards',
     }),
     Body: withProps({
-      children: 'Want to receive tips, personalized content and exclusive offers from Johnson & Johnson? Sign up for the Care Club Rewards program today! TERMS & CONDITIONS',
+      children: 'Want to receive tips, personalized content and exclusive offers? Sign up for the Rewards program today! TERMS & CONDITIONS',
     }),
     FormTextFirstName: withProps({
       placeholder: 'First name',

diff --git a/packages/vital-layout/src/components/Footer/SocialLinks/tokens/vitalSocialLinks.ts b/packages/vital-layout/src/components/Footer/SocialLinks/tokens/vitalSocialLinks.ts
@@ -25,7 +25,7 @@ const Base = asSocialLinksToken({
   // @TODO: After Social Links implementations, readjust layout.
   Layout: {
     Wrapper: 'w-full flex',
-    InnerWrapper: 'w-full inline-flex justify-between mx-4 md:mx-0 lg:w-20 lg:mx-10 lg:mr-16',
+    InnerWrapper: 'w-full inline-flex justify-between mx-4 md:mx-0 xl:w-20 xl:mx-10 xl:mr-16',
   }
 });
 

diff --git a/packages/vital-layout/src/components/Footer/tokens/vitalFooter.ts b/packages/vital-layout/src/components/Footer/tokens/vitalFooter.ts
@@ -29,37 +29,41 @@ const Base = asFooterToken({
   },
   Layout: {
     Wrapper: 'w-full',
-    Container: 'lg:flex',
-    Column: 'w-full lg:first:w-1/4 lg:w-3/4',
+    Container: '2xl:flex',
+    Column: 'w-full 2xl:first:w-1/4 2xl:w-3/4',
     RewardsWrapper: as(
       // This makes RewardsWrapper full screen on mobile. This is necessary
       // because we have to flow specific white background inside a container
       // with margin.
       'max-w-screen w-screen relative inset-x-1/2 mx-negative-half-screen px-site-percent py-9',
-      // Reset RewardsWrapper to follow container from tablet on.
-      'md:w-full md:static md:inset-x-0 md:mx-0 md:p-0',
+      // Reset RewardsWrapper to follow container from 2xl device and on.
+      '2xl:w-full 2xl:static 2xl:inset-x-0 2xl:mx-0 2xl:p-0',
     ),
-    Row: 'w-full lg:flex lg:space-between',
+    Row: 'w-full xl:flex xl:space-between',
     FooterMenuWrapper: 'w-full',
-    CopyrightWrapper: 'w-full lg:w-3/4',
-    SocialLinksWrapper: 'w-full lg:w-1/4',
+    CopyrightWrapper: 'w-full 2xl:w-3/4',
+    SocialLinksWrapper: 'w-full 2xl:w-1/4',
   },
   Spacing: {
-    Wrapper: 'mt-10',
+    Wrapper: 'mt-10', // Vertical
     Container: as(
       vitalSpacing.WithSiteMargin,
       vitalSpacing.WithSiteXLConstraint,
-      'lg:pt-16 lg:pb-10',
+      '2xl:pt-16 2xl:pb-10', // Vertical
     ),
-    Column: 'md:py-9 lg:py-0 lg:pl-28 lg:first:pl-0 lg:first:pr-20',
-    Row: 'md:mb-8 md:last:mb-0 lg:mb-9',
-    RewardsWrapper: 'md:mb-0',
-    FooterMenuWrapper: 'py-9 md:p-0',
-    Copyright: 'py-6 md:mb-4 md:py-6 lg:py-0 lg:mb-0',
+    Column: as(
+      'md:last:py-9 2xl:py-9 2xl:first:pr-20',
+    ),
+    Row: 'md:mb-8 md:last:mb-0 2xl:mb-9', // Vertical
+    RewardsWrapper: as(
+      'md:mb-0', // Vertical
+    ),
+    FooterMenuWrapper: 'py-9 md:p-0', // Vertical
+    Copyright: 'py-6 md:mb-4 md:py-6 2xl:py-0 2xl:mb-0', // Vertical
     SocialLinksWrapper: 'py-5 md:p-0',
   },
   Theme: {
-    RewardsWrapper: 'bg-vital-primary-card-bg md:bg-vital-secondary-footer-bg',
+    RewardsWrapper: 'bg-vital-primary-card-bg 2xl:bg-vital-secondary-footer-bg',
     Copyright: as(
       vitalColor.BorderSecondarySeparator,
       'border-t border-b md:border-0',

diff --git a/packages/vital-layout/src/components/Header/tokens/vitalHeader.ts b/packages/vital-layout/src/components/Header/tokens/vitalHeader.ts
@@ -76,10 +76,10 @@ const Base = asHeaderToken({
   },
   Layout: {
     Container: 'flex justify-between items-center',
-    MenuContainer: 'hidden lg:flex justify-between items-center flex-grow',
+    MenuContainer: 'hidden xl:flex justify-between items-center flex-grow',
     ActionMenuContainer: 'flex items-center',
     MenuToggler: 'flex justify-center items-center',
-    MenuTogglerWrapper: 'flex lg:hidden',
+    MenuTogglerWrapper: 'flex xl:hidden',
   },
   Spacing: {
     Container: as(

diff --git a/packages/vital-layout/src/components/Search/DesktopSearch/vitalDesktopSearch.ts b/packages/vital-layout/src/components/Search/DesktopSearch/vitalDesktopSearch.ts
@@ -12,7 +12,6 @@
  * limitations under the License.
  */
 
-import { addProps } from '@bodiless/fclasses';
 import { asDesktopSearchToken } from './DesktopSearchClean';
 
 /**
@@ -26,9 +25,6 @@ const Base = asDesktopSearchToken({
     Wrapper: 'px-4 lg:pl-0 lg:pr-5',
     Icon: 'm-3'
   },
-  Content: {
-    Label: addProps({ children: 'Search' })
-  }
 });
 
 const Default = asDesktopSearchToken({

diff --git a/packages/vital-layout/src/components/Search/SearchToggler/vitalSearchToggler.ts b/packages/vital-layout/src/components/Search/SearchToggler/vitalSearchToggler.ts
@@ -19,7 +19,7 @@ import { asSearchTogglerToken } from './SearchTogglerClean';
  */
 const Base = asSearchTogglerToken({
   Layout: {
-    Wrapper: 'lg:hidden',
+    Wrapper: 'xl:hidden',
   },
   Spacing: {
     Wrapper: 'my-4',

diff --git a/packages/vital-layout/tailwind.config.js b/packages/vital-layout/tailwind.config.js
@@ -21,31 +21,26 @@ const twConfig = {
     './lib/**/!(*.d).{ts,js,jsx,tsx}',
   ],
   theme: {
-    screens: {
-      md: '768px',
-      lg: '1025px',
-      xl: '1921px',
-    },
     // Colors are used in styleguide.
     colors: {
       red: '#FF0000',
       green: '#00FF00',
       blue: '#0000FF',
       orange: '#FFA500',
     },
-    maxWidth: {
-      20: '5rem',
-      28: '7rem',
-      64: '16rem',
-      screen: '100vw',
-    },
-    minWidth: {
-      28: '7rem',
-    },
     extend: {
       margin: {
         'negative-half-screen': '-50vw',
       },
+      maxWidth: {
+        20: '5rem',
+        28: '7rem',
+        64: '16rem',
+        screen: '100vw',
+      },
+      minWidth: {
+        28: '7rem',
+      },
     },
   },
 };

diff --git a/packages/vital-link/src/components/Link/tokens/vitalLink.ts b/packages/vital-link/src/components/Link/tokens/vitalLink.ts
@@ -99,11 +99,11 @@ const WhereToBuy = asLinkToken({
     Icon: startWith(CartIcon),
   },
   Layout: {
-    Wrapper: 'w-full flex justify-center items-center max-w-64 h-12 lg:w-48',
+    Wrapper: 'w-full flex justify-center items-center max-w-64 h-12 lg:w-full',
   },
   Spacing: {
     Wrapper: 'mx-auto p-3',
-    Icon: 'mr-3',
+    Icon: 'mr-3 xl:mr-0 2xl:mr-3',
   },
   Theme: {
     Wrapper: as(
@@ -116,7 +116,7 @@ const WhereToBuy = asLinkToken({
       'rounded',
     ),
     Icon: 'w-6 h-6',
-    Body: 'leading',
+    Body: 'leading xl:hidden 2xl:block',
   },
   Content: {
     _: withProps({

diff --git a/packages/vital-navigation/src/components/BurgerMenu/tokens/vitalBurgerMenu.ts b/packages/vital-navigation/src/components/BurgerMenu/tokens/vitalBurgerMenu.ts
@@ -38,14 +38,14 @@ const Base = asBurgerMenuToken({
     WhereToBuy: vitalLink.WhereToBuyWithoutIcon,
   },
   Layout: {
-    Wrapper: 'w-full h-full fixed left-0 top-0 bottom-0 md:w-7/12 lg:hidden',
+    Wrapper: 'w-full h-full fixed left-0 top-0 bottom-0 md:w-7/12 xl:hidden',
     Container: 'flex flex-col h-full max-h-screen',
     MenuTogglerWrapper: 'flex justify-end',
     MenuToggler: 'flex justify-center items-center',
     MenuWrapper: 'flex-grow overflow-y-auto',
     FooterWrapper: 'w-full flex flex-col items-center',
     ActionFooterContainer: 'w-full flex justify-center items-center',
-    Overlay: 'w-full h-full fixed left-0 top-0 lg:hidden',
+    Overlay: 'w-full h-full fixed left-0 top-0 xl:hidden',
   },
   Spacing: {
     // @TODO: perhaps this should be an element spacing token like "LargeIconSize".

diff --git a/packages/vital-navigation/src/components/Menu/tokens/vitalMenu.ts b/packages/vital-navigation/src/components/Menu/tokens/vitalMenu.ts
@@ -115,6 +115,7 @@ const Footer = asMenuToken({
   },
   Spacing: {
     Title: 'lg:mb-4',
+    Wrapper: 'md:space-x-10 lg:space-x-12',
   },
   Theme: {
     // @TODO: This 'as' is needed only because of a bug and should be removed when it is fixed.

diff --git a/packages/vital-navigation/src/components/Separator/tokens/vitalSeparator.ts b/packages/vital-navigation/src/components/Separator/tokens/vitalSeparator.ts
@@ -35,8 +35,7 @@ const FooterMenu = asElementToken({
   Spacing: {
     _: as(
       'mb-7 pb-8 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',
+      'md:mb-0 md:pb-0',
     ),
   },
 });

diff --git a/sites/vital-demo/src/data/site/copyright.json b/sites/vital-demo/src/data/site/copyright.json
@@ -3,7 +3,7 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "© Johnson & Johnson Consumer Inc. 2021. All rights reserved. This site is published by Johnson & Johnson Consumer Inc., McNeil Consumer Healthcare Division., which is solely responsible for its contents. This website is intended for visitors from the United States. The third-party trademarks used herein are trademarks of their respective owners. Freedom from Want illustration © SEPS licensed by Curtis Licensing, Indianapolis, IN. Photograph based on the Freedom From Want illustration. Freedom From Want © SEPS licensed by Curtis Licensing, Indianapolis, IN."
+        "text": "© COMPANY  Inc. 2022. All rights reserved. This site is published by COMPANY Inc., which is solely responsible for its contents. This website is intended for visitors from the United States. The third-party trademarks used herein are trademarks of their respective owners. Freedom from Want illustration © SEPS licensed by Curtis Licensing, Indianapolis, IN. Photograph based on the Freedom From Want illustration. Freedom From Want © SEPS licensed by Curtis Licensing, Indianapolis, IN."
       }
     ]
   }

diff --git a/...-bb90-476a-a45e-48876c156f21$sublist$0cbea1d2-5956-40e5-b8e5-f1156b1504a8$title$text.json b/...-bb90-476a-a45e-48876c156f21$sublist$0cbea1d2-5956-40e5-b8e5-f1156b1504a8$title$text.json
diff --git a/sites/vital-demo/src/data/site/footer$d59b3bc3-bb90-476a-a45e-48876c156f21$sublist.json b/sites/vital-demo/src/data/site/footer$d59b3bc3-bb90-476a-a45e-48876c156f21$sublist.json
@@ -2,7 +2,6 @@
   "items": [
     "default",
     "394cd6c8-11ff-4636-8bfd-615efdd46358",
-    "db16e2f0-637a-486a-8f47-d6c5e5267ec2",
-    "0cbea1d2-5956-40e5-b8e5-f1156b1504a8"
+    "db16e2f0-637a-486a-8f47-d6c5e5267ec2"
   ]
 }
diff --git a/sites/vital-demo/src/data/site/utility-menu$default$title$text.json b/sites/vital-demo/src/data/site/utility-menu$default$title$text.json
@@ -1,3 +1,3 @@
 {
-  "text": "Email Sign Up &amp; Rewards"
+  "text": "Sign Up &amp; Rewards"
 }