@pingux/astro 2.84.0 → 2.85.0-alpha.15

package/lib/components/SwitchField/SwitchField.js

@@ -8,54 +8,32 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "controlProps"];
+var _excluded = ["label", "helperText", "isDefaultSelected", "isDisabled", "status", "controlProps"];
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-/* eslint-disable no-unused-vars */
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { useSwitch } from 'react-aria';
 import { useToggleState } from 'react-stately';
 import { usePress } from '@react-aria/interactions';
 import omit from 'lodash/omit';
 import { Box, FieldHelperText, Label, Switch } from '../..';
-import { useField, usePropWarning } from '../../hooks';
+import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
-import { statusDefaultProp } from '../../utils/docUtils/statusProp';
-import { switchFieldPropTypes } from './switchFieldAttributes';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'SwitchField';
 var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _inputProps$checked;
   var label = props.label,
     helperText = props.helperText,
     isDefaultSelected = props.isDefaultSelected,
-    isSelected = props.isSelected,
-    onChange = props.onChange,
-    value = props.value,
-    name = props.name,
-    id = props.id,
-    _props$isDisabled = props.isDisabled,
-    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-    _props$isReadOnly = props.isReadOnly,
-    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
-    _props$isRequired = props.isRequired,
-    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-    _props$hasAutoFocus = props.hasAutoFocus,
-    hasAutoFocus = _props$hasAutoFocus === void 0 ? false : _props$hasAutoFocus,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    onFocusChange = props.onFocusChange,
-    onKeyDown = props.onKeyDown,
-    onKeyUp = props.onKeyUp,
+    isDisabled = props.isDisabled,
     status = props.status,
     controlProps = props.controlProps,
     others = _objectWithoutProperties(props, _excluded);
-  var switchRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return switchRef.current;
-  });
+  var switchRef = useLocalOrForwardRef(ref);
   var state = useToggleState(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
@@ -67,11 +45,11 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useSwitch = useSwitch(_objectSpread(_objectSpread({
       children: label
     }, whitelistedProps), {}, {
-      'aria-label': 'switch-field'
+      'aria-label': others['aria-label'] || 'switch-field'
     }), state, switchRef),
     inputProps = _useSwitch.inputProps;
   var statusClasses = {
-    isSelected: inputProps.checked
+    isSelected: (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false
   };
   var _useField = useField(_objectSpread(_objectSpread(_objectSpread({
       statusClasses: statusClasses
@@ -91,11 +69,13 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, fieldLabelProps), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Switch, _extends({
     ref: switchRef,
     inputProps: fieldControlInputProps
-  }, unhandledAriaProps, omit(others, 'data-pendo-id')))), label), helperText && ___EmotionJSX(FieldHelperText, {
+  }, unhandledAriaProps, omit(others, 'data-pendo-id', 'aria-label')))), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = switchFieldPropTypes;
-SwitchField.defaultProps = _objectSpread({}, statusDefaultProp);
+SwitchField.defaultProps = {
+  status: statuses.DEFAULT,
+  isDisabled: false
+};
 SwitchField.displayName = displayName;
 export default SwitchField;

package/lib/components/SwitchField/SwitchField.stories.js

@@ -47,7 +47,9 @@ export var Controlled = function Controlled() {
   return ___EmotionJSX(SwitchField, {
     isSelected: isSelected,
     label: "Controlled",
-    onChange: setIsSelected,
+    onChange: function onChange() {
+      return setIsSelected(!isSelected);
+    },
     value: "my-switch"
   });
 };
@@ -79,7 +81,7 @@ export var Required = function Required() {
   });
 };
 export var WithTooltip = function WithTooltip() {
-  var tooltipTrigger = useRef();
+  var tooltipTrigger = useRef(null);
   return ___EmotionJSX(TooltipTrigger, {
     crossOffset: 15,
     offset: 20,

package/lib/components/SwitchField/switchFieldAttributes.js

@@ -11,13 +11,8 @@ var _context;
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import PropTypes from 'prop-types';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { booleanArg, docArgTypes, funcArg } from '../../utils/docUtils/docArgTypes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 var descriptions = {
   className: 'A list of class names to apply to the input element.',
   hasAutoFocus: 'Whether the element should receive focus on render.',
@@ -159,26 +154,4 @@ export var switchFieldArgs = {
   label: 'Example Label',
   value: 'my-switch',
   status: statuses.DEFAULT
-};
-export var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  hasAutoFocus: PropTypes.bool,
-  helperText: PropTypes.node,
-  hintText: PropTypes.string,
-  id: PropTypes.string,
-  isDefaultSelected: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isRequired: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  label: PropTypes.node,
-  name: PropTypes.string,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onFocusChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  status: PropTypes.oneOf(_Object$values(statuses)),
-  value: PropTypes.string
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes), statusPropTypes);
+};

