Skip to content

Commit

Permalink
Merge pull request #493 from lwnoble/main
Browse files Browse the repository at this point in the history 
preview
  • Loading branch information
@lwnoble
lwnoble authored Aug 30, 2023
2 parents 36a21c2 + 0c88c0a commit 1b3ca8d
Show file tree
Hide file tree
Showing 51 changed files with 2,247 additions and 180 deletions.
Binary file added code/src/ui/public/computer.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added code/src/ui/public/phone.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions code/src/ui/src/mui-a11y-tb/templates/DecorativeText.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/*
* Copyright (c) 2023 Discover Financial Services
* Licensed under MIT License. See License.txt in the project root for license information
*/
import React, { useState, useEffect } from 'react';
import { Breadcrumbs, Button, Link, Typography, Grid} from '@mui/material';

interface Props {
style?: any;
children?: React.ReactNode;
className?: string;
}

export const DecorativeText: React.FC<Props> = ({className=""}) => {
return (
<section className={className}>
<Grid justifyContent="center" className="v-center" container spacing={2} columns={12} margin={2}>
<Grid item className="v-center" lg={8} md={6} sm={12}>
<h2>Title</h2>
<div className="body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
</p>
</div>
</Grid>

</Grid>
</section>
)
}
48 changes: 48 additions & 0 deletions code/src/ui/src/mui-a11y-tb/templates/FeatureHighlightsLeft.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*
* Copyright (c) 2023 Discover Financial Services
* Licensed under MIT License. See License.txt in the project root for license information
*/
import React, { useState, useEffect } from 'react';
import { Breadcrumbs, Button, Link, Typography, Grid, Divider } from '@mui/material';
import { Avatar, Stack } from '@mui/material';
import { ListComponent } from '../../pages/components/ListComponent';
interface Props {
style?: any;
children?: React.ReactNode;
className?: string;
}

export const FeatureHighlightsLeft: React.FC<Props> = ({className=""}) => {
return (
<section className={className}>
<Grid justifyContent="center" className="v-center" container spacing={2} columns={12} margin={2}>
<Grid item spacing={2} className="centered" lg={6} sm={12} order={{ lg: 1, sm: 2 }}>
<div className="card feature-card white glow-9">
<h3 className="gradient-title">Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
</p>
<div className="body">
<ListComponent hasIcon isLarge type={3} title={'Episode 1'} overline={'Season 1'} body={'testing'} ></ListComponent>
<Divider />
<ListComponent hasIcon isLarge type={3} title={'Episode 2'} overline={'Season 1'} body={'testing'} ></ListComponent>
<Divider />
<ListComponent hasIcon isLarge type={3} title={'Episode 3'} overline={'Season 1'} body={'testing'} ></ListComponent>
<Divider />
<ListComponent hasIcon isLarge type={3} title={'Episode 4'} overline={'Season 1'} body={'testing'} ></ListComponent>
</div>
</div>
</Grid>
<Grid item spacing={2} lg={6} sm={12} order={{ lg: 2, sm: 1 }}>
<div className="overline-large">Features</div>
<h2>Title</h2>
<div className="body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
</p>
</div>
</Grid>
</Grid>
</section>
)
}
49 changes: 49 additions & 0 deletions code/src/ui/src/mui-a11y-tb/templates/FeatureHighlightsRight.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/*
* Copyright (c) 2023 Discover Financial Services
* Licensed under MIT License. See License.txt in the project root for license information
*/
import React, { useState, useEffect } from 'react';
import { Breadcrumbs, Button, Link, Typography, Grid, Divider } from '@mui/material';
import { Avatar, Stack } from '@mui/material';
import { ListComponent } from '../../pages/components/ListComponent';
interface Props {
style?: any;
children?: React.ReactNode;
className?: string;
}

export const FeatureHighlightsRight: React.FC<Props> = ({className=""}) => {
return (
<section className={className}>
<Grid justifyContent="center" className="v-center" container spacing={2} columns={12} margin={2}>
<Grid item spacing={2} lg={6} sm={12}>
<div className="overline-large">Features</div>
<h2>Title</h2>
<div className="body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
</p>
</div>
</Grid>
<Grid item spacing={2} className="centered" lg={6} sm={12}>
<div className="card feature-card white glow-9">
<h3 className="gradient-title">Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
</p>
<div className="body">
<ListComponent hasIcon isLarge type={3} title={'Episode 1'} overline={'Season 1'} body={'testing'} ></ListComponent>
<Divider />
<ListComponent hasIcon isLarge type={3} title={'Episode 2'} overline={'Season 1'} body={'testing'} ></ListComponent>
<Divider />
<ListComponent hasIcon isLarge type={3} title={'Episode 3'} overline={'Season 1'} body={'testing'} ></ListComponent>
<Divider />
<ListComponent hasIcon isLarge type={3} title={'Episode 4'} overline={'Season 1'} body={'testing'} ></ListComponent>
</div>
</div>
</Grid>

</Grid>
</section>
)
}
2 changes: 1 addition & 1 deletion code/src/ui/src/mui-a11y-tb/templates/Footer5Columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ interface Props {
className?: string;
}

