@telus-uds/components-base 1.8.0 → 1.8.3

package/lib-module/utils/useCopy.js

@@ -1,42 +0,0 @@
-export const DEFAULT_COPY = 'en';
-/**
- * Extract translations from a keyed dictionary for a given language.
- * Returns a getter.
- *
- * @example
- * const getCopy = useCopy({
- *   copy: 'en',
- *   dictionary: {
- *     en: { label: 'english label' },
- *     fr: { label: 'french label' }
- *   }
- * })
- *
- * getCopy('label') => 'english label'
- *
- * @description The entire dictionary may be overridden by simply passing a single language object as `copy`:
- * @example
- * const getCopy = useCopy({
- *   copy: { label: 'custom label' }
- * })
- *
- * getCopy('label') => 'custom label'
- *
- * @param {object} [dictionary]
- * @param {'en'|'fr'|object} copy - language
- * @return {function(string): string}
- */
-
-function useCopy({
-  dictionary,
-  copy = DEFAULT_COPY
-}) {
-  if (typeof copy === 'string') {
-    return key => key ? dictionary[copy][key] : dictionary[copy];
-  } // support overriding the entire copy dictionary with an object for a single language
-
-
-  return key => copy[key];
-}
-
-export default useCopy;

package/lib-module/utils/useHash.js

@@ -1,44 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const doAction = (action, event) => {
-  var _window, _window$location;
-
-  return typeof action === 'function' && action((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hash, event);
-};
-/**
- * @typedef {import('react').SyntheticEvent} SyntheticEvent
- */
-
-/**
- * Calls a function (passing it the current hash) based on the current hash state on mount,
- * and binds it to call it again any time the hash changes.
- *
- * Consider using `useCallback` on the function to minimise adding and removing of event listeners.
- *
- * On Native, this is replaced with a harmless no-op function as there is no direct equivalent.
- *
- * @param {(hash: string, event?: SyntheticEvent) => void} action - a function to act on the current hash on load and when it changes
- * @returns
- */
-
-
-const useHash = (action, isReady = true) => {
-  const [isDone, setIsDone] = useState(false); // Do the action just once when ready after component mount, from hash on page load
-
-  const isToDo = isReady && !isDone;
-  useEffect(() => {
-    if (isToDo) {
-      setIsDone(true);
-      doAction(action);
-    }
-  }, [isToDo, action]); // Bind the action for each hash change; do re-bind if the function changes.
-
-  useEffect(() => {
-    const handleChange = event => doAction(action, event);
-
-    window.addEventListener('hashchange', handleChange);
-    return () => window.removeEventListener('hashchange', handleChange);
-  }, [action]);
-};
-
-export default useHash;

package/lib-module/utils/useHash.native.js

@@ -1,7 +0,0 @@
-/**
- * No URL hashes on Native, so do a no-op. Remembering scenes for reloads
- * is handled at OS level and deep links have completely different usage.
- */
-const useHash = () => {};
-
-export default useHash;

package/lib-module/utils/useResponsiveProp.js

@@ -1,47 +0,0 @@
-import { viewports } from '@telus-uds/system-constants';
-import { useViewport } from '../ViewportProvider';
-
-const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key);
-
-const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwn(objectProp, key));
-/**
- * Resolves a prop which may be a responsive object with keys for viewports.
- *
- * Used internally in useResponsiveProp - see that for more details.
- *
- * @param {*} prop
- * @param {"xs"|"sm"|"md"|"lg"|"xl"} viewport
- * @param {*} [defaultValue]
- * @returns {*}
- */
-
-
-export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
-  if (prop === undefined) return defaultValue;
-  if (!prop || typeof prop !== 'object' || !hasResponsiveProperties(prop)) return prop;
-  const value = viewports.keys.includes(viewport) ? // If there's a current viewport, return the closest match at or below it
-  viewports.inherit(prop)[viewport] : // If no current viewport is available, default to smallest viewport
-  prop[viewports.keys.find(key => hasOwn(prop, key))];
-  return value === undefined ? defaultValue : value;
-};
-/**
- * Takes any value and, if that value is a responsive prop (an object with one or more
- * keys matching system viewport names), returns the value corresponding to the largest
- * viewport key smaller than the current screen's viewport.
- *
- * For example, if passed `{ sm: 4, lg: 8 }`, it will return 8 on `xl` and `lg` viewports,
- * 4 on `md` and `sm` viewports, and `undefined` (or a provided `defaultValue`) on `xs` viewports.
- *
- * To generate propTypes for responsive props, see `responsiveProps` in `./utils/props/responsiveProps.js`.
- *
- * @param {*} prop - any value which may be an object with viewport keys
- * @param {*} [defaultValue] - default value to provide if no matches found for the current viewport
- * @returns {*}
- */
-
-const useResponsiveProp = (prop, defaultValue) => {
-  const viewport = useViewport();
-  return resolveResponsiveProp(prop, viewport, defaultValue);
-};
-
-export default useResponsiveProp;

package/lib-module/utils/useSpacingScale.js

