Merge branch 'main' into loading-story

.github/ISSUE_TEMPLATE/USER_STORY.yaml

@@ -0,0 +1,56 @@
+name: (Carbon core team ONLY) User story
+description:
+  Write a user story to begin solving their needs.
+title: '[YOUR TITLE]: Brief description'
+body:
+  - type: markdown
+    attributes:
+      value: "Avoid any type of solutions in this user story."
+  - type: markdown
+    attributes:
+      value: "Consider the following when writing Acceptance criteria for this story:
+
+      - Each product backlog item or user story should have at least one Acceptance criteria.
+
+      - Acceptance criteria defines a deliverable that can be completed in a single sprint.
+
+      - Each Acceptance criterion is independently testable.
+
+      - Include functional as well as non-functional criteria – when relevant.
+
+      - Team members write Acceptance criteria and the Product Owner verifies it."
+  - type: textarea
+    id: user-story
+    attributes:
+      label: User story
+      value: "> As a `[user role below]`:
+
+
+    > I need to:
+
+
+    > so that I can:"
+    validations:
+      required: true
+  - type: textarea
+    id: additional-information
+    attributes:
+      label: Additional information
+      value: "- _{{user research}}_
+
+- _{{user insights}}_
+
+- _{{user metrics}}_"
+    validations:
+      required: true
+  - type: textarea
+    id: acceptance-criteria
+    attributes:
+      label: Acceptance criteria
+      value: "- [ ] _{{State acceptance criteria}}_
+
+- [ ] _{{State another}}_
+
+- [ ] _{{And another}}_"
+    validations:
+      required: true

packages/react/src/components/Accordion/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-accordion--accordion-story'
+      variant: 'components-accordion--default'
     }
   ]}
 />

packages/react/src/components/AspectRatio/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-aspectratio--aspect-ratio-story'
+      variant: 'components-aspectratio--default'
     }
   ]}
 />

packages/react/src/components/Breadcrumb/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-breadcrumb--breadcrumb-story'
+      variant: 'components-breadcrumb--default'
     },
     {
       label: 'Breadcrumb with Overflow Menu',

packages/react/src/components/Checkbox/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-checkbox--checkbox-story'
+      variant: 'components-checkbox--default'
     }
   ]}
 />

packages/react/src/components/ComboBox/docs/overview.mdx

@@ -7,7 +7,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-combobox--combobox'
+      variant: 'components-combobox--default'
     }
   ]}
 />

packages/react/src/components/ExpandableSearch/ExpandableSearch-test.js

