fix(Alert): Update alert to be based on component width

packages/gamut/src/Alert/Alert.tsx

@@ -4,7 +4,7 @@ import { useId } from '@reach/auto-id';
 import { isValidElement, useMemo, useState } from 'react';
 import * as React from 'react';
 import TruncateMarkup from 'react-truncate-markup';
-import { useMedia } from 'react-use';
+import { useMeasure } from 'react-use';
 
 import { Rotation, ToolTip, WithChildrenProp } from '..';
 import { Box } from '../Box';
@@ -57,7 +57,12 @@ export const Alert: React.FC<AlertProps> = ({
   placement = 'floating',
   ...props
 }) => {
-  const isDesktop = useMedia(`(min-width: ${breakpoints.xs})`);
+  const [ref, { width }] = useMeasure<HTMLDivElement>();
+  const isDesktop = useMemo(() => {
+    if (width === 0) return true; // default to desktop if we don't have a width
+    return width > parseInt(breakpoints.xs, 10);
+  }, [width]);
+
   const activeAlert = alertVariants?.[type] ?? alertVariants.general;
   const { icon: Icon, bg } = activeAlert;
 
@@ -84,7 +89,7 @@ export const Alert: React.FC<AlertProps> = ({
   }, [placement, isDesktop]);
 
   const gridButtonOrder = useMemo(() => {
-    return isDesktop ? undefined : (['2', , 'auto'] as const);
+    return isDesktop ? 'auto' : '2';
   }, [isDesktop]);
 
   const gridTemplateColumns = useMemo(() => {
@@ -180,6 +185,7 @@ export const Alert: React.FC<AlertProps> = ({
       placement={placement}
       gridTemplateColumns={gridTemplateColumns}
       pr={alertRightPadding}
+      ref={ref}
       {...props}
     >
       <Icon size={32} aria-hidden p={8} />

packages/gamut/src/Alert/__tests__/Alert.test.tsx

@@ -6,13 +6,13 @@ import { Alert } from '../Alert';
 const children = 'Hello';
 const onClose = jest.fn();
 const onClick = jest.fn();
-const mockUseMedia = jest.fn();
 
-// not testing for mobile as default
+const mockUseMeasure = jest.fn(() => [jest.fn(), { width: 1600 }]);
+
 jest.mock('react-use', () => ({
   ...jest.requireActual<{}>('react-use'),
-  get useMedia() {
-    return mockUseMedia;
+  get useMeasure() {
+    return mockUseMeasure;
   },
 }));
 
@@ -24,7 +24,6 @@ const renderView = setupRtl(Alert, {
 
 describe('Alert', () => {
   it('calls the onClose callback when the close button is clicked', () => {
-    mockUseMedia.mockReturnValue(true);
     const { view } = renderView({});
 
     const buttons = view.getAllByRole('button');
@@ -35,7 +34,7 @@ describe('Alert', () => {
     expect(onClose).toHaveBeenCalled();
   });
 
-  it('renders a clickable  button', () => {
+  it('renders a clickable button', () => {
     const { view } = renderView({ cta: { onClick, children: 'Click Me!' } });
 
     const cta = view.getByRole('button', { name: 'Click Me!' });
@@ -71,7 +70,8 @@ describe('Alert', () => {
   });
 
   it('does not render a clickable button and renders untruncated text when on the xs screen size', () => {
-    mockUseMedia.mockReturnValue(false);
+    mockUseMeasure.mockReturnValueOnce([jest.fn(), { width: 400 }]);
+
     const { view } = renderView({});
 
     expect(view.queryByRole('button', { name: 'Expand' })).toBeNull();

packages/styleguide/stories/Molecules/Alert/index.stories.mdx

@@ -1,4 +1,4 @@
-import { Alert } from '@codecademy/gamut/src';
+import { Alert, Box } from '@codecademy/gamut/src';
 import title from '@codecademy/macros/lib/title.macro';
 import { PropsTable } from '@codecademy/storybook-addon-variance';
 import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
@@ -154,6 +154,20 @@ For inline use you can use these non-stroked versions for the General, Success a
 
 <br />
 
+## Small widths
+
+When the width of the alert is less than 480px, the button automatically stacks below the text.
+
+<Story name="Small width" args={ALERTS.feature}>
+  {(args) => (
+    <Box width="400px">
+      <Alert {...args} />
+    </Box>
+  )}
+</Story>
+
+<br />
+
 ## Code playground
 
 Edit attributes and see what’s possible to do with this component or get the exact output you want.