@telus-uds/components-web 2.11.0 → 2.13.0

package/lib-module/TermsAndConditions/ExpandCollapse.js

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ExpandCollapse as ExpandCollapseBase, Icon, useThemeTokensCallback } from '@telus-uds/components-base';
+import { ExpandCollapse as ExpandCollapseBase, IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,12 +23,9 @@ const ExpandCollapseIconContainer = /*#__PURE__*/styled.div.withConfig({
   } = _ref;
   return {
     alignItems: tokens.expandIconContainerAlignItems,
-    border: `${tokens.expandIconContainerBorder}px solid ${tokens.expandIconContainerBorderColor}`,
-    borderRadius: '50%',
-    display: 'flex',
-    height: tokens.expandIconContainerHeight,
     justifyContent: tokens.expandIconContainerJustifyContent,
-    margin: `${tokens.expandIconContainerMarginX}px ${tokens.expandIconContainerMarginY}px`,
+    marginLeft: `${tokens.expandIconContainerMarginY}px`,
+    marginRight: `${tokens.expandIconContainerMarginY}px`,
     width: tokens.expandIconContainerWidth
   };
 });
@@ -41,7 +38,7 @@ const ExpandCollapseTitle = /*#__PURE__*/styled.h4.withConfig({
   } = _ref2;
   return {
     color: tokens.expandTitleColor,
-    fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+    fontFamily: `${tokens.expandTitleFontName}${tokens.expandTitleFontWeight}normal`,
     fontSize: tokens.expandTitleFontSize,
     lineHeight: tokens.expandTitleLineHeight,
     margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
@@ -59,8 +56,21 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
     expandContentPaddingBottom,
     expandContentPaddingLeft,
     expandContentPaddingRight,
-    expandContentPaddingTop
+    expandContentPaddingTop,
+    contentBorderColor,
+    contentMarginBottom,
+    expandTitlePaddingLeft,
+    expandTitleBorder,
+    expandTitleBorderColor,
+    expandTitleUnderline
   } = getTokens();
+  const [expand, setExpand] = useState(false);
+
+  const handleExpandToggle = (expandProps, event, expanded) => {
+    expandProps.onToggle('ExpandCollapsePanel', event);
+    setExpand(!expanded);
+  };
+
   return /*#__PURE__*/_jsx(ExpandCollapseBase, {
     tokens: {
       borderWidth: expandBaseBorderWidth
@@ -68,7 +78,12 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
     children: expandProps => /*#__PURE__*/_jsx(ExpandCollapseBase.Panel, { ...expandProps,
       panelId: "ExpandCollapsePanel",
       controlTokens: {
-        icon: null
+        icon: null,
+        backgroundColor: 'transparent',
+        paddingLeft: expandTitlePaddingLeft,
+        borderColor: expandTitleBorderColor,
+        borderWidth: expandTitleBorder,
+        textLine: expandTitleUnderline
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
@@ -82,15 +97,16 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
           expanded
         });
         return /*#__PURE__*/_jsxs(ExpandCollapseControl, {
-          onClick: event => expandProps.onToggle('ExpandCollapsePanel', event),
+          onClick: event => handleExpandToggle(expandProps, event, expanded),
           ref: ref,
           children: [/*#__PURE__*/_jsx(ExpandCollapseIconContainer, {
             tokens: getTokens(),
-            children: /*#__PURE__*/_jsx(Icon, {
+            children: /*#__PURE__*/_jsx(IconButton, {
               icon: icon,
               variant: {
                 size: 'small'
-              }
+              },
+              onClick: event => handleExpandToggle(expandProps, event, expanded)
             })
           }), /*#__PURE__*/_jsx(ExpandCollapseTitle, {
             tokens: getTokens(),
@@ -102,9 +118,11 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
         contentPaddingBottom: expandContentPaddingBottom,
         contentPaddingLeft: expandContentPaddingLeft,
         contentPaddingRight: expandContentPaddingRight,
-        contentPaddingTop: expandContentPaddingTop
+        contentPaddingTop: expandContentPaddingTop,
+        borderColor: contentBorderColor,
+        marginBottom: contentMarginBottom
       },
-      children: children
+      children: expand ? children : null
     })
   });
 });

package/lib-module/TermsAndConditions/TermsAndConditions.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens } from '@telus-uds/components-base';
+import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens, useViewport } from '@telus-uds/components-base';
 import ExpandCollapse from './ExpandCollapse';
 import OrderedListBase from '../OrderedList/OrderedListBase';
 import { htmlAttrs, media, renderStructuredContent } from '../utils';
@@ -47,7 +47,8 @@ const Unordered = /*#__PURE__*/styled.ul.withConfig({
   return {
     listStyleType: 'none',
     margin: 0,
-    padding: tokens.unorderedPadding
+    padding: 0,
+    paddingTop: tokens.unorderedPadding
   };
 });
 const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
@@ -113,9 +114,16 @@ const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
   });
   const hasIndexedContent = indexedContent.length > 0;
   const hasNonIndexedContent = nonIndexedContent.length > 0;
