fix(featureflag): add dds prefix to react feature flags

Author: annawen1

packages/patterns-react/docs/feature-flags.md

@@ -44,7 +44,7 @@ For example:
 ```javascript
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FOOTER_LOCALE_BUTTON } from '../../internal/FeatureFlags.js';
+import { DDS_FOOTER_LOCALE_BUTTON } from '../../internal/FeatureFlags.js';
 import { featureFlag } from '@carbon/ibmdotcom-utilities';
 
 /**
@@ -64,7 +64,7 @@ feature flag:
 
 ```javascript
 import React from 'react';
-import { FOOTER_LOCALE_BUTTON } from '../../internal/FeatureFlags.js';
+import { DDS_FOOTER_LOCALE_BUTTON } from '../../internal/FeatureFlags.js';
 import { featureFlag } from '@carbon/ibmdotcom-utilities';
 import FeatureName from './FeatureName';
 

packages/react/.env.example

@@ -19,12 +19,13 @@ SCROLL_TRACKING=<boolean to enable scroll tracking, e.g. false>
 
 #Feature Flags
 DDS_FLAGS_ALL=<Boolean flag to turn on all feature flags>
-FOOTER_LOCALE_BUTTON=<Boolean flag to turn on/off the locale selector>
-BUTTON_GROUP=<Boolean flag to turn on/off the ButtonGroup component>
-CARD_LINK=<Boolean flag to turn on/off the CardLink component>
-MASTHEAD_L1=<Boolean flag to turn on/off the masthead L1>
-DDS_TOC=<Boolean flag to turn on/off the TableOfContents component>
+
+DDS_BUTTON_GROUP=<Boolean flag to turn on/off the ButtonGroup component>
+DDS_CARD_LINK=<Boolean flag to turn on/off the CardLink component>
+DDS_FOOTER_LOCALE_BUTTON=<Boolean flag to turn on/off the locale selector>
 DDS_LEADSPACE_CENTERED=<Boolean flag to turn on/off the LeadSpaceCentered component>
+DDS_MASTHEAD_L1=<Boolean flag to turn on/off the masthead L1>
+DDS_TOC=<Boolean flag to turn on/off the TableOfContents component>
 
 # Geolocation
 GEO_API=<endpoint for getting user country by geolocation>

packages/react/src/components/ButtonGroup/ButtonGroup.js

@@ -8,7 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'carbon-components-react';
 import { settings } from 'carbon-components';
