@openedx/paragon 21.11.2 → 21.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.11.2",
+  "version": "21.11.4",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/scss/core/_variables.scss

@@ -282,7 +282,7 @@ $element-color-levels: map-merge(
     "border": 200,
     "icon": 300,
     "active-border": 300,
-    "focus": 300,
+    "focus": 500,
     "graphic": 300,
     "default": 500,
     "light-text": 500,

package/src/Button/README.md

@@ -22,11 +22,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 
   return (
     <Stack gap={2} direction={ isExtraSmall ? "vertical" : "horizontal" }>
-      <Button variant="brand" className="mb-2 mb-sm-0">Brand</Button>
-      <Button variant="outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>
-      <Button variant="primary" className="mb-2 mb-sm-0">Primary</Button>
-      <Button variant="outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>
-      <Button variant="tertiary" className="mb-2 mb-sm-0">Tertiary</Button>
+      <Button variant="brand">Brand</Button>
+      <Button variant="outline-brand">Outline Brand</Button>
+      <Button variant="primary">Primary</Button>
+      <Button variant="outline-primary">Outline Primary</Button>
+      <Button variant="tertiary">Tertiary</Button>
     </Stack>
 )}
 ```
@@ -43,11 +43,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
       gap={2}
       direction={ isExtraSmall ? "vertical" : "horizontal" }
     >
-      <Button variant="inverse-brand" className="mb-2 mb-sm-0">Brand</Button>
-      <Button variant="inverse-outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>
-      <Button variant="inverse-primary" className="mb-2 mb-sm-0">Primary</Button>
-      <Button variant="inverse-outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>
-      <Button variant="inverse-tertiary" className="mb-2 mb-sm-0">Tertiary</Button>
+      <Button variant="inverse-brand">Brand</Button>
+      <Button variant="inverse-outline-brand">Outline Brand</Button>
+      <Button variant="inverse-primary">Primary</Button>
+      <Button variant="inverse-outline-primary">Outline Primary</Button>
+      <Button variant="inverse-tertiary">Tertiary</Button>
     </Stack>
 )}
 ```
@@ -65,20 +65,20 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
         gap={2}
         direction={ isExtraSmall ? "vertical" : "horizontal" }
       >
-        <Button variant="success" className="mb-2 mb-sm-0">Success</Button>
-        <Button variant="danger" className="mb-2 mb-sm-0">Danger</Button>
-        <Button variant="outline-success" className="mb-2 mb-sm-0">Success</Button>
-        <Button variant="outline-danger" className="mb-2 mb-sm-0">Danger</Button>
+        <Button variant="success">Success</Button>
+        <Button variant="danger">Danger</Button>
+        <Button variant="outline-success">Success</Button>
+        <Button variant="outline-danger">Danger</Button>
       </Stack>
       <Stack
         gap={2}
         direction={ isExtraSmall ? "vertical" : "horizontal" }
       >
-        <Button variant="link" className="mb-2 mb-sm-0">Link</Button>
-        <Button variant="light" className="mb-2 mb-sm-0">Light</Button>
-        <Button variant="dark" className="mb-2 mb-sm-0">Dark</Button>
-        <Button variant="outline-light" className="mb-2 mb-sm-0">Light</Button>
-        <Button variant="outline-dark" className="mb-2 mb-sm-0">Dark</Button>
+        <Button variant="link">Link</Button>
+        <Button variant="light">Light</Button>
+        <Button variant="dark">Dark</Button>
+        <Button variant="outline-light">Light</Button>
+        <Button variant="outline-dark">Dark</Button>
       </Stack>
     </>
 )}
