@telus-uds/components-base 1.7.0 → 1.8.1

package/__tests__/utils/useSpacingScale.test.jsx

@@ -1,273 +0,0 @@
-import React from 'react'
-import { renderHook } from '@testing-library/react-hooks'
-import { useSpacingScale } from '../../src/utils'
-import Theme from '../../__fixtures__/Theme'
-import Viewport from '../../__fixtures__/Viewport'
-
-describe('useSpacingScale', () => {
-  // values from testTheme.js
-  const expectedDefaultScale = [0, 4, 8, 16, 24, 32, 36]
-  const expectedCompactScale = [0, 2, 4, 6, 8, 10, 12]
-  const expectedResponsiveScale = {
-    xs: [0, 1, 2, 3, 4, 5, 6],
-    sm: [0, 3, 4, 5, 6, 7, 8],
-    md: [0, 3, 4, 5, 6, 7, 8],
-    lg: [0, 7, 8, 9, 10, 11, 12],
-    xl: [0, 7, 8, 9, 10, 11, 12]
-  }
-
-  const wrapper = ({ children, viewport }) => (
-    <Viewport viewport={viewport}>
-      <Theme>{children}</Theme>
-    </Viewport>
-  )
-
-  it.each(expectedDefaultScale.map((item, index) => [item, index]))(
-    'returns the expected size index %# from the theme spacing scale',
-    (expectedSize, index) => {
-      const { result } = renderHook(() => useSpacingScale(index), {
-        wrapper
-      })
-      expect(result.current).toBe(expectedSize)
-    }
-  )
-  it.each(expectedCompactScale.map((item, index) => [item, index]))(
-    'returns the expected size index %# from the theme spacing scale in a variant',
-    (expectedSize, index) => {
-      const { result } = renderHook(
-        () => useSpacingScale({ space: index, options: { variant: { compact: true } } }),
-        {
-          wrapper
-        }
-      )
-      expect(result.current).toBe(expectedSize)
-    }
-  )
-  it.each(Object.entries(expectedResponsiveScale))(
-    'returns appropriate sizes from a responsive theme variant at %p viewport',
-    (viewport, expectedValues) => {
-      const { result, rerender } = renderHook(({ spacingValue }) => useSpacingScale(spacingValue), {
-        wrapper
-      })
-      expectedValues.forEach((expectedSize, index) => {
-        rerender({
-          viewport,
-          spacingValue: { space: index, options: { variant: { responsive: true } } }
-        })
-        expect(result.current).toBe(expectedSize)
-      })
-    }
-  )
-
-  it('returns the 0 index when passed a nullish spacing value', () => {
-    const { result, rerender } = renderHook((spacingValue) => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    // implicit undefined
-    expect(result.current).toBe(expectedDefaultScale[0])
-    // explicit undefined
-    rerender(undefined)
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender(null)
-    expect(result.current).toBe(expectedDefaultScale[0])
-
-    // confim this test isn't a false positive misuing rerender etc
-    rerender(1)
-    expect(result.current).toBe(expectedDefaultScale[1])
-  })
-  it('returns the 0 index when passed a nullish spacing value in a variant', () => {
-    const { result, rerender } = renderHook((spacingValue) => useSpacingScale(spacingValue), {
-      wrapper,
-      initialProps: { options: { variant: { compact: true } } }
-    })
-    // implicit undefined
-    expect(result.current).toBe(expectedCompactScale[0])
-    // explicit undefined
-    rerender({ space: undefined, options: { variant: { compact: true } } })
-    expect(result.current).toBe(expectedCompactScale[0])
-    rerender({ space: null, options: { variant: { compact: true } } })
-    expect(result.current).toBe(expectedCompactScale[0])
-
-    // confim this test isn't a false positive misuing rerender etc
-    rerender({ space: 1, options: { variant: { compact: true } } })
-    expect(result.current).toBe(expectedCompactScale[1])
-  })
-
-  it('returns the highest index when passed an out-of-bounds spacing index', () => {
-    const { result } = renderHook(() => useSpacingScale(99), {
-      wrapper
-    })
-    expect(result.current).toBe(expectedDefaultScale[expectedDefaultScale.length - 1])
-  })
-  it('returns the highest index when passed an out-of-bounds spacing index in a variant', () => {
-    const { result } = renderHook(
-      () => useSpacingScale({ space: 99, options: { variant: { compact: true } } }),
-      {
-        wrapper
-      }
-    )
-    expect(result.current).toBe(expectedCompactScale[expectedDefaultScale.length - 1])
-  })
-
-  it('returns viewport indexes that explicitly match current viewport', () => {
-    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[2])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[4])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[5])
-  })
-  it('returns viewport indexes that explicitly match current viewport in a variant', () => {
-    const spacingValue = {
-      xs: 1,
-      sm: 2,
-      md: 3,
-      lg: 4,
-      xl: 5,
-      options: { variant: { compact: true } }
-    }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedCompactScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[2])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[4])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[5])
-  })
-
-  it('returns viewport indexes that implicitly match current viewport', () => {
-    const spacingValue = { xs: 1, md: 3 }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[1])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-  })
-  it('returns viewport indexes that implicitly match current viewport in a variant', () => {
-    const spacingValue = { xs: 1, md: 3, options: { variant: { compact: true } } }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedCompactScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[1])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-  })
-
-  it('chooses smallest provided viewport index if viewport is unavailable', () => {
-    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
-    const { result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: null, spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[1])
-  })
-  it('chooses 0 index if current viewport matches no provided index', () => {
-    const spacingValue = { lg: 4 }
-    const { result, rerender } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[4])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[4])
-  })
-
-  it('subtracts a provided value from a spacing scale value', () => {
-    const spacingValue = { viewport: 'xs', space: 2, options: { subtract: 3 } }
-    const { result } = renderHook(() => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    expect(result.current).toBe(expectedDefaultScale[2] - 3)
-  })
-  it('subtracts a provided value from a spacing scale value in a variant', () => {
-    const spacingValue = {
-      space: 4,
-      options: { subtract: 3, variant: { compact: true } }
-    }
-    const { result } = renderHook(() => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    expect(result.current).toBe(expectedCompactScale[4] - 3)
-  })
-  it('returns 0 if a subtraction would result in a negative number', () => {
-    const spacingValue = { space: 2, options: { subtract: 999 } }
-    const { result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { spacingValue }
-    })
-    expect(result.current).toBe(0)
-  })
-
-  it('gives an exact amount if `size` option is passed', () => {
-    const size = 123456
-    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, options: { size } }
-    const compactSpacingValue = { ...spacingValue, options: { size, variant: { compact: true } } }
-    const { result, rerender } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'xs', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'sm', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'md', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'lg', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'xl', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-  })
-  it('subtracts from size if `subtract` and `size` options are provided', () => {
-    const size = 123456
-    const subtract = 12345
-    const spacingValue = { options: { size, subtract } }
-    const { result } = renderHook(() => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    expect(result.current).toBe(size - subtract)
-  })
-})

