[terra-dev-site-v7] Use `TERRA_THEME_CONFIG` for dev site theming config #303

mjhenkes · 2020-09-16T17:32:44Z

Summary

The available themes are now pulled from the terra-theme.config file via the webpack global variable TERRA_THEME_CONFIG.
- As a result, themes has been removed from site config.
- TERRA_THEME_CONFIG is only available in terra-toolkit v6.1.0.
locales has been removed from site config. As of 6.23 Locales are pulled from the global TERRA_AGGREGATED_LOCALES variable provided by terra-toolkit v5.21.0.

Related to: #294

Deployment Link

https://terra-dev-site-deployed-pr-#.herokuapp.com/

Testing

Additional Details

Thank you for contributing to Terra.
@cerner/terra

mjhenkes · 2020-09-16T17:34:20Z

babel.config.js

    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-transform-object-assign',
+    '@babel/plugin-transform-regenerator',
+    '@babel/plugin-transform-runtime',


added to allow the use of async/await in jest

mjhenkes · 2020-09-16T17:34:37Z

dev-site-config/site.config.js

@@ -5,21 +5,13 @@ const html = fs.readFileSync(require.resolve('./head.html'), 'utf8');

 const siteConfig = {
  navConfig,
-  sideEffectImports: ['./terra-dev-site-test-theme.scss'],


removed this test theme

mjhenkes · 2020-09-16T17:35:12Z

package.json

@@ -148,14 +148,16 @@
  "peerDependencies": {
    "react-dom": "^16.8.5",
    "react": "^16.8.5",
-    "terra-toolkit": "^5.21.0 || ^6.0.0",
+    "terra-toolkit": "^6.1.0",


Bumped to ensure TERRA_THEME_CONFIG available

mjhenkes · 2020-09-16T17:35:32Z

scripts/generate-app-config/generateSettingsConfig.js

@@ -9,11 +9,8 @@ const generateUtilitiesConfig = (appConfig) => {
  // build out the menu items for themes, locals, and bidi.
  const config = {
    defaultTheme: appConfig.defaultTheme,
-    themes: appConfig.themes || {},


Now defaulted in _AppSettingsProvider

mjhenkes · 2020-09-16T17:35:56Z

src/navigation/_AppSettingsProvider.jsx

+const scopedThemes = themesConfig?.scoped || [];
+const defaultThemeName = themesConfig?.theme || 'terra-default-theme';
+
+const themesMap = {


Map theme name to css class... generally one to one except for the default theme

mjhenkes · 2020-09-16T17:36:18Z

src/navigation/_AppSettingsProvider.jsx

  } = settingsConfig;

-  if (Array.isArray(settingsConfig.locales) && settingsConfig.locales.length !== 0) {
-    // eslint-disable-next-line no-console
-    console.warn('Locale configurations are deprecated as of terra-dev-site v6.23.0. You may remove this setting from your configuration files.');


removed warning, from last mvb

mjhenkes · 2020-09-16T17:38:56Z

tests/wdio/utilities-spec.js

@@ -26,8 +26,6 @@ Terra.describeViewports('utilities', ['huge'], () => {
    browser.click('#terra-dev-site-locale-select');
    browser.click('#terra-select-option-en-AU');

-    browser.click('#terra-dev-site-theme-select');


Removed, now that we're relying on the TERRA_THEME_CONFIG global, it changes the available themes when tests are run with an override theme. So this select menu is not reliably available for all tests.

emilyrohrbough · 2020-09-16T17:48:44Z

config/site/site.config.js

+    // defaultTheme: 'terra-default-theme',

    /* The default locale of the site. 'en' is the default theme. */
-    defaultLocale: 'en',
+    // defaultLocale: 'en',

    /* The default direction of the site. 'ltr' is the default direction. */
-    defaultDirection: 'ltr',
+    // defaultDirection: 'ltr',


It's still valid for people to set a default theme, locale or direction through the site.config.js, but they don't have to.... i left that there because this file doubles as our documentation.

Should we add a little more info around where this default config comes from? The fact its setup in webpack is probably a little hidden

Good point, I'll add some more documentation.

Added here: 7f3377d

emilyrohrbough · 2020-09-16T17:50:30Z

src/navigation/_SettingsPicker.jsx

  const appSettings = React.useContext(AppSettingsContext);
  const [state, setState] = useState({ locale: appSettings.currentLocale, theme: appSettings.currentTheme, direction: appSettings.currentDirection });
  const {
    locale, theme, direction,
  } = state;
-  const themes = Object.keys(config.themes);
+  const { themes } = appSettings;


can we extract directions here as well?

yeah, and locales too

emilyrohrbough · 2020-09-16T17:52:53Z

src/navigation/_AppSettingsProvider.jsx

+  */
+const locales = typeof TERRA_AGGREGATED_LOCALES === 'object' ? TERRA_AGGREGATED_LOCALES : ['en'];
+const themesConfig = typeof TERRA_THEME_CONFIG === 'object' ? TERRA_THEME_CONFIG : {};
+const scopedThemes = themesConfig?.scoped || [];


Do we need optional chaining if we are defaulting to {}?

if typeof TERRA_THEME_CONFIG === 'object' could be either an object or array, does the opitonal chaining handle this gracefully?

no, i suppose not.

…config into site config

src/terra-dev-site/tool/terra-dev-site/about.a.tool.mdx

src/terra-dev-site/tool/terra-dev-site/configuration.b.tool.mdx

add "a"

Use TERRA_THEME_CONFIG for dev site theming

5ed8dde

mjhenkes added the v7 label Sep 16, 2020

mjhenkes requested review from dkasper-was-taken, emilyrohrbough, ryanthemanuel and tbiethman as code owners September 16, 2020 17:32

mjhenkes self-assigned this Sep 16, 2020

mjhenkes temporarily deployed to terra-dev-si-use-terra--xpvyga September 16, 2020 17:32 Inactive

mjhenkes mentioned this pull request Sep 16, 2020

terra-dev-site v7 #294

Open

10 tasks

mjhenkes commented Sep 16, 2020

View reviewed changes

emilyrohrbough reviewed Sep 16, 2020

View reviewed changes

pr updates

dc564a5

mjhenkes temporarily deployed to terra-dev-si-use-terra--xpvyga September 16, 2020 17:56 Inactive

Documentation updates, add a placeholder upgrade guide. collapse nav …

7f3377d

…config into site config

mjhenkes temporarily deployed to terra-dev-si-use-terra--xpvyga September 17, 2020 16:31 Inactive

Test updates related to adding the new upgrade guide

7b55e58

mjhenkes temporarily deployed to terra-dev-si-use-terra--xpvyga September 17, 2020 17:33 Inactive

emilyrohrbough approved these changes Sep 17, 2020

View reviewed changes

mjhenkes commented Sep 18, 2020

View reviewed changes

src/terra-dev-site/tool/terra-dev-site/about.a.tool.mdx Outdated Show resolved Hide resolved

Update src/terra-dev-site/tool/terra-dev-site/about.a.tool.mdx

bc2fdea

mjhenkes temporarily deployed to terra-dev-si-use-terra--xpvyga September 18, 2020 14:35 Inactive

yuderekyu reviewed Sep 18, 2020

View reviewed changes

src/terra-dev-site/tool/terra-dev-site/configuration.b.tool.mdx Outdated Show resolved Hide resolved

Update src/terra-dev-site/tool/terra-dev-site/configuration.b.tool.mdx

3f5c58e

add "a"

mjhenkes temporarily deployed to terra-dev-si-use-terra--xpvyga September 18, 2020 18:50 Inactive

yuderekyu approved these changes Sep 18, 2020

View reviewed changes

mjhenkes merged commit ea97107 into terra-dev-site-v7 Sep 18, 2020

mjhenkes deleted the use-terra-theme-config branch September 18, 2020 19:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[terra-dev-site-v7] Use `TERRA_THEME_CONFIG` for dev site theming config #303

[terra-dev-site-v7] Use `TERRA_THEME_CONFIG` for dev site theming config #303

mjhenkes commented Sep 16, 2020 •

edited

Loading

mjhenkes Sep 16, 2020

mjhenkes Sep 16, 2020

mjhenkes Sep 16, 2020

mjhenkes Sep 16, 2020

mjhenkes Sep 16, 2020

mjhenkes Sep 16, 2020

mjhenkes Sep 16, 2020

emilyrohrbough Sep 16, 2020

mjhenkes Sep 16, 2020

emilyrohrbough Sep 16, 2020

mjhenkes Sep 16, 2020

mjhenkes Sep 17, 2020

emilyrohrbough Sep 16, 2020

mjhenkes Sep 16, 2020

emilyrohrbough Sep 16, 2020

mjhenkes Sep 16, 2020

[terra-dev-site-v7] Use TERRA_THEME_CONFIG for dev site theming config #303

[terra-dev-site-v7] Use TERRA_THEME_CONFIG for dev site theming config #303

Conversation

mjhenkes commented Sep 16, 2020 • edited Loading

Summary

Deployment Link

Testing

Additional Details

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

[terra-dev-site-v7] Use `TERRA_THEME_CONFIG` for dev site theming config #303

[terra-dev-site-v7] Use `TERRA_THEME_CONFIG` for dev site theming config #303

mjhenkes commented Sep 16, 2020 •

edited

Loading