-  const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant);
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, {
+    viewport
+  });
   return /*#__PURE__*/_jsxs("div", { ...selectProps(rest),
-    children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(ExpandCollapse, {
+    children: [/*#__PURE__*/_jsx(Divider, {
+      tokens: {
+        color: themeTokens.dividerColor
+      }
+    }), /*#__PURE__*/_jsx(ExpandCollapse, {
       collapseTitle: getCopy('headingView'),
       expandTitle: getCopy('headingHide'),
       ref: ref,
@@ -137,8 +145,11 @@ const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
             children: /*#__PURE__*/_jsx(Typography, {
               block: true,
               heading: true,
-              variant: {
-                size: 'h4'
+              tokens: {
+                fontName: themeTokens.expandTitleFontName,
+                fontWeight: themeTokens.expandTitleFontWeight,
+                fontSize: themeTokens.titleFontSize,
+                lineHeight: themeTokens.titleLineHeight
               },
               children: getCopy('nonIndexedTitle')
             })
@@ -154,7 +165,11 @@ const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
           })]
         })]
       })
-    }), /*#__PURE__*/_jsx(Divider, {})]
+    }), /*#__PURE__*/_jsx(Divider, {
+      tokens: {
+        color: themeTokens.dividerColor
+      }
+    })]
   });
 });
 TermsAndConditions.displayName = 'TermsAndConditions';

package/lib-module/VideoPicker/VideoPickerPlayer.js

@@ -26,11 +26,13 @@ const VideoPickerPlayer = _ref => {
       space: 2,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: {
-          size: 'h2',
-          colour: 'secondary'
+          size: 'h3'
         },
         children: video.title
       }), /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          colour: 'default'
+        },
         children: video.description
       })]
     })]

package/lib-module/VideoPicker/VideoPickerThumbnail.js

@@ -4,7 +4,7 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import styled from 'styled-components';
-import { StackView, Typography, useViewport, horizontalScrollUtils, useThemeTokens } from '@telus-uds/components-base';
+import { StackView, Typography, useViewport, horizontalScrollUtils, useThemeTokensCallback } from '@telus-uds/components-base';
 import { getTimestamp } from '../shared/VideoSplash/helpers';
 import { VideoPropType, RefPropType } from './videoPropType';
 import VideoSplash from '../shared/VideoSplash/VideoSplash';
@@ -42,37 +42,45 @@ const createReactNativeStyles = _ref => {
   });
 };
 
-const VideoThumbnail = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoPickerThumbnail__VideoThumbnail",
+const ImageContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__ImageContainer",
   componentId: "components-web__sc-1glxurq-0"
