@pingux/astro 2.82.0-alpha.2 → 2.83.0-alpha.0

package/lib/cjs/components/Checkbox/Checkbox.styles.js

@@ -18,6 +18,12 @@ var checkbox = {
     outline: '1px solid',
     outlineColor: 'focus',
     outlineOffset: '0px'
+  },
+  'input ~ &.is-disabled': {
+    color: 'neutral.80'
+  },
+  '&.is-disabled': {
+    opacity: '1'
   }
 };
 exports.checkbox = checkbox;

package/lib/cjs/components/Checkbox/CheckboxBase.js

@@ -13,7 +13,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireWildcard(require("react"));
 var _visuallyHidden = require("@react-aria/visually-hidden");
 var _lodash = require("lodash");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _themeUi = require("theme-ui");
+var _colors = require("../../styles/colors");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -31,6 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
   }, props));
 });
 var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
+  var color = props.disabled ? _colors.neutral[80] : _colors.active;
   return (0, _react2.jsx)("svg", (0, _extends2["default"])({
     width: "24",
     height: "24",
@@ -46,8 +49,8 @@ var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
     width: "17",
     height: "17",
     rx: "1.5",
-    fill: "#4462ED",
-    stroke: "#4462ED"
+    fill: color,
+    stroke: color
   }), (0, _react2.jsx)("rect", {
     x: "6.5",
     y: "11",
@@ -56,6 +59,10 @@ var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
     fill: "white"
   }));
 };
+IndeterminateCheckboxIcon.propTypes = {
+  // eslint-disable-next-line react/boolean-prop-naming
+  disabled: _propTypes["default"].bool
+};
 
 /**
  * Renders a visually hidden default checkbox since the Theme UI checkbox does not support
@@ -69,7 +76,9 @@ var IndeterminateCheckbox = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   }, props))), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: IndeterminateCheckboxIcon,
     mr: 2
-  }, props)));
+  }, props, {
+    opacity: 1
+  })));
 });
 var CheckboxBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   /* eslint-disable react/prop-types */

package/lib/cjs/components/CheckboxField/CheckboxField.js

@@ -77,12 +77,14 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var helperTextId = (0, _react.useMemo)(function () {
     return (0, _uuid.v4)();
   }, []);
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
-    variant: "forms.label.checkbox"
-  }, fieldLabelProps), (0, _react2.jsx)(_.Checkbox, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_.Checkbox, (0, _extends2["default"])({
     ref: checkboxRef,
     "aria-describedby": helperText && helperTextId
-  }, fieldControlInputProps)), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }, fieldControlInputProps)), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
+    variant: "forms.label.checkbox"
+  }, fieldLabelProps), label)), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     sx: {
       pt: 7

package/lib/cjs/components/CheckboxField/CheckboxField.stories.d.ts

@@ -9,3 +9,4 @@ export declare const Required: StoryFn<CheckboxFieldProps>;
 export declare const HelperText: StoryFn<CheckboxFieldProps>;
 export declare const ExpandableAndToggleableIndeterminate: StoryFn<CheckboxFieldProps>;
 export declare const Indeterminate: StoryFn<CheckboxFieldProps>;
+export declare const Disabled: StoryFn<CheckboxFieldProps>;

package/lib/cjs/components/CheckboxField/CheckboxField.stories.js

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Required = exports.Indeterminate = exports.HelperText = exports.ExpandableAndToggleableIndeterminate = exports.DefaultSelected = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.Required = exports.Indeterminate = exports.HelperText = exports.ExpandableAndToggleableIndeterminate = exports.Disabled = exports.DefaultSelected = exports.Default = exports.Controlled = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/every"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -338,4 +338,19 @@ Indeterminate.parameters = {
       story: 'When a `CheckboxField` is indeterminate, it\'s necessary to control the state in order to determine how it should function when pressed. Here is an example of how to do that.'
     }
   }
-};
+};
+var Disabled = function Disabled() {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.CheckboxField, {
+    isDisabled: true,
+    label: "Disabled"
+  }), (0, _react2.jsx)(_index.CheckboxField, {
+    isDisabled: true,
+    isSelected: true,
+    label: "Disabled"
+  }), (0, _react2.jsx)(_index.CheckboxField, {
+    isDisabled: true,
+    isIndeterminate: true,
+    label: "Disabled"
+  }));
+};
+exports.Disabled = Disabled;

