@primer/components 31.2.0-rc.85bcb6e0 → 31.2.0-rc.881e6b2d

package/lib/ActionList2/Visuals.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrailingVisual = exports.LeadingVisual = exports.LeadingVisualContainer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _sx = require("../sx");
+
+var _constants = require("../constants");
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const LeadingVisualContainer = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    as: "span",
+    sx: (0, _sx.merge)({
+      height: _Item.TEXT_ROW_HEIGHT,
+      // match height of text row
+      minWidth: (0, _constants.get)('space.3'),
+      maxWidth: _Item.TEXT_ROW_HEIGHT,
+      // square (same as height)
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexShrink: 0,
+      marginRight: 2
+    }, sx)
+  }, props));
+};
+
+exports.LeadingVisualContainer = LeadingVisualContainer;
+LeadingVisualContainer.displayName = "LeadingVisualContainer";
+
+const LeadingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: "LeadingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, _extends({
+    sx: (0, _sx.merge)({
+      color: (0, _Item.getVariantStyles)(variant, disabled).iconColor,
+      svg: {
+        fontSize: 0
+      }
+    }, sx)
+  }, props), props.children));
+};
+
+exports.LeadingVisual = LeadingVisual;
+LeadingVisual.displayName = "LeadingVisual";
+
+const TrailingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: "TrailingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    as: "span",
+    sx: (0, _sx.merge)({
+      height: '20px',
+      // match height of text row
+      flexShrink: 0,
+      color: (0, _Item.getVariantStyles)(variant, disabled).annotationColor,
+      marginLeft: 2
+    }, sx)
+  }, props), props.children));
+};
+
+exports.TrailingVisual = TrailingVisual;
+TrailingVisual.displayName = "TrailingVisual";

package/lib/ActionList2/index.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { Divider } from './Divider';
+export type { ListProps as ActionListProps } from './List';
+export type { GroupProps } from './Group';
+export type { ItemProps } from './Item';
+export type { DescriptionProps } from './Description';
+export type { LeadingVisualProps, TrailingVisualProps } from './Visuals';
+/**
+ * Collection of list-related components.
+ */
+export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRefComponent<"ul", import("./List").ListProps> & {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: import("react").FC<import("./Group").GroupProps>;
+    /** An actionable or selectable `Item` */
+    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"li", import("./Item").ItemProps>;
+    /** A `Item` that renders a full-size anchor inside ListItem */
+    LinkItem: import("@radix-ui/react-polymorphic").ForwardRefComponent<"a", Pick<import("./Item").ItemProps, "children" | "sx"> & {
+        download?: string | undefined;
+        href?: string | undefined;
+        hrefLang?: string | undefined;
+        media?: string | undefined;
+        ping?: string | undefined;
+        rel?: string | undefined;
+        target?: string | undefined;
+        type?: string | undefined;
+        referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
+    }>;
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: typeof Divider;
+    /** Secondary text which provides additional information about an `Item`. */
+    Description: import("react").FC<import("./Description").DescriptionProps>;
+    /** Icon (or similar) positioned before `Item` text. */
+    LeadingVisual: import("react").FC<import("../sx").SxProp & import("react").HTMLAttributes<HTMLSpanElement>>;
+    /** Icon (or similar) positioned after `Item` text. */
+    TrailingVisual: import("react").FC<import("../sx").SxProp & import("react").HTMLAttributes<HTMLSpanElement>>;
+};

package/lib/ActionList2/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionList = void 0;
+
+var _List = require("./List");
+
+var _Group = require("./Group");
+
+var _Item = require("./Item");
+
+var _LinkItem = require("./LinkItem");
+
+var _Divider = require("./Divider");
+
+var _Description = require("./Description");
+
+var _Visuals = require("./Visuals");
+
+/**
+ * Collection of list-related components.
+ */
+const ActionList = Object.assign(_List.List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group: _Group.Group,
+
+  /** An actionable or selectable `Item` */
+  Item: _Item.Item,
+
+  /** A `Item` that renders a full-size anchor inside ListItem */
+  LinkItem: _LinkItem.LinkItem,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider: _Divider.Divider,
+
+  /** Secondary text which provides additional information about an `Item`. */
+  Description: _Description.Description,
+
+  /** Icon (or similar) positioned before `Item` text. */
+  LeadingVisual: _Visuals.LeadingVisual,
+
+  /** Icon (or similar) positioned after `Item` text. */
+  TrailingVisual: _Visuals.TrailingVisual
+});
+exports.ActionList = ActionList;