@@ -1,123 +0,0 @@
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { resolveResponsiveProp } from './useResponsiveProp';
-/**
- * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
- * @typedef {import('./props/spacingProps.js').SpacingValue} SpacingValue
- * @typedef {import('./props/spacingProps.js').SpacingIndex} SpacingIndex
- * @typedef {import('./props/spacingProps.js').SpacingObject} SpacingObject
- * @typedef {import('./props/spacingProps.js').SpacingOptions} SpacingOptions
- */
-
-const resolveSpacingOptions = space => {
-  if (!(space !== null && space !== void 0 && space.options)) return {};
-  const {
-    size,
-    variant,
-    subtract = 0
-  } = space.options;
-  const overridden = typeof size === 'number'; // Might need an option that adapts the size value by current user's system font scale, so that
-  // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
-  // https://github.com/telus/universal-design-system/issues/583
-
-  return {
-    tokens: {
-      size
-    },
-    variant,
-    overridden,
-    subtract
-  };
-};
-/**
- * Pass a {@link SpacingValue}, which is one of:
- *
- * - A number 0-11 ({@link SpacingIndex}) pointing to an index on the theme's spacing scale
- * - Or, an object ({@link SpacingObject}), with optional properties:
- *   -  `xs`, `sm`, `md`, `lg`, `xl`: {@link SpacingIndex} to apply at or above these specified {@link Viewport}
- *   - `options`: an optional {@link SpacingOptions} object, see below
- *   - `space`: a {@link SpacingIndex} to apply to all viewports (can be used alongside `options`)
- *
- * ## Example
- *
- * If the theme's spacing scale is `[0, 4, 8, 12, 16, 24, 48]` with no theme rules:
- *
- * - `useSpacingScale(0)` returns `0`
- * - `useSpacingScale(2)` returns `8`
- * - `useSpacingScale({ xs: 3, lg: 4 })` returns `12` at 'xs', 'sm' or 'md' viewports, and `16` at 'lg' or 'xl'.
- *
- * These viewport properties are intended to support case-specific responsive layout changes, for example, where a
- * grid item drops or adds spacing on a particular side at viewports where the parent changes the layout shape.
- *
- * ## Theming
- *
- * A theme's `'spacingScale'` has theme rules and appearances same as components, and may support `viewport`.
- * For example, a theme with the following rule would change index [2] above from `8` to `12` on large viewports:
- *
- * ```json
- * { if: { space: 2, viewport: ['lg', 'xl'] }, tokens: { size: 12 }}
- * ```
- *
- * Setting responsive spacing in the theme is the preferred way to adapt the aesthetic tightness or looseness of
- * a theme to the available space without changing the shape of the layout itself.
- *
- * ## Options
- *
- * Space values passed as objects may have an `options` key, with the following optional properties:
- *
- * - `variant`: Themes may choose to have spacing scale variants, same as variants in component themes.
- *   For example, if a theme rule contains `{ if: { space: 2, compact: true }, tokens: { size: 6 }}`,
- *   this tighter spacing can be accessed with:
- *
- * ```jsx
- * const compactSize = useSpacingScale({ space: 2, options: { variant: { compact: true }}})`
- * ```
- *
- * - `subtract`: Sometimes on-brand spacing needs to be reduced by another value to achieve an on-brand result.
- *   For example, a component with a variable border may want to subtract its border width from its padding so
- *   the total distance from content edge to bounding box is a valid theme value, regardless of border width:
- *
- * ```jsx
- * const padding = useSpacingScale({ space: 2, options: { subtract: themeTokens.borderWidth }})
- * ```
- *
- * - `size`: In exceptional cases, the theme's spacing scale may be bypassed by passing a `size` option.
- *   This can result in layouts that may be rejected for being off-brand so should only be used as a
- *   last resort for fixing layout problems (e.g. when working around non-branded embedded content).
- *   Where possible, fixing layout issues using a spacing scale value and the `subtract` option is preferred.
- *
- * ```jsx
- * // Comments should be included when `size` is used, stating why this off-brand size is needed
- * const iframeOffset = useSpacingScale({ options: { size: 13 }})`
- * ```
- *
- * ## References
- *
- * `/ADRs/inter-component-spacing/README.md` - ADR on this structure
- *
- * @param {SpacingValue} [spaceValue] - a {@link SpacingIndex} number, or a {@link SpacingObject}
- * @returns {number}
- */
-
-
-const useSpacingScale = spaceValue => {
-  // In future, may need to consider window height as well as width, particularly for native apps,
-  // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
-  const viewport = useViewport();
-  const {
-    tokens,
-    variant,
-    overridden,
-    subtract = 0
-  } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? resolveResponsiveProp(spaceValue, viewport, 0));
-  const {
-    size
-  } = useThemeTokens('spacingScale', tokens, variant, {
-    space: typeof space === 'number' ? space : 0,
-    viewport
-  });
-  return Math.max(size - subtract, 0);
-};
-
-export default useSpacingScale;

package/lib-module/utils/useUniqueId.js

