Merge pull request #1548 from jadu/docs-product-support

Update documentation

docs/README.md

@@ -1,6 +1,6 @@
 # Website
 
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
 
 ### Installation
 

docs/docs/components/badge.mdx

@@ -2,10 +2,23 @@
 id: badge
 title: Badge
 sidebar_label: Badge
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+<div className="product-support">
+  <strong>Supported products</strong>
+  <ul>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central CMS</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Forms</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Connect</li>
+  </ul>
+</div>
+
+----
 
 Badges can be used to highlight new or unread items, Limited usage is recommended, mainly for displaying numeric values in combination with other data to provide context. Do not use in place of labels, or any other similar element.
 

docs/docs/components/block-list.mdx

@@ -2,10 +2,23 @@
 id: block-list
 title: Block List
 sidebar_label: Block List
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+<div className="product-support">
+  <strong>Supported products</strong>
+  <ul>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central CMS</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Forms</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Connect</li>
+  </ul>
+</div>
+
+----
 
 A block list is a simple way to present lists of information and supports different markup schemes depending on what is most appropriate for the data. Markup can be based around `ul`, `ol`, `div` or `link` elements.
 

docs/docs/components/breadcrumb.mdx

@@ -2,10 +2,23 @@
 id: breadcrumb
 title: Breadcrumb
 sidebar_label: Breadcrumb
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+<div className="product-support">
+  <strong>Supported products</strong>
+  <ul>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central CMS</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Forms</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Connect</li>
+  </ul>
+</div>
+
+----
 
 A basic helper to render a list of breadcrumb links. A view should set a `breadcrumbs` object which will then be rendered by the base template.
 

docs/docs/components/button-group.mdx

@@ -2,10 +2,23 @@
 id: button-group
 title: Button group
 sidebar_label: Button group
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+<div className="product-support">
+  <strong>Supported products</strong>
+  <ul>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central CMS</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Forms</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Connect</li>
+  </ul>
+</div>
+
+----
 
 Group a collection of related [buttons](button.mdx) together on a single line. Great for creating toolbars.
 

docs/docs/components/button.mdx

@@ -2,10 +2,23 @@
 id: button
 title: Button
 sidebar_label: Button
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+<div className="product-support">
+  <strong>Supported products</strong>
+  <ul>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central CMS</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Forms</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Connect</li>
+  </ul>
+</div>
+
+----
 
 Pulsar buttons are an all purpose user interface element allowing users to perform actions, submit forms and progress through transactions.
 
@@ -77,15 +90,17 @@ Other recommendations for labelling your buttons include:
 
 <div className="d-guidelines">
   <div className="d-guidelines__block d-guidelines__block--do">
-  <div className="d-guidelines-preview">
-    <button className="btn btn--primary">New Document</button>
-  </div>
-  <div className="d-guidelines-label"><em className="d-guidelines-label__title">Do</em> use title case</div></div>
-  <div className="d-guidelines__block d-guidelines__block--not">
     <div className="d-guidelines-preview">
-      <button className="btn btn--primary">New document</button> <button className="btn btn--danger">DELETE</button>
+      <button className="btn btn--primary">New Document</button>
+    </div>
+    <div className="d-guidelines-label"><em className="d-guidelines-label__title">Do</em> use title case</div>
+    <div className="d-guidelines__block d-guidelines__block--not">
+      <div className="d-guidelines-preview">
+        <button className="btn btn--primary">New document</button> <button className="btn btn--danger">DELETE</button>
+      </div>
+      <div className="d-guidelines-label"><em className="d-guidelines-label__title">Don’t</em> use sentence case or all caps</div>
     </div>
-    <div className="d-guidelines-label"><em className="d-guidelines-label__title">Don’t</em> use sentence case or all caps</div></div>
+  </div>
 </div>
 
 <div className="d-guidelines">

docs/docs/components/card.mdx

@@ -2,10 +2,23 @@
 id: card
 title: Card
 sidebar_label: Card
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+<div className="product-support">
+  <strong>Supported products</strong>
+  <ul>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central CMS</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Forms</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Connect</li>
+  </ul>
+</div>
+
+----
 
 Cards are a flexible container for standout content with a range of configurable options for headers and footers, images and calls to action. 
 

