@pingux/astro 1.23.0 → 1.24.0-alpha.2

package/lib/cjs/recipes/ConditionalFilter.stories.js

@@ -14,8 +14,6 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
@@ -35,28 +33,6 @@ var _default = {
 };
 exports["default"] = _default;
 
-var BracketSVG = function BracketSVG(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    xmlns: "http://www.w3.org/2000/svg",
-    version: "1.1"
-  }, props), (0, _react2.jsx)("title", null, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 1"), (0, _react2.jsx)("path", {
-    fillRule: "nonzero",
-    fill: "#CACED3",
-    id: "Path",
-    d: "m6, ".concat(props.height - 18, ".89712l0,10c0,2.1422 1.68397,3.89108 3.80036,3.9951l0.19964,0.0049l5,0l0,1l-5,0c-2.76142,0 -5,-2.23858 -5,-5l0,-10l1,0z")
-  }), (0, _react2.jsx)("line", {
-    strokeLinecap: "undefined",
-    strokeLinejoin: "undefined",
-    id: "svg_1",
-    y2: "0",
-    x2: "5.50861",
-    y1: "".concat(props.height - 17),
-    x1: "5.50861",
-    stroke: "#caced3",
-    fill: "none"
-  })));
-};
-
 var Default = function Default() {
   var customChipStyles = {
     '& > span': {
@@ -152,13 +128,7 @@ var Default = function Default() {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       key: item.key
-    }, (0, _react2.jsx)(_index.Box, {
-      mt: "-10px",
-      mr: "-3px"
-    }, (0, _react2.jsx)(BracketSVG, {
-      width: "15",
-      height: "40"
-    })), (0, _react2.jsx)(_index.Box, {
+    }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
       ml: "3px",
       width: "100%"
     }, (0, _react2.jsx)(_index.Box, {
@@ -186,13 +156,9 @@ var Default = function Default() {
     }), (0, _react2.jsx)(_index.Text, null, item.field3))));
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Box, {
-    mt: "-10px",
-    mr: "-3px"
-  }, (0, _react2.jsx)(BracketSVG, {
-    width: "15",
-    height: "80"
-  })), (0, _react2.jsx)(_index.Box, {
+  }, (0, _react2.jsx)(_index.Bracket, {
+    isLast: true
+  }), (0, _react2.jsx)(_index.Box, {
     variant: "forms.input.container",
     borderRadius: "4px",
     p: "sm",
@@ -209,18 +175,14 @@ var Default = function Default() {
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
     ml: "sm"
-  }, (0, _map["default"])(anyConditions).call(anyConditions, function (item) {
+  }, (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
-      mt: "md",
       key: item.key
-    }, (0, _react2.jsx)(_index.Box, {
-      mt: "-25px",
-      mr: "-3px"
-    }, (0, _react2.jsx)(BracketSVG, {
-      width: "15",
-      height: "40"
-    })), (0, _react2.jsx)(_index.Box, {
+    }, (0, _react2.jsx)(_index.Bracket, {
+      isLast: index === anyConditions.length - 1
+    }), (0, _react2.jsx)(_index.Box, {
+      mt: "md",
       variant: "forms.input.container",
       bg: "white",
       isRow: true,

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/cjs/styles/variants/boxes.js

@@ -356,8 +356,14 @@ var floatLabelWrapper = {
   left: '3px',
   zIndex: 2
 };
+var bracketBase = {
+  width: '15px',
+  pl: '5px',
+  position: 'relative'
+};
 var _default = {
   base: base,
+  bracketBase: bracketBase,
   card: card,
   chip: chip,
   countChip: countChip,

package/lib/components/Bracket/Bracket.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["isLast", "color"];
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '../../index';
+import { line } from '../../styles/colors';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
+  var isLast = props.isLast,
+      color = props.color,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var bracketRef = useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return bracketRef.current;
+  });
+  return ___EmotionJSX(Box, _extends({
+    variant: "boxes.bracketBase"
+  }, others), !isLast && ___EmotionJSX(Box, {
+    width: 15,
+    sx: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0
+    }
+  }, ___EmotionJSX("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    preserveAspectRatio: "none",
+    viewBox: "0 0 10 10",
+    style: {
+      flexGrow: 1
+    },
+    "data-testid": "isLastLayer"
+  }, ___EmotionJSX("title", null, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 3"), ___EmotionJSX("line", {
+    strokeLinecap: "undefined",
+    strokeLinejoin: "undefined",
+    y2: "0",
+    x2: "0",
+    y1: "10",
+    x1: "0",
+    stroke: color,
+    fill: "none"
+  })))), ___EmotionJSX(Box, {
+    flexBasis: "50%"
+  }, ___EmotionJSX("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    preserveAspectRatio: "none",
+    viewBox: "0 0 10 10",
+    style: {
+      flexGrow: 1
+    }
+  }, ___EmotionJSX("title", null, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 1"), ___EmotionJSX("line", {
+    strokeLinecap: "undefined",
+    strokeLinejoin: "undefined",
+    y2: "0",
+    x2: "0",
+    y1: "10",
+    x1: "0",
+    stroke: color,
+    fill: "none"
+  }))), ___EmotionJSX("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    height: "15"
+  }, ___EmotionJSX("title", null, "bracket-fill"), ___EmotionJSX("g", {
+    transform: "translate(-1, 0)"
+  }, ___EmotionJSX("title", null, "Layer 2"), ___EmotionJSX("path", {
+    fill: "none",
+    stroke: color,
+    d: "M1 0C1 2.5 1 8 1 10C1 12.5 3 14.5 5.5 14.5C7.1 14.5 9.33333 14.5 10.5 14.5"
+  })))));
+});
+Bracket.defaultProps = {
+  color: line.light
+};
+Bracket.propTypes = {
+  /** A prop to set the strokes color. */
+  color: PropTypes.string,
+
+  /** Whether or not the bracket is the last in a series of brackets. */
+  isLast: PropTypes.bool
+};
+export default Bracket;