-import { BUTTON_GROUP } from '../../internal/FeatureFlags';
+import { DDS_BUTTON_GROUP } from '../../internal/FeatureFlags';
 import {
   featureFlag,
   settings as ddsSettings,
@@ -29,7 +29,7 @@ const { prefix } = settings;
  */
 const ButtonGroup = ({ buttons }) => {
   return featureFlag(
-    BUTTON_GROUP,
+    DDS_BUTTON_GROUP,
     <ol
       className={`${prefix}--buttongroup`}
       data-autoid={`${stablePrefix}--button-group`}>

packages/react/src/components/ButtonGroup/README.md

@@ -100,7 +100,7 @@ To utilize the following features, set the following variable's to `true` within
 your `.env` file or your application build settings.
 
 ```
-BUTTON_GROUP=true
+DDS_BUTTON_GROUP=true
 ```
 
 > See

packages/react/src/components/ButtonGroup/__stories__/ButtonGroup.stories.js

@@ -5,11 +5,11 @@ import { ArrowRight20, ArrowDown20, Pdf20 } from '@carbon/icons-react';
 import '@carbon/grid/scss/grid.scss';
 import '../../../../../styles/scss/components/buttongroup/_buttongroup.scss';
 import readme from '../README.md';
-import { BUTTON_GROUP } from '../../../internal/FeatureFlags';
+import { DDS_BUTTON_GROUP } from '../../../internal/FeatureFlags';
 
 import ButtonGroup from '../ButtonGroup';
 
-if (BUTTON_GROUP) {
+if (DDS_BUTTON_GROUP) {
   storiesOf('ButtonGroup', module)
     .addDecorator(withKnobs)
     .addParameters({

packages/react/src/components/ButtonGroup/__tests__/ButtonGroup.test.js

@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import ButtonGroup from '../ButtonGroup';
 
 jest.mock('../../../internal/FeatureFlags', () => ({
-  BUTTON_GROUP: true,
+  DDS_BUTTON_GROUP: true,
 }));
 
 describe('<ButtonGroup />', () => {

packages/react/src/components/CardLink/CardLink.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { CARD_LINK } from '../../internal/FeatureFlags.js';
+import { DDS_CARD_LINK } from '../../internal/FeatureFlags.js';
 import { featureFlag } from '@carbon/ibmdotcom-utilities';
 
 import React from 'react';
@@ -30,7 +30,7 @@ const CardLink = ({ title, href, content, icon, className, ...props }) => {
   }
 
   return featureFlag(
-    CARD_LINK,
+    DDS_CARD_LINK,
     <ClickableTile
       data-autoid={`${stablePrefix}--card-link`}
       className={classNames(`${prefix}--card-link`, className)}

packages/react/src/components/CardLink/README.md

@@ -44,7 +44,7 @@ To utilize the following features, set the following variable's to `true` within
 your `.env` file or your application build settings.
 
 ```
-CARD_LINK=true
+DDS_CARD_LINK=true
 ```
 
 > See

packages/react/src/components/CardLink/__stories__/Card.stories.js

@@ -4,12 +4,12 @@ import { withKnobs, select, text } from '@storybook/addon-knobs';
 import { CardLink } from '../';
 import { ArrowRight20 } from '@carbon/icons-react';
 import readme from '../README.md';
-import { CARD_LINK } from '../../../internal/FeatureFlags';
+import { DDS_CARD_LINK } from '../../../internal/FeatureFlags';
 
 import '../../../../../styles/scss/components/card-link/index.scss';
 import '@carbon/grid/scss/index.scss';
 
-if (CARD_LINK) {
+if (DDS_CARD_LINK) {
   storiesOf('Card', module)
     .addDecorator(withKnobs)
     .addDecorator(Story => {

packages/react/src/components/CardLink/__tests__/CardLink.test.js

@@ -13,7 +13,7 @@ import { ArrowRight20 } from '@carbon/icons-react';
 require('../../../internal/FeatureFlags.js');
 
 jest.mock('../../../internal/FeatureFlags.js', () => ({
-  CARD_LINK: true,
+  DDS_CARD_LINK: true,
 }));
 
 const content = {

packages/react/src/components/DotcomShell/__stories__/DotcomShell.stories.js

@@ -6,7 +6,7 @@ import mastheadKnobs from '../../Masthead/__stories__/data/Masthead.stories.knob
 import readme from '../README.md';
 import '../../../../../styles/scss/components/dotcom-shell/_dotcom-shell.scss';
 import content from './data/content';
-import { MASTHEAD_L1 } from '../../../internal/FeatureFlags';
+import { DDS_MASTHEAD_L1 } from '../../../internal/FeatureFlags';
 
 const footer = {
   default: 'default',
@@ -21,7 +21,7 @@ storiesOf('Dotcom Shell', module)
     },
   })
   .add('Default', () => {
-    const mastheadL1Props = MASTHEAD_L1 && {
+    const mastheadL1Props = DDS_MASTHEAD_L1 && {
       title: text('Title', 'Stock Charts'),
       eyebrowText: text('Eyebrow text', 'Eyebrow'),
       eyebrowLink: text('Eyebrow link', '#'),

packages/react/src/components/Footer/LocaleButton.js

@@ -1,4 +1,4 @@
-import { FOOTER_LOCALE_BUTTON } from '../../internal/FeatureFlags.js';
+import { DDS_FOOTER_LOCALE_BUTTON } from '../../internal/FeatureFlags.js';
 import { featureFlag } from '@carbon/ibmdotcom-utilities';
 
 import React, { useState, useEffect } from 'react';
@@ -56,7 +56,7 @@ const LocaleButton = ({ selectItem }) => {
   };
 
   return featureFlag(
-    FOOTER_LOCALE_BUTTON,
+    DDS_FOOTER_LOCALE_BUTTON,
     <div className={`${prefix}--locale-btn__container`}>
       <Button
         data-autoid={`${stablePrefix}--locale-btn`}

packages/react/src/components/Footer/README.md

@@ -40,7 +40,7 @@ To utilize the following features, set the following variable's to `true` within
 your `.env` file or your application build settings.
 
 ```
-FOOTER_LOCALE_BUTTON=true
+DDS_FOOTER_LOCALE_BUTTON=true
 ```
 
 > See

packages/react/src/components/Footer/__tests__/LocaleButton.test.js

@@ -14,7 +14,7 @@ import mocklist from '../__data__/locale-list.json';
 require('../../../internal/FeatureFlags.js');
 
 jest.mock('../../../internal/FeatureFlags.js', () => ({
-  FOOTER_LOCALE_BUTTON: true,
+  DDS_FOOTER_LOCALE_BUTTON: true,
 }));
 
 jest.mock('@carbon/ibmdotcom-services', () => ({

packages/react/src/components/Masthead/Masthead.js

@@ -30,7 +30,7 @@ import MastheadProfile from './MastheadProfile';
 import MastheadLeftNav from './MastheadLeftNav';
 import MastheadTopNav from './MastheadTopNav';
 import cx from 'classnames';
-import { MASTHEAD_L1 } from '../../internal/FeatureFlags';
+import { DDS_MASTHEAD_L1 } from '../../internal/FeatureFlags';
 
 const { stablePrefix } = ddsSettings;
 const { prefix } = settings;
@@ -205,7 +205,7 @@ const Masthead = ({ navigation, hasProfile, hasSearch, ...mastheadProps }) => {
               )}
             </Header>
           </div>
-          {MASTHEAD_L1 && navigation && (
+          {DDS_MASTHEAD_L1 && navigation && (
             <div ref={mastheadL1Ref}>
               <MastheadL1
                 isShort={isMastheadSticky}

packages/react/src/components/Masthead/README.md

@@ -39,7 +39,7 @@ To utilize the following features, set the following variable's to `true` within
 your `.env` file or your application build settings.
 
 ```
-MASTHEAD_L1=true
+DDS_MASTHEAD_L1=true
 ```
 
 > See

packages/react/src/components/Masthead/__stories__/Masthead.stories.js

@@ -5,7 +5,7 @@ import Masthead from '../Masthead';
 import mastheadKnobs from './data/Masthead.stories.knobs.js';
 import readme from '../README.md';
 import '../../../../../styles/scss/components/masthead/index.scss';
-import { MASTHEAD_L1 } from '../../../internal/FeatureFlags';
+import { DDS_MASTHEAD_L1 } from '../../../internal/FeatureFlags';
 
 storiesOf('Masthead', module)
   .addDecorator(withKnobs)
@@ -29,7 +29,7 @@ storiesOf('Masthead', module)
       hasProfile: boolean('Has profile', true),
       hasSearch: boolean('Has search', true),
     };
-    const mastheadL1Props = MASTHEAD_L1 && {
+    const mastheadL1Props = DDS_MASTHEAD_L1 && {
       title: text('Title', 'Stock Charts'),
       eyebrowText: text('Eyebrow text', 'Eyebrow'),
       eyebrowLink: text('Eyebrow link', '#'),
@@ -57,7 +57,7 @@ storiesOf('Masthead', module)
       hasProfile: boolean('Has profile', true),
       hasSearch: boolean('Has search', true),
     };
-    const mastheadL1Props = MASTHEAD_L1 && {
+    const mastheadL1Props = DDS_MASTHEAD_L1 && {
       title: text('Title', 'Stock Charts'),
       eyebrowText: text('Eyebrow text', 'Eyebrow'),
       eyebrowLink: text('Eyebrow link', '#'),

packages/react/src/internal/FeatureFlags.js

@@ -21,31 +21,31 @@ export const DDS_FLAGS_ALL = process.env.DDS_FLAGS_ALL === 'true' || false;
  *
  * @type {boolean}
  */
-export const MASTHEAD_L1 =
-  process.env.MASTHEAD_L1 === 'true' || DDS_FLAGS_ALL || false;
+export const DDS_MASTHEAD_L1 =
+  process.env.DDS_MASTHEAD_L1 === 'true' || DDS_FLAGS_ALL || false;
 
 /**
  * This determines if the locale selector will be rendered or not
  *
  * @type {string | boolean}
  */
-export const FOOTER_LOCALE_BUTTON =
-  process.env.FOOTER_LOCALE_BUTTON === 'true' || DDS_FLAGS_ALL || false;
+export const DDS_FOOTER_LOCALE_BUTTON =
+  process.env.DDS_FOOTER_LOCALE_BUTTON === 'true' || DDS_FLAGS_ALL || false;
 
 /**
  * This flag turns on/off the ButtonGroup component
  *
  * @type {string | boolean}
  */
-export const BUTTON_GROUP =
-  process.env.BUTTON_GROUP === 'true' || DDS_FLAGS_ALL || false;
+export const DDS_BUTTON_GROUP =
+  process.env.DDS_BUTTON_GROUP === 'true' || DDS_FLAGS_ALL || false;
 
 /**
  * Feature flag for CardLink component
  * @type {boolean}
  */
-export const CARD_LINK =
-  process.env.CARD_LINK === 'true' || DDS_FLAGS_ALL || false;
+export const DDS_CARD_LINK =
+  process.env.DDS_CARD_LINK === 'true' || DDS_FLAGS_ALL || false;
 
 /**
  * This determines if the tableofcontents will be rendered or not

packages/utilities/src/utilities/featureflag/featureflag.js

@@ -6,7 +6,7 @@
  * @private
  * @returns {object} JSX object
  *
- * return featureFlag(FOOTER_LOCALE_BUTTON, <div>hello world</div>);
+ * return featureFlag(DDS_FOOTER_LOCALE_BUTTON, <div>hello world</div>);
  *
  */
 function featureFlag(flag, jsx) {