@telus-uds/components-web 2.20.1 → 2.21.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 16 Oct 2023 22:48:33 GMT and should not be manually modified.
+This log was last generated on Thu, 19 Oct 2023 00:22:35 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.21.0
+
+Thu, 19 Oct 2023 00:22:35 GMT
+
+### Minor changes
+
+- Changes to the footnote component to align with design intention (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.64.0
+
+### Patches
+
+- Fix image height prop type (carlos.jeronimo@telus.com)
+- inverse variant story for badge component (mauricio.batresmontejo@telus.com)
+
 ## 2.20.1
 
-Mon, 16 Oct 2023 22:48:33 GMT
+Mon, 16 Oct 2023 22:55:37 GMT
 
 ### Patches
 

package/lib/Footnote/Footnote.js

@@ -28,6 +28,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const viewportBreakpoint = 1440;
 const GlobalBodyScrollLock = /*#__PURE__*/(0, _styledComponents.createGlobalStyle)({
   'html, body': (0, _utils.media)().until('md').css({
     overflow: 'hidden'
@@ -41,18 +42,20 @@ const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
   let {
     footnoteBackground,
     isVisible,
-    footnoteBorderTop
+    footnoteBorderTop,
+    isScrollable
   } = _ref;
   return {
     position: 'fixed',
-    overflowY: 'scroll',
+    overflowY: isVisible && isScrollable ? 'scroll' : 'hidden',
     top: 0,
-    left: 0,
+    left: window.innerWidth >= viewportBreakpoint ? '50%' : 0,
     height: '100vh',
     width: '100vw',
     backgroundColor: footnoteBackground,
     display: 'block',
     transform: 'translateY(100%)',
+    translate: window.innerWidth >= viewportBreakpoint ? '-50%' : '',
     transition: 'transform 500ms ease-out',
     '@media() (prefers-reduced-motion: reduce)': {
       transition: 'none'
@@ -84,10 +87,10 @@ const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const StyledFootnoteHeader = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Footnote__StyledFootnoteHeader",
   componentId: "components-web__sc-1563bo5-1"
-})({
+})(() => ({
   position: 'relative',
   width: '100%'
-});
+}));
 
 const StyledHeader = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Footnote__StyledHeader",
@@ -114,38 +117,27 @@ const StyledHeader = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const StyledFootnoteBody = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Footnote__StyledFootnoteBody",
   componentId: "components-web__sc-1563bo5-3"
-})({
-  overflow: 'auto',
-  transition: 'height 300ms ease-out, opacity 200ms ease-out',
-  transform: 'translateZ(0)',
-  '@media() (prefers-reduced-motion: reduce)': {
-    transition: 'height 1ms ease-out, opacity 1ms ease-out'
-  }
-}, _ref4 => {
+})(_ref4 => {
   let {
     footnoteBodyBackground,
-    footnoteBodyPadding
+    footnoteBodyPadding,
+    headerHeight,
+    bodyHeight,
+    isTextVisible
   } = _ref4;
   return {
+    overflow: 'auto',
+    transition: 'height 300ms ease-out, opacity 200ms ease-out',
+    transform: 'translateZ(0)',
+    '@media() (prefers-reduced-motion: reduce)': {
+      transition: 'height 1ms ease-out, opacity 1ms ease-out'
+    },
     backgroundColor: footnoteBodyBackground,
-    padding: footnoteBodyPadding
-  };
-}, _ref5 => {
-  let {
-    headerHeight
-  } = _ref5;
-  return {
+    padding: footnoteBodyPadding,
     maxHeight: `calc(100vh - ${headerHeight}px)`,
     ...(0, _utils.media)().from('md').css({
       maxHeight: `calc(50vh - ${headerHeight}px)`
-    })
-  };
-}, _ref6 => {
-  let {
-    bodyHeight,
-    isTextVisible
-  } = _ref6;
-  return {
+    }),
     height: bodyHeight,
     opacity: isTextVisible ? 1 : 0
   };
@@ -154,10 +146,10 @@ const StyledFootnoteBody = /*#__PURE__*/_styledComponents.default.div.withConfig
 const List = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
   displayName: "Footnote__List",
   componentId: "components-web__sc-1563bo5-4"
-})(_ref7 => {
+})(_ref5 => {
   let {
     listPaddingLeft
-  } = _ref7;
+  } = _ref5;
   return {
     listStylePosition: 'outside',
     paddingLeft: listPaddingLeft
@@ -166,7 +158,7 @@ const List = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.defaul
 const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default.Item).withConfig({
   displayName: "Footnote__ListItem",
   componentId: "components-web__sc-1563bo5-5"
-})(_ref8 => {
+})(_ref6 => {
   let {
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -174,7 +166,7 @@ const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.de
     listItemFontSize,
     listItemLineHeight,
     listItemPaddingLeft
-  } = _ref8;
+  } = _ref6;
   return {
     display: 'list-item',
     '&::marker': {
@@ -194,14 +186,14 @@ const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.de
 const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
   displayName: "Footnote__CloseButton",
   componentId: "components-web__sc-1563bo5-6"
-})(_ref9 => {
+})(_ref7 => {
   let {
     closeButtonBorder,
     closeButtonHeight,
     closeButtonBackgroundColor,
     closeButtonMargin,
     closeButtonWidth
-  } = _ref9;
+  } = _ref7;
   return {
     alignItems: 'center',
     borderRadius: '50%',
@@ -223,11 +215,12 @@ const ContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   'margin-left': 'auto',
   'margin-right': 'auto',
   left: 0,
-  right: 0
-}, _ref10 => {
+  right: 0,
+  maxWidth: '1200px'
+}, _ref8 => {
   let {
     maxWidth
-  } = _ref10;
+  } = _ref8;
   return {
     width: maxWidth
   };
@@ -236,13 +229,13 @@ const ContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Footnote__StyledCustomContentContainer",
   componentId: "components-web__sc-1563bo5-8"
-})(_ref11 => {
+})(_ref9 => {
   let {
     listItemColor,
     listItemFontSize,
     listItemLineHeight,
     listItemPaddingLeft
-  } = _ref11;
+  } = _ref9;
   return {
     fontSize: listItemFontSize,
     lineHeight: listItemLineHeight,
@@ -287,6 +280,7 @@ const usePrevious = value => {
 const Footnote = props => {
   var _theme$themeOptions;
 
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     copy,
     number,
@@ -332,7 +326,9 @@ const Footnote = props => {
     closeButtonWidth,
     closeButtonIconSize,
     closeIcon
-  } = (0, _componentsBase.useThemeTokens)('Footnote', tokens, variant);
+  } = (0, _componentsBase.useThemeTokens)('Footnote', tokens, variant, {
+    viewport
+  });
   const footnoteRef = (0, _react.useRef)(null);
   const headerRef = (0, _react.useRef)(null);
   const bodyRef = (0, _react.useRef)(null);
@@ -353,6 +349,7 @@ const Footnote = props => {
   const prevProps = usePrevious(props);
   const theme = (0, _componentsBase.useTheme)();
   const maxWidth = (0, _componentsBase.useResponsiveProp)((_theme$themeOptions = theme.themeOptions) === null || _theme$themeOptions === void 0 ? void 0 : _theme$themeOptions.contentMaxWidth);
+  const [isScrollable, setIsScrollable] = (0, _react.useState)(false);
   const closeFootnote = (0, _react.useCallback)((event, options) => {
     onClose(event, options);
   }, [onClose]); // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
@@ -522,6 +519,22 @@ const Footnote = props => {
       })
     });
   }, [data.content, data.number, listItemColor, listItemFontSize, listItemLineHeight, listItemMarkerFontSize, listItemMarkerLineHeight, listItemPaddingLeft, listPaddingLeft]);
