@telus-uds/components-web 2.21.1 → 2.22.0

package/lib-module/Ribbon/Ribbon.js

@@ -105,7 +105,6 @@ const RibbonCurve = /*#__PURE__*/styled.div.withConfig({
   } = _ref17;
   return curveAfterWidth;
 });
-
 const Ribbon = _ref18 => {
   let {
     children,
@@ -144,11 +143,11 @@ const Ribbon = _ref18 => {
     fontWeight,
     fontSize,
     lineHeight
-  } = useThemeTokens('Ribbon', tokens, { ...variant,
+  } = useThemeTokens('Ribbon', tokens, {
+    ...variant,
     wrap: shouldWrap
   });
   let background = backgroundColor;
-
   if (gradient) {
     const {
       type: gradientType,
@@ -158,7 +157,6 @@ const Ribbon = _ref18 => {
     const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`;
     background = gradientBackground;
   }
-
   return /*#__PURE__*/_jsxs(RibbonWrapper, {
     left: left,
     top: top,
@@ -200,19 +198,16 @@ const Ribbon = _ref18 => {
     })]
   });
 };
-
-Ribbon.propTypes = { ...selectedSystemPropTypes,
+Ribbon.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Ribbon'),
   children: PropTypes.node,
-
   /** show/hide the ribbon fold
    * @deprecated please don't rely on `wrap` to turn off the wrapping (use `Badge` instead) as it will be removed in the future
    */
   wrap: PropTypes.bool,
-
   /** sets the left offset (triggers absolute positioning) */
   left: PropTypes.number,
-
   /** sets the top offset (triggers absolute positioning) */
   top: PropTypes.number
 };

package/lib-module/SkeletonProvider/SkeletonImage.js

@@ -1,10 +1,8 @@
 var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3;
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Skeleton } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const SkeletonImage = _ref => {
   let {
     rounded,
@@ -16,11 +14,9 @@ const SkeletonImage = _ref => {
     show,
     children
   } = _ref;
-
   if (!show) {
     return children;
   }
-
   const shape = rounded !== 'circle' ? 'box' : rounded;
   return /*#__PURE__*/_jsx(Skeleton, {
     size: size,
@@ -29,7 +25,6 @@ const SkeletonImage = _ref => {
     shape: shape
   });
 };
-
 SkeletonImage.propTypes = {
   imgHeight: PropTypes.number,
   rounded: PropTypes.oneOf(['circle', 'corners']),

package/lib-module/SkeletonProvider/SkeletonProvider.js

@@ -6,24 +6,19 @@ import SkeletonTypography from './SkeletonTypography';
 import SkeletonImage from './SkeletonImage';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-
 const SkeletonProvider = _ref => {
   let {
     children,
     show
   } = _ref;
-
   if (!show) {
     return children;
   }
-
   const mapChild = child => {
     if (!child) {
       return null;
     }
-
     let childElement = child;
-
     if (childElement.props && 'children' in childElement.props) {
       const {
         children: elementChildren
@@ -33,31 +28,28 @@ const SkeletonProvider = _ref => {
         children: mappedChildren
       });
     }
-
     if (childElement.type === Typography) {
-      return /*#__PURE__*/_jsx(SkeletonTypography, { ...childElement.props.skeleton,
+      return /*#__PURE__*/_jsx(SkeletonTypography, {
+        ...childElement.props.skeleton,
         show: show,
         children: childElement
       });
     }
-
     if (childElement.type === Image) {
-      return /*#__PURE__*/_jsx(SkeletonImage, { ...childElement.props.skeleton,
+      return /*#__PURE__*/_jsx(SkeletonImage, {
+        ...childElement.props.skeleton,
         imgHeight: childElement.props.height,
         rounded: childElement.props.rounded,
         show: show,
         children: childElement
       });
     }
-
     return childElement;
   };
-
   return /*#__PURE__*/_jsx(_Fragment, {
     children: Children.map(children, mapChild)
   });
 };
-
 SkeletonProvider.propTypes = {
   show: PropTypes.bool.isRequired,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired

package/lib-module/SkeletonProvider/SkeletonTypography.js

@@ -1,10 +1,8 @@
 var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3, _Skeleton$propTypes4, _Skeleton$propTypes5;
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Skeleton } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const SkeletonTypography = _ref => {
   let {
     show,
@@ -15,11 +13,9 @@ const SkeletonTypography = _ref => {
     lines,
     children
   } = _ref;
-
   if (!show) {
     return children;
   }
-
   return /*#__PURE__*/_jsx(Skeleton, {
     size: size,
     sizeIndex: sizeIndex,
@@ -28,7 +24,6 @@ const SkeletonTypography = _ref => {
     lines: lines
   });
 };
-
 SkeletonTypography.propTypes = {
   show: PropTypes.bool.isRequired,
   children: PropTypes.node,

package/lib-module/Span/Span.js

@@ -14,13 +14,13 @@ const StyledSpan = /*#__PURE__*/styled.span.withConfig({
   } = _ref;
   return flex ? 'display: inline-flex' : '';
 });
+
 /**
  * Text as an HTML ```<span>``` element.
  *
  * Span may be used in cases where an inline span or direct access to HTML attributes is required.
  * In most cases, `Typography` should be used for text, or Paragraph for body text.
  */
-
 const Span = _ref2 => {
   let {
     children,
@@ -39,26 +39,22 @@ const Span = _ref2 => {
     children: children
   });
 };
-
-Span.propTypes = { ...selectedSystemPropTypes,
+Span.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node.isRequired,
-
   /**
    * Adds `data-testid` attribute for testing
    */
   testID: PropTypes.string,
-
   /**
    * Sets display to inline-flex so that children are laid out using the flex model.
    * Use this if the span contains children that expect to be inside a flex container.
    */
   flex: PropTypes.bool,
-
   /**
    * Span takes the same tokens overrides as Typography
    */
   tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
-
   /**
    * Span can take any of Typography's theme variants
    */

package/lib-module/Spinner/Spinner.js

@@ -63,25 +63,21 @@ const OpaqueContainer = /*#__PURE__*/styled.div.withConfig({
 })({
   opacity: BACKDROP_OPACITY
 });
-
 const recursiveMap = (children, fn) => React.Children.map(children, child => {
   if (! /*#__PURE__*/React.isValidElement(child)) {
     return child;
   }
-
   if (child.props.children) {
     return fn( /*#__PURE__*/React.cloneElement(child, {
       children: recursiveMap(child.props.children, fn)
     }));
   }
-
   return fn(child);
 });
+
 /**
  * Loading indicator.
  */
-
-
 const Spinner = _ref3 => {
   let {
     children,
@@ -104,12 +100,11 @@ const Spinner = _ref3 => {
     size: sizeVariant = 'large'
   } = variant;
   useScrollBlocking([fullScreen, show]);
-
   if (!show) {
     return children ?? null;
-  } // Full screen spinner
-
+  }
 
+  // Full screen spinner
   if (fullScreen) {
     return /*#__PURE__*/_jsx(Portal, {
       children: /*#__PURE__*/_jsx(FullscreenOverlay, {
@@ -131,9 +126,9 @@ const Spinner = _ref3 => {
         })
       })
     });
-  } // Overlay spinner
-
+  }
 
+  // Overlay spinner
   if (children) {
     return /*#__PURE__*/_jsxs(SpinnerContainer, {
       inline: inline,
@@ -156,15 +151,15 @@ const Spinner = _ref3 => {
               'aria-hidden': 'true'
             });
           }
-
           return undefined;
         })
       })]
     });
-  } // Standalone spinner
-
+  }
 
-  return /*#__PURE__*/_jsx(SpinnerContainer, { ...selectProps(rest),
+  // Standalone spinner
+  return /*#__PURE__*/_jsx(SpinnerContainer, {
+    ...selectProps(rest),
     children: /*#__PURE__*/_jsx(SpinnerContent, {
       label: label,
       labelPosition: labelPosition,
@@ -175,49 +170,41 @@ const Spinner = _ref3 => {
     })
   });
 };
-
-Spinner.propTypes = { ...selectedSystemPropTypes,
+Spinner.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Spinner'),
-
   /**
    * Content to be overlaid while the spinner is active. Can be text, any HTML element,
    * or any component.
    */
   children: PropTypes.node,
-
   /**
    * Enables body locking.
    */
   fullScreen: PropTypes.bool,
-
   /**
    * Set the inline prop to true if the Spinner should only cover its children; if
    * the Spinner should cover the full width of its parent regardless of the size of
    * its children, inline should be set to false
    */
   inline: PropTypes.bool,
-
   /**
    * Communicates a message to assistive technology while visible. This same message
    * will appear underneath the spinner when its `size` is `large`.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * The size of the spinner
    */
   // size: PropTypes.oneOf(['large', 'small']),
-
   /**
    * Whether or not to render the spinner.
    */
   show: PropTypes.bool,
-
   /**
    * If true, it should render a static spinner
    */
   isStatic: PropTypes.bool,
-
   /**
    * Determine where the label of the spinner should be placed, left, right, bottom or top.
    */

package/lib-module/Spinner/SpinnerContent.js

@@ -27,7 +27,6 @@ const Container = /*#__PURE__*/styled.div.withConfig({
     })
   };
 });
-
 const SpinnerContent = _ref2 => {
   let {
     label,
@@ -67,29 +66,24 @@ const SpinnerContent = _ref2 => {
     })
   });
 };
-
-SpinnerContent.propTypes = { ...selectedSystemPropTypes,
-
+SpinnerContent.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Communicates a message to assistive technology while visible. This same message will appear underneath the spinner when its `size` is `large`.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * Whether the container has to have an overlay styling.
    */
   overlay: PropTypes.bool,
-
   /**
    * Size (width and height) of the spinner.
    */
   size: PropTypes.number,
-
   /**
    * The size of the spinner
    */
   sizeVariant: PropTypes.oneOf(['large', 'small']),
-
   /**
    * If true, it should render a static spinner
    */

package/lib-module/StoryCard/StoryCard.js

@@ -3,13 +3,15 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { Box, Divider, PressableCardBase, selectSystemProps, Spacer, StackView, StackWrap, Typography, hrefAttrsProp, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useThemeTokens, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
-import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent'; // Passes React Native-oriented system props through UDS PressableCardBase
+import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
 
+// Passes React Native-oriented system props through UDS PressableCardBase
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]); // Stop changes to the card's inner border width causing the size and
-// apparent position of the full bleed image to change.
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 
+// Stop changes to the card's inner border width causing the size and
+// apparent position of the full bleed image to change.
 const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoryCard__FullBleedOffsetOuter",
   componentId: "components-web__sc-yhvivu-0"
@@ -34,6 +36,7 @@ const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
     margin: 0 - borderOffset
   };
 });
+
 /**
  * Showcase and guide users to another page, offering a description of that page's story.
  * Whole card is interactive, width expands based on column or container.
@@ -45,7 +48,6 @@ const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
  * - Use `href` to set the target URL
  * - Use `fullBleedContent` to set the thumbnail image
  */
-
 const StoryCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     tag,
@@ -64,14 +66,13 @@ const StoryCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
     fullBleedContentPosition,
     contentStackDirection,
     fullBleedContentProps
-  } = useFullBleedContentProps({ ...fullBleedContent,
+  } = useFullBleedContentProps({
+    ...fullBleedContent,
     position: 'bottom'
   });
   const generalTokens = useThemeTokens('StoryCard', tokens, variant);
   const getTokens = useThemeTokensCallback('StoryCard', tokens, variant);
-
   const getPressableCardTokens = cardState => getTokens(cardState);
-
   const {
     hrefAttrs,
     rest: unusedRest
@@ -87,8 +88,9 @@ const StoryCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
       const {
         borderRadius,
         borderWidth
-      } = getPressableCardTokens(cardState); // Stop content jumping around as border size changes
+      } = getPressableCardTokens(cardState);
 
+      // Stop content jumping around as border size changes
       const borderOffset = borderWidth - generalTokens.borderWidth;
       const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius + borderOffset, fullBleedContentPosition);
       return /*#__PURE__*/_jsxs(StackView, {
@@ -166,9 +168,9 @@ const StoryCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
   });
 });
 StoryCard.displayName = 'StoryCard';
-StoryCard.propTypes = { ...selectedSystemPropTypes,
+StoryCard.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('StoryCard'),
-
   /**
    * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
    * a `StoryCard` with `href` prop set (the volume and progress sliders can be clicked but are not draggable).
@@ -177,39 +179,32 @@ StoryCard.propTypes = { ...selectedSystemPropTypes,
    * @see https://github.com/telus/allium-design-system/issues/6
    */
   href: PropTypes.string,
-
   /**
    * Optional function to be called on press e.g. for within-page navigation.
    */
   onPress: PropTypes.func,
-
   /**
    * Text stating the category of the content.
    */
   tag: PropTypes.string,
-
   /**
    * Text stating the date a story was published.
    */
   date: PropTypes.string.isRequired,
-
   /**
    * Text stating the title or headline of the story.
    */
   title: PropTypes.string.isRequired,
-
   /**
    * Text giving a short description of the story. One paragraph of plain text.
    */
   description: PropTypes.string.isRequired,
-
   /**
    * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
    *
    * @deprecated
    */
   fullBleedImage: PropTypes.exact(FullBleedContent.propTypes || {}),
-
   /**
    * Full bleed image to be placed on the card.
    */

package/lib-module/Table/Body.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Body = _ref => {
   let {
     children
@@ -10,7 +9,6 @@ const Body = _ref => {
     children: children
   });
 };
-
 Body.propTypes = {
   children: PropTypes.node
 };

package/lib-module/Table/Cell.js

@@ -9,7 +9,6 @@ const HEADER_TYPE = {
   SUBHEADING: 'subHeading',
   ROWHEADING: 'rowHeading'
 };
-
 const stickyStyles = _ref => {
   let {
     cellStickyShadow,
@@ -18,7 +17,6 @@ const stickyStyles = _ref => {
   } = _ref;
   return css(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);", " &::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
 };
-
 const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
   let {
     isSticky,
@@ -39,7 +37,6 @@ const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
     stickyBackgroundColor
   }));
 });
-
 const createStyledCell = htmlElement => styled[htmlElement].withConfig({
   displayName: "Cell__createStyledCell",
   componentId: "components-web__sc-ltgfic-0"
@@ -50,10 +47,8 @@ const createStyledCell = htmlElement => styled[htmlElement].withConfig({
   } = _ref3;
   return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
 });
-
 const StyledHeaderCell = createStyledCell('th');
 const StyledDataCell = createStyledCell('td');
-
 const Cell = _ref4 => {
   let {
     children,
@@ -68,7 +63,8 @@ const Cell = _ref4 => {
     tokens: tableTokens,
     spacing
   } = useTableContext();
-  const themeTokens = { ...tableTokens,
+  const themeTokens = {
+    ...tableTokens,
     ...cellTokens
   };
   const {
@@ -111,7 +107,6 @@ const Cell = _ref4 => {
     lineHeight,
     color: fontColor
   };
-
   switch (type) {
     case HEADER_TYPE.HEADING:
       return /*#__PURE__*/_jsx(StyledHeaderCell, {
@@ -123,7 +118,6 @@ const Cell = _ref4 => {
           children: children
         })
       });
-
     case HEADER_TYPE.SUBHEADING:
       return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "col",
@@ -134,7 +128,6 @@ const Cell = _ref4 => {
           children: children
         })
       });
-
     case HEADER_TYPE.ROWHEADING:
       return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "row",
@@ -145,9 +138,9 @@ const Cell = _ref4 => {
           children: children
         })
       });
-
     default:
-      return /*#__PURE__*/_jsx(StyledDataCell, { ...sharedProps,
+      return /*#__PURE__*/_jsx(StyledDataCell, {
+        ...sharedProps,
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
           children: children
@@ -155,18 +148,15 @@ const Cell = _ref4 => {
       });
   }
 };
-
 Cell.propTypes = {
   type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
   tokens: PropTypes.object,
   children: PropTypes.node,
-
   /**
    * @ignore
    * Used internally for making the first column sticky
    */
   isFirstInRow: PropTypes.bool,
-
   /**
    * Defines the text alignment within the cell
    */

package/lib-module/Table/Header.js

@@ -2,7 +2,6 @@ import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import Row from './Row';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Header = _ref => {
   let {
     children
@@ -18,7 +17,6 @@ const Header = _ref => {
     })
   });
 };
-
 Header.propTypes = {
   children: PropTypes.node
 };

package/lib-module/Table/Row.js

@@ -1,7 +1,6 @@
 import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Row = _ref => {
   let {
     children
@@ -12,7 +11,6 @@ const Row = _ref => {
     }))
   });
 };
-
 Row.propTypes = {
   children: PropTypes.node
 };

package/lib-module/Table/SubHeading.js

@@ -2,7 +2,6 @@ import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import Row from './Row';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Header = _ref => {
   let {
     children
@@ -16,7 +15,6 @@ const Header = _ref => {
     }))
   });
 };
-
 Header.propTypes = {
   children: PropTypes.node
 };