@telus-uds/components-base 0.0.2-prerelease.4 → 0.0.2-prerelease.5

package/lib/StackView/StackWrapGap.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View } from 'react-native';
+import StackWrapBox from './StackWrapBox';
+import { a11yProps, useSpacingScale } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
+import getStackedContent from './getStackedContent';
+import { staticStyles, selectFlexStyles } from './common';
+/**
+ * The primary implementation of StackWrap.
+ *
+ * This is not intended to be used directly. It will automatically be used instead of StackWrap if:
+ *
+ * - On web, and,
+ * - On a browser that supports CSS `gap` (most browser versions from 2020 onwards), and,
+ * - The `space` between items is the same as the `gap` between wrapped rows (this is the
+ *   default if `gap` prop is undefined)
+ */
+
+const StackWrapGap = ({
+  space = 1,
+  tokens,
+  variant,
+  direction = 'row',
+  children,
+  ...rest
+}) => {
+  const themeTokens = useThemeTokens('StackView', tokens, variant);
+  const flexStyles = selectFlexStyles(themeTokens);
+  const a11y = a11yProps.select({ ...rest
+  });
+  const size = useSpacingScale(space);
+  const gapStyle = {
+    gap: size
+  };
+  const content = getStackedContent(children, {
+    direction,
+    space: 0
+  });
+  return /*#__PURE__*/React.createElement(View, Object.assign({}, a11y, {
+    style: [flexStyles, staticStyles.wrap, staticStyles[direction], gapStyle]
+  }), content);
+};
+
+StackWrapGap.propTypes = StackWrapBox.propTypes;
+export default StackWrapGap;

