@primer/components 32.1.1-rc.b4502a34 → 33.0.0-rc.9f3670b7

package/lib-esm/ProgressBar.d.ts

@@ -1,17 +1,22 @@
 /// <reference types="react" />
 import { WidthProps } from 'styled-system';
-import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
-import { ComponentProps } from './utils/types';
-declare const Bar: import("styled-components").StyledComponent<"span", any, {
-    progress?: string | number | undefined;
-} & SystemCommonProps, never>;
-declare const ProgressContainer: import("styled-components").StyledComponent<"span", any, {
-    inline?: boolean | undefined;
-    barSize?: "small" | "default" | "large" | undefined;
-} & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & SystemCommonProps & SxProp, never>;
-export declare type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>;
-declare function ProgressBar({ progress, bg, theme, ...rest }: ProgressBarProps): JSX.Element;
+declare type ProgressProp = {
+    progress?: string | number;
+};
+declare const sizeMap: {
+    small: string;
+    large: string;
+    default: string;
+};
+declare type StyledProgressContainerProps = {
+    inline?: boolean;
+    barSize?: keyof typeof sizeMap;
+} & WidthProps & SxProp;
+export declare type ProgressBarProps = {
+    bg: string;
+} & StyledProgressContainerProps & ProgressProp;
+declare function ProgressBar({ progress, bg, ...rest }: ProgressBarProps): JSX.Element;
 declare namespace ProgressBar {
     var defaultProps: {
         bg: string;

package/lib-esm/ProgressBar.js

@@ -1,14 +1,12 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import styled from 'styled-components';
 import { width } from 'styled-system';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
 const Bar = styled.span.withConfig({
   displayName: "ProgressBar__Bar",
   componentId: "sc-1tiva13-0"
-})(["width:", ";", ""], props => props.progress ? `${props.progress}%` : 0, COMMON);
+})(["width:", ";", ";"], props => props.progress ? `${props.progress}%` : 0, sx);
 const sizeMap = {
   small: '5px',
   large: '10px',
@@ -17,20 +15,18 @@ const sizeMap = {
 const ProgressContainer = styled.span.withConfig({
   displayName: "ProgressBar__ProgressContainer",
   componentId: "sc-1tiva13-1"
-})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], COMMON, width, sx);
+})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], width, sx);
 
 function ProgressBar({
   progress,
   bg,
-  theme,
   ...rest
 }) {
-  return /*#__PURE__*/React.createElement(ProgressContainer, _extends({
-    theme: theme
-  }, rest), /*#__PURE__*/React.createElement(Bar, {
+  return /*#__PURE__*/React.createElement(ProgressContainer, rest, /*#__PURE__*/React.createElement(Bar, {
     progress: progress,
-    bg: bg,
-    theme: theme
+    sx: {
+      bg
+    }
   }));
 }
 

package/lib-esm/Spinner.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const sizeMap: {
@@ -12,6 +11,6 @@ export interface SpinnerInternalProps {
     size?: keyof typeof sizeMap;
 }
 declare function Spinner({ size: sizeKey, ...props }: SpinnerInternalProps): JSX.Element;
-declare const StyledSpinner: import("styled-components").StyledComponent<typeof Spinner, any, SystemCommonProps & SxProp, never>;
+declare const StyledSpinner: import("styled-components").StyledComponent<typeof Spinner, any, SxProp, never>;
 export declare type SpinnerProps = ComponentProps<typeof StyledSpinner>;
 export default StyledSpinner;

package/lib-esm/Spinner.js

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import styled from 'styled-components';
-import { COMMON } from './constants';
 import sx from './sx';
 const sizeMap = {
   small: '16px',
@@ -41,6 +40,6 @@ Spinner.displayName = "Spinner";
 const StyledSpinner = styled(Spinner).withConfig({
   displayName: "Spinner__StyledSpinner",
   componentId: "sc-14tspit-0"
-})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", " ", ""], COMMON, sx);
+})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx);
 StyledSpinner.displayName = 'Spinner';
 export default StyledSpinner;

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

@@ -48,9 +48,11 @@ describe('Avatar', () => {
   });
   it('respects margin props', () => {
     expect(render( /*#__PURE__*/React.createElement(Avatar, {
-      m: 2,
       src: "primer.png",
-      alt: ""
+      alt: "",
+      sx: {
+        m: 2
+      }
     }))).toHaveStyleRule('margin', px(theme.space[2]));
   });
 });

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import Avatar from '../Avatar';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://avatars.githubusercontent.com/primer"
+  });
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://avatars.githubusercontent.com/primer",
+    backgroundColor: "thistle"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

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

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

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

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

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/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';