package/__tests__/utils/useUniqueId.test.js

@@ -1,31 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks'
-import useUniqueId from '../../lib/utils/useUniqueId'
-
-describe('useUniqueId hook', () => {
-  it('returns the same id for each re-render, but a different id for a new instance', () => {
-    const { result, rerender } = renderHook(() => useUniqueId('prefix'))
-
-    expect(result.current).toBe('prefix-1')
-
-    rerender()
-
-    expect(result.current).toBe('prefix-1')
-
-    // has to be done within the same test case, as we can't ensure order in which tests are being run in parallel
-    const { result: result2, rerender: rerender2 } = renderHook(() => useUniqueId('prefix'))
-
-    expect(result.current).toBe('prefix-1')
-    expect(result2.current).toBe('prefix-2')
-
-    // ensure that instances' rerendering doesn't affect one another
-    rerender2()
-
-    expect(result.current).toBe('prefix-1')
-    expect(result2.current).toBe('prefix-2')
-
-    rerender()
-
-    expect(result.current).toBe('prefix-1')
-    expect(result2.current).toBe('prefix-2')
-  })
-})

package/babel.config.js

@@ -1,35 +0,0 @@
-module.exports = (api) => {
-  // configuration for jest
-  if (api.env('test')) {
-    return {
-      presets: ['module:metro-react-native-babel-preset']
-    }
-  }
-
-  // Default to CJS for docs generators etc; build as ESM modules when requested.
-  const isModule = api.env('module')
-
-  return {
-    presets: [
-      ['@babel/preset-react', { runtime: 'automatic' }],
-      [
-        '@babel/preset-env',
-        {
-          // `false` in babel env options means preserve ESM import / export syntax
-          // https://babeljs.io/docs/en/babel-preset-env#modules
-          modules: isModule ? false : 'cjs'
-        }
-      ]
-    ],
-    plugins: [
-      [
-        'react-native-web',
-        {
-          // Use the build of React Native Web that matches our build. ESM prefered, for treeshaking etc.
-          // Be careful not to have both RNW builds in an app as init will run twice, shuffling styles.
-          commonjs: !isModule
-        }
-      ]
-    ]
-  }
-}