package/lib/StackView/common.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+export const selectFlexStyles = ({
+  alignItems,
+  justifyContent,
+  flexGrow
+}) => ({
+  alignItems,
+  justifyContent,
+  flexGrow
+});
+export const staticStyles = StyleSheet.create({
+  wrap: {
+    flexShrink: 1,
+    flexWrap: 'wrap'
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  'row-reverse': {
+    flexDirection: 'row-reverse'
+  },
+  column: {
+    // This is the React Native View default, but also it's very fundamental to the behaviour,
+    // so make it explicit and allow it to be tested for.
+    flexDirection: 'column'
+  },
+  'column-reverse': {
+    flexDirection: 'column-reverse'
+  }
+});

package/lib/StackView/getStackedContent.js

@@ -0,0 +1,111 @@
+import React, { Children, Fragment } from 'react';
+import Box from '../Box';
+import Divider from '../Divider';
+import Spacer from '../Spacer';
+/**
+ * @typedef {import('react').ReactChildren} ReactChildren
+ * @typedef {import('react').ReactElement} ReactElement
+ * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
+ */
+
+/**
+ * Takes valid React Children and inserts a specified amount of space between each valid (not nullish) top
+ * level element, according to the provided `options`.
+ *
+ * Returns an array of the original elements plus inserted spacing elements.
+ * This array of elements is keyed and may be used as a component's `children` without mapping.
+ *
+ * @param {ReactChildren} children
+ * @param {object} [options] -
+ *  - `space`: amount of space to insert using the theme spacing scale (see `useSpacingScale`)
+ *  - `direction`: if 'row' or 'row-reverse', applies space horizontally, if 'column' or 'column-reverse', applies space vertically
+ *  - `box`: if truthy, wraps each valid child in a Box component; if an object, passes it to Box as props
+ *  - `divider`: if truthy, inserts Divider components; if an object, passes it to Divider as props
+ * @param {SpacingValue} [options.space]
+ * @param {boolean | object} [options.divider]
+ * @param {"row" | "column" | "row-reverse" | "column-reverse"} [options.direction]
+ * @returns {ReactElement[]}
+ */
+
+const getStackedContent = (children, {
+  divider,
+  space,
+  direction = 'column',
+  box
+}) => {
+  const boxProps = box && typeof box === 'object' ? box : {
+    space
+  };
+  const dividerProps = divider && typeof divider === 'object' ? divider : {}; // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
+
+  const validChildren = Children.toArray(unpackFragment(children)).filter(Boolean);
+  const content = validChildren.reduce((newChildren, child, index) => {
+    const boxID = `Stack-Box-${index}`;
+    const item = box ?
+    /*#__PURE__*/
+    // If wrapped in Box, that Box needs a key.
+    // If possible, use an existing content key; use an index-based key only if necessary.
+    React.createElement(Box, Object.assign({}, boxProps, {
+      key: child.key || boxID,
+      testID: boxID
+    }), child) : child;
+    if (!index || !space && !divider) return [...newChildren, item];
+    const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
+    const commonProps = {
+      testID,
+      key: testID,
+      space
+    };
+    const separator = divider ? /*#__PURE__*/React.createElement(Divider, Object.assign({
+      vertical: direction.startsWith('row')
+    }, dividerProps, commonProps)) : /*#__PURE__*/React.createElement(Spacer, Object.assign({
+      direction: direction.startsWith('row') ? 'row' : 'column'
+    }, commonProps));
+    return [...newChildren, separator, item];
+  }, []);
+  return content;
+};
+/**
+ * Unpacks top-level fragments, so that common compositional patterns such as the following examples
+ * can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
+ *
+ * - Setting `children` as a property wrapped in a fragment:
+ *
+ * ```jsx
+ * args.children = <><Child1 /><Child2 /><Child3 /></>
+ * ```
+ *
+ * - Defining `children` as a variable wrapped in a fragment:
+ *
+ * ```jsx
+ * const content = <><Child1 /><Child2 /><Child3 /></>
+ * if (someCondition) return <SomeWrapper>{content}</SomeWrapper>
+ * ```
+ *
+ * - Using fragments at the top level of a JSX block for conditional rendering:
+ *
+ * ```jsx
+ * <Child1 />
+ * {someCondition && (
+ *   <>
+ *     <Child2 />
+ *     <Child3 />
+ *   </>
+ * )}
+ * ```
+ *
+ * @param {ReactChildren} child
+ * @returns {ReactChildren}
+ */
+
+
+const unpackFragment = child => {
+  // If this level is a set of top-level siblings rather than one child, check each in turn
+  if (Children.count(child) > 1) return Children.map(child, unpackFragment); // When a fragment is found, unpack its children to the top level and check them
+
+  if (child?.type === Fragment) return unpackFragment(child.props?.children); // Stop unpacking as soon as any non-fragment child is found
+
+  return child;
+};
+
+export default getStackedContent;

package/lib/StackView/index.js

@@ -0,0 +1,5 @@
+import StackView from './StackView';
+import StackWrap from './StackWrap';
+export default StackView;
+export { StackWrap };
+export { default as getStackedContent } from './getStackedContent';

package/lib/TextInput/TextInput.js

@@ -0,0 +1,337 @@
+import React, { useState } from 'react';
+import { View, TextInput as NativeTextInput, Platform, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
+import { getTokensPropType, useInputValue, variantProp } from '../utils';
+import InputLabel from '../InputLabel';
+import Feedback from '../Feedback';
+import Box from '../Box';
+import useUniqueId from '../utils/useUniqueId';
+
+const selectInputStyles = ({
+  backgroundColor,
+  color,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight = 0,
+  fontName,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  icon,
+  iconSize = 0
+}, inactive) => {
+  // Subtract border width from padding so overall input width/height doesn't
+  // jump around if the border width changes (avoiding NaN and negative padding)
+  const offsetBorder = value => typeof value === 'number' && typeof borderWidth === 'number' ? Math.max(0, value - borderWidth) : value;
+
+  const textStyles = applyTextStyles({
+    fontName,
+    fontSize,
+    lineHeight,
+    fontWeight
+  });
+  const webStyles = Platform.select({
+    web: {
+      outline: 'none',
+      cursor: inactive ? 'not-allowed' : undefined
+    }
+  });
+  const paddingWithIcon = iconSize + paddingRight;
+  return {
+    backgroundColor,
+    color,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    paddingLeft: offsetBorder(paddingLeft),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingTop: offsetBorder(paddingTop),
+    paddingBottom: offsetBorder(paddingBottom),
+    ...textStyles,
+    ...webStyles
+  };
+};
+
+const selectOuterBorderStyles = ({
+  outerBackgroundColor,
+  outerBorderWidth = 0,
+  outerBorderColor,
+  outerBorderRadius = 0
+}) => {
+  // Use negative margins so that the outer border doesn't expand the input's bounding box
+  const margin = -1 * outerBorderWidth; // Account for the border width since we style it as an outline
+
+  const borderRadius = outerBorderRadius + outerBorderWidth;
+  return {
+    background: outerBackgroundColor,
+    borderWidth: outerBorderWidth,
+    borderColor: outerBorderColor,
+    borderRadius,
+    marginTop: margin,
+    marginBottom: margin,
+    marginLeft: margin,
+    marginRight: margin
+  };
+};
+
+const selectIconTokens = ({
+  iconSize,
+  iconColor
+}) => ({
+  size: iconSize,
+  color: iconColor
+});
+
+const joinDefined = array => array.filter(item => item !== undefined).join(' ');
+/**
+ * A basic text input component. Use in forms or individually to receive user's input.
+ * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
+ *
+ * ## Controlled component
+ * If it is required that the state of the `TextInput` be controlled by the application or other external methods,
+ * `value` and `onChange` props must be passed to the `TextInput`.
+ * If the `TextInput` value should not be changed by user input, a `readOnly` prop must be provided.
+ *
+ * ## Uncontrolled component
+ * If it is not necessary to control the `TextInput` state, you can create one without a value prop.
+ * In this case its value can be accessed within the `onChange` callback.
+ *
+ * NOTE: In order to support more advanced usages all additional props will be passed down to the React Native's
+ * `TextInput` component. See <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native documentation</a> for
+ * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
+ * their implementation on the web.
+ */
+
+
+function TextInput({
+  value,
+  initialValue,
+  label,
+  hint,
+  hintPosition = 'inline',
+  feedback,
+  tooltip,
+  validation,
+  inactive,
+  readOnly,
+  onChange,
+  onChangeText,
+  onFocus,
+  onBlur,
+  onMouseOver,
+  onMouseOut,
+  tokens,
+  variant = {},
+  ...remainingProps
+}) {
+  const inputId = useUniqueId('text-input');
+  const hintId = useUniqueId('text-input-hint');
+  const feedbackId = useUniqueId('text-input-feedback');
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = event => {
+    setIsFocused(true);
+    if (typeof onFocus === 'function') onFocus(event);
+  };
+
+  const handleBlur = event => {
+    setIsFocused(false);
+    if (typeof onBlur === 'function') onBlur(event);
+  };
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseOver = event => {
+    setIsHovered(true);
+    if (typeof onMouseOver === 'function') onMouseOver(event);
+  };
+
+  const handleMouseOut = event => {
+    setIsHovered(false);
+    if (typeof onMouseOut === 'function') onMouseOut(event);
+  };
+
+  const {
+    currentValue,
+    setValue,
+    isControlled
+  } = useInputValue({
+    value,
+    initialValue,
+    onChange,
+    readOnly
+  });
+
+  const handleChangeText = text => {
+    setValue(text);
+    if (typeof onChangeText === 'function') onChangeText(text);
+  };
+
+  const states = {
+    focus: isFocused,
+    hover: isHovered,
+    inactive
+  };
+  const themeTokens = useThemeTokens('TextInput', tokens, { ...variant,
+    validation
+  }, states);
+  const {
+    icon: IconComponent
+  } = themeTokens;
+  const hasValidationError = validation === 'error';
+  const inputProps = { ...remainingProps,
+    editable: !inactive,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onChangeText: handleChangeText,
+    accessibilityLabel: label,
+    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]),
+    // native only -> replaced with describedBy on web
+    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert, so there's no need to include it here
+    hint && hintId]),
+    // introduced in RNW 0.15.0
+    accessibilityInvalid: hasValidationError,
+    // introduced in RNW 0.15.0
+    nativeID: inputId,
+    defaultValue: initialValue,
+    // currentValue is being updated even if the input is not controlled, passing it down to the
+    // Input could lead to changing its state from uncontrolled to controlled
+    value: isControlled ? currentValue : undefined
+  }; // TODO: use Stack instead of the Boxes
+
+  const feedbackVariant = {};
+
+  if (hasValidationError) {
+    feedbackVariant.state = 'error';
+  } else if (validation === 'success') {
+    feedbackVariant.state = 'success';
+  }
+
+  return /*#__PURE__*/React.createElement(View, null, label && /*#__PURE__*/React.createElement(Box, {
+    bottom: 1
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    label: label,
+    hint: hint,
+    hintPosition: hintPosition,
+    hintId: hintId,
+    tooltip: tooltip,
+    forId: inputId
+  })), /*#__PURE__*/React.createElement(View, {
+    style: selectOuterBorderStyles(themeTokens)
+  }, /*#__PURE__*/React.createElement(NativeTextInput, Object.assign({
+    style: selectInputStyles(themeTokens, inactive)
+  }, inputProps)), IconComponent && /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none" // avoid hijacking input press events
+    ,
+    style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]
+  }, /*#__PURE__*/React.createElement(IconComponent, {
+    tokens: selectIconTokens(themeTokens)
+  }))), feedback && /*#__PURE__*/React.createElement(Box, {
+    top: 1
+  }, /*#__PURE__*/React.createElement(Feedback, {
+    title: feedback,
+    variant: feedbackVariant,
+    accessibilityRole: hasValidationError ? 'alert' : undefined
+  })));
+}
+
+const selectIconContainerStyles = ({
+  paddingRight
+}) => ({
+  paddingRight
+});
+
+TextInput.propTypes = {
+  /**
+   * The input label.
+   */
+  label: PropTypes.string,
+
+  /**
+   * If the `TextInput's` state is to be controlled by a parent component, use this prop
+   * together with the `onChange` to pass down and update the lifted state.
+   */
+  value: PropTypes.string,
+
+  /**
+   * Use this to set the initial value of an uncontrolled `TextInput`.
+   * Updating `initialValue` will **not** update the actual value.
+   */
+  initialValue: PropTypes.string,
+
+  /**
+   * A short description of the expected input.
+   */
+  hint: PropTypes.string,
+
+  /**
+   * Position of the hint relative to label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+
+  /**
+   * A detailed description of validation error/success or additional instructions.
+   * Visual variant is determined based on the `validation` prop.
+   */
+  feedback: PropTypes.string,
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: PropTypes.string,
+
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: PropTypes.oneOf(['error', 'success']),
+
+  /**
+   * Disables all user interactions with the input.
+   */
+  inactive: PropTypes.bool,
+
+  /**
+   * Makes it impossible to change the input's value.
+   */
+  readOnly: PropTypes.bool,
+
+  /**
+   * Use to react upon input's value changes. Required when the `value` prop is set.
+   * Will receive the input's value as an argument.
+   */
+  onChange: PropTypes.func,
+
+  /** @ignore */
+  onChangeText: PropTypes.func,
+
+  /** @ignore */
+  onFocus: PropTypes.func,
+
+  /** @ignore */
+  onBlur: PropTypes.func,
+
+  /** @ignore */
+  onMouseOver: PropTypes.func,
+
+  /** @ignore */
+  onMouseOut: PropTypes.func,
+  tokens: getTokensPropType('TextInput'),
+  variant: variantProp.propType
+};
+export default TextInput;
+const staticStyles = StyleSheet.create({
+  iconContainer: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center'
+  }
+});