@@ -1,12 +0,0 @@
-import { useState } from 'react';
-let id = 0;
-
-function useUniqueId(prefix = '') {
-  const [uniqueId] = useState(() => {
-    id += 1;
-    return `${prefix}-${id}`;
-  });
-  return uniqueId;
-}
-
-export default useUniqueId;

package/lib-module/utils/withLinkRouter.js

@@ -1,82 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types'; // Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
-
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop);
-/**
- * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
- * This may be used to provide custom wrappers for integrations with third party libraries.
- *
- * If LinkRouter is passed, LinkRouter is rendered in place of the main component and is passed:
- *
- *  - `linkRouterProps`: an optional object passed alongside LinkRouter, for props needed by the wrapper
- *    that are not valid props for the wrapped component.
- *  - `Component`: automatically provided, the original component to render inside the wrapper.
- *  - `ref`: forwarded `ref` passed down to `Component`
- *  - All other props passed to the outer component
- *
- * @example A LinkRouter component to be used with link-like components might look like:
- *
- * ```jsx
- * const LinkLinkRouter = forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
- *   const { href: resolvedHref, onClick } = useSomeRouterHook({ to, href, options })
- *   return <Component href={resolvedHref} onPress={onClick} {...rest} />
- * })
- * ```
- *
- * Any component that takes href and onPress props may then use this wrapper:
- *
- * ```jsx
- * <Link href={href} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }}>Some link</Link>
- * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
- * ```
- */
-
-
-const withLinkRouter = Component => {
-  const wrappedComponent = /*#__PURE__*/forwardRef(({
-    LinkRouter,
-    linkRouterProps,
-    ...props
-  }, ref) => {
-    if (!LinkRouter) return /*#__PURE__*/_jsx(Component, { ...props,
-      ref: ref
-    });
-    return /*#__PURE__*/_jsx(LinkRouter, {
-      linkRouterProps: linkRouterProps,
-      Component: Component,
-      ref: ref,
-      ...props
-    });
-  }); // Ensure the returned component has appropriate outer properties set:
-
-  /* eslint-disable-next-line react/forbid-foreign-prop-types */
-
-  const {
-    displayName,
-    name,
-    propTypes,
-    ...otherProperties
-  } = Component; // Apply unique component name as a displayName
-
-  wrappedComponent.displayName = Component.displayName || Component.name; // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
-
-  wrappedComponent.propTypes = { ...Component.propTypes,
-    ...withLinkRouter.propTypes
-  }; // Forward any other properties explicitly set e.g. Component.SubComponent
-
-  Object.keys(otherProperties).forEach(key => {
-    // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
-    if (hasOwnProperty(Component, key) && !hasOwnProperty(wrappedComponent, key)) {
-      wrappedComponent[key] = Component[key];
-    }
-  });
-  return wrappedComponent;
-};
-
-withLinkRouter.propTypes = {
-  LinkRouter: PropTypes.elementType,
-  linkRouterProps: PropTypes.object
-};
-export default withLinkRouter;

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

package/stories/Button/Button.stories.jsx

@@ -1,72 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { Button, useTheme } from '../../src'
-import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
-import { getComponentTheme } from '../../src/ThemeProvider/utils'
-
-export const Default = (args) => <Button {...args} />
-Default.storyName = 'Button'
-
-const defaultLabel = "I'm a button"
-
-export default {
-  title: 'Button',
-  component: Button,
-  args: {
-    // eslint-disable-next-line no-console
-    onPress: () => console.log('Button pressed'),
-    children: defaultLabel,
-    variant: {}, // @TODO work out why this isn't coming from jsdoc
-    tokens: {}
-  }
-}
-
-const VariantsTemplate = (args) => {
-  const theme = useTheme()
-  const buttonTheme = getComponentTheme(theme, 'Button')
-  const getLabel = (label) => (args.children !== defaultLabel ? args.children : label)
-
-  // Show button's theme variants and 'inactive' state if the theme supports it
-  const variants = useVariants('Button')
-  const buttonVariants = variants.map(([key, value, label]) => (
-    <Container key={`${key}:${value}`} padding={16} dark={key === 'inverse'}>
-      <Button {...args} variant={{ [key]: value }}>
-        {getLabel(`Button ${label}`)}
-      </Button>
-    </Container>
-  ))
-
-  if (buttonTheme.appearances.inactive) {
-    buttonVariants.push(
-      <Container key="inactive" padding={16}>
-        <Button {...args} inactive>
-          {getLabel('Inactive Button')}
-        </Button>
-      </Container>
-    )
-  }
-  return buttonVariants
-}
-
-export const ButtonVariants = VariantsTemplate.bind({})
-
-export const LongLabelButtonVariants = VariantsTemplate.bind({})
-LongLabelButtonVariants.args = {
-  children: 'This button has a label that is much longer than is considered advisable'
-}
-
-export const ShortLabelButtonVariants = VariantsTemplate.bind({})
-ShortLabelButtonVariants.args = {
-  children: 'k'
-}
-
-export const ParentTypes = (args) => (
-  <EachParentType componentThemeName="Button" {...args}>
-    {({ label, variant }) => (
-      <Button {...args} key={label} variant={variant}>
-        {label}
-      </Button>
-    )}
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams