@telus-uds/components-base 1.0.0 → 1.2.0

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -0,0 +1,203 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import ABBPropTypes from 'airbnb-prop-types'
+import { Platform } from 'react-native'
+
+import ToggleSwitch from './ToggleSwitch'
+import Fieldset from '../Fieldset'
+import { getStackedContent } from '../StackView'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider'
+import { a11yProps, pressProps, variantProp, getTokensPropType } from '../utils/propTypes'
+import { useMultipleInputValues } from '../utils/input'
+
+const ToggleSwitchGroup = forwardRef(
+  (
+    {
+      variant,
+      tokens,
+      items = [],
+      values,
+      initialValues,
+      maxValues = 1,
+      onChange,
+      readOnly = false,
+      inactive = false,
+      feedback,
+      hint,
+      tooltip,
+      legend,
+      name: inputGroupName,
+      accessibilityRole = maxValues === 1
+        ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
+        : Platform.select({ web: 'group', default: 'none' }),
+      toggleSwitchTokens,
+      validation,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+
+    const { space, fieldSpace } = useThemeTokens('ToggleSwitchGroup', tokens, variant, {
+      viewport
+    })
+
+    const { currentValues, toggleOneValue } = useMultipleInputValues({
+      initialValues,
+      values,
+      maxValues,
+      onChange,
+      readOnly
+    })
+
+    const a11y = a11yProps.select({
+      accessibilityRole,
+      ...rest
+    })
+    const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'switch'
+
+    const toggleSwitches = items.map(
+      (
+        {
+          label,
+          id = label,
+          accessibilityLabel = label,
+          onChange: itemOnChange,
+          ref: itemRef,
+          tooltip: itemTooltip
+        },
+        index
+      ) => {
+        const isSelected = currentValues.includes(id)
+
+        const handleChange = (newCheckedState, event) => {
+          if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
+          toggleOneValue(id, event)
+        }
+
+        const itemA11y = {
+          accessibilityState: { checked: isSelected },
+          accessibilityRole: itemA11yRole,
+          accessibilityLabel,
+          ...a11yProps.getPositionInSet(items.length, index)
+        }
+
+        return (
+          <ToggleSwitch
+            id={id}
+            ref={itemRef}
+            key={id}
+            onChange={handleChange}
+            tokens={toggleSwitchTokens}
+            value={isSelected}
+            inactive={inactive}
+            label={label}
+            tooltip={itemTooltip}
+            {...itemA11y}
+          />
+        )
+      }
+    )
+
+    return (
+      <Fieldset
+        ref={ref}
+        name={inputGroupName}
+        legend={legend}
+        tooltip={tooltip}
+        hint={hint}
+        space={fieldSpace}
+        feedback={feedback}
+        inactive={inactive}
+        validation={validation}
+        {...a11y}
+      >
+        {getStackedContent(toggleSwitches, { space, direction: 'column' })}
+      </Fieldset>
+    )
+  }
+)
+ToggleSwitchGroup.displayName = 'ToggleSwitchGroup'
+
+ToggleSwitchGroup.propTypes = {
+  ...a11yProps.propTypes,
+  ...pressProps.propTypes,
+  tokens: getTokensPropType('ToggleSwitchGroup'),
+  variant: variantProp.propType,
+  /**
+   * The maximum number of items a user may select at once. Defaults to 1 and behaves
+   * like radio buttons. To have no limit and allow any number of selections, pass `null`.
+   */
+  maxValues: PropTypes.number,
+  /**
+   * The options a user may select
+   */
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      /**
+       * The text displayed to the user on the label.
+       */
+      label: PropTypes.string.isRequired,
+      /**
+       * An optional accessibility label may be passed to each ToggleSwitch
+       * and will be applied as normal for a React Native accessibilityLabel prop.
+       */
+      accessibilityLabel: PropTypes.string,
+      /**
+       * An optional unique string may be provided to identify this option,
+       * which will be used in code and passed to any onChange function.
+       * If not provided, the label is used.
+       */
+      id: PropTypes.string,
+      /**
+       * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
+       */
+      ref: ABBPropTypes.ref()
+    })
+  ),
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: PropTypes.func,
+  /**
+   * If the selected item(s) in the toggle switch group are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the ToggleSwitchGroup a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * If `values` is not passed, making the ToggleSwitchGroup an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: PropTypes.string,
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: PropTypes.string,
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: PropTypes.string,
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: PropTypes.string,
+  /**
+   * Toggle switch token overrides.
+   */
+  toggleSwitchTokens: getTokensPropType('ToggleSwitch'),
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: PropTypes.oneOf(['error', 'success'])
+}
+
+export default ToggleSwitchGroup

