diff --git a/carbon-web-components/packages/carbon-web-components/.storybook/manager.js b/carbon-web-components/packages/carbon-web-components/.storybook/manager.js index 4e913e03469..52f56767ff2 100644 --- a/carbon-web-components/packages/carbon-web-components/.storybook/manager.js +++ b/carbon-web-components/packages/carbon-web-components/.storybook/manager.js @@ -11,3 +11,36 @@ import yourTheme from './theme'; addons.setConfig({ theme: yourTheme, }); + +/** + * Conditionally generate CSS to hide a component based on its corresponding + * feature flag environment variable. + * + * @param {*} envVar + * Environment variable to check. + * @param {*} cssId + * CSS ID for selector. + * @returns + */ +const getCss = (envVar, cssId) => { + return envVar !== 'true' + ? `button[id^="${cssId}"] { display: none !important; }\n` + : ''; +}; + +// Build string of CSS rules. +let css = ''; +if (!process.env.CDS_FLAGS_ALL) { + css += getCss( + process.env.CDS_EXPERIEMENTAL_COMPONENT_NAME, + 'components-experimental-component-name' + ); +} + +// Inject any CSS rules into the page. +if (css.length) { + const head = document.head || document.getElementsByTagName('head')[0]; + const style = document.createElement('style'); + head.appendChild(style); + style.appendChild(document.createTextNode(css)); +} diff --git a/carbon-web-components/packages/carbon-web-components/src/globals/internal/feature-flags.ts b/carbon-web-components/packages/carbon-web-components/src/globals/internal/feature-flags.ts new file mode 100644 index 00000000000..cb2cf5099a1 --- /dev/null +++ b/carbon-web-components/packages/carbon-web-components/src/globals/internal/feature-flags.ts @@ -0,0 +1,30 @@ +/** + * @license + * + * Copyright IBM Corp. 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +/** + * This file contains the list of the default values of compile-time feature flags. + */ + +/** + * This flag will determine if all feature flags should be enabled + * + * @type {boolean} + */ +export const CDS_FLAGS_ALL: boolean = + process!.env.CDS_FLAGS_ALL === 'true' || false; + +/** + * Enables experimental component + * + * @type {boolean} + */ +export const CDS_EXPERIEMENTAL_COMPONENT_NAME: boolean = + process!.env.CDS_EXPERIEMENTAL_COMPONENT_NAME === 'true' || + CDS_FLAGS_ALL || + false;