Merge remote-tracking branch 'origin/main' into storybook-8

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.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
+
 ### [0.6.447](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-10-09)
 
 **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.447",
+  "version": "0.6.449",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
-    "@codecademy/gamut": "57.3.3",
+    "@codecademy/gamut": "57.4.1",
     "@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.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
+
+- **Video + Markdown:** update react player + put videos in markdown ([4170f40](https://github.com/Codecademy/gamut/commit/4170f401374295ae0cbbc4f52c1cf612fe1239f8))
+
 ### [57.3.3](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-10-09)
 
 **Note:** Version bump only for package @codecademy/gamut

packages/gamut/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "57.3.3",
+  "version": "57.4.1",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.32.0",
@@ -22,7 +22,7 @@
     "react-aria-tabpanel": "^4.4.0",
     "react-focus-on": "^3.5.1",
     "react-hook-form": "^7.21.2",
-    "react-player": "^2.3.1",
+    "react-player": "^2.16.0",
     "react-select": "^5.2.2",
     "react-truncate-markup": "^5.1.2",
     "react-use": "^15.3.8",

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

@@ -7,6 +7,13 @@ import * as React from 'react';
 
 import { Markdown } from '../index';
 
+const mockTitle = 'a fake youtube';
+
+jest.mock('react-player', () => ({
+  __esModule: true,
+  default: () => <iframe title={mockTitle} />,
+}));
+
 const basicMarkdown = `
 # Heading 1
 
@@ -36,12 +43,35 @@ const youtubeMarkdown = `
 <iframe src="https://www.youtube.com/embed/KvgrQIK1yPY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 `;
 
+const vimeoMarkdown = `
+<iframe src="https://player.vimeo.com/video/188237476?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+`;
+
+const videoMarkdown = `
+<video src="/example.webm" title="video" />
+`;
+
+const videoSourceMarkdown = `
+<video controls poster="/images/spaceghost.gif">
+  <source src="movie.mp4" type="video/mp4">
+  <source src="movie.ogg" type="video/ogg">
+</video>
+`;
+
 const checkboxMarkdown = `
 - [ ] checkbox
 - [x] default checked checkbox
 - [ ] third checkbox
 `;
 
+const table = `
+| Tables   |      Are      |  Cool |
+|----------|:-------------:|------:|
+| col 1 is |  left-aligned | $1600 |
+| col 2 is |    centered   |   $12 |
+| col 3 is | right-aligned |    $1 |
+    `;
+
 const renderView = setupRtl(Markdown);
 
 describe('<Markdown />', () => {
@@ -60,27 +90,15 @@ describe('<Markdown />', () => {
   });
 
   it('Renders custom tables in markdown', () => {
-    const table = `
-| Tables   |      Are      |  Cool |
-|----------|:-------------:|------:|
-| col 1 is |  left-aligned | $1600 |
-| col 2 is |    centered   |   $12 |
-| col 3 is | right-aligned |    $1 |
-    `;
+    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', () => {
-    const table = `
-| Tables   |      Are      |  Cool |
-|----------|:-------------:|------:|
-| col 1 is |  left-aligned | $1600 |
-| col 2 is |    centered   |   $12 |
-| col 3 is | right-aligned |    $1 |
-    `;
+    jest.spyOn(console, 'error').mockImplementation(jest.fn());
     renderView({
       skipDefaultOverrides: { table: true },
       text: table,
@@ -91,9 +109,28 @@ describe('<Markdown />', () => {
     );
   });
 
-  it('Wraps youtube iframes in a flexible container', () => {
+  it('Renders YouTube iframes using the Video component', () => {
+    renderView({ text: youtubeMarkdown });
+    screen.getByTitle(mockTitle);
+  });
+
+  it('Renders Vimeo iframes using the Video component', () => {
+    renderView({ text: vimeoMarkdown });
+    screen.getByTitle(mockTitle);
+  });
+
+  it('Renders video tags using the Video component if they have an src', () => {
+    renderView({ text: videoMarkdown });
+    screen.getByTitle(mockTitle);
+  });
+
+  it('Renders video tags using the Video component if they have a source', () => {
+    renderView({ text: videoSourceMarkdown });
+    screen.getByTitle(mockTitle);
+  });
+  it('Renders YouTube iframes using the Video component', () => {
     renderView({ text: youtubeMarkdown });
-    screen.getByTestId('yt-iframe');
+    screen.getByTitle(mockTitle);
   });
 
   it('Wraps the markdown in a div by default (block)', () => {
@@ -286,6 +323,7 @@ var test = true;
         isCodeBlock?: boolean;
         isWebBrowser?: boolean;
       };
+
       const renderedProps: jest.Mock<RenderedProps> = jest.fn();
 
       beforeEach(() => {
@@ -294,9 +332,10 @@ var test = true;
 
 <TestComponent name="my name" isCodeBlock="true" isWebBrowser />
         `;
+
         const TestComponent = (props: any) => {
           renderedProps(props);
-          return <strong {...props}>attr-testing-component</strong>;
+          return <strong>attr-testing-component</strong>;
         };
 
         const overrides = {

packages/gamut/src/Markdown/index.tsx

@@ -10,6 +10,7 @@ import {
   createCodeBlockOverride,
   createInputOverride,
   createTagOverride,
+  createVideoOverride,
   MarkdownOverrideSettings,
   standardOverrides,
 } from './libs/overrides';
@@ -21,6 +22,7 @@ import {
   MarkdownAnchorProps,
 } from './libs/overrides/MarkdownAnchor';
 import { Table } from './libs/overrides/Table';
+import { MarkdownVideo } from './libs/overrides/Video';
 import { createPreprocessingInstructions } from './libs/preprocessing';
 import { defaultSanitizationConfig } from './libs/sanitizationConfig';
 // eslint-disable-next-line gamut/no-css-standalone
@@ -40,6 +42,7 @@ export type SkipDefaultOverridesSettings = {
   details?: boolean;
   iframe?: boolean;
   table?: boolean;
+  video?: boolean;
 };
 
 export type MarkdownProps = {
@@ -114,6 +117,10 @@ export class Markdown extends PureComponent<MarkdownProps> {
           component: Table,
           allowedAttributes: ['style'],
         }),
+      !skipDefaultOverrides.video &&
+        createVideoOverride('video', {
+          component: MarkdownVideo,
+        }),
       !skipDefaultOverrides.details &&
         createTagOverride('details', {
           component: Details,

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

@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
 import { FunctionComponent, HTMLAttributes } from 'react';
 
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles.module.scss';
+import { Video } from '../../../../Video';
 
 export interface IframeProps extends HTMLAttributes<HTMLIFrameElement> {
+  allow?: string;
   src?: string;
   title?: string;
   width?: number;
@@ -19,23 +19,15 @@ export const Iframe: FunctionComponent<IframeProps> = (props) => {
     props.src &&
     [YOUTUBE_PATTERN, VIMEO_PATTERN].some((pattern) => pattern.test(props.src!))
   ) {
-    const { width = 16, height = 9 } = props;
-    const ratioPadding = (
-      (Math.round(height) / Math.round(width)) *
-      100
-    ).toFixed(2);
-    const wrapperStyles = {
-      paddingBottom: `${ratioPadding}%`,
-    };
     return (
-      <div
-        className={styles.youtubeVideoWrapper}
-        data-testid="yt-iframe"
-        style={wrapperStyles}
-      >
-        <iframe {...props} />
-      </div>
+      <Video
+        height={props?.height}
+        width={props?.width}
+        videoUrl={props?.src}
+        videoTitle={props?.title}
+      />
     );
   }
+
   return <iframe {...props} />;
 };