package/src/ToggleSwitch/index.js

@@ -1,3 +1,4 @@
 import ToggleSwitch from './ToggleSwitch'
+import ToggleSwitchGroup from './ToggleSwitchGroup'
 
-export default ToggleSwitch
+export { ToggleSwitch, ToggleSwitchGroup }

package/src/index.js

@@ -17,7 +17,7 @@ export * from './Icon'
 export { default as IconButton } from './IconButton'
 export { default as InputLabel } from './InputLabel'
 export * from './Link'
-export { default as List } from './List'
+export { default as List, ListItem, ListBase } from './List'
 export { default as Modal } from './Modal'
 export { default as Notification } from './Notification'
 export { default as Pagination } from './Pagination'
@@ -37,7 +37,7 @@ export { default as StepTracker } from './StepTracker'
 export { default as Tabs } from './Tabs'
 export { default as Tags } from './Tags'
 export * from './TextInput'
-export { default as ToggleSwitch } from './ToggleSwitch'
+export * from './ToggleSwitch'
 export { default as Tooltip } from './Tooltip'
 export { default as TooltipButton } from './TooltipButton'
 export { default as Typography } from './Typography'

package/src/utils/a11y/propTypes.js

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types'
+
+import nativePropTypes from './propTypes.native'
+
+export default {
+  ...nativePropTypes,
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  accessibilityActiveDescendant: PropTypes.string,
+  accessibilityAtomic: PropTypes.bool,
+  accessibilityAutoComplete: PropTypes.string,
+  accessibilityBusy: PropTypes.bool,
+  accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: PropTypes.number,
+  accessibilityColumnIndex: PropTypes.number,
+  accessibilityColumnSpan: PropTypes.number,
+  accessibilityControls: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityDetails: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  accessibilityErrorMessage: PropTypes.string,
+  accessibilityExpanded: PropTypes.bool,
+  accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityHasPopup: PropTypes.string,
+  accessibilityHidden: PropTypes.bool,
+  accessibilityInvalid: PropTypes.bool,
+  accessibilityKeyShortcuts: PropTypes.string,
+  accessibilityLabelledBy: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityLevel: PropTypes.number,
+  accessibilityModal: PropTypes.bool,
+  accessibilityMultiline: PropTypes.bool,
+  accessibilityMultiSelectable: PropTypes.bool,
+  accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityPlaceholder: PropTypes.string,
+  accessibilityPosInSet: PropTypes.number,
+  accessibilityPressed: PropTypes.bool,
+  accessibilityReadOnly: PropTypes.bool,
+  accessibilityRequired: PropTypes.bool,
+  accessibilityRoleDescription: PropTypes.string,
+  accessibilityRowCount: PropTypes.number,
+  accessibilityRowIndex: PropTypes.number,
+  accessibilityRowSpan: PropTypes.number,
+  accessibilitySelected: PropTypes.bool,
+  accessibilitySetSize: PropTypes.number,
+  accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: PropTypes.number,
+  accessibilityValueMin: PropTypes.number,
+  accessibilityValueNow: PropTypes.number,
+  accessibilityValueText: PropTypes.string
+}

package/src/utils/a11y/propTypes.native.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types'
+
+// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
+// so we have to define them ourselves.
+export default {
+  accessible: PropTypes.bool,
+  focusable: PropTypes.bool,
+
+  accessibilityElementsHidden: PropTypes.bool,
+  accessibilityHint: PropTypes.string, // react-native-web ignores `accessibilityHint`
+  accessibilityIgnoresInvertColors: PropTypes.bool,
+  accessibilityLabel: PropTypes.string,
+  accessibilityRole: PropTypes.string,
+  accessibilityActions: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      label: PropTypes.string
+    })
+  ),
+  accessibilityLiveRegion: PropTypes.oneOf(['none', 'polite', 'assertive']),
+  accessibilityState: PropTypes.shape({
+    disabled: PropTypes.bool,
+    selected: PropTypes.bool,
+    checked: PropTypes.oneOf([true, false, 'mixed']),
+    busy: PropTypes.bool,
+    expanded: PropTypes.bool
+  }),
+  accessibilityValue: PropTypes.shape({
+    min: PropTypes.number,
+    max: PropTypes.number,
+    now: PropTypes.number,
+    text: PropTypes.string
+  }),
+  accessibilityViewIsModal: PropTypes.bool,
+  importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
+  onAccessibilityAction: PropTypes.func,
+  onAccessibilityEscape: PropTypes.func,
+  onAccessibilityTap: PropTypes.func
+}

package/src/utils/index.js

