refactor: rename OptionallyVisuallyHiddenContainer to OptionalVisuall…

…yHiddenWrapper to match naming to CSSWrapper and make more grammatical sense

lib/src/components/data-table/DataTableGlobalFilter.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { debounce } from 'throttle-debounce'
 
-import { OptionallyVisuallyHiddenContainer } from '../../utilities/optionally-visually-hidden-container'
+import { OptionalVisuallyHiddenWrapper } from '../../utilities/optional-visually-hidden-wrapper'
 import { Label } from '../label'
 import { SearchInput } from '../search-input'
 import { AsyncDataState } from './DataTable.types'
@@ -43,11 +43,11 @@ export const DataTableGlobalFilter: React.FC<DataTableSearchProps> = ({
 
   return (
     <>
-      <OptionallyVisuallyHiddenContainer hidden={hideLabel}>
+      <OptionalVisuallyHiddenWrapper hidden={hideLabel}>
         <Label css={{ mb: '$3' }} htmlFor={label}>
           {label}
         </Label>
-      </OptionallyVisuallyHiddenContainer>
+      </OptionalVisuallyHiddenWrapper>
       <SearchInput
         {...props}
         defaultValue={globalFilter}

lib/src/utilities/optional-visually-hidden-wrapper/OptionalVisuallyHiddenWrapper.test.tsx

@@ -0,0 +1,30 @@
+import { render } from '@testing-library/react'
+import * as React from 'react'
+
+import { OptionalVisuallyHiddenWrapper } from '.'
+
+const OptionalVisuallyHiddenWrapperImplementation = (props) => {
+  return (
+    <OptionalVisuallyHiddenWrapper {...props}>
+      <p>hello</p>
+    </OptionalVisuallyHiddenWrapper>
+  )
+}
+
+describe('OptionalVisuallyHidden component', () => {
+  it('renders hidden content', async () => {
+    const { container } = render(
+      <OptionalVisuallyHiddenWrapperImplementation hidden />
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders visible content', async () => {
+    const { container } = render(
+      <OptionalVisuallyHiddenWrapperImplementation />
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+})

lib/src/utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.tsx → lib/src/utilities/optional-visually-hidden-wrapper/OptionalVisuallyHiddenWrapper.tsx

@@ -1,7 +1,7 @@
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
 import * as React from 'react'
 
-export const OptionallyVisuallyHiddenContainer: React.FC<{
+export const OptionalVisuallyHiddenWrapper: React.FC<{
   hidden?: boolean
 }> = ({ children, hidden = false }) => {
   if (hidden) return <VisuallyHidden.Root>{children}</VisuallyHidden.Root>
@@ -13,3 +13,5 @@ export const OptionallyVisuallyHiddenContainer: React.FC<{
     <>{children}</>
   ) : null
 }
+
+OptionalVisuallyHiddenWrapper.displayName = 'OptionalVisuallyHiddenWrapper'

lib/src/utilities/optionally-visually-hidden-container/__snapshots__/OptionallyVisuallyHiddenContainer.test.tsx.snap → lib/src/utilities/optional-visually-hidden-wrapper/__snapshots__/OptionalVisuallyHiddenWrapper.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TopBar component renders hidden content 1`] = `
+exports[`OptionalVisuallyHidden component renders hidden content 1`] = `
 <div>
   <span
     style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
@@ -12,7 +12,7 @@ exports[`TopBar component renders hidden content 1`] = `
 </div>
 `;
 
-exports[`TopBar component renders visible content 1`] = `
+exports[`OptionalVisuallyHidden component renders visible content 1`] = `
 <div>
   <p>
     hello

lib/src/utilities/optional-visually-hidden-wrapper/index.ts

@@ -0,0 +1 @@
+export { OptionalVisuallyHiddenWrapper } from './OptionalVisuallyHiddenWrapper'