From 167ec9cfa94da327f44f35713415f33b43137495 Mon Sep 17 00:00:00 2001 From: Jon Cursi Date: Thu, 7 Mar 2024 00:16:11 -0400 Subject: [PATCH 01/45] BREAKING CHANGE: Rename MY_ENCOURA theme to ENCOURA --- .storybook/preview-head.html | 25 +++---------------- .storybook/preview.js | 2 +- README.md | 9 +++---- src/styles/index.ts | 2 +- .../colors.ts | 0 .../components.ts | 0 .../customDims.ts | 0 .../{themeMyEncoura => themeEncoura}/index.ts | 8 +++--- .../palette.ts | 0 .../typography.ts | 0 10 files changed, 14 insertions(+), 32 deletions(-) rename src/styles/{themeMyEncoura => themeEncoura}/colors.ts (100%) rename src/styles/{themeMyEncoura => themeEncoura}/components.ts (100%) rename src/styles/{themeMyEncoura => themeEncoura}/customDims.ts (100%) rename src/styles/{themeMyEncoura => themeEncoura}/index.ts (89%) rename src/styles/{themeMyEncoura => themeEncoura}/palette.ts (100%) rename src/styles/{themeMyEncoura => themeEncoura}/typography.ts (100%) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 0e47826f..312ec157 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,26 +1,5 @@ - - + + diff --git a/.storybook/preview.js b/.storybook/preview.js index 2de7d18f..a6b691c2 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -81,7 +81,7 @@ export const globalTypes = { name: 'Theme', toolbar: { icon: 'paintbrush', - items: ['ACT', 'ACT_ET', 'ENCOURA_CLASSIC', 'ENCOURAGE'], + items: ['ACT', 'ACT_ET', 'ENCOURA', 'ENCOURA_CLASSIC', 'ENCOURAGE'], }, }, language: { diff --git a/README.md b/README.md index 920c3a74..16a59eb1 100644 --- a/README.md +++ b/README.md @@ -37,9 +37,9 @@ Material UI, and ships with several themes out of the box: 1. `"ACT"`: for ACT's "traditional" look and feel 2. `"ACT_ET"`: for ACT's "Emerging Technology" look and feel -3. `"ENCOURA_CLASSIC"`: for Encoura's "Classic" look and feel -4. `"ENCOURAGE"`: for the Encoura's "Encourage" look and feel -5. `"MY_ENCOURA"`: for the Encoura's "MyEncoura" look and feel +3. `"ENCOURA"`: for the Encoura's "MyEncoura" look and feel +4. `"ENCOURA_CLASSIC"`: for Encoura's "Classic" look and feel +5. `"ENCOURAGE"`: for the Encoura's "Encourage" look and feel To apply one of these themes to your components, simply wrap your application in the `ThemeProvider` component and specify a theme! @@ -140,7 +140,7 @@ reference in the `head` of your React app: #### Museo Sans -The `ENCOURA_CLASSIC` and `MY_ENCOURA` theme assumes that the +The `ENCOURA` and `ENCOURA_CLASSIC` themes assume that the [Museo Sans](https://fonts.adobe.com/fonts/museo-sans) font is available in the browser. Include this embed code in the `head` of your React app after obtaining the licensed font URL from Marketing: @@ -149,7 +149,6 @@ of your React app after obtaining the licensed font URL from Marketing: - ``` #### Work Sans, Roboto, Roboto Mono diff --git a/src/styles/index.ts b/src/styles/index.ts index 6ed68c42..590fbb4a 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -10,7 +10,7 @@ export * from './createTheme'; export { default as THEME_ACT } from './themeAct'; export { default as THEME_ACT_ET } from './themeActEt'; +export { default as THEME_ENCOURA } from './themeEncoura'; export { default as THEME_ENCOURA_CLASSIC } from './themeEncouraClassic'; export { default as THEME_ENCOURAGE } from './themeEncourage'; -export { default as THEME_MY_ENCOURA } from './themeMyEncoura'; export * from './themes'; diff --git a/src/styles/themeMyEncoura/colors.ts b/src/styles/themeEncoura/colors.ts similarity index 100% rename from src/styles/themeMyEncoura/colors.ts rename to src/styles/themeEncoura/colors.ts diff --git a/src/styles/themeMyEncoura/components.ts b/src/styles/themeEncoura/components.ts similarity index 100% rename from src/styles/themeMyEncoura/components.ts rename to src/styles/themeEncoura/components.ts diff --git a/src/styles/themeMyEncoura/customDims.ts b/src/styles/themeEncoura/customDims.ts similarity index 100% rename from src/styles/themeMyEncoura/customDims.ts rename to src/styles/themeEncoura/customDims.ts diff --git a/src/styles/themeMyEncoura/index.ts b/src/styles/themeEncoura/index.ts similarity index 89% rename from src/styles/themeMyEncoura/index.ts rename to src/styles/themeEncoura/index.ts index d202444a..26ef2b62 100644 --- a/src/styles/themeMyEncoura/index.ts +++ b/src/styles/themeEncoura/index.ts @@ -9,19 +9,19 @@ import deepMerge from 'deepmerge'; -import THEME_ENCOURA_CLASSIC from '~/styles/themeEncouraClassic'; import { createTheme } from '~/styles/createTheme'; +import THEME_ENCOURA_CLASSIC from '~/styles/themeEncouraClassic'; import { CustomThemeOptions } from '~/types'; -import COMPONENTS from './components'; import COLORS, { CustomColorOptions } from './colors'; +import COMPONENTS from './components'; import CUSTOM_DIMS from './customDims'; import PALETTE from './palette'; import TYPOGRAPHY from './typography'; export type MyEncouraCustomTheme = CustomThemeOptions; -export const THEME_MY_ENCOURA: MyEncouraCustomTheme = deepMerge( +export const THEME_ENCOURA: MyEncouraCustomTheme = deepMerge( THEME_ENCOURA_CLASSIC, { // Theme customizations to distinguish MyEncoura from @@ -34,4 +34,4 @@ export const THEME_MY_ENCOURA: MyEncouraCustomTheme = deepMerge( }, ); -export default createTheme(THEME_MY_ENCOURA); +export default createTheme(THEME_ENCOURA); diff --git a/src/styles/themeMyEncoura/palette.ts b/src/styles/themeEncoura/palette.ts similarity index 100% rename from src/styles/themeMyEncoura/palette.ts rename to src/styles/themeEncoura/palette.ts diff --git a/src/styles/themeMyEncoura/typography.ts b/src/styles/themeEncoura/typography.ts similarity index 100% rename from src/styles/themeMyEncoura/typography.ts rename to src/styles/themeEncoura/typography.ts From 8374971fba0c4855a24a2e0ad5a6fb5c731dbc55 Mon Sep 17 00:00:00 2001 From: Jon Cursi Date: Thu, 7 Mar 2024 00:18:42 -0400 Subject: [PATCH 02/45] feat: Add support for ENCOURA theme in ThemeProvider --- .../__snapshots__/index.test.tsx.snap | 43 +++++++++++++++++++ .../__snapshots__/index.test.tsx.snap | 8 ++++ src/components/ThemeProvider/index.tsx | 9 +++- .../__snapshots__/index.test.tsx.snap | 10 +++++ src/helpers/test/themes.ts | 9 ++-- 5 files changed, 72 insertions(+), 7 deletions(-) diff --git a/src/components/RenderMetaTags/__snapshots__/index.test.tsx.snap b/src/components/RenderMetaTags/__snapshots__/index.test.tsx.snap index f705648f..026d91dc 100644 --- a/src/components/RenderMetaTags/__snapshots__/index.test.tsx.snap +++ b/src/components/RenderMetaTags/__snapshots__/index.test.tsx.snap @@ -86,6 +86,49 @@ exports[`RenderMetaTagsBase ACT_ET theme matches the snapshot 1`] = ` `; +exports[`RenderMetaTagsBase ENCOURA theme matches the snapshot 1`] = ` +
+ + + + + + + + Some Title + + + +
+`; + exports[`RenderMetaTagsBase ENCOURA_CLASSIC theme matches the snapshot 1`] = `
`; +exports[`ThemeProvider ENCOURA theme matches the snapshot 1`] = ` +
+

+ This is a test +

+
+`; + exports[`ThemeProvider ENCOURA_CLASSIC theme matches the snapshot 1`] = `

diff --git a/src/components/ThemeProvider/index.tsx b/src/components/ThemeProvider/index.tsx index 1d744504..69c2d0b4 100644 --- a/src/components/ThemeProvider/index.tsx +++ b/src/components/ThemeProvider/index.tsx @@ -19,11 +19,12 @@ import { FC, ReactElement } from 'react'; import { THEME_ACT } from '~/styles/themeAct'; import { THEME_ACT_ET } from '~/styles/themeActEt'; +import { THEME_ENCOURA } from '~/styles/themeEncoura'; import { THEME_ENCOURA_CLASSIC } from '~/styles/themeEncouraClassic'; import { THEME_ENCOURAGE } from '~/styles/themeEncourage'; export interface ThemeProviderProps extends MuiThemeProviderProps { - theme: 'ACT' | 'ACT_ET' | 'ENCOURA_CLASSIC' | 'ENCOURAGE' | Theme; + theme: 'ACT' | 'ACT_ET' | 'ENCOURA' | 'ENCOURA_CLASSIC' | 'ENCOURAGE' | Theme; locale?: | 'azAZ' | 'bgBG' @@ -78,6 +79,12 @@ export const ThemeProvider: FC = ({ locale ? locales[locale] : locales.enUS, ); break; + case 'ENCOURA': + themeImpl = createTheme( + THEME_ENCOURA, + locale ? locales[locale] : locales.enUS, + ); + break; case 'ENCOURA_CLASSIC': themeImpl = createTheme( THEME_ENCOURA_CLASSIC, diff --git a/src/components/_muiCore/DialogContent/__snapshots__/index.test.tsx.snap b/src/components/_muiCore/DialogContent/__snapshots__/index.test.tsx.snap index fffda2f3..336fb055 100644 --- a/src/components/_muiCore/DialogContent/__snapshots__/index.test.tsx.snap +++ b/src/components/_muiCore/DialogContent/__snapshots__/index.test.tsx.snap @@ -20,6 +20,16 @@ exports[`DialogContent ACT_ET theme matches the snapshot 1`] = `

`; +exports[`DialogContent ENCOURA theme matches the snapshot 1`] = ` +
+
+ Hey +
+
+`; + exports[`DialogContent ENCOURA_CLASSIC theme matches the snapshot 1`] = `
Date: Thu, 7 Mar 2024 00:22:18 -0400 Subject: [PATCH 03/45] test: Add snapshot tests for all components with the ENCOURA theme --- .../Alert/__snapshots__/index.test.tsx.snap | 35 ++ .../__snapshots__/index.test.tsx.snap | 52 +++ .../__snapshots__/index.test.tsx.snap | 2 + .../__snapshots__/index.test.tsx.snap | 391 ++++++++++++++++++ .../Dialog/__snapshots__/index.test.tsx.snap | 6 + .../__snapshots__/index.test.tsx.snap | 37 ++ .../__snapshots__/index.test.tsx.snap | 42 ++ .../__snapshots__/index.test.tsx.snap | 34 ++ .../__snapshots__/index.test.tsx.snap | 53 +++ .../__snapshots__/index.test.tsx.snap | 136 +++++- .../__snapshots__/index.test.tsx.snap | 68 +++ .../__snapshots__/index.test.tsx.snap | 40 ++ .../__snapshots__/index.test.tsx.snap | 120 ++++++ .../__snapshots__/index.test.tsx.snap | 23 ++ .../Loading/__snapshots__/index.test.tsx.snap | 37 ++ .../__snapshots__/index.test.tsx.snap | 75 ++++ .../__snapshots__/index.test.tsx.snap | 176 +++++++- .../AppBar/__snapshots__/index.test.tsx.snap | 8 + .../__snapshots__/index.test.tsx.snap | 76 ++++ .../Button/__snapshots__/index.test.tsx.snap | 15 + .../__snapshots__/index.test.tsx.snap | 11 + .../__snapshots__/index.test.tsx.snap | 29 ++ .../__snapshots__/index.test.tsx.snap | 19 + .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 10 + .../__snapshots__/index.test.tsx.snap | 10 + .../Drawer/__snapshots__/index.test.tsx.snap | 6 + .../Fab/__snapshots__/index.test.tsx.snap | 26 ++ .../__snapshots__/index.test.tsx.snap | 26 ++ .../Link/__snapshots__/index.test.tsx.snap | 14 + .../__snapshots__/index.test.tsx.snap | 28 ++ .../Paper/__snapshots__/index.test.tsx.snap | 10 + .../Radio/__snapshots__/index.test.tsx.snap | 44 ++ .../Rating/__snapshots__/index.test.tsx.snap | 15 + .../Select/__snapshots__/index.test.tsx.snap | 50 +++ .../Slider/__snapshots__/index.test.tsx.snap | 46 +++ .../Switch/__snapshots__/index.test.tsx.snap | 27 ++ .../__snapshots__/index.test.tsx.snap | 40 ++ .../Toolbar/__snapshots__/index.test.tsx.snap | 8 + .../Tooltip/__snapshots__/index.test.tsx.snap | 18 + .../__snapshots__/index.test.tsx.snap | 10 + 41 files changed, 1866 insertions(+), 9 deletions(-) diff --git a/src/components/Alert/__snapshots__/index.test.tsx.snap b/src/components/Alert/__snapshots__/index.test.tsx.snap index 38ad7379..429c03b3 100644 --- a/src/components/Alert/__snapshots__/index.test.tsx.snap +++ b/src/components/Alert/__snapshots__/index.test.tsx.snap @@ -70,6 +70,41 @@ exports[`Alert ACT_ET theme matches the snapshot 1`] = `
`; +exports[`Alert ENCOURA theme matches the snapshot 1`] = ` +
+ +
+`; + exports[`Alert ENCOURA_CLASSIC theme matches the snapshot 1`] = `
`; +exports[`AppBarNavigation ENCOURA theme matches the snapshot 1`] = ` + +`; + exports[`AppBarNavigation ENCOURA_CLASSIC theme matches the snapshot 1`] = `
`; exports[`ConfirmationDialog ACT_ET theme matches the snapshot 1`] = `
`; +exports[`ConfirmationDialog ENCOURA theme matches the snapshot 1`] = `
`; + exports[`ConfirmationDialog ENCOURA_CLASSIC theme matches the snapshot 1`] = `
`; exports[`ConfirmationDialog ENCOURAGE theme matches the snapshot 1`] = `
`; diff --git a/src/components/DataTable/__snapshots__/index.test.tsx.snap b/src/components/DataTable/__snapshots__/index.test.tsx.snap index eed59287..2117a760 100644 --- a/src/components/DataTable/__snapshots__/index.test.tsx.snap +++ b/src/components/DataTable/__snapshots__/index.test.tsx.snap @@ -782,6 +782,397 @@ exports[`DataTable ACT_ET theme matches the snapshot 1`] = `
`; +exports[`DataTable ENCOURA theme matches the snapshot 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ ID +

+
+ + +
+ 		+

+ Name +

+
+ + +
+ 		+

+ Field A +

+
+ + +
+ 		+

+ Field B +

+
+ + +
+ 		+

+ Field C +

+
+ + +
+
+ 1 + + Item 1 + + Field A1 + + Field B1 + + Field C1 +
+ 2 + + Item 2 + + Field A2 + + Field B2 + + Field C2 +
+ 3 + + Item 3 + + Field A3 + + Field B3 + + Field C3 +
+ 4 + + Item 4 + + Field A4 + + Field B4 + + Field C4 +
+ 5 + + Item 5 + + Field A5 + + Field B5 + + Field C5 +
+
+
+`; + exports[`DataTable ENCOURA_CLASSIC theme matches the snapshot 1`] = `
`; +exports[`Dialog ENCOURA theme matches the snapshot 1`] = ` +