Skip to content

Commit

Permalink
Merge pull request #947 from etn-ccis/feature/blui-upgrade-docs-var
Browse files Browse the repository at this point in the history 
Feature/blui upgrade docs var
  • Loading branch information
@ektaghag-eaton
ektaghag-eaton authored Dec 19, 2024
2 parents f0798dc + ed955b5 commit 875b17f
Show file tree
Hide file tree
Showing 15 changed files with 201 additions and 169 deletions.
9 changes: 1 addition & 8 deletions docs/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import { DrawerContext } from './contexts/drawerContextProvider';
import { NavigationDrawer } from './router/drawer';
import { MainRouter } from './router/main';
import { DrawerLayout } from '@brightlayer-ui/react-components';
import { Routes } from 'react-router-dom';
import { useColorScheme } from '@mui/material';

export const App = (): JSX.Element => {
const [drawerOpen, setDrawerOpen] = useState(false);

const { setMode } = useColorScheme();

useEffect(() => {
setMode('light');
}, []);

return (
<DrawerContext.Provider
value={{
Expand Down
233 changes: 129 additions & 104 deletions docs/src/__configuration__/markdownMapping.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const ExternalLink = (tProps: TypographyProps<'a'>): JSX.Element => {
component={'a'}
target={'_blank'}
rel={'noopener noreferrer'}
sx={{ fontWeight: 400, color: theme.palette.primary.main }}
sx={{ fontWeight: 400, color: theme.vars.palette.primary.main }}
{...tProps}
/>
);
Expand All @@ -28,7 +28,11 @@ export const ExternalLink = (tProps: TypographyProps<'a'>): JSX.Element => {
export const InternalLink = (props: LinkProps): JSX.Element => {
const theme = useTheme();
return (
<Link rel={'noopener noreferrer'} style={{ fontWeight: 400, color: theme.palette.primary.main }} {...props} />
<Link
rel={'noopener noreferrer'}
style={{ fontWeight: 400, color: theme.vars.palette.primary.main }}
{...props}
/>
);
};

Expand Down Expand Up @@ -126,114 +130,135 @@ export const componentsMap = {
sx={{
pr: 2,
mb: 1,
borderLeft: (theme: Theme) => `4px solid ${theme.palette.text.disabled}`,
borderLeft: (theme: Theme) => `4px solid ${theme.vars.palette.text.disabled}`,
p: '0 15px',
m: '15px 0',
color: 'text.secondary',
}}
{...props}
/>
),
pre: (props: TypographyProps<'pre'>): JSX.Element => (
<Typography
component={'pre'}
color={'textPrimary'}
sx={{
pr: 2,
mb: 1,
display: 'flex',
backgroundColor: (theme: Theme) =>
theme.palette.mode === 'light' ? theme.palette.background.default : Colors.darkBlack[300],
}}
{...props}
/>
),
code: (props: TypographyProps<'code'>): JSX.Element => (
<Typography
component={'code'}
color={'inherit'}
sx={{
fontSize: '0.875rem',
m: '0px 2px',
p: '0px 5px',
whiteSpace: 'nowrap',
border: (theme: Theme) => `1px solid ${theme.palette.divider}`,
backgroundColor: (theme: Theme) =>
theme.palette.mode === 'light' ? theme.palette.background.default : Colors.darkBlack[300],
borderRadius: '2px',
fontFamily: `'Roboto Mono', monospace`,
lineHeight: '1.6',
}}
{...props}
/>
),
inlineCode: (props: TypographyProps<'code'>): JSX.Element => (
<Typography
component={'code'}
color={'textPrimary'}
sx={{
backgroundColor: (theme: Theme) =>
theme.palette.mode === 'light' ? theme.palette.background.default : Colors.darkBlack[300],
fontFamily: `'Roboto Mono', monospace`,
border: (theme: Theme) =>
theme.palette.mode === 'light' ? undefined : `${theme.palette.divider} 1px solid`,
}}
{...props}
/>
),
table: (props: TableProps): JSX.Element => (
<Box
className="tableContainer"
sx={{
overflow: 'auto',
boxSizing: 'border-box',
mb: 2,
color: 'text.primary',

table: {
textAlign: 'left',
borderCollapse: 'collapse',
minWidth: '100%',
border: (theme: Theme) => `1px solid ${theme.palette.divider}`,
},
a: {
fontSize: '0.875rem',
},
tr: {
border: 'unset',
borderLeft: 0,
borderRight: 0,
borderBottom: (theme: Theme) => `1px solid ${theme.palette.divider}`,
},
th: {
border: 'unset',
borderLeft: 0,
borderRight: 0,
p: '1rem',
fontSize: '0.875rem',
borderBottom: (theme: Theme) => `1px solid ${theme.palette.divider}`,
},
'tr:last-of-type': {
borderBottom: 0,
},
thead: {
backgroundColor: (theme: Theme): string =>
theme.palette.mode === 'light' ? Colors.white[100] : Colors.black[800],
},
'tbody tr:nth-of-type(odd)': {
backgroundColor: 'background.paper',
},
'tbody tr:nth-of-type(even)': {
backgroundColor: (theme: Theme): string =>
theme.palette.mode === 'light' ? Colors.white[100] : Colors.black[800],
},
td: {
pre: (props: TypographyProps<'pre'>): JSX.Element => {
const theme = useTheme();
return (
<Typography
component={'pre'}
color={'textPrimary'}
sx={{
pr: 2,
mb: 1,
display: 'flex',
backgroundColor: theme.vars.palette.background.default,
...theme.applyStyles('dark', {
backgroundColor: Colors.darkBlack[300],
}),
}}
{...props}
/>
);
},
code: (props: TypographyProps<'code'>): JSX.Element => {
const theme = useTheme();
return (
<Typography
component={'code'}
color={'inherit'}
sx={{
fontSize: '0.875rem',
p: '1rem',
},
}}
>
<table {...props} />
</Box>
),
m: '0px 2px',
p: '0px 5px',
whiteSpace: 'nowrap',
border: `1px solid ${theme.vars.palette.divider}`,
backgroundColor: theme.vars.palette.background.default,
...theme.applyStyles('dark', {
backgroundColor: Colors.darkBlack[300],
}),
borderRadius: '2px',
fontFamily: `'Roboto Mono', monospace`,
lineHeight: '1.6',
}}
{...props}
/>
);
},
inlineCode: (props: TypographyProps<'code'>): JSX.Element => {
const theme = useTheme();
return (
<Typography
component={'code'}
color={'textPrimary'}
sx={{
backgroundColor: theme.vars.palette.background.default,
fontFamily: `'Roboto Mono', monospace`,
...theme.applyStyles('dark', {
backgroundColor: Colors.darkBlack[300],
border: `${theme.vars.palette.divider} 1px solid`,
}),
}}
{...props}
/>
);
},
table: (props: TableProps): JSX.Element => {
const theme = useTheme();
return (
<Box
className="tableContainer"
sx={{
overflow: 'auto',
boxSizing: 'border-box',
mb: 2,
color: 'text.primary',

table: {
textAlign: 'left',
borderCollapse: 'collapse',
minWidth: '100%',
border: `1px solid ${theme.vars.palette.divider}`,
},
a: {
fontSize: '0.875rem',
},
tr: {
border: 'unset',
borderLeft: 0,
borderRight: 0,
borderBottom: `1px solid ${theme.vars.palette.divider}`,
},
th: {
border: 'unset',
borderLeft: 0,
borderRight: 0,
p: '1rem',
fontSize: '0.875rem',
borderBottom: `1px solid ${theme.vars.palette.divider}`,
},
'tr:last-of-type': {
borderBottom: 0,
},
thead: {
backgroundColor: Colors.white[100],
...theme.applyStyles('dark', {
backgroundColor: Colors.black[800],
}),
},
'tbody tr:nth-of-type(odd)': {
backgroundColor: 'background.paper',
},
'tbody tr:nth-of-type(even)': {
backgroundColor: Colors.white[100],
...theme.applyStyles('dark', {
backgroundColor: Colors.black[800],
}),
},
td: {
fontSize: '0.875rem',
p: '1rem',
},
}}
>
<table {...props} />
</Box>
);
},
};
26 changes: 13 additions & 13 deletions docs/src/componentDocs/DrawerHeader/markdown/DrawerHeaderAPIDocs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,19 @@ The `<DrawerHeader>` contains the content at the top of the `<Drawer>`. By defau

<Box>

| Prop Name | Description | Type | Required | Default |
| ----------------- | ---------------------------------------------- | --------------------- | -------- | ---------------------------- |
| backgroundColor | The color used for the background | `string` | no | `theme.palette.primary.main` |
| backgroundImage | An image to display in the header | `string` | no | |
| backgroundOpacity | The opacity of the background image | `number` | no | `0.3` |
| classes | Style overrides | `DrawerHeaderClasses` | no | |
| divider | Optional divider which appears beneath header | `boolean` | no | `false` |
| fontColor | The color of the text elements | `string` | no | dynamic based on background |
| icon | A component to render for the icon | `ReactNode` | no | |
| onIconClick | A function to execute when the icon is clicked | `function` | no | `() => {}` |
| subtitle | The text to show on the second line | `string` | no | |
| title | The text to show on the first line | `string` | no | |
| titleContent | Custom content for header title area | `ReactNode` | no | |
| Prop Name | Description | Type | Required | Default |
| ----------------- | ---------------------------------------------- | --------------------- | -------- | --------------------------------- |
| backgroundColor | The color used for the background | `string` | no | `theme.vars.palette.primary.main` |
| backgroundImage | An image to display in the header | `string` | no | |
| backgroundOpacity | The opacity of the background image | `number` | no | `0.3` |
| classes | Style overrides | `DrawerHeaderClasses` | no | |
| divider | Optional divider which appears beneath header | `boolean` | no | `false` |
| fontColor | The color of the text elements | `string` | no | dynamic based on background |
| icon | A component to render for the icon | `ReactNode` | no | |
| onIconClick | A function to execute when the icon is clicked | `function` | no | `() => {}` |
| subtitle | The text to show on the second line | `string` | no | |
| title | The text to show on the first line | `string` | no | |
| titleContent | Custom content for header title area | `ReactNode` | no | |

</Box>

Expand Down
28 changes: 14 additions & 14 deletions docs/src/componentDocs/ScoreCard/markdown/ScoreCardAPIDocs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,20 @@ Card component that calls attention to particular values.

<Box>

| Prop Name | Description | Type | Required | Default |
| :-------------------- | :------------------------------------------ | :----------------- | :------- | :--------------------------- |
| actionItems | Icons to show to the right of the text | `JSX.Element[]` | no | |
| actionLimit | Max number of actionItems in the header | `number` | no | 3 |
| actionRow | Component to render for the footer | `JSX.Element` | no | |
| badge | The component to render in the callout area | `JSX.Element` | no | |
| badgeOffset | Vertical offset for the badge component | `number` | no | 0 |
| classes | Style overrides | `ScoreCardClasses` | no | |
| headerBackgroundImage | An image to display in the header | `string` | no | |
| headerColor | The color of the header | `string` | no | `theme.palette.primary.main` |
| headerFontColor | The color for text and icons in header | `string` | no | `white` |
| headerInfo | Tertiary text | `string` | no | |
| headerTitle | The primary text | `string` | yes | |
| headerSubtitle | The secondary text | `string` | no | |
| Prop Name | Description | Type | Required | Default |
| :-------------------- | :------------------------------------------ | :----------------- | :------- | :-------------------------------- |
| actionItems | Icons to show to the right of the text | `JSX.Element[]` | no | |
| actionLimit | Max number of actionItems in the header | `number` | no | 3 |
| actionRow | Component to render for the footer | `JSX.Element` | no | |
| badge | The component to render in the callout area | `JSX.Element` | no | |
| badgeOffset | Vertical offset for the badge component | `number` | no | 0 |
| classes | Style overrides | `ScoreCardClasses` | no | |
| headerBackgroundImage | An image to display in the header | `string` | no | |
| headerColor | The color of the header | `string` | no | `theme.vars.palette.primary.main` |
| headerFontColor | The color for text and icons in header | `string` | no | `white` |
| headerInfo | Tertiary text | `string` | no | |
| headerTitle | The primary text | `string` | yes | |
| headerSubtitle | The secondary text | `string` | no | |

</Box>

Expand Down
1 change: 1 addition & 0 deletions docs/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { useAppSelector } from './redux/hooks';
import { MDXProvider } from '@mdx-js/react';
import { componentsMap } from './__configuration__/markdownMapping';
import { GoogleAnalyticsWrapper } from './router/GoogleAnalyticsWrapper';
import type {} from '@mui/material/themeCssVarsAugmentation';

// prismJs
import 'prismjs/components/prism-jsx.js';
Expand Down
20 changes: 14 additions & 6 deletions docs/src/layout/SharedAppBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,12 @@ import Divider from '@mui/material/Divider';
import Box from '@mui/material/Box';

// hooks
import { toggleDrawer } from '../redux/appState';
import { changeSiteTheme, toggleDrawer } from '../redux/appState';
// import { changeDirection } from '../redux/appState';
import { useAppDispatch, useAppSelector } from '../redux/hooks';
import { useColorScheme, useTheme } from '@mui/material/styles';
import { RootState } from '../redux/store';
import { SiteThemeType } from '../__types__';
// import { UIDirection } from '../__types__';

export type SharedAppBarProps = {
Expand Down Expand Up @@ -65,11 +66,18 @@ export const SharedAppBar: React.FC<SharedAppBarProps> = (props): JSX.Element =>

const { setMode } = useColorScheme();

const toggleThemeMode = (mode: 'light' | 'dark' | 'system' | null): void => {
if (setMode) {
setMode(mode ?? 'light');
}
};
const toggleThemeMode = React.useCallback(
(option: SiteThemeType): void => {
setMode(option);
dispatch(
changeSiteTheme({
siteTheme: option,
})
);
setThemeSelectorAnchorEl(null);
},
[dispatch]
);

// See hidden RTL site options below
// const onDirectionChange = React.useCallback(
Expand Down
Loading

0 comments on commit 875b17f

Please sign in to comment.