@primer/components 31.2.0-rc.c7f73427 → 31.2.1-rc.0e01900c

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

@@ -0,0 +1,41 @@
+import { cleanup, render as HTMLRender } from '@testing-library/react';
+import 'babel-polyfill';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import theme from '../theme';
+import { ActionList } from '../ActionList2';
+import { behavesAsComponent, checkExports } from '../utils/testing';
+import { BaseStyles, ThemeProvider, SSRProvider } from '..';
+expect.extend(toHaveNoViolations);
+
+function SimpleActionList() {
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(SSRProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, "New file"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, null, "Copy link"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Edit file"), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger"
+  }, "Delete file")))));
+}
+
+SimpleActionList.displayName = "SimpleActionList";
+describe('ActionList', () => {
+  behavesAsComponent({
+    Component: ActionList,
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/React.createElement(ActionList, null)
+  });
+  checkExports('ActionList2', {
+    default: undefined,
+    ActionList
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionList, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+});

package/lib-esm/__tests__/NewButton.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { NewButton as Button } from '../NewButton';
+import { render, behavesAsComponent } from '../utils/testing';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+import { SearchIcon } from '@primer/octicons-react';
+expect.extend(toHaveNoViolations); // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+function noop() {}
+
+describe('Button', () => {
+  behavesAsComponent({
+    Component: Button
+  });
+  it('renders a <button>', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, null, "Default")).type).toEqual('button');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Button, null, "Click here"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('preserves "onClick" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      onClick: noop
+    }, "Noop")).props.onClick).toEqual(noop);
+  });
+  it('respects width props', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      sx: {
+        width: 200
+      }
+    }, "Block"))).toHaveStyleRule('width', '200px');
+  });
+  it('respects the "disabled" prop', () => {
+    const item = render( /*#__PURE__*/React.createElement(Button, {
+      disabled: true
+    }, " Disabled"));
+    expect(item.props.disabled).toEqual(true);
+    expect(item).toMatchSnapshot();
+  });
+  it('respects the "variant" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      size: "small"
+    }, "Smol"))).toHaveStyleRule('font-size', '12px');
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      size: "large"
+    }, "Large"))).toHaveStyleRule('font-size', '16px');
+  });
+  it('respects the "fontSize" prop over the "variant" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      sx: {
+        fontSize: 20
+      }
+    }, "Big Smol"))).toHaveStyleRule('font-size', '20px');
+  });
+  it('styles primary button appropriately', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "primary"
+    }, "Primary"))).toHaveStyleRule('background-color', '#2da44e');
+  });
+  it('styles invisible button appropriately', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "invisible"
+    }, "Invisible"))).toHaveStyleRule('background-color', 'transparent');
+  });
+  it('styles danger button appropriately', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "danger"
+    }, "Danger"))).toHaveStyleRule('background-color', '#f6f8fa');
+  });
+  it('styles icon only button to make it a square', () => {
+    const IconOnlyButton = render( /*#__PURE__*/React.createElement(Button, {
+      icon: SearchIcon
+    }, "Search icon only button"));
+    expect(IconOnlyButton).toHaveStyleRule('padding-right', '7px');
+    expect(IconOnlyButton).toMatchSnapshot();
+  });
+});

package/lib-esm/__tests__/utils/createSlots.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib-esm/__tests__/utils/createSlots.test.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import 'babel-polyfill';
+import { render, waitFor } from '@testing-library/react';
+import createSlots from '../../utils/create-slots'; // setup a component with slots
+
+const {
+  Slots,
+  Slot
+} = createSlots(['One', 'Two', 'Three']);
+
+const ComponentWithSlots = ({
+  salutation,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Slots, {
+    context: {
+      salutation
+    }
+  }, slots => /*#__PURE__*/React.createElement("div", null, slots.One, /*#__PURE__*/React.createElement("span", null, children, " ", slots.Two, " ", slots.Three)));
+};
+
+ComponentWithSlots.displayName = "ComponentWithSlots";
+
+const SlotItem1 = ({
+  children
+}) => /*#__PURE__*/React.createElement(Slot, {
+  name: "One"
+}, children);
+
+SlotItem1.displayName = "SlotItem1";
+
+const SlotItem2 = ({
+  children
+}) => /*#__PURE__*/React.createElement(Slot, {
+  name: "Two"
+}, children);
+
+SlotItem2.displayName = "SlotItem2";
+
+const SlotItem3 = ({
+  children
+}) => /*#__PURE__*/React.createElement(Slot, {
+  name: "Three"
+}, context => /*#__PURE__*/React.createElement(React.Fragment, null, context.salutation, " ", children));
+
+SlotItem3.displayName = "SlotItem3";
+describe('ComponentWithSlots', () => {
+  it('renders all slots', async () => {
+    const component = render( /*#__PURE__*/React.createElement(ComponentWithSlots, null, /*#__PURE__*/React.createElement(SlotItem1, null, "first"), /*#__PURE__*/React.createElement(SlotItem2, null, "second"), "free form"));
+    await waitFor(() => component.getByText('first'));
+    expect(component.container).toMatchSnapshot();
+  });
+  it('renders without any slots', async () => {
+    const component = render( /*#__PURE__*/React.createElement(ComponentWithSlots, null, "free form"));
+    expect(component.container).toMatchSnapshot();
+  });
+  it('renders with just one slot', async () => {
+    const component = render( /*#__PURE__*/React.createElement(ComponentWithSlots, null, /*#__PURE__*/React.createElement(SlotItem1, null, "first"), "free form"));
+    expect(component.container).toMatchSnapshot();
+  });
+  it('renders with context passed to children', async () => {
+    const component = render( /*#__PURE__*/React.createElement(ComponentWithSlots, {
+      salutation: "hi"
+    }, /*#__PURE__*/React.createElement(SlotItem3, null, "third"), "free form"));
+    expect(component.container).toMatchSnapshot();
+  });
+});

package/lib-esm/drafts.d.ts

@@ -0,0 +1,8 @@
+/** This is the place where we keep components that are not part of the public
+ *  api yet (not in main bundle). We don't recommend using it in production.
+ *
+ *  But, they are published on npm and you can import them for experimentation/feedback.
+ *  example: import {ActionList} from '@primer/components/drafts
+ */
+export * from './ActionList2';
+export * from './NewButton';

package/lib-esm/drafts.js

@@ -0,0 +1,9 @@
+/** This is the place where we keep components that are not part of the public
+ *  api yet (not in main bundle). We don't recommend using it in production.
+ *
+ *  But, they are published on npm and you can import them for experimentation/feedback.
+ *  example: import {ActionList} from '@primer/components/drafts
+ */
+// Components
+export * from './ActionList2';
+export * from './NewButton';

package/lib-esm/index.d.ts

@@ -37,6 +37,8 @@ export type { BranchNameProps } from './BranchName';
 export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
 export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumbs';
 export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
+export { NewButton } from './NewButton';
+export type { NewButtonProps } from './NewButton';
 export type { ButtonProps, ButtonDangerProps, ButtonOutlineProps, ButtonPrimaryProps, ButtonInvisibleProps, ButtonTableListProps, ButtonCloseProps, ButtonGroupProps } from './Button';
 export { default as Caret } from './Caret';
 export type { CaretProps } from './Caret';

package/lib-esm/index.js

@@ -26,6 +26,7 @@ export { default as AvatarStack } from './AvatarStack';
 export { default as BranchName } from './BranchName';
 export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
 export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
+export { NewButton } from './NewButton';
 export { default as Caret } from './Caret';
 export { default as CircleBadge } from './CircleBadge';
 export { default as CircleOcticon } from './CircleOcticon';