@telus-uds/components-web 1.12.0 → 2.0.0

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 17 May 2023 00:13:27 GMT and should not be manually modified.
+This log was last generated on Fri, 19 May 2023 04:52:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0
+
+Fri, 19 May 2023 04:52:38 GMT
+
+### Major changes
+
+- Remove `reactRouterLinkComponent` from `Breadcrumbs` (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v1.42.0
+
+### Minor changes
+
+- fix icon tokens (mauricio.batresmontejo@telus.com)
+
+### Patches
+
+- update default space value for stackview component (evander.owusu@telus.com)
+
 ## 1.12.0
 
-Wed, 17 May 2023 00:13:27 GMT
+Wed, 17 May 2023 00:20:05 GMT
 
 ### Minor changes
 

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -95,10 +95,16 @@ const getItems = (items, params, concatenatePaths) => {
     const isLast = i === filteredItems.length - 1;
     const breadcrumbName = getBreadcrumbName(item, params);
     const href = getPath(item.path, params, concatenatePaths, paths);
+    const {
+      LinkRouter,
+      linkRouterProps
+    } = item;
     return {
       breadcrumbName,
       href,
       current: isLast,
+      LinkRouter,
+      linkRouterProps,
       ...omitProps(selectProps(item))
     };
   });
@@ -126,7 +132,6 @@ const Breadcrumbs = _ref2 => {
     linkRouterProps,
     params = {},
     tokens,
-    reactRouterLinkComponent,
     routes,
     variant,
     LinkRouter,
@@ -183,7 +188,6 @@ const Breadcrumbs = _ref2 => {
           href,
           current,
           breadcrumbName,
-          reactRouterLinkComponent: linkComponent = reactRouterLinkComponent,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
@@ -194,9 +198,8 @@ const Breadcrumbs = _ref2 => {
           tokens: tokens,
           key: href,
           linkRouterProps: { ...linkRouterProps,
-            itemLinkRouterProps
+            ...itemLinkRouterProps
           },
-          reactRouterLinkComponent: linkComponent,
           variant: { ...variant,
             size: 'micro'
           },
@@ -225,12 +228,6 @@ Breadcrumbs.propTypes = { ...selectedSystemPropTypes,
    */
   params: _propTypes.default.object,
 
-  /**
-   * React Router Link component.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-
   /**
    * An array of routes to be displayed as breadcrumbs.
    */

package/lib/Breadcrumbs/Item/Item.js

@@ -71,7 +71,6 @@ const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
 const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   let {
     href,
-    reactRouterLinkComponent: ReactRouterLink,
     children,
     current = false,
     tokens,
@@ -79,6 +78,8 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
       light: true
     },
     // `light` variant (shared with the `Link` component) is default by design
+    LinkRouter,
+    linkRouterProps,
     ...rest
   } = _ref5;
   const {
@@ -90,15 +91,9 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     fontSize,
     ...themeTokens
   } = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
-
-  const linkOptions = _componentsBase.clickProps.toPressProps(selectProps(rest));
-
-  if (ReactRouterLink) {
-    linkOptions.to = href;
-  } else {
-    linkOptions.href = href;
-  }
-
+  const linkOptions = { ..._componentsBase.clickProps.toPressProps(selectProps(rest)),
+    href
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemContainer, { ...themeTokens,
     children: current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       tokens: {
@@ -109,26 +104,14 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
       },
       children: children
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [ReactRouterLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactRouterLink, { ...linkOptions,
-        tokens: {
-          color,
-          blockFontSize: fontSize
-        } // TODO refactor
-        // eslint-disable-next-line react/no-unstable-nested-components
-        ,
-        component: props => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...props,
-            variant: variant
-          });
-        },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...linkOptions,
         ref: ref,
-        children: children
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...linkOptions,
         tokens: {
           color,
           blockFontSize: fontSize
         },
-        ref: ref,
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps,
         variant: variant,
         children: children
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, { ...themeTokens,
@@ -156,18 +139,11 @@ Item.propTypes = { ...selectedSystemPropTypes,
   current: _propTypes.default.bool,
 
   /**
-   * Target URL. This will be converted to `to` if the `reactRouterLinkComponent`
+   * Target URL. This will be converted to `to` if the `LinkRouter`
    * prop is provided to the `Item` or parent `Breadcrumbs` element.
    */
   href: _propTypes.default.string.isRequired,
 
-  /**
-   * React Router Link component. This will be passed down from the parent
-   * `<Breadcrumbs>` if the parent has a `reactRouterLinkComponent` provided.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-
   /**
    * Variant to render.
    */
@@ -179,12 +155,9 @@ Item.propTypes = { ...selectedSystemPropTypes,
 
 Item.defaultProps = {
   current: false,
-  reactRouterLinkComponent: undefined,
   variant: {
     light: true
   }
 };
-
-var _default = (0, _componentsBase.withLinkRouter)(Item);
-
+var _default = Item;
 exports.default = _default;

package/lib/Footnote/Footnote.js

@@ -52,7 +52,6 @@ const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
     width: '100vw',
     backgroundColor: footnoteBackground,
     display: 'block',
-    boxShadow: '0 0 16px 0 rgba(0, 0, 0, 0.1)',
     transform: 'translateY(100%)',
     transition: 'transform 500ms ease-out',
     '@media() (prefers-reduced-motion: reduce)': {
@@ -95,14 +94,20 @@ const StyledHeader = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-1563bo5-2"
 })(_ref3 => {
   let {
-    headerMargin
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom
   } = _ref3;
   return {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    margin: headerMargin
+    paddingTop: footnoteHeaderPaddingTop,
+    paddingBottom: footnoteHeaderPaddingBottom,
+    paddingRight: footnoteHeaderPaddingRight,
+    paddingLeft: footnoteHeaderPaddingLeft
   };
 });
 
@@ -202,6 +207,7 @@ const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
+    backgroundColor: 'white',
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -295,6 +301,14 @@ const Footnote = props => {
     footnoteBodyPaddingRight,
     footnoteBodyPaddingTop,
     footnoteBodyPaddingBottom,
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom,
+    headerLineHeight,
+    headerFontSize,
+    headerFontName,
+    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -506,13 +520,16 @@ const Footnote = props => {
             ref: headerRef,
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHeader, {
               ref: headingRef,
+              footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
+              footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
+              footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
+              footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
               headerMargin: headerMargin,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-                block: true,
-                heading: true,
-                tabIndex: -1,
-                variant: {
-                  size: 'h4'
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+                style: {
+                  fontSize: `${headerFontSize}px`,
+                  lineHeight: `${headerLineHeight}px`,
+                  fontFamily: `${headerFontName}${headerFontWeight}normal`
                 },
                 children: getCopy('heading')
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {

package/lib-module/Breadcrumbs/Breadcrumbs.js

@@ -75,10 +75,16 @@ const getItems = (items, params, concatenatePaths) => {
     const isLast = i === filteredItems.length - 1;
     const breadcrumbName = getBreadcrumbName(item, params);
     const href = getPath(item.path, params, concatenatePaths, paths);
+    const {
+      LinkRouter,
+      linkRouterProps
+    } = item;
     return {
       breadcrumbName,
       href,
       current: isLast,
+      LinkRouter,
+      linkRouterProps,
       ...omitProps(selectProps(item))
     };
   });
@@ -106,7 +112,6 @@ const Breadcrumbs = _ref2 => {
     linkRouterProps,
     params = {},
     tokens,
-    reactRouterLinkComponent,
     routes,
     variant,
     LinkRouter,
@@ -165,7 +170,6 @@ const Breadcrumbs = _ref2 => {
           href,
           current,
           breadcrumbName,
-          reactRouterLinkComponent: linkComponent = reactRouterLinkComponent,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
@@ -176,9 +180,8 @@ const Breadcrumbs = _ref2 => {
           tokens: tokens,
           key: href,
           linkRouterProps: { ...linkRouterProps,
-            itemLinkRouterProps
+            ...itemLinkRouterProps
           },
-          reactRouterLinkComponent: linkComponent,
           variant: { ...variant,
             size: 'micro'
           },
@@ -207,12 +210,6 @@ Breadcrumbs.propTypes = { ...selectedSystemPropTypes,
    */
   params: PropTypes.object,
 
-  /**
-   * React Router Link component.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /**
    * An array of routes to be displayed as breadcrumbs.
    */

package/lib-module/Breadcrumbs/Item/Item.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens, withLinkRouter } from '@telus-uds/components-base';
+import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
 import { htmlAttrs } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -51,7 +51,6 @@ const IconContainer = /*#__PURE__*/styled.span.withConfig({
 const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
   let {
     href,
-    reactRouterLinkComponent: ReactRouterLink,
     children,
     current = false,
     tokens,
@@ -59,6 +58,8 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
       light: true
     },
     // `light` variant (shared with the `Link` component) is default by design
+    LinkRouter,
+    linkRouterProps,
     ...rest
   } = _ref5;
   const {
@@ -70,14 +71,9 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
     fontSize,
     ...themeTokens
   } = useThemeTokens('Breadcrumbs', tokens, variant);
-  const linkOptions = clickProps.toPressProps(selectProps(rest));
-
-  if (ReactRouterLink) {
-    linkOptions.to = href;
-  } else {
-    linkOptions.href = href;
-  }
-
+  const linkOptions = { ...clickProps.toPressProps(selectProps(rest)),
+    href
+  };
   return /*#__PURE__*/_jsx(StyledItemContainer, { ...themeTokens,
     children: current ? /*#__PURE__*/_jsx(Typography, {
       tokens: {
@@ -88,26 +84,14 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
       },
       children: children
     }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [ReactRouterLink ? /*#__PURE__*/_jsx(ReactRouterLink, { ...linkOptions,
-        tokens: {
-          color,
-          blockFontSize: fontSize
-        } // TODO refactor
-        // eslint-disable-next-line react/no-unstable-nested-components
-        ,
-        component: props => {
-          return /*#__PURE__*/_jsx(Link, { ...props,
-            variant: variant
-          });
-        },
+      children: [/*#__PURE__*/_jsx(Link, { ...linkOptions,
         ref: ref,
-        children: children
-      }) : /*#__PURE__*/_jsx(Link, { ...linkOptions,
         tokens: {
           color,
           blockFontSize: fontSize
         },
-        ref: ref,
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps,
         variant: variant,
         children: children
       }), /*#__PURE__*/_jsx(IconContainer, { ...themeTokens,
@@ -135,18 +119,11 @@ Item.propTypes = { ...selectedSystemPropTypes,
   current: PropTypes.bool,
 
   /**
-   * Target URL. This will be converted to `to` if the `reactRouterLinkComponent`
+   * Target URL. This will be converted to `to` if the `LinkRouter`
    * prop is provided to the `Item` or parent `Breadcrumbs` element.
    */
   href: PropTypes.string.isRequired,
 
-  /**
-   * React Router Link component. This will be passed down from the parent
-   * `<Breadcrumbs>` if the parent has a `reactRouterLinkComponent` provided.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /**
    * Variant to render.
    */
@@ -158,9 +135,8 @@ Item.propTypes = { ...selectedSystemPropTypes,
 
 Item.defaultProps = {
   current: false,
-  reactRouterLinkComponent: undefined,
   variant: {
     light: true
   }
 };
-export default withLinkRouter(Item);
+export default Item;

package/lib-module/Footnote/Footnote.js

@@ -31,7 +31,6 @@ const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
     width: '100vw',
     backgroundColor: footnoteBackground,
     display: 'block',
-    boxShadow: '0 0 16px 0 rgba(0, 0, 0, 0.1)',
     transform: 'translateY(100%)',
     transition: 'transform 500ms ease-out',
     '@media() (prefers-reduced-motion: reduce)': {
@@ -72,14 +71,20 @@ const StyledHeader = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1563bo5-2"
 })(_ref3 => {
   let {
-    headerMargin
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom
   } = _ref3;
   return {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    margin: headerMargin
+    paddingTop: footnoteHeaderPaddingTop,
+    paddingBottom: footnoteHeaderPaddingBottom,
+    paddingRight: footnoteHeaderPaddingRight,
+    paddingLeft: footnoteHeaderPaddingLeft
   };
 });
 const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
@@ -176,6 +181,7 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
+    backgroundColor: 'white',
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -267,6 +273,14 @@ const Footnote = props => {
     footnoteBodyPaddingRight,
     footnoteBodyPaddingTop,
     footnoteBodyPaddingBottom,
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom,
+    headerLineHeight,
+    headerFontSize,
+    headerFontName,
+    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -478,13 +492,16 @@ const Footnote = props => {
             ref: headerRef,
             children: /*#__PURE__*/_jsxs(StyledHeader, {
               ref: headingRef,
+              footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
+              footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
+              footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
+              footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
               headerMargin: headerMargin,
-              children: [/*#__PURE__*/_jsx(Typography, {
-                block: true,
-                heading: true,
-                tabIndex: -1,
-                variant: {
-                  size: 'h4'
+              children: [/*#__PURE__*/_jsx("h2", {
+                style: {
+                  fontSize: `${headerFontSize}px`,
+                  lineHeight: `${headerLineHeight}px`,
+                  fontFamily: `${headerFontName}${headerFontWeight}normal`
                 },
                 children: getCopy('heading')
               }), /*#__PURE__*/_jsx(CloseButton, {

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.41.0",
+    "@telus-uds/components-base": "1.42.0",
     "@telus-uds/system-constants": "^1.2.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -61,5 +61,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.12.0"
+  "version": "2.0.0"
 }

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -74,10 +74,13 @@ const getItems = (items, params, concatenatePaths) => {
       const isLast = i === filteredItems.length - 1
       const breadcrumbName = getBreadcrumbName(item, params)
       const href = getPath(item.path, params, concatenatePaths, paths)
+      const { LinkRouter, linkRouterProps } = item
       return {
         breadcrumbName,
         href,
         current: isLast,
+        LinkRouter,
+        linkRouterProps,
         ...omitProps(selectProps(item))
       }
     })
@@ -103,7 +106,6 @@ const Breadcrumbs = ({
   linkRouterProps,
   params = {},
   tokens,
-  reactRouterLinkComponent,
   routes,
   variant,
   LinkRouter,
@@ -157,25 +159,25 @@ const Breadcrumbs = ({
             href,
             current,
             breadcrumbName,
-            reactRouterLinkComponent: linkComponent = reactRouterLinkComponent,
             LinkRouter: ItemLinkRouter = LinkRouter,
             linkRouterProps: itemLinkRouterProps,
             ...itemRest
-          }) => (
-            <Item
-              {...itemRest}
-              current={current}
-              href={href}
-              tokens={tokens}
-              key={href}
-              linkRouterProps={{ ...linkRouterProps, itemLinkRouterProps }}
-              reactRouterLinkComponent={linkComponent}
-              variant={{ ...variant, size: 'micro' }}
-              LinkRouter={ItemLinkRouter}
-            >
-              {breadcrumbName}
-            </Item>
-          )
+          }) => {
+            return (
+              <Item
+                {...itemRest}
+                current={current}
+                href={href}
+                tokens={tokens}
+                key={href}
+                linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
+                variant={{ ...variant, size: 'micro' }}
+                LinkRouter={ItemLinkRouter}
+              >
+                {breadcrumbName}
+              </Item>
+            )
+          }
         )}
       </StyledList>
       {metadata}
@@ -198,11 +200,6 @@ Breadcrumbs.propTypes = {
    * React Router params.
    */
   params: PropTypes.object,
-  /**
-   * React Router Link component.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * An array of routes to be displayed as breadcrumbs.
    */

package/src/Breadcrumbs/Item/Item.jsx

@@ -7,8 +7,7 @@ import {
   applyTextStyles,
   clickProps,
   selectSystemProps,
-  useThemeTokens,
-  withLinkRouter
+  useThemeTokens
 } from '@telus-uds/components-base'
 import { htmlAttrs } from '../../utils'
 
@@ -31,11 +30,12 @@ const Item = forwardRef(
   (
     {
       href,
-      reactRouterLinkComponent: ReactRouterLink,
       children,
       current = false,
       tokens,
       variant = { light: true }, // `light` variant (shared with the `Link` component) is default by design
+      LinkRouter,
+      linkRouterProps,
       ...rest
     },
     ref
@@ -50,13 +50,7 @@ const Item = forwardRef(
       ...themeTokens
     } = useThemeTokens('Breadcrumbs', tokens, variant)
 
-    const linkOptions = clickProps.toPressProps(selectProps(rest))
-
-    if (ReactRouterLink) {
-      linkOptions.to = href
-    } else {
-      linkOptions.href = href
-    }
+    const linkOptions = { ...clickProps.toPressProps(selectProps(rest)), href }
 
     return (
       <StyledItemContainer {...themeTokens}>
@@ -66,29 +60,16 @@ const Item = forwardRef(
           </Typography>
         ) : (
           <>
-            {ReactRouterLink ? (
-              <ReactRouterLink
-                {...linkOptions}
-                tokens={{ color, blockFontSize: fontSize }}
-                // TODO refactor
-                // eslint-disable-next-line react/no-unstable-nested-components
-                component={(props) => {
-                  return <Link {...props} variant={variant} />
-                }}
-                ref={ref}
-              >
-                {children}
-              </ReactRouterLink>
-            ) : (
-              <Link
-                {...linkOptions}
-                tokens={{ color, blockFontSize: fontSize }}
-                ref={ref}
-                variant={variant}
-              >
-                {children}
-              </Link>
-            )}
+            <Link
+              {...linkOptions}
+              ref={ref}
+              tokens={{ color, blockFontSize: fontSize }}
+              LinkRouter={LinkRouter}
+              linkRouterProps={linkRouterProps}
+              variant={variant}
+            >
+              {children}
+            </Link>
             <IconContainer {...themeTokens}>
               <ChevronRightIcon size={iconSize} color={iconColor} />
             </IconContainer>
@@ -114,16 +95,10 @@ Item.propTypes = {
    */
   current: PropTypes.bool,
   /**
-   * Target URL. This will be converted to `to` if the `reactRouterLinkComponent`
+   * Target URL. This will be converted to `to` if the `LinkRouter`
    * prop is provided to the `Item` or parent `Breadcrumbs` element.
    */
   href: PropTypes.string.isRequired,
-  /**
-   * React Router Link component. This will be passed down from the parent
-   * `<Breadcrumbs>` if the parent has a `reactRouterLinkComponent` provided.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Variant to render.
    */
@@ -134,8 +109,7 @@ Item.propTypes = {
 // - probably related https://github.com/yannickcr/eslint-plugin-react/issues/2760
 Item.defaultProps = {
   current: false,
-  reactRouterLinkComponent: undefined,
   variant: { light: true }
 }
 
-export default withLinkRouter(Item)
+export default Item

package/src/Footnote/Footnote.jsx

@@ -32,7 +32,6 @@ const StyledFootnote = styled.div(
     width: '100vw',
     backgroundColor: footnoteBackground,
     display: 'block',
-    boxShadow: '0 0 16px 0 rgba(0, 0, 0, 0.1)',
     transform: 'translateY(100%)',
     transition: 'transform 500ms ease-out',
     '@media() (prefers-reduced-motion: reduce)': {
@@ -63,13 +62,23 @@ const StyledFootnoteHeader = styled.div({
   width: '100%'
 })
 
-const StyledHeader = styled.div(({ headerMargin }) => ({
-  alignItems: 'center',
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  margin: headerMargin
-}))
+const StyledHeader = styled.div(
+  ({
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom
+  }) => ({
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingTop: footnoteHeaderPaddingTop,
+    paddingBottom: footnoteHeaderPaddingBottom,
+    paddingRight: footnoteHeaderPaddingRight,
+    paddingLeft: footnoteHeaderPaddingLeft
+  })
+)
 
 const StyledFootnoteBody = styled.div(
   {
@@ -134,6 +143,7 @@ const CloseButton = styled.button(
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
+    backgroundColor: 'white',
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -208,6 +218,14 @@ const Footnote = (props) => {
     footnoteBodyPaddingRight,
     footnoteBodyPaddingTop,
     footnoteBodyPaddingBottom,
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom,
+    headerLineHeight,
+    headerFontSize,
+    headerFontName,
+    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -423,10 +441,23 @@ const Footnote = (props) => {
         >
           <ContentContainer maxWidth={maxWidth}>
             <StyledFootnoteHeader ref={headerRef}>
-              <StyledHeader ref={headingRef} headerMargin={headerMargin}>
-                <Typography block heading tabIndex={-1} variant={{ size: 'h4' }}>
+              <StyledHeader
+                ref={headingRef}
+                footnoteHeaderPaddingLeft={footnoteHeaderPaddingLeft}
+                footnoteHeaderPaddingRight={footnoteHeaderPaddingRight}
+                footnoteHeaderPaddingTop={footnoteHeaderPaddingTop}
+                footnoteHeaderPaddingBottom={footnoteHeaderPaddingBottom}
+                headerMargin={headerMargin}
+              >
+                <h2
+                  style={{
+                    fontSize: `${headerFontSize}px`,
+                    lineHeight: `${headerLineHeight}px`,
+                    fontFamily: `${headerFontName}${headerFontWeight}normal`
+                  }}
+                >
                   {getCopy('heading')}
-                </Typography>
+                </h2>
                 <CloseButton
                   closeButtonBorder={`${closeButtonBorderSize}px solid ${closeButtonBorderColor}`}
                   closeButtonWidth={`${closeButtonWidth}px`}