@primer/components 32.1.0 → 33.0.0-rc.b495ba4a

package/lib/__tests__/useSafeTimeout.test.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _useSafeTimeout = _interopRequireDefault(require("../hooks/useSafeTimeout"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+test('should call callback after time', async () => {
+  const {
+    result,
+    waitFor
+  } = (0, _reactHooks.renderHook)(() => (0, _useSafeTimeout.default)());
+  const mockFunction = jest.fn();
+  result.current.safeSetTimeout(mockFunction, 300);
+  await waitFor(() => expect(mockFunction).toHaveBeenCalled());
+});
+test('should clear timeouts when safeClearTimeout is called', () => {
+  jest.useFakeTimers();
+  jest.spyOn(global, 'clearTimeout');
+  const {
+    result
+  } = (0, _reactHooks.renderHook)(() => (0, _useSafeTimeout.default)());
+  const mockFunction = jest.fn();
+  const timeoutId = result.current.safeSetTimeout(mockFunction, 300);
+  result.current.safeClearTimeout(timeoutId);
+  expect(clearTimeout).toHaveBeenCalledTimes(1);
+  expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId);
+});
+test('should clear timeouts when the component is unmounted', () => {
+  jest.useFakeTimers();
+  jest.spyOn(global, 'clearTimeout');
+  const {
+    result,
+    unmount
+  } = (0, _reactHooks.renderHook)(() => (0, _useSafeTimeout.default)());
+  const mockFunction = jest.fn();
+  const timeoutId = result.current.safeSetTimeout(mockFunction, 300);
+  unmount();
+  expect(clearTimeout).toHaveBeenCalledTimes(1);
+  expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId);
+});

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();
+  });
+});

package/lib/stories/ActionList.stories.js

