Feature/bc navigation (johnsonandjohnson#19)

* Replace WTB with styled link

* Fix lint

packages/cx-layout/package.json

@@ -34,6 +34,7 @@
     "@bodiless/cx-editors": "^1.0.0-beta.1",
     "@bodiless/cx-elements": "^1.0.0-beta.1",
     "@bodiless/cx-image": "^1.0.0-beta.1",
+    "@bodiless/cx-link": "^1.0.0-beta.1",
     "@bodiless/cx-navigation": "^1.0.0-beta.1",
     "@bodiless/fclasses": "^1.0.0-beta.1",
     "@bodiless/gatsby-theme-bodiless": "^1.0.0-beta.1",

packages/cx-layout/src/components/Header/HeaderClean.tsx

@@ -16,14 +16,14 @@ import React, { FC } from 'react';
 import { Div, Fragment, designable } from '@bodiless/fclasses';
 import { withoutHydration } from '@bodiless/hydration';
 import { asCxTokenSpec } from '@bodiless/cx-elements';
+import { LinkClean } from '@bodiless/cx-link';
 import {
   BurgerMenuClean,
   MenuClean,
   MenuTogglerClean,
 } from '@bodiless/cx-navigation';
 import { LogoClean } from '../Logo';
 import { SearchTogglerClean, DesktopSearchClean } from '../Search';
-import { WhereToBuyClean } from '../WhereToBuy';
 import type { HeaderComponents, HeaderProps } from './types';
 
 const headerComponents: HeaderComponents = {
@@ -44,7 +44,7 @@ const headerComponents: HeaderComponents = {
   SearchToggler: SearchTogglerClean,
   LanguageButton: Fragment,
   WhereToBuyWrapper: Fragment,
-  WhereToBuy: WhereToBuyClean,
+  WhereToBuy: LinkClean,
 };
 
 const HeaderCleanBase: FC<HeaderProps> = ({ components: C, ...rest }) => (

packages/cx-layout/src/components/Header/tokens/cxHeader.ts

@@ -30,9 +30,9 @@ import {
   withDesign,
   withProps,
 } from '@bodiless/fclasses';
+import { cxLink } from '@bodiless/cx-link';
 import { cxLogo } from '../../Logo';
 import { cxDesktopSearch, cxSearchToggler } from '../../Search';
-import { cxWhereToBuy, WhereToBuyClean } from '../../WhereToBuy';
 import { asHeaderToken } from '../HeaderClean';
 
 // @TODO: Get rid of this after language button is implemented.
@@ -60,7 +60,6 @@ const Base = asHeaderToken({
       // @TODO: Is there a better way to inject WhereToBuy and (future) LanguageButton
       // components into the menu? Maybe, move the components to another package...
       withDesign({
-        WhereToBuy: replaceWith(as(cxWhereToBuy.WithoutIcon)(WhereToBuyClean)),
         // @TODO: Replace LanguageButton placeholder.
         LanguageButton: WithLanguageButton,
       }),
@@ -69,7 +68,7 @@ const Base = asHeaderToken({
     UtilityMenu: cxMenu.Utility,
     // @TODO: Replace LanguageButton placeholder.
     LanguageButton: WithLanguageButton,
-    WhereToBuy: cxWhereToBuy.Default,
+    WhereToBuy: cxLink.WhereToBuy,
   },
   Layout: {
     Container: 'flex justify-between items-center',

packages/cx-link/src/components/Link/LinkClean.tsx

@@ -22,13 +22,15 @@ import { LinkComponents, LinkBaseProps } from './types';
 
 const linkComponents: LinkComponents = {
   Wrapper: A,
+  Icon: Fragment,
   Body: Span,
   ExternalSRText: Fragment,
 };
 
 const LinkBase: FC<LinkBaseProps> = ({ components: C, children, ...rest }) => (
   <C.Wrapper {...rest}>
     <C.ExternalSRText />
+    <C.Icon />
     <C.Body>
       {children}
     </C.Body>

packages/cx-link/src/components/Link/tokens/cxLink.ts

@@ -13,12 +13,13 @@
  */
 
 import {
-  addProps, Span, addPropsIf, flowIf, as, on, addClassesIf
+  addProps, Span, addPropsIf, flowIf, as, on, addClassesIf, withProps, startWith
 } from '@bodiless/fclasses';
 import { withSidecarNodes, withNodeKey } from '@bodiless/core';
-import { cxTypography } from '@bodiless/cx-elements';
+import { cxColor, cxTextDecoration, cxTypography } from '@bodiless/cx-elements';
 import { asLinkToken } from '../LinkClean';
 import { useExternalLinkToggle, asEditableLink, useIsDownloadLink } from '../util';
+import { CartIcon } from '../assets/CartIcon';
 
 /**
    * Token which causes link to display as an external link.
@@ -84,6 +85,44 @@ const Sidecar = asLinkToken({
   },
 });
 
+const WhereToBuy = asLinkToken({
+  Components: {
+    Icon: startWith(CartIcon),
+  },
+  Layout: {
+    Wrapper: 'w-full lg:w-auto flex justify-center items-center max-w-64 h-12 lg:w-48',
+  },
+  Spacing: {
+    Wrapper: 'mx-auto p-3',
+    Icon: 'mr-3',
+  },
+  Theme: {
+    Wrapper: as(
+      cxColor.BgPrimaryInteractive,
+      cxColor.TextPrimaryFooterCopy,
+      cxTextDecoration.Bold,
+      cxTextDecoration.Uppercase,
+      // @TODO: Create token? It should be same size for both mobile and desktop...
+      'text-m-base',
+      'rounded',
+    ),
+    Icon: 'w-6 h-6',
+    Body: 'leading',
+  },
+  Content: {
+    Wrapper: withProps({
+      href: '/where-to-buy',
+    }),
+    Body: withProps({
+      children: 'Where to Buy',
+    }),
+  },
+});
+
 export default {
-  Default, WithExternalStyles, WithDownloadStyles, Sidecar,
+  Default,
+  WithExternalStyles,
+  WithDownloadStyles,
+  Sidecar,
+  WhereToBuy,
 };

packages/cx-link/src/components/Link/types.ts

@@ -16,6 +16,7 @@ import { ComponentOrTag, DesignableComponentsProps } from '@bodiless/fclasses';
 
 export type LinkComponents = {
   Wrapper: ComponentOrTag<any>,
+  Icon: ComponentOrTag<any>,
   Body: ComponentOrTag<any>,
   ExternalSRText: ComponentOrTag<any>,
 };

packages/cx-navigation/src/components/BurgerMenu/BurgerMenuClean.tsx

@@ -15,6 +15,7 @@
 import React, { FC } from 'react';
 import { asCxTokenSpec } from '@bodiless/cx-elements';
 import { Div, Fragment, designable } from '@bodiless/fclasses';
+import { LinkClean } from '@bodiless/cx-link';
 import { MenuClean } from '../Menu';
 import { MenuTogglerClean } from '../MenuToggler';
 import type { BurgerMenuComponents, BurgerMenuProps } from './types';
@@ -28,7 +29,7 @@ const burgerMenuComponents: BurgerMenuComponents = {
   Menu: MenuClean,
   FooterWrapper: Div,
   WhereToBuyWrapper: Fragment,
-  WhereToBuy: Fragment,
+  WhereToBuy: LinkClean,
   ActionFooterContainer: Div,
   UtilityMenuWrapper: Fragment,
   UtilityMenu: MenuClean,

packages/cx-navigation/src/components/BurgerMenu/tokens/cxBurgerMenu.ts

@@ -14,6 +14,7 @@
 
 import { asStatic } from '@bodiless/core';
 import { cxColor } from '@bodiless/cx-elements';
+import { cxLink } from '@bodiless/cx-link';
 import {
   addClassesIf,
   as,
@@ -48,6 +49,7 @@ const Base = asBurgerMenuToken({
     MenuToggler: cxMenuToggler.Close,
     Menu: cxMenu.Burger,
     UtilityMenu: cxMenu.Utility,
+    WhereToBuy: cxLink.WhereToBuy,
   },
   Layout: {
     Wrapper: 'w-full h-full fixed left-0 top-0 md:w-7/12 lg:hidden',