@@ -92,34 +92,41 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 
   return (
     <>
-        <Stack
-          className="mb-2"
-          gap={2}
-          direction={ isExtraSmall ? "vertical" : "horizontal" }
-        >
-          <Button variant="primary" size="lg" className="mb-2 mb-sm-0">
-            Large button
-          </Button>
-          <Button variant="outline-primary" size="lg" className="mb-2 mb-sm-0">
-            Large button
-          </Button>
-        </Stack>
-        <Stack
-          className="mb-2"
-          gap={2}
-          direction={ isExtraSmall ? "vertical" : "horizontal" }
-        >
-          <Button variant="primary" size="sm" className="mb-2 mb-sm-0">
-            Small button
-          </Button>
-          <Button variant="outline-primary" size="sm" className="mb-2 mb-sm-0">
-            Small button
-          </Button>
-        </Stack>
-        <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
-        <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="primary" size="lg">
+          Large button
+        </Button>
+        <Button variant="outline-primary" size="lg">
+          Large button
+        </Button>
+      </Stack>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="primary" size="sm">
+          Small button
+        </Button>
+        <Button variant="outline-primary" size="sm">
+          Small button
+        </Button>
+      </Stack>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="link" size="inline">Inline button</Button>
+        <Button variant="link" size="inline">Inline button</Button>
+      </Stack>
     </>
-)}
+  )
+}
 ```
 
 ### When to use the inline size
@@ -127,13 +134,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 Use inline size buttons for when a button sits with a line of text.
 
 ```jsx live
-<>
-  <p>
-    <span className="mr-1">2 items selected.</span>
-    <Button variant="link" size="inline" className="mr-1">Select all</Button>
-    <Button variant="link" size="inline">Clear</Button>
-  </p>
-</>
+<p>
+  <span className="mr-1">2 items selected.</span>
+  <Button variant="link" size="inline" className="mr-1">Select all</Button>
+  <Button variant="link" size="inline">Clear</Button>
+</p>
 ```
 
 ## Block Buttons
@@ -152,21 +157,41 @@ Use inline size buttons for when a button sits with a line of text.
 ### Disabled
 
 ```jsx live
-<>
-  <Button variant="primary" disabled>Primary disabled</Button>
-  <Button variant="secondary" disabled>Secondary disabled</Button>
-  <Button as="a" href="https://edx.org" disabled>Link disabled</Button>
-</>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button variant="primary" disabled>Primary disabled</Button>
+      <Button variant="secondary" disabled>Secondary disabled</Button>
+      <Button as="a" href="https://edx.org" disabled>Link disabled</Button>
+    </Stack>
+    )
+}
 ```
 
 ### With empty href
 For link to be `disabled`, it must have href defined with some value.
 
 ```jsx live
-<>
-  <Button as='a' disabled>No href</Button>
-  <Button as='a' href='' disabled>Empty string href</Button>
-</>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button as="a" disabled>No href</Button>
+      <Button as="a" href="" disabled>Empty string href</Button>
+    </Stack>
+  )
+}
 ```
 
 ### With Icons before or after
@@ -181,23 +206,24 @@ For link to be `disabled`, it must have href defined with some value.
       gap={2}
       direction={ isExtraSmall ? "vertical" : "horizontal" }
     >
-      <Button variant="brand" iconBefore={ArrowBack} className="mb-2 mb-sm-0">
+      <Button variant="brand" iconBefore={ArrowBack}>
         Brand
       </Button>
-      <Button variant="outline-brand" iconAfter={ArrowDropDown} className="mb-2 mb-sm-0">
+      <Button variant="outline-brand" iconAfter={ArrowDropDown}>
         Outline Brand
       </Button>
-      <Button variant="primary" iconBefore={Remove} iconAfter={Add} className="mb-2 mb-sm-0">
+      <Button variant="primary" iconBefore={Remove} iconAfter={Add}>
         Primary
       </Button>
-      <Button variant="outline-primary" iconBefore={Highlight} className="mb-2 mb-sm-0">
+      <Button variant="outline-primary" iconBefore={Highlight}>
         Outline Primary
       </Button>
-      <Button variant="tertiary" iconAfter={Add} className="mb-2 mb-sm-0">
+      <Button variant="tertiary" iconAfter={Add}>
         Tertiary
       </Button>
     </Stack>
-)}
+  )
+}
 ```
 
 ## Stateful buttons