export const Footer5Columns: React.FC<Props> = ({className=""}) => {
export const Footer5Columns: React.FC<Props> = ({className="black"}) => {
return (
<footer className={className}>
<Grid className="v-center" container spacing={2} columns={{ lg: 7, md: 5, sm: 3 }} margin={2}>
Expand Down
50 changes: 50 additions & 0 deletions code/src/ui/src/mui-a11y-tb/templates/IconCardsCenteredClickable.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*
* Copyright (c) 2023 Discover Financial Services
* Licensed under MIT License. See License.txt in the project root for license information
*/
import React, { useState, useEffect } from 'react';
import { Breadcrumbs, Button, Link, Typography, Grid } from '@mui/material';
import { ListComponent } from '../../pages/components/ListComponent';
import { CardSample } from '../../pages/components/cards/CardSample';

interface Props {
style?: any;
children?: React.ReactNode;
className?: string;
}

export const IconCardsCenteredClickable: React.FC<Props> = ({className=""}) => {
return (
<section className={"centered " + className}>
<Grid justifyContent="center" container spacing={2} columns={12} margin={2}>
<Grid justifyContent="center" item spacing={2} xl={10} sm={12}>
<h2>Title</h2>
<div className="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</Grid>
<Grid justifyContent="center" item spacing={2} xl={10} sm={12} className="cardSection">
<CardSample icon={true} className="fixed" title="Title" clickable={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
<CardSample icon={true} className="fixed" title="Title" clickable={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
<CardSample icon={true} className="fixed" title="Title" clickable={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
<CardSample icon={true} className="fixed" title="Title" clickable={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
</Grid>
</Grid>
</section>
)
}
50 changes: 50 additions & 0 deletions code/src/ui/src/mui-a11y-tb/templates/IconCardsCenteredHotlink.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*
* Copyright (c) 2023 Discover Financial Services
* Licensed under MIT License. See License.txt in the project root for license information
*/
import React, { useState, useEffect } from 'react';
import { Breadcrumbs, Button, Link, Typography, Grid } from '@mui/material';
import { ListComponent } from '../../pages/components/ListComponent';
import { CardSample } from '../../pages/components/cards/CardSample';

interface Props {
style?: any;
children?: React.ReactNode;
className?: string;
}

export const IconCardsCenteredHotlink: React.FC<Props> = ({className=""}) => {
return (
<section className={"centered " + className}>
<Grid justifyContent="center" container spacing={2} columns={12} margin={2}>
<Grid justifyContent="center" item spacing={2} xl={10} sm={12}>
<h2>Title</h2>
<div className="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</Grid>
<Grid justifyContent="center" item spacing={2} xl={10} sm={12} className="cardSection">
<CardSample icon={true} className="fixed" title="Title" hotlink={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
<CardSample icon={true} className="fixed" title="Title" hotlink={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
<CardSample icon={true} className="fixed" title="Title" hotlink={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
<CardSample icon={true} className="fixed" title="Title" hotlink={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
</Grid>
</Grid>
</section>
)
}
50 changes: 50 additions & 0 deletions code/src/ui/src/mui-a11y-tb/templates/IconCardsCenteredOneButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*
* Copyright (c) 2023 Discover Financial Services
* Licensed under MIT License. See License.txt in the project root for license information
*/
import React, { useState, useEffect } from 'react';
import { Breadcrumbs, Button, Link, Typography, Grid } from '@mui/material';
import { ListComponent } from '../../pages/components/ListComponent';
import { CardSample } from '../../pages/components/cards/CardSample';

interface Props {
style?: any;
children?: React.ReactNode;
className?: string;
}

export const IconCardsCenteredOneButton: React.FC<Props> = ({className=""}) => {
return (
<section className={"centered " + className}>
<Grid justifyContent="center" container spacing={2} columns={12} margin={2}>
<Grid justifyContent="center" item spacing={2} xl={10} sm={12}>
<h2>Cards Centered on Page, Left Aligned, Fixed Width, One Buttons</h2>
<div className="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</Grid>
<Grid justifyContent="center" item spacing={2} xl={10} sm={12} className="cardSection">
<CardSample icon={true} className="fixed" title="Title" clickable={false} hideSecondary={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
<CardSample icon={true} className="fixed" title="Title" hideSecondary={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
<CardSample icon={true} className="fixed" title="Title" hideSecondary={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
<CardSample className="fixed" title="Title" hideSecondary={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
</Grid>
</Grid>
</section>
)
}
53 changes: 53 additions & 0 deletions code/src/ui/src/mui-a11y-tb/templates/IconCardsCenteredTwoButtons.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*
* Copyright (c) 2023 Discover Financial Services
* Licensed under MIT License. See License.txt in the project root for license information
*/
import React, { useState, useEffect } from 'react';
import { Breadcrumbs, Button, Link, Typography, Grid } from '@mui/material';
import { ListComponent } from '../../pages/components/ListComponent';
import { CardSample } from '../../pages/components/cards/CardSample';

interface Props {
style?: any;
children?: React.ReactNode;
className?: string;
}

export const IconCardsCenteredTwoButtons: React.FC<Props> = ({className=""}) => {
return (
<section className={"centered " + className}>
<Grid justifyContent="center" container spacing={2} columns={12} margin={2}>
<Grid justifyContent="center" item spacing={2} xl={10} sm={12}>
<h2>Cards Centered on Page, Left Aligned, Fixed Width, Two Buttons</h2>
<div className="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</Grid>
<Grid justifyContent="center" item spacing={2} xl={10} sm={12} className="cardSection">
<CardSample icon={true} className="fixed" title="Title" clickable={false}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>

<CardSample icon={true} className="fixed" title="Title" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>

<CardSample icon={true} className="fixed" title="Title" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>

<CardSample icon={true} className="fixed" title="Title" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua
</CardSample>
</Grid>
</Grid>
</section>
)
}
Loading

0 comments on commit 1b3ca8d

Please sign in to comment.