@pingux/astro 2.236.0 → 2.237.1-alpha.0

package/lib/cjs/components/Badge/Convenience/ConvenienceBadges.stories.js

@@ -18,7 +18,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _uuid = require("uuid");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
 var _index = require("../../../index");
-var _figmaLinks = require("../../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../../utils/designUtils/figmaLinks");
 var _react2 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var _default = exports["default"] = {

package/lib/cjs/components/Badge/Convenience/DefaultBadge.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const DefaultBadge: React.ForwardRefExoticComponent<import("../../..").BadgeConvenienceProps & React.RefAttributes<HTMLDivElement>>;
+export default DefaultBadge;

package/lib/cjs/components/Badge/Convenience/ErrorCalloutBadge.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ErrorCalloutBadge: React.ForwardRefExoticComponent<import("../../..").BadgeConvenienceProps & React.RefAttributes<HTMLDivElement>>;
+export default ErrorCalloutBadge;

package/lib/cjs/components/Badge/Convenience/InfoCalloutBadge.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const InfoCalloutBadge: React.ForwardRefExoticComponent<import("../../..").BadgeConvenienceProps & React.RefAttributes<HTMLDivElement>>;
+export default InfoCalloutBadge;

package/lib/cjs/components/Badge/Convenience/RemovableBadge.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RemovableBadgeProps } from '../../../types';
+declare const RemovableBadge: React.ForwardRefExoticComponent<RemovableBadgeProps & React.RefAttributes<HTMLDivElement>>;
+export default RemovableBadge;

package/lib/cjs/components/Badge/Convenience/RemovableBadge.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _index = require("../../../index");
 var _react2 = require("@emotion/react");
 var _excluded = ["id", "isInverted", "label", "onClose"];
@@ -40,14 +39,4 @@ var RemovableBadge = /*#__PURE__*/_react["default"].forwardRef(function (props,
     }
   })));
 });
-RemovableBadge.propTypes = {
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: _propTypes["default"].string,
-  /** Defines style of RemovableBadge */
-  isInverted: _propTypes["default"].bool,
-  /** The label of the RemovableBadge. */
-  label: _propTypes["default"].string,
-  /** The function to close the RemovableBadge */
-  onClose: _propTypes["default"].func
-};
 var _default = exports["default"] = RemovableBadge;

package/lib/cjs/components/Badge/Convenience/SuccessCalloutBadge.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SuccessCalloutBadge: React.ForwardRefExoticComponent<import("../../..").BadgeConvenienceProps & React.RefAttributes<HTMLDivElement>>;
+export default SuccessCalloutBadge;

package/lib/cjs/components/Badge/Convenience/WarningCalloutBadge.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const WarningCalloutBadge: React.ForwardRefExoticComponent<import("../../..").BadgeConvenienceProps & React.RefAttributes<HTMLDivElement>>;
+export default WarningCalloutBadge;

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

@@ -77,7 +77,7 @@ var Disabled = exports.Disabled = function Disabled(args) {
 };
 var NoVisibleLabel = exports.NoVisibleLabel = function NoVisibleLabel(args) {
   return (0, _react2.jsx)(_index.SwitchField, (0, _extends2["default"])({}, args, {
-    "aria-label": "my-label",
+    "aria-label": "Non-visible-label",
     value: "my-switch"
   }));
 };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.d.ts