@@ -219,33 +245,63 @@ user-friendly experience.
 ### (Deprecated) color variants
 
 ```jsx live
-<div>
-  <Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
-  <Button.Deprecated className="btn-success">Success</Button.Deprecated>
-  <Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
-  <Button.Deprecated className="btn-light">Light</Button.Deprecated>
-  <Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
-</div>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
+      <Button.Deprecated className="btn-light">Light</Button.Deprecated>
+      <Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
+    </Stack>
+  )
+}
 ```
 
 ### (Deprecated) outline variants
 
 ```jsx live
-<div>
-  <Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
-  <Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
-  <Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
-</div>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
+    </Stack>
+  )
+}
 ```
 
 ### (Deprecated) inverse variants
 
 ```jsx live
-<div className="bg-gray-700 p-3">
-  <Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
-  <Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
-  <Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
-</div>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2 p-3 bg-gray-700"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
+    </Stack>
+  )
+}
 ```
 
 ### (Deprecated) link variant

package/src/Button/_variables.scss

@@ -19,7 +19,7 @@ $btn-border-width:            $input-btn-border-width !default;
 $btn-font-weight:             $font-weight-normal !default;
 $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
 $btn-focus-width:             2px !default;
-$btn-focus-gap:               1px !default;
+$btn-focus-gap:               $btn-focus-width !default;
 $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
 $btn-disabled-opacity:        .65 !default;
 $btn-active-box-shadow:       none;
@@ -48,3 +48,5 @@ $btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
 $btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
 
 $btn-focus-border-radius: calc(#{$btn-border-radius} + #{$btn-focus-border-gap}) !default;
+$btn-focus-border-radius-lg: $btn-focus-border-radius !default;
+$btn-focus-border-radius-sm: $btn-border-radius !default;

package/src/Button/index.scss

@@ -150,11 +150,11 @@
     }
 
     &.btn-lg::before {
-      border-radius: $btn-focus-border-radius;
+      border-radius: $btn-focus-border-radius-lg;
     }
 
     &.btn-sm::before {
-      border-radius: $btn-focus-border-radius;
+      border-radius: $btn-focus-border-radius-sm;
     }
 
     &:active,

package/src/DataTable/README.md

@@ -28,11 +28,11 @@ designStatus: 'Done'
 devStatus: 'In progress'
 ---
 
-The DataTable component is a wrapper that uses the <a href="https://react-table.tanstack.com/docs/overview">react-table</a> library to
+The DataTable component is a wrapper that uses the <a href="https://github.com/TanStack/table/tree/v7/docs/src/pages/docs" target="_blank" rel="noopener noreferrer">react-table</a> library to
 create tables. It can be used as is, or its subcomponents can be used on their own, allowing the developer full control.
 
 Paragon also exports all React hooks from ``react-table`` allowing the developers to use them and make customizations more freely without adding ``react-table`` as a separate dependency to their project.
-For full list of available hooks view <a href="https://react-table.tanstack.com/docs/api/overview">react-table API reference</a>.
+For full list of available hooks view <a href="https://github.com/TanStack/table/tree/v7/docs/src/pages/docs/api" target="_blank" rel="noopener noreferrer">react-table API reference</a>.
 
 ## How children get information
 
@@ -49,7 +49,7 @@ const instance = useContext(DataTableContext)
 For small tables (less than ~10,000 rows), filtering, sorting and pagination can be done quickly and easily on the frontend.
 
 In this example, a default TextFilter component is used for all columns. A default filter can be passed in,
