@primer/components 0.0.0-202111114525 → 0.0.0-2021111164412

package/lib/Position.js

@@ -3,13 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Absolute = Absolute;
-exports.Fixed = Fixed;
-exports.Relative = Relative;
-exports.Sticky = Sticky;
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.Sticky = exports.Relative = exports.Fixed = exports.Absolute = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,71 +11,77 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
-var _constants = require("./constants");
-
-var _sx = _interopRequireDefault(require("./sx"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
 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); }
 
+/**
+ * @deprecated Use the Box component instead (i.e. <Position> → <Box>)
+ */
 const Position = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Position",
   componentId: "fla1y3-0"
-})(["", ";", ";"], _constants.POSITION, _sx.default);
-Position.defaultProps = {
-  theme: _theme.default
-};
-Position.propTypes = { ..._Box.default.propTypes,
-  ..._constants.POSITION.propTypes,
-  theme: _propTypes.default.object,
-  ..._sx.default.propTypes
-};
+})([""]);
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
+ */
 var _default = Position; // Absolute
 
 exports.default = _default;
 
-function Absolute(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
+ */
+const Absolute = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "absolute"
+    position: "absolute",
+    ref: ref
   }));
-}
+});
 
-Absolute.displayName = "Absolute";
-Absolute.defaultProps = Position.defaultProps;
-Absolute.propTypes = Position.propTypes; // Fixed
+exports.Absolute = Absolute;
+Absolute.displayName = 'Absolute'; // Fixed
 
-function Fixed(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Fixed> → <Box position="fixed">)
+ */
+const Fixed = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "fixed"
+    position: "fixed",
+    ref: ref
   }));
-}
+});
 
-Fixed.displayName = "Fixed";
-Fixed.defaultProps = Position.defaultProps;
-Fixed.propTypes = Position.propTypes; // Relative
+exports.Fixed = Fixed;
+Fixed.displayName = 'Fixed'; // Relative
 
-function Relative(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Relative> → <Box position="relative">)
+ */
+const Relative = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "relative"
+    position: "relative",
+    ref: ref
   }));
-}
+});
 
-Relative.displayName = "Relative";
-Relative.defaultProps = Position.defaultProps;
-Relative.propTypes = Position.propTypes; // Sticky
+exports.Relative = Relative;
+Relative.displayName = 'Relative'; // Sticky
 
-function Sticky(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Sticky> → <Box position="sticky">)
+ */
+const Sticky = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "sticky"
+    position: "sticky",
+    ref: ref
   }));
-}
+});
 
-Sticky.displayName = "Sticky";
-Sticky.defaultProps = { ...Position.defaultProps,
+exports.Sticky = Sticky;
+Sticky.defaultProps = {
   top: 0,
   zIndex: 1
 };
-Sticky.propTypes = Position.propTypes;
+Sticky.displayName = 'Sticky';

package/lib/ProgressBar.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { WidthProps } from 'styled-system';
+import { SystemCommonProps } from './constants';
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const Bar: import("styled-components").StyledComponent<"span", any, {
+    progress?: string | number | undefined;
+} & SystemCommonProps, never>;
+declare const ProgressContainer: import("styled-components").StyledComponent<"span", any, {
+    inline?: boolean | undefined;
+    barSize?: "small" | "default" | "large" | undefined;
+} & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & SystemCommonProps & SxProp, never>;
+export declare type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>;
+declare function ProgressBar({ progress, bg, theme, ...rest }: ProgressBarProps): JSX.Element;
+declare namespace ProgressBar {
+    var defaultProps: {
+        bg: string;
+        barSize: string;
+    };
+}
+export default ProgressBar;

package/lib/ProgressBar.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
-
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -19,8 +15,6 @@ var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 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); }
@@ -39,7 +33,7 @@ const sizeMap = {
 const ProgressContainer = _styledComponents.default.span.withConfig({
   displayName: "ProgressBar__ProgressContainer",
   componentId: "sc-1tiva13-1"
-})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.gray.2'), (0, _constants.get)('radii.1'), props => sizeMap[props.barSize || 'default'], _constants.COMMON, _styledSystem.width, _sx.default);
+})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.1'), props => sizeMap[props.barSize || 'default'], _constants.COMMON, _styledSystem.width, _sx.default);
 
 function ProgressBar({
   progress,
@@ -58,17 +52,8 @@ function ProgressBar({
 
 ProgressBar.displayName = "ProgressBar";
 ProgressBar.defaultProps = {
-  bg: 'green.5',
-  barSize: 'default',
-  theme: _theme.default
-};
-ProgressBar.propTypes = { ..._constants.COMMON.propTypes,
-  barSize: _propTypes2.default.oneOf(['small', 'default', 'large']),
-  inline: _propTypes2.default.bool,
-  progress: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-  ..._sx.default.propTypes,
-  theme: _propTypes2.default.object,
-  width: _propTypes.default.layout.width
+  bg: 'success.emphasis',
+  barSize: 'default'
 };
 var _default = ProgressBar;
 exports.default = _default;

package/lib/RadioInputField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ToggleInputFieldProps } from './_InputField/ToggleInputField';
+declare const _default: React.FC<ToggleInputFieldProps> & {
+    Input: React.FC<React.HTMLProps<HTMLInputElement>>;
+    Caption: React.FC<{}>;
+    Label: React.FC<import("./_InputField/InputFieldLabel").Props>;
+    LeadingVisual: React.FC<{}>;
+};
+export default _default;

package/lib/RadioInputField.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputField = _interopRequireDefault(require("./_InputField/InputField"));
+
+var _slots = require("./_InputField/slots");
+
+var _ToggleInputField = _interopRequireDefault(require("./_InputField/ToggleInputField"));
+
+var _ToggleInputLeadingVisual = _interopRequireDefault(require("./_InputField/ToggleInputLeadingVisual"));
+
+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); }
+
+// TODO: use Primer's checkbox input once it's available
+// https://github.com/github/primer/issues/489
+const RadioInput = props => {
+  return /*#__PURE__*/_react.default.createElement("input", _extends({
+    type: "radio"
+  }, props));
+};
+
+RadioInput.displayName = "RadioInput";
+
+// pulling out `id`, `disabled`, and `required` because those should come from the parent TextInputField component
+const Input = ({
+  id: idProp,
+  required: requiredProp,
+  disabled: disabledProp,
+  ...rest
+}) => {
+  if (idProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  if (disabledProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  if (requiredProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_slots.Slot, {
+    name: "Input"
+  }, ({
+    disabled,
+    id,
+    required,
+    captionId
+  }) => /*#__PURE__*/_react.default.createElement(RadioInput, _extends({
+    "aria-describedby": captionId,
+    id: id,
+    required: required,
+    disabled: disabled
+  }, rest)));
+};
+
+Input.displayName = "Input";
+
+const RadioInputField = props => /*#__PURE__*/_react.default.createElement(_ToggleInputField.default, props);
+
+RadioInputField.displayName = "RadioInputField";
+
+var _default = Object.assign(RadioInputField, {
+  Input,
+  Caption: _InputField.default.Caption,
+  Label: _InputField.default.Label,
+  LeadingVisual: _ToggleInputLeadingVisual.default
+});
+
+exports.default = _default;