package/generate-component-docs.js

@@ -1,72 +0,0 @@
-const fs = require('fs')
-const schema = require('@telus-uds/system-theme-tokens')
-const allExports = require('./src')
-
-const { a11yProps } = allExports
-const a11yPropTypes = Object.keys(a11yProps.types)
-
-const parseComponentDocs = (name, generated) => {
-  const { description } = generated // TODO parse markdown and split by heading
-  const props = {} // store derived prop data
-  const attributes = {
-    // any other computed attributes
-    acceptsRNA11yProps: a11yPropTypes.every((key) => key in generated.props)
-  }
-
-  Object.entries(generated.props).forEach(([propName, prop]) => {
-    if (prop.description?.includes('@ignore')) {
-      return // remove ignored props
-    }
-    if (attributes.acceptsRNA11yProps && a11yPropTypes.includes(propName)) {
-      return // remove a11y props if all supported (there are 30+, instead we have the above attribute to show this)
-    }
-
-    const out = { ...prop }
-
-    // check if this prop references the tokens schema;
-    // this regex extracts unquoted parameter strings from function
-    // calls like `getTokensPropType('ChevronLink', 'Link')` with the result
-    // being an array: `['ChevronLink', 'Link']`
-    const tokensProp = out.type?.raw?.match(/(?<=getTokensPropType\(.*)(\w+)+(?=.*\))/gs)
-
-    // if so, try and read the schema from the base components
-    if (tokensProp && tokensProp.length > 0) {
-      let raw = {}
-
-      tokensProp.forEach((componentName) => {
-        if (!schema.components[componentName]) {
-          // this would be a run-time error in the base components
-          throw new Error(
-            `Unknown schema component reference: ${componentName} from component: ${name}`
-          )
-        }
-        raw = { ...raw, ...schema.components[componentName] }
-      })
-      out.type = { ...out.type, raw }
-    }
-    props[propName] = out
-  })
-
-  return { docs: { description, props, attributes } }
-}
-
-const components = {}
-
-Object.entries(allExports).forEach(([name, exp]) => {
-  // fail fast with meaningful error on typos, missing exports, etc
-  if (!exp) throw new Error(`components-base export "${name}" is ${exp} (typeof ${typeof exp})`)
-
-  if (exp.__docgenInfo) {
-    // populated by babel-plugin-react-docgen
-    components[name] = parseComponentDocs(name, exp.__docgenInfo)
-
-    // check for second-level components e.g List.Item (can only be on a component)
-    Object.entries(exp).forEach(([subComponentName, prop]) => {
-      if (prop.__docgenInfo) {
-        components[name][subComponentName] = parseComponentDocs(subComponentName, prop.__docgenInfo)
-      }
-    })
-  }
-}, {})
-
-fs.writeFileSync('./component-docs.json', JSON.stringify({ schema, components }, null, 2))

package/jest.config.js

@@ -1,32 +0,0 @@
-const preset = require('react-native/jest-preset')
-const name = require('./package.json').name.split('@telus-uds/').pop()
-
-// cherry-pick the bits of the preset we want to avoid it overriding the fix we have on L14
-module.exports = {
-  haste: preset.haste,
-  displayName: {
-    name,
-    color: 'blue'
-  },
-  setupFiles: preset.setupFiles,
-  transform: {
-    // Use babel-jest instead of react-native/jest/preprocessor.js so that the coverage report is correct as per:
-    //  https://github.com/facebook/react-native/issues/20404#issuecomment-593392763
-    //  https://kulshekhar.github.io/ts-jest/docs/guides/react-native/#jest-config
-    // __dirname here tells babel to look in components-base for babel root when running from monorepo root
-    '\\.(js|jsx)$': ['babel-jest', { cwd: __dirname }]
-  },
-  setupFilesAfterEnv: [
-    '@testing-library/jest-native/extend-expect',
-    // Fail tests that use console.error or console.warn
-    '<rootDir>/../../jest-no-console'
-  ],
-  moduleNameMapper: {
-    '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy'
-  },
-  transformIgnorePatterns: [
-    'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|@react-native-picker)'
-  ],
-  // Count everything in src when calculating coverage
-  collectCoverageFrom: ['src/**/*.{js,jsx}']
-}

package/stories/A11yText/A11yText.stories.jsx