package/lib/cjs/components/Label/Label.styles.js

@@ -75,7 +75,10 @@ label.checkbox = _objectSpread(_objectSpread({}, _Text.text.base), {}, {
   },
   width: 'max-content',
   alignItems: 'center',
-  cursor: 'pointer'
+  cursor: 'pointer',
+  '& .is-disabled': {
+    opacity: '1'
+  }
 });
 label.radioGroup = _objectSpread(_objectSpread({}, label), {}, {
   fontWeight: 1

package/lib/components/Checkbox/Checkbox.styles.js

@@ -11,5 +11,11 @@ export var checkbox = {
     outline: '1px solid',
     outlineColor: 'focus',
     outlineOffset: '0px'
+  },
+  'input ~ &.is-disabled': {
+    color: 'neutral.80'
+  },
+  '&.is-disabled': {
+    opacity: '1'
   }
 };

package/lib/components/Checkbox/CheckboxBase.js

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { omit } from 'lodash';
+import PropTypes from 'prop-types';
 import { Checkbox as ThemeUICheckbox } from 'theme-ui';
+import { active, neutral } from '../../styles/colors';
 import Box from '../Box';
 
 /**
@@ -20,6 +22,7 @@ var DefaultCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
   }, props));
 });
 var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
+  var color = props.disabled ? neutral[80] : active;
   return ___EmotionJSX("svg", _extends({
     width: "24",
     height: "24",
@@ -35,8 +38,8 @@ var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
     width: "17",
     height: "17",
     rx: "1.5",
-    fill: "#4462ED",
-    stroke: "#4462ED"
+    fill: color,
+    stroke: color
   }), ___EmotionJSX("rect", {
     x: "6.5",
     y: "11",
@@ -45,6 +48,10 @@ var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
     fill: "white"
   }));
 };
+IndeterminateCheckboxIcon.propTypes = {
+  // eslint-disable-next-line react/boolean-prop-naming
+  disabled: PropTypes.bool
+};
 
 /**
  * Renders a visually hidden default checkbox since the Theme UI checkbox does not support
@@ -58,7 +65,9 @@ var IndeterminateCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
   }, props))), ___EmotionJSX(Box, _extends({
     as: IndeterminateCheckboxIcon,
     mr: 2
-  }, props)));
+  }, props, {
+    opacity: 1
+  })));
 });
 var CheckboxBase = /*#__PURE__*/forwardRef(function (props, ref) {
   /* eslint-disable react/prop-types */

package/lib/components/CheckboxField/CheckboxField.js

@@ -66,12 +66,14 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperTextId = useMemo(function () {
     return uuid();
   }, []);
-  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, _extends({
-    variant: "forms.label.checkbox"
-  }, fieldLabelProps), ___EmotionJSX(Checkbox, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Checkbox, _extends({
     ref: checkboxRef,
     "aria-describedby": helperText && helperTextId
-  }, fieldControlInputProps)), label), helperText && ___EmotionJSX(FieldHelperText, {
+  }, fieldControlInputProps)), ___EmotionJSX(Label, _extends({
+    variant: "forms.label.checkbox"
+  }, fieldLabelProps), label)), helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     sx: {
       pt: 7

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -319,4 +319,18 @@ Indeterminate.parameters = {
       story: 'When a `CheckboxField` is indeterminate, it\'s necessary to control the state in order to determine how it should function when pressed. Here is an example of how to do that.'
     }
   }
+};
+export var Disabled = function Disabled() {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(CheckboxField, {
+    isDisabled: true,
+    label: "Disabled"
+  }), ___EmotionJSX(CheckboxField, {
+    isDisabled: true,
+    isSelected: true,
+    label: "Disabled"
+  }), ___EmotionJSX(CheckboxField, {
+    isDisabled: true,
+    isIndeterminate: true,
+    label: "Disabled"
+  }));
 };

package/lib/components/Label/Label.styles.js

@@ -70,7 +70,10 @@ label.checkbox = _objectSpread(_objectSpread({}, text.base), {}, {
   },
   width: 'max-content',
   alignItems: 'center',
-  cursor: 'pointer'
+  cursor: 'pointer',
+  '& .is-disabled': {
+    opacity: '1'
+  }
 });
 label.radioGroup = _objectSpread(_objectSpread({}, label), {}, {
   fontWeight: 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.82.0-alpha.2",
+  "version": "2.83.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",