@telus-uds/components-web 3.1.0 → 3.2.1

package/lib/Disclaimer/Disclaimer.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { applyTextStyles, selectSystemProps, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledDisclaimer = /*#__PURE__*/styled.p.withConfig({
-  displayName: "Disclaimer__StyledDisclaimer",
-  componentId: "components-web__sc-1l4xf7u-0"
-})(_ref => {
+const StyledDisclaimer = styled.p(_ref => {
   let {
     fontName,
     fontWeight,

package/lib/Footnote/Footnote.js

@@ -1,22 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { createGlobalStyle } from 'styled-components';
 import { Icon, Portal, selectSystemProps, Typography, useCopy, useTheme, useResponsiveProp, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
 import OrderedListBase from '../OrderedList/OrderedListBase';
-import { htmlAttrs, media, renderStructuredContent, isElementFocusable } from '../utils';
+import { htmlAttrs, media, renderStructuredContent, isElementFocusable, styledComponents } from '../utils';
 import defaultDictionary from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const viewportBreakpoint = 1440;
-const GlobalBodyScrollLock = /*#__PURE__*/createGlobalStyle({
+const {
+  styled,
+  createGlobalStyle
+} = styledComponents;
+const GlobalBodyScrollLock = createGlobalStyle({
   'html, body': media().until('md').css({
     overflow: 'hidden'
   })
 });
-const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__StyledFootnote",
-  componentId: "components-web__sc-1563bo5-0"
-})(_ref => {
+const StyledFootnote = styled.div(_ref => {
   let {
     footnoteBackground,
     isVisible,
@@ -60,17 +60,11 @@ const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
   }
   return {};
 });
-const StyledFootnoteHeader = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__StyledFootnoteHeader",
-  componentId: "components-web__sc-1563bo5-1"
-})(() => ({
+const StyledFootnoteHeader = styled.div(() => ({
   position: 'relative',
   width: '100%'
 }));
-const StyledHeader = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__StyledHeader",
-  componentId: "components-web__sc-1563bo5-2"
-})(_ref3 => {
+const StyledHeader = styled.div(_ref3 => {
   let {
     footnoteHeaderPaddingLeft,
     footnoteHeaderPaddingRight,
@@ -88,10 +82,7 @@ const StyledHeader = /*#__PURE__*/styled.div.withConfig({
     paddingLeft: footnoteHeaderPaddingLeft
   };
 });
-const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__StyledFootnoteBody",
-  componentId: "components-web__sc-1563bo5-3"
-})(_ref4 => {
+const StyledFootnoteBody = styled.div(_ref4 => {
   let {
     footnoteBodyBackground,
     footnoteBodyPadding,
@@ -116,10 +107,7 @@ const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
     opacity: isTextVisible ? 1 : 0
   };
 });
-const List = /*#__PURE__*/styled(OrderedListBase).withConfig({
-  displayName: "Footnote__List",
-  componentId: "components-web__sc-1563bo5-4"
-})(_ref5 => {
+const List = styled(OrderedListBase)(_ref5 => {
   let {
     listPaddingLeft
   } = _ref5;
@@ -128,10 +116,7 @@ const List = /*#__PURE__*/styled(OrderedListBase).withConfig({
     paddingLeft: listPaddingLeft
   };
 });
-const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
-  displayName: "Footnote__ListItem",
-  componentId: "components-web__sc-1563bo5-5"
-})(_ref6 => {
+const ListItem = styled(OrderedListBase.Item)(_ref6 => {
   let {
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -155,10 +140,7 @@ const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
     paddingLeft: listItemPaddingLeft
   };
 });
-const CloseButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "Footnote__CloseButton",
-  componentId: "components-web__sc-1563bo5-6"
-})(_ref7 => {
+const CloseButton = styled.button(_ref7 => {
   let {
     closeButtonBorder,
     closeButtonHeight,
@@ -179,10 +161,7 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
     width: closeButtonWidth
   };
 });
-const ContentContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__ContentContainer",
-  componentId: "components-web__sc-1563bo5-7"
-})({
+const ContentContainer = styled.div({
   'margin-left': 'auto',
   'margin-right': 'auto',
   left: 0,
@@ -196,10 +175,7 @@ const ContentContainer = /*#__PURE__*/styled.div.withConfig({
     width: maxWidth
   };
 });
-const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__StyledCustomContentContainer",
-  componentId: "components-web__sc-1563bo5-8"
-})(_ref9 => {
+const StyledCustomContentContainer = styled.div(_ref9 => {
   let {
     listItemColor,
     listItemFontSize,

package/lib/Footnote/FootnoteLink.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { applyTextStyles, selectSystemProps, useCopy, useThemeTokens, variantProp } from '@telus-uds/components-base';
 import dictionary from './dictionary';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledSup = /*#__PURE__*/styled.sup.withConfig({
-  displayName: "FootnoteLink__StyledSup",
-  componentId: "components-web__sc-17nd7xo-0"
-})(_ref => {
+const StyledSup = styled.sup(_ref => {
   let {
     fontSize,
     lineHeight,

package/lib/NavigationBar/NavigationBar.js

@@ -1,18 +1,17 @@
 var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
 import React from 'react';
 import PropTypes from 'prop-types';
-import { selectSystemProps, StackView, Typography, useResponsiveProp, withLinkRouter } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs } from '../utils';
+import { selectSystemProps, StackView, Typography, useHash, useInputValue, useResponsiveProp, withLinkRouter } from '@telus-uds/components-base';
+import { htmlAttrs, scrollToAnchor, styledComponents } from '../utils';
 import NavigationItem from './NavigationItem';
 import NavigationSubMenu from './NavigationSubMenu';
 import collapseItems from './collapseItems';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Heading = /*#__PURE__*/styled.div.withConfig({
-  displayName: "NavigationBar__Heading",
-  componentId: "components-web__sc-1vis1gt-0"
-})({
+const Heading = styled.div({
   alignItems: 'center',
   display: 'flex',
   flex: 1,
@@ -33,18 +32,56 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     heading,
     headingLevel = 'h1',
     items,
-    onChange = () => {},
+    onChange,
     selectedId,
+    value,
     LinkRouter,
     linkRouterProps,
     ...rest
   } = _ref;
+  const {
+    currentValue,
+    setValue
+  } = useInputValue({
+    value,
+    initialValue: selectedId,
+    onChange
+  });
+  useHash((hash, event) => {
+    let hashItem = hash && items.find(_ref2 => {
+      let {
+        href
+      } = _ref2;
+      return hash === href;
+    });
+    if (!hashItem) {
+      const parentItem = items.find(_ref3 => {
+        let {
+          items: parentItems
+        } = _ref3;
+        return parentItems === null || parentItems === void 0 ? void 0 : parentItems.some(_ref4 => {
+          let {
+            href
+          } = _ref4;
+          return hash === href;
+        });
+      });
+      hashItem = parentItem === null || parentItem === void 0 ? void 0 : parentItem.items.find(_ref5 => {
+        let {
+          href
+        } = _ref5;
+        return hash === href;
+      });
+    }
+    const hashId = hashItem && (hashItem.id || hashItem.label);
+    if (hashId) setValue(hashId, event);
+  }, [items, setValue]);
   const direction = useResponsiveProp({
     xs: 'column',
     sm: 'row'
   });
   const itemsForViewport = useResponsiveProp({
-    xs: collapseItems(items, selectedId),
+    xs: collapseItems(items, currentValue),
     lg: items
   });
   const openOverlayRef = React.useRef(null);
@@ -118,7 +155,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         heading: headingLevel,
         children: heading
       })
-    }), itemsForViewport === null || itemsForViewport === void 0 ? void 0 : itemsForViewport.map((_ref2, index) => {
+    }), itemsForViewport === null || itemsForViewport === void 0 ? void 0 : itemsForViewport.map((_ref6, index) => {
       let {
         href,
         label,
@@ -129,38 +166,50 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         linkRouterProps: itemLinkRouterProps,
         items: nestedItems,
         ...itemRest
-      } = _ref2;
+      } = _ref6;
       const itemId = id ?? label;
       const handleClick = event => {
         if (nestedItems) {
           setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null);
+          return;
+        }
+        if (href !== null && href !== void 0 && href.startsWith('#')) {
+          scrollToAnchor(href, event, () => setValue(itemId, event));
+        } else {
+          setValue(itemId, event);
         }
         onClick === null || onClick === void 0 || onClick(event);
-        onChange === null || onChange === void 0 || onChange(itemId, event);
       };
       const ItemComponent = nestedItems ? NavigationSubMenu : NavigationItem;
       const isOpen = itemId === openSubMenuId;
+      const scrollableNestedItems = (nestedItems === null || nestedItems === void 0 ? void 0 : nestedItems.map(item => ({
+        ...item,
+        onPress: event => {
+          const nestedItemId = item.id ?? item.label;
+          scrollToAnchor(item.href, event, () => setValue(nestedItemId, event));
+        }
+      }))) ?? nestedItems;
       return /*#__PURE__*/_jsx(ItemComponent, {
         ref: itemRef,
         href: href,
         onClick: handleClick
         // TODO: refactor to pass selected ID via context
         ,
-        selectedId: selectedId,
+        selectedId: currentValue,
         index: index,
         LinkRouter: ItemLinkRouter,
         linkRouterProps: {
           ...linkRouterProps,
           ...itemLinkRouterProps
         },
-        items: nestedItems,
-        selected: itemId === selectedId,
+        items: scrollableNestedItems,
+        selected: itemId === currentValue,
         itemsContainerRef: itemsRef,
         ...itemRest,
-        ...(nestedItems && {
+        ...(scrollableNestedItems && {
           isOpen
         }),
-        ...(nestedItems && isOpen && {
+        ...(scrollableNestedItems && isOpen && {
           openOverlayRef
         }),
         children: label
@@ -177,7 +226,7 @@ NavigationBar.propTypes = {
    *
    * Each `item` object must contain:
    *  - `heading` - user-facing text in the tab link
-   *  - `href` - the URL of the page linked to. Do not use hash links, for content within a page, use `Tabs`.
+   *  - `href` - the URL of the page linked to.
    *  - `id` - a stable, unique identifier of the page within the set. Not written into the HTML.
    */
   items: PropTypes.arrayOf(PropTypes.shape({
@@ -208,13 +257,17 @@ NavigationBar.propTypes = {
    */
   headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
   /**
-   * Matches the `id` property of the item in `items` corresponding to the current page
+   * Initial selected item ID
    */
-  selectedId: PropTypes.string.isRequired,
+  selectedId: PropTypes.string,
   /**
    * Optional function to be called on pressing a link
    */
   onChange: PropTypes.func,
+  /**
+   * Controlled value for selected item ID
+   */
+  value: PropTypes.string,
   /**
    * Accesibility role for stackview
    */

package/lib/NavigationBar/NavigationItem.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, selectSystemProps, useResponsiveProp, useViewport, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const defaultMaxWidth = 192;
-const ItemContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "NavigationItem__ItemContainer",
-  componentId: "components-web__sc-ql9x7c-0"
-})(_ref => {
+const ItemContainer = styled.div(_ref => {
   let {
     targetWidth
   } = _ref;

package/lib/OrderedList/Item.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { applyTextStyles, getTokensPropType, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, wrapStringsInText } from '@telus-uds/components-base';
 import ItemBase from './ItemBase';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { OL_COUNTER_NAME } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const selectItemTextStyles = (_ref, themeOptions) => {
   let {
@@ -25,10 +27,7 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     lineHeight: itemLineHeight
   });
 };
-const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
-  displayName: "Item__StyledItemBase",
-  componentId: "components-web__sc-7jzwcq-0"
-})(_ref2 => {
+const StyledItemBase = styled(ItemBase)(_ref2 => {
   let {
     interItemMargin,
     itemBulletContainerWidth,
@@ -67,13 +66,10 @@ const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
     }
   };
 });
-const ItemContent = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Item__ItemContent",
-  componentId: "components-web__sc-7jzwcq-1"
-})({
+const ItemContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  gap: 5
+  gap: 0
 });
 const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {

package/lib/OrderedList/ItemBase.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import { styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledItem = /*#__PURE__*/styled.li.withConfig({
-  displayName: "ItemBase__StyledItem",
-  componentId: "components-web__sc-o0oiv5-0"
-})({
+const {
+  styled
+} = styledComponents;
+const StyledItem = styled.li({
   display: 'flex'
 });
 const Item = _ref => {

package/lib/OrderedList/OrderedList.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import OrderedListBase from './OrderedListBase';
 import Item from './Item';
 import { OL_COUNTER_NAME } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledOrderedListBase = /*#__PURE__*/styled(OrderedListBase).withConfig({
-  displayName: "OrderedList__StyledOrderedListBase",
-  componentId: "components-web__sc-t5az8z-0"
-})(_ref => {
+const StyledOrderedListBase = styled(OrderedListBase)(_ref => {
   let {
     start
   } = _ref;

package/lib/OrderedList/OrderedListBase.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import { styledComponents } from '../utils';
 import ItemBase from './ItemBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledList = /*#__PURE__*/styled.ol.withConfig({
-  displayName: "OrderedListBase__StyledList",
-  componentId: "components-web__sc-4m9lgj-0"
-})({
+const {
+  styled
+} = styledComponents;
+const StyledList = styled.ol({
   display: 'flex',
   flexDirection: 'column',
   listStylePosition: 'inside',

package/lib/Paragraph/Paragraph.js

@@ -1,19 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, useTypographyTheme } from '../utils';
+import { htmlAttrs, useTypographyTheme, styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
-  displayName: "Paragraph__StyledParagraph",
-  componentId: "components-web__sc-1bg9r8p-0"
-})(["", " ", " &:first-child{margin-block-start:0em;}&:last-child{margin-block-end:0em;}"], _ref => {
+const StyledParagraph = styled.p`
+  ${_ref => {
   let {
     align
   } = _ref;
   return align ? `text-align: ${align};` : '';
-}, _ref2 => {
+}}
+  ${_ref2 => {
   let {
     linesBetween
   } = _ref2;
@@ -21,7 +22,14 @@ const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
     margin-block-start: ${linesBetween}em;
     margin-block-end: ${linesBetween}em;
   `;
-});
+}}
+  &:first-child {
+    margin-block-start: 0em;
+  }
+  &:last-child {
+    margin-block-end: 0em;
+  }
+`;
 
 /**
 * Block text as an HTML ```<p>``` element.

package/lib/PreviewCard/PreviewCard.js

@@ -2,20 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash.omit';
 import { Box, getThemeTokens, hrefAttrsProp, PressableCardBase, selectSystemProps, Spacer, StackView, Typography, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useTheme, getTokensPropType } from '@telus-uds/components-base';
-import styled from 'styled-components';
+import { styledComponents } from '../utils';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
 import AuthorDate from './AuthorDate';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 
 // Passes React Native-oriented system props through UDS PressableCardBase
-import { jsx as _jsx, Fragment as _Fragment, 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 FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PreviewCard__FullBleedOffsetOuter",
-  componentId: "components-web__sc-1yfz4de-0"
-})(_ref => {
+const FullBleedOffsetOuter = styled.div(_ref => {
   let {
     borderOffset
   } = _ref;
@@ -24,10 +24,7 @@ const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
     marginTop: borderOffset * 2
   };
 });
-const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PreviewCard__FullBleedOffsetInner",
-  componentId: "components-web__sc-1yfz4de-1"
-})(_ref2 => {
+const FullBleedOffsetInner = styled.div(_ref2 => {
   let {
     borderOffset
   } = _ref2;