-})(["position:relative;width:", ";flex-shrink:0;* button{display:none;}&::before{content:'';display:block;padding-bottom:56.25%;}&::after{content:'';border:", "px solid;border-color:", ";border-radius:", "px;position:absolute;top:0;left:0;right:0;bottom:0;}& > div{border-radius:", "px;}"], props => props.layout === 'vertical' ? '100%' : '144px', _ref2 => {
+})(["padding:", ";border:", ";border-radius:", "px;"], props => `${props.outerBorderGap}px`, props => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`, _ref2 => {
   let {
-    borderWidth
+    outerBorderRadius
   } = _ref2;
-  return borderWidth;
-}, _ref3 => {
+  return outerBorderRadius;
+});
+const VideoThumbnail = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__VideoThumbnail",
+  componentId: "components-web__sc-1glxurq-1"
+})(["position:relative;width:", ";flex-shrink:0;* button{display:none;}&::before{content:'';display:block;padding-bottom:56.25%;}&::after{content:'';border:", "px solid;border-color:", ";border-radius:", "px;position:absolute;top:0;left:0;right:0;bottom:0;}& > div{border-radius:", "px;}"], props => props.layout === 'vertical' ? '100%' : '144px', _ref3 => {
   let {
-    isPlaying,
-    borderColor
+    borderWidth
   } = _ref3;
-  return isPlaying ? borderColor : 'transparent';
+  return borderWidth;
 }, _ref4 => {
   let {
-    borderRadius
+    borderColor
   } = _ref4;
-  return borderRadius;
+  return borderColor;
 }, _ref5 => {
   let {
     borderRadius
   } = _ref5;
   return borderRadius;
+}, _ref6 => {
+  let {
+    borderRadius
+  } = _ref6;
+  return borderRadius;
 });
 const ThumbnailTitleContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoPickerThumbnail__ThumbnailTitleContainer",
-  componentId: "components-web__sc-1glxurq-1"
+  componentId: "components-web__sc-1glxurq-2"
 })(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
 
-const VideoPickerThumbnail = _ref6 => {
+const VideoPickerThumbnail = _ref7 => {
   let {
     videoPlayerRef,
     selectedVideoId,
@@ -83,56 +91,59 @@ const VideoPickerThumbnail = _ref6 => {
     itemPositions,
     index,
     width = '100%'
-  } = _ref6;
+  } = _ref7;
   const viewport = useViewport();
-  const {
-    titleColor,
-    subTitleColor,
-    ...themeTokens
-  } = useThemeTokens('VideoPickerThumbnail');
-  const rnStyles = createReactNativeStyles(themeTokens);
+  const getTokens = useThemeTokensCallback('VideoPickerThumbnail', {}, {});
   const {
     timestamp
   } = getTimestamp(video.videoLength, video.copy);
   const isPlaying = selectedVideoId === video.videoId;
 
-  const renderThumbnailImage = () => /*#__PURE__*/_jsx(VideoThumbnail, { ...themeTokens,
-    isPlaying: isPlaying,
-    layout: layout,
-    children: /*#__PURE__*/_jsx(VideoSplash, {
-      simpleMode: true,
-      poster: video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`,
-      videoLength: video.videoLength,
-      copy: video.copy
-    })
-  });
+  const renderThumbnailImage = themeTokens => {
+    return /*#__PURE__*/_jsx(VideoThumbnail, { ...themeTokens,
+      isPlaying: isPlaying,
+      layout: layout,
+      children: /*#__PURE__*/_jsx(VideoSplash, {
+        simpleMode: true,
+        poster: video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`,
+        videoLength: video.videoLength,
+        copy: video.copy
+      })
+    });
+  };
 
-  const renderThumbnailInfo = () => /*#__PURE__*/_jsxs(StackView, {
-    space: 2,
-    tokens: {
-      flexShrink: 1
-    },
-    children: [/*#__PURE__*/_jsx(ThumbnailTitleContainer, {
-      viewport: viewport,
-      children: /*#__PURE__*/_jsx(Typography, {
+  const renderThumbnailInfo = _ref8 => {
+    let {
+      titleColor,
+      subTitleColor
+    } = _ref8;
+    return /*#__PURE__*/_jsxs(StackView, {
+      space: 2,
+      tokens: {
+        flexShrink: 1
+      },
+      children: [/*#__PURE__*/_jsx(ThumbnailTitleContainer, {
+        viewport: viewport,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            bold: true
+          },
+          tokens: {
+            color: titleColor
+          },
+          children: video.title
+        })
+      }), viewport !== viewports.xs && /*#__PURE__*/_jsx(Typography, {
         variant: {
-          bold: true
+          size: 'micro'
         },
         tokens: {
-          color: isPlaying ? titleColor : 'none'
+          color: subTitleColor
         },
-        children: video.title
-      })
-    }), viewport !== viewports.xs && /*#__PURE__*/_jsx(Typography, {
-      variant: {
-        size: 'micro'
-      },
-      tokens: {
-        color: subTitleColor
-      },
-      children: timestamp
-    })]
-  });
+        children: timestamp
+      })]
+    });
+  };
 
   const handleLayout = itemPositions !== undefined ? getItemPositionLayoutHandler(itemPositions.positions, index) : undefined;
 
@@ -155,14 +166,45 @@ const VideoPickerThumbnail = _ref6 => {
     accessibilityState: {
       checked: isPlaying
     },
-    style: [rnStyles.container, layout === 'horizontal' && rnStyles.horizontal, isFramed && rnStyles.framed, isFramed && index > 0 && rnStyles.framedLine, {
-      width
-    }],
-    children: /*#__PURE__*/_jsxs(StackView, {
-      space: layout === 'vertical' ? 2 : 3,
-      direction: layout === 'vertical' ? 'column' : 'row',
-      children: [renderThumbnailImage(), renderThumbnailInfo()]
-    })
+    style: _ref9 => {
+      let {
+        hovered: hover,
+        focused: focus,
+        pressed
+      } = _ref9;
+      const themeTokens = getTokens({
+        hover,
+        focus,
+        pressed,
+        selected: isPlaying
+      });
+      const rnStyles = createReactNativeStyles(themeTokens);
+      return [rnStyles.container, layout === 'horizontal' && rnStyles.horizontal, isFramed && rnStyles.framed, isFramed && index > 0 && rnStyles.framedLine, {
+        width
+      }, {
+        outline: 'none'
+      }];
+    },
+    children: _ref10 => {
+      let {
+        hovered: hover,
+        focused: focus,
+        pressed
+      } = _ref10;
+      const themeTokens = getTokens({
+        hover,
+        focus,
+        pressed,
+        selected: isPlaying
+      });
+      return /*#__PURE__*/_jsxs(StackView, {
+        space: layout === 'vertical' ? 2 : 3,
+        direction: layout === 'vertical' ? 'column' : 'row',
+        children: [/*#__PURE__*/_jsx(ImageContainer, { ...themeTokens,
+          children: renderThumbnailImage(themeTokens)
+        }), renderThumbnailInfo(themeTokens)]
+      });
+    }
   }, video.videoId);
 };
 

package/lib-module/VideoPicker/VideoSlider.js

@@ -30,7 +30,7 @@ const VideoSlider = _ref => {
     setContainerWidth(width);
   };
 
-  const itemsGap = 24; // '4' on spacing scale
+  const itemsGap = 32; // '5' on spacing scale
 
   const itemsCount = viewport === 'lg' || viewport === 'xl' ? 4 : 3;
   const itemGapPortioned = (itemsCount - 1) * itemsGap / itemsCount;
@@ -40,7 +40,7 @@ const VideoSlider = _ref => {
   );
 
   const content = /*#__PURE__*/_jsx(StackView, {
-    space: 4,
+    space: 5,
     direction: "row",
     accessibilityRole: "radiogroup",
     tokens: {

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.52.0",
+    "@telus-uds/components-base": "1.54.0",
     "@telus-uds/system-constants": "^1.2.1",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.35.0",
+    "@telus-uds/system-theme-tokens": "^2.37.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.11.0"
+  "version": "2.13.0"
 }

package/src/Autocomplete/Loading.jsx

@@ -1,15 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Box, StackView, Typography } from '@telus-uds/components-base'
+import { Box, StackView } from '@telus-uds/components-base'
 import Spinner from '../Spinner'
 
 const Loading = ({ label }) => (
   <Box space={3}>
     <StackView direction="row" space={2} tokens={{ alignItems: 'center' }}>
-      <Spinner inline={true} show={true} size="small" />
-      <Typography variant={{ size: 'small' }} accessibilityLiveRegion="polite">
-        {label}
-      </Typography>
+      <Spinner inline={true} show={true} label={label} labelPosition="right" />
     </StackView>
   </Box>
 )

package/src/Autocomplete/dictionary.js

@@ -1,12 +1,12 @@
 export default {
   en: {
     hasResults: 'Some results are available',
-    loading: 'Loading suggestions...',
+    loading: 'Searching...',
     noResults: 'No results found'
   },
   fr: {
     hasResults: 'Quelques suggestions sont disponible',
-    loading: 'Chargement en cours...',
+    loading: 'Recherche...',
     noResults: 'Aucun résultat trouvé'
   }
 }

package/src/Card/Card.jsx

@@ -23,18 +23,22 @@ import FullBleedContent, {
 const selectCardBaseTokens = ({
   backgroundColor,
   borderColor,
+  gradient,
   borderWidth,
   borderRadius,
   shadow,
   minWidth
-}) => ({
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  borderRadius,
-  shadow,
-  minWidth
-})
+}) => {
+  return {
+    backgroundColor,
+    borderColor,
+    gradient,
+    borderWidth,
+    borderRadius,
+    shadow,
+    minWidth
+  }
+}
 
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])

package/src/DatePicker/DatePicker.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React, { forwardRef, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import momentPropTypes from 'react-moment-proptypes'
@@ -43,6 +43,7 @@ const getResponsiveCircleSize = (inline = false, viewport = 'md') => {
 
   return responsiveCircleSize
 }
+
 const MonthCenterContainer = styled.div({
   display: 'flex',
   justifyContent: 'center'
@@ -104,6 +105,12 @@ const DatePicker = forwardRef(
     const [isFocused, setIsFocused] = useState(false)
     const [isClickedInside, setIsClickedInside] = useState(false)
     const getCopy = useCopy({ dictionary, copy })
+    useEffect(() => {
+      if (!moment(date).isSame(inputDate)) {
+        setInputDate(date)
+        setInputText(date instanceof moment ? date.format(dateFormat) : '')
+      }
+    }, [date, inputDate])
     const onFocusChange = ({ focused }) => {
       if (!isClickedInside) {
         setIsFocused(focused)

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,12 +1,9 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { ExpandCollapse, useThemeTokens } from '@telus-uds/components-base'
+import { ExpandCollapse } from '@telus-uds/components-base'
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
 const ExpandCollapseMini = forwardRef(({ children, onToggle, tokens, ...rest }, ref) => {
-  const { variant } = rest
-  const { borderWidth } = useThemeTokens('ExpandCollapseMini', tokens, variant)
-
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0
@@ -15,13 +12,19 @@ const ExpandCollapseMini = forwardRef(({ children, onToggle, tokens, ...rest },
   }
 
   return (
-    <ExpandCollapse tokens={{ borderWidth }} onChange={handleChange}>
+    <ExpandCollapse onChange={handleChange}>
       {(expandProps) => (
         <ExpandCollapse.Panel
           {...expandProps}
           panelId="ExpandCollapseMiniPanel"
           variant={{ mini: true }}
-          controlTokens={{ icon: null }}
+          controlTokens={{
+            // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+            icon: null,
+            borderColor: 'transparent',
+            textLine: 'none',
+            backgroundColor: 'transparent'
+          }}
           // TODO refactor
           // eslint-disable-next-line react/no-unstable-nested-components
           control={(pressableState) => (

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -13,6 +13,13 @@ const presentationOnly = {
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 }
 
+const selectLinkTokens = ({ color, textLine, lineHeight, fontSize }) => ({
+  color,
+  textLine,
+  blockLineHeight: lineHeight,
+  blockFontSize: fontSize
+})
+
 const ExpandCollapseMiniControl = ({
   pressableState,
   collapseTitle,
@@ -22,9 +29,15 @@ const ExpandCollapseMiniControl = ({
   variant = {},
   ...rest
 }) => {
-  const { expanded, hover } = pressableState || {}
-
-  const { size, icon } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, { expanded })
+  const { expanded, hover, focus } = pressableState || {}
+  // we only want focus outline when focusing, if user is pressing we don't want the border.
+  const { outerBorderColor } = useThemeTokens('Link', {}, {}, { focus })
+  const { size, icon, ...themeTokens } = useThemeTokens(
+    'ExpandCollapseMiniControl',
+    tokens,
+    variant,
+    { expanded, focus }
+  )
 
   // Choose hover styles when any part of Control is hoverred
   const appearance = { ...variant, hover }
@@ -45,7 +58,11 @@ const ExpandCollapseMiniControl = ({
       variant={appearance}
       icon={icon}
       iconPosition={iconPosition}
-      tokens={(linkState) => ({ ...getTokens(linkState), outerBorderWidth: 0 })}
+      tokens={(linkState) => ({
+        ...getTokens(linkState),
+        ...selectLinkTokens(themeTokens),
+        outerBorderColor
+      })}
       {...presentationOnly}
       {...selectProps(rest)}
     >

package/src/Footnote/FootnoteLink.jsx

@@ -123,8 +123,7 @@ FootnoteLink.propTypes = {
 }
 
 FootnoteLink.defaultProps = {
-  copy: 'en',
-  fontSize: 'smaller'
+  copy: 'en'
 }
 
 export default FootnoteLink

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
-import { Icon, Spacer, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base'
+import { Icon, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base'
 import NavigationItem from './NavigationItem'
 import Listbox from '../Listbox'
 import useOverlaidPosition from '../utils/useOverlaidPosition'
@@ -61,12 +61,11 @@ const NavigationSubMenu = ({
       >
         {({ textStyles }) => [
           children,
-          <Spacer key={`${id}_spacer`} space={1} direction="row" />,
           <Icon
             key={`${id}_icon`}
             icon={icoMenu}
-            variant={{ size: 'small' }}
-            tokens={{ color: textStyles[0]?.color, size: textStyles[0]?.fontSize }}
+            variant={{ size: 'micro' }}
+            tokens={{ color: textStyles[0]?.color }}
           />
         ]}
       </NavigationItem>