@pingux/astro 1.24.0-alpha.0 → 1.24.0-alpha.3

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

@@ -210,15 +210,15 @@ exports.ControlledWithButton = ControlledWithButton;
 
 var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
   return (0, _react2.jsx)(_.Messages, args, (0, _react2.jsx)(_collections.Item, {
-    bg: "neutral.90",
+    bg: "accent.99",
     color: "active",
     icon: _AccountIcon["default"]
   }, "We have to take a look with this camera."), (0, _react2.jsx)(_collections.Item, {
-    bg: "neutral.90",
+    bg: "accent.99",
     color: "active",
     icon: _AccountIcon["default"]
   }, "Who said that? SURE you can die! You want to die?! Oh yeah, good luck with that. Stop! Do not shoot fire stick in space canoe! Cause explosive decompression!"), (0, _react2.jsx)(_collections.Item, {
-    bg: "neutral.90",
+    bg: "accent.99",
     color: "active",
     icon: _AccountIcon["default"]
   }, "Oh God, what have I done?"));

package/lib/cjs/styles/ContainerSizes.stories.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.ContainerSizes = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Design/Container Sizes'
+};
+exports["default"] = _default;
+var containerArray = [{
+  key: 'xs',
+  size: 'container.xs',
+  bg: 'black',
+  codeString: '<Box size="container.xs" />',
+  widthString: '400px width'
+}, {
+  key: 'sm',
+  size: 'container.sm',
+  bg: 'neutral.10',
+  codeString: '<Box size="container.sm" />',
+  widthString: '550px width'
+}, {
+  key: 'md',
+  size: 'container.md',
+  bg: 'neutral.20',
+  codeString: '<Box size="container.md" />',
+  widthString: '800px width'
+}, {
+  key: 'lg',
+  size: 'container.lg',
+  bg: 'neutral.30',
+  codeString: '<Box size="container.lg" />',
+  widthString: '1200px width'
+}, {
+  key: 'full',
+  size: 'container.full',
+  bg: 'neutral.40',
+  codeString: '<Box size="container.full" />',
+  widthString: '100% width'
+}];
+
+var Container = function Container(props) {
+  var bg = props.bg,
+      codeString = props.codeString,
+      size = props.size,
+      widthString = props.widthString;
+  return (0, _react2.jsx)(_index.Box, {
+    size: size,
+    maxHeight: "250px",
+    bg: bg,
+    p: "md"
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "white",
+    fontWeight: 1,
+    fontSize: "xx"
+  }, size), (0, _react2.jsx)(_index.Text, {
+    color: "white",
+    fontWeight: 0,
+    fontSize: "lg"
+  }, widthString), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Text, {
+    color: "white",
+    fontWeight: 0,
+    fontSize: "lg"
+  }, codeString));
+};
+
+var ContainerSizes = function ContainerSizes() {
+  return (0, _react2.jsx)(_index.Box, {
+    height: "1250px",
+    width: "1600px"
+  }, (0, _react2.jsx)(_index.Text, {
+    fontSize: "lg",
+    fontWeight: "0",
+    width: "800px"
+  }, "For cards, panels, and popup modals, these are our standard widths. They should be max widths, and these elements should shrink based on the amount of space available. (Popup modals should never be LG or Full, and probably never MD as well.)"), (0, _react2.jsx)("br", null), (0, _map["default"])(containerArray).call(containerArray, function (item) {
+    return (0, _react2.jsx)(Container, item);
+  }));
+};
+
+exports.ContainerSizes = ContainerSizes;

package/lib/components/Messages/Messages.stories.js

@@ -157,15 +157,15 @@ export var ControlledWithButton = function ControlledWithButton(args) {
 };
 export var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
   return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
-    bg: "neutral.90",
+    bg: "accent.99",
     color: "active",
     icon: AccountIcon
   }, "We have to take a look with this camera."), ___EmotionJSX(Item, {
-    bg: "neutral.90",
+    bg: "accent.99",
     color: "active",
     icon: AccountIcon
   }, "Who said that? SURE you can die! You want to die?! Oh yeah, good luck with that. Stop! Do not shoot fire stick in space canoe! Cause explosive decompression!"), ___EmotionJSX(Item, {
-    bg: "neutral.90",
+    bg: "accent.99",
     color: "active",
     icon: AccountIcon
   }, "Oh God, what have I done?"));

package/lib/styles/ContainerSizes.stories.js

@@ -0,0 +1,76 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import { Box, Text } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design/Container Sizes'
+};
+var containerArray = [{
+  key: 'xs',
+  size: 'container.xs',
+  bg: 'black',
+  codeString: '<Box size="container.xs" />',
+  widthString: '400px width'
+}, {
+  key: 'sm',
+  size: 'container.sm',
+  bg: 'neutral.10',
+  codeString: '<Box size="container.sm" />',
+  widthString: '550px width'
+}, {
+  key: 'md',
+  size: 'container.md',
+  bg: 'neutral.20',
+  codeString: '<Box size="container.md" />',
+  widthString: '800px width'
+}, {
+  key: 'lg',
+  size: 'container.lg',
+  bg: 'neutral.30',
+  codeString: '<Box size="container.lg" />',
+  widthString: '1200px width'
+}, {
+  key: 'full',
+  size: 'container.full',
+  bg: 'neutral.40',
+  codeString: '<Box size="container.full" />',
+  widthString: '100% width'
+}];
+
+var Container = function Container(props) {
+  var bg = props.bg,
+      codeString = props.codeString,
+      size = props.size,
+      widthString = props.widthString;
+  return ___EmotionJSX(Box, {
+    size: size,
+    maxHeight: "250px",
+    bg: bg,
+    p: "md"
+  }, ___EmotionJSX(Text, {
+    color: "white",
+    fontWeight: 1,
+    fontSize: "xx"
+  }, size), ___EmotionJSX(Text, {
+    color: "white",
+    fontWeight: 0,
+    fontSize: "lg"
+  }, widthString), ___EmotionJSX("br", null), ___EmotionJSX(Text, {
+    color: "white",
+    fontWeight: 0,
+    fontSize: "lg"
+  }, codeString));
+};
+
+export var ContainerSizes = function ContainerSizes() {
+  return ___EmotionJSX(Box, {
+    height: "1250px",
+    width: "1600px"
+  }, ___EmotionJSX(Text, {
+    fontSize: "lg",
+    fontWeight: "0",
+    width: "800px"
+  }, "For cards, panels, and popup modals, these are our standard widths. They should be max widths, and these elements should shrink based on the amount of space available. (Popup modals should never be LG or Full, and probably never MD as well.)"), ___EmotionJSX("br", null), _mapInstanceProperty(containerArray).call(containerArray, function (item) {
+    return ___EmotionJSX(Container, item);
+  }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.24.0-alpha.0",
+  "version": "1.24.0-alpha.3",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",