feat(Autocomplete): Expose stable implementation

Royal-Navy · Feb 21, 2022 · 9f3cab0 · 9f3cab0
1 parent 8ed9f3f
commit 9f3cab0
Show file tree

Hide file tree

Showing 19 changed files with 78 additions and 95 deletions.
diff --git a/...ibrary/cypress/selectors/AutocompleteE.ts → ...library/cypress/selectors/Autocomplete.ts b/...ibrary/cypress/selectors/AutocompleteE.ts → ...library/cypress/selectors/Autocomplete.ts
diff --git a/packages/react-component-library/cypress/selectors/index.ts b/packages/react-component-library/cypress/selectors/index.ts
@@ -1,4 +1,4 @@
-import autocompleteE from './AutocompleteE'
+import Autocomplete from './Autocomplete'
 import avatar from './Avatar'
 import Checkbox from './Checkbox'
 import contextMenu from './ContextMenu'
@@ -11,7 +11,7 @@ import selectE from './SelectE'
 import timeline from './timeline'
 
 export default {
-  autocompleteE,
+  Autocomplete,
   avatar,
   Checkbox,
   contextMenu,

diff --git a/...cypress/specs/AutocompleteE/index.spec.ts → .../cypress/specs/Autocomplete/index.spec.ts b/...cypress/specs/AutocompleteE/index.spec.ts → .../cypress/specs/Autocomplete/index.spec.ts
@@ -9,11 +9,9 @@ import {
 import { hexToRgb } from '../../helpers'
 import selectors from '../../selectors'
 
-describe('AutocompleteE', () => {
+describe('Autocomplete', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=autocomplete-experimental--default&viewMode=story'
-    )
+    cy.visit('/iframe.html?id=autocomplete--default&viewMode=story')
   })
 
   describe('when the component is focused', () => {
@@ -41,7 +39,7 @@ describe('AutocompleteE', () => {
       })
 
       it('does not render the `No results for t` text', () => {
-        cy.get(selectors.autocompleteE.noResults).should('not.exist')
+        cy.get(selectors.Autocomplete.noResults).should('not.exist')
       })
 
       it('highlights the first item', () => {
@@ -170,7 +168,7 @@ describe('AutocompleteE', () => {
       })
 
       it('renders the `No results for z` text', () => {
-        cy.get(selectors.autocompleteE.noResults).should('be.visible')
+        cy.get(selectors.Autocomplete.noResults).should('be.visible')
       })
 
       describe('and the user clicks away from the component', () => {

diff --git a/...ts/AutocompleteE/Autocomplete.stories.tsx → ...nts/Autocomplete/Autocomplete.stories.tsx b/...ts/AutocompleteE/Autocomplete.stories.tsx → ...nts/Autocomplete/Autocomplete.stories.tsx
@@ -7,49 +7,49 @@ import {
 } from '@defencedigital/icon-library'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 
-import { AutocompleteE, AutocompleteEOption } from './index'
+import { Autocomplete, AutocompleteOption } from './index'
 
 export default {
-  component: AutocompleteE,
-  title: 'Autocomplete (Experimental)',
+  component: Autocomplete,
+  title: 'Autocomplete',
   parameters: {
     actions: { argTypesRegex: '^on.*' },
   },
-} as ComponentMeta<typeof AutocompleteE>
+} as ComponentMeta<typeof Autocomplete>
 
-const Template: ComponentStory<typeof AutocompleteE> = (args) => (
+const Template: ComponentStory<typeof Autocomplete> = (args) => (
   <div style={{ height: args.isDisabled ? 'initial' : '18rem' }}>
-    <AutocompleteE label="Some label" {...args}>
-      <AutocompleteEOption value="one">One</AutocompleteEOption>
-      <AutocompleteEOption value="two">Two</AutocompleteEOption>
-      <AutocompleteEOption value="three">Three</AutocompleteEOption>
-      <AutocompleteEOption value="four">Four</AutocompleteEOption>
-    </AutocompleteE>
+    <Autocomplete label="Some label" {...args}>
+      <AutocompleteOption value="one">One</AutocompleteOption>
+      <AutocompleteOption value="two">Two</AutocompleteOption>
+      <AutocompleteOption value="three">Three</AutocompleteOption>
+      <AutocompleteOption value="four">Four</AutocompleteOption>
+    </Autocomplete>
   </div>
 )
 
-const TemplateWIthIconsAndBadges: ComponentStory<typeof AutocompleteE> = (
+const TemplateWIthIconsAndBadges: ComponentStory<typeof Autocomplete> = (
   args
 ) => (
   <div style={{ height: args.isDisabled ? 'initial' : '18rem' }}>
-    <AutocompleteE label="Some label" {...args}>
-      <AutocompleteEOption badge={100} icon={<IconAnchor />} value="one">
+    <Autocomplete label="Some label" {...args}>
+      <AutocompleteOption badge={100} icon={<IconAnchor />} value="one">
         One
-      </AutocompleteEOption>
-      <AutocompleteEOption badge={110} icon={<IconRemove />} value="two">
+      </AutocompleteOption>
+      <AutocompleteOption badge={110} icon={<IconRemove />} value="two">
         Two
-      </AutocompleteEOption>
-      <AutocompleteEOption badge={111} icon={<IconAgriculture />} value="three">
+      </AutocompleteOption>
+      <AutocompleteOption badge={111} icon={<IconAgriculture />} value="three">
         Three
-      </AutocompleteEOption>
-      <AutocompleteEOption
+      </AutocompleteOption>
+      <AutocompleteOption
         badge={112}
         icon={<IconBrightnessAuto />}
         value="four"
       >
         Four
-      </AutocompleteEOption>
-    </AutocompleteE>
+      </AutocompleteOption>
+    </Autocomplete>
   </div>
 )
 

diff --git a/...nents/AutocompleteE/Autocomplete.test.tsx → ...onents/Autocomplete/Autocomplete.test.tsx b/...nents/AutocompleteE/Autocomplete.test.tsx → ...onents/Autocomplete/Autocomplete.test.tsx
@@ -3,9 +3,9 @@ import '@testing-library/jest-dom/extend-expect'
 import { render, RenderResult } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
-import { AutocompleteE, AutocompleteEOption } from '.'
+import { Autocomplete, AutocompleteOption } from '.'
 
-describe('AutocompleteE', () => {
+describe('Autocomplete', () => {
   let onChangeSpy: (value: string | null) => void
   let wrapper: RenderResult
 
@@ -16,18 +16,14 @@ describe('AutocompleteE', () => {
       onChangeSpy = jest.fn()
 
       wrapper = render(
-        <AutocompleteE
-          id="autocomplete-id"
-          label="Label"
-          onChange={onChangeSpy}
-        >
-          <AutocompleteEOption value="one">One</AutocompleteEOption>
-          <AutocompleteEOption value="two">Two</AutocompleteEOption>
-          <AutocompleteEOption value="three">Three</AutocompleteEOption>
+        <Autocomplete id="autocomplete-id" label="Label" onChange={onChangeSpy}>
+          <AutocompleteOption value="one">One</AutocompleteOption>
+          <AutocompleteOption value="two">Two</AutocompleteOption>
+          <AutocompleteOption value="three">Three</AutocompleteOption>
           {canShowFourthOption && (
-            <AutocompleteEOption value="four">Four</AutocompleteEOption>
+            <AutocompleteOption value="four">Four</AutocompleteOption>
           )}
-        </AutocompleteE>
+        </Autocomplete>
       )
     })
 
@@ -169,11 +165,11 @@ describe('AutocompleteE', () => {
   describe('when `value` is set to a valid value', () => {
     beforeEach(() => {
       wrapper = render(
-        <AutocompleteE label="Label" value="two">
-          <AutocompleteEOption value="one">One</AutocompleteEOption>
-          <AutocompleteEOption value="two">Two</AutocompleteEOption>
-          <AutocompleteEOption value="three">Three</AutocompleteEOption>
-        </AutocompleteE>
+        <Autocomplete label="Label" value="two">
+          <AutocompleteOption value="one">One</AutocompleteOption>
+          <AutocompleteOption value="two">Two</AutocompleteOption>
+          <AutocompleteOption value="three">Three</AutocompleteOption>
+        </Autocomplete>
       )
     })
 
@@ -185,11 +181,11 @@ describe('AutocompleteE', () => {
   describe.each(['invalid', null])('when `value` is set to `%s`', (value) => {
     beforeEach(() => {
       wrapper = render(
-        <AutocompleteE label="Label" value={value}>
-          <AutocompleteEOption value="one">One</AutocompleteEOption>
-          <AutocompleteEOption value="two">Two</AutocompleteEOption>
-          <AutocompleteEOption value="three">Three</AutocompleteEOption>
-        </AutocompleteE>
+        <Autocomplete label="Label" value={value}>
+          <AutocompleteOption value="one">One</AutocompleteOption>
+          <AutocompleteOption value="two">Two</AutocompleteOption>
+          <AutocompleteOption value="three">Three</AutocompleteOption>
+        </Autocomplete>
       )
     })
 

diff --git a/...omponents/AutocompleteE/AutocompleteE.tsx → .../components/Autocomplete/Autocomplete.tsx b/...omponents/AutocompleteE/AutocompleteE.tsx → .../components/Autocomplete/Autocomplete.tsx
@@ -15,9 +15,9 @@ import { useAutocomplete } from './hooks/useAutocomplete'
 import { useMenuVisibility } from './hooks/useMenuVisibility'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface AutocompleteEProps extends SelectBaseProps {}
+export interface AutocompleteProps extends SelectBaseProps {}
 
-export const AutocompleteE: React.FC<AutocompleteEProps> = ({
+export const Autocomplete: React.FC<AutocompleteProps> = ({
   children,
   id = getId('autocomplete'),
   isInvalid = false,
@@ -117,4 +117,4 @@ export const AutocompleteE: React.FC<AutocompleteEProps> = ({
   )
 }
 
-AutocompleteE.displayName = 'AutocompleteE'
+Autocomplete.displayName = 'Autocomplete'
diff --git a/...nts/AutocompleteE/AutocompleteEOption.tsx → ...nents/Autocomplete/AutocompleteOption.tsx b/...nts/AutocompleteE/AutocompleteEOption.tsx → ...nents/Autocomplete/AutocompleteOption.tsx
@@ -4,14 +4,13 @@ import reactStringReplace from 'react-string-replace'
 import { SelectBaseOption, SelectBaseOptionAsStringProps } from '../SelectBase'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface AutocompleteEOptionProps
-  extends SelectBaseOptionAsStringProps {
+export interface AutocompleteOptionProps extends SelectBaseOptionAsStringProps {
   inputValue?: string
 }
 
-export const AutocompleteEOption = React.forwardRef<
+export const AutocompleteOption = React.forwardRef<
   HTMLLIElement,
-  AutocompleteEOptionProps
+  AutocompleteOptionProps
 >(({ children, inputValue, ...rest }, ref) => {
   return (
     <SelectBaseOption ref={ref} {...rest}>
@@ -22,4 +21,4 @@ export const AutocompleteEOption = React.forwardRef<
   )
 })
 
-AutocompleteEOption.displayName = 'AutocompleteEOption'
+AutocompleteOption.displayName = 'AutocompleteOption'
diff --git a/...rc/components/AutocompleteE/NoResults.tsx → ...src/components/Autocomplete/NoResults.tsx b/...rc/components/AutocompleteE/NoResults.tsx → ...src/components/Autocomplete/NoResults.tsx
diff --git a/...y/src/components/AutocompleteE/helpers.ts → ...ry/src/components/Autocomplete/helpers.ts b/...y/src/components/AutocompleteE/helpers.ts → ...ry/src/components/Autocomplete/helpers.ts
diff --git a/...ts/AutocompleteE/hooks/useAutocomplete.ts → ...nts/Autocomplete/hooks/useAutocomplete.ts b/...ts/AutocompleteE/hooks/useAutocomplete.ts → ...nts/Autocomplete/hooks/useAutocomplete.ts
diff --git a/...utocompleteE/hooks/useHighlightedIndex.ts → ...Autocomplete/hooks/useHighlightedIndex.ts b/...utocompleteE/hooks/useHighlightedIndex.ts → ...Autocomplete/hooks/useHighlightedIndex.ts
diff --git a/.../AutocompleteE/hooks/useMenuVisibility.ts → ...s/Autocomplete/hooks/useMenuVisibility.ts b/.../AutocompleteE/hooks/useMenuVisibility.ts → ...s/Autocomplete/hooks/useMenuVisibility.ts
diff --git a/packages/react-component-library/src/components/Autocomplete/index.ts b/packages/react-component-library/src/components/Autocomplete/index.ts
@@ -0,0 +1,2 @@
+export * from './Autocomplete'
+export * from './AutocompleteOption'
diff --git a/...utocompleteE/partials/StyledNoResults.tsx → ...Autocomplete/partials/StyledNoResults.tsx b/...utocompleteE/partials/StyledNoResults.tsx → ...Autocomplete/partials/StyledNoResults.tsx
diff --git a/packages/react-component-library/src/components/AutocompleteE/index.ts b/packages/react-component-library/src/components/AutocompleteE/index.ts
diff --git a/packages/react-component-library/src/forms/formik/formik.stories.tsx b/packages/react-component-library/src/forms/formik/formik.stories.tsx
@@ -7,10 +7,7 @@ import { TextInputE } from '../../components/TextInputE'
 import { TextAreaE } from '../../components/TextAreaE'
 import { Radio } from '../../components/Radio'
 import { Checkbox } from '../../components/Checkbox'
-import {
-  AutocompleteE,
-  AutocompleteEOption,
-} from '../../components/AutocompleteE'
+import { Autocomplete, AutocompleteOption } from '../../components/Autocomplete'
 import { Button } from '../../components/Button'
 import { NumberInputE } from '../../components/NumberInputE'
 import {
@@ -287,22 +284,20 @@ export const Example: React.FC<unknown> = () => {
                     hintText="Example hint text."
                     errors={[{ error: meta.touched && meta.error }]}
                   >
-                    <AutocompleteE
+                    <Autocomplete
                       value={value}
                       label="Example autocomplete"
                       onChange={(newValue: string | null) => {
                         setFieldValue('exampleAutocomplete', newValue)
                       }}
                     >
-                      <AutocompleteEOption value="one">One</AutocompleteEOption>
-                      <AutocompleteEOption value="two">Two</AutocompleteEOption>
-                      <AutocompleteEOption value="three">
+                      <AutocompleteOption value="one">One</AutocompleteOption>
+                      <AutocompleteOption value="two">Two</AutocompleteOption>
+                      <AutocompleteOption value="three">
                         Three
-                      </AutocompleteEOption>
-                      <AutocompleteEOption value="four">
-                        Four
-                      </AutocompleteEOption>
-                    </AutocompleteE>
+                      </AutocompleteOption>
+                      <AutocompleteOption value="four">Four</AutocompleteOption>
+                    </Autocomplete>
                   </Field>
                 )
               }}

diff --git a/packages/react-component-library/src/forms/native/native.stories.tsx b/packages/react-component-library/src/forms/native/native.stories.tsx
@@ -5,10 +5,7 @@ import { ComponentMeta } from '@storybook/react'
 import { TextInputE } from '../../components/TextInputE'
 import { TextAreaE } from '../../components/TextAreaE'
 import { Radio } from '../../components/Radio'
-import {
-  AutocompleteE,
-  AutocompleteEOption,
-} from '../../components/AutocompleteE'
+import { Autocomplete, AutocompleteOption } from '../../components/Autocomplete'
 import { Checkbox } from '../../components/Checkbox'
 import { DatePickerE } from '../../components/DatePickerE'
 import { NumberInputE } from '../../components/NumberInputE'
@@ -230,7 +227,7 @@ export const Example: React.FC<unknown> = () => {
           </SelectE>
         </Field>
         <Field hintText="Example hint text.">
-          <AutocompleteE
+          <Autocomplete
             label="Example autocomplete"
             onChange={(value) => {
               handleChange({
@@ -242,11 +239,11 @@ export const Example: React.FC<unknown> = () => {
             }}
             value={formState.exampleAutocomplete}
           >
-            <AutocompleteEOption value="one">One</AutocompleteEOption>
-            <AutocompleteEOption value="two">Two</AutocompleteEOption>
-            <AutocompleteEOption value="three">Three</AutocompleteEOption>
-            <AutocompleteEOption value="four">Four</AutocompleteEOption>
-          </AutocompleteE>
+            <AutocompleteOption value="one">One</AutocompleteOption>
+            <AutocompleteOption value="two">Two</AutocompleteOption>
+            <AutocompleteOption value="three">Three</AutocompleteOption>
+            <AutocompleteOption value="four">Four</AutocompleteOption>
+          </Autocomplete>
         </Field>
         <Field hintText="Example hint text.">
           <RangeSliderE

diff --git a/packages/react-component-library/src/forms/react-hook-form/react-hook-form.stories.tsx b/packages/react-component-library/src/forms/react-hook-form/react-hook-form.stories.tsx
@@ -8,10 +8,7 @@ import styled from 'styled-components'
 import { TextInputE } from '../../components/TextInputE'
 import { TextAreaE } from '../../components/TextAreaE'
 import { Radio } from '../../components/Radio'
-import {
-  AutocompleteE,
-  AutocompleteEOption,
-} from '../../components/AutocompleteE'
+import { Autocomplete, AutocompleteOption } from '../../components/Autocomplete'
 import { Checkbox } from '../../components/Checkbox'
 import { DatePickerE } from '../../components/DatePickerE'
 import { NumberInputE } from '../../components/NumberInputE'
@@ -238,16 +235,16 @@ export const Example: React.FC<unknown> = () => {
             control={control}
             name="exampleAutocomplete"
             render={({ onChange, value }) => (
-              <AutocompleteE
+              <Autocomplete
                 label="Example autocomplete"
                 onChange={onChange}
                 value={value}
               >
-                <AutocompleteEOption value="one">One</AutocompleteEOption>
-                <AutocompleteEOption value="two">Two</AutocompleteEOption>
-                <AutocompleteEOption value="three">Three</AutocompleteEOption>
-                <AutocompleteEOption value="four">Four</AutocompleteEOption>
-              </AutocompleteE>
+                <AutocompleteOption value="one">One</AutocompleteOption>
+                <AutocompleteOption value="two">Two</AutocompleteOption>
+                <AutocompleteOption value="three">Three</AutocompleteOption>
+                <AutocompleteOption value="four">Four</AutocompleteOption>
+              </Autocomplete>
             )}
           />
         </Field>

diff --git a/packages/react-component-library/src/index.ts b/packages/react-component-library/src/index.ts
@@ -11,6 +11,7 @@ export * from './styled-components'
 // Components
 export * from './components/Alert'
 export * from './components/Avatar'
+export * from './components/Autocomplete'
 export * from './components/Badge'
 export * from './components/Breadcrumbs'
 export * from './components/Button'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './Autocomplete'
		export * from './AutocompleteOption'