@primer/components 31.2.0-rc.0b631515 → 31.2.0-rc.25d7c83f

package/lib-esm/_TextInputWrapper.js

@@ -21,11 +21,11 @@ const sizeVariants = variant({
 const TextInputWrapper = styled.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return css(["padding:0;"]);
   } else {
     return css(["padding:6px 12px;"]);
   }
-}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
+}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), props => props.block && props.hasIcon && css(["display:flex;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
 export default TextInputWrapper;

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

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

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__/AnchoredOverlay.test.js

@@ -126,9 +126,11 @@ describe('AnchoredOverlay', () => {
     expect(mockCloseCallback).toHaveBeenCalledWith('escape');
   });
   it('should render consistently when open', () => {
-    const anchoredOverlay = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
       initiallyOpen: true
     }));
-    expect(anchoredOverlay).toMatchSnapshot();
+    expect(container).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();
+  });
+});