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

package/lib/__tests__/Heading.test.js

@@ -12,6 +12,8 @@ var _jestAxe = require("jest-axe");
 
 require("babel-polyfill");
 
+var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 expect.extend(_jestAxe.toHaveNoViolations);
@@ -56,54 +58,85 @@ describe('Heading', () => {
     (0, _react2.cleanup)();
   });
   it('respects fontWeight', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "bold",
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.bold);
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "normal",
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontWeight: 'bold'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.bold);
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.normal);
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "semibold",
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontWeight: 'normal'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.normal);
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "light",
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontWeight: 'semibold'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.light);
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontWeight: 'light'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.light);
   });
   it('respects lineHeight', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      lineHeight: "normal",
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      lineHeight: "condensed",
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        lineHeight: 'normal'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      lineHeight: "condensedUltra",
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        lineHeight: 'condensed'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        lineHeight: 'condensedUltra'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
   });
   it('respects fontFamily="mono"', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontFamily: "mono",
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('font-family', theme.fonts.mono);
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontFamily: 'mono'
+      }
+    })))).toHaveStyleRule('font-family', theme.fonts.mono);
   });
   it('renders fontSize', () => {
     for (const fontSize of theme.fontSizes) {
-      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-        fontSize: fontSize,
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
         theme: theme
-      }))).toHaveStyleRule('font-size', `${fontSize}`);
+      }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+        sx: {
+          fontSize
+        }
+      })))).toHaveStyleRule('font-size', `${fontSize}`);
     }
   });
   it('respects the "fontStyle" prop', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontStyle: "italic"
-    }))).toHaveStyleRule('font-style', 'italic');
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
+      theme: theme
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontStyle: 'italic'
+      }
+    })))).toHaveStyleRule('font-style', 'italic');
   });
 });

package/lib/__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/__tests__/Heading.types.test.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldAcceptCallWithNoProps = shouldAcceptCallWithNoProps;
+exports.shouldNotAcceptSystemProps = shouldNotAcceptSystemProps;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Heading = _interopRequireDefault(require("../Heading"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/_react.default.createElement(_Heading.default, null);
+}
+
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+
+function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/_react.default.createElement(_Heading.default, {
+    backgroundColor: "thistle"
+  });
+}
+
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib/__tests__/ThemeProvider.test.js

@@ -441,4 +441,118 @@ describe('useColorSchemeVar', () => {
 
     expect(_react.screen.getByText('Hello')).toHaveStyleRule('background-color', 'blue');
   });
+});
+describe('useTheme().resolvedColorScheme', () => {
+  it('is undefined when not in a theme', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement(_.Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Component, null));
+    expect(_react.screen.getByTestId('text').textContent).toEqual('');
+  });
+  it('is undefined when the theme has no colorScheme object', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement(_.Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: {
+        color: 'red'
+      }
+    }, /*#__PURE__*/_react2.default.createElement(Component, null)));
+    expect(_react.screen.getByTestId('text').textContent).toEqual('');
+  });
+  it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement(_.Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    const schemeToApply = 'dark';
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "day",
+      dayScheme: schemeToApply
+    }, /*#__PURE__*/_react2.default.createElement(Component, null)));
+    expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply);
+    expect(_react.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
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement(_.Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    const schemeToApply = 'totally-invalid-colorscheme';
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "day",
+      dayScheme: schemeToApply
+    }, /*#__PURE__*/_react2.default.createElement(Component, null)));
+    const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0];
+    expect(defaultThemeColorScheme).not.toEqual(schemeToApply);
+    expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply);
+    expect(_react.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
+        } = (0, _.useTheme)();
+        return /*#__PURE__*/_react2.default.createElement(_.Text, {
+          "data-testid": "text"
+        }, resolvedColorScheme);
+      };
+
+      const schemeToApply = 'dark';
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+        theme: exampleTheme,
+        colorMode: "day",
+        dayScheme: schemeToApply
+      }, /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react2.default.createElement(Component, null))));
+      expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply);
+      expect(_react.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
+        } = (0, _.useTheme)();
+        return /*#__PURE__*/_react2.default.createElement(_.Text, {
+          "data-testid": "text"
+        }, resolvedColorScheme);
+      };
+
+      const schemeToApply = 'totally-invalid-colorscheme';
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+        theme: exampleTheme,
+        colorMode: "day",
+        dayScheme: schemeToApply
+      }, /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react2.default.createElement(Component, null))));
+      const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0];
+      expect(defaultThemeColorScheme).not.toEqual(schemeToApply);
+      expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply);
+      expect(_react.screen.getByTestId('text').textContent).toEqual('light');
+    });
+  });
 });

package/lib/drafts.d.ts

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

package/lib/drafts.js

@@ -28,4 +28,17 @@ Object.keys(_NewButton).forEach(function (key) {
       return _NewButton[key];
     }
   });
+});
+
+var _ActionMenu = require("./ActionMenu2");
+
+Object.keys(_ActionMenu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ActionMenu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ActionMenu[key];
+    }
+  });
 });

package/lib/stories/ActionList.stories.js

@@ -58,7 +58,7 @@ exports.default = _default;
 
 const ErsatzOverlay = _styledComponents.default.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');
@@ -133,7 +133,7 @@ MultiSelectListStory.storyName = 'Multi Select';
 function ComplexListInsetVariantStory() {
   const StyledDiv = _styledComponents.default.div.withConfig({
     displayName: "ActionListstories__StyledDiv",
-    componentId: "akdcn0-1"
+    componentId: "sc-akdcn0-1"
   })(["", ""], _sx.default);
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Complex List"), /*#__PURE__*/_react.default.createElement("h2", null, "Inset Variant"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
@@ -235,7 +235,7 @@ ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant';
 function ComplexListFullVariantStory() {
   const StyledDiv = _styledComponents.default.div.withConfig({
     displayName: "ActionListstories__StyledDiv",
-    componentId: "akdcn0-2"
+    componentId: "sc-akdcn0-2"
   })(["", ""], _sx.default);
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Complex List"), /*#__PURE__*/_react.default.createElement("h2", null, "Full Variant"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {

package/lib/stories/ActionList2.stories.js

@@ -86,7 +86,7 @@ exports.default = _default;
 
 const ErsatzOverlay = _styledComponents.default.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');