feat(Hooks): Expose useFloatingElement for positioning

package.json

@@ -44,7 +44,8 @@
     "**/**/postcss-scss": "^3.0.5",
     "**/**/typescript": "4.2.2",
     "**/**/ws": "^7.4.6",
-    "**/**/yup": "^0.31.1"
+    "**/**/yup": "^0.31.1",
+    "**/**/normalize-url": "^6.0.1"
   },
   "prettier": {
     "bracketSpacing": true,

packages/css-framework/src/components/_sidebar.scss

@@ -93,6 +93,8 @@ body.has-sidebar {
 }
 
 .rn-sidebar__bottom {
+  display: inline-flex;
+  justify-content: center;
   width: $bar-width;
 
   > div > button {

packages/react-component-library/README.md

@@ -41,6 +41,44 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 
 This context provider component applies global Royal Navy Design System styles to your application (resets, normalize and fonts). You should wrap the root of your app in this component.
 
+## Hooks
+
+### `useFloatingElement`
+
+This hook aids in the positioning of arbitrary elements relative to a target element. The positoning engine will intelligently position the element based on available screen real-estate.
+
+```javascript
+import { useFloatingElement } from '@royalnavy/react-component-library'
+
+const Example = () => {
+  const {
+    targetElementRef,
+    floatingElementRef,
+    arrowElementRef,
+    styles,
+    attributes,
+  } = useFloatingElement(placement)
+
+  return (    
+    <>
+      <Target ref={targetElementRef} />
+      <Float
+        ref={floatingElementRef}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        Hello, World!
+      </Float>
+    </>
+  )
+}
+
+```
+
+The hook wraps a popular underlying positioning engine called [Popper](https://github.com/popperjs/react-popper). 
+
+If you want opinionated styling for your floating element please consider the [Popover](https://storybook.royalnavy.io/?path=/docs/popover--default) component.
+
 ## Questions
 
 The Design System is maintained by a team at the Royal Navy. If you want to know more about the Royal Navy Design System, please email the [Design System Team](mailto:[email protected]).

packages/react-component-library/jest/setupTests.js

@@ -6,9 +6,13 @@ import { format } from 'util'
 const originalConsoleError = global.console.error
 
 global.console.error = (...args) => {
-  const reactFailures = [/Failed prop type/, /Warning: /, /StrictMode/]
+  const blocked = [/Failed prop type/, /Warning: /, /StrictMode/]
+  const allowed = [/act/]
 
-  if (reactFailures.some((p) => p.test(args[0]))) {
+  if (
+    blocked.some((p) => p.test(args[0])) &&
+    !allowed.some((p) => p.test(args[0]))
+  ) {
     originalConsoleError(...args)
     throw new Error(format(...args))
   }

packages/react-component-library/package.json

@@ -181,12 +181,13 @@
     "react-compound-slider": "^3.3.1",
     "react-day-picker": "^7.4.8",
     "react-indiana-drag-scroll": "^2.0.1",
+    "react-popper": "^2.2.5",
     "react-responsive": "^8.0.3",
     "react-select": "^4.1.0",
-    "react-tether": "^2.0.7",
     "react-toast-notifications": "^2.4.0",
     "react-transition-group": "^4.4.1",
-    "styled-normalize": "^8.0.7"
+    "styled-normalize": "^8.0.7",
+    "@popperjs/core": "^2.9.2"
   },
   "peerDependencies": {
     "styled-components": ">= 5"

packages/react-component-library/src/components/DatePicker/DatePicker.stories.tsx

@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions'
 import { Field, Formik, Form } from 'formik'
 
 import { withFormik } from '../../enhancers/withFormik'
-import { DatePicker, DatePickerProps, DATEPICKER_PLACEMENT } from '.'
+import { DatePicker, DatePickerProps } from '.'
 
 import { Button } from '../Button'
 
@@ -14,6 +14,16 @@ export default {
   title: 'Date Picker',
   parameters: {
     actions: { argTypesRegex: '^on.*' },
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'aria-required-attr',
+            enabled: false,
+          },
+        ],
+      },
+    },
   },
 } as Meta
 
@@ -24,26 +34,20 @@ export const Default: Story<DatePickerProps> = (props) => (
 Default.args = {
   id: undefined,
   startDate: undefined,
-  placement: DATEPICKER_PLACEMENT.BELOW,
 }
 
 export const CustomFormat: Story<DatePickerProps> = (props) => (
   <DatePicker
     {...props}
     format="yyyy/MM/dd"
     startDate={new Date(2021, 0, 11)}
-    placement={DATEPICKER_PLACEMENT.BELOW}
   />
 )
 
 CustomFormat.storyName = 'Custom format'
 
 export const CustomInitialMonth: Story<DatePickerProps> = (props) => (
-  <DatePicker
-    {...props}
-    initialMonth={new Date(2021, 1)}
-    placement={DATEPICKER_PLACEMENT.BELOW}
-  />
+  <DatePicker {...props} initialMonth={new Date(2021, 1)} />
 )
 
 CustomInitialMonth.storyName = 'Custom initial month'

packages/react-component-library/src/components/DatePicker/DatePicker.test.tsx

@@ -10,7 +10,7 @@ import {
 import 'jest-styled-components'
 import userEvent from '@testing-library/user-event'
 
-import { DatePicker, DATEPICKER_PLACEMENT } from '.'
+import { DatePicker } from '.'
 
 const NOW = '2019-12-05T11:00:00.000Z'
 
@@ -38,6 +38,7 @@ describe('DatePicker', () => {
   }) {
     it('updates the ARIA attributes on the input button', () => {
       const button = wrapper.getByTestId('datepicker-input-button')
+
       const dayPickerId = wrapper
         .getByTestId('floating-box-content')
         .getAttribute('id')
@@ -73,7 +74,6 @@ describe('DatePicker', () => {
         <>
           <DatePicker
             startDate={startDate}
-            placement={DATEPICKER_PLACEMENT.BELOW}
             onChange={onChange}
             onBlur={onBlur}
           />
@@ -118,7 +118,9 @@ describe('DatePicker', () => {
     })
 
     it('renders the component', () => {
-      expect(wrapper.queryByTestId('datepicker-wrapper')).toBeInTheDocument()
+      expect(
+        wrapper.queryByTestId('datepicker-input-wrapper')
+      ).toBeInTheDocument()
     })
 
     it('renders the correct sequence of days', () => {
@@ -157,10 +159,9 @@ describe('DatePicker', () => {
 
         it('hides the day picker container', () => {
           return waitFor(() => {
-            expect(wrapper.getByTestId('floating-box')).toHaveStyleRule(
-              'opacity',
-              '0'
-            )
+            expect(
+              wrapper.queryByTestId('floating-box-content')
+            ).not.toBeVisible()
           })
         })
       })
@@ -212,10 +213,9 @@ describe('DatePicker', () => {
 
         it('hides the day picker container', () => {
           return waitFor(() => {
-            expect(wrapper.getByTestId('floating-box')).toHaveStyleRule(
-              'opacity',
-              '0'
-            )
+            expect(
+              wrapper.queryByTestId('floating-box-content')
+            ).not.toBeVisible()
           })
         })
 
@@ -580,9 +580,7 @@ describe('DatePicker', () => {
     beforeEach(() => {
       label = 'Custom Label'
 
-      wrapper = render(
-        <DatePicker label={label} placement={DATEPICKER_PLACEMENT.BELOW} />
-      )
+      wrapper = render(<DatePicker label={label} />)
     })
 
     it('renders that label accordingly', () => {
@@ -592,9 +590,7 @@ describe('DatePicker', () => {
 
   describe('when isDisabled prop is provided', () => {
     beforeEach(() => {
-      wrapper = render(
-        <DatePicker placement={DATEPICKER_PLACEMENT.BELOW} isDisabled />
-      )
+      wrapper = render(<DatePicker isDisabled />)
     })
 
     it('applies the cursor not-allowed style rule', () => {
@@ -617,7 +613,6 @@ describe('DatePicker', () => {
       wrapper = render(
         <DatePicker
           startDate={new Date(2019, 11, 10)}
-          placement={DATEPICKER_PLACEMENT.BELOW}
           onChange={onChange}
           isRange
         />