-or a filter component can be defined on the column. See <a href="https://react-table.tanstack.com/docs/api/useFilters">react-table filters documentation</a>
+or a filter component can be defined on the column. See <a href="https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md" target="_blank" rel="noopener noreferrer">react-table filters documentation</a>
 for more information.
 
 ```jsx live

package/src/DataTable/index.jsx

@@ -329,7 +329,7 @@ DataTable.propTypes = {
   /** Function that will fetch table data. Called when page size, page index or filters change.
     * Meant to be used with manual filters and pagination */
   fetchData: PropTypes.func,
-  /** Initial state passed to react-table's documentation https://react-table.tanstack.com/docs/api/useTable */
+  /** Initial state passed to react-table's documentation https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useTable.md */
   initialState: PropTypes.shape({
     pageSize: requiredWhen(PropTypes.number, 'isPaginated'),
     pageIndex: requiredWhen(PropTypes.number, 'isPaginated'),

package/src/DataTable/tablefilters.mdx

@@ -14,18 +14,18 @@ devStatus: 'In progress'
 ---
 
 
-The ``DataTable`` component is a wrapper that uses the <a href="https://react-table.tanstack.com/docs">react-table</a> library to
+The ``DataTable`` component is a wrapper that uses the <a href="https://github.com/TanStack/table/tree/v7/docs/src/pages/docs" target="_blank" rel="noopener noreferrer">react-table</a> library to
 create tables. It can be used as is, or its subcomponents can be used on their own, allowing the developer full control.
 
 ## Filtering and sorting
 Paragon currently provides a variety of filter types, and you can also define your own filter types.
 
 In the example below, a default ``TextFilter`` component is used as the default filter for all columns. A default filter can be passed in,
-or a filter component can be defined on the column using the ``Filter`` attribute. See <a href="https://react-table.tanstack.com/docs/api/useFilters">react-table filters documentation</a>
+or a filter component can be defined on the column using the ``Filter`` attribute. See <a href="https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md" target="_blank" rel="noopener noreferrer">react-table filters documentation</a>
 for more information.
 
 ## Available filter functions
-A filtering function can be defined on the column as well as the filter component. Custom filtering functions can also be defined, see <a href="https://react-table.tanstack.com/docs/api/useFilters#column-options">react-table filters documentation</a>
+A filtering function can be defined on the column as well as the filter component. Custom filtering functions can also be defined, see <a href="https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md#column-options" target="_blank" rel="noopener noreferrer">react-table filters documentation</a>
 for more information.
 Filter functions are defined on the column as the ``filter`` attribute.
 <dl>

package/src/Form/FormAutosuggest.jsx

@@ -6,7 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useIntl } from 'react-intl';
 import { KeyboardArrowUp, KeyboardArrowDown } from '../../icons';
 import Icon from '../Icon';
-import FormGroup from './FormGroup';
+import { FormGroupContextProvider, useFormGroupContext } from './FormGroupContext';
 import FormControl from './FormControl';
 import FormControlFeedback from './FormControlFeedback';
 import IconButton from '../IconButton';
@@ -239,12 +239,18 @@ function FormAutosuggest({
     setDisplayValue(e.target.value);
   };
 
+  const { getControlProps } = useFormGroupContext();
+  const controlProps = getControlProps(props);
+
   return (
     <div className="pgn__form-autosuggest__wrapper" ref={parentRef}>
       <div aria-live="assertive" className="sr-only" data-testid="autosuggest-screen-reader-options-count">
         {`${state.dropDownItems.length} options found`}
       </div>
-      <FormGroup isInvalid={!!state.errorMessage}>
+      <FormGroupContextProvider
+        controlId={controlProps.id}
+        isInvalid={!!state.errorMessage}
+      >
         <FormControl
           ref={formControlRef}
           aria-expanded={(state.dropDownItems.length > 0).toString()}
@@ -259,7 +265,7 @@ function FormAutosuggest({
           onClick={handleClick}
           trailingElement={iconToggle}
           data-testid="autosuggest-textbox-input"
-          {...props}
+          {...controlProps}
         />
 
         {helpMessage && !state.errorMessage && (
@@ -269,11 +275,11 @@ function FormAutosuggest({
         )}
 
         {state.errorMessage && (
-          <FormControlFeedback type="invalid" feedback-for={props.name}>
+          <FormControlFeedback type="invalid" feedback-for={controlProps.name}>
             {errorMessageText}
           </FormControlFeedback>
         )}
-      </FormGroup>
+      </FormGroupContextProvider>
 
       <ul
         id="pgn__form-autosuggest__dropdown-box"

package/src/Form/form-autosuggest.mdx

@@ -19,93 +19,101 @@ Form auto-suggest enables users to manually select or type to find matching opti
 
 ```jsx live
 () => {
-    const [selected, setSelected] = useState('');
+  const [selected, setSelected] = useState('');
 
-    return (
-        <Form.Autosuggest
-            floatingLabel="Programming language"
-            aria-label="form autosuggest"
-            helpMessage="Select language"
-            errorMessageText="Error, no selected value"
-            value={selected}
-            onSelected={(value) => setSelected(value)}
-        >
-            <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Python</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
-            <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
-                Option with custom onClick
-            </Form.AutosuggestOption>
-        </Form.Autosuggest>
-    );
-}
+  return (
+    <Form.Group>
+      <Form.Label>
+        <h4>Programming language</h4>
+      </Form.Label>
+      <Form.Autosuggest
+        aria-label="form autosuggest"
+        helpMessage="Select language"
+        errorMessageText="Error, no selected value"
+        value={selected}
+        onSelected={(value) => setSelected(value)}
+      >
+        <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
+        <Form.AutosuggestOption>Python</Form.AutosuggestOption>
+        <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
+        <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
+          Option with custom onClick
+        </Form.AutosuggestOption>
+      </Form.Autosuggest>
+    </Form.Group>
+  );
+};
 ```
 
 ## Search Usage
 
 ```jsx live
 () => {
-    const [selected, setSelected] = useState('');
+  const [selected, setSelected] = useState('');
 
-    return (
-        <Form.Autosuggest
-            placeholder="Type 'T'"
-            aria-label="form autosuggest"
-            errorMessageText="Error, no selected value"
-            helpMessage="Select language"
-            value={selected}
-            onSelected={(value) => setSelected(value)}
-        >
-            <Form.AutosuggestOption>PHP</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Java</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Turbo Pascal</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Flask</Form.AutosuggestOption>
-        </Form.Autosuggest>
-    );
-}
+  return (
+    <Form.Autosuggest
+      placeholder="Type 'T'"
+      aria-label="form autosuggest"
+      errorMessageText="Error, no selected value"
+      helpMessage="Select language"
+      value={selected}
+      onSelected={(value) => setSelected(value)}
+    >
+      <Form.AutosuggestOption>PHP</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Java</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Turbo Pascal</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Flask</Form.AutosuggestOption>
+    </Form.Autosuggest>
+  );
+};
 ```
 
 ## Loading state
 
 ```jsx live
 () => {
-    const [data, setData] = useState([]);
-    const [showLoading, setShowLoading] = useState(false);
+  const [data, setData] = useState([]);
+  const [showLoading, setShowLoading] = useState(false);
 
-    useEffect(() => {
-        setShowLoading(true);
-        fetch('https://api.sampleapis.com/coffee/hot')
-            .then(data => data.json())
-            .then(items => {
-                setTimeout(() => {
-                  setData(items);
-                  setShowLoading(false);
-                }, 1500);
-            });
-    }, [])
+  useEffect(() => {
+    setShowLoading(true);
+    fetch('https://api.sampleapis.com/coffee/hot')
+      .then(data => data.json())
+      .then(items => {
+        setTimeout(() => {
+          setData(items);
+          setShowLoading(false);
+        }, 1500);
+      });
+  }, []);
 
-    const searchCoffee = (title) => {
-        setShowLoading(true);
-        fetch('https://api.sampleapis.com/coffee/hot')
-            .then(data => data.json())
-            .then(items => setTimeout(() => {
-                const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
-                setShowLoading(false);
-                if (filteredCoffee) { return filteredCoffee }
-                return { ...title, filteredCoffee }
-        }, 1500));
-    };
+  const searchCoffee = (title) => {
+    setShowLoading(true);
+    fetch('https://api.sampleapis.com/coffee/hot')
+      .then(data => data.json())
+      .then(items => setTimeout(() => {
+        const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
+        setShowLoading(false);
+        if (filteredCoffee) { return filteredCoffee; }
+        return { ...title, filteredCoffee };
+      }, 1500));
+  };
 
-    return (
-        <Form.Autosuggest
-            isLoading={showLoading}
-            placeholder="This is placeholder"
-            floatingLabel="This is floating label"
-            screenReaderText="Loading..."
-            onChange={searchCoffee}
-        >
-            {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
-        </Form.Autosuggest>
-    );
-}
+  return (
+    <Form.Group>
+      <Form.Label>
+        <h4>Café API</h4>
+      </Form.Label>
+      <Form.Autosuggest
+        isLoading={showLoading}
+        placeholder="This is placeholder"
+        screenReaderText="Loading..."
+        onChange={searchCoffee}
+      >
+        {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
+      </Form.Autosuggest>
+    </Form.Group>
+  );
+};
 ```