package/lib/components/Bracket/Bracket.stories.js

@@ -0,0 +1,70 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import { Box, Bracket, Chip, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Bracket',
+  component: Bracket
+};
+export var Default = function Default() {
+  var anyConditions = [{
+    field1: 'Group',
+    field3: 'Marketing',
+    key: 'Group1Field'
+  }, {
+    field1: 'Group',
+    field3: 'UX Team',
+    key: 'Group2Field'
+  }];
+  var customChipStyles = {
+    '& > span': {
+      textTransform: 'none',
+      fontWeight: '500'
+    },
+    minWidth: '65px',
+    'z-index': '1'
+  };
+  return ___EmotionJSX(Box, {
+    p: "md",
+    ml: "sm",
+    bg: "background"
+  }, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Chip, {
+    label: "Any",
+    bg: "neutral.20",
+    mr: "sm",
+    sx: customChipStyles,
+    alignSelf: "center"
+  }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      key: item.key
+    }, ___EmotionJSX(Bracket, {
+      isLast: index === anyConditions.length - 1
+    }), ___EmotionJSX(Box, {
+      mt: "md",
+      variant: "forms.input.container",
+      bg: "white",
+      isRow: true,
+      alignItems: "center",
+      borderRadius: "4px",
+      width: "100%",
+      sx: {
+        '&::after': {
+          bg: 'decorative.4'
+        }
+      }
+    }, ___EmotionJSX(Text, {
+      pl: "md",
+      pr: "sm"
+    }, item.field1), ___EmotionJSX(Chip, {
+      label: "Equals",
+      bg: "accent.90",
+      textColor: "neutral.10",
+      sx: customChipStyles,
+      mr: "sm",
+      alignSelf: "center"
+    }), ___EmotionJSX(Text, null, item.field3)));
+  }));
+};

package/lib/components/Bracket/Bracket.test.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Bracket from '.';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-bracket';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Bracket, _extends({}, defaultProps, props)));
+}; // // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default bracket', function () {
+  getComponent();
+  var bracket = screen.getByTestId(testId);
+  expect(bracket).toBeInTheDocument();
+});
+test('additional svg does not render if isLast=true', function () {
+  getComponent({
+    isLast: true
+  });
+  expect(screen.queryByTestId('isLastLayer')).not.toBeInTheDocument();
+});
+test('additional svg does render if isLast=false', function () {
+  getComponent({
+    isLast: false
+  });
+  expect(screen.queryByTestId('isLastLayer')).toBeInTheDocument();
+});

package/lib/components/Bracket/index.js

