@automattic/vip-design-system 2.4.2 → 2.4.4

package/build/system/Button/Button.js

@@ -52,6 +52,9 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
         cursor: 'not-allowed',
         pointerEvents: 'none'
       },
+      '&:hover, &:focus': {
+        textDecoration: 'none'
+      },
       flexGrow: Boolean(grow) === true ? '1' : undefined,
       width: Boolean(full) === true ? '100%' : undefined
     }, sx)

package/build/system/Dropdown/DropdownItem.d.ts

@@ -15,6 +15,7 @@ export const styles: {
     py: number;
     '&:hover, &:focus': {
         backgroundColor: string;
+        textDecoration: string;
     };
     '&[data-disabled]': {
         color: string;

package/build/system/Dropdown/DropdownItem.js

@@ -25,6 +25,7 @@ export const styles = {
 	py: 1,
 	'&:hover, &:focus': {
 		backgroundColor: 'hover',
+		textDecoration: 'none',
 	},
 
 	'&[data-disabled]': {
@@ -34,7 +35,7 @@ export const styles = {
 
 	'&[data-highlighted]': {
 		backgroundColor: 'hover',
-		color: 'primary',
+		color: 'link',
 	},
 };
 

package/build/system/LinkExternal/LinkExternal.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    children?: React.ReactNode;
+    screenReaderText?: string | number;
+    href: string;
+    showExternalIcon?: boolean;
+    defaultScreenReaderText?: boolean;
+    newTab?: boolean;
+};
+export declare const LinkExternal: React.FC<Props>;
+export default LinkExternal;

package/build/system/LinkExternal/LinkExternal.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.LinkExternal = void 0;
+var _i18nCalypso = require("i18n-calypso");
+var _Link = require("../Link");
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["children", "screenReaderText", "href", "showExternalIcon", "newTab"];
+/**
+ * External dependencies
+ */
+/**
+ * Internal dependencies
+ */
+// Screen reader announcements
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var DEFAULT_EXTERNAL_LINK_TEXT = (0, _i18nCalypso.translate)(', external link'); // reads as: link, <link text>, external link
+var NEW_TAB_TEXT = (0, _i18nCalypso.translate)(', opens in a new tab'); // reads as: link, <link text>, external link, opens in a new tab
+
+var LinkExternal = exports.LinkExternal = function LinkExternal(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$screenReaderText = _ref.screenReaderText,
+    screenReaderText = _ref$screenReaderText === void 0 ? '' : _ref$screenReaderText,
+    href = _ref.href,
+    _ref$showExternalIcon = _ref.showExternalIcon,
+    showExternalIcon = _ref$showExternalIcon === void 0 ? true : _ref$showExternalIcon,
+    _ref$newTab = _ref.newTab,
+    newTab = _ref$newTab === void 0 ? false : _ref$newTab,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsxs)(_Link.Link, _extends({
+    as: "a",
+    target: newTab ? '_blank' : '_self',
+    rel: newTab ? 'noopener noreferrer' : '',
+    href: href
+  }, rest, {
+    children: [children, (0, _jsxRuntime.jsxs)(_ScreenReaderText["default"], {
+      children: [screenReaderText, DEFAULT_EXTERNAL_LINK_TEXT, newTab ? NEW_TAB_TEXT : '']
+    }), showExternalIcon && (0, _jsxRuntime.jsx)("span", {
+      "aria-hidden": "true",
+      children: "\xA0\u2197"
+    })]
+  }));
+};
+var _default = exports["default"] = LinkExternal;

package/build/system/LinkExternal/LinkExternal.stories.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import LinkExternal from './LinkExternal';
+import type { StoryObj } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: import("react").FC<{
+        children?: import("react").ReactNode;
+        screenReaderText?: string | number | undefined;
+        href: string;
+        showExternalIcon?: boolean | undefined;
+        defaultScreenReaderText?: boolean | undefined;
+        newTab?: boolean | undefined;
+    }>;
+};
+export default _default;
+type Story = StoryObj<typeof LinkExternal>;
+export declare const Default: Story;

package/build/system/LinkExternal/LinkExternal.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+var _LinkExternal = _interopRequireDefault(require("./LinkExternal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _default = exports["default"] = {
+  title: 'Navigation/LinkExternal',
+  component: _LinkExternal["default"]
+};
+var Default = exports.Default = {
+  args: {
+    children: 'View on GitHub',
+    href: 'https://github.com/Automattic/vip-design-system'
+  }
+};

package/build/system/LinkExternal/LinkExternal.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/system/LinkExternal/LinkExternal.test.js

@@ -0,0 +1,49 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _LinkExternal = _interopRequireDefault(require("./LinkExternal"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /**
+ * Internal dependencies
+ */
+var props = {
+  children: 'View on Github',
+  href: 'https://github.com/Automattic/vip-design-system'
+};
+describe('<LinkExternal />', function () {
+  it('should render correctly', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_LinkExternal["default"], _extends({}, props, {
+      children: "View on Github"
+    })));
+    var link = _react.screen.getByRole('link');
+    expect(link).toHaveTextContent(/view on github/i);
+    expect(link).toHaveTextContent(/external link/i);
+    expect(link).toHaveAttribute('target', '_self');
+    expect(link).toHaveAttribute('rel', '');
+  });
+  it('should open in new tab when newTab is true', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_LinkExternal["default"], _extends({}, props, {
+      newTab: true
+    })));
+    var link = _react.screen.getByRole('link');
+    expect(link).toHaveTextContent(/opens in a new tab/i);
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+  it('should contain additional screenreader text when added', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_LinkExternal["default"], _extends({}, props, {
+      screenReaderText: "VIP Design System"
+    })));
+    expect(_react.screen.getByRole('link', {
+      name: /vip design system/i
+    })).toBeInTheDocument();
+  });
+  it('should hide icon when showExternalIcon is false', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_LinkExternal["default"], _extends({}, props, {
+      showExternalIcon: false
+    })));
+    expect(_react.screen.queryByText('↗')).not.toBeInTheDocument();
+  });
+});