package/lib/TextInput/index.js

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

package/lib/Typography/Typography.js

@@ -36,8 +36,6 @@ const selectTextStyles = ({
   color,
   lineHeight,
   fontName,
-  marginTop,
-  marginBottom,
   textAlign,
   textTransform
 }) => applyTextStyles({
@@ -46,8 +44,6 @@ const selectTextStyles = ({
   color,
   lineHeight,
   fontName,
-  marginTop,
-  marginBottom,
   textAlign,
   textTransform
 }); // General-purpose flexible theme-neutral base component for text

package/lib/index.js

@@ -4,16 +4,21 @@ export * from './Button';
 export { default as Card } from './Card';
 export { default as Divider } from './Divider';
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
+export { default as Feedback } from './Feedback';
 export { default as FlexGrid } from './FlexGrid';
 export { default as Icon } from './Icon';
 export * from './Icon';
 export * from './Link';
 export { default as Pagination } from './Pagination';
 export { default as SideNav } from './SideNav';
+export { default as Spacer } from './Spacer';
+export { default as StackView } from './StackView';
+export * from './StackView';
+export { default as TextInput } from './TextInput';
 export { default as ToggleSwitch } from './ToggleSwitch';
 export { default as Typography } from './Typography';
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
 export { default as BaseProvider } from './BaseProvider';
 export { default as ViewportProvider, useViewport } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme } from './ThemeProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens } from './ThemeProvider';
 export * from './utils';

package/lib/utils/input.js

@@ -60,6 +60,7 @@ Consumers of this hook must be one of:
  *   currentValue: any
  *   setValue: (value: any) => void
  *   resetValue: () => void
+ *   isControlled: bool
  * }}
  */
 