@@ -12,3 +12,4 @@ export { default as useSpacingScale } from './useSpacingScale'
 export { default as useResponsiveProp } from './useResponsiveProp'
 export * from './useResponsiveProp'
 export { default as useUniqueId } from './useUniqueId'
+export { default as withLinkRouter } from './withLinkRouter'

package/src/utils/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import { Linking, Platform } from 'react-native'
 import { components as tokenKeys } from '@telus-uds/system-theme-tokens'
+import a11yPropTypes from './a11y/propTypes'
 
 export const paddingProp = {
   propType: PropTypes.shape({
@@ -202,116 +203,6 @@ function getPropSelector(propTypes, regexp) {
     )
 }
 
-// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
-// so we have to define them ourselves.
-const a11yPropTypes = {
-  accessible: PropTypes.bool,
-  focusable: PropTypes.bool,
-
-  accessibilityElementsHidden: PropTypes.bool,
-  accessibilityHint: PropTypes.string, // react-native-web ignores `accessibilityHint`
-  accessibilityIgnoresInvertColors: PropTypes.bool,
-  accessibilityLabel: PropTypes.string,
-  accessibilityRole: PropTypes.string,
-  accessibilityActions: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      label: PropTypes.string
-    })
-  ),
-  accessibilityLiveRegion: PropTypes.oneOf(['none', 'polite', 'assertive']),
-  accessibilityState: PropTypes.shape({
-    disabled: PropTypes.bool,
-    selected: PropTypes.bool,
-    checked: PropTypes.oneOf([true, false, 'mixed']),
-    busy: PropTypes.bool,
-    expanded: PropTypes.bool
-  }),
-  accessibilityValue: PropTypes.shape({
-    min: PropTypes.number,
-    max: PropTypes.number,
-    now: PropTypes.number,
-    text: PropTypes.string
-  }),
-  accessibilityViewIsModal: PropTypes.bool,
-  importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
-  onAccessibilityAction: PropTypes.func,
-  onAccessibilityEscape: PropTypes.func,
-  onAccessibilityTap: PropTypes.func,
-  ...Platform.select({
-    web: {
-      // React Native Web adds many a11y props that alias aria-* attributes
-      // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
-      accessibilityActiveDescendant: PropTypes.string,
-      accessibilityAtomic: PropTypes.bool,
-      accessibilityAutoComplete: PropTypes.string,
-      accessibilityBusy: PropTypes.bool,
-      accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
-      accessibilityColumnCount: PropTypes.number,
-      accessibilityColumnIndex: PropTypes.number,
-      accessibilityColumnSpan: PropTypes.number,
-      accessibilityControls: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
-      ]),
-      accessibilityCurrent: PropTypes.oneOf([
-        true,
-        false,
-        'page',
-        'step',
-        'location',
-        'date',
-        'time'
-      ]),
-      accessibilityDescribedBy: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
-      ]),
-      accessibilityDetails: PropTypes.string,
-      accessibilityDisabled: PropTypes.bool,
-      accessibilityErrorMessage: PropTypes.string,
-      accessibilityExpanded: PropTypes.bool,
-      accessibilityFlowTo: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
-      ]),
-      accessibilityHasPopup: PropTypes.string,
-      accessibilityHidden: PropTypes.bool,
-      accessibilityInvalid: PropTypes.bool,
-      accessibilityKeyShortcuts: PropTypes.string,
-      accessibilityLabelledBy: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
-      ]),
-      accessibilityLevel: PropTypes.number,
-      accessibilityModal: PropTypes.bool,
-      accessibilityMultiline: PropTypes.bool,
-      accessibilityMultiSelectable: PropTypes.bool,
-      accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
-      accessibilityOwns: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
-      ]),
-      accessibilityPlaceholder: PropTypes.string,
-      accessibilityPosInSet: PropTypes.number,
-      accessibilityPressed: PropTypes.bool,
-      accessibilityReadOnly: PropTypes.bool,
-      accessibilityRequired: PropTypes.bool,
-      accessibilityRoleDescription: PropTypes.string,
-      accessibilityRowCount: PropTypes.number,
-      accessibilityRowIndex: PropTypes.number,
-      accessibilityRowSpan: PropTypes.number,
-      accessibilitySelected: PropTypes.bool,
-      accessibilitySetSize: PropTypes.number,
-      accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
-      accessibilityValueMax: PropTypes.number,
-      accessibilityValueMin: PropTypes.number,
-      accessibilityValueNow: PropTypes.number,
-      accessibilityValueText: PropTypes.string
-    }
-  })
-}
-
 export const a11yProps = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
@@ -429,6 +320,36 @@ export const pressProps = {
   selectHandlers: getPropSelector(pressHandlerPropTypes)
 }
 
+const clickHandlerMapping = {
+  onClick: 'onPress',
+  mouseDown: 'onPressIn',
+  mouseUp: 'onPressOut'
+}
+
+export const clickProps = {
+  /**
+   * Web-oriented HTML click handlers that may be mapped to React Native press handlers
+   */
+  types: Object.fromEntries(
+    Object.keys(clickHandlerMapping).map((mouseName) => [mouseName, PropTypes.func])
+  ),
+  /**
+   * Takes a set of props and converts HTML mouse click oriented event handlers to closest
+   * equivalent React Native press event handler.
+   *
+   * Use this when a component that expects press-oriented props may need to support third-party
+   * web-oriented tooling that injects web-oriented event handlers directly. For example, for
+   * to support use with NextJS's 'next/link' component, which injects `onClick` prop into its child.
+   */
+  toPressProps: (props) =>
+    Object.fromEntries(
+      Object.entries(props).map(([originalName, value]) => {
+        const translatedName = clickHandlerMapping[originalName]
+        return translatedName ? [translatedName, value] : [originalName, value]
+      })
+    )
+}
+
 const linkPropTypes = {
   ...pressPropTypes,
   href: PropTypes.string,
@@ -470,7 +391,8 @@ const viewPropTypes = {
   pointerEvents: PropTypes.oneOf(['all', 'none', 'box-only', 'box-none']),
   onLayout: PropTypes.func,
   nativeID: PropTypes.string,
-  testID: PropTypes.string
+  testID: PropTypes.string,
+  dataSet: PropTypes.object
 }
 
 export const viewProps = {

package/src/utils/withLinkRouter.jsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+// Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
+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 = forwardRef(({ LinkRouter, linkRouterProps, ...props }, ref) => {
+    if (!LinkRouter) return <Component {...props} ref={ref} />
+    return (
+      <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

@@ -12,7 +12,7 @@ const defaultArgs = {
 }
 
 export default {
-  title: 'Base/A11yText',
+  title: 'A11yText',
   component: A11yText,
   parameters: defaultArgs
 }

package/stories/ActivityIndicator/ActivityIndicator.stories.jsx

@@ -4,7 +4,7 @@ import { ActivityIndicator } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/ActivityIndicator',
+  title: 'ActivityIndicator',
   component: ActivityIndicator,
   args: {
     label: 'loading...'

package/stories/Box/Box.stories.jsx

@@ -12,7 +12,7 @@ import {
 } from '../supports'
 
 export default {
-  title: 'Base/Box',
+  title: 'Box',
   component: Box
 }
 

package/stories/Button/Button.stories.jsx

@@ -10,7 +10,7 @@ Default.storyName = 'Button'
 const defaultLabel = "I'm a button"
 
 export default {
-  title: 'Base/Button',
+  title: 'Button',
   component: Button,
   args: {
     // eslint-disable-next-line no-console

package/stories/Button/ButtonGroup.stories.jsx

@@ -22,7 +22,7 @@ const defaultControlledArgs = {
 }
 
 export default {
-  title: 'Base/ButtonGroup',
+  title: 'ButtonGroup',
   component: ButtonGroup,
   args: {
     ...defaultArgs

package/stories/Button/ButtonLink.stories.jsx

@@ -3,7 +3,7 @@ import { ButtonLink } from '../../src'
 import { Container, useVariants } from '../supports'
 
 export default {
-  title: 'Base/ButtonLink',
+  title: 'ButtonLink',
   component: ButtonLink,
   args: {
     children: "I'm a button link",

package/stories/Card/Card.stories.jsx

@@ -6,7 +6,7 @@ import { Card } from '../../src'
 import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Card',
+  title: 'Card',
   component: Card
 }
 

package/stories/Checkbox/Checkbox.stories.jsx

@@ -5,7 +5,7 @@ import { Checkbox, CheckboxGroup, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Checkbox',
+  title: 'Checkbox',
   component: Checkbox,
   argTypes: {
     checked: {

package/stories/Divider/Divider.stories.jsx

@@ -5,7 +5,7 @@ import { Divider, Typography } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Divider',
+  title: 'Divider',
   component: Divider
 }
 

package/stories/ExpandCollapse/ExpandCollapse.stories.jsx

@@ -6,7 +6,7 @@ import { Container, EachParentType, parentTypesParams } from '../supports'
 import { useMultipleInputValues } from '../../src/utils'
 
 export default {
-  title: 'Base/ExpandCollapse',
+  title: 'ExpandCollapse',
   component: ExpandCollapse,
   args: {
     children: () => {}