@pingux/astro 1.42.2-alpha.2 → 1.42.2-alpha.4

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.TextIconButton = exports.InlineButton = exports.FilterButton = exports.Disabled = exports.Default = exports.ColorBlockButton = void 0;
+exports["default"] = exports.TextIconButton = exports.Primary = exports.InlineButton = exports.FilterButton = exports.Disabled = exports.Default = exports.Critical = exports.ColorBlockButton = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -39,7 +39,7 @@ delete variants.ICON;
 delete variants.ICON_BUTTON;
 delete variants.INVERTED; // add designer approved variants for devs to use here
 
-var variantOptions = ['critical', 'danger', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success', 'text'];
+var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 var _default = {
   title: 'Components/Button',
   component: _index.Button,
@@ -162,4 +162,20 @@ var FilterButton = function FilterButton() {
   })));
 };
 
-exports.FilterButton = FilterButton;
+exports.FilterButton = FilterButton;
+
+var Critical = function Critical() {
+  return (0, _react2.jsx)(_index.Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+
+exports.Critical = Critical;
+
+var Primary = function Primary() {
+  return (0, _react2.jsx)(_index.Button, {
+    variant: "primary"
+  }, "Button Text");
+};
+
+exports.Primary = Primary;

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

@@ -20,8 +20,6 @@ require("prismjs/components/prism-powershell");
 
 var _CodeView = _interopRequireDefault(require("./CodeView"));
 
-var _ = require("../..");
-
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 
 var _CodeView2 = _interopRequireDefault(require("./CodeView.mdx"));
@@ -69,21 +67,13 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Text, {
-    sx: {
-      fontWeight: 2
-    }
-  }, "JSON"), (0, _react2.jsx)(_CodeView["default"], args));
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CodeView["default"], args));
 };
 
 exports.Default = Default;
 
 var WithLineNumbers = function WithLineNumbers() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Text, {
-    sx: {
-      fontWeight: 2
-    }
-  }, "JSON"), (0, _react2.jsx)(_CodeView["default"], {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CodeView["default"], {
     hasLineNumbers: true
   }, code));
 };

package/lib/cjs/components/CopyText/CopyButton.js

@@ -43,7 +43,7 @@ var CopyButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "buttons.copy"
   }, (0, _lodash.omit)(props, 'iconProps')), (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     icon: _ContentCopyIcon["default"],
-    size: 15,
+    size: "xs",
     color: "text.secondary"
   }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });

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

@@ -115,7 +115,7 @@ var SVGIcons = function SVGIcons() {
   return (0, _react2.jsx)(_index.Icon, {
     icon: SVGComponent,
     color: "active",
-    size: 40
+    size: "sm"
   });
 };
 

package/lib/cjs/styles/colors.js

@@ -34,7 +34,9 @@ exports.active = active;
 var critical = {
   bright: '#a31300',
   dark: '#a31300',
-  light: '#ffebe7'
+  light: '#ffebe7',
+  primaryDark: _chromaJs["default"].mix('#a31300', '#000000', 0.2).hex(),
+  secondaryDark: _chromaJs["default"].mix('#a31300', '#000000', 0.4).hex()
 };
 exports.critical = critical;
 var success = {

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

@@ -293,7 +293,15 @@ var critical = _objectSpread(_objectSpread({}, base), {}, {
   border: '1px solid',
   borderColor: 'critical.bright',
   color: 'white',
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'critical.primaryDark',
+    borderColor: 'critical.primaryDark'
+  },
+  '&.is-pressed': {
+    bg: 'critical.secondaryDark',
+    borderColor: 'critical.secondaryDark'
+  }
 });
 
 var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {

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

@@ -16,7 +16,7 @@ delete variants.ICON;
 delete variants.ICON_BUTTON;
 delete variants.INVERTED; // add designer approved variants for devs to use here
 
-var variantOptions = ['critical', 'danger', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success', 'text'];
+var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 export default {
   title: 'Components/Button',
   component: Button,
@@ -121,4 +121,14 @@ export var FilterButton = function FilterButton() {
   }, ___EmotionJSX(Icon, {
     icon: FilterIcon
   })));
+};
+export var Critical = function Critical() {
+  return ___EmotionJSX(Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+export var Primary = function Primary() {
+  return ___EmotionJSX(Button, {
+    variant: "primary"
+  }, "Button Text");
 };

package/lib/components/CodeView/CodeView.stories.js

@@ -3,7 +3,6 @@ import React from 'react';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-powershell';
 import CodeView from './CodeView';
-import { Text } from '../..';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import CodeViewReadme from './CodeView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -46,18 +45,10 @@ export default {
   }
 };
 export var Default = function Default(args) {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 2
-    }
-  }, "JSON"), ___EmotionJSX(CodeView, args));
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeView, args));
 };
 export var WithLineNumbers = function WithLineNumbers() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 2
-    }
-  }, "JSON"), ___EmotionJSX(CodeView, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeView, {
     hasLineNumbers: true
   }, code));
 };

package/lib/components/CopyText/CopyButton.js

@@ -13,7 +13,7 @@ var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "buttons.copy"
   }, omit(props, 'iconProps')), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,
-    size: 15,
+    size: "xs",
     color: "text.secondary"
   }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });

package/lib/components/Icon/Icon.stories.js

@@ -81,7 +81,7 @@ export var SVGIcons = function SVGIcons() {
   return ___EmotionJSX(Icon, {
     icon: SVGComponent,
     color: "active",
-    size: 40
+    size: "sm"
   });
 };
 var rowHeadings = ['SVG Size', 'Code Example', 'Icon Example'];

package/lib/styles/colors.js

@@ -14,7 +14,9 @@ export var active = '#4462ED';
 export var critical = {
   bright: '#a31300',
   dark: '#a31300',
-  light: '#ffebe7'
+  light: '#ffebe7',
+  primaryDark: chroma.mix('#a31300', '#000000', 0.2).hex(),
+  secondaryDark: chroma.mix('#a31300', '#000000', 0.4).hex()
 };
 export var success = {
   bright: '#00af18',

package/lib/styles/variants/buttons.js

@@ -271,7 +271,15 @@ var critical = _objectSpread(_objectSpread({}, base), {}, {
   border: '1px solid',
   borderColor: 'critical.bright',
   color: 'white',
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'critical.primaryDark',
+    borderColor: 'critical.primaryDark'
+  },
+  '&.is-pressed': {
+    bg: 'critical.secondaryDark',
+    borderColor: 'critical.secondaryDark'
+  }
 });
 
 var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.42.2-alpha.2",
+  "version": "1.42.2-alpha.4",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",