@@ -113,6 +113,10 @@ declare const _default: {
         };
     };
     switch: {
+        container: {
+            borderColor: string;
+            backgroundColor: string;
+        };
         thumb: {
             '&.is-selected': {
                 bg: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.js

@@ -94,9 +94,13 @@ var selectOption = {
   }
 };
 var switchable = {
+  container: {
+    borderColor: 'gray-800',
+    backgroundColor: 'gray-900'
+  },
   thumb: {
     '&.is-selected': {
-      bg: 'black'
+      bg: 'white'
     }
   }
 };

package/lib/cjs/styles/themes/next-gen/forms.d.ts

@@ -1214,10 +1214,12 @@ declare const _default: {
     switch: {
         container: {
             minWidth: string;
+            mr: string;
             color: string;
             bg: string;
             border: string;
             borderColor: string;
+            backgroundColor: string;
             borderRadius: number;
             '&.is-selected': {
                 bg: string;

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -2025,10 +2025,12 @@ declare const _default: {
         switch: {
             container: {
                 minWidth: string;
+                mr: string;
                 color: string;
                 bg: string;
                 border: string;
                 borderColor: string;
+                backgroundColor: string;
                 borderRadius: number;
                 '&.is-selected': {
                     bg: string;

package/lib/cjs/styles/themes/next-gen/variants/switch.d.ts

@@ -1,10 +1,12 @@
 export declare const switchable: {
     container: {
         minWidth: string;
+        mr: string;
         color: string;
         bg: string;
         border: string;
         borderColor: string;
+        backgroundColor: string;
         borderRadius: number;
         '&.is-selected': {
             bg: string;

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

@@ -7,12 +7,14 @@ _Object$defineProperty(exports, "__esModule", {
 exports.switchable = void 0;
 var switchable = exports.switchable = {
   container: {
-    minWidth: '32px',
+    minWidth: '28px',
+    mr: '12px',
     color: 'neutral.80',
-    bg: 'backgroundBase',
+    bg: 'gray-400',
     border: '1px solid',
-    borderColor: 'neutral.80',
-    borderRadius: 9999,
+    borderColor: 'gray-400',
+    backgroundColor: 'gray-400',
+    borderRadius: 14,
     '&.is-selected': {
       bg: 'active',
       borderColor: 'active'
@@ -21,23 +23,23 @@ var switchable = exports.switchable = {
   thumbContainer: {
     bg: 'transparent',
     border: 'none',
-    width: '32px',
+    width: '28px',
     height: 16,
-    py: '3px',
-    px: '3px',
+    py: '2px',
+    px: '2px',
     'label.is-selected &': {
       bg: 'transparent'
     }
   },
   thumb: {
-    bg: 'gray-500',
-    minHeight: 10,
-    maxHeight: 10,
-    width: 10,
+    bg: 'white',
+    minHeight: 12,
+    maxHeight: 12,
+    width: 12,
     border: 'none',
     '&.is-selected': {
       bg: 'white',
-      transform: 'translateX(15px)'
+      transform: 'translateX(12px)'
     }
   }
 };

package/lib/cjs/types/badge.d.ts

@@ -4,6 +4,8 @@ import { DOMAttributes } from './shared';
 import { TextProps } from './text';
 export type BadgeHelpHintProps = Pick<HelpHintProps, 'align' | 'arrowCrossOffset' | 'closeDelay' | 'crossOffset' | 'direction' | 'hasNoArrow' | 'isDarkMode' | 'isNotFlippable' | 'offset' | 'popoverProps' | 'width'>;
 export interface BadgeProps extends DOMAttributes {
+    /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+    id?: string;
     /** The text color of the badge. */
     textColor?: string | object;
     /** The background color of the box. */
@@ -30,3 +32,16 @@ export interface BadgeProps extends DOMAttributes {
     /** Inline styling prop for item */
     sx?: ThemeUICSSObject;
 }
+export type BadgeConvenienceProps = Omit<BadgeProps, 'variant' | 'slots'>;
+export type CalloutBadgeProps = BadgeConvenienceProps;
+export type DefaultBadgeProps = BadgeConvenienceProps;
+export interface RemovableBadgeProps extends BadgeConvenienceProps {
+    /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+    id?: string;
+    /** Defines style of RemovableBadge */
+    isInverted?: boolean;
+    /** The label of the RemovableBadge. */
+    label?: string;
+    /** The function to close the RemovableBadge */
+    onClose?: (id: string) => void;
+}

package/lib/components/Badge/Convenience/ConvenienceBadges.stories.js

@@ -7,7 +7,7 @@ import React, { useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import DocsLayout from '../../../../.storybook/storybookDocsLayout';
 import { Box, DefaultBadge, ErrorCalloutBadge, InfoCalloutBadge, RemovableBadge, SuccessCalloutBadge, WarningCalloutBadge } from '../../../index';
-import { FIGMA_LINKS } from '../../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../../utils/designUtils/figmaLinks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Badge/Convenience',

package/lib/components/Badge/Convenience/RemovableBadge.js

@@ -3,7 +3,6 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["id", "isInverted", "label", "onClose"];
 import React from 'react';
 import Clear from '@pingux/mdi-react/CloseIcon';
-import PropTypes from 'prop-types';
 import { Badge, Icon, IconButton } from '../../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var RemovableBadge = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -32,14 +31,4 @@ var RemovableBadge = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   })));
 });
-RemovableBadge.propTypes = {
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: PropTypes.string,
-  /** Defines style of RemovableBadge */
-  isInverted: PropTypes.bool,
-  /** The label of the RemovableBadge. */
-  label: PropTypes.string,
-  /** The function to close the RemovableBadge */
-  onClose: PropTypes.func
-};
 export default RemovableBadge;

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

@@ -67,7 +67,7 @@ export var Disabled = function Disabled(args) {
 };
 export var NoVisibleLabel = function NoVisibleLabel(args) {
   return ___EmotionJSX(SwitchField, _extends({}, args, {
-    "aria-label": "my-label",
+    "aria-label": "Non-visible-label",
     value: "my-switch"
   }));
 };

package/lib/styles/themeOverrides/nextGenDarkMode/variants/forms.js

@@ -87,9 +87,13 @@ var selectOption = {
   }
 };
 var switchable = {
+  container: {
+    borderColor: 'gray-800',
+    backgroundColor: 'gray-900'
+  },
   thumb: {
     '&.is-selected': {
-      bg: 'black'
+      bg: 'white'
     }
   }
 };

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

@@ -1,11 +1,13 @@
 export var switchable = {
   container: {
-    minWidth: '32px',
+    minWidth: '28px',
+    mr: '12px',
     color: 'neutral.80',
-    bg: 'backgroundBase',
+    bg: 'gray-400',
     border: '1px solid',
-    borderColor: 'neutral.80',
-    borderRadius: 9999,
+    borderColor: 'gray-400',
+    backgroundColor: 'gray-400',
+    borderRadius: 14,
     '&.is-selected': {
       bg: 'active',
       borderColor: 'active'
@@ -14,23 +16,23 @@ export var switchable = {
   thumbContainer: {
     bg: 'transparent',
     border: 'none',
-    width: '32px',
+    width: '28px',
     height: 16,
-    py: '3px',
-    px: '3px',
+    py: '2px',
+    px: '2px',
     'label.is-selected &': {
       bg: 'transparent'
     }
   },
   thumb: {
-    bg: 'gray-500',
-    minHeight: 10,
-    maxHeight: 10,
-    width: 10,
+    bg: 'white',
+    minHeight: 12,
+    maxHeight: 12,
+    width: 12,
     border: 'none',
     '&.is-selected': {
       bg: 'white',
-      transform: 'translateX(15px)'
+      transform: 'translateX(12px)'
     }
   }
 };

package/package.json

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