feat(feature-flags): implement feature flags for cwc (#11081)

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));
+}

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;