fix(vital-layout/templates): Update Layout/Templates (#2004)

Update token on Layout / Templates to use Default instead of Base Update Vital Layout to use Footer Default and shadow to apply Rewards token Fixes Shadowing test addprops Fixes Documentation and doc generation on vital-templates
johnsonandjohnson · Apr 17, 2023 · 8f56873 · 8f56873 · vercel · Apr 17, 2023
1 parent cf38f91
commit 8f56873
Show file tree

Hide file tree

Showing 31 changed files with 120 additions and 169 deletions.
diff --git a/packages/__vital__/src/shadow/@bodiless/vital-layout/Footer.ts b/packages/__vital__/src/shadow/@bodiless/vital-layout/Footer.ts
@@ -15,9 +15,11 @@ import { vitalFooterBase, asFooterToken } from '@bodiless/vital-layout';
 import { addProps } from '@bodiless/fclasses';
 import { withLanguageNode } from '@bodiless/i18n';
 
-const Default = asFooterToken(vitalFooterBase.Base, {
-  Core: {
-    _: addProps({ 'data-shadowed-by': '__vital__Footer' }),
+// Setup the vital package to use the Rewards by default.
+const Default = asFooterToken(vitalFooterBase.Default, {
+  ...vitalFooterBase.WithRewardsExpanding2XL,
+  Behavior: {
+    Container: addProps({ 'data-shadowed-by': '__vital__Footer' }),
   },
   Schema: {
     _: withLanguageNode,

diff --git a/packages/__vital__/src/shadow/@bodiless/vital-layout/Header.ts b/packages/__vital__/src/shadow/@bodiless/vital-layout/Header.ts
@@ -30,7 +30,7 @@ export const asLanguageSelectorLink = on(LinkClean)(
 );
 
 const Default = asHeaderToken(
-  vitalHeaderBase.Base,
+  vitalHeaderBase.Default,
   // @todo Remove this if you don't want search on your site.
   vitalSearchHeader.WithSearch,
   vitalHeaderBase.WithLanguageSelector,

diff --git a/packages/__vital__/src/shadow/@bodiless/vital-layout/Rewards.ts b/packages/__vital__/src/shadow/@bodiless/vital-layout/Rewards.ts
@@ -13,6 +13,7 @@
  */
 
 import {
+  addProps,
   flowIf,
   withProps,
 } from '@bodiless/fclasses';
@@ -24,14 +25,17 @@ import {
 
 const isCurrentLanguageEs = () => useLanguageContext().getCurrentLanguage().name === 'es';
 
-const Default = asRewardsToken(vitalRewardsBase.Base, {
+const Default = asRewardsToken(vitalRewardsBase.Default, {
   Content: {
     Brand: flowIf(isCurrentLanguageEs)(
       withProps({
         children: 'Brand ES',
       }),
     ),
   },
+  Behavior: {
+    Wrapper: addProps({ 'data-shadowed-by': '__vital__:Rewards' }),
+  },
 });
 
 export default {

diff --git a/packages/__vital__/src/shadow/@bodiless/vital-templates/GenericTemplate.ts b/packages/__vital__/src/shadow/@bodiless/vital-templates/GenericTemplate.ts
@@ -13,7 +13,9 @@
  */
 
 import { useNode } from '@bodiless/core';
-import { flowIf, replaceWith, Fragment } from '@bodiless/fclasses';
+import {
+  flowHoc, addProps, Div, flowIf, replaceWith, Fragment
+} from '@bodiless/fclasses';
 import { useLanguageContext } from '@bodiless/i18n';
 import { vitalGenericTemplateBase, asGenericTemplateToken } from '@bodiless/vital-templates';
 
@@ -30,10 +32,16 @@ const WithNoBreadcrumbsOnHomePage = asGenericTemplateToken({
   },
 });
 
-const Default = asGenericTemplateToken(vitalGenericTemplateBase.Base, {
+const Default = asGenericTemplateToken(vitalGenericTemplateBase.Default, {
   Compose: {
     WithNoBreadcrumbsOnHomePage,
-  }
+  },
+  Behavior: {
+    TemplateWrapper: flowHoc(
+      replaceWith(Div),
+      addProps({ 'data-shadowed-by': '__vital__:GenericTemplate' }),
+    ),
+  },
 });
 
 export default {

diff --git a/packages/vital-elements/doc/Shadow.md b/packages/vital-elements/doc/Shadow.md
@@ -112,8 +112,8 @@ Some important notes:
 
 - Above, we show the contents of the compiled JavaScript files containing the shadowed token
   collections, but you should write them in TypeScript and compile them to those locations.
-- If you are extending a base token collection, be sure to import it using the `...Base` version
-  name.
+- If you are extending a base token collection, be sure to import it using the `tokenCollectionBase`
+  version name.
 - Ensure that your token shadow resolver (`shadow.js`) uses [CJS module
   syntax](https://www.typescriptlang.org/docs/handbook/2/modules.html#commonjs-syntax
   ':target=_blank').

diff --git a/packages/vital-elements/doc/Tokens.md b/packages/vital-elements/doc/Tokens.md
@@ -22,7 +22,7 @@ utility classes, components, and tokens.
 
 We use [Tailwind](https://tailwindcss.com/ ':target=_blank') to generate a rich set of CSS utility
 classes which are composed to produce all styling in a design. The Tailwind configuration for Vital
-defines the base set of styling options (colors, typography, spacing, etc.) available for use in the
+defines the default set of styling options (colors, typography, spacing, etc.) available for use in the
 design system. A brand library will have its own Tailwind configuration, which extends the Vital
 configuration to introduce brand-specific elements. Finally, in some cases, an individual site may
 further extend this to introduce site-specific variations. Details on how to implement this
@@ -31,7 +31,7 @@ extension mechanism in Vital can be found [_TBD_]().
 
 ## Components
 
-Base React components in Vital are usually bare templates which do little or nothing in themselves
+Default React components in Vital are usually bare templates which do little or nothing in themselves
 until one or more _tokens_ (see below) are applied to them. To make this clear, exported components
 are generally suffixed with "...Clean" (e.g.,
 [`HeaderClean`](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/vital-layout/src/components/Header/HeaderClean.tsx
@@ -324,18 +324,18 @@ behavior of the brand link and change its styling:
 
 ```ts
 import { brandLink } from '@bodiless/brand';
-const Base = {
-  ...brandLink.Base,
+const Default = {
+  ...brandLink.Deafult,
   Theme: {
     Wrapper: addClasses('text-violet'),
   },
 };
 export const siteLink = {
-  Base,
+  Default,
 };
 ```
 
-Our site-level `Base` token reuses everything from the Vital `Base` token, but overrides the `Theme`
+Our site-level `Default` token reuses everything from the Vital `Default` token, but overrides the `Theme`
 domain with site-specific styling.
 
 As another example, imagine we wanted to reuse the styling of the original link, but in a context
@@ -347,7 +347,7 @@ import omit from 'lodash/omit';
 import { LinkClean } from '@bodiless/vital-link';
 import { brandLink } from '@bodiless/brand';
 
-const NonEditableLink = as(omit(brandLink.Base, 'Editors'))(LinkClean);
+const NonEditableLink = as(omit(brandLink.Default, 'Editors'))(LinkClean);
 ```
 
 #### Domains
@@ -369,21 +369,21 @@ The real power of tokens is their ability to be extended or composed to produce
 component without altering the base component itself. There are two patterns for doing this —
 _Extension_ and _Composition_ — and it's important to understand the difference.
 
-As an example, let's consider the Vital `Header` component. This exports a `Base` token which
+As an example, let's consider the Vital `Header` component. This exports a `Default` token which
 contains the basic header layout, styling, and behavior; as well as a `WithSticky` token which can
-be composed with the `Base` to produce a sticky version. Using the _Extension_ pattern, you could
+be composed with the `Default` to produce a sticky version. Using the _Extension_ pattern, you could
 merge these two tokens into a single object:
 
 ```ts
 const Sticky = asHeaderToken({
-  ...Base,
+  ...Default,
   Theme: {
-    ...Base.Theme,
-    Wrapper: as(Base.Theme.Wrapper, WithSticky.Theme.Wrapper),
+    ...Default.Theme,
+    Wrapper: as(Default.Theme.Wrapper, WithSticky.Theme.Wrapper),
   },
   Layout: {
-    ...Base.Layout,
-    Wrapper: as(Base.Layout.Wrapper, WithSticky.Layout.Wrapper),
+    ...Default.Layout,
+    Wrapper: as(Default.Layout.Wrapper, WithSticky.Layout.Wrapper),
   },
 });
 ```
@@ -393,60 +393,60 @@ Vital provides the `extend` utility to make this a bit less verbose:
 ```ts
 import { extend } from '@bodiless/vital-elements';
 
-const Sticky = extend(Base, WithSticky);
+const Sticky = extend(Default, WithSticky);
 ```
 
 This is exactly equivalent to the above, and would merge all design keys in all domains of both
 tokens. Note, this is quite different from the following:
 
 ```ts
 const Sticky = asHeaderToken({
-  ...Base,
+  ...Default,
   Theme: {
-    ...Base.Theme,
+    ...Default.Theme,
     Wrapper: WithSticky.Theme.Wrapper,
   },
   Layout: {
-    ...Base.Layout,
+    ...Default.Layout,
     Wrapper: WithSticky.Layout.Wrapper,
   },
 });
 ```
 
 In that version, using default JavaScript object composition, the `Wrapper` key in both `Theme` and
 `Layout` domains is _replaced_ with the values from `WithSticky`, with the result that any styles
-applied to that key by those domains in the `Base` token will be lost.
+applied to that key by those domains in the `Default` token will be lost.
 
 Using the above pattern creates a new token which can be used to create a sticky header, but it has
 one disadvantage. What if a downstream consumer of the token wants to reuse that token but omit the
-sticky part? Here, they could simply use the `Base` token by itself — but what if that base token
+sticky part? Here, they could simply use the `Default` token by itself — but what if that base token
 weren't available? There is no easy way to extract an enhancement which has been deeply merged into
 another token. For this example, it would be better to use the _composition_ pattern. The simplest
 way to compose two tokens is to apply them both via `as`:
 
 ```ts
-const StickyHeader = as(Base, WithSticky)(HeaderClean);
+const StickyHeader = as(Default, WithSticky)(HeaderClean);
 ```
 
 This will work, and is fine for one-time composition, but Vital also provides a mechanism for
 exporting a composed token (rather than a component to which the tokens are applied):
 
 ```ts
 const Sticky = asHeaderToken({
-  ...Base,
+  ...Default,
   Compose: {
     WithSticky,
   },
 });
 ```
 
-Now `as(Sticky)` is exactly equivalent to `as(Base, WithSticky)` — and a downstream consumer can
+Now `as(Sticky)` is exactly equivalent to `as(Default, WithSticky)` — and a downstream consumer can
 easily remove (or customize) the sticky part:
 
 ```ts
 const NotSticky = asHeaderToken({
   ...Sticky,
-  Compose: omit(Base.Compose, 'Sticky'),
+  Compose: omit(Default.Compose, 'Sticky'),
 });
 ```
 

diff --git a/packages/vital-layout/doc/Footer.md b/packages/vital-layout/doc/Footer.md
@@ -44,10 +44,10 @@ extend/override the specific domains within that token.
 ```js
 const BrandXFooter = asFooterToken({
   // Will spread all existing footer functionality across all domains.
-  ...vitalFooter.Base,
+  ...vitalFooter.Default,
   Components: {
     // Will spread all footer components as is.
-    ...vitalFooter.Base.Components,
+    ...vitalFooter.Default.Components,
     // Will replace the Rewards slot with the custom component
     Rewards: brandXRewards.Default,
   },

diff --git a/packages/vital-layout/doc/Header.md b/packages/vital-layout/doc/Header.md
@@ -47,10 +47,10 @@ extend/override the specific domains within that token.
 ```js
 const BrandXHeader = asHeaderToken({
   // Will spread all existing header functionality across all domains.
-  ...vitalHeader.Base,
+  ...vitalHeader.Default,
   Components: {
     // Will spread all header components as is.
-    ...vitalHeader.Base.Components,
+    ...vitalHeader.Default.Components,
     // Will replace the DesktopSearch slot with the custom component
     DesktopSearch: brandXSearch.Default,
   },

diff --git a/packages/vital-layout/src/components/Footer/CopyrightRow/tokens/vitalCopyrightRow.ts b/packages/vital-layout/src/components/Footer/CopyrightRow/tokens/vitalCopyrightRow.ts
@@ -12,6 +12,7 @@
  * limitations under the License.
  */
 
+import omit from 'lodash/omit';
 import { vitalRichText } from '@bodiless/vital-editors';
 import {
   asFluidToken, vitalColor, vitalFontSize, vitalTextDecoration
@@ -32,7 +33,7 @@ const vitalCopyrightRowRichTextDefault = asFluidToken({
       vitalTextDecoration.Normal,
     ),
     Link: as(
-      vitalLink.Base,
+      omit(vitalLink.Default, 'Theme'),
       vitalTextDecoration.Bold,
       vitalTextDecoration.Underline,
     ),

diff --git a/packages/vital-layout/src/components/Footer/Rewards/tokens/vitalRewards.ts b/packages/vital-layout/src/components/Footer/Rewards/tokens/vitalRewards.ts
@@ -34,7 +34,7 @@ const RewardsFormElement = as(
 );
 const RewardColorCopy = 'text-vital-primary-header-copy 2xl:text-vital-primary-footer-copy';
 
-const Base = asRewardsToken({
+const Default = asRewardsToken({
   Components: {
     Wrapper: startWith(Div),
   },
@@ -102,10 +102,6 @@ const Base = asRewardsToken({
   },
 });
 
-const Default = asRewardsToken({
-  ...Base,
-});
-
 /**
  * Tokens for the vital Rewards PLACEHOLDER
  *
@@ -114,11 +110,7 @@ const Default = asRewardsToken({
  */
 export interface VitalRewards {
   /**
-   * Base Styled PLACEHOLDER
-   */
-  Base: RewardsToken,
-  /**
-   * Inherits Base
+   * Defines the default Rewards placeholder
    */
   Default: RewardsToken,
 }
@@ -131,7 +123,6 @@ export interface VitalRewards {
  * @see [[RewardsClean]]
  */
 const vitalRewards: VitalRewards = {
-  Base,
   Default,
 };
 

diff --git a/packages/vital-layout/src/components/Footer/SocialLinks/tokens/vitalSocialLinks.ts b/packages/vital-layout/src/components/Footer/SocialLinks/tokens/vitalSocialLinks.ts
@@ -19,7 +19,7 @@ import {
 import { asSocialLinksToken } from '../SocialLinksClean';
 import type { SocialLinksToken } from '../SocialLinksClean';
 
-const Base = asSocialLinksToken({
+const Default = asSocialLinksToken({
   Components: {
     Wrapper: startWith(Div),
   },
@@ -30,10 +30,6 @@ const Base = asSocialLinksToken({
   }
 });
 
-const Default = asSocialLinksToken({
-  ...Base,
-});
-
 /**
  * Tokens for the vital Social Links
  *
@@ -42,11 +38,7 @@ const Default = asSocialLinksToken({
  */
 export interface VitalSocialLinks {
   /**
-   * Base applies styling to have social links in a row at specific size
-   */
-  Base: SocialLinksToken,
-  /**
-   * Inherits Base
+   * Setups social links with some styling.
    */
   Default: SocialLinksToken,
 }
@@ -59,7 +51,6 @@ export interface VitalSocialLinks {
  * @see [[SocialLinksClean]]
  */
 const vitalSocialLinks: VitalSocialLinks = {
-  Base,
   Default,
 };