docs(canvasx-elements, canvasx-editors): Typography, Editors, SiteBui…

…lder & Cleanup (#1361)

* Typography/Editors/SiteBuilder & Cleanup

* Made Overview more concise in steps

* Add missing changes from old PR

* Add minor changes to docs

* Update doc files

* Update packages/bodiless-documentation/doc/Development/Guides/BuildingSites/README.md

* Update packages/bodiless-documentation/doc/Development/Guides/BuildingSites/README.md

* Update docs based on feedback

* Apply copyright notices

* Add token example

* Add Content Editor Details to CX Link

Co-authored-by: mister. jones <misterjones@users.noreply.github.com>
Co-authored-by: Lucas Varela <lvarelab@its.jnj.com>

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

@@ -1,3 +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 React from 'react';
 import { asStyleGuideTemplateToken, cxStyleGuideTemplate } from '@bodiless/cx-templates';
 import { flowHoc, replaceWith } from '@bodiless/fclasses';

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

@@ -1,3 +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 React from 'react';
 import { asStyleGuideTemplateToken, cxStyleGuideTemplate } from '@bodiless/cx-templates';
 import { flowHoc, replaceWith } from '@bodiless/fclasses';

packages/bodiless-components/bodiless.docs.json

@@ -3,7 +3,9 @@
     "Image": {
       "README.md": "./doc/Image.md"
     },
-    "Link.md": "./doc/Link.md",
+    "Link": {
+      "README.md": "./doc/Link.md"
+    },
     "List.md": "./doc/List.md",
     "Chameleon.md": "./doc/Chameleon.md",
     "Editable.md": "./doc/editable.md",

packages/bodiless-components/doc/Image.md

@@ -11,7 +11,7 @@ or not.
 To add an Image Component to your page:
 
 01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow
-    Container](../../../Components/FlowContainer), and, within its context menu, under "Component,"
+    Container](../../../Components/FlowContainer/), and, within its context menu, under "Component,"
     click **Add** (or **Swap**, if you're replacing a component).
 01. In the "Insert Component" modal, under "Type," check the "Image" checkbox, and select the type
     of image you would like to add.
@@ -49,7 +49,7 @@ To select an image for and configure an Image Component:
         image is hovered over.
 01. Click the checkmark in the bottom-right of the form to apply your configuration.
 01. If this is a _Linkable_ Image Component, within its context menu, under "Image," click **Edit**
-    to [add a link](../../../Components/Link#add-a-link-to-a-component).
+    to [add a link](../../../Components/Link/#add-a-link-to-a-component).
 01. You can resize the image by clicking and dragging on the the right-hand side of its Flow
     Container.
 

packages/bodiless-components/doc/Link.md

@@ -10,7 +10,7 @@ components — such as cards, menus, and images, to name a few.
 When you are able to add a link to a component, you will see an **Edit** button — depicted with a
 link icon — within its context menu; click on this button to open the _Link_ form.
 
-![Link form](./assets/LinkForm.jpg ':size=50%')
+![Link form](../assets/LinkForm.jpg ':size=50%')
 
 Using the _Link_ form, you can provide an existing URL to link to, or upload a file to link to.
 
@@ -30,7 +30,7 @@ Using the _Link_ form, you can provide an existing URL to link to, or upload a f
   select the file.
   - If successful, you will see a confirmation message and the _URL_ field will be auto-filled
     with the relative path to the uploaded file.  
-    ![File Upload Done](./assets/FileUploadDone.jpg ':size=50%')
+    ![File Upload Done](../assets/FileUploadDone.jpg ':size=50%')
 
 ### Add a Link to a Component
 
@@ -39,23 +39,24 @@ To set links used within components:
 01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a component that utilizes the link
     component (e.g., a linkable image).
 01. In the component's context menu, click **Edit** (depicted with a link icon).  
-    ![Linkable Image context menu with Link icon and "Edit" label](./assets/EditLinkIconInImageContextMenu.jpg ':size=50%')
+    ![Linkable Image context menu with Link icon and "Edit" label](../assets/EditLinkIconInImageContextMenu.jpg ':size=50%')
 01. Using the [_Link_ form](#the-link-form), provide an existing URL to link to, or upload a file to
     link to.
     - If desired, provide an aria label.
 01. Click the checkmark to apply your link.
 
 ### Add a Link in the Rich Text Editor
 
-To add a link to text in the [Rich Text Editor](./RichText) (e.g., in the body copy of a Card):
+To add a link to text in the [Rich Text Editor](../Editors/RichText) (e.g., in the body copy of a
+Card):
 
 01. Highlight the text you want to add a link to.  
-    ![Highlighted text with Rich Text menu](./assets/HighlightLinkText.jpg)
+    ![Highlighted text with Rich Text menu](../assets/HighlightLinkText.jpg)
 01. In the Rich Text Editor toolbar, click the Link button to format your selected text as a link.  
-    ![Highlighted text with Link button selected in Rich Text menu](./assets/ClickLinkButton.jpg)
+    ![Highlighted text with Link button selected in Rich Text menu](../assets/ClickLinkButton.jpg)
 01. Click your now link-formatted text, and, within its context menu, under "Link," click **Edit**
     (depicted with a link icon).  
-    ![Rich Text context menu with Link icon and "Edit" label](./assets/RichTextLinkEditButtonInContextMenu.jpg ':size=25%')
+    ![Rich Text context menu with Link icon and "Edit" label](../assets/RichTextLinkEditButtonInContextMenu.jpg ':size=25%')
 01. Using the [_Link_ form](#the-link-form), provide an existing URL to link to, or upload a file to
     link to.
     - If desired, provide an aria label.

packages/bodiless-components/doc/List.md

@@ -25,7 +25,7 @@ To add a list to your site:
 3. With the List Component's Context Menu you can edit your list.
 ![](./assets/ListContext.jpg)
     * **Link**: The Link button allows you add Links to List Items. See [Link
-    Component](../../../Components/Link) for more information.
+    Component](../../../Components/Link/) for more information.
     * **List Item**:
       * **Add** button allows you to add more items to your list.
       * **Sub** button allows you to add sublist items. You can add up to 2

packages/bodiless-curator/doc/SocialWall.md

@@ -23,7 +23,7 @@ site).
 To add a Social Wall Component to your page:
 
 01. While in [Edit Mode](/ContentEditorUserGuide/#edit-mode), select a [Flow
-    Container](/Components/FlowContainer), and, within its context menu, under "Component," click
+    Container](/Components/FlowContainer/), and, within its context menu, under "Component," click
     **Add** (or **Swap**, if you're replacing a component).
 01. In the "Insert Component" modal, under "Type," check the "Curator" checkbox, and select the
     **Curator** Component.

packages/bodiless-documentation/doc/About/CorePrinciples.md

@@ -103,8 +103,8 @@ and forms, ultimately each component is reponsible for defining a form (or
 other interface) which a user can use to modify its data.
 
 #### Examples
-- The core [Link](../../../Components/Link) component defines
-  its own schema and form elements.
+
+- The core [Link](/Components/Link/) component defines its own schema and form elements.
 
 ## 7. One workflow to rule them all
 One workflow for code, configuration and content. All component data are stored

packages/bodiless-documentation/doc/ContentEditorUserGuide/PageMenu/Disable/README.md

@@ -75,8 +75,9 @@ and will display "Link Disabled" on hover.
 ## Disable Non-Menu Links
 
 Select the "Non-menu links" checkbox to disable all links leading to the current page that appear in
-components utilizing the BodilessJS [Link Component](/Components/Link) (e.g., links created using
-the [Rich Text Editor Component](/Components/RichText) or [Card Component](/Components/Card)).
+components utilizing the BodilessJS [Link Component](/Components/Link/) (e.g., links created using
+the [Rich Text Editor Component](/Components/Editors/RichText) or [Card
+Component](/Components/Card)).
 
 When disabled, any links targeting the current page — that aren't in menus — will not be rendered in
 Preview (Static) or Review Mode (i.e., for each of the affected links, the anchor element will not

packages/bodiless-documentation/doc/ContentEditorUserGuide/README.md

@@ -214,7 +214,8 @@ can easily populate your site with content. These contentful components will
 render the default content but you can easily override and edit the content to
 suit your needs.
 
-For information on layouts and working with the Flow Container see the [Flow Container documentation.](../../../Components/FlowContainer)
+For information on layouts and working with the Flow Container, see the [Flow Container
+documentation](../../../Components/FlowContainer/).
 
 ## Working with Content
 
@@ -261,7 +262,7 @@ options are available, where they are available to the editor, and which options
 are available for each variation.
 
 To read more about the Rich Text Editor see the [Rich Text Editor component
-documentation](../../../Components/RichText).
+documentation](../../../Components/Editors/RichText).
 
 ### Components
 
@@ -270,44 +271,44 @@ read more about working with the individual components.
 
 #### Layout
 
-* [Flow Container](../../../Components/FlowContainer)
-* [Rich Media Text Editor](../../../Components/RichText)
-* [Card](../../../Components/Card)
+* [Flow Container](/Components/FlowContainer/)
+* [Rich Text Editor](/Components/Editors/RichText)
+* [Card](/Components/Card)
 
 #### Media
 
-* [Image](../../../Components/Image/)
-* [YouTube](../../../Components/YouTube)
-* [Carousel](../../../Components/Carousel)
+* [Image](/Components/Image/)
+* [YouTube](/Components/YouTube)
+* [Carousel](/Components/Carousel)
 
 #### Interactions
 
-* [Link](../../../Components/Link)
-* [Single Accordion](../../../Components/SingleAccordion)
-* [Navigation](../../../Components/Navigation/)
-* [List Filter](../../../Components/FilterByGroup)
+* [Link](/Components/Link/)
+* [Single Accordion](/Components/SingleAccordion)
+* [Navigation](/Components/Navigation/)
+* [List Filter](/Components/FilterByGroup)
 
 #### Integrations
 
-* [Bazaarvoice](../../../Components/bv)
+* [Bazaarvoice](/Components/bv)
 
 #### SEO
 
-* [Sitemap.xml](../../../Development/Guides/BuildingSites/ComponentsStarterKit?id=sitemapxml-amp-robotstxt-file)
+* [`Sitemap.xml`](/Development/Guides/BuildingSites/ComponentsStarterKit?id=sitemapxml-amp-robotstxt-file)
 * `Robots.txt`
-* [Metatags](../../../Development/Guides/BuildingSites/ComponentsStarterKit?id=metadata-component)
+* [Metatags](/Development/Guides/BuildingSites/ComponentsStarterKit?id=metadata-component)
 
 ### Content Library
 
 Using the _Content Library_, you can save components that you've created, along with their embedded
 content, allowing you to reuse them elsewhere on your site. The Content Library can be configured
-for use in [Flow Containers](/Components/FlowContainer); once enabled, you will be able to:
+for use in [Flow Containers](/Components/FlowContainer/); once enabled, you will be able to:
 
 * Save components in your Flow Container to the Content Library.
-  * See: [Add a new component](/Components/FlowContainer#add-a-new-component)
+  * See: [Add a new component](/Components/FlowContainer/#add-a-new-component)
 * Add components saved in the Content Library to your Flow Container.
   * See: [Saving a component in the Content
-    Library](/Components/FlowContainer#saving-a-component-in-the-content-library)
+    Library](/Components/FlowContainer/#saving-a-component-in-the-content-library)
 * Unlink components from Content Library Items.
   * See: [Unlinking a component from the Content
-    Library](/Components/FlowContainer#unlinking-a-component-from-the-content-library)
+    Library](/Components/FlowContainer/#unlinking-a-component-from-the-content-library)

packages/bodiless-documentation/doc/Development/Guides/BuildingSites/BuildingComponents/README.md

@@ -0,0 +1 @@
+# Building Components Overview

packages/bodiless-documentation/doc/Development/Guides/BuildingSites/BuildingOverview.md

@@ -210,9 +210,10 @@ reusable or wait until template/page is built that needs that component.
 
 We recommend reading some of the following guides:
 
-* [Refining the editor components](../../../Components/RichText?id=richtext-component) to meet the site's requirements.
+* [Refining the editor components](../../../Components/Editors/RichText#richtext-component) to meet
+  the site's requirements.
 * [Building Site Components Guide](/TBD)
-* [FlowContainer Guide](../../../Components/FlowContainer.md)
+* [FlowContainer Guide](../../../Components/FlowContainer/)
 
 In general, we recommend as best practice to create components in their own
 folders unless they are super small. The recommendation is a folder name as the
@@ -240,7 +241,7 @@ which is expected, this is beneficial to group these pages and create a template
 for each group.  
 
 A template will often consist of flexible area (use
-[FlowContainer](../../../Components/FlowContainer.md)) and defined
+[FlowContainer](../../../Components/FlowContainer/)) and defined
 components/behavior.
 
 Please read using [templates](./Templates/README.md) for deeper dive.

packages/bodiless-documentation/doc/Development/Guides/BuildingSites/ComponentsStarterKit.md

@@ -165,8 +165,8 @@ site requirements. The Site Builder will find three pre-defined rich text editor
 Editors can be extended or customized by using the Bodiless Design API to apply token HOCs which
 add, remove, replace, or style the components which render different text formatting.
 
-We recommend [refining the editor components](/Components/RichText?id=richtext-component) needed to
-meet your site's requirements.
+We recommend [refining the editor components](/Components/Editors/RichText#richtext-component)
+needed to meet your site's requirements.
 
 ## Images
 
@@ -198,7 +198,7 @@ FlowContainer for a sidebar could have reduced set of components to select from.
 A FlowContainer can also be configured to use the Content Library, allowing
 editors to save components for reuse throughout the site.
 
-For more information, please read [FlowContainer](/Components/FlowContainer).
+For more information, please read [FlowContainer](/Components/FlowContainer/).
 
 ## Sitemap.xml & Robots.txt file
 

packages/bodiless-documentation/doc/Development/Guides/BuildingSites/IdentifyingComponentsGuide.md

@@ -15,7 +15,7 @@ Let's use
 [Examples/Test Site homepage](https://johnsonandjohnson.github.io/Bodiless-JS/#/About/GettingStarted?id=launch-the-test-site)
 as an example. It consists of:
 
-* Header and within the header is a 
+* Header and within the header is a
   * Logo (Clickable Image)
   * Menu
 * Header Landscape Image