package/build/system/MobileMenu/MobileMenu.js

@@ -44,16 +44,17 @@ var MobileMenu = exports.MobileMenu = /*#__PURE__*/(0, _react.forwardRef)(functi
         children: (0, _jsxRuntime.jsx)(_Logo.Logo, {})
       }), (0, _jsxRuntime.jsx)("div", {
         sx: {
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          height: 'calc(100vh - 64px)',
+          height: '100vh',
           display: 'flex',
           flex: 1
         },
         children: (0, _jsxRuntime.jsxs)(_index.Flex, {
           sx: {
             width: '100%',
-            flexDirection: 'column'
+            flexDirection: 'column',
+            height: 'calc(100vh - 64px)',
+            overflowX: 'hidden',
+            overflowY: 'auto'
           },
           children: [toolbarItems && (0, _jsxRuntime.jsx)(_index.Nav.PrimaryInverse, {
             label: "Main Links",
@@ -63,7 +64,7 @@ var MobileMenu = exports.MobileMenu = /*#__PURE__*/(0, _react.forwardRef)(functi
             sx: {
               alignSelf: 'stretch',
               backgroundColor: 'layer.1',
-              minHeight: "calc(100vh - 64px)",
+              height: '100%',
               gap: 4,
               width: '100%',
               a: {

package/build/system/index.d.ts

@@ -38,6 +38,7 @@ import { TableRow } from './Table';
 import { TableCell } from './Table';
 import { Tooltip } from './Tooltip';
 import { Link } from './Link';
+import LinkExternal from './LinkExternal/LinkExternal';
 import { Radio } from './Form';
 import { RadioBoxGroup } from './Form';
 import { Textarea } from './Form';
@@ -56,4 +57,4 @@ import { Validation } from './Form';
 import { Wizard } from './Wizard';
 import { WizardStep } from './Wizard';
 import theme from './theme';
-export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, NewConfirmationDialog, Grid, Flex, Notice, OptionRow, Heading, Input, Label, Spinner, Table, TableRow, TableCell, Tooltip, Link, Radio, RadioBoxGroup, Textarea, Progress, Text, Tabs, Nav, NavItem, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Validation, Wizard, WizardStep, theme };
+export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, NewConfirmationDialog, Grid, Flex, Notice, OptionRow, Heading, Input, Label, Spinner, Table, TableRow, TableCell, Tooltip, Link, LinkExternal, Radio, RadioBoxGroup, Textarea, Progress, Text, Tabs, Nav, NavItem, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Validation, Wizard, WizardStep, theme };

package/build/system/index.js

@@ -36,6 +36,7 @@ import {
 import { Grid } from './Grid';
 import { Heading } from './Heading';
 import { Link } from './Link';
+import LinkExternal from './LinkExternal/LinkExternal';
 import { MobileMenuWrapper, MobileMenuTrigger, MobileMenu } from './MobileMenu/MobileMenu';
 import { Nav } from './Nav/Nav';
 import { NavItem } from './Nav/NavItem';
@@ -95,6 +96,7 @@ export {
 	TableCell,
 	Tooltip,
 	Link,
+	LinkExternal,
 	Radio,
 	RadioBoxGroup,
 	Textarea,

package/build/system/theme/index.d.ts

@@ -72,9 +72,10 @@ declare namespace _default {
             fontWeight: string;
             boxShadow: string;
             borderRadius: number;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
+                textDecoration: string;
             };
             verticalAlign: string;
             alignItems: string;
@@ -86,16 +87,13 @@ declare namespace _default {
                     fill: string;
                 };
             };
-            '&:hover': {
-                textDecoration: string;
-            };
         };
         export { primary_1 as primary };
         let secondary_1: {
             variant: string;
             color: string;
             bg: string;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
             };
@@ -107,7 +105,7 @@ declare namespace _default {
             bg: string;
             border: string;
             borderColor: string;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
                 border: string;
@@ -120,7 +118,7 @@ declare namespace _default {
             bg: string;
             border: string;
             borderColor: string;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
                 border: string;
@@ -133,7 +131,7 @@ declare namespace _default {
             bg: string;
             border: string;
             borderColor: string;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
                 border: string;
@@ -146,7 +144,7 @@ declare namespace _default {
             bg: string;
             border: string;
             borderColor: string;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
                 border: string;
@@ -174,7 +172,7 @@ declare namespace _default {
             variant: string;
             color: string;
             padding: number;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
             };
         };
@@ -187,17 +185,14 @@ declare namespace _default {
             };
             '&:hover': {
                 color: string;
+                textDecorationLine: string;
+                textDecorationThickness: string;
             };
             '&:active': {
                 color: string;
             };
             textDecorationThickness: string;
             textUnderlineOffset: string;
-            '&:hover, &:focus': {
-                color: string;
-                textDecorationLine: string;
-                textDecorationThickness: string;
-            };
         };
         'button-primary': {
             variant: string;
@@ -313,37 +308,32 @@ declare namespace _default {
         };
     };
     export namespace styles {
-        namespace root {
-            export let fontFamily: string;
-            export let lineHeight: string;
-            export let fontWeight: string;
-            let color_1: string;
-            export { color_1 as color };
-            let backgroundColor_5: string;
-            export { backgroundColor_5 as backgroundColor };
-            export let fontSmoothing: string;
-            export let a: {
+        let root: {
+            fontFamily: string;
+            lineHeight: string;
+            fontWeight: string;
+            color: string;
+            backgroundColor: string;
+            '-webkit-font-smoothing': string;
+            '-moz-osx-font-smoothing': string;
+            a: {
                 '&:hover': {
                     textDecorationLine: string;
                     textDecorationThickness: string;
                     textUnderlineOffset: string;
                 };
             };
-            export namespace svg {
-                export let fill: string;
-                let display_1: string;
-                export { display_1 as display };
-            }
-            export namespace pre {
-                let fontFamily_1: string;
-                export { fontFamily_1 as fontFamily };
-            }
-            export namespace p_2 {
-                let color_2: string;
-                export { color_2 as color };
-            }
-            export { p_2 as p };
-        }
+            svg: {
+                fill: string;
+                display: string;
+            };
+            pre: {
+                fontFamily: string;
+            };
+            p: {
+                color: string;
+            };
+        };
     }
 }
 export default _default;

package/build/system/theme/index.js

@@ -283,9 +283,10 @@ export default {
 			fontWeight: 'medium',
 			boxShadow: 'none',
 			borderRadius: 1,
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.primary.background.hover',
 				color: 'button.primary.label.hover',
+				textDecoration: 'none',
 			},
 			verticalAlign: 'middle',
 			alignItems: 'center',
@@ -297,9 +298,6 @@ export default {
 					fill: 'inherit',
 				},
 			},
-			'&:hover': {
-				textDecoration: 'none',
-			},
 		},
 
 		secondary: {
@@ -307,7 +305,7 @@ export default {
 			color: 'button.secondary.label.default',
 			bg: 'button.secondary.background.default',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.secondary.background.hover',
 				color: 'button.secondary.label.hover',
 			},
@@ -320,7 +318,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'button.tertiary.border.default',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.tertiary.background.hover',
 				color: 'button.tertiary.label.hover',
 				border: '1px solid',
@@ -335,7 +333,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.display.background.hover',
 				color: 'button.display.label.hover',
 				border: '1px solid',
@@ -350,7 +348,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.ghost.background.hover',
 				color: 'button.ghost.label.hover',
 				border: '1px solid',
@@ -365,7 +363,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.danger.primary.background.hover',
 				color: 'button.danger.primary.label.hover',
 				border: '1px solid',
@@ -396,7 +394,7 @@ export default {
 			color: 'text',
 			padding: 1,
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'borders.2',
 			},
 		},
@@ -409,7 +407,9 @@ export default {
 				color: 'links.visited',
 			},
 			'&:hover': {
-				color: 'hover',
+				color: 'links.hover',
+				textDecorationLine: 'underline',
+				textDecorationThickness: '0.125rem',
 			},
 			'&:active': {
 				color: 'links.active',
@@ -417,12 +417,6 @@ export default {
 
 			textDecorationThickness: '0.125rem',
 			textUnderlineOffset: '0.250rem',
-
-			'&:hover, &:focus': {
-				color: 'links.hover',
-				textDecorationLine: 'underline',
-				textDecorationThickness: '0.125rem',
-			},
 		},
 		'button-primary': {
 			variant: 'buttons.primary',
@@ -532,7 +526,8 @@ export default {
 			fontWeight: 'body',
 			color: 'text',
 			backgroundColor: 'backgrounds.primary',
-			fontSmoothing: 'antialiased',
+			'-webkit-font-smoothing': 'antialiased',
+			'-moz-osx-font-smoothing': 'grayscale',
 			a: {
 				'&:hover': {
 					textDecorationLine: 'underline',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",
@@ -43,6 +43,7 @@
     "accessible-autocomplete": "^2.0.4",
     "classnames": "^2.3.1",
     "framer-motion": "^3.9.1",
+    "i18n-calypso": "^7.0.0",
     "react-icons": "^4.7.0"
   },
   "peerDependencies": {

package/src/system/Button/Button.tsx

@@ -54,6 +54,9 @@ const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 						cursor: 'not-allowed',
 						pointerEvents: 'none',
 					},
+					'&:hover, &:focus': {
+						textDecoration: 'none',
+					},
 					flexGrow: Boolean( grow ) === true ? '1' : undefined,
 					width: Boolean( full ) === true ? '100%' : undefined,
 					...sx,

package/src/system/Dropdown/DropdownItem.js

@@ -25,6 +25,7 @@ export const styles = {
 	py: 1,
 	'&:hover, &:focus': {
 		backgroundColor: 'hover',
+		textDecoration: 'none',
 	},
 
 	'&[data-disabled]': {
@@ -34,7 +35,7 @@ export const styles = {
 
 	'&[data-highlighted]': {
 		backgroundColor: 'hover',
-		color: 'primary',
+		color: 'link',
 	},
 };
 

package/src/system/LinkExternal/LinkExternal.stories.tsx

@@ -0,0 +1,17 @@
+import LinkExternal from './LinkExternal';
+
+import type { StoryObj } from '@storybook/react';
+
+export default {
+	title: 'Navigation/LinkExternal',
+	component: LinkExternal,
+};
+
+type Story = StoryObj< typeof LinkExternal >;
+
+export const Default: Story = {
+	args: {
+		children: 'View on GitHub',
+		href: 'https://github.com/Automattic/vip-design-system',
+	},
+};

package/src/system/LinkExternal/LinkExternal.test.tsx

@@ -0,0 +1,47 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import LinkExternal from './LinkExternal';
+
+const props = {
+	children: 'View on Github',
+	href: 'https://github.com/Automattic/vip-design-system',
+};
+
+describe( '<LinkExternal />', () => {
+	it( 'should render correctly', () => {
+		render( <LinkExternal { ...props }>View on Github</LinkExternal> );
+
+		const link = screen.getByRole( 'link' );
+
+		expect( link ).toHaveTextContent( /view on github/i );
+		expect( link ).toHaveTextContent( /external link/i );
+		expect( link ).toHaveAttribute( 'target', '_self' );
+		expect( link ).toHaveAttribute( 'rel', '' );
+	} );
+
+	it( 'should open in new tab when newTab is true', () => {
+		render( <LinkExternal { ...props } newTab /> );
+
+		const link = screen.getByRole( 'link' );
+
+		expect( link ).toHaveTextContent( /opens in a new tab/i );
+		expect( link ).toHaveAttribute( 'target', '_blank' );
+		expect( link ).toHaveAttribute( 'rel', 'noopener noreferrer' );
+	} );
+
+	it( 'should contain additional screenreader text when added', () => {
+		render( <LinkExternal { ...props } screenReaderText="VIP Design System" /> );
+
+		expect( screen.getByRole( 'link', { name: /vip design system/i } ) ).toBeInTheDocument();
+	} );
+
+	it( 'should hide icon when showExternalIcon is false', () => {
+		render( <LinkExternal { ...props } showExternalIcon={ false } /> );
+
+		expect( screen.queryByText( '↗' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/system/LinkExternal/LinkExternal.tsx

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { translate } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import { Link } from '../Link';
+import ScreenReaderText from '../ScreenReaderText';
+
+// Screen reader announcements
+const DEFAULT_EXTERNAL_LINK_TEXT = translate( ', external link' ); // reads as: link, <link text>, external link
+const NEW_TAB_TEXT = translate( ', opens in a new tab' ); // reads as: link, <link text>, external link, opens in a new tab
+
+type Props = {
+	children?: React.ReactNode;
+	screenReaderText?: string | number;
+	href: string;
+	showExternalIcon?: boolean;
+	defaultScreenReaderText?: boolean;
+	newTab?: boolean;
+};
+
+export const LinkExternal: React.FC< Props > = ( {
+	children = null,
+	screenReaderText = '',
+	href,
+	showExternalIcon = true,
+	newTab = false,
+	...rest
+} ) => (
+	<Link
+		as="a"
+		target={ newTab ? '_blank' : '_self' }
+		rel={ newTab ? 'noopener noreferrer' : '' }
+		href={ href }
+		{ ...rest }
+	>
+		{ children }
+		<ScreenReaderText>
+			{ screenReaderText }
+			{ DEFAULT_EXTERNAL_LINK_TEXT }
+			{ newTab ? NEW_TAB_TEXT : '' }
+		</ScreenReaderText>
+		{ showExternalIcon && <span aria-hidden="true">&nbsp;↗</span> }
+	</Link>
+);
+
+export default LinkExternal;

package/src/system/MobileMenu/MobileMenu.tsx

@@ -44,14 +44,20 @@ export const MobileMenu = forwardRef< HTMLDivElement, MobileMenuProps >(
 
 				<div
 					sx={ {
-						overflowX: 'hidden',
-						overflowY: 'auto',
-						height: 'calc(100vh - 64px)',
+						height: '100vh',
 						display: 'flex',
 						flex: 1,
 					} }
 				>
-					<Flex sx={ { width: '100%', flexDirection: 'column' } }>
+					<Flex
+						sx={ {
+							width: '100%',
+							flexDirection: 'column',
+							height: 'calc(100vh - 64px)',
+							overflowX: 'hidden',
+							overflowY: 'auto',
+						} }
+					>
 						{ toolbarItems && (
 							<Nav.PrimaryInverse label="Main Links" orientation="vertical">
 								{ toolbarItems }
@@ -62,7 +68,7 @@ export const MobileMenu = forwardRef< HTMLDivElement, MobileMenuProps >(
 							sx={ {
 								alignSelf: 'stretch',
 								backgroundColor: 'layer.1',
-								minHeight: `calc(100vh - 64px)`,
+								height: '100%',
 								gap: 4,
 								width: '100%',
 								a: {

package/src/system/index.js

@@ -36,6 +36,7 @@ import {
 import { Grid } from './Grid';
 import { Heading } from './Heading';
 import { Link } from './Link';
+import LinkExternal from './LinkExternal/LinkExternal';
 import { MobileMenuWrapper, MobileMenuTrigger, MobileMenu } from './MobileMenu/MobileMenu';
 import { Nav } from './Nav/Nav';
 import { NavItem } from './Nav/NavItem';
@@ -95,6 +96,7 @@ export {
 	TableCell,
 	Tooltip,
 	Link,
+	LinkExternal,
 	Radio,
 	RadioBoxGroup,
 	Textarea,

package/src/system/theme/index.js

@@ -283,9 +283,10 @@ export default {
 			fontWeight: 'medium',
 			boxShadow: 'none',
 			borderRadius: 1,
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.primary.background.hover',
 				color: 'button.primary.label.hover',
+				textDecoration: 'none',
 			},
 			verticalAlign: 'middle',
 			alignItems: 'center',
@@ -297,9 +298,6 @@ export default {
 					fill: 'inherit',
 				},
 			},
-			'&:hover': {
-				textDecoration: 'none',
-			},
 		},
 
 		secondary: {
@@ -307,7 +305,7 @@ export default {
 			color: 'button.secondary.label.default',
 			bg: 'button.secondary.background.default',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.secondary.background.hover',
 				color: 'button.secondary.label.hover',
 			},
@@ -320,7 +318,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'button.tertiary.border.default',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.tertiary.background.hover',
 				color: 'button.tertiary.label.hover',
 				border: '1px solid',
@@ -335,7 +333,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.display.background.hover',
 				color: 'button.display.label.hover',
 				border: '1px solid',
@@ -350,7 +348,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.ghost.background.hover',
 				color: 'button.ghost.label.hover',
 				border: '1px solid',
@@ -365,7 +363,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.danger.primary.background.hover',
 				color: 'button.danger.primary.label.hover',
 				border: '1px solid',
@@ -396,7 +394,7 @@ export default {
 			color: 'text',
 			padding: 1,
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'borders.2',
 			},
 		},
@@ -409,7 +407,9 @@ export default {
 				color: 'links.visited',
 			},
 			'&:hover': {
-				color: 'hover',
+				color: 'links.hover',
+				textDecorationLine: 'underline',
+				textDecorationThickness: '0.125rem',
 			},
 			'&:active': {
 				color: 'links.active',
@@ -417,12 +417,6 @@ export default {
 
 			textDecorationThickness: '0.125rem',
 			textUnderlineOffset: '0.250rem',
-
-			'&:hover, &:focus': {
-				color: 'links.hover',
-				textDecorationLine: 'underline',
-				textDecorationThickness: '0.125rem',
-			},
 		},
 		'button-primary': {
 			variant: 'buttons.primary',
@@ -532,7 +526,8 @@ export default {
 			fontWeight: 'body',
 			color: 'text',
 			backgroundColor: 'backgrounds.primary',
-			fontSmoothing: 'antialiased',
+			'-webkit-font-smoothing': 'antialiased',
+			'-moz-osx-font-smoothing': 'grayscale',
 			a: {
 				'&:hover': {
 					textDecorationLine: 'underline',