finos#889: added introduction of Components

code/src/ui/src/pages/content/components/ComponentIntro.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2023 Discover Financial Services
+ * Licensed under Apache-2.0 License. See License.txt in the project root for license information
+ */
+import React from 'react'
+import { Grid } from '@mui/material';
+
+const ComponentIntro: React.FC = () => {
+
+    return (
+        <>
+          <Grid container spacing={2} columns={12} margin={2}>
+            <Grid item spacing={2} lg={12} md={12} sm={12}>
+              <h1>Components</h1>
+                <div>
+                      <p>The input that we gather from the user as Atom and Molecule settings help us create design system styles and components.
+                         . Here are the most popular widgets used in web and mobile applications. However, this section is meant only to reflect the 
+                         values that have already been chosen and does not allow you to further configure the design system.
+                      </p>
+                 </div>
+            </Grid>
+          </Grid>
+        </>
+    )
+}
+
+export default ComponentIntro;

code/src/ui/src/pages/content/components/ComponentsContent.tsx

@@ -5,6 +5,7 @@
 import React, { ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 import { DesignSystem, Event, EventType } from '@finos/a11y-theme-builder-sdk';
+import ComponentsIntro from './ComponentIntro';
 import { List, Collapse } from '@mui/material';
 import { LeftNavHeader, LeftNavItem } from '../../../components/LeftNavTabs';
 import ExpandLess from '@mui/icons-material/ExpandLess';
@@ -67,6 +68,7 @@ import { GrooveComponent } from '../../components/shadows/GrooveComponent';
 import { GlowComponent } from '../../components/shadows/GlowComponent';
 
 import { Preferences } from '../../../Preferences';
+import ComponentIntro from './ComponentIntro';
 
 interface Props {
     user: any;
@@ -151,6 +153,9 @@ export const ComponentsContent: React.FC<Props> = ({ user, designSystem }) => {
                         paddingTop: "0px",
                     }}
                 >
+                    <LeftNavHeader>Introduction</LeftNavHeader>
+                    <LeftNavItem text={"Components"} value="Components" indent={1} selected={showComponent} onClick={()=> {setShowComponent("Components")}}/>
+
                     <LeftNavHeader>Styles</LeftNavHeader>
                     <LeftNavItem text="Mode" indent={1} />
                     <div style={{paddingLeft: "50px"}}>
@@ -268,6 +273,9 @@ export const ComponentsContent: React.FC<Props> = ({ user, designSystem }) => {
             </div>
             <div className="design-system-editor-right-content"  data-mode={darkMode ? "dark" : "light"}>
             <div className="design-system-editor-right-content-scrollable">
+                    {showComponent === "Components" &&
+                        <ComponentIntro />
+                    }
                     {showComponent === "colorsCoreColors" &&
                         <CoreColorsComponent />
                     }