feat(bc-footer): Add Brand.com Footer

packages/__cxstarter__/src/components/Footer/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright © 2022 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { __cxstarter__Footer } from './tokens';

packages/__cxstarter__/src/components/Footer/tokens/__cxstarter__Footer.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright © 2022 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { cxFooter, asFooterToken } from '@bodiless/cx-layout';
+
+const Default = asFooterToken({
+  ...cxFooter.Default,
+  Components: {
+    ...cxFooter.Default.Components,
+  },
+});
+
+export default {
+  ...cxFooter,
+  Default,
+};

packages/__cxstarter__/src/components/Footer/tokens/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright © 2022 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import __cxstarter__Footer from './__cxstarter__Footer';
+
+export { __cxstarter__Footer };

packages/__cxstarter__/src/components/Layout/tokens/__cxstarter__Layout.ts

@@ -13,13 +13,15 @@
  */
 
 import { cxLayout, asLayoutToken } from '@bodiless/cx-layout';
+import { __cxstarter__Footer } from '../../Footer';
 import { __cxstarter__Header } from '../../Header';
 
 const Default = asLayoutToken({
   ...cxLayout.Default,
   Components: {
     ...cxLayout.Default.Components,
-    SiteHeader: __cxstarter__Header.Default,
+    Header: __cxstarter__Header.Default,
+    Footer: __cxstarter__Footer.Default,
   },
   Compose: {
     ...cxLayout.Default.Compose,

packages/__cxstarter__/src/styleguide/Page/StyleGuideTemplate/Footer.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { asStyleGuideTemplateToken, cxStyleGuideTemplate } from '@bodiless/cx-templates';
+import { flowHoc, replaceWith } from '@bodiless/fclasses';
+
+export const Footer = asStyleGuideTemplateToken(cxStyleGuideTemplate.FooterOnly, {
+  Meta: flowHoc.meta.term('Token')('Footer'),
+  Content: {
+    Title: replaceWith(() => <>Footer</>),
+  },
+});

packages/__cxstarter__/src/styleguide/Page/StyleGuideTemplate/index.tsx

@@ -16,6 +16,7 @@ import { Editors, EditorsMonoFont } from './Editors';
 import { Typography } from './Typography';
 import { Layout } from './Layout';
 import { Header } from './Header';
+import { Footer } from './Footer';
 import { _default } from './_default';
 
 export const __cxstarter__StyleGuideTemplate = {
@@ -25,4 +26,5 @@ export const __cxstarter__StyleGuideTemplate = {
   Typography,
   Layout,
   Header,
+  Footer,
 };

packages/__cxstarter__/src/styleguide/Page/index.tsx

@@ -24,6 +24,7 @@ const {
   Typography,
   Layout,
   Header,
+  Footer,
   _default
 } = __cxstarter__StyleGuideTemplate;
 
@@ -36,6 +37,7 @@ const Default = asFluidToken({
     Typography,
     Layout,
     Header,
+    Footer,
   },
 });
 

packages/bodiless-core/src/withChild.tsx

@@ -21,6 +21,7 @@ import omit from 'lodash/omit';
 
 type InsertChildOptions = {
   designKey: string,
+  componentName: string,
   mode?: 'append' | 'prepend',
 };
 
@@ -38,7 +39,7 @@ const insertChild = (Child: CT, options: InsertChildOptions): HOC => (
   Component = Fragment,
 ) => {
   type Components = { [Child: string]: CT };
-  const { designKey, mode } = options;
+  const { designKey, componentName, mode } = options;
   const startComponents: Components = { [designKey]: Child };
   const WithChild: FC<any> = (props: PropsWithChildren<DesignableComponentsProps<Components>>) => {
     const { components, ...rest } = props;
@@ -68,7 +69,7 @@ const insertChild = (Child: CT, options: InsertChildOptions): HOC => (
     }
   };
   const applyDesign = extendDesignable(design => omit(design, [designKey]));
-  return applyDesign(startComponents, designKey)(WithChild) as ComponentType<any>;
+  return applyDesign(startComponents, componentName)(WithChild) as ComponentType<any>;
 };
 
 /**
@@ -77,6 +78,7 @@ const insertChild = (Child: CT, options: InsertChildOptions): HOC => (
  *
  * @param Child - Component to add as a child
  * @param designKey - Design key to reach the Child component using Design API.
+ * @param componentName - Optional component namespace for design key data attribute.
  *
  * @return An HOC which will add the Child to the given Parent.
  *
@@ -97,34 +99,42 @@ const insertChild = (Child: CT, options: InsertChildOptions): HOC => (
  * ```
  */
 const withChild = <P extends object>(
-  Child: CT, designKey = 'Child',
-): HOC<P> => insertChild(Child, { designKey });
+  Child: CT,
+  designKey: string = 'Child',
+  componentName: string = 'Component',
+): HOC<P> => insertChild(Child, { designKey, componentName });
 
 /**
  * Utility function to append a Child to the given component
  * so that the Child can be altered using Design API.
  *
  * @param Child - Component to add as a child
  * @param designKey - Design key to reach the Child component using Design API.
+ * @param componentName - Optional component namespace for design key data attribute.
  *
  * @return An HOC which will append the Child to the given Component.
  */
 const withAppendChild = <P extends object>(
-  Child: CT, designKey: string,
-): HOC<P> => insertChild(Child, { designKey, mode: 'append' });
+  Child: CT,
+  designKey: string,
+  componentName: string = 'Component',
+): HOC<P> => insertChild(Child, { designKey, componentName, mode: 'append' });
 
 /**
  * Utility function to prepend a Child to the given component
  * so that the Child can be altered using Design API.
  *
  * @param Child - Component to add as a child
  * @param designKey - Design key to reach the Child component using Design API.
+ * @param componentName - Optional component namespace for design key data attribute.
  *
  * @return An HOC which will prepend the Child to the given Component.
  */
 const withPrependChild = <P extends object>(
-  Child: CT, designKey: string,
-): HOC<P> => insertChild(Child, { designKey, mode: 'prepend' });
+  Child: CT,
+  designKey: string,
+  componentName: string = 'Component',
+): HOC<P> => insertChild(Child, { designKey, componentName, mode: 'prepend' });
 
 export default withChild;
 export {

packages/bodiless-core/src/withParent.tsx

@@ -22,6 +22,7 @@ import { HOC, DesignableComponentsProps, extendDesignable } from '@bodiless/fcla
  *
  * @param Parent - Component to add as a Parent
  * @param designKey - A Design key to reach the Parent. 'Parent' by default.
+ * @param componentName - Optional component namespace for design key data attribute.
  *
  * @return An HOC which will wrap the given Child component with provided Parent.
  *
@@ -39,7 +40,11 @@ import { HOC, DesignableComponentsProps, extendDesignable } from '@bodiless/fcla
  * )(Child);
  * ```
  */
-const withParent = (Parent: ComponentType, designKey: string = 'Parent'): HOC => (
+const withParent = (
+  Parent: ComponentType,
+  designKey: string = 'Parent',
+  componentName: string = 'Component',
+): HOC => (
   Component,
 ) => {
   type Components = { [Parent: string]: ComponentType };
@@ -55,7 +60,7 @@ const withParent = (Parent: ComponentType, designKey: string = 'Parent'): HOC =>
     );
   };
   const applyDesign = extendDesignable(design => omit(design, [designKey]));
-  return applyDesign(startComponents, designKey)(WithParent) as ComponentType<any>;
+  return applyDesign(startComponents, componentName)(WithParent) as ComponentType<any>;
 };
 
 export default withParent;

packages/bodiless-navigation/src/Menu/MenuTitles.tsx

@@ -24,7 +24,7 @@ import {
   withDesign, startWith, DesignableComponentsProps,
 } from '@bodiless/fclasses';
 
-type MenuTitleComponents = {
+export type MenuTitleComponents = {
   Link: ComponentType<any>,
   Title: ComponentType<any>,
 };

packages/bodiless-navigation/src/Menu/index.ts

@@ -23,7 +23,10 @@ import asTopNav, {
 import { useIsMenuOpen, useMenuContext } from './withMenuContext';
 import { useSubmenuContext } from './withMenuItemContext';
 import { withListSubMenu, withCardsSubMenu, withColumnSubMenu } from './withSubMenu';
-import { withMenuTitleEditors, withDefaultMenuTitleEditors, asMenuTitle } from './MenuTitles';
+import MenuTitle, {
+  withMenuTitleEditors, withDefaultMenuTitleEditors, asMenuTitle,
+} from './MenuTitles';
+import type { MenuTitleComponents } from './MenuTitles';
 
 export {
   asBodilessMenu,
@@ -42,6 +45,8 @@ export {
   isMenuContextNotActive,
   withMenuTitleEditors,
   withDefaultMenuTitleEditors,
+  MenuTitle,
+  MenuTitleComponents,
 };
 
 export * from './asAccessibleMenu';

packages/cx-editors/src/components/RichText/tokens/cxRichText.ts

@@ -41,7 +41,12 @@ import {
   DefaultNormalHref,
 } from '@bodiless/components';
 import { ifComponentSelector } from '@bodiless/layouts';
-import { asCxTokenSpec, cxElement } from '@bodiless/cx-elements';
+import {
+  asCxTokenSpec,
+  cxColor,
+  cxElement,
+  cxFontSize,
+} from '@bodiless/cx-elements';
 import { LinkClean, cxLink } from '@bodiless/cx-link';
 
 const withLinkDeserializer = withHtmlDeserializer(
@@ -104,4 +109,26 @@ const Default = asCxTokenSpec()({
   },
 });
 
-export default { Default, AsFlowContainerItem };
+const Copyright = 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',
+  },
+  Theme: {
+    paragraph: as(
+      cxColor.TextPrimaryFooterCopy,
+      cxFontSize.XS,
+      'border-white-400 border-t border-b md:border-0 lg:text-m-xs',
+    ),
+  },
+  Content: {
+    _: addProps({ placeholder: 'Insert Copyright' }),
+  },
+  Compose: {},
+});
+
+export default {
+  Default,
+  AsFlowContainerItem,
+  Copyright,
+};

packages/cx-elements/bodiless.docs.json

@@ -0,0 +1,3 @@
+{
+  "_dir": "/doc"
+}