package/lib/components/TimeField/TimeField.stories.js

@@ -72,12 +72,12 @@ export var Required = function Required(args) {
   return ___EmotionJSX(TimeField, _extends({}, args, {
     "aria-label": "timefield-default",
     isRequired: true,
-    label: "Example label"
+    label: "Lorem Ipsum"
   }));
 };
 export var WithLabel = function WithLabel(args) {
   return ___EmotionJSX(TimeField, _extends({}, args, {
-    label: "Loren Ipsum",
+    label: "Lorem Ipsum",
     "aria-label": "timefield-default"
   }));
 };

package/lib/styles/themes/next-gen/codeView/codeView.js

@@ -85,8 +85,8 @@ var nextGenCodeViewWrapper = {
         wordBreak: 'break-all'
       }
     },
-    fontFamily: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace',
-    lineHeight: 1.75
+    fontFamily: 'codeView',
+    lineHeight: 'md'
   },
   '&.has-no-copy-button': {
     pre: {

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,2 +1,2 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'MultivaluesField', 'Text', 'Link', 'Card'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/next-gen.js

@@ -15,10 +15,12 @@ import codeView from './codeView/codeView';
 import colors from './colors/colors';
 import buttons from './variants/button';
 import cards from './variants/cards';
+import images from './variants/images';
 import links from './variants/links';
 import { text as newText } from './variants/text';
 import variants, { badges } from './variants/variants';
 import forms from './forms';
+import sizes from './sizes';
 import spacing from './spacing';
 import { fontSizes, fontWeights } from './text';
 import './open_sans.css';
@@ -42,22 +44,13 @@ var nextGenTheme = {
     heading: '"Open Sans", sans-serif',
     codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
-  sizes: {
-    container: {
-      xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
-      sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
-      md: ['100%', '100%', '720px', '960px', '1140px', '1540px'],
-      lg: ['100%', '100%', '100%', '960px', '1140px', '1540px'],
-      xl: ['100%', '100%', '100%', '100%', '1140px', '1540px'],
-      xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
-      fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
-    }
-  },
+  sizes: sizes,
   badges: badges,
   space: spacing,
   links: links,
   cards: cards,
   variants: variants,
+  images: images,
   overrides: {
     codeView: codeView
   }

package/lib/styles/themes/next-gen/sizes.js

@@ -0,0 +1,19 @@
+var avatar = {
+  sm: '24px',
+  md: '34px',
+  lg: '72px',
+  xl: '104px'
+};
+var container = {
+  xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+  sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+  md: ['100%', '100%', '720px', '960px', '1140px', '1540px'],
+  lg: ['100%', '100%', '100%', '960px', '1140px', '1540px'],
+  xl: ['100%', '100%', '100%', '100%', '1140px', '1540px'],
+  xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
+  fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
+};
+export default {
+  avatar: avatar,
+  container: container
+};

package/lib/styles/themes/next-gen/text.js

@@ -1,12 +1,20 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _fontWeights;
+import sizes from './sizes';
+var fontSizeBase = 0.9375;
 export var fontSizes = {
-  'xs': '0.75rem',
+  avatar: {
+    'sm': "calc(".concat(sizes.avatar.sm, " * .4)"),
+    'md': "calc(".concat(sizes.avatar.md, " * .4)"),
+    'lg': "calc(".concat(sizes.avatar.lg, " * .4)"),
+    'xl': "calc(".concat(sizes.avatar.xl, " * .4)")
+  },
+  'xs': "".concat(fontSizeBase * 0.8, "rem"),
   'sm': '0.875rem',
-  'md': '.9375rem',
-  'lg': '1.171875rem',
-  'xl': '1.40625rem',
-  'xx': '1.640625rem',
-  'xxx': '2.109375rem'
+  'md': "".concat(fontSizeBase * 1, "rem"),
+  'lg': "".concat(fontSizeBase * 1.25, "rem"),
+  'xl': "".concat(fontSizeBase * 1.5, "rem"),
+  'xx': "".concat(fontSizeBase * 1.75, "rem"),
+  'xxx': "".concat(fontSizeBase * 2.25, "rem")
 };
 export var fontWeights = (_fontWeights = {}, _defineProperty(_fontWeights, -1, 300), _defineProperty(_fontWeights, 0, 400), _defineProperty(_fontWeights, 1, 400), _defineProperty(_fontWeights, 2, 600), _defineProperty(_fontWeights, 3, 600), _fontWeights);

package/lib/styles/themes/next-gen/variants/cards.js

@@ -1,6 +1,6 @@
 var interactive = {
   boxShadow: 'none',
-  borderRadius: '24px',
+  borderRadius: '1rem',
   border: '1px solid',
   borderColor: 'gray-300',
   transition: 'border-color .15s ease-in',

package/lib/styles/themes/next-gen/variants/images.js

@@ -0,0 +1,4 @@
+var avatar = {};
+export default {
+  avatar: avatar
+};

package/lib/styles/themes/next-gen/variants/links.js

@@ -16,14 +16,14 @@ var nextGen = {
   px: 'md',
   textDecoration: 'none',
   borderRadius: '4px',
-  lineHeight: '22.5px',
+  lineHeight: '1.5',
   minHeight: '22.5px',
   fontFamily: 'standard',
   '&.is-hovered': {
-    color: '#155cba'
+    color: 'blue-600'
   },
   '&.is-pressed': {
-    color: '#155cba'
+    color: 'blue-600'
   }
 };
 var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
@@ -42,7 +42,7 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
     transition: 'background-color .15s ease'
   },
   '&.is-selected': {
-    color: '#155cba',
+    color: 'blue-600',
     '&:before': {
       backgroundColor: 'active_light'
     }

package/lib/styles/themes/next-gen/variants/text.js

@@ -71,6 +71,6 @@ export var text = _objectSpread({
     fontSize: 'sm',
     color: 'gray-500',
     fontFamily: 'standard',
-    lineHeight: '1.75rem'
+    lineHeight: 'md'
   }
 }, hTags);

package/lib/styles/themes/next-gen/variants/variants.js

@@ -239,33 +239,49 @@ var separator = {
     bg: 'gray-300'
   }
 };
-var avatarBase = {
+var avatar = {
+  backgroundColor: 'lightcyan',
+  color: 'darkcyan',
+  cursor: 'pointer',
+  '&.is-orange': {
+    backgroundColor: 'lightorange',
+    color: 'darkorange'
+  },
+  '&.is-green': {
+    backgroundColor: 'lightgreen',
+    color: 'darkgreen'
+  },
+  '&.is-purple': {
+    backgroundColor: 'lightpurple',
+    color: 'darkpurple'
+  },
+  '&.is-pink': {
+    backgroundColor: 'lightpink',
+    color: 'darkpink'
+  },
+  '&.is-red': {
+    backgroundColor: 'lightred',
+    color: 'darkred'
+  },
+  '&.is-yellow': {
+    backgroundColor: 'lightyellow',
+    color: 'darkyellow'
+  },
+  '&.is-cyan': {
+    backgroundColor: 'lightcyan',
+    color: 'darkcyan'
+  },
+  '&.is-teal': {
+    backgroundColor: 'lightteal',
+    color: 'darkteal'
+  },
+  display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',
+  alignItems: 'center',
   justifyContent: 'center',
   fontFamily: 'standard'
 };
-var avatar = {
-  xl: _objectSpread({
-    size: '104px',
-    fontSize: 'calc(104px * .4)'
-  }, avatarBase),
-  lg: _objectSpread(_objectSpread({
-    size: '72px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(72px * .4)'
-  }),
-  md: _objectSpread(_objectSpread({
-    size: '34px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(34px * .4)'
-  }),
-  sm: _objectSpread(_objectSpread({
-    size: '24px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(24px * .4)'
-  })
-};
 var progressBarContainer = {
   backgroundColor: 'gray-200',
   borderRadius: '.5rem',
@@ -305,8 +321,8 @@ var listViewItem = {
     }
   },
   styledContainer: {
-    py: '1rem',
-    px: '1.5rem',
+    py: 'md',
+    px: 'lg',
     bg: 'transparent',
     '&.is-hovered': {
       bg: 'transparent',
@@ -428,8 +444,17 @@ var listView = {
     borderRadius: '16px',
     border: '1px solid',
     borderColor: '#e7eef4',
-    '& > div': {
-      borderRadius: '16px'
+    '& > div > div': {
+      '& > div:first-of-type': {
+        '& > div > div': {
+          borderRadius: '16px 16px 0 0'
+        }
+      },
+      '& > div:last-of-type': {
+        '& > div > div': {
+          borderRadius: ' 0 0 16px 16px'
+        }
+      }
     }
   }
 };

package/lib/types/index.js

@@ -44,6 +44,7 @@ export * from './rockerButtonGroup';
 export * from './scrollBox';
 export * from './separator';
 export * from './shared';
+export * from './switchField';
 export * from './tab';
 export * from './table';
 export * from './tabs';

package/lib/types/switchField.js

@@ -0,0 +1 @@
+export {};

package/package.json

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

package/lib/cjs/recipes/NextGen/DefaultAvatar.stories.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => React.JSX.Element;

package/lib/cjs/recipes/NextGen/DefaultAvatar.stories.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = require("../..");
-var _react2 = require("@emotion/react");
-var _default = {
-  title: 'Next Gen Recipes/Default Avatar'
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _react2.jsx)(_.AstroProvider, {
-    themeOverrides: [_.NextGenTheme]
-  }, (0, _react2.jsx)(_.Box, {
-    isRow: true,
-    gap: "md",
-    alignItems: "center"
-  }, (0, _react2.jsx)(_.Box, {
-    variant: "avatar.sm",
-    backgroundColor: "green-100",
-    color: "green-800"
-  }, "AT"), (0, _react2.jsx)(_.Box, {
-    variant: "avatar.md",
-    backgroundColor: "blue-100",
-    color: "blue-800"
-  }, "LP"), (0, _react2.jsx)(_.Box, {
-    variant: "avatar.lg",
-    backgroundColor: "teal-100",
-    color: "teal-800"
-  }, "WP"), (0, _react2.jsx)(_.Box, {
-    variant: "avatar.xl",
-    backgroundColor: "red-100",
-    color: "red-800"
-  }, "JS")));
-};
-exports.Default = Default;

package/lib/recipes/NextGen/DefaultAvatar.stories.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { AstroProvider, Box, NextGenTheme } from '../..';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Next Gen Recipes/Default Avatar'
-};
-export var Default = function Default() {
-  return ___EmotionJSX(AstroProvider, {
-    themeOverrides: [NextGenTheme]
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "md",
-    alignItems: "center"
-  }, ___EmotionJSX(Box, {
-    variant: "avatar.sm",
-    backgroundColor: "green-100",
-    color: "green-800"
-  }, "AT"), ___EmotionJSX(Box, {
-    variant: "avatar.md",
-    backgroundColor: "blue-100",
-    color: "blue-800"
-  }, "LP"), ___EmotionJSX(Box, {
-    variant: "avatar.lg",
-    backgroundColor: "teal-100",
-    color: "teal-800"
-  }, "WP"), ___EmotionJSX(Box, {
-    variant: "avatar.xl",
-    backgroundColor: "red-100",
-    color: "red-800"
-  }, "JS")));
-};