@@ -91,7 +92,8 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
   return {
     currentValue,
     setValue,
-    resetValue
+    resetValue,
+    isControlled
   };
 };
 /**

package/lib/utils/propTypes.js

@@ -405,4 +405,12 @@ export const componentPropType = (passedName, checkDisplayName = false) => {
   validate.isRequired = createValidate(true);
   return validate;
 };
-export const copyPropTypes = PropTypes.oneOf(['en', 'fr']);
+export const copyPropTypes = PropTypes.oneOf(['en', 'fr']);
+export const paddingProp = {
+  propType: PropTypes.shape({
+    paddingBottom: PropTypes.number,
+    paddingLeft: PropTypes.number,
+    paddingRight: PropTypes.number,
+    paddingTop: PropTypes.number
+  })
+};

package/lib/utils/useUniqueId.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "0.0.2-prerelease.4",
+  "version": "0.0.2-prerelease.5",
   "description": "Base components",
   "keywords": [
     "base"
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@telus-uds/system-constants": "^0.0.2-prerelease.1",
-    "@telus-uds/tools-theme": "^0.0.2-prerelease.2",
+    "@telus-uds/tools-theme": "^0.0.2-prerelease.3",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2"
   }

package/release-context.json

@@ -1,7 +1,7 @@
 {
-  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.3",
-  "changelog": "### [0.0.2-prerelease.4](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.3...@telus-uds/components-base/v0.0.2-prerelease.4) (2021-10-13)\n\n\n### Bug Fixes\n\n* same rnw dep specification for base as components-allium-web ([#642](https://github.com/telus/universal-design-system/issues/642)) ([d40a9a2](https://github.com/telus/universal-design-system/commit/d40a9a2eade0a6ab276f13d02758fff0a88c2ecd))\n",
-  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.4",
-  "newVersion": "0.0.2-prerelease.4",
+  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.4",
+  "changelog": "### [0.0.2-prerelease.5](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.4...@telus-uds/components-base/v0.0.2-prerelease.5) (2021-10-27)\n\n\n### Features\n\n* **allium-web:** Add `ExpandCollapseMiniControl` component ([#661](https://github.com/telus/universal-design-system/issues/661)) ([227407e](https://github.com/telus/universal-design-system/commit/227407ec6a48c0a170b8e39761ba33293f13eb3c)), closes [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605)\n* **allium:** add Allium `Card` ([#639](https://github.com/telus/universal-design-system/issues/639)) ([f88179c](https://github.com/telus/universal-design-system/commit/f88179c503dfe574bf7bac6bb36ce4726a9af338))\n* **base, allium:** add reverse directions and switch Allium card to using `StackView` ([#676](https://github.com/telus/universal-design-system/issues/676)) ([819a15f](https://github.com/telus/universal-design-system/commit/819a15f059faa47d1bc4e96c6370e9694effc003))\n* **base:** add StackView and Spacer ([#662](https://github.com/telus/universal-design-system/issues/662)) ([cc3965e](https://github.com/telus/universal-design-system/commit/cc3965e83c1ec2fa0f0dd006a03eeeeda5384940))\n* **base:** add StackWrap component ([#666](https://github.com/telus/universal-design-system/issues/666)) ([f34fb60](https://github.com/telus/universal-design-system/commit/f34fb60d0a923b1e4b3105c21b4a762b630ab309))\n* **base:** add TextInput component ([#649](https://github.com/telus/universal-design-system/issues/649)) ([245c073](https://github.com/telus/universal-design-system/commit/245c073ed3ba3a022f989d234fbf5cf972edec25))\n* **base:** add the Feedback component ([#656](https://github.com/telus/universal-design-system/issues/656)) ([5d7a5b6](https://github.com/telus/universal-design-system/commit/5d7a5b69c870ce1077adfdb230fddd1aa120b373))\n\n\n### Bug Fixes\n\n* **base:** control stretch from a row parent ([#668](https://github.com/telus/universal-design-system/issues/668)) ([fa13c37](https://github.com/telus/universal-design-system/commit/fa13c37b2bd6b4118dbeb39bc2cdf59d13d5b151))\n* **base:** fix icon link width in block container ([#645](https://github.com/telus/universal-design-system/issues/645)) ([ff60d1d](https://github.com/telus/universal-design-system/commit/ff60d1d1d0a66b7735b902098c7ca22e442265e1))\n",
+  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.5",
+  "newVersion": "0.0.2-prerelease.5",
   "packageName": "@telus-uds/components-base"
 }