chore: fix more conflicts

packages/cloud-cognitive/README.md

@@ -121,10 +121,9 @@ pkg.component.SidePanel = true;
 // Live dangerously: enable all components!
 pkg.setAllComponents(true);
 
-// Enable a feature flagged examples
+// Enable a feature flagged example
 pkg.feature.nameOfFeature = true;
 pkg.feature['Component.feature'] = true;
-
 // Live dangerously: enable all pre-release features!
 pkg.setAllFeatures(true);
 ```

packages/cloud-cognitive/src/components/DataSpreadsheet/DataSpreadsheet.test.js

@@ -25,6 +25,8 @@ const onSelectionAreaChangeFn = jest.fn();
 // values to use
 const className = `class-${uuidv4()}`;
 const dataTestId = uuidv4();
+// eslint-disable-next-line no-unused-vars
+const bigData = generateData({ rows: 1, extraColumns: true }); // for coverage;
 const data = generateData({ rows: 16 });
 const defaultProps = {
   columns: [
@@ -56,6 +58,7 @@ const defaultProps = {
   data,
   selectAllAriaLabel: 'Select all',
   spreadsheetAriaLabel: 'Example data spreadsheet',
+  cellSize: 'sm',
 };
 
 describe(componentName, () => {
@@ -98,6 +101,7 @@ describe(componentName, () => {
     render(
       <DataSpreadsheet
         {...defaultProps}
+        cellSize="xs"
         ref={ref}
         onActiveCellChange={activeCellChangeFn}
       />
@@ -123,11 +127,12 @@ describe(componentName, () => {
 
   it('should select an entire row, adding a selection area', () => {
     const ref = React.createRef();
-    const { click } = userEvent;
+    const { click, tab, keyboard } = userEvent;
     const activeCellChangeFn = jest.fn();
     render(
       <DataSpreadsheet
         {...defaultProps}
+        cellSize="md"
         ref={ref}
         onActiveCellChange={activeCellChangeFn}
       />
@@ -140,17 +145,22 @@ describe(componentName, () => {
       `.${blockClass}__selection-area--element`
     );
     expect(selectionArea).toBeInTheDocument();
+
+    // for coverage
+    tab();
+    keyboard('{Enter}');
   });
 
   it('should select an entire column, adding a selection area, and reorder columns', () => {
     const ref = React.createRef();
-    const { click } = userEvent;
+    const { click, keyboard } = userEvent;
     const { mouseMove, mouseDown, mouseUp } = fireEvent;
     const activeCellChangeFn = jest.fn();
     const onSelectionAreaChangeFn = jest.fn();
     render(
       <DataSpreadsheet
         {...defaultProps}
+        cellSize="lg"
         ref={ref}
         onActiveCellChange={activeCellChangeFn}
         onSelectionAreaChange={onSelectionAreaChangeFn}
@@ -185,11 +195,14 @@ describe(componentName, () => {
     expect(firstColumnHeaderText).not.toEqual(
       firstColumnHeaderTextAfterReorder
     );
+
+    // for coverage
+    keyboard('{Enter}');
   });
 
   it('should select all cells when clicking on select all cell button', () => {
     const ref = React.createRef();
-    const { click } = userEvent;
+    const { click, keyboard } = userEvent;
     render(
       <DataSpreadsheet
         {...defaultProps}
@@ -212,6 +225,11 @@ describe(componentName, () => {
     expect(selectionArea).toBeInTheDocument();
     expect(activeCell).toBeInTheDocument();
     expect(onSelectionAreaChangeFn).toHaveBeenCalledTimes(1);
+
+    // coverage
+    click(selectAllButton);
+    keyboard('{Enter>10/}');
+    keyboard('{Tab>10/}');
   });
 
   const EmptySpreadsheet = forwardRef(({ ...rest }, ref) => {
@@ -424,6 +442,11 @@ describe(componentName, () => {
     expect(
       parseInt(activeCellElement.getAttribute('data-active-column-index'))
     ).toEqual(defaultProps.columns.length - 1);
+
+    // coverage
+    keyboard('{Home}');
+    keyboard('{ArrowLeft}');
+    keyboard('{Delete}');
   });
 
   it('should remove spreadsheet focus using tab key', () => {

packages/cloud-cognitive/src/components/ExampleComponent/ExampleComponent.js

@@ -6,12 +6,13 @@
  */
 
 // Import portions of React that are needed.
-import React from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
+import useExample from './useExample';
 
 // Carbon and package components we use.
 import { Button, ButtonSet } from 'carbon-components-react';
@@ -41,12 +42,14 @@ export let ExampleComponent = React.forwardRef(
       boxedBorder,
       className,
       disabled,
+      usesExampleHook,
       onPrimaryClick,
       onSecondaryClick,
       primaryButtonLabel,
       primaryKind = defaults.primaryKind,
       secondaryButtonLabel,
       secondaryKind = defaults.secondaryKind,
+      secondaryIcon,
       size = defaults.size,
       style,
 
@@ -55,6 +58,10 @@ export let ExampleComponent = React.forwardRef(
     },
     ref
   ) => {
+    const [thePrimaryButtonLabel, setThePrimaryButtonLabel] =
+      useState(primaryButtonLabel);
+    const [exampleUse] = useExample(usesExampleHook);
+
     const modeClass = boxedBorder
       ? `${blockClass}--boxed-set`
       : `${blockClass}--shadow-set`;
@@ -71,6 +78,26 @@ export let ExampleComponent = React.forwardRef(
       }
     };
 
+    const theSecondaryIcon = useRef(
+      secondaryIcon &&
+        pkg.checkReportFeatureEnabled('ExampleComponent.secondaryIcon')
+        ? secondaryIcon
+        : null
+    );
+
+    useEffect(() => {
+      if (
+        usesExampleHook !== undefined &&
+        pkg.checkReportFeatureEnabled('ExampleComponent.useExample')
+      ) {
+        setThePrimaryButtonLabel(
+          `${primaryButtonLabel} ${exampleUse.toFixed(1)}s`
+        );
+      } else {
+        setThePrimaryButtonLabel(primaryButtonLabel);
+      }
+    }, [primaryButtonLabel, usesExampleHook, exampleUse]);
+
     return (
       <ButtonSet
         {
@@ -97,6 +124,7 @@ export let ExampleComponent = React.forwardRef(
           className={`${blockClass}__secondary-button`}
           kind={secondaryKind}
           onClick={handleSecondaryClick}
+          renderIcon={theSecondaryIcon.current}
           {...{ disabled, size }}
         >
           {secondaryButtonLabel}
@@ -107,7 +135,7 @@ export let ExampleComponent = React.forwardRef(
           onClick={handlePrimaryClick}
           {...{ disabled, size }}
         >
-          {primaryButtonLabel}
+          {thePrimaryButtonLabel}
         </Button>
       </ButtonSet>
     );
@@ -171,9 +199,13 @@ ExampleComponent.propTypes = {
   secondaryButtonLabel: PropTypes.string.isRequired,
 
   /**
-   * The kind of button for the secondary button ('secondary' or 'tertiary').
+   * The icon to use for the secondary button.
    */
-  secondaryKind: PropTypes.oneOf(['secondary', 'tertiary']),
+  secondaryIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * The kind of button for the secondary button ('secondary' or 'tertiary').
+   */ secondaryKind: PropTypes.oneOf(['secondary', 'tertiary']),
 
   /**
    * The size for the buttons ('default', 'small' or 'field').
@@ -184,4 +216,9 @@ ExampleComponent.propTypes = {
    * Optional style settings for the containing node.
    */
   style: PropTypes.object,
+
+  /**
+   * Hook example timeout (in seconds) or undefined
+   */
+  usesExampleHook: PropTypes.number,
 };

packages/cloud-cognitive/src/components/ExampleComponent/ExampleComponent.stories.js

@@ -6,6 +6,7 @@
  */
 import React from 'react';
 import { action } from '@storybook/addon-actions';
+import { Add16 } from '@carbon/icons-react';
 
 import {
   getStoryTitle,
@@ -14,6 +15,7 @@ import {
 
 import { ExampleComponent } from '.';
 import mdx from './ExampleComponent.mdx';
+import { pkg } from '../../settings';
 
 import styles from './_storybook-styles.scss';
 
@@ -31,7 +33,15 @@ export default {
   },
 };
 
-const Template = (args) => {
+const Template = ({ featureFlags, ...args }) => {
+  if (featureFlags) {
+    pkg._silenceWarnings(false); // warnings are ordinarily silenced in storybook, add this to test.
+    Object.keys(featureFlags).forEach((flagKey) => {
+      pkg.feature[flagKey] = featureFlags[flagKey];
+    });
+    pkg._silenceWarnings(true);
+  }
+
   return (
     <ExampleComponent
       primaryButtonLabel="Primary"
@@ -54,3 +64,48 @@ export const boxedSet = prepareStory(Template, {
     boxedBorder: true,
   },
 });
+
+export const featureFlagSecondaryIconFalse = prepareStory(Template, {
+  args: {
+    ...exampleComponent.args,
+    secondaryIcon: Add16,
+    featureFlags: { ['ExampleComponent.secondaryIcon']: false },
+  },
+});
+
+export const featureFlagSecondaryIconTrue = prepareStory(Template, {
+  args: {
+    ...exampleComponent.args,
+    secondaryIcon: Add16,
+    featureFlags: { ['ExampleComponent.secondaryIcon']: true },
+  },
+});
+
+const HookedTemplate = ({ featureFlags, ...args }) => {
+  if (featureFlags) {
+    pkg._silenceWarnings(false); // warnings are ordinarily silenced in storybook, add this to test.
+    Object.keys(featureFlags).forEach((flagKey) => {
+      pkg.feature[flagKey] = featureFlags[flagKey];
+    });
+    pkg._silenceWarnings(true);
+  }
+
+  return (
+    <ExampleComponent
+      usesExampleHook={10}
+      primaryButtonLabel="Primary"
+      secondaryButtonLabel="Secondary"
+      onPrimaryClick={action('onPrimaryClick')}
+      onSecondaryClick={action('onSecondaryClick')}
+      {...args}
+    />
+  );
+};
+
+export const exampleHookDisabledComponent = prepareStory(HookedTemplate, {
+  args: { featureFlags: { ['ExampleComponent.useExample']: false } },
+});
+
+export const exampleHookEnabledComponent = prepareStory(HookedTemplate, {
+  args: { featureFlags: { ['ExampleComponent.useExample']: true } },
+});

packages/cloud-cognitive/src/components/ExampleComponent/ExampleComponent.test.js

@@ -13,7 +13,9 @@ import { pkg, carbon } from '../../settings';
 
 import uuidv4 from '../../global/js/utils/uuidv4';
 
+import { Add16 } from '@carbon/icons-react';
 import { ExampleComponent } from '.';
+import { expectError, expectLogging } from '../../global/js/utils/test-helper';
 
 const blockClass = `${pkg.prefix}--example-component`;
 const componentName = ExampleComponent.displayName;
@@ -119,4 +121,76 @@ describe(componentName, () => {
     renderComponent({ ref });
     expect(ref.current).toEqual(screen.getByRole('main'));
   });
+
+  it('logs an error when secondaryIcon used and feature flag disabled', () => {
+    pkg.feature['ExampleComponent.secondaryIcon'] = false;
+    expectError(
+      'Carbon for IBM Products (Error): Feature "ExampleComponent.secondaryIcon" not enabled. To enable see the notes on feature flags in the README.',
+      () => {
+        render(
+          <ExampleComponent
+            secondaryIcon={Add16}
+            {...{
+              primaryButtonLabel,
+              secondaryButtonLabel,
+            }}
+          />
+        );
+      }
+    );
+  });
+
+  it('does NOT log an error when secondaryIcon used and feature flag enabled', () => {
+    pkg.feature['ExampleComponent.secondaryIcon'] = true;
+    render(
+      <ExampleComponent
+        {...{
+          primaryButtonLabel,
+          secondaryButtonLabel,
+          secondaryIcon: Add16,
+        }}
+      />
+    );
+  });
+
+  it('logs an error when useExample used and feature flag disabled', () => {
+    pkg.feature['ExampleComponent.useExample'] = false;
+    expectLogging(
+      {
+        errors:
+          'Carbon for IBM Products (Error): Feature "ExampleComponent.useExample" not enabled. To enable see the notes on feature flags in the README.',
+        warnings:
+          'Disabled feature "ExampleComponent.useExample" does not change the initialTime.',
+      },
+      () => {
+        render(
+          <ExampleComponent
+            secondaryIcon={Add16}
+            {...{
+              usesExampleHook: 10,
+              primaryButtonLabel,
+              secondaryButtonLabel: `secondary`,
+            }}
+          />
+        );
+      },
+      true
+      // true
+    );
+  });
+
+  it('does NOT log an error when useExample used and feature flag enabled', () => {
+    pkg.feature['ExampleComponent.useExample'] = true;
+
+    render(
+      <ExampleComponent
+        {...{
+          usesExampleHook: 10,
+          primaryButtonLabel,
+          secondaryButtonLabel,
+          secondaryIcon: Add16,
+        }}
+      />
+    );
+  });
 });