+  const checkIfScrollable = (0, _react.useCallback)(() => {
+    const footnoteElement = footnoteRef.current;
+
+    if (footnoteElement) {
+      const footnoteViewportHeight = footnoteElement.clientHeight ? footnoteElement.clientHeight : 0;
+      const contentHeight = contentRef.current ? contentRef.current.offsetHeight : 0;
+      setIsScrollable(contentHeight > footnoteViewportHeight * 0.5);
+    }
+  }, [contentRef, setIsScrollable]);
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        checkIfScrollable();
+      }, 100);
+    }
+  }, [isOpen, checkIfScrollable]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...selectProps(rest),
       children: [isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalBodyScrollLock, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnote, {
@@ -532,10 +545,12 @@ const Footnote = props => {
         tabIndex: 0,
         footnoteBackground: footnoteBackground,
         footnoteBorderTop: `${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`,
+        isScrollable: isScrollable,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentContainer, {
           maxWidth: maxWidth,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnoteHeader, {
             ref: headerRef,
+            viewport: viewport,
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHeader, {
               ref: headingRef,
               footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,

package/lib/Image/Image.js

@@ -113,7 +113,7 @@ Image.propTypes = { ...selectedSystemPropTypes,
   /**
    * The image's height.
    */
-  height: _propTypes.default.number.isRequired,
+  height: _propTypes.default.number,
 
   /**
    * Loading strategy.

package/lib-module/Footnote/Footnote.js

@@ -1,13 +1,14 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styled, { createGlobalStyle } from 'styled-components';
-import { Icon, Portal, selectSystemProps, Typography, useCopy, useTheme, useResponsiveProp, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
+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 } from '../utils';
 import defaultDictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const viewportBreakpoint = 1440;
 const GlobalBodyScrollLock = /*#__PURE__*/createGlobalStyle({
   'html, body': media().until('md').css({
     overflow: 'hidden'
@@ -20,18 +21,20 @@ const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
   let {
     footnoteBackground,
     isVisible,
-    footnoteBorderTop
+    footnoteBorderTop,
+    isScrollable
   } = _ref;
   return {
     position: 'fixed',
-    overflowY: 'scroll',
+    overflowY: isVisible && isScrollable ? 'scroll' : 'hidden',
     top: 0,
-    left: 0,
+    left: window.innerWidth >= viewportBreakpoint ? '50%' : 0,
     height: '100vh',
     width: '100vw',
     backgroundColor: footnoteBackground,
     display: 'block',
     transform: 'translateY(100%)',
+    translate: window.innerWidth >= viewportBreakpoint ? '-50%' : '',
     transition: 'transform 500ms ease-out',
     '@media() (prefers-reduced-motion: reduce)': {
       transition: 'none'
@@ -62,10 +65,10 @@ const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
 const StyledFootnoteHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "Footnote__StyledFootnoteHeader",
   componentId: "components-web__sc-1563bo5-1"
-})({
+})(() => ({
   position: 'relative',
   width: '100%'
-});
+}));
 const StyledHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "Footnote__StyledHeader",
   componentId: "components-web__sc-1563bo5-2"
@@ -90,38 +93,27 @@ const StyledHeader = /*#__PURE__*/styled.div.withConfig({
 const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "Footnote__StyledFootnoteBody",
   componentId: "components-web__sc-1563bo5-3"
-})({
-  overflow: 'auto',
-  transition: 'height 300ms ease-out, opacity 200ms ease-out',
-  transform: 'translateZ(0)',
-  '@media() (prefers-reduced-motion: reduce)': {
-    transition: 'height 1ms ease-out, opacity 1ms ease-out'
-  }
-}, _ref4 => {
+})(_ref4 => {
   let {
     footnoteBodyBackground,
-    footnoteBodyPadding
+    footnoteBodyPadding,
+    headerHeight,
+    bodyHeight,
+    isTextVisible
   } = _ref4;
   return {
+    overflow: 'auto',
+    transition: 'height 300ms ease-out, opacity 200ms ease-out',
+    transform: 'translateZ(0)',
+    '@media() (prefers-reduced-motion: reduce)': {
+      transition: 'height 1ms ease-out, opacity 1ms ease-out'
+    },
     backgroundColor: footnoteBodyBackground,
-    padding: footnoteBodyPadding
-  };
-}, _ref5 => {
-  let {
-    headerHeight
-  } = _ref5;
-  return {
+    padding: footnoteBodyPadding,
     maxHeight: `calc(100vh - ${headerHeight}px)`,
     ...media().from('md').css({
       maxHeight: `calc(50vh - ${headerHeight}px)`
-    })
-  };
-}, _ref6 => {
-  let {
-    bodyHeight,
-    isTextVisible
-  } = _ref6;
-  return {
+    }),
     height: bodyHeight,
     opacity: isTextVisible ? 1 : 0
   };
@@ -129,10 +121,10 @@ const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
 const List = /*#__PURE__*/styled(OrderedListBase).withConfig({
   displayName: "Footnote__List",
   componentId: "components-web__sc-1563bo5-4"
-})(_ref7 => {
+})(_ref5 => {
   let {
     listPaddingLeft
-  } = _ref7;
+  } = _ref5;
   return {
     listStylePosition: 'outside',
     paddingLeft: listPaddingLeft
@@ -141,7 +133,7 @@ const List = /*#__PURE__*/styled(OrderedListBase).withConfig({
 const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
   displayName: "Footnote__ListItem",
   componentId: "components-web__sc-1563bo5-5"
-})(_ref8 => {
+})(_ref6 => {
   let {
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -149,7 +141,7 @@ const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
     listItemFontSize,
     listItemLineHeight,
     listItemPaddingLeft
-  } = _ref8;
+  } = _ref6;
   return {
     display: 'list-item',
     '&::marker': {
@@ -168,14 +160,14 @@ const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
 const CloseButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "Footnote__CloseButton",
   componentId: "components-web__sc-1563bo5-6"
-})(_ref9 => {
+})(_ref7 => {
   let {
     closeButtonBorder,
     closeButtonHeight,
     closeButtonBackgroundColor,
     closeButtonMargin,
     closeButtonWidth
-  } = _ref9;
+  } = _ref7;
   return {
     alignItems: 'center',
     borderRadius: '50%',
@@ -196,11 +188,12 @@ const ContentContainer = /*#__PURE__*/styled.div.withConfig({
   'margin-left': 'auto',
   'margin-right': 'auto',
   left: 0,
-  right: 0
-}, _ref10 => {
+  right: 0,
+  maxWidth: '1200px'
+}, _ref8 => {
   let {
     maxWidth
-  } = _ref10;
+  } = _ref8;
   return {
     width: maxWidth
   };
@@ -208,13 +201,13 @@ const ContentContainer = /*#__PURE__*/styled.div.withConfig({
 const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Footnote__StyledCustomContentContainer",
   componentId: "components-web__sc-1563bo5-8"
-})(_ref11 => {
+})(_ref9 => {
   let {
     listItemColor,
     listItemFontSize,
     listItemLineHeight,
     listItemPaddingLeft
-  } = _ref11;
+  } = _ref9;
   return {
     fontSize: listItemFontSize,
     lineHeight: listItemLineHeight,
@@ -259,6 +252,7 @@ const usePrevious = value => {
 const Footnote = props => {
   var _theme$themeOptions;
 
+  const viewport = useViewport();
   const {
     copy,
     number,
@@ -304,7 +298,9 @@ const Footnote = props => {
     closeButtonWidth,
     closeButtonIconSize,
     closeIcon
-  } = useThemeTokens('Footnote', tokens, variant);
+  } = useThemeTokens('Footnote', tokens, variant, {
+    viewport
+  });
   const footnoteRef = useRef(null);
   const headerRef = useRef(null);
   const bodyRef = useRef(null);
@@ -325,6 +321,7 @@ const Footnote = props => {
   const prevProps = usePrevious(props);
   const theme = useTheme();
   const maxWidth = useResponsiveProp((_theme$themeOptions = theme.themeOptions) === null || _theme$themeOptions === void 0 ? void 0 : _theme$themeOptions.contentMaxWidth);
+  const [isScrollable, setIsScrollable] = useState(false);
   const closeFootnote = useCallback((event, options) => {
     onClose(event, options);
   }, [onClose]); // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
@@ -494,6 +491,22 @@ const Footnote = props => {
       })
     });
   }, [data.content, data.number, listItemColor, listItemFontSize, listItemLineHeight, listItemMarkerFontSize, listItemMarkerLineHeight, listItemPaddingLeft, listPaddingLeft]);
+  const checkIfScrollable = useCallback(() => {
+    const footnoteElement = footnoteRef.current;
+
+    if (footnoteElement) {
+      const footnoteViewportHeight = footnoteElement.clientHeight ? footnoteElement.clientHeight : 0;
+      const contentHeight = contentRef.current ? contentRef.current.offsetHeight : 0;
+      setIsScrollable(contentHeight > footnoteViewportHeight * 0.5);
+    }
+  }, [contentRef, setIsScrollable]);
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        checkIfScrollable();
+      }, 100);
+    }
+  }, [isOpen, checkIfScrollable]);
   return /*#__PURE__*/_jsx(Portal, {
     children: /*#__PURE__*/_jsxs("div", { ...selectProps(rest),
       children: [isOpen && /*#__PURE__*/_jsx(GlobalBodyScrollLock, {}), /*#__PURE__*/_jsx(StyledFootnote, {
@@ -504,10 +517,12 @@ const Footnote = props => {
         tabIndex: 0,
         footnoteBackground: footnoteBackground,
         footnoteBorderTop: `${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`,
+        isScrollable: isScrollable,
         children: /*#__PURE__*/_jsxs(ContentContainer, {
           maxWidth: maxWidth,
           children: [/*#__PURE__*/_jsx(StyledFootnoteHeader, {
             ref: headerRef,
+            viewport: viewport,
             children: /*#__PURE__*/_jsxs(StyledHeader, {
               ref: headingRef,
               footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,

package/lib-module/Image/Image.js

@@ -96,7 +96,7 @@ Image.propTypes = { ...selectedSystemPropTypes,
   /**
    * The image's height.
    */
-  height: PropTypes.number.isRequired,
+  height: PropTypes.number,
 
   /**
    * Loading strategy.

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.63.0",
+    "@telus-uds/components-base": "1.64.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -62,5 +62,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.20.1"
+  "version": "2.21.0"
 }

package/src/Footnote/Footnote.jsx

@@ -10,6 +10,7 @@ import {
   useTheme,
   useResponsiveProp,
   useThemeTokens,
+  useViewport,
   getTokensPropType
 } from '@telus-uds/components-base'
 
@@ -18,22 +19,24 @@ import { htmlAttrs, media, renderStructuredContent } from '../utils'
 import defaultDictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+const viewportBreakpoint = 1440
 
 const GlobalBodyScrollLock = createGlobalStyle({
   'html, body': media().until('md').css({ overflow: 'hidden' })
 })
 
 const StyledFootnote = styled.div(
-  ({ footnoteBackground, isVisible, footnoteBorderTop }) => ({
+  ({ footnoteBackground, isVisible, footnoteBorderTop, isScrollable }) => ({
     position: 'fixed',
-    overflowY: 'scroll',
+    overflowY: isVisible && isScrollable ? 'scroll' : 'hidden',
     top: 0,
-    left: 0,
+    left: window.innerWidth >= viewportBreakpoint ? '50%' : 0,
     height: '100vh',
     width: '100vw',
     backgroundColor: footnoteBackground,
     display: 'block',
     transform: 'translateY(100%)',
+    translate: window.innerWidth >= viewportBreakpoint ? '-50%' : '',
     transition: 'transform 500ms ease-out',
     '@media() (prefers-reduced-motion: reduce)': {
       transition: 'none'
@@ -58,10 +61,10 @@ const StyledFootnote = styled.div(
   }
 )
 
-const StyledFootnoteHeader = styled.div({
+const StyledFootnoteHeader = styled.div(() => ({
   position: 'relative',
   width: '100%'
-})
+}))
 
 const StyledHeader = styled.div(
   ({
@@ -82,27 +85,21 @@ const StyledHeader = styled.div(
 )
 
 const StyledFootnoteBody = styled.div(
-  {
+  ({ footnoteBodyBackground, footnoteBodyPadding, headerHeight, bodyHeight, isTextVisible }) => ({
     overflow: 'auto',
     transition: 'height 300ms ease-out, opacity 200ms ease-out',
     transform: 'translateZ(0)',
     '@media() (prefers-reduced-motion: reduce)': {
       transition: 'height 1ms ease-out, opacity 1ms ease-out'
-    }
-  },
-  ({ footnoteBodyBackground, footnoteBodyPadding }) => ({
+    },
     backgroundColor: footnoteBodyBackground,
-    padding: footnoteBodyPadding
-  }),
-  ({ headerHeight }) => ({
+    padding: footnoteBodyPadding,
     maxHeight: `calc(100vh - ${headerHeight}px)`,
     ...media()
       .from('md')
       .css({
         maxHeight: `calc(50vh - ${headerHeight}px)`
-      })
-  }),
-  ({ bodyHeight, isTextVisible }) => ({
+      }),
     height: bodyHeight,
     opacity: isTextVisible ? 1 : 0
   })
@@ -163,7 +160,8 @@ const ContentContainer = styled.div(
     'margin-left': 'auto',
     'margin-right': 'auto',
     left: 0,
-    right: 0
+    right: 0,
+    maxWidth: '1200px'
   },
   ({ maxWidth }) => ({
     width: maxWidth
@@ -210,6 +208,7 @@ const usePrevious = (value) => {
  * - When `Footnote` is closed, focus must return to the initiating element
  */
 const Footnote = (props) => {
+  const viewport = useViewport()
   const {
     copy,
     number,
@@ -255,7 +254,7 @@ const Footnote = (props) => {
     closeButtonWidth,
     closeButtonIconSize,
     closeIcon
-  } = useThemeTokens('Footnote', tokens, variant)
+  } = useThemeTokens('Footnote', tokens, variant, { viewport })
 
   const footnoteRef = useRef(null)
   const headerRef = useRef(null)
@@ -272,6 +271,7 @@ const Footnote = (props) => {
   const prevProps = usePrevious(props)
   const theme = useTheme()
   const maxWidth = useResponsiveProp(theme.themeOptions?.contentMaxWidth)
+  const [isScrollable, setIsScrollable] = useState(false)
 
   const closeFootnote = useCallback(
     (event, options) => {
@@ -457,6 +457,24 @@ const Footnote = (props) => {
     listPaddingLeft
   ])
 
+  const checkIfScrollable = useCallback(() => {
+    const footnoteElement = footnoteRef.current
+    if (footnoteElement) {
+      const footnoteViewportHeight = footnoteElement.clientHeight ? footnoteElement.clientHeight : 0
+      const contentHeight = contentRef.current ? contentRef.current.offsetHeight : 0
+
+      setIsScrollable(contentHeight > footnoteViewportHeight * 0.5)
+    }
+  }, [contentRef, setIsScrollable])
+
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        checkIfScrollable()
+      }, 100)
+    }
+  }, [isOpen, checkIfScrollable])
+
   return (
     <Portal>
       <div {...selectProps(rest)}>
@@ -469,9 +487,10 @@ const Footnote = (props) => {
           tabIndex={0}
           footnoteBackground={footnoteBackground}
           footnoteBorderTop={`${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`}
+          isScrollable={isScrollable}
         >
           <ContentContainer maxWidth={maxWidth}>
-            <StyledFootnoteHeader ref={headerRef}>
+            <StyledFootnoteHeader ref={headerRef} viewport={viewport}>
               <StyledHeader
                 ref={headingRef}
                 footnoteHeaderPaddingLeft={footnoteHeaderPaddingLeft}

package/src/Image/Image.jsx

@@ -82,7 +82,7 @@ Image.propTypes = {
   /**
    * The image's height.
    */
-  height: PropTypes.number.isRequired,
+  height: PropTypes.number,
   /**
    * Loading strategy.
    * @default 'eager'