@@ -1,71 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-
-import A11yText from '../../src/A11yText'
-import { Button, Typography } from '../../src'
-import { EachParentType, parentTypesParams } from '../supports'
-
-const defaultArgs = {
-  text: 'This text is for screen readers,',
-  heading: false
-}
-
-export default {
-  title: 'A11yText',
-  component: A11yText,
-  parameters: defaultArgs
-}
-
-const Template = (args) => (
-  <>
-    <View style={styles.border}>
-      <Typography>Some text visible to all users. A11yText is after this.</Typography>
-    </View>
-    <A11yText {...args} />
-    <View style={styles.border}>
-      <Typography>Enable a screen reader to access the text before this.</Typography>
-    </View>
-    <View style={styles.border}>
-      <Typography>There is no A11yText before this line.</Typography>
-    </View>
-  </>
-)
-
-export const Default = (args) => <A11yText {...args} />
-Default.storyName = 'A11yText'
-Default.args = defaultArgs
-
-export const A11yTextInText = Template.bind({})
-A11yTextInText.args = defaultArgs
-
-export const A11yTextAsHeading = Template.bind({})
-A11yTextAsHeading.args = { ...defaultArgs, heading: true }
-
-export const A11yTextInButton = (args) => (
-  <Button onPress={() => {}}>
-    <A11yText {...args} />
-    A11yText sandwich
-    <A11yText {...args} />
-  </Button>
-)
-A11yTextInButton.args = defaultArgs
-
-export const ParentTypes = (args) => (
-  <EachParentType {...args}>
-    {({ label }) => <Template {...args} key={label} text={label} />}
-  </EachParentType>
-)
-ParentTypes.args = defaultArgs
-ParentTypes.parameters = parentTypesParams
-
-const styles = StyleSheet.create({
-  // Use borders so any hairline gaps created by A11yText are visible
-  border: {
-    borderWidth: 1,
-    borderColor: 'rgb(220, 220, 220)'
-  },
-  row: {
-    flexDirection: 'row'
-  }
-})

package/stories/ActivityIndicator/ActivityIndicator.stories.jsx

