feat(cx-templates, cx-flowcontainer): Add generic template

packages/__cxstarter__/package.json

@@ -36,6 +36,8 @@
     "@bodiless/core": "^1.0.0-beta.1",
     "@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-flowcontainer": "^1.0.0-beta.1",
     "@bodiless/cx-layout": "^1.0.0-beta.1",
     "@bodiless/cx-link": "^1.0.0-beta.1",
     "@bodiless/cx-templates": "^1.0.0-beta.1",

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

@@ -19,7 +19,7 @@ const Default = asLayoutToken({
   ...cxLayout.Default,
   Components: {
     ...cxLayout.Default.Components,
-    SiteHeader: __cxstarter__Header.Default,
+    Header: __cxstarter__Header.Default,
   },
   Compose: {
     ...cxLayout.Default.Compose,

packages/__cxstarter__/src/components/Page/tokens/__cxstarter__Page.ts

@@ -12,11 +12,15 @@
  * limitations under the License.
  */
 
-import { asElementToken } from '@bodiless/cx-elements';
-import { cxPage } from '@bodiless/cx-templates';
+import { on } from '@bodiless/fclasses';
+import { asFluidToken } from '@bodiless/cx-elements';
+import { cxPage, GenericTemplateClean, cxGenericTemplate } from '@bodiless/cx-templates';
 
-const Default = asElementToken({
+const Default = asFluidToken({
   ...cxPage.Default,
+  Components: {
+    _default: on(GenericTemplateClean)(cxGenericTemplate.Default),
+  },
 });
 
 export default {

packages/__cxstarter__/src/shadow/@bodiless/cx-editors/RichText.ts

@@ -6,7 +6,7 @@ const Default = asFluidToken({
   ...cxRichTextBase.Default,
   Compose: {
     ...(cxRichTextBase.Default.Compose || {}),
-    WithShadowedBy: addProps({ 'data-shadowed-by': '@bodiless/__cxstarter__' }),
+    WithShadowedBy: addProps({ 'data-shadowed-by': '__cxstarter_:RichText' }),
   },
   // Demonstrates how to remove a component from the default editor.
   // Core: {

packages/__cxstarter__/src/shadow/@bodiless/cx-elements/Typography.ts

@@ -5,7 +5,7 @@ export default {
   ...cxTypographyBase,
   H1: asElementToken(cxTypographyBase.H1, {
     Theme: {
-      _: addProps({ 'data-shadowed-by': '__cxstarter__' }),
+      _: addProps({ 'data-shadowed-by': '__cxstarter__:Typography' }),
     },
   }),
 };

packages/cx-templates/src/components/Generic/tokens/token.ts → packages/__cxstarter__/src/shadow/@bodiless/cx-flowcontainer/FlowContainer.ts

@@ -12,33 +12,19 @@
  * limitations under the License.
  */
 
-import {
-  replaceWith,
-  Fragment,
-  on,
-} from '@bodiless/fclasses';
-import { LayoutClean, cxLayout } from '@bodiless/cx-layout';
-import { asGenericTemplateToken } from '../GenericClean';
+import { asFluidToken } from '@bodiless/cx-elements';
+import { cxFlowContainerBase } from '@bodiless/cx-flowcontainer';
+import { addProps } from '@bodiless/fclasses';
 
-const Default = asGenericTemplateToken({
-  Components: {
-    PageWrapper: on(LayoutClean)(cxLayout.Default),
-  },
-  Schema: {
-  },
-  SEO: {
-  },
-  Theme: {
-  },
+const Default = asFluidToken({
+  ...cxFlowContainerBase.Default,
+  Spacing: {
+    ...cxFlowContainerBase.Default.Spacing,
+    _: addProps({ 'data-shadowed-by': '__cxstarter__FlowContainer' }),
+  }
 });
 
-const WithoutBreadcrumbs = asGenericTemplateToken({
-  Components: {
-    Breadcrumb: replaceWith(Fragment),
-  },
-});
-
-export const cxGenericTemplate = {
+export default {
+  ...cxFlowContainerBase,
   Default,
-  WithoutBreadcrumbs,
 };

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

@@ -0,0 +1,66 @@
+/**
+ * Copyright © 2019 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 React from 'react';
+import { withNodeKey } from '@bodiless/core';
+import {
+  flowHoc,
+  as,
+  replaceWith,
+} from '@bodiless/fclasses';
+import { cxFlowContainer, FlowContainerClean } from '@bodiless/cx-flowcontainer';
+
+import { asStyleGuideTemplateToken, cxStyleGuideTemplate } from '@bodiless/cx-templates';
+
+const DefaultFlowContainer = as(
+  cxFlowContainer.Default,
+  withNodeKey('defaultcontainer'),
+)(FlowContainerClean);
+
+const FullFlowContainer = as(
+  cxFlowContainer.Default,
+  cxFlowContainer.WithFullWidthConstraint,
+  withNodeKey('fullwidthcontainer'),
+)(FlowContainerClean);
+
+const OneThirdContainer = as(
+  cxFlowContainer.Default,
+  cxFlowContainer.WithTabletOneThirdConstraint,
+  withNodeKey('onethirdcontainer'),
+)(FlowContainerClean);
+
+const ContentRegionContainer = as(
+  cxFlowContainer.ContentRegion,
+  withNodeKey('contentregioncontainer'),
+)(FlowContainerClean);
+
+const Examples = (props: any) => (
+  <>
+    <DefaultFlowContainer />
+    <hr />
+    <FullFlowContainer />
+    <hr />
+    <OneThirdContainer />
+    <hr />
+    <ContentRegionContainer />
+  </>
+);
+
+export const FlowContainer = asStyleGuideTemplateToken(cxStyleGuideTemplate.Default, {
+  Meta: flowHoc.meta.term('Token')('FlowContainer'),
+  Content: {
+    Title: replaceWith(() => <>FlowContainer</>),
+    Examples: replaceWith(Examples),
+  },
+});

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

@@ -0,0 +1,55 @@
+/**
+ * Copyright © 2019 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 React from 'react';
+import { withNodeKey } from '@bodiless/core';
+import {
+  flowHoc,
+  as,
+  replaceWith,
+  Img,
+} from '@bodiless/fclasses';
+import { cxImage } from '@bodiless/cx-image';
+import { asStyleGuideTemplateToken, cxStyleGuideTemplate } from '@bodiless/cx-templates';
+
+const DefaultImage = as(
+  cxImage.Default,
+  withNodeKey('defaultimage'),
+)(Img);
+
+const DefaultLandscapeImage = as(
+  cxImage.Default,
+  cxImage.WithLandscapePlaceholder,
+  withNodeKey('defaultlandscapeimage'),
+)(Img);
+
+/* @todo
+ * Rendered only the two types of images available in flow container as separate components.
+ * To do is provide all variations we want tested individually.
+ */
+const Examples = (props: any) => (
+  <>
+    <DefaultImage />
+    <hr className="my-4" />
+    <DefaultLandscapeImage />
+  </>
+);
+
+export const Images = asStyleGuideTemplateToken(cxStyleGuideTemplate.Default, {
+  Meta: flowHoc.meta.term('Token')('Images'),
+  Content: {
+    Title: replaceWith(() => <>Images</>),
+    Examples: replaceWith(Examples),
+  },
+});

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

@@ -21,6 +21,6 @@ export const Layout = asStyleGuideTemplateToken(cxStyleGuideTemplate.NoLayout, {
   Meta: flowHoc.meta.term('Token')('Layout'),
   Content: {
     Title: replaceWith(() => <>Layout</>),
-    Examples: on(LayoutClean)(cxLayout.WithBordersLabels),
+    Examples: on(LayoutClean)(cxLayout.StyleGuide),
   },
 });

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

@@ -30,7 +30,7 @@ const Examples = () => (
       to demo from the "Templates" button on the "Page" toolbar
       menu on the new page.
     </Para>
-    <Subtitle>Existing Pages</Subtitle>
+    <Subtitle>Global Elements</Subtitle>
     <Para>
       <ul>
         <li><a href="./layout">Layout</a></li>
@@ -40,6 +40,19 @@ const Examples = () => (
         <li><a href="./typography">Typography</a></li>
       </ul>
     </Para>
+    <Subtitle>Components</Subtitle>
+    <Para>
+      <ul>
+        <li><a href="./flowcontainer">Flow Container</a></li>
+        <li><a href="./images">Images</a></li>
+      </ul>
+    </Para>
+    <Subtitle>Templates</Subtitle>
+    <Para>
+      <ul>
+        <li><a href="./generic-template">Generic Template</a></li>
+      </ul>
+    </Para>
   </>
 );
 

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

@@ -16,6 +16,8 @@ import { Editors, EditorsMonoFont } from './Editors';
 import { Typography } from './Typography';
 import { Layout } from './Layout';
 import { Header } from './Header';
+import { FlowContainer } from './FlowContainer';
+import { Images } from './Images';
 import { _default } from './_default';
 
 export const __cxstarter__StyleGuideTemplate = {
@@ -25,4 +27,6 @@ export const __cxstarter__StyleGuideTemplate = {
   Typography,
   Layout,
   Header,
+  Images,
+  FlowContainer,
 };

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

@@ -24,6 +24,8 @@ const {
   Typography,
   Layout,
   Header,
+  FlowContainer,
+  Images,
   _default
 } = __cxstarter__StyleGuideTemplate;
 
@@ -36,6 +38,8 @@ const Default = asFluidToken({
     Typography,
     Layout,
     Header,
+    FlowContainer,
+    Images,
   },
 });
 

packages/cx-editors/src/components/FlowContainer/index.ts

@@ -0,0 +1,11 @@
+import { asFluidToken } from '@bodiless/cx-elements';
+import { on } from '@bodiless/fclasses';
+import { cxRichText, RichTextClean } from '../RichText';
+
+const WithEditorVariations = asFluidToken({
+  Components: {
+    RichText: on(RichTextClean)(cxRichText.Default),
+  },
+});
+
+export const cxEditorsFlowContainer = { WithEditorVariations };

packages/cx-editors/src/index.ts

@@ -15,3 +15,4 @@
 export * from './withEditor';
 export * from './components/RichText';
 export * from './components/EditorPlain';
+export * from './components/FlowContainer';

packages/cx-elements/doc/CX_Elements.md

@@ -38,7 +38,7 @@ const Foo = {
 };
 ```
 
-If combining multiple tokens, you can put them within `as()` or `flowHOC()`:
+If combining multiple tokens, you can put them within `as()` or `flowHoc()`:
 
 ```js
 import { cxColor, cxTextDecoration } from '@bodiless/cx-elements';

packages/cx-elements/site.tailwind.config.js

@@ -44,7 +44,9 @@ module.exports = {
       margin: {
         4.5: '1.125rem',
         5.75: '1.438rem',
-      }
+        'site-percent': '5%',
+        'md-site-percent': '8%',
+      },
     },
   },
   variants: {

packages/cx-templates/src/components/Generic/index.ts → packages/cx-elements/src/components/Spacing/index.ts

@@ -12,6 +12,5 @@
  * limitations under the License.
  */
 
-export { GenericTemplateClean, asGenericTemplateToken } from './GenericClean';
-export { cxGenericTemplate } from './tokens/token';
-export type { GenericTemplateComponents, BaseGenericTemplateProps } from './types';
+export { default as cxSpacing } from './tokens';
+export { default as cxSpacingBase } from './tokens/cxSpacing';

packages/cx-elements/src/components/Spacing/tokens/cxSpacing.ts

@@ -0,0 +1,35 @@
+/**
+ * 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 { asTokenGroup } from '../../../util';
+
+const meta = {
+  categories: {
+    Type: ['Element'],
+    Group: ['Spacing'],
+  },
+};
+
+/*
+ * Tailwind's container is specifically not used due to its feature it set's max-width
+ * to min-width of breakpoint.  So instead rely on ContainerWrapper to margin percent
+ * to contain content (WithSiteMargin) until we get to xl and then constrain by
+ * max-width (WithSiteXLConstraint).
+ */
+export default asTokenGroup(meta)({
+  WithSiteMargin: 'mx-site-percent md:mx-md-site-percent xl:px-40',
+  WithSiteXLConstraint: 'xl:container xl:mx-auto',
+  Gutter: 'p-1 md:p-2 lg:p-3',
+  GutterOffset: '-mx-1 md:-mx-2 lg:-mx-3',
+});

sites/__cxstarter__/src/data/pages/index.tsx → packages/cx-elements/src/components/Spacing/tokens/index.ts

@@ -12,10 +12,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import tokens from './cxSpacing';
 
-export default () => (
-  <>
-    Placeholder home page
-  </>
-);
+export default tokens;

packages/cx-elements/src/index.ts

@@ -16,4 +16,5 @@ export * from './components/Typography';
 export * from './components/Color';
 export * from './components/TextDecoration';
 export * from './components/FontSize';
+export * from './components/Spacing';
 export * from './util';