package/lib/StateLabel.d.ts

@@ -4,7 +4,7 @@ import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const StateLabelBase: import("styled-components").StyledComponent<"span", any, {
     variant?: "small" | "normal" | undefined;
-    status?: "issueClosed" | "pullClosed" | "pullMerged" | "issueOpened" | "pullOpened" | "draft" | undefined;
+    status?: "issueClosed" | "pullClosed" | "pullMerged" | "issueOpened" | "pullOpened" | "draft" | "issueDraft" | undefined;
 } & SystemCommonProps & SxProp, never>;
 export declare type StateLabelProps = ComponentProps<typeof StateLabelBase>;
 declare function StateLabel({ children, status, variant: variantProp, ...rest }: StateLabelProps): JSX.Element;

package/lib/StateLabel.js

@@ -29,7 +29,8 @@ const octiconMap = {
   issueClosed: _octiconsReact.IssueClosedIcon,
   pullClosed: _octiconsReact.GitPullRequestIcon,
   pullMerged: _octiconsReact.GitMergeIcon,
-  draft: _octiconsReact.GitPullRequestIcon
+  draft: _octiconsReact.GitPullRequestIcon,
+  issueDraft: _octiconsReact.IssueDraftIcon
 };
 const colorVariants = (0, _styledSystem.variant)({
   prop: 'status',
@@ -57,6 +58,10 @@ const colorVariants = (0, _styledSystem.variant)({
     draft: {
       backgroundColor: 'neutral.emphasis',
       color: 'fg.onEmphasis'
+    },
+    issueDraft: {
+      backgroundColor: 'neutral.emphasis',
+      color: 'fg.onEmphasis'
     }
   }
 });

package/lib/_TextInputWrapper.js

@@ -39,13 +39,13 @@ const sizeVariants = (0, _styledSystem.variant)({
 const TextInputWrapper = _styledComponents.default.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:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.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:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return (0, _styledComponents.css)(["padding:0;"]);
   } else {
     return (0, _styledComponents.css)(["padding:6px 12px;"]);
   }
-}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
+}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), props => props.block && props.hasIcon && (0, _styledComponents.css)(["display:flex;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
 
 var _default = TextInputWrapper;
 exports.default = _default;

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

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

package/lib/__tests__/ActionList2.test.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("babel-polyfill");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _ActionList = require("../ActionList2");
+
+var _testing = require("../utils/testing");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+function SimpleActionList() {
+  return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "New file"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Divider, null), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "Copy link"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "Edit file"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, {
+    variant: "danger"
+  }, "Delete file")))));
+}
+
+SimpleActionList.displayName = "SimpleActionList";
+describe('ActionList', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionList.ActionList,
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, null)
+  });
+  (0, _testing.checkExports)('ActionList2', {
+    default: undefined,
+    ActionList: _ActionList.ActionList
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionList, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+});

package/lib/__tests__/AnchoredOverlay.test.js

@@ -152,9 +152,11 @@ describe('AnchoredOverlay', () => {
     expect(mockCloseCallback).toHaveBeenCalledWith('escape');
   });
   it('should render consistently when open', () => {
-    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
       initiallyOpen: true
     }));
-    expect(anchoredOverlay).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 });

package/lib/__tests__/TextInputWithTokens.test.js

@@ -58,16 +58,7 @@ const LabelledTextInputWithTokens = ({
   tokens: tokens,
   onTokenRemove: onTokenRemove,
   id: "tokenInput"
-}, rest))); // describe('axe test', () => {
-//   it('should have no axe violations', async () => {
-//     const onRemoveMock = jest.fn()
-//     const {container} = HTMLRender(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-//     const results = await axe(container)
-//     expect(results).toHaveNoViolations()
-//     cleanup()
-//   })
-// })
-
+}, rest)));
 
 jest.useFakeTimers();
 describe('TextInputWithTokens', () => {

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

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

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

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