fix(bc-footer): Fix Footer Issues (#10)

* bugfix(bc-footer): Fix Footer Issues * Remove top margin from in footnote * Add uppercase to submenu items * Removing unused imports * bugfix(bc-footer): Fix comments on PR * bugfix(bc-footer): Fix link issues Co-authored-by: Guilherme Zeni <gzeni@its.jnj.com> Co-authored-by: guilhermegpessoa <guilherme.gpessoa@hotmail.com>
johnsonandjohnson · Mar 21, 2022 · 9ff0098 · 9ff0098
1 parent 2e6ac77
commit 9ff0098
Show file tree

Hide file tree

Showing 46 changed files with 148 additions and 99 deletions.
diff --git a/packages/__cxstarter__/src/styleguide/Page/StyleGuideTemplate/_default.tsx b/packages/__cxstarter__/src/styleguide/Page/StyleGuideTemplate/_default.tsx
@@ -35,6 +35,7 @@ const Examples = () => (
       <ul>
         <li><a href="./layout">Layout</a></li>
         <li><a href="./header">Header</a></li>
+        <li><a href="./footer">Footer</a></li>
         <li><a href="./editors">Editors</a></li>
         <li><a href="./editors-monofont">Editors with MonoFont</a></li>
         <li><a href="./typography">Typography</a></li>

diff --git a/packages/cx-editors/src/components/RichText/tokens/cxRichText.ts b/packages/cx-editors/src/components/RichText/tokens/cxRichText.ts
@@ -12,6 +12,7 @@
  * limitations under the License.
  */
 
+import pick from 'lodash/pick';
 import {
   replaceWith,
   P,
@@ -22,6 +23,7 @@ import {
   H4,
   H5,
   startWith,
+  removeClasses,
 } from '@bodiless/fclasses';
 import {
   asBlock,
@@ -46,6 +48,7 @@ import {
   cxColor,
   cxElement,
   cxFontSize,
+  cxTextDecoration,
 } from '@bodiless/cx-elements';
 import { LinkClean, cxLink } from '@bodiless/cx-link';
 
@@ -89,7 +92,7 @@ const Default = asCxTokenSpec()({
   Content: {
     _: addProps({ placeholder: 'Placeholder' }),
   },
-  Components: {
+  Theme: {
     paragraph: cxElement.Body,
     Bold: cxElement.Bold,
     Underline: cxElement.Underline,
@@ -109,26 +112,39 @@ const Default = asCxTokenSpec()({
   },
 });
 
-const Copyright = asCxTokenSpec()({
+const Basic = asCxTokenSpec()({
   ...Default,
-  Spacing: {
-    paragraph: 'mx-9 py-9 md:mx-0 md:mb-4 md:p-0 lg:mt-2 lg:mb-0 lg:py-0',
-  },
+  Core: pick(Default.Core, 'paragraph', 'Bold', 'Underline', 'Link', 'SuperScript'),
+  Theme: pick(Default.Theme, 'paragraph', 'Bold', 'Underline', 'Link', 'SuperScript'),
+});
+
+const Copyright = asCxTokenSpec()({
+  ...Basic,
   Theme: {
+    ...Basic.Theme,
     paragraph: as(
       cxColor.TextPrimaryFooterCopy,
       cxFontSize.XS,
-      'border-white-400 border-t border-b md:border-0 lg:text-m-xs',
+      cxTextDecoration.Normal,
+    ),
+    Link: as(
+      cxLink.Default,
+      cxColor.TextPrimaryFooterCopy,
+      cxColor.TextPrimaryInteractive,
+      cxFontSize.XS,
+      cxTextDecoration.Bold,
+      cxTextDecoration.Underline,
+      removeClasses('text-m-base lg:text-base'),
     ),
   },
   Content: {
     _: addProps({ placeholder: 'Insert Copyright' }),
   },
-  Compose: {},
 });
 
 export default {
   Default,
+  Basic,
   AsFlowContainerItem,
   Copyright,
 };
diff --git a/packages/cx-layout/site.tailwind.config.js b/packages/cx-layout/site.tailwind.config.js
@@ -20,4 +20,10 @@ module.exports = {
       56: '14rem',
     },
   },
+  variants: {
+    backgroundColor: ['first', 'last', 'responsive'],
+    margin: ['first', 'last', 'responsive'],
+    padding: ['first', 'last', 'responsive'],
+    width: ['first', 'last', 'responsive'],
+  },
 };
diff --git a/packages/cx-layout/src/components/Footer/FooterClean.tsx b/packages/cx-layout/src/components/Footer/FooterClean.tsx
@@ -24,8 +24,8 @@ import type { FooterComponents, FooterProps } from './types';
 const footerComponents: FooterComponents = {
   Wrapper: Div,
   Container: Div,
-  SectionTop: Div,
-  SectionBottom: Div,
+  Column: Div,
+  Row: Div,
   RewardsWrapper: Div,
   Rewards: RewardsClean,
   FooterMenuWrapper: Div,
@@ -39,22 +39,26 @@ const footerComponents: FooterComponents = {
 const FooterCleanBase: FC<FooterProps> = ({ components: C, ...rest }) => (
   <C.Wrapper {...rest}>
     <C.Container>
-      <C.SectionTop>
+      <C.Column>
         <C.RewardsWrapper>
           <C.Rewards />
         </C.RewardsWrapper>
-        <C.FooterMenuWrapper>
-          <C.FooterMenu />
-        </C.FooterMenuWrapper>
-      </C.SectionTop>
-      <C.SectionBottom>
-        <C.CopyrightWrapper>
-          <C.Copyright />
-        </C.CopyrightWrapper>
-        <C.SocialLinksWrapper>
-          <C.SocialLinks />
-        </C.SocialLinksWrapper>
-      </C.SectionBottom>
+      </C.Column>
+      <C.Column>
+        <C.Row>
+          <C.FooterMenuWrapper>
+            <C.FooterMenu />
+          </C.FooterMenuWrapper>
+        </C.Row>
+        <C.Row>
+          <C.CopyrightWrapper>
+            <C.Copyright />
+          </C.CopyrightWrapper>
+          <C.SocialLinksWrapper>
+            <C.SocialLinks />
+          </C.SocialLinksWrapper>
+        </C.Row>
+      </C.Column>
     </C.Container>
   </C.Wrapper>
 );

diff --git a/packages/cx-layout/src/components/Footer/tokens/cxFooter.ts b/packages/cx-layout/src/components/Footer/tokens/cxFooter.ts
@@ -16,7 +16,7 @@ import { withNode, withNodeKey } from '@bodiless/core';
 import { cxRichText } from '@bodiless/cx-editors';
 import { cxColor } from '@bodiless/cx-elements';
 import { cxMenu } from '@bodiless/cx-navigation';
-import { flowHoc } from '@bodiless/fclasses';
+import { as } from '@bodiless/fclasses';
 import { cxRewards } from '../Rewards';
 import { cxSocialLinks } from '../SocialLinks';
 import { asFooterToken } from '../FooterClean';
@@ -29,36 +29,36 @@ const Base = asFooterToken({
   },
   Layout: {
     Wrapper: 'w-full',
-    SectionTop: 'w-full lg:flex lg:space-between',
-    SectionBottom: 'w-full lg:flex lg:space-between',
-    RewardsWrapper: 'w-full lg:w-1/3',
+    Container: 'lg:flex',
+    Column: 'w-full lg:first:w-1/4 lg:w-3/4',
+    Row: 'w-full lg:flex lg:space-between',
     FooterMenuWrapper: 'w-full',
-    SocialLinksWrapper: 'w-full lg:w-1/5',
+    CopyrightWrapper: 'w-full lg:w-3/4',
+    SocialLinksWrapper: 'w-full lg:w-1/4',
   },
   Spacing: {
     Wrapper: 'mt-10',
-    Container: 'md:px-10 md:py-6 lg:px-6 lg:py-8',
-    SectionTop: 'lg:mb-12',
-    RewardsWrapper: 'p-9 md:mb-8 md:p-0 lg:mb-0 lg:pr-12',
-    FooterMenuWrapper: 'p-9 md:mb-8 md:p-0',
+    Column: 'md:px-10 md:py-6 lg:p-8',
+    Row: 'md:mb-8 md:last:mb-0 lg:mb-12',
+    RewardsWrapper: 'p-9 md:mb-0 md:p-0',
+    FooterMenuWrapper: 'p-9 md:p-0',
+    Copyright: 'mx-9 py-9 md:mx-0 md:mb-4 md:p-0 lg:mt-2 lg:mb-0 lg:py-0',
     SocialLinksWrapper: 'px-10 py-5 md:p-0',
   },
   Theme: {
-    Wrapper: cxColor.BgSecondaryFooter,
-    RewardsWrapper: 'bg-cx-primary-card-bg md:bg-cx-secondary-footer-bg',
+    Column: as(
+      cxColor.BgSecondaryFooter,
+      'first:bg-cx-primary-card-bg md:first:bg-cx-secondary-footer-bg',
+    ),
+    Copyright: 'border-white-400 border-t border-b md:border-0',
   },
   Editors: {
     Copyright: cxRichText.Copyright,
   },
   Schema: {
-    FooterMenu: flowHoc(
-      withNode,
-      withNodeKey({ nodeKey: 'footer', nodeCollection: 'site' }),
-    ),
-    Copyright: flowHoc(
-      withNode,
-      withNodeKey({ nodeKey: 'copyright', nodeCollection: 'site' }),
-    ),
+    FooterMenu: withNodeKey({ nodeKey: 'footer', nodeCollection: 'site' }),
+    Copyright: withNodeKey({ nodeKey: 'copyright', nodeCollection: 'site' }),
+    _: withNode,
   },
 });
 

diff --git a/packages/cx-layout/src/components/Footer/types.ts b/packages/cx-layout/src/components/Footer/types.ts
@@ -17,8 +17,8 @@ import { ComponentOrTag, DesignableComponentsProps } from '@bodiless/fclasses';
 type FooterComponents = {
   Wrapper: ComponentOrTag<any>,
   Container: ComponentOrTag<any>,
-  SectionTop: ComponentOrTag<any>,
-  SectionBottom: ComponentOrTag<any>,
+  Column: ComponentOrTag<any>,
+  Row: ComponentOrTag<any>,
   RewardsWrapper: ComponentOrTag<any>,
   Rewards: ComponentOrTag<any>,
   FooterMenuWrapper: ComponentOrTag<any>,

diff --git a/packages/cx-layout/src/components/Header/cxHeader.ts b/packages/cx-layout/src/components/Header/cxHeader.ts
@@ -82,7 +82,7 @@ const Base = asHeaderToken({
   },
   Schema: {
     Logo: withNodeKey({ nodeKey: 'Logo' }),
-    UtilityMenu: withNodeKey({ nodeKey: 'UtilityMenu' }),
+    UtilityMenu: withNodeKey({ nodeKey: 'UtilityMenu', nodeCollection: 'site' }),
   },
   Layout: {
     Container: 'flex justify-between items-center',

diff --git a/packages/cx-layout/src/components/Layout/LayoutClean.tsx b/packages/cx-layout/src/components/Layout/LayoutClean.tsx
@@ -21,18 +21,16 @@ import {
   A,
 } from '@bodiless/fclasses';
 import { asCxTokenSpec } from '@bodiless/cx-elements';
-import { FooterClean } from '../Footer';
-import { HeaderClean } from '../Header';
 import { HelmetClean } from '../Helmet';
 import { LayoutComponents, LayoutProps } from './types';
 
 const layoutComponents: LayoutComponents = {
   OuterContainer: Div,
   SkipToMainContent: A,
   Helmet: HelmetClean,
-  Header: HeaderClean,
+  Header: Div,
   HeaderWrapper: Div,
-  Footer: FooterClean,
+  Footer: Div,
   FooterWrapper: Div,
   Container: Div,
   ContainerWrapper: Div,

diff --git a/packages/cx-layout/src/components/Layout/tokens/cxLayout.ts b/packages/cx-layout/src/components/Layout/tokens/cxLayout.ts
@@ -14,11 +14,14 @@
 import {
   addProps,
   as,
+  Div,
+  on,
+  replaceWith,
 } from '@bodiless/fclasses';
 import { cxElement } from '@bodiless/cx-elements';
 import { asLayoutToken } from '../LayoutClean';
-import { cxFooter } from '../../Footer';
-import { cxHeader } from '../../Header';
+import { cxFooter, FooterClean } from '../../Footer';
+import { cxHeader, HeaderClean } from '../../Header';
 import { cxHelmet } from '../../Helmet';
 import { MAIN_CONTENT_ID } from './constants';
 import { WithBordersLabels } from './cxLayoutTest';
@@ -29,8 +32,6 @@ import { WithBordersLabels } from './cxLayoutTest';
 const Base = asLayoutToken({
   Components: {
     Helmet: cxHelmet.Default,
-    Header: cxHeader.Default,
-    Footer: cxFooter.Default,
   },
   Theme: {
   },
@@ -72,13 +73,13 @@ const ConstrainSite = asLayoutToken({
 
 const Header = asLayoutToken({
   Components: {
-    Header: as(cxHeader.Default),
+    Header: on(HeaderClean)(cxHeader.Default),
   },
 });
 
 const Footer = asLayoutToken({
   Components: {
-    Footer: as(cxFooter.Default),
+    Footer: on(FooterClean)(cxFooter.Default),
   },
 });
 
@@ -88,14 +89,34 @@ const Default = asLayoutToken({
     ...Base.Components,
     ...Header.Components,
     ...Footer.Components,
+  },
+  Theme: {
     ...ConstrainSite.Theme,
   },
 });
 
+const HeaderOnly = asLayoutToken({
+  ...Default,
+  Components: {
+    ...Base.Components,
+    ...Header.Components,
+  },
+});
+
+const FooterOnly = asLayoutToken({
+  ...Default,
+  Components: {
+    ...Base.Components,
+    ...Footer.Components,
+  },
+});
+
 export default {
   Base,
   Default,
   Header,
+  HeaderOnly,
   Footer,
+  FooterOnly,
   WithBordersLabels,
 };
diff --git a/packages/cx-navigation/src/components/Menu/tokens/cxMenu.ts b/packages/cx-navigation/src/components/Menu/tokens/cxMenu.ts
@@ -49,6 +49,9 @@ const Footer = asMenuToken(Base, {
     Wrapper: 'w-full md:flex md:justify-between md:flex-grow lg:h-full',
     Item: 'md:min-w-1/4 md:w-full',
   },
+  Spacing: {
+    Wrapper: 'lg:mb-12',
+  },
   Theme: {
     // @todo this 'as' is needed only because of a bug and should be removed when it is fixed.
     // See https://github.com/johnsonandjohnson/Bodiless-JS/issues/1455

diff --git a/packages/cx-navigation/src/components/Separator/tokens/cxSeparator.ts b/packages/cx-navigation/src/components/Separator/tokens/cxSeparator.ts
@@ -28,15 +28,14 @@ const FooterMenu = asElementToken({
   Theme: {
     _: as(
       'border-white-400 border-b last:border-0',
-      'md:border-b-0 md:border-l md:last:border-l md:first:border-0',
-      'lg:first:border-l',
+      'md:border-b-0 md:border-r md:last:border-0',
     ),
   },
   Spacing: {
     _: 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',
+      'lg:px-12',
     ),
   },
 });

diff --git a/packages/cx-navigation/src/components/SubMenu/tokens/cxSubMenu.ts b/packages/cx-navigation/src/components/SubMenu/tokens/cxSubMenu.ts
@@ -1,5 +1,5 @@
 import { addProps, as, on } from '@bodiless/fclasses';
-import { cxColor } from '@bodiless/cx-elements';
+import { cxColor, cxTextDecoration } from '@bodiless/cx-elements';
 import { asSubMenuToken } from '../SubMenuClean';
 import { cxMenuTitle, MenuTitleClean } from '../../MenuTitle';
 import { withAnalyticsAttr } from '../../../util';
@@ -20,6 +20,7 @@ const Base = asSubMenuToken({
 const Footer = asSubMenuToken(Base, {
   Theme: {
     Title: as(
+      cxTextDecoration.Uppercase,
       cxColor.TextPrimaryFooterCopy,
       'text-base',
       // @todo why is this not an available token in cxFontSize?