docs/docs/components/datatable.mdx

@@ -2,10 +2,23 @@
 id: datatable
 title: Datatable
 sidebar_label: Datatable
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+<div className="product-support">
+  <strong>Supported products</strong>
+  <ul>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central CMS</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Forms</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Connect</li>
+  </ul>
+</div>
+
+----
 
 Datatables use the datatables.net plugin to provide a nice amount of functionality to your data. Pulsar’s configuration includes plugins to make them responsive. Where possible you should refer to the official [datatable documentation](https://datatables.net/).
 

docs/docs/components/dropdown-button.mdx

@@ -2,10 +2,23 @@
 id: dropdown-button
 title: Dropdown button
 sidebar_label: Dropdown button
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+<div className="product-support">
+  <strong>Supported products</strong>
+  <ul>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central CMS</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Forms</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Connect</li>
+  </ul>
+</div>
+
+----
 
 Display a contextual list of actions presented as a drop down list when the button is pressed.
 

docs/docs/components/dropzone.mdx

@@ -2,10 +2,23 @@
 id: dropzone
 title: Dropzone
 sidebar_label: Dropzone
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+<div className="product-support">
+  <strong>Supported products</strong>
+  <ul>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central CMS</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Forms</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Connect</li>
+  </ul>
+</div>
+
+----
 
 The DropZone is a component that can create a pre-formatted area for users to drag files, it can also be used to convert an existing HTML element into a droppable area.
 

docs/docs/components/flash-message.mdx

@@ -2,10 +2,23 @@
 id: flash-message
 title: Flash Message
 sidebar_label: Flash message
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+<div className="product-support">
+  <strong>Supported products</strong>
+  <ul>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central CMS</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Forms</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Connect</li>
+  </ul>
+</div>
+
+----
 
 Flash messages alert the user when things happen, this may be to confirm that something has occurred successfully, like saving a document, or when something goes wrong. Flash messages may also highlight problems with the system that the user may need to know about, like a loss of network connectivity which is preventing auto-save.
 

docs/docs/components/icon.mdx

@@ -2,10 +2,23 @@
 id: icon
 title: Icon
 sidebar_label: Icon
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+<div className="product-support">
+  <strong>Supported products</strong>
+  <ul>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central CMS</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Forms</li>
+    <li className="product-support--supported"><FontAwesomeIcon icon="fa-solid fa-check-circle" /> Central Connect</li>
+  </ul>
+</div>
+
+----
 
 Help visually distinguish and provide extra meaning to certain items or actions. You can pass an icon name or mime type to generate the appropriate icon.
 

docs/docs/components/label.mdx

@@ -2,17 +2,20 @@
 id: label
 title: Label
 sidebar_label: Label
+products:
+  supported:
+    - Central CMS
+    - Central Forms
+    - Connect
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 Provide extra contextual meaning to things, like stateful information.
 
 <div className="d-example">
   <span className="label">New</span>
 </div>
 
+
 ## Basic usage
 
 <Tabs
@@ -94,15 +97,18 @@ You should not rely on colour alone to convey meaning. This will ensure you're m
 
 <div className="d-guidelines">
   <div className="d-guidelines__block d-guidelines__block--do">
-  <div className="d-guidelines-preview">
-    <span className="label label--success">online</span> <span className="label label--danger">offline</span>
+    <div className="d-guidelines-preview">
+      <span className="label label--success">online</span> <span className="label label--danger">offline</span>
+    </div>
+    <div className="d-guidelines-label"><em className="d-guidelines-label__title">Do</em> use a descriptive text label</div>
   </div>
-  <div className="d-guidelines-label"><em className="d-guidelines-label__title">Do</em> use a descriptive text label</div></div>
+
   <div className="d-guidelines__block d-guidelines__block--not">
     <div className="d-guidelines-preview">
       <span className="label label--success">online</span> <span className="label label--danger">online</span>
     </div>
-    <div className="d-guidelines-label"><em className="d-guidelines-label__title">Don’t</em> rely on colour to convey meaning</div></div>
+    <div className="d-guidelines-label"><em className="d-guidelines-label__title">Don’t</em> rely on colour to convey meaning</div>
+  </div>
 </div>
 
 ## Linked labels