Merge branch 'main' into kl-gm-592

packages/gamut-kit/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.6.436](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-14)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
+### [0.6.435](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-14)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
 ### [0.6.434](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-07)
 
 **Note:** Version bump only for package @codecademy/gamut-kit

packages/gamut-kit/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-kit",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "0.6.434",
+  "version": "0.6.436",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
-    "@codecademy/gamut": "56.1.3",
+    "@codecademy/gamut": "56.3.0",
     "@codecademy/gamut-icons": "9.30.0",
     "@codecademy/gamut-illustrations": "0.46.0",
     "@codecademy/gamut-patterns": "0.9.13",

packages/gamut/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [56.3.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-14)
+
+### Features
+
+- **Flyout:** focus container on open ([c690c32](https://github.com/Codecademy/gamut/commit/c690c32c09ea68082ccc3886514ae460cdae48f3))
+
+## [56.2.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-14)
+
+### Features
+
+- **Dialog:** a new optional prop for the close button ([54eaddc](https://github.com/Codecademy/gamut/commit/54eaddc426140d55510ab4a7570be4a2755e6134))
+
 ### [56.1.3](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-07)
 
 **Note:** Version bump only for package @codecademy/gamut

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -42,6 +42,7 @@ exports[`Gamut Exported Keys 1`] = `
   "FloatingCard",
   "Flyout",
   "FocusTrap",
+  "focusVisibleStyle",
   "Form",
   "FormError",
   "FormGroup",

packages/gamut/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "56.1.3",
+  "version": "56.3.0",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.30.0",

packages/gamut/src/Drawer/index.tsx

@@ -1,11 +1,14 @@
-import { breakpoints, timingValues } from '@codecademy/gamut-styles';
+import { breakpoints, css, timingValues } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
 import { AnimatePresence, motion } from 'framer-motion';
-import * as React from 'react';
+import { useEffect, useRef } from 'react';
 import { useMedia } from 'react-use';
 
 import { Box, BoxProps } from '../Box';
+import { focusVisibleStyle } from '../utils';
 
-const DrawerBase = motion(Box);
+const drawerVisibleStyle = focusVisibleStyle('-3px');
+const DrawerBase = styled(motion(Box))(css(drawerVisibleStyle));
 
 export interface DrawerProps extends Omit<BoxProps, 'width'> {
   /**
@@ -25,9 +28,14 @@ export const Drawer: React.FC<DrawerProps> = ({
   alignContentContainer = 'right',
   ...props
 }) => {
+  const drawerRef = useRef<HTMLDivElement>(null);
   const isDesktop = useMedia(`(min-width: ${breakpoints.sm})`);
   const fullWidth = isDesktop ? `30rem` : '75vw';
 
+  useEffect(() => {
+    if (expanded) drawerRef?.current?.focus();
+  }, [expanded]);
+
   return (
     <AnimatePresence>
       {expanded ? (
@@ -39,6 +47,8 @@ export const Drawer: React.FC<DrawerProps> = ({
           initial={{ width: 0 }}
           overflow="clip"
           position="relative"
+          ref={drawerRef}
+          tabIndex={-1}
           transition={{ duration: timingValues.slow / 1000 }}
           {...props}
         >
@@ -51,6 +61,7 @@ export const Drawer: React.FC<DrawerProps> = ({
             minWidth={fullWidth}
             overflowY="auto"
             overflowX="hidden"
+            p={4}
           >
             {children}
           </Box>

packages/gamut/src/Modals/Dialog.tsx

@@ -25,6 +25,7 @@ export interface DialogProps extends ModalBaseProps {
   >;
   confirmCta: DialogButtonProps;
   cancelCta?: DialogButtonProps;
+  closeButtonTipText?: string;
 }
 
 export const Dialog: React.FC<DialogProps> = ({
@@ -36,6 +37,7 @@ export const Dialog: React.FC<DialogProps> = ({
   onRequestClose,
   image,
   size = 'small',
+  closeButtonTipText = 'Close dialog',
   ...rest
 }) => {
   const onConfirm: DialogButtonProps['onClick'] = (
@@ -69,12 +71,11 @@ export const Dialog: React.FC<DialogProps> = ({
         </Text>
         <Box gridArea="close">
           <IconButton
-            aria-label="Close Dialog"
             size="small"
             alignSelf="start"
             icon={MiniDeleteIcon}
             onClick={onCancel}
-            tip="Close dialog"
+            tip={closeButtonTipText}
           />
         </Box>
         <Box as="div" gridArea="content" data-testid="dialog-content">

packages/gamut/src/Modals/__tests__/Dialog.test.tsx

@@ -20,6 +20,7 @@ const defaultProps = {
     children: 'Cancel',
     onClick: onCancel,
   },
+  closeButtonTipText: 'Close Dialog',
 };
 
 const renderView = setupRtl(Dialog, defaultProps);
@@ -43,8 +44,9 @@ describe('Dialog', () => {
 
   it('requests closing the dialog when the close button is clicked', () => {
     const { view } = renderView();
+    const ariaLabel = defaultProps.closeButtonTipText.split(' ')[0];
 
-    fireEvent.click(view.getByLabelText('Close Dialog'));
+    fireEvent.click(view.getByLabelText(ariaLabel));
     expect(onRequestClose.mock.calls.length).toBe(1);
   });
 

packages/gamut/src/Modals/elements.tsx

@@ -1,8 +1,11 @@
-import { theme, variant } from '@codecademy/gamut-styles';
+import { variant } from '@codecademy/gamut-styles';
 import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 
 import { FloatingCard } from '../FloatingCard/FloatingCard';
+import { focusVisibleStyle } from '../utils';
+
+const modalFocusVisibleStyle = focusVisibleStyle();
 
 const sizeVariant = variant({
   prop: 'size',
@@ -27,12 +30,7 @@ const layoutVariant = variant({
     display: 'grid',
     gridTemplateColumns: '1fr min-content 2rem',
     gridTemplateRows: 'max-content 1fr max-content',
-    p: 24,
-    rowGap: 12,
-    '&:focus-visible': {
-      outlineOffset: '4px',
-      outline: `2px solid ${theme.colors.primary} !important`,
-    },
+    ...modalFocusVisibleStyle,
   },
   variants: {
     standard: {

packages/gamut/src/utils/focusVisibleStyle.ts

@@ -0,0 +1,12 @@
+import { theme } from '@codecademy/gamut-styles';
+
+export const focusVisibleStyle = (outlineOffset = '4px') => ({
+  '&:focus-visible': {
+    outlineOffset,
+    /*
+    We use !important here to ensure this overrides other browser default focus styles.
+     Gamut's reset css does a good job wiping most of these out but this accounts for some edge cases.
+    */
+    outline: `2px solid ${theme.colors.primary} !important`,
+  },
+});

packages/gamut/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './createPromise';
+export * from './focusVisibleStyle';
 export * from './generateResponsiveClassnames';
 export * from './omitProps';
 export * from './useIsMounted';

packages/styleguide/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [67.2.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-14)
+
+### Features
+
+- **Flyout:** focus container on open ([c690c32](https://github.com/Codecademy/gamut/commit/c690c32c09ea68082ccc3886514ae460cdae48f3))
+
+### [67.1.6](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-14)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
+### [67.1.5](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-13)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
 ### [67.1.4](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-07)
 
 **Note:** Version bump only for package @codecademy/styleguide

packages/styleguide/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "67.1.4",
+  "version": "67.2.0",
   "author": "Codecademy Engineering",
   "dependencies": {
-    "@codecademy/gamut": "56.1.3",
+    "@codecademy/gamut": "56.3.0",
     "@codecademy/gamut-icons": "9.30.0",
     "@codecademy/gamut-illustrations": "0.46.0",
     "@codecademy/gamut-patterns": "0.9.13",

packages/styleguide/stories/Atoms/Animation.stories.mdx

@@ -34,12 +34,12 @@ import { RotationExample } from './Animation.examples.tsx';
   include={['rotated', 'degrees', 'height', 'width']}
 />
 
-## Rotation Example
+## Rotation example
 
 Animations should not be the click target of actions, but rather the container for the content you wish to animate.
 
 <Canvas>
-  <Story name="Rotation Example">
+  <Story name="Rotation example">
     {(args) => <RotationExample {...args} />}
   </Story>
 </Canvas>

packages/styleguide/stories/Atoms/Badge/Badge.stories.mdx

@@ -23,13 +23,13 @@ import { TertiaryFillExample } from './examples';
   }}
 />
 
-Badges are generally found next to interface elements that need to be called out. They are small Atoms that can either be used inline, or inside larger Molecules and Organisms.
+Badges are generally found next to interface elements that need to be called out. They are small atoms that can either be used inline, or inside larger molecules and organisms.
 
 ## Usage
 
 - Use Badges to display read-only information like statuses, attributes, and other emphasized information.
-- Use the `variant` and `size` properties to ensure your badges have the right visibility and visual hierarchy on your page.
-- Use an <LinkTo kind='Atoms/Icons'>Icon</LinkTo> to draw attention to the badge using the `icon` prop.
+- Use the `variant` and `size` properties to ensure your Badges have the right visibility and visual hierarchy on your page.
+- Use an <LinkTo kind='Atoms/Icons'>Icon</LinkTo> to draw attention to the Badge using the `icon` prop.
 - **Limit Badge text to 1–2 words if possible.** These elements are most effective when displaying short pieces of text.
 - **Do not use Badges for elements that are meant to be clickable or interactive**. Badges are fully rounded to distinguish themselves from elements such as <LinkTo kind='Atoms/Button'>Buttons</LinkTo>.
 
@@ -39,12 +39,12 @@ export const BadgeTemplate = (args) => (
 
 ## Variants
 
-We support the following variants of Badges: `primary`, `secondary`, `tertiary`, `tertiaryFill`, and `accent`.
+We support the following Badge variants: `primary`, `secondary`, `tertiary`, `tertiaryFill`, and `accent`.
 
-- **Greyscale Badges** provide different levels of priority for the `primary`, `secondary`, `tertiary`, and `tertiaryFill` variants.
+- **Greyscale** provides different levels of priority for the `primary`, `secondary`, `tertiary`, and `tertiaryFill` variants.
 - **Accent colors** like `accent` are meant to be used sparingly so they can stand out against other elements.
 
-Additional variants should designed with both <LinkTo kind='Foundations/ColorMode'>ColorModes</LinkTo> in mind. For example, the `accent` and `secondary` variants work against both light and dark backgrounds, while the `primary` and `tertiary`, and `tertiaryFill` variants both adapt to their ColorMode (which you can check out by using the toolbar at the top of this page!)
+Additional variants should be designed with both <LinkTo kind='Foundations/ColorMode'>ColorModes</LinkTo> in mind. For example, the `accent` and `secondary` variants work against both light and dark backgrounds, while the `primary` and `tertiary`, and `tertiaryFill` variants both adapt to their ColorMode (which you can check out by using the toolbar at the top of this page!)
 
 <Canvas>
   <Story name="primary" args={{ children: 'primary' }}>
@@ -90,7 +90,7 @@ We have two `size` options, which should be used according to their context:
   </Story>
 </Canvas>
 
-## Leading Icon
+## Leading icon
 
 Include the `icon` property when the icon reinforces the badge’s message and improves scannability. Since badges are inherently small, it's recommended to use Gamut's mini icons.
 
@@ -118,7 +118,7 @@ Include the `icon` property when the icon reinforces the badge’s message and i
   </Story>
 </Canvas>
 
-## Code Playground
+## Code playground
 
 <Canvas>
   <Story name="Badge">{(args) => <Badge {...args}>badge</Badge>}</Story>