@@ -0,0 +1 @@
+export { default } from './Bracket';

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -68,7 +68,6 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: breadcrumbsRef,
     isRow: true,
     sx: {
-      overflow: 'auto',
       paddingInlineStart: 'unset'
     },
     as: "ol"

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/index.js

@@ -17,6 +17,8 @@ export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar';
 export { default as Box } from './components/Box';
 export * from './components/Box';
+export { default as Bracket } from './components/Bracket';
+export * from './components/Bracket';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
 export * from './components/Breadcrumbs';
 export { default as Button } from './components/Button';

package/lib/recipes/ConditionalFilter.stories.js

@@ -1,39 +1,15 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import CreateIcon from 'mdi-react/CreateIcon';
 import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
 import TrashIcon from 'mdi-react/TrashIcon';
-import { Box, Button, Chip, IconButton, Icon, Item, OverlayProvider, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
+import { Box, Bracket, Button, Chip, IconButton, Icon, Item, OverlayProvider, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
 import OverlayPanel from '../components/OverlayPanel';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/ConditionalFilter'
 };
-
-var BracketSVG = function BracketSVG(props) {
-  return ___EmotionJSX("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    version: "1.1"
-  }, props), ___EmotionJSX("title", null, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 1"), ___EmotionJSX("path", {
-    fillRule: "nonzero",
-    fill: "#CACED3",
-    id: "Path",
-    d: "m6, ".concat(props.height - 18, ".89712l0,10c0,2.1422 1.68397,3.89108 3.80036,3.9951l0.19964,0.0049l5,0l0,1l-5,0c-2.76142,0 -5,-2.23858 -5,-5l0,-10l1,0z")
-  }), ___EmotionJSX("line", {
-    strokeLinecap: "undefined",
-    strokeLinejoin: "undefined",
-    id: "svg_1",
-    y2: "0",
-    x2: "5.50861",
-    y1: "".concat(props.height - 17),
-    x1: "5.50861",
-    stroke: "#caced3",
-    fill: "none"
-  })));
-};
-
 export var Default = function Default() {
   var customChipStyles = {
     '& > span': {
@@ -130,13 +106,7 @@ export var Default = function Default() {
     return ___EmotionJSX(Box, {
       isRow: true,
       key: item.key
-    }, ___EmotionJSX(Box, {
-      mt: "-10px",
-      mr: "-3px"
-    }, ___EmotionJSX(BracketSVG, {
-      width: "15",
-      height: "40"
-    })), ___EmotionJSX(Box, {
+    }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
       ml: "3px",
       width: "100%"
     }, ___EmotionJSX(Box, {
@@ -164,13 +134,9 @@ export var Default = function Default() {
     }), ___EmotionJSX(Text, null, item.field3))));
   }), ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Box, {
-    mt: "-10px",
-    mr: "-3px"
-  }, ___EmotionJSX(BracketSVG, {
-    width: "15",
-    height: "80"
-  })), ___EmotionJSX(Box, {
+  }, ___EmotionJSX(Bracket, {
+    isLast: true
+  }), ___EmotionJSX(Box, {
     variant: "forms.input.container",
     borderRadius: "4px",
     p: "sm",
@@ -187,18 +153,14 @@ export var Default = function Default() {
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "sm"
-  }, _mapInstanceProperty(anyConditions).call(anyConditions, function (item) {
+  }, _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
     return ___EmotionJSX(Box, {
       isRow: true,
-      mt: "md",
       key: item.key
-    }, ___EmotionJSX(Box, {
-      mt: "-25px",
-      mr: "-3px"
-    }, ___EmotionJSX(BracketSVG, {
-      width: "15",
-      height: "40"
-    })), ___EmotionJSX(Box, {
+    }, ___EmotionJSX(Bracket, {
+      isLast: index === anyConditions.length - 1
+    }), ___EmotionJSX(Box, {
+      mt: "md",
       variant: "forms.input.container",
       bg: "white",
       isRow: true,

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/lib/styles/variants/boxes.js

@@ -336,8 +336,14 @@ var floatLabelWrapper = {
   left: '3px',
   zIndex: 2
 };
+var bracketBase = {
+  width: '15px',
+  pl: '5px',
+  position: 'relative'
+};
 export default {
   base: base,
+  bracketBase: bracketBase,
   card: card,
   chip: chip,
   countChip: countChip,

package/package.json

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