Skip to content

Commit

Permalink
Merge pull request #892 from omesh-omg/adding-introduction-components…
Browse files Browse the repository at this point in the history
…-#889

#889: added introduction of Components
  • Loading branch information
aaronreed708 authored May 22, 2024
2 parents bcbefda + e1bd1f3 commit 4326fd1
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 0 deletions.
28 changes: 28 additions & 0 deletions code/src/ui/src/pages/content/components/ComponentIntro.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/*
* 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> These are the core components of your design language, the most common widgets used in web and mobile applications.
The input that we gather from you for Atom and Molecule settings help us define design system styles that will be
applied to components. 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;
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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"}}>
Expand Down Expand Up @@ -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 />
}
Expand Down

0 comments on commit 4326fd1

Please sign in to comment.