@@ -0,0 +1,454 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionsStory = ActionsStory;
+exports.SimpleListStory = SimpleListStory;
+exports.SingleSelectListStory = SingleSelectListStory;
+exports.MultiSelectListStory = MultiSelectListStory;
+exports.ComplexListInsetVariantStory = ComplexListInsetVariantStory;
+exports.ComplexListFullVariantStory = ComplexListFullVariantStory;
+exports.HeaderStory = HeaderStory;
+exports.CustomItemChildren = CustomItemChildren;
+exports.SizeStressTestingStory = SizeStressTestingStory;
+exports.LinkItemStory = LinkItemStory;
+exports.DOMPropsStory = DOMPropsStory;
+exports.default = void 0;
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _2 = require("..");
+
+var _ActionList2 = require("../ActionList");
+
+var _Header = require("../ActionList/Header");
+
+var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
+
+var _sx = _interopRequireDefault(require("../sx"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 ActionList = Object.assign(_ActionList2.ActionList, {
+  Header: _Header.Header
+});
+const meta = {
+  title: 'Composite components/ActionList',
+  component: ActionList,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_2.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(Story, null)))],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+};
+var _default = meta;
+exports.default = _default;
+
+const ErsatzOverlay = _styledComponents.default.div.withConfig({
+  displayName: "ActionListstories__ErsatzOverlay",
+  componentId: "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');
+
+function ActionsStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Actions"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    showItemDividers: true,
+    items: [{
+      leadingVisual: _octiconsReact.ServerIcon,
+      text: 'Open current Codespace',
+      description: "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch.",
+      descriptionVariant: 'block'
+    }, {
+      leadingVisual: _octiconsReact.PlusCircleIcon,
+      text: 'Create new Codespace',
+      description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
+      descriptionVariant: 'block'
+    }]
+  })));
+}
+
+ActionsStory.storyName = 'Actions';
+
+function SimpleListStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    items: [{
+      text: 'New file',
+      showDivider: true
+    }, ActionList.Divider, {
+      text: 'Copy link',
+      showDivider: true
+    }, {
+      text: 'Edit file',
+      showDivider: true
+    }, {
+      text: 'Delete file',
+      variant: 'danger',
+      showDivider: true
+    }]
+  })));
+}
+
+SimpleListStory.storyName = 'Simple List';
+const selectListItems = new Array(6).fill(undefined).map((_, i) => {
+  return {
+    text: `Item ${i}`,
+    id: i
+  };
+});
+
+function SingleSelectListStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Single Select List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    items: selectListItems.map((item, index) => ({ ...item,
+      selected: index === 1
+    }))
+  })));
+}
+
+SingleSelectListStory.storyName = 'Single Select';
+
+function MultiSelectListStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Multi Select List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    selectionVariant: "multiple",
+    items: selectListItems.map((item, index) => ({ ...item,
+      selected: index === 1 || index === 3
+    }))
+  })));
+}
+
+MultiSelectListStory.storyName = 'Multi Select';
+
+function ComplexListInsetVariantStory() {
+  const StyledDiv = _styledComponents.default.div.withConfig({
+    displayName: "ActionListstories__StyledDiv",
+    componentId: "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, {
+    groupMetadata: [{
+      groupId: '0'
+    }, {
+      groupId: '1',
+      header: {
+        title: 'Live query',
+        variant: 'filled'
+      }
+    }, {
+      groupId: '2',
+      header: {
+        title: 'Layout',
+        variant: 'subtle'
+      },
+      showItemDividers: true
+    }, {
+      groupId: '3',
+      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
+        style: {
+          fontWeight: 'bold'
+        }
+      }, props))
+    }, {
+      groupId: '4',
+      renderItem: ({
+        leadingVisual: LeadingVisual,
+        ...props
+      }) => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({}, props, {
+        leadingVisual: () => /*#__PURE__*/_react.default.createElement(StyledDiv, {
+          sx: {
+            '&>svg': {
+              fill: 'white'
+            }
+          }
+        }, LeadingVisual && /*#__PURE__*/_react.default.createElement(LeadingVisual, null))
+      })),
+      renderGroup: ({
+        sx: sxProps,
+        ...props
+      }) => /*#__PURE__*/_react.default.createElement(ActionList.Group, _extends({}, props, {
+        sx: { ...sxProps,
+          backgroundColor: 'cornflowerblue',
+          color: 'white'
+        }
+      }))
+    }],
+    items: [{
+      leadingVisual: _octiconsReact.TypographyIcon,
+      text: 'Rename',
+      groupId: '0'
+    }, {
+      leadingVisual: _octiconsReact.VersionsIcon,
+      text: 'Duplicate',
+      description: 'Create a copy',
+      descriptionVariant: 'inline',
+      groupId: '0'
+    }, {
+      leadingVisual: _octiconsReact.SearchIcon,
+      text: 'repo:github/memex,github/github',
+      groupId: '1',
+      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
+        style: {
+          color: 'rebeccapurple'
+        }
+      }, props))
+    }, {
+      leadingVisual: _octiconsReact.NoteIcon,
+      text: 'Table',
+      description: 'Information-dense table optimized for operations across teams',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: _octiconsReact.ProjectIcon,
+      text: 'Board',
+      description: 'Kanban-style board focused on visual states',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: _octiconsReact.FilterIcon,
+      text: 'Save sort and filters to current view',
+      groupId: '3'
+    }, {
+      leadingVisual: _octiconsReact.FilterIcon,
+      text: 'Save sort and filters to new view',
+      groupId: '3'
+    }, {
+      leadingVisual: _octiconsReact.GearIcon,
+      text: 'View settings',
+      groupId: '4'
+    }]
+  })));
+}
+
+ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant';
+
+function ComplexListFullVariantStory() {
+  const StyledDiv = _styledComponents.default.div.withConfig({
+    displayName: "ActionListstories__StyledDiv",
+    componentId: "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, {
+    variant: "full",
+    groupMetadata: [{
+      groupId: '0'
+    }, {
+      groupId: '1',
+      header: {
+        title: 'Live query',
+        variant: 'filled'
+      }
+    }, {
+      groupId: '2',
+      header: {
+        title: 'Layout',
+        variant: 'subtle'
+      }
+    }, {
+      groupId: '3',
+      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
+        style: {
+          fontWeight: 'bold'
+        }
+      }, props))
+    }, {
+      groupId: '4',
+      renderItem: ({
+        leadingVisual: LeadingVisual,
+        ...props
+      }) => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({}, props, {
+        leadingVisual: () => /*#__PURE__*/_react.default.createElement(StyledDiv, {
+          sx: {
+            '&>svg': {
+              fill: 'white'
+            }
+          }
+        }, LeadingVisual && /*#__PURE__*/_react.default.createElement(LeadingVisual, null))
+      })),
+      renderGroup: ({
+        sx: sxProps,
+        ...props
+      }) => /*#__PURE__*/_react.default.createElement(ActionList.Group, _extends({}, props, {
+        sx: { ...sxProps,
+          backgroundColor: 'cornflowerblue',
+          color: 'white'
+        }
+      }))
+    }],
+    items: [{
+      leadingVisual: _octiconsReact.TypographyIcon,
+      text: 'Rename',
+      groupId: '0'
+    }, {
+      leadingVisual: _octiconsReact.VersionsIcon,
+      text: 'Duplicate',
+      groupId: '0'
+    }, {
+      leadingVisual: _octiconsReact.SearchIcon,
+      text: 'repo:github/memex,github/github',
+      groupId: '1',
+      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
+        style: {
+          color: 'rebeccapurple'
+        }
+      }, props))
+    }, {
+      leadingVisual: _octiconsReact.NoteIcon,
+      text: 'Table',
+      description: 'Information-dense table optimized for operations across teams',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: _octiconsReact.ProjectIcon,
+      text: 'Board',
+      description: 'Kanban-style board focused on visual states',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: _octiconsReact.FilterIcon,
+      text: 'Save sort and filters to current view',
+      groupId: '3'
+    }, {
+      leadingVisual: _octiconsReact.FilterIcon,
+      text: 'Save sort and filters to new view',
+      groupId: '3'
+    }, {
+      leadingVisual: _octiconsReact.GearIcon,
+      text: 'View settings',
+      groupId: '4'
+    }]
+  })));
+}
+
+ComplexListFullVariantStory.storyName = 'Complex List — Full Variant';
+
+function HeaderStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Header"), /*#__PURE__*/_react.default.createElement("h2", null, "Filled Variant"), /*#__PURE__*/_react.default.createElement(ActionList.Header, {
+    title: "Layout",
+    variant: "filled"
+  }), /*#__PURE__*/_react.default.createElement("h2", null, "Subtle Variant"), /*#__PURE__*/_react.default.createElement(ActionList.Header, {
+    title: "Layout",
+    variant: "subtle"
+  }));
+}
+
+HeaderStory.storyName = 'Header';
+
+function CustomItemChildren() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Custom Item Children"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    items: [{
+      leadingVisual: _octiconsReact.ArrowRightIcon,
+      children: /*#__PURE__*/_react.default.createElement(_2.Label, {
+        outline: true,
+        borderColor: "success.emphasis"
+      }, "Choose this one"),
+      trailingIcon: _octiconsReact.ArrowLeftIcon
+    }]
+  })));
+}
+
+CustomItemChildren.storyName = 'Custom Item Children';
+
+function SizeStressTestingStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Size Stress Testing"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, {
+    maxWidth: "300px"
+  }, /*#__PURE__*/_react.default.createElement(ActionList, {
+    items: [{
+      leadingVisual: _octiconsReact.ArrowRightIcon,
+      text: 'Block Description.  Long text should wrap',
+      description: 'This description is long, but it is block so it wraps',
+      descriptionVariant: 'block',
+      trailingVisual: _octiconsReact.ArrowLeftIcon,
+      showDivider: true
+    }, {
+      leadingVisual: _octiconsReact.ArrowRightIcon,
+      text: 'Inline Description',
+      description: 'This description gets truncated because it is inline',
+      trailingVisual: _octiconsReact.ArrowLeftIcon,
+      showDivider: true
+    }, {
+      leadingVisual: _octiconsReact.ArrowRightIcon,
+      text: 'Really long text without a description should wrap',
+      trailingIcon: _octiconsReact.ArrowLeftIcon,
+      // backward compatible
+      showDivider: true
+    }]
+  })));
+}
+
+SizeStressTestingStory.storyName = 'Size Stress Testing';
+const ReactRouterLikeLink = /*#__PURE__*/(0, _react.forwardRef)(({
+  to,
+  ...props
+}, ref) => {
+  // eslint-disable-next-line jsx-a11y/anchor-has-content
+  return /*#__PURE__*/_react.default.createElement("a", _extends({
+    ref: ref,
+    href: to
+  }, props));
+});
+const NextJSLikeLink = /*#__PURE__*/(0, _react.forwardRef)(({
+  href,
+  children
+}, ref) => {
+  const child = _react.default.Children.only(children);
+
+  const childProps = {
+    ref,
+    href
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, childProps) : null);
+});
+
+function LinkItemStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    items: [{
+      text: 'A. Vanilla action',
+      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
+        onAction: () => alert('hi?')
+      }, props))
+    }, {
+      text: 'B. Vanilla link',
+      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
+        as: "a",
+        href: "/about"
+      }, props))
+    }, {
+      text: 'C. React Router link',
+      renderItem: props => /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
+        as: ReactRouterLikeLink,
+        to: "/about"
+      }, props))
+    }, {
+      text: 'D. NextJS style',
+      renderItem: props => /*#__PURE__*/_react.default.createElement(NextJSLikeLink, {
+        href: "/about"
+      }, /*#__PURE__*/_react.default.createElement(ActionList.Item, _extends({
+        as: "a"
+      }, props)))
+    }]
+  })));
+}
+
+LinkItemStory.storyName = 'List with a link item';
+
+function DOMPropsStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    items: [{
+      text: 'One',
+      onClick: () => alert('Hello')
+    }]
+  })));
+}
+
+DOMPropsStory.storyName = 'List an item input including DOM props';