@pingux/astro 1.13.0 → 1.14.0-alpha.2

package/lib/recipes/AttributeMappingReadOnlyField.stories.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import CreateIcon from 'mdi-react/CreateIcon';
+import { Box, Chip, IconButton, Text, Icon, Separator, TextField, HelpHint } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/AttributeMappingReadOnlyField'
+};
+export var Default = function Default() {
+  var Row = function Row(props) {
+    var withChip = props.withChip,
+        withTooltip = props.withTooltip,
+        leftValue = props.leftValue,
+        rightValue = props.rightValue;
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      alignItems: "center",
+      mt: "10px"
+    }, ___EmotionJSX(TextField, {
+      isReadOnly: true,
+      value: leftValue,
+      labelProps: {
+        mb: 0
+      },
+      controlProps: {
+        variant: 'input.small',
+        'aria-label': "input ".concat(leftValue),
+        sx: {
+          width: '165px'
+        }
+      }
+    }), ___EmotionJSX(Separator, {
+      sx: {
+        width: '21px',
+        ml: '2px',
+        mr: '2px'
+      }
+    }), ___EmotionJSX(TextField, {
+      isReadOnly: true,
+      value: rightValue,
+      labelProps: {
+        mb: 0
+      },
+      controlProps: {
+        variant: 'input.small',
+        'aria-label': "input ".concat(rightValue),
+        sx: {
+          width: '165px'
+        }
+      }
+    }), withChip && ___EmotionJSX(Chip, {
+      label: "Required",
+      sx: {
+        width: '65px',
+        height: '22px',
+        alignSelf: 'center',
+        minWidth: 'fit-content',
+        border: '1px solid',
+        borderColor: 'neutral.80',
+        backgroundColor: 'white !important',
+        ml: 8,
+        '& span': {
+          fontSize: 'sm',
+          lineHeight: 1,
+          color: '#253746'
+        }
+      }
+    }), withTooltip && ___EmotionJSX(Box, {
+      ml: "5px",
+      height: "15px",
+      width: "15px"
+    }, ___EmotionJSX(HelpHint, {
+      tooltipProps: {
+        direction: 'bottom'
+      }
+    }, "Population set to default")));
+  };
+
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    mb: "15px"
+  }, ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'lg',
+      lineHeight: '21px',
+      fontWeight: 3,
+      color: 'text.primary'
+    }
+  }, "Attribute Mapping"), ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
+    ml: "5px",
+    variant: "inverted",
+    "aria-label": "edit header button"
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: 18
+  })))), ___EmotionJSX(Box, {
+    backgroundColor: "accent.99",
+    width: "450px",
+    padding: "10px 10px 25px 10px"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    sx: {
+      width: '100%'
+    }
+  }, ___EmotionJSX(Box, {
+    sx: {
+      width: 'calc(50% - 22px)'
+    }
+  }, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 3,
+      fontSize: 'md',
+      lineHeight: '18px',
+      mb: '5px'
+    }
+  }, "PingOne")), ___EmotionJSX(Box, {
+    sx: {
+      width: 'calc(50% - 22px)'
+    }
+  }, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 3,
+      fontSize: 'md',
+      lineHeight: '18px',
+      mb: '5px'
+    }
+  }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+    withChip: true,
+    leftValue: "UserId",
+    rightValue: "mdorey"
+  }), ___EmotionJSX(Row, {
+    leftValue: "givenName",
+    rightValue: "firstName"
+  }), ___EmotionJSX(Row, {
+    leftValue: "familyName",
+    rightValue: "lastName"
+  }), ___EmotionJSX(Row, {
+    withTooltip: true,
+    leftValue: "population",
+    rightValue: "population"
+  }), ___EmotionJSX(Row, {
+    leftValue: "password",
+    rightValue: "password"
+  })));
+};

package/lib/styles/variants/boxes.js

@@ -152,12 +152,14 @@ var textFieldInContainerSlot = {
 var copy = {
   alignItems: 'center',
   width: 'max-content',
-  cursor: 'pointer',
   '& .is-focused': {
     outline: '1px solid',
     outlineColor: 'active',
     outlineOffset: '4px',
     borderRadius: '4px'
+  },
+  '& span': {
+    cursor: 'text'
   }
 };
 var topShadowScrollbox = {

package/package.json

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