@@ -0,0 +1,206 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { mount } from 'enzyme';
+import React from 'react';
+import Search from './ExpandableSearch';
+
+const prefix = 'cds';
+
+describe('ExpandableSearch', () => {
+  let wrapper;
+
+  const container = () => wrapper.find(`.${prefix}--search`);
+  const button = () => wrapper.find('button');
+  const input = () => wrapper.find('input');
+  const label = () => wrapper.find('label');
+
+  const render = (props) => {
+    if (wrapper) {
+      return wrapper.setProps(props);
+    }
+
+    wrapper = mount(<Search labelText="testlabel" {...props} />);
+
+    return wrapper;
+  };
+
+  describe('container', () => {
+    beforeEach(() => {
+      render();
+    });
+
+    it('has the class `${prefix}--search--expandable`', () => {
+      const value = container().hasClass(`${prefix}--search--expandable`);
+      expect(value).toEqual(true);
+    });
+
+    describe('expanded', () => {
+      const value = () => container().hasClass(`${prefix}--search--expanded`);
+
+      describe('when input has no content', () => {
+        beforeEach(() => {
+          input().simulate('change', { target: { value: '' } });
+        });
+
+        it('is false', () => {
+          expect(value()).toEqual(false);
+        });
+      });
+
+      describe.skip('when input has content', () => {
+        beforeEach(() => {
+          input().simulate('change', { target: { value: 'text' } });
+        });
+
+        it('is true', () => {
+          expect(value()).toEqual(true);
+        });
+
+        describe('when content is cleared', () => {
+          beforeEach(() => {
+            button().simulate('click');
+          });
+
+          it('is false', () => {
+            expect(value()).toEqual(false);
+          });
+        });
+      });
+    });
+  });
+
+  describe('label', () => {
+    beforeEach(() => {
+      render();
+    });
+
+    it('is rendered', () => {
+      expect(label().text()).toEqual('testlabel');
+    });
+  });
+
+  describe('onBlur', () => {
+    const onBlur = jest.fn();
+
+    beforeEach(() => {
+      render({ onBlur });
+    });
+
+    afterEach(() => {
+      onBlur.mockReset();
+    });
+
+    it('is called on blur', () => {
+      input().simulate('blur');
+      expect(onBlur).toHaveBeenCalled();
+    });
+  });
+
+  describe('onChange', () => {
+    const onChange = jest.fn();
+
+    beforeEach(() => {
+      render({ onChange });
+    });
+
+    afterEach(() => {
+      onChange.mockReset();
+    });
+
+    it('is called on change', () => {
+      input().simulate('change', { target: { value: 'text' } });
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+
+  describe('onClick', () => {
+    const onClick = jest.fn();
+
+    beforeEach(() => {
+      render({ onClick });
+    });
+
+    afterEach(() => {
+      onClick.mockReset();
+    });
+
+    it('is called on click', () => {
+      input().simulate('click');
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('onClear', () => {
+    const onClear = jest.fn();
+
+    beforeEach(() => {
+      render({ onClear });
+    });
+
+    afterEach(() => {
+      onClear.mockReset();
+    });
+
+    describe('when input has no content', () => {
+      beforeEach(() => {
+        input().simulate('change', { target: { value: '' } });
+      });
+
+      it('is called on clear', () => {
+        button().simulate('click');
+        expect(onClear).toHaveBeenCalled();
+      });
+    });
+
+    describe('when input has content', () => {
+      beforeEach(() => {
+        input().simulate('change', { target: { value: 'text' } });
+      });
+
+      it('is called on clear', () => {
+        button().simulate('click');
+        expect(onClear).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('onExpand', () => {
+    const onExpand = jest.fn();
+
+    beforeEach(() => {
+      render({ onExpand });
+    });
+
+    afterEach(() => {
+      onExpand.mockReset();
+    });
+
+    // This won't work until v11
+    it.skip('is called on focus', () => {
+      input().simulate('focus');
+      expect(onExpand).toHaveBeenCalled();
+    });
+  });
+
+  describe('onFocus', () => {
+    const onFocus = jest.fn();
+
+    beforeEach(() => {
+      render({ onFocus });
+    });
+
+    afterEach(() => {
+      onFocus.mockReset();
+    });
+
+    it('is called on focus', () => {
+      input().simulate('focus');
+      expect(onFocus).toHaveBeenCalled();
+    });
+  });
+});

packages/react/src/components/ExpandableSearch/ExpandableSearch.js

@@ -9,8 +9,9 @@ import React, { useState, useRef } from 'react';
 import classnames from 'classnames';
 import Search from '../Search';
 import { usePrefix } from '../../internal/usePrefix';
+import { composeEventHandlers } from '../../tools/events';
 
-function ExpandableSearch(props) {
+function ExpandableSearch({ onBlur, onChange, onExpand, onFocus, ...props }) {
   const [expanded, setExpanded] = useState(false);
   const [hasContent, setHasContent] = useState(false);
   const searchRef = useRef(null);
@@ -32,6 +33,14 @@ function ExpandableSearch(props) {
     }
   }
 
+  function handleChange(evt) {
+    setHasContent(evt.target.value !== '');
+  }
+
+  function handleExpand() {
+    searchRef.current.focus?.();
+  }
+
   const classes = classnames(
     `${prefix}--search--expandable`,
     {
@@ -45,14 +54,10 @@ function ExpandableSearch(props) {
       {...props}
       ref={searchRef}
       className={classes}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      onChange={(event) => {
-        setHasContent(event.target.value !== '');
-      }}
-      onExpand={() => {
-        searchRef.current.focus?.();
-      }}
+      onFocus={composeEventHandlers([onFocus, handleFocus])}
+      onBlur={composeEventHandlers([onBlur, handleBlur])}
+      onChange={composeEventHandlers([onChange, handleChange])}
+      onExpand={composeEventHandlers([onExpand, handleExpand])}
     />
   );
 }

packages/react/src/components/FileUploader/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-fileuploader--file-uploader'
+      variant: 'components-fileuploader--default'
     },
     {
       label: 'File Uploader Drop Container',

packages/react/src/components/Heading/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-heading--heading-story'
+      variant: 'components-heading--default'
     }
   ]}
 />

packages/react/src/components/InlineLoading/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-inlineloading--inline-loading'
+      variant: 'components-inlineloading--default'
     },
     {
       label: 'Ux Example',

packages/react/src/components/Pagination/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-pagination--pagination'
+      variant: 'components-pagination--default'
     },
     {
       label: 'Multiple Pagination Components',