Merge branch 'main' into ajr-video-no-scss-GM-748

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.450](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-10-16)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
+### [0.6.449](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-10-16)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
 ### [0.6.448](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-10-15)
 
 **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.448",
+  "version": "0.6.450",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
-    "@codecademy/gamut": "57.4.0",
+    "@codecademy/gamut": "57.4.2",
     "@codecademy/gamut-icons": "9.32.0",
     "@codecademy/gamut-illustrations": "0.48.1",
     "@codecademy/gamut-patterns": "0.9.15",

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.
 
+### [57.4.2](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-10-16)
+
+### Bug Fixes
+
+- **Alert:** Update alert to be based on component width ([9367531](https://github.com/Codecademy/gamut/commit/936753191363a9e3f822e12d37bb279d9d55ded4))
+
+### [57.4.1](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-10-16)
+
+### Bug Fixes
+
+- **Markdown:** filter styles from video ([51e34e4](https://github.com/Codecademy/gamut/commit/51e34e407221feb4ca3bca44f3b9ef0ef0a3d474))
+
 ## [57.4.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-10-15)
 
 ### Features

packages/gamut/package.json

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

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/gamut/src/Markdown/__tests__/Markdown.test.tsx

@@ -90,13 +90,15 @@ describe('<Markdown />', () => {
   });
 
   it('Renders custom tables in markdown', () => {
+    jest.spyOn(console, 'error').mockImplementation(jest.fn());
     renderView({ text: table });
     expect(document.querySelectorAll('div.tableWrapper table').length).toEqual(
       1
     );
   });
 
   it('Skips rendering custom tables in markdown when skipProcessing.table is true', () => {
+    jest.spyOn(console, 'error').mockImplementation(jest.fn());
     renderView({
       skipDefaultOverrides: { table: true },
       text: table,
@@ -121,11 +123,11 @@ describe('<Markdown />', () => {
     renderView({ text: videoMarkdown });
     screen.getByTitle(mockTitle);
   });
-  it('Renders video tags using the Video component if they have an src', () => {
+
+  it('Renders video tags using the Video component if they have a source', () => {
     renderView({ text: videoSourceMarkdown });
-    expect(screen.queryByTitle(mockTitle)).toBeNull();
+    screen.getByTitle(mockTitle);
   });
-
   it('Renders YouTube iframes using the Video component', () => {
     renderView({ text: youtubeMarkdown });
     screen.getByTitle(mockTitle);

packages/gamut/src/Markdown/index.tsx

@@ -10,6 +10,7 @@ import {
   createCodeBlockOverride,
   createInputOverride,
   createTagOverride,
+  createVideoOverride,
   MarkdownOverrideSettings,
   standardOverrides,
 } from './libs/overrides';
@@ -117,7 +118,7 @@ export class Markdown extends PureComponent<MarkdownProps> {
           allowedAttributes: ['style'],
         }),
       !skipDefaultOverrides.video &&
-        createTagOverride('video', {
+        createVideoOverride('video', {
           component: MarkdownVideo,
         }),
       !skipDefaultOverrides.details &&

packages/gamut/src/Markdown/libs/overrides/index.tsx

@@ -114,6 +114,62 @@ export const createTagOverride = (
   },
 });
 
+// generic video tag override
+export const createVideoOverride = (
+  tagName: string,
+  Override: MarkdownOverrideSetting
+) => ({
+  shouldProcessNode(node: HTMLToReactNode) {
+    if (!Override) return false;
+
+    if (Override.shouldProcessNode) {
+      return Override.shouldProcessNode(node);
+    }
+    return node.name === tagName.toLowerCase();
+  },
+  processNode(
+    node: HTMLToReactNode,
+    children: HTMLToReactNode[],
+    key: React.Key
+  ) {
+    if (!Override) return null;
+
+    const { src, ...processedAttributes } = processAttributes(
+      node.attribs
+    ) as any;
+
+    const altVideoSrc = [] as any;
+
+    if (children) {
+      children.forEach((element: any) => {
+        if (element.type === 'source' && element?.props?.src) {
+          if (element.props?.type.includes('video')) {
+            altVideoSrc.push({
+              src: element?.props.src,
+              type: element?.props.type,
+            });
+          }
+        } // Once we enable captions in the Video component, we can add an additional check here - GM-909
+      });
+    }
+
+    const props = {
+      src: altVideoSrc.length > 0 ? altVideoSrc : src,
+      ...processedAttributes,
+      children,
+      key,
+    };
+
+    if (Override.processNode) {
+      return Override.processNode(node, props);
+    }
+
+    if (!Override.component) return null;
+
+    return <Override.component {...props} />;
+  },
+});
+
 // Allows <CodeBlock></CodeBlock> override and overrides of standard fenced codeblocks
 export const createCodeBlockOverride = (
   tagName: string,

packages/gamut/src/Markdown/libs/sanitizationConfig.ts

@@ -23,7 +23,6 @@ export const defaultSanitizationConfig = {
       'loop',
       'muted',
       'src',
-      'style',
       'width',
     ],
     iframe: [

packages/styleguide/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.
 
+### [68.2.2](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-10-16)
+
+### Bug Fixes
+
+- **Alert:** Update alert to be based on component width ([9367531](https://github.com/Codecademy/gamut/commit/936753191363a9e3f822e12d37bb279d9d55ded4))
+
+### [68.2.1](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-10-16)
+
+### Bug Fixes
+
+- **Markdown:** filter styles from video ([51e34e4](https://github.com/Codecademy/gamut/commit/51e34e407221feb4ca3bca44f3b9ef0ef0a3d474))
+
 ## [68.2.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-10-15)
 
 ### Features

packages/styleguide/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "68.2.0",
+  "version": "68.2.2",
   "author": "Codecademy Engineering",
   "dependencies": {
-    "@codecademy/gamut": "57.4.0",
+    "@codecademy/gamut": "57.4.2",
     "@codecademy/gamut-icons": "9.32.0",
     "@codecademy/gamut-illustrations": "0.48.1",
     "@codecademy/gamut-patterns": "0.9.15",

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.

packages/styleguide/stories/Organisms/Markdown/markdown-example.md

@@ -358,7 +358,6 @@ Vimeo and Youtube video iframes will be rendered by our Video component, otherwi
 
 ### Video
 
-`video`s with an `src` will be rendered by our Video component, otherwise they'll render as stated.
-
-<video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" title="video" />
+`video`s with an `src` or a `source` video file will be rendered by our Video component, otherwise they'll render the original code. Videos with a `style` prop or another restricted prop will be stripped of that property.
 
+<video width="100%" height="100%" align="middle" controls> <source src="https://content.codecademy.com/articles/db-browser/open-database.mp4" type="video/mp4"> Your browser does not support the video tag. </video>