@pingux/astro 2.202.2-alpha.0 → 2.203.0-alpha.0

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLoading = exports.TextIconButton = exports.Primary = exports.LinkButton = exports.InlineButton = exports.Filter = exports.Disabled = exports.Default = exports.Critical = exports.ColorBlockButton = void 0;
+exports["default"] = exports.WithLoading = exports.TextIconButton = exports.Primary = exports.LinkButton = exports.InlineButton = exports.Filter = exports.Disabled = exports.Default = exports.CriticalLink = exports.Critical = exports.ColorBlockButton = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -75,6 +75,11 @@ Critical.parameters = {
     url: _figmaLinks.FIGMA_LINKS.button.critical
   }
 };
+var CriticalLink = exports.CriticalLink = function CriticalLink(args) {
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
+    variant: "criticalLink"
+  }), "Button Text");
+};
 var InlineButton = exports.InlineButton = function InlineButton(args) {
   return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
     mb: "sm",

package/lib/cjs/components/Button/Buttons.styles.d.ts

@@ -126,6 +126,46 @@ export declare const link: {
     flexShrink: number;
     whiteSpace: string;
 };
+export declare const criticalLink: {
+    color: string;
+    lineHeight: string;
+    textDecoration: string;
+    display: string;
+    justifyContent: string;
+    width: string;
+    '&.is-current': {
+        cursor: string;
+        color: string;
+    };
+    '&.is-focused': {
+        boxShadow: string;
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+    };
+    bg: string;
+    border: string;
+    borderColor: string;
+    height: string;
+    padding: string;
+    '&.is-hovered': {
+        textDecoration: string;
+    };
+    fontSize: string;
+    fontWeight: number;
+    fontFamily: string;
+    overflowWrap: import("../..").overflowWrap;
+    maxWidth: string;
+    wordWrap: import("../..").wordWrap;
+    wordBreak: import("../..").wordBreak;
+    cursor: string;
+    minWidth: string;
+    outline: string;
+    alignItems: string;
+    borderRadius: string;
+    flexShrink: number;
+    whiteSpace: string;
+};
 export declare const selectLink: {
     textDecoration: string;
     '&.is-hovered': {
@@ -724,6 +764,46 @@ declare const _default: {
         flexShrink: number;
         whiteSpace: string;
     };
+    criticalLink: {
+        color: string;
+        lineHeight: string;
+        textDecoration: string;
+        display: string;
+        justifyContent: string;
+        width: string;
+        '&.is-current': {
+            cursor: string;
+            color: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        bg: string;
+        border: string;
+        borderColor: string;
+        height: string;
+        padding: string;
+        '&.is-hovered': {
+            textDecoration: string;
+        };
+        fontSize: string;
+        fontWeight: number;
+        fontFamily: string;
+        overflowWrap: import("../..").overflowWrap;
+        maxWidth: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+        cursor: string;
+        minWidth: string;
+        outline: string;
+        alignItems: string;
+        borderRadius: string;
+        flexShrink: number;
+        whiteSpace: string;
+    };
     listBoxLink: {
         lineHeight: string;
         textDecoration: string;

package/lib/cjs/components/Button/Buttons.styles.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.text = exports.selectLink = exports.quiet = exports.link = exports.focusWithCroppedOutline = exports.defaultHover = exports.defaultFocus = exports.defaultActive = exports["default"] = exports.base = void 0;
+exports.text = exports.selectLink = exports.quiet = exports.link = exports.focusWithCroppedOutline = exports.defaultHover = exports.defaultFocus = exports.defaultActive = exports["default"] = exports.criticalLink = exports.base = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Text = require("../Text/Text.styles");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -181,6 +181,9 @@ var link = exports.link = _objectSpread(_objectSpread({}, text), {}, {
   },
   '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
+var criticalLink = exports.criticalLink = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'critical.bright'
+});
 var selectLink = exports.selectLink = _objectSpread(_objectSpread({}, link), {}, {
   textDecoration: 'none',
   '&.is-hovered': {
@@ -336,6 +339,7 @@ var _default = exports["default"] = {
   inlinePrimaryWithIcon: inlinePrimaryWithIcon,
   inlineWithIcon: inlineWithIcon,
   link: link,
+  criticalLink: criticalLink,
   listBoxLink: listBoxLink,
   paginationMenu: paginationMenu,
   primary: primary,

package/lib/cjs/components/Button/buttonAttributes.js

@@ -21,7 +21,7 @@ var _pressAttributes = require("../../utils/docUtils/pressAttributes");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 // add designer approved variants for devs to use here
-var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
+var variantOptions = ['critical', 'criticalLink', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 var descriptions = {
   children: 'Button text.',
   isDisabled: 'Whether the button is disabled.',

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

@@ -189,6 +189,19 @@ declare const buttons: {
             outline: string;
         };
     };
+    criticalLink: {
+        color: any;
+        '&.is-pressed': {
+            textDecoration: string;
+            outline: string;
+            color: string;
+        };
+        '&.is-focused': {
+            textDecoration: string;
+            color: string;
+            outline: string;
+        };
+    };
     iconButtons: {
         base: {
             path: {

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

@@ -290,6 +290,19 @@ var buttons = {
       outline: 'none'
     }
   },
+  criticalLink: {
+    color: _onyxTokens.astroTokensDark.color.red[400],
+    '&.is-pressed': {
+      textDecoration: 'underline',
+      outline: 'none',
+      color: _chromaJs["default"].mix(_onyxTokens.astroTokensDark.color.red[500], 'white', 0.45, 'rgb').hex()
+    },
+    '&.is-focused': {
+      textDecoration: 'underline',
+      color: _chromaJs["default"].mix(_onyxTokens.astroTokensDark.color.red[500], 'white', 0.3, 'rgb').hex(),
+      outline: 'none'
+    }
+  },
   iconButtons: iconButtons,
   searchNavTabLabel: searchNavTabLabel,
   modalCloseButton: modalCloseButton,

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

@@ -794,6 +794,22 @@ declare const _default: {
                 outline: string;
             };
         };
+        criticalLink: {
+            color: string;
+            '&.is-pressed': {
+                textDecoration: string;
+                outline: string;
+            };
+            transition: string;
+            fontSize: string;
+            textDecoration: string;
+            px: string;
+            py: string;
+            '&.is-focused': {
+                textDecoration: string;
+                outline: string;
+            };
+        };
         listBoxLink: {
             color: string;
             transition: string;

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

@@ -490,6 +490,22 @@ declare const buttons: {
             outline: string;
         };
     };
+    criticalLink: {
+        color: string;
+        '&.is-pressed': {
+            textDecoration: string;
+            outline: string;
+        };
+        transition: string;
+        fontSize: string;
+        textDecoration: string;
+        px: string;
+        py: string;
+        '&.is-focused': {
+            textDecoration: string;
+            outline: string;
+        };
+    };
     listBoxLink: {
         color: string;
         transition: string;

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

@@ -249,6 +249,13 @@ var link = {
     outline: 'none'
   }
 };
+var criticalLink = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'critical.bright',
+  '&.is-pressed': {
+    textDecoration: 'underline',
+    outline: 'none'
+  }
+});
 var selectLink = _objectSpread(_objectSpread({}, link), {}, {
   textDecoration: 'none',
   px: '0',
@@ -628,6 +635,7 @@ var buttons = {
   searchNavTabLabel: searchNavTabLabel,
   outlineCritical: outlineCritical,
   link: link,
+  criticalLink: criticalLink,
   listBoxLink: listBoxLink,
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,

package/lib/components/Button/Button.stories.js

@@ -68,6 +68,11 @@ Critical.parameters = {
     url: FIGMA_LINKS.button.critical
   }
 };
+export var CriticalLink = function CriticalLink(args) {
+  return ___EmotionJSX(Button, _extends({}, args, {
+    variant: "criticalLink"
+  }), "Button Text");
+};
 export var InlineButton = function InlineButton(args) {
   return ___EmotionJSX(Box, null, ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",

package/lib/components/Button/Buttons.styles.js

@@ -174,6 +174,9 @@ export var link = _objectSpread(_objectSpread({}, text), {}, {
   },
   '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
+export var criticalLink = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'critical.bright'
+});
 export var selectLink = _objectSpread(_objectSpread({}, link), {}, {
   textDecoration: 'none',
   '&.is-hovered': {
@@ -329,6 +332,7 @@ export default {
   inlinePrimaryWithIcon: inlinePrimaryWithIcon,
   inlineWithIcon: inlineWithIcon,
   link: link,
+  criticalLink: criticalLink,
   listBoxLink: listBoxLink,
   paginationMenu: paginationMenu,
   primary: primary,

package/lib/components/Button/buttonAttributes.js

@@ -14,7 +14,7 @@ import { booleanArg } from '../../utils/docUtils/docArgTypes';
 import { onHoverArgTypes } from '../../utils/docUtils/hoverProps';
 import { onPressArgTypes } from '../../utils/docUtils/pressAttributes';
 // add designer approved variants for devs to use here
-var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
+var variantOptions = ['critical', 'criticalLink', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 var descriptions = {
   children: 'Button text.',
   isDisabled: 'Whether the button is disabled.',

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

@@ -283,6 +283,19 @@ var buttons = {
       outline: 'none'
     }
   },
+  criticalLink: {
+    color: astroTokensDark.color.red[400],
+    '&.is-pressed': {
+      textDecoration: 'underline',
+      outline: 'none',
+      color: chroma.mix(astroTokensDark.color.red[500], 'white', 0.45, 'rgb').hex()
+    },
+    '&.is-focused': {
+      textDecoration: 'underline',
+      color: chroma.mix(astroTokensDark.color.red[500], 'white', 0.3, 'rgb').hex(),
+      outline: 'none'
+    }
+  },
   iconButtons: iconButtons,
   searchNavTabLabel: searchNavTabLabel,
   modalCloseButton: modalCloseButton,

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

@@ -242,6 +242,13 @@ var link = {
     outline: 'none'
   }
 };
+var criticalLink = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'critical.bright',
+  '&.is-pressed': {
+    textDecoration: 'underline',
+    outline: 'none'
+  }
+});
 var selectLink = _objectSpread(_objectSpread({}, link), {}, {
   textDecoration: 'none',
   px: '0',
@@ -621,6 +628,7 @@ var buttons = {
   searchNavTabLabel: searchNavTabLabel,
   outlineCritical: outlineCritical,
   link: link,
+  criticalLink: criticalLink,
   listBoxLink: listBoxLink,
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,

package/package.json

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