@primer/components 32.1.1-rc.8eccc94b → 33.0.0-rc.42d465c3

package/lib-esm/__tests__/Heading.test.js

@@ -4,6 +4,7 @@ import { render, behavesAsComponent, checkExports } from '../utils/testing';
 import { render as HTMLRender, cleanup } from '@testing-library/react';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import 'babel-polyfill';
+import ThemeProvider from '../ThemeProvider';
 expect.extend(toHaveNoViolations);
 const theme = {
   breakpoints: ['400px', '640px', '960px', '1280px'],
@@ -46,54 +47,85 @@ describe('Heading', () => {
     cleanup();
   });
   it('respects fontWeight', () => {
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontWeight: "bold",
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.bold);
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontWeight: "normal",
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontWeight: 'bold'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.bold);
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.normal);
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontWeight: "semibold",
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontWeight: 'normal'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.normal);
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontWeight: "light",
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontWeight: 'semibold'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.light);
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontWeight: 'light'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.light);
   });
   it('respects lineHeight', () => {
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      lineHeight: "normal",
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      lineHeight: "condensed",
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        lineHeight: 'normal'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      lineHeight: "condensedUltra",
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        lineHeight: 'condensed'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        lineHeight: 'condensedUltra'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
   });
   it('respects fontFamily="mono"', () => {
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontFamily: "mono",
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: theme
-    }))).toHaveStyleRule('font-family', theme.fonts.mono);
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontFamily: 'mono'
+      }
+    })))).toHaveStyleRule('font-family', theme.fonts.mono);
   });
   it('renders fontSize', () => {
     for (const fontSize of theme.fontSizes) {
-      expect(render( /*#__PURE__*/React.createElement(Heading, {
-        fontSize: fontSize,
+      expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
         theme: theme
-      }))).toHaveStyleRule('font-size', `${fontSize}`);
+      }, /*#__PURE__*/React.createElement(Heading, {
+        sx: {
+          fontSize
+        }
+      })))).toHaveStyleRule('font-size', `${fontSize}`);
     }
   });
   it('respects the "fontStyle" prop', () => {
-    expect(render( /*#__PURE__*/React.createElement(Heading, {
-      fontStyle: "italic"
-    }))).toHaveStyleRule('font-style', 'italic');
+    expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(Heading, {
+      sx: {
+        fontStyle: 'italic'
+      }
+    })))).toHaveStyleRule('font-style', 'italic');
   });
 });

package/lib-esm/__tests__/Heading.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Heading.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Heading from '../Heading';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Heading, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Heading, {
+    backgroundColor: "thistle"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/ThemeProvider.test.js

@@ -405,4 +405,118 @@ describe('useColorSchemeVar', () => {
     screen.getByRole('button').click();
     expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'blue');
   });
