@pingux/astro 2.18.1-alpha.0 → 2.18.1-alpha.2

package/lib/recipes/ConditionFilter.stories.js

@@ -17,67 +17,77 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Condition Filter'
 };
-var customBadgeStyles = {
-  marginRight: 'sm',
-  '& > span': {
-    fontWeight: 1,
-    textTransform: 'none'
-  },
-  ml: '3px',
-  minWidth: '65px',
-  height: '20px',
-  'z-index': '1'
+var borderBox = {
+  borderColor: 'neutral.80',
+  borderRadius: '3px 4px 4px 3px',
+  borderStyle: 'solid',
+  borderWidth: '1px 1px 1px 0px',
+  width: '100%',
+  '&::after': {
+    bg: 'decorative.4',
+    width: '2px'
+  }
 };
 var sx = {
-  equalBadgeStyles: _objectSpread(_objectSpread({}, customBadgeStyles), {}, {
-    bg: 'accent.95',
-    textColor: 'neutral.10',
-    alignSelf: 'center',
-    height: '21px',
-    minWidth: '51px'
-  }),
-  borderedBoxStyles: {
-    '&::after': {
-      bg: 'decorative.4',
-      width: '2px',
-      display: 'block'
+  badge: {
+    condition: {
+      height: '20px',
+      minWidth: '65px'
     },
-    borderColor: 'neutral.80',
-    borderRadius: '3px 4px 4px 3px',
-    borderStyle: 'solid',
-    borderWidth: '1px 1px 1px 0px',
-    padding: 'sm',
-    width: '100%'
+    equal: {
+      alignSelf: 'center',
+      bg: 'accent.95'
+    }
   },
-  allConditionsBox: {
-    '&::after': {
-      bg: 'decorative.4',
-      width: '2px'
+  borderedBoxStyles: _objectSpread(_objectSpread({}, borderBox), {}, {
+    padding: 'sm'
+  }),
+  display: {
+    borderBox: _objectSpread(_objectSpread({}, borderBox), {}, {
+      ml: '20px',
+      mt: 'md',
+      p: 'sm',
+      pl: 0
+    }),
+    bracket: {
+      position: 'absolute',
+      height: '56px'
+    },
+    container: {
+      bg: 'accent.99',
+      maxWidth: '318px',
+      p: 'sm',
+      pl: 0
     },
-    alignItems: 'center',
-    borderRadius: '4px',
-    marginTop: 'md',
-    fontWeight: 1
+    rowBox: {
+      alignItems: 'center',
+      bg: 'white',
+      borderRadius: '4px',
+      fontWeight: 1,
+      marginTop: 'md',
+      minHeight: '25px',
+      ml: '20px',
+      pl: '13px'
+    }
   },
   defaultText: {
-    textTransform: 'none',
     color: 'inherit',
     fontSize: 'sm',
     fontWeight: '3'
-  },
-  textStyles: {
-    pl: 'md',
-    pr: 'sm'
   }
 };
 var allConditions = [{
   field1: 'Family Name',
+  field3: 'Smith',
+  key: 'familyNameField'
+}, {
+  field1: 'Given Name',
   field3: 'John',
-  key: 'FamilyNameField'
+  key: 'givenNameField'
 }, {
-  field1: 'Full Name',
-  field3: 'Alex Smith',
-  key: 'FullNameField'
+  field1: 'Email',
+  field3: 'jsmith@company.com',
+  key: 'emailField'
 }];
 var anyConditions = [{
   field1: 'Group',
@@ -97,122 +107,85 @@ var noneConditions = [{
   field3: 'Banana',
   key: 'Miscellaneous2'
 }];
+var ofTheConditionsAreTrueCopy = ' of the conditions are true';
 export var Display = function Display() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
-    bg: "accent.99",
-    maxWidth: "318px",
-    p: "sm"
-  }, ___EmotionJSX(Box, {
-    isRow: true
-  }), ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(Badge, {
-    label: "All",
-    bg: "decorative.4",
-    sx: customBadgeStyles
-  }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
-    return ___EmotionJSX(Box, {
-      isRow: true,
+  return ___EmotionJSX(Box, {
+    sx: sx.display.container
+  }, ___EmotionJSX(DisplaySectionHeader, null), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
+    return ___EmotionJSX(DisplayRow, {
+      item: item,
       key: item.key
-    }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
-      width: "100%"
-    }, ___EmotionJSX(Box, {
-      variant: "forms.input.fieldControlWrapper",
-      bg: "white",
-      isRow: true,
-      sx: sx.allConditionsBox
-    }, ___EmotionJSX(Text, {
-      sx: sx.textStyles
-    }, item.field1), ___EmotionJSX(Badge, {
-      label: "Equals",
-      sx: sx.equalBadgeStyles,
-      textColor: "neutral.10"
-    }), ___EmotionJSX(Text, null, item.field3))));
+    });
   }), ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
-    variant: "forms.input.fieldControlWrapper",
-    mt: "md",
-    sx: sx.borderedBoxStyles
-  }, ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(Badge, {
-    label: "Any",
-    bg: "decorative.7",
-    sx: customBadgeStyles,
-    alignSelf: "center"
-  }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
+    isRow: true,
     ml: "xs"
-  }, _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
-    return ___EmotionJSX(Box, {
-      isRow: true,
-      key: item.key
-    }, ___EmotionJSX(Bracket, {
-      ml: 0,
-      isLast: index === anyConditions.length - 1
-    }), ___EmotionJSX(Box, {
-      mt: "md",
-      variant: "forms.input.fieldControlWrapper",
-      bg: "white",
-      isRow: true,
-      width: "100%",
-      sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
-        '&::after': {
-          bg: 'decorative.7',
-          width: '2px'
-        }
-      })
-    }, ___EmotionJSX(Text, {
-      sx: sx.textStyles
-    }, item.field1), ___EmotionJSX(Badge, {
-      label: "Equals",
-      textColor: "neutral.10",
-      sx: sx.equalBadgeStyles
-    }), ___EmotionJSX(Text, null, item.field3)));
-  })))), ___EmotionJSX(Box, {
-    isRow: true
   }, ___EmotionJSX(Bracket, {
+    sx: _objectSpread(_objectSpread({}, sx.display.bracket), {}, {
+      height: '148px'
+    }),
     isLast: true
   }), ___EmotionJSX(Box, {
-    variant: "forms.input.fieldControlWrapper",
-    mt: "md",
-    sx: sx.borderedBoxStyles
+    sx: sx.display.borderBox,
+    variant: "forms.input.fieldControlWrapper"
+  }, ___EmotionJSX(DisplaySectionHeader, {
+    badgeColor: "decorative.7",
+    label: "Any"
+  }), _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
+    return ___EmotionJSX(DisplayRow, {
+      barColor: "decorative.7",
+      isLast: index === anyConditions.length - 1,
+      item: item,
+      key: item.key
+    });
+  }))));
+};
+export var DisplayRow = function DisplayRow(_ref) {
+  var _ref$item = _ref.item,
+    item = _ref$item === void 0 ? allConditions[0] : _ref$item,
+    _ref$isLast = _ref.isLast,
+    isLast = _ref$isLast === void 0 ? false : _ref$isLast,
+    _ref$barColor = _ref.barColor,
+    barColor = _ref$barColor === void 0 ? 'decorative.4' : _ref$barColor;
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    ml: "xs"
+  }, ___EmotionJSX(Bracket, {
+    sx: sx.display.bracket,
+    isLast: isLast
+  }), ___EmotionJSX(Box, {
+    width: "100%"
   }, ___EmotionJSX(Box, {
-    isRow: true
+    gap: "sm",
+    isRow: true,
+    sx: _objectSpread(_objectSpread({}, sx.display.rowBox), {}, {
+      '&::after': {
+        bg: barColor,
+        width: '2px'
+      }
+    }),
+    variant: "forms.input.fieldControlWrapper"
+  }, ___EmotionJSX(Text, null, item.field1), ___EmotionJSX(Badge, {
+    label: "Equals",
+    sx: sx.badge.equal,
+    textColor: "neutral.10"
+  }), ___EmotionJSX(Text, null, item.field3))));
+};
+export var DisplaySectionHeader = function DisplaySectionHeader(_ref2) {
+  var _ref2$badgeColor = _ref2.badgeColor,
+    badgeColor = _ref2$badgeColor === void 0 ? 'decorative.4' : _ref2$badgeColor,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'All' : _ref2$label;
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    ml: "sm"
   }, ___EmotionJSX(Badge, {
-    label: "None",
-    bg: "accent.20",
-    sx: customBadgeStyles,
+    bg: badgeColor,
+    label: label,
+    sx: sx.badge.condition
+  }), ___EmotionJSX(Text, {
+    ml: "sm",
     alignSelf: "center"
-  }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
-    ml: "xs"
-  }, _mapInstanceProperty(noneConditions).call(noneConditions, function (item, index) {
-    return ___EmotionJSX(Box, {
-      isRow: true,
-      key: item.key
-    }, ___EmotionJSX(Bracket, {
-      ml: 0,
-      isLast: index === noneConditions.length - 1
-    }), ___EmotionJSX(Box, {
-      mt: "md",
-      variant: "forms.input.fieldControlWrapper",
-      bg: "white",
-      isRow: true,
-      width: "100%",
-      sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
-        '&::after': {
-          bg: 'accent.20',
-          width: '2px'
-        }
-      })
-    }, ___EmotionJSX(Text, {
-      sx: sx.textStyles
-    }, item.field1), ___EmotionJSX(Badge, {
-      label: "Equals",
-      textColor: "neutral.10",
-      sx: sx.equalBadgeStyles
-    }), ___EmotionJSX(Text, null, item.field3)));
-  }))))));
+  }, ofTheConditionsAreTrueCopy));
 };
 export var Edit = function Edit() {
   var trashButton = ___EmotionJSX(IconButton, {
@@ -268,7 +241,7 @@ export var Edit = function Edit() {
     }
   }, ___EmotionJSX(Text, {
     sx: sx.defaultText
-  }, "NONE"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
+  }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
     variant: "inline",
     width: "fit-content",
     role: "button",
@@ -359,7 +332,7 @@ export var Edit = function Edit() {
     }
   }, ___EmotionJSX(Text, {
     sx: sx.defaultText
-  }, "NONE"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
+  }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
     variant: "inline",
     width: "fit-content",
     role: "button",
@@ -455,7 +428,7 @@ export var Edit = function Edit() {
     }
   }, ___EmotionJSX(Text, {
     sx: sx.defaultText
-  }, "NONE"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
+  }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
     variant: "inline",
     width: "fit-content",
     role: "button",

package/package.json

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