@primer/components 0.0.0-2021102995710 → 0.0.0-202110303104

package/lib-esm/utils/testing.d.ts

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_high_contrast" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;
@@ -88,17 +88,6 @@ export declare function render(component: React.ReactElement, theme?: {
             additionBg: string;
         };
         searchKeyword: {
-            /**
-             * Render the component (a React.createElement() or JSX expression)
-             * into its intermediate object representation with 'type',
-             * 'props', and 'children' keys
-             *
-             * The returned object can be matched with expect().toEqual(), e.g.
-             *
-             * ```js
-             * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
-             * ```
-             */
             hl: string;
         };
         prettylights: {
@@ -119,15 +108,6 @@ export declare function render(component: React.ReactElement, theme?: {
                 stringRegexp: string;
                 markupList: string;
                 markupHeading: string;
-                /**
-                 * Get the HTML class names rendered by the component instance
-                 * as an array.
-                 *
-                 * ```js
-                 * expect(renderClasses(<div className='a b' />))
-                 *   .toEqual(['a', 'b'])
-                 * ```
-                 */
                 markupItalic: string;
                 markupBold: string;
                 markupDeletedText: string;
@@ -251,13 +231,67 @@ export declare function render(component: React.ReactElement, theme?: {
             gradientOut: string;
         };
         mktg: {
+            success: string;
+            info: string;
+            bgShadeGradient: {
+                top: string;
+                bottom: string;
+            };
             btn: {
-                bg: string;
-                shadow: {
-                    outline: string;
-                    focus: string;
-                    hover: string;
-                    hoverMuted: string;
+                bg: {
+                    top: string;
+                    bottom: string;
+                };
+                bgOverlay: {
+                    top: string;
+                    bottom: string;
+                };
+                text: string;
+                primary: {
+                    bg: {
+                        top: string;
+                        bottom: string;
+                    };
+                    bgOverlay: {
+                        top: string;
+                        bottom: string;
+                    };
+                    text: string;
+                };
+                enterprise: {
+                    bg: {
+                        top: string;
+                        bottom: string;
+                    };
+                    bgOverlay: {
+                        top: string;
+                        bottom: string;
+                    };
+                    text: string;
+                };
+                outline: {
+                    text: string;
+                    border: string;
+                    hover: {
+                        text: string;
+                        border: string;
+                    };
+                    focus: {
+                        border: string;
+                        borderInset: string;
+                    };
+                };
+                dark: {
+                    text: string;
+                    border: string;
+                    hover: {
+                        text: string;
+                        border: string;
+                    };
+                    focus: {
+                        border: string;
+                        borderInset: string;
+                    };
                 };
             };
         };
@@ -561,5 +595,4 @@ interface BehavesAsComponent {
 }
 export declare function behavesAsComponent({ Component, toRender, options }: BehavesAsComponent): void;
 export declare function checkExports(path: string, exports: Record<any, any>): void;
-export declare function checkStoriesForAxeViolations(name: string): void;
 export {};

package/lib-esm/utils/testing.js

@@ -3,8 +3,6 @@ import { promisify } from 'util';
 import renderer from 'react-test-renderer';
 import enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { cleanup, render as HTMLRender } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
 import { ThemeProvider } from '..';
 import { default as defaultTheme } from '../theme';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -221,26 +219,4 @@ export function checkExports(path, exports) {
 
     expect(mod).toSetExports(exports);
   });
-}
-expect.extend(toHaveNoViolations);
-export function checkStoriesForAxeViolations(name) {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const stories = require(`../stories/${name}.stories`); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
-
-
-  const {
-    default: _meta,
-    ...Stories
-  } = stories;
-  Object.values(Stories).map(Story => {
-    if (typeof Story !== 'function') return;
-    it(`story {Story.storyName} should have no axe violations`, async () => {
-      const {
-        container
-      } = HTMLRender( /*#__PURE__*/React.createElement(Story, null));
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-      cleanup();
-    });
-  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021102995710",
+  "version": "0.0.0-202110303104",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -20,7 +20,8 @@
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
     "release": "npm run build && changeset publish",
-    "size": "size-limit"
+    "size": "size-limit",
+    "typecheck": "npx tsc --project tsconfig.json"
   },
   "repository": "primer/react",
   "keywords": [
@@ -44,7 +45,7 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^16.1.0",
-    "@primer/primitives": "7.1.1",
+    "@primer/primitives": "6.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
@@ -113,7 +114,7 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-mdx": "1.15.1",
     "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-primer-react": "0.7.0",
+    "eslint-plugin-primer-react": "0.6.1",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "27.0.4",

package/lib/Checkbox.d.ts

@@ -1,29 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-import { SxProp } from './sx';
-export declare type CheckboxProps = {
-    /**
-     * Apply indeterminate visual appearance to the checkbox
-     */
-    indeterminate?: boolean;
-    /**
-     * Apply inactive visual appearance to the checkbox
-     */
-    disabled?: boolean;
-    /**
-     * Forward a ref to the underlying input element
-     */
-    ref?: React.RefObject<HTMLInputElement>;
-    /**
-     * Indicates whether the checkbox must be checked
-     */
-    required?: boolean;
-    /**
-     * Indicates whether the checkbox validation state
-     */
-    validationStatus?: 'error' | 'success';
-} & InputHTMLAttributes<HTMLInputElement> & SxProp;
-/**
- * An accessible, native checkbox component
- */
-declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
-export default Checkbox;

package/lib/Checkbox.js

@@ -1,64 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _hooks = require("./hooks");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _sx = _interopRequireDefault(require("./sx"));
-
-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 _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 StyledCheckbox = _styledComponents.default.input.withConfig({
-  displayName: "Checkbox__StyledCheckbox",
-  componentId: "i51804-0"
-})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, _sx.default);
-/**
- * An accessible, native checkbox component
- */
-
-
-const Checkbox = /*#__PURE__*/_react.default.forwardRef(({
-  checked,
-  indeterminate,
-  disabled,
-  sx: sxProp,
-  required,
-  validationStatus,
-  ...rest
-}, ref) => {
-  const checkboxRef = (0, _hooks.useProvidedRefOrCreate)(ref);
-  (0, _react.useLayoutEffect)(() => {
-    if (checkboxRef.current) {
-      checkboxRef.current.indeterminate = indeterminate || false;
-    }
-  }, [indeterminate, checked, checkboxRef]);
-  return /*#__PURE__*/_react.default.createElement(StyledCheckbox, _extends({
-    type: "checkbox",
-    disabled: disabled,
-    "aria-disabled": disabled ? 'true' : 'false',
-    ref: ref || checkboxRef,
-    checked: indeterminate ? false : checked,
-    "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false',
-    sx: sxProp,
-    required: required,
-    "aria-required": required ? 'true' : 'false',
-    "aria-invalid": validationStatus === 'error' ? 'true' : 'false'
-  }, rest));
-});
-
-Checkbox.displayName = 'Checkbox';
-var _default = Checkbox;
-exports.default = _default;

package/lib-esm/Checkbox.d.ts

@@ -1,29 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-import { SxProp } from './sx';
-export declare type CheckboxProps = {
-    /**
-     * Apply indeterminate visual appearance to the checkbox
-     */
-    indeterminate?: boolean;
-    /**
-     * Apply inactive visual appearance to the checkbox
-     */
-    disabled?: boolean;
-    /**
-     * Forward a ref to the underlying input element
-     */
-    ref?: React.RefObject<HTMLInputElement>;
-    /**
-     * Indicates whether the checkbox must be checked
-     */
-    required?: boolean;
-    /**
-     * Indicates whether the checkbox validation state
-     */
-    validationStatus?: 'error' | 'success';
-} & InputHTMLAttributes<HTMLInputElement> & SxProp;
-/**
- * An accessible, native checkbox component
- */
-declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
-export default Checkbox;

package/lib-esm/Checkbox.js

@@ -1,44 +0,0 @@
-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 styled from 'styled-components';
-import { useProvidedRefOrCreate } from './hooks';
-import React, { useLayoutEffect } from 'react';
-import sx from './sx';
-const StyledCheckbox = styled.input.withConfig({
-  displayName: "Checkbox__StyledCheckbox",
-  componentId: "i51804-0"
-})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, sx);
-/**
- * An accessible, native checkbox component
- */
-
-const Checkbox = /*#__PURE__*/React.forwardRef(({
-  checked,
-  indeterminate,
-  disabled,
-  sx: sxProp,
-  required,
-  validationStatus,
-  ...rest
-}, ref) => {
-  const checkboxRef = useProvidedRefOrCreate(ref);
-  useLayoutEffect(() => {
-    if (checkboxRef.current) {
-      checkboxRef.current.indeterminate = indeterminate || false;
-    }
-  }, [indeterminate, checked, checkboxRef]);
-  return /*#__PURE__*/React.createElement(StyledCheckbox, _extends({
-    type: "checkbox",
-    disabled: disabled,
-    "aria-disabled": disabled ? 'true' : 'false',
-    ref: ref || checkboxRef,
-    checked: indeterminate ? false : checked,
-    "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false',
-    sx: sxProp,
-    required: required,
-    "aria-required": required ? 'true' : 'false',
-    "aria-invalid": validationStatus === 'error' ? 'true' : 'false'
-  }, rest));
-});
-Checkbox.displayName = 'Checkbox';
-export default Checkbox;