+});
+describe('useTheme().resolvedColorScheme', () => {
+  it('is undefined when not in a theme', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = useTheme();
+      return /*#__PURE__*/React.createElement(Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    render( /*#__PURE__*/React.createElement(Component, null));
+    expect(screen.getByTestId('text').textContent).toEqual('');
+  });
+  it('is undefined when the theme has no colorScheme object', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = useTheme();
+      return /*#__PURE__*/React.createElement(Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    render( /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: {
+        color: 'red'
+      }
+    }, /*#__PURE__*/React.createElement(Component, null)));
+    expect(screen.getByTestId('text').textContent).toEqual('');
+  });
+  it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = useTheme();
+      return /*#__PURE__*/React.createElement(Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    const schemeToApply = 'dark';
+    render( /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "day",
+      dayScheme: schemeToApply
+    }, /*#__PURE__*/React.createElement(Component, null)));
+    expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply);
+    expect(screen.getByTestId('text').textContent).toEqual(schemeToApply);
+  });
+  it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = useTheme();
+      return /*#__PURE__*/React.createElement(Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    const schemeToApply = 'totally-invalid-colorscheme';
+    render( /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "day",
+      dayScheme: schemeToApply
+    }, /*#__PURE__*/React.createElement(Component, null)));
+    const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0];
+    expect(defaultThemeColorScheme).not.toEqual(schemeToApply);
+    expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply);
+    expect(screen.getByTestId('text').textContent).toEqual('light');
+  });
+  describe('nested theme', () => {
+    it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+      const Component = () => {
+        const {
+          resolvedColorScheme
+        } = useTheme();
+        return /*#__PURE__*/React.createElement(Text, {
+          "data-testid": "text"
+        }, resolvedColorScheme);
+      };
+
+      const schemeToApply = 'dark';
+      render( /*#__PURE__*/React.createElement(ThemeProvider, {
+        theme: exampleTheme,
+        colorMode: "day",
+        dayScheme: schemeToApply
+      }, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Component, null))));
+      expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply);
+      expect(screen.getByTestId('text').textContent).toEqual(schemeToApply);
+    });
+    it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+      const Component = () => {
+        const {
+          resolvedColorScheme
+        } = useTheme();
+        return /*#__PURE__*/React.createElement(Text, {
+          "data-testid": "text"
+        }, resolvedColorScheme);
+      };
+
+      const schemeToApply = 'totally-invalid-colorscheme';
+      render( /*#__PURE__*/React.createElement(ThemeProvider, {
+        theme: exampleTheme,
+        colorMode: "day",
+        dayScheme: schemeToApply
+      }, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Component, null))));
+      const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0];
+      expect(defaultThemeColorScheme).not.toEqual(schemeToApply);
+      expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply);
+      expect(screen.getByTestId('text').textContent).toEqual('light');
+    });
+  });
 });

package/lib-esm/drafts.d.ts

@@ -6,3 +6,4 @@
  */
 export * from './ActionList2';
 export * from './NewButton';
+export * from './ActionMenu2';

package/lib-esm/drafts.js

@@ -6,4 +6,5 @@
  */
 // Components
 export * from './ActionList2';
-export * from './NewButton';
+export * from './NewButton';
+export * from './ActionMenu2';

package/lib-esm/stories/ActionList.stories.js

@@ -24,7 +24,7 @@ const meta = {
 export default meta;
 const ErsatzOverlay = styled.div.withConfig({
   displayName: "ActionListstories__ErsatzOverlay",
-  componentId: "akdcn0-0"
+  componentId: "sc-akdcn0-0"
 })(["border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 8px 24px rgba(149,157,165,0.2);overflow:hidden;max-width:", ";"], ({
   maxWidth
 }) => maxWidth || 'none');
@@ -90,7 +90,7 @@ MultiSelectListStory.storyName = 'Multi Select';
 export function ComplexListInsetVariantStory() {
   const StyledDiv = styled.div.withConfig({
     displayName: "ActionListstories__StyledDiv",
-    componentId: "akdcn0-1"
+    componentId: "sc-akdcn0-1"
   })(["", ""], sx);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Inset Variant"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
     groupMetadata: [{
@@ -189,7 +189,7 @@ ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant';
 export function ComplexListFullVariantStory() {
   const StyledDiv = styled.div.withConfig({
     displayName: "ActionListstories__StyledDiv",
-    componentId: "akdcn0-2"
+    componentId: "sc-akdcn0-2"
   })(["", ""], sx);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Full Variant"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
     variant: "full",

package/lib-esm/stories/ActionList2.stories.js

@@ -31,7 +31,7 @@ const meta = {
 export default meta;
 const ErsatzOverlay = styled.div.withConfig({
   displayName: "ActionList2stories__ErsatzOverlay",
-  componentId: "f9cezu-0"
+  componentId: "sc-f9cezu-0"
 })(["border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 8px 24px rgba(149,157,165,0.2);overflow:hidden;max-width:", ";"], ({
   maxWidth
 }) => maxWidth || 'none');