@@ -1,22 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { ActivityIndicator } from '../../src'
-import { EachParentType, parentTypesParams } from '../supports'
-
-export default {
-  title: 'ActivityIndicator',
-  component: ActivityIndicator,
-  args: {
-    label: 'loading...'
-  }
-}
-
-export const Default = (args) => <ActivityIndicator {...args} />
-Default.storyName = 'ActivityIndicator'
-
-export const ParentTypes = (args) => (
-  <EachParentType {...args}>
-    {({ label }) => <ActivityIndicator {...args} label={label} />}
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams

package/stories/Box/Box.stories.jsx

@@ -1,143 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-
-import { View, StyleSheet } from 'react-native'
-import { Box, Typography } from '../../src'
-import {
-  spacingObjectArg,
-  Container,
-  Placeholder,
-  EachParentType,
-  parentTypesParams
-} from '../supports'
-
-export default {
-  title: 'Box',
-  component: Box
-}
-
-const Template = (args) => (
-  <Container margin={0} padding={0} borderWidth={1} offWhite>
-    <Box {...args}>
-      <Placeholder>Box</Placeholder>
-    </Box>
-  </Container>
-)
-
-const ScrollTemplate = (args) => (
-  <View style={styles.fixedHeight}>
-    <Box {...args}>
-      <Placeholder>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-        labore et dolore magna aliqua. Nulla aliquet porttitor lacus luctus accumsan tortor posuere
-        ac. Feugiat scelerisque varius morbi enim nunc faucibus a. Nec tincidunt praesent semper
-        feugiat. Sed sed risus pretium quam vulputate dignissim. Id nibh tortor id aliquet lectus
-        proin nibh nisl. Mattis ullamcorper velit sed ullamcorper morbi. Eu nisl nunc mi ipsum
-        faucibus. Non pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus.
-        Integer enim neque volutpat ac tincidunt vitae semper. Pretium quam vulputate dignissim
-        suspendisse in est. Amet venenatis urna cursus eget nunc scelerisque. Molestie at elementum
-        eu facilisis sed. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae
-        semper quis lectus nulla. Leo a diam sollicitudin tempor id eu nisl nunc mi. Venenatis
-        tellus in metus vulputate eu scelerisque. Dapibus ultrices in iaculis nunc sed. Blandit
-        turpis cursus in hac habitasse platea dictumst. Nam at lectus urna duis convallis. Mi proin
-        sed libero enim sed faucibus turpis in. Molestie at elementum eu facilisis sed odio. Auctor
-        elit sed vulputate mi sit amet mauris commodo quis. Commodo nulla facilisi nullam vehicula
-        ipsum a arcu cursus. Quisque egestas diam in arcu cursus euismod quis viverra. Mauris vitae
-        ultricies leo integer malesuada nunc. Mauris cursus mattis molestie a. Mauris augue neque
-        gravida in fermentum. Elit ut aliquam purus sit amet luctus venenatis. Elementum eu
-        facilisis sed odio morbi quis commodo. Lorem donec massa sapien faucibus. Arcu cursus
-        euismod quis viverra nibh cras pulvinar mattis nunc. Ultricies mi eget mauris pharetra et
-        ultrices neque. Accumsan lacus vel facilisis volutpat est velit egestas. Morbi tincidunt
-        augue interdum velit euismod in. Eget mauris pharetra et ultrices neque ornare aenean
-        euismod elementum. Sed risus pretium quam vulputate dignissim suspendisse in est. Egestas
-        pretium aenean pharetra magna ac placerat vestibulum. Tortor id aliquet lectus proin nibh.
-        Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien.
-        Non curabitur gravida arcu ac tortor. Amet nulla facilisi morbi tempus iaculis urna id. Quam
-        elementum pulvinar etiam non quam. Eleifend mi in nulla posuere sollicitudin aliquam
-        ultrices. Diam maecenas sed enim ut sem viverra aliquet. Suspendisse sed nisi lacus sed
-        viverra tellus in hac. Eu consequat ac felis donec et. Viverra adipiscing at in tellus
-        integer feugiat. Sit amet mauris commodo quis imperdiet. Tristique senectus et netus et
-        malesuada fames. Dolor sit amet consectetur adipiscing elit duis. Gravida in fermentum et
-        sollicitudin ac orci. Amet consectetur adipiscing elit duis tristique. Viverra vitae congue
-        eu consequat. Ridiculus mus mauris vitae ultricies leo integer malesuada. Viverra mauris in
-        aliquam sem fringilla ut morbi tincidunt augue. Donec adipiscing tristique risus nec
-        feugiat. Rhoncus aenean vel elit scelerisque. Maecenas volutpat blandit aliquam etiam erat
-        velit scelerisque in. Risus feugiat in ante metus dictum at tempor commodo ullamcorper. Et
-        malesuada fames ac turpis. Augue lacus viverra vitae congue eu consequat ac felis donec. Sit
-        amet mauris commodo quis imperdiet massa tincidunt nunc. Vulputate dignissim suspendisse in
-        est. Arcu ac tortor dignissim convallis aenean et. Mauris augue neque gravida in fermentum
-        et. Velit egestas dui id ornare. Tincidunt eget nullam non nisi est sit amet facilisis
-        magna. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras.
-      </Placeholder>
-    </Box>
-  </View>
-)
-
-const styles = StyleSheet.create({
-  fixedHeight: { height: 200, overflow: 'hidden' }
-})
-
-export const Default = (args) => <Box {...args} />
-Default.storyName = 'Box'
-Default.args = { children: <Typography>Box</Typography> }
-// By default the JSX object is shown as a huge human-unreadable JSON tree control; turn it off
-Default.argTypes = { children: { control: { disable: true } } }
-
-export const Top = Template.bind({})
-Top.args = {
-  top: spacingObjectArg
-}
-
-export const Bottom = Template.bind({})
-Bottom.args = {
-  bottom: spacingObjectArg
-}
-
-export const Left = Template.bind({})
-Left.args = {
-  left: spacingObjectArg
-}
-
-export const Right = Template.bind({})
-Right.args = {
-  right: spacingObjectArg
-}
-
-export const Horizontal = Template.bind({})
-Horizontal.args = {
-  horizontal: spacingObjectArg
-}
-
-export const Vertical = Template.bind({})
-Vertical.args = {
-  vertical: spacingObjectArg
-}
-
-export const AllSides = Template.bind({})
-AllSides.args = {
-  space: spacingObjectArg
-}
-
-export const Scroll = ScrollTemplate.bind({})
-Scroll.args = {
-  scroll: true
-}
-
-export const NoScroll = ScrollTemplate.bind({})
-NoScroll.args = {
-  scroll: false
-}
-
-export const ParentTypes = (args) => (
-  <EachParentType componentThemeName="Box" {...args}>
-    {({ label, variant }) => (
-      <Container key={label} margin={0} padding={0} borderWidth={1} dark>
-        <Box {...args} variant={variant}>
-          <Placeholder>{label}</Placeholder>
-        </Box>
-      </Container>
-    )}
-  </EachParentType>
-)
-ParentTypes.args = { space: 2 }
-ParentTypes.parameters = parentTypesParams