@telus-uds/components-base 1.1.0 → 1.3.1

package/lib-module/SideNav/ItemContent.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Typography from '../Typography';
+import { selectTokens, getTokensPropType } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function selectAccentStyles(tokens) {
+  return {
+    left: tokens.accentOffset,
+    top: tokens.accentPadding,
+    bottom: tokens.accentPadding,
+    backgroundColor: tokens.accentBackgroundColor,
+    width: tokens.accentWidth,
+    position: 'absolute'
+  };
+}
+/**
+ * Content inside an item or control in a SideNav, themed by the SideNavItem theme
+ */
+
+const ItemContent = ({
+  children,
+  tokens
+}) => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Typography, {
+    tokens: selectTokens('Typography', tokens),
+    children: children
+  }), /*#__PURE__*/_jsx(View, {
+    style: [staticStyles.absolute, selectAccentStyles(tokens)]
+  })]
+});
+
+ItemContent.propTypes = {
+  tokens: getTokensPropType('SideNavItem'),
+  children: PropTypes.node
+};
+const staticStyles = StyleSheet.create({
+  absolute: {
+    position: 'absolute'
+  }
+});
+export default ItemContent;

package/lib-module/SideNav/ItemsGroup.js

@@ -0,0 +1,115 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import ItemContent from './ItemContent';
+import ExpandCollapse from '../ExpandCollapse';
+import { getTokensPropType, variantProp, componentPropType, selectTokens } from '../utils';
+import { useThemeTokensCallback } from '../ThemeProvider';
+/**
+ Expandable content areas for use within `SideNav`.
+
+ This component can only be accessed as a name-spaced component: `SideNav.ItemsGroup`.
+
+ `SideNav.ItemsGroup` contains a label and a list of items. Items can link to in-page elements or route to other pages.
+
+ ## Usage Criteria
+ - Use `SideNav.ItemsGroup` with large pages that have multiple sections
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const ItemsGroup = /*#__PURE__*/forwardRef(({
+  children,
+  label,
+  openGroups,
+  groupId,
+  isActive = false,
+  variant,
+  tokens,
+  itemTokens,
+  onToggle
+}, ref) => {
+  // A SideNav control uses the same style and theme as SideNavItem, with a 'parent' variant,
+  // plus control-specific tokens from the SideNavItemsGroup theme (e.g. open/close icon, etc).
+  const getAppearance = appearance => ({ ...variant,
+    ...appearance,
+    active: isActive
+  });
+
+  const getItemAppearance = appearance => ({ ...getAppearance(appearance),
+    type: 'parent'
+  });
+
+  const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant);
+
+  const getPanelTokens = appearance => selectTokens('ExpandCollapsePanel', getGroupTokens(getAppearance(appearance)));
+
+  const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant);
+
+  const getControlTokens = appearance => selectTokens('ExpandCollapseControl', { ...getItemTokens(getItemAppearance(appearance)),
+    // main style from SideNavItem
+    ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
+
+  });
+
+  const controlContent = controlState => {
+    const currentItemTokens = getItemTokens(getItemAppearance(controlState));
+    return /*#__PURE__*/_jsx(ItemContent, {
+      tokens: currentItemTokens,
+      children: label
+    });
+  };
+
+  return /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
+    ref: ref,
+    openIds: openGroups,
+    panelId: groupId,
+    onToggle: onToggle,
+    tokens: getPanelTokens,
+    controlTokens: getControlTokens,
+    control: controlContent,
+    accessibilityState: {
+      active: isActive
+    } // ExpandCollapse.Panel handles expanded state
+    ,
+    children: children
+  });
+});
+ItemsGroup.displayName = 'ItemsGroup';
+ItemsGroup.propTypes = {
+  /**
+   * Specifies the links contained within. It may only contain `SideNav.Item`.
+   */
+  children: componentPropType('Item'),
+
+  /**
+   * Text content of the group's parent `SideNav.Item`.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * @ignore
+   * Set internally in `SideNav` render function - used to keep track of expanded items groups.
+   */
+  groupId: PropTypes.string,
+
+  /**
+   * @ignore
+   * Set internally in `SideNav` render function. Called when the group is expanded/collapsed.
+   */
+  onToggle: PropTypes.func,
+
+  /**
+   * @ignore
+   * Set internally in `SideNav` render function. Contains `groupId`s of currently open groups.
+   */
+  openGroups: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+
+  /**
+   * @ignore
+   * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNav.Item`.
+   */
+  isActive: PropTypes.bool,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('SideNavItemsGroup'),
+  itemTokens: getTokensPropType('SideNavItem')
+};
+export default ItemsGroup;

package/lib-module/SideNav/SideNav.js

@@ -0,0 +1,133 @@
+import React, { forwardRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import ExpandCollapse from '../ExpandCollapse';
+import Item from './Item';
+import ItemsGroup from './ItemsGroup';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, componentPropType, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function selectBorderStyles(tokens) {
+  return {
+    borderBottomWidth: tokens.borderWidth,
+    borderBottomStyle: tokens.borderStyle,
+    borderBottomColor: tokens.borderColor
+  };
+}
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ ## Usage Criteria
+ - Use in conjunction with a large amount of educational / informational content
+ - Allow the user to navigate between options frequently and efficiently
+ */
+
+const SideNav = /*#__PURE__*/forwardRef(({
+  children,
+  variant = {},
+  tokens,
+  accordion = true,
+  itemTokens,
+  groupTokens,
+  ...rest
+}, ref) => {
+  const themeTokens = useThemeTokens('SideNav', tokens, variant);
+  const [active, setActive] = useState({
+    groupId: undefined,
+    itemId: undefined
+  });
+
+  const onItemPress = (itemId, groupId) => {
+    setActive({
+      itemId,
+      groupId
+    });
+  };
+
+  const isItemActive = (itemId, groupId) => {
+    return active.groupId === groupId && active.itemId === itemId;
+  };
+
+  return /*#__PURE__*/_jsx(ExpandCollapse, {
+    ref: ref,
+    maxOpen: accordion ? 1 : null,
+    style: selectBorderStyles(themeTokens),
+    ...selectProps(rest),
+    children: ({
+      openIds,
+      onToggle
+    }) => {
+      const renderItem = (item, index, groupId) => {
+        const {
+          itemId = `item-${index}`,
+          onPress
+        } = item.props;
+
+        const handlePress = (...args) => {
+          onItemPress(...args);
+          if (onPress) onPress(...args);
+        };
+
+        return /*#__PURE__*/_createElement(Item, { ...item.props,
+          key: itemId,
+          itemId: itemId,
+          groupId: groupId,
+          variant: groupId ? { ...variant,
+            type: 'child'
+          } : variant,
+          tokens: itemTokens,
+          isActive: isItemActive(itemId, groupId),
+          onPress: handlePress
+        });
+      };
+
+      return React.Children.map(children, (child, index) => {
+        // iterate over children and identify them internally to later reference expanded groups and active items
+        if (child.type === Item) return renderItem(child, index);
+
+        if (child.type === ItemsGroup) {
+          const {
+            groupId = `group-${index}`
+          } = child.props;
+          const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
+
+          const handleToggle = event => onToggle(groupId, event);
+
+          return /*#__PURE__*/_createElement(ItemsGroup, { ...child.props,
+            key: groupId,
+            groupId: groupId,
+            variant: variant,
+            tokens: groupTokens,
+            itemTokens: itemTokens,
+            openGroups: openIds,
+            isActive: isGroupActive,
+            onToggle: handleToggle
+          }, React.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
+        }
+
+        return null;
+      });
+    }
+  });
+});
+SideNav.displayName = 'SideNav';
+SideNav.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`.
+   */
+  children: componentPropType(['Item', 'ItemsGroup']),
+
+  /**
+   * Identifies if only one `SideNav.ItemsGroup` should be open at a time.
+   */
+  accordion: PropTypes.bool,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('SideNav'),
+  itemTokens: getTokensPropType('SideNavItem'),
+  groupTokens: getTokensPropType('SideNavItemsGroup')
+};
+SideNav.Item = Item;
+SideNav.ItemsGroup = ItemsGroup;
+export default SideNav;

package/lib-module/SideNav/index.js

@@ -0,0 +1 @@
+export { default } from './SideNav';

package/lib-module/Skeleton/Skeleton.js

@@ -0,0 +1,117 @@
+import React, { forwardRef } from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import Platform from "react-native-web/dist/exports/Platform";
+import propTypes from 'prop-types';
+import StackView from '../StackView';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, useSpacingScale, variantProp, viewProps } from '../utils';
+import useSkeletonNativeAnimation from './useSkeletonNativeAnimation';
+import skeletonWebAnimation from './skeletonWebAnimation';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const selectSkeletonStyles = ({
+  color,
+  radius,
+  fadeAnimation
+}) => ({
+  backgroundColor: color,
+  borderRadius: radius,
+  ...fadeAnimation
+});
+
+const selectLineStyles = ({
+  skeletonHeight,
+  lineWidth
+}) => ({
+  width: lineWidth,
+  height: skeletonHeight
+});
+
+const selectShapeStyles = ({
+  skeletonHeight
+}) => ({
+  height: skeletonHeight,
+  width: skeletonHeight
+});
+
+const selectSquareStyles = ({
+  radius
+}) => ({
+  borderRadius: radius
+});
+
+const Skeleton = /*#__PURE__*/forwardRef(({
+  tokens,
+  variant,
+  size,
+  characters,
+  lines,
+  shape = 'line',
+  ...rest
+}, ref) => {
+  const themeTokens = useThemeTokens('Skeleton', tokens, variant);
+  const skeletonHeight = useSpacingScale(size || themeTokens.size);
+  const nativeAnimation = useSkeletonNativeAnimation();
+
+  const getAnimationBaseOnPlatform = () => {
+    if (Platform.OS !== 'web') {
+      return nativeAnimation;
+    }
+
+    return skeletonWebAnimation;
+  };
+
+  const getLineWidth = () => {
+    if (characters) {
+      return characters * themeTokens.baseWidth;
+    }
+
+    return themeTokens.characters * themeTokens.baseWidth;
+  };
+
+  const getStyledBasedOnShape = () => {
+    if (shape === 'circle') {
+      return selectShapeStyles({
+        skeletonHeight
+      });
+    }
+
+    if (shape === 'box') {
+      return [selectShapeStyles({
+        skeletonHeight
+      }), selectSquareStyles({
+        radius: themeTokens.squareRadius
+      })];
+    }
+
+    return selectLineStyles({
+      skeletonHeight,
+      lineWidth: getLineWidth()
+    });
+  };
+
+  const renderSkeleton = (index = 0) => /*#__PURE__*/_jsx(Animated.View, {
+    testID: "skeleton",
+    style: [selectSkeletonStyles({ ...themeTokens,
+      fadeAnimation: getAnimationBaseOnPlatform()
+    }), getStyledBasedOnShape()]
+  }, `skeleton-${index + 1}`);
+
+  return /*#__PURE__*/_jsx(StackView, {
+    space: themeTokens.spaceBetweenLines,
+    ref: ref,
+    ...selectProps(rest),
+    children: lines > 1 ? [...Array(lines)].map((_, index) => renderSkeleton(index)) : renderSkeleton()
+  });
+});
+Skeleton.displayName = 'Skeleton';
+Skeleton.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Skeleton'),
+  variant: variantProp.propType,
+  size: propTypes.number,
+  characters: propTypes.number,
+  lines: propTypes.number,
+  shape: propTypes.oneOf(['line', 'circle', 'box'])
+};
+export default Skeleton;

package/lib-module/Skeleton/index.js

@@ -0,0 +1,2 @@
+import Skeleton from './Skeleton';
+export default Skeleton;

package/lib-module/Skeleton/skeleton.constant.js

@@ -0,0 +1,3 @@
+export const DEFAULT_OPACITY = 1;
+export const OPACITY_STOP = 0.4;
+export const ANIMATION_DURATION = 1500;

package/lib-module/Skeleton/skeletonWebAnimation.js

@@ -0,0 +1,18 @@
+import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
+export default {
+  animationDuration: `${ANIMATION_DURATION}ms`,
+  animationTimingFunction: 'ease-in-out',
+  animationDelay: '0.5s',
+  animationIterationCount: 'infinite',
+  animationKeyframes: {
+    '0%': {
+      opacity: DEFAULT_OPACITY
+    },
+    '50%': {
+      opacity: OPACITY_STOP
+    },
+    '100%': {
+      opacity: DEFAULT_OPACITY
+    }
+  }
+};

package/lib-module/Skeleton/useSkeletonNativeAnimation.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
+
+const useSkeletonNativeAnimation = () => {
+  const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current;
+  useEffect(() => {
+    const fade = Animated.sequence([Animated.timing(fadeAnimation, {
+      toValue: OPACITY_STOP,
+      duration: ANIMATION_DURATION,
+      useNativeDriver: true
+    }), Animated.timing(fadeAnimation, {
+      toValue: DEFAULT_OPACITY,
+      duration: ANIMATION_DURATION,
+      useNativeDriver: true
+    })]);
+    Animated.loop(fade).start();
+  }, [fadeAnimation]);
+  return {
+    opacity: fadeAnimation
+  };
+};
+
+export default useSkeletonNativeAnimation;

package/lib-module/Spacer/Spacer.js

@@ -0,0 +1,97 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps } from '../utils';
+/**
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const selectSizeStyle = (size, direction) => ({
+  // Only apply space in one direction at a time, else large spacers will increase the
+  // 'across' size of the parent and mess up siblings with styles like `alignItems: stretch`.
+  [direction === 'row' ? 'width' : 'height']: size
+});
+/**
+ * An empty element used to create a gap between components that is sized according to the theme spacing scale,
+ * passing its `space` prop ({@link SpacingValue}) to `useSpacingScale`.
+ *
+ * ## Simple spacing
+ *
+ * For most simple uses, pass a number to Spacer's `space` prop referring to an index in the theme's
+ * spacing scale. For example, for a spacer of the theme's smallest non-zero spacing size:
+ *
+ * ```jsx
+ * <Spacer space={1} />
+ * ```
+ *
+ * ## Responsive spacing
+ *
+ * Different spacing scale sizes may be chosen for different viewports by passing `space` a {@link SpacingObject}
+ * using keys for the viewports at and above which certain spacing indexes should apply.
+ *
+ * This can be useful when a Spacer is inside a layout with a shape that changes between viewports.
+ *
+ * For example, a spacer might need no width below 'md' viewport because the items it separates will be on separate lines,
+ * but may need a visible size above that viewport, and a wider size at the highest viewport:
+ *
+ * ```jsx
+ * <Spacer space={{ xs: 0, md: 2, xl: 3 }} />
+ * ```
+ *
+ * Note that themes may also define viewport-specific behaviour for indexes on the spacing scale. These viewport
+ * props should only be used where necessary to achieve a certain responsive layoutm and shouldn't be used to replace
+ * or deviate from responsive spacing behaviour in a theme that is intended to apply universally.
+ *
+ * ## More options
+ *
+ * See `useSpacingScale` hook for more options that may be used with the `space` prop.
+ *
+ * ## Accessibility
+ *
+ * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
+ * separations between elements that may be treated as semantically meaningful on web.
+ */
+
+
+const Spacer = /*#__PURE__*/forwardRef(({
+  space = 1,
+  direction = 'column',
+  ...rest
+}, ref) => {
+  const size = useSpacingScale(space);
+  const sizeStyle = selectSizeStyle(size, direction);
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [staticStyles.stretch, sizeStyle],
+    ...selectProps(rest)
+  });
+});
+Spacer.displayName = 'Spacer';
+Spacer.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The size of the spacer according to the theme's spacing scale.
+   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
+   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
+   */
+  space: spacingProps.types.spacingValue,
+
+  /**
+   * The spacer applies space in only one direction, which is controlled by the `direction` prop:
+   *
+   * - `'column'` (default) applies space vertically; has a fixed height and not width.
+   * - `'row'` applies space horizontally; has a fixed width and not height.
+   */
+  direction: PropTypes.oneOf(['column', 'row'])
+};
+const staticStyles = StyleSheet.create({
+  stretch: {
+    alignSelf: 'stretch'
+  }
+});
+export default Spacer;

package/lib-module/Spacer/index.js

@@ -0,0 +1,2 @@
+import Spacer from './Spacer';
+export default Spacer;

package/lib-module/StackView/StackView.js

@@ -0,0 +1,124 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import Divider from '../Divider';
+import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, variantProp, viewProps } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import getStackedContent from './getStackedContent';
+import { staticStyles, selectFlexStyles } from './common';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * StackView evenly spaces its children, by default placing `Spacer` components between them.
+ *
+ * ## Spacing
+ *
+ * StackView takes the same spacing props as `Spacer` and passes them directly to the layout components
+ * it uses for spacing.
+ *
+ * ## Direction
+ *
+ * Use `direction` to control how the children are stacked:
+ *
+ * - `'column'` (default) stacks and spaces the children vertically.
+ * - `'row'` stacks and spaces the children horizontally.
+ * - `'column-reverse'` acts the same as `'column'`, but reverses the direction.
+ * - `'row-reverse'` acts the same as `'row'`, but reverses the direction.
+ *
+ * `direction` is an optionally responsive prop and may be an object keyed by viewports. For example,
+ * `{ xs: 'column', md: 'row' } stacks as a column on `xs` and `sm` viewports and a row at 'md' and above.
+ *
+ * ## Theming, alignment and justification
+ *
+ * `StackView` is a pure layout component and has no theme styles beyond a small set of layout styles
+ * (`alignItems`, `justifyContent`, `flexGrow`) which may be set using the `tokens` prop. If the
+ * tokens prop is a function it will recieve the current viewport.
+ *
+ * All other styling such as borders, background colours, padding etc should be applied by wrapping
+ * the `StackView` in other components. For example, a `StackView` may be the child of a `Card`.
+ *
+ * ## Separator options
+ *
+ * By default, StackView inserts a `<Spacer>` component between each rendered child.
+ *
+ * With the `divider` prop, it instead renders a `Divider` instead of a `Spacer`. The gap between
+ * items will be double what it would be without this prop plus the width of the divider.
+ *
+ * ## Accessibility
+ *
+ * `StackView` may take any React Native accessibility props and applies them to the outer `View`.
+ * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
+ * semantic role but only on web, not within native apps).
+ */
+
+const StackView = /*#__PURE__*/forwardRef(({
+  space = 1,
+  divider,
+  direction: directionProp = 'column',
+  children,
+  variant,
+  tokens,
+  tag,
+  accessibilityRole,
+  ...rest
+}, ref) => {
+  const viewport = useViewport();
+  const direction = useResponsiveProp(directionProp, 'column');
+  const selectedProps = selectProps({ ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+    ...rest
+  });
+  const content = getStackedContent(children, {
+    direction,
+    divider,
+    space
+  });
+  const themeTokens = useThemeTokens('StackView', tokens, variant, {
+    viewport
+  });
+  const flexStyles = selectFlexStyles(themeTokens);
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    ...selectedProps,
+    style: [flexStyles, staticStyles[direction]],
+    children: content
+  });
+});
+StackView.displayName = 'StackView';
+StackView.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('StackView'),
+  variant: variantProp.propType,
+
+  /**
+   * Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction.
+   */
+  direction: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse'])),
+
+  /**
+   * If true, renders a UDS `Divider` component between each item. If an object is passed,
+   * this object is passes as props to each Divider.
+   */
+  divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(Divider.propTypes)]),
+
+  /**
+   * The size of the spacer according to the theme's spacing scale.
+   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
+   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
+   */
+  space: spacingProps.types.spacingValue,
+
+  /**
+   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: PropTypes.oneOf(layoutTags),
+
+  /**
+   * A StackView may take any children, but will have no effect if it is only passed one child or is passed children
+   * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
+   */
+  children: PropTypes.node
+};
+export default StackView;