@pingux/astro 1.13.0-alpha.5 → 1.13.0-alpha.8

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

@@ -114,14 +114,41 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return undefined;
   }, [isCopied]);
   var copyToClipboard = (0, _useCopyToClipboard["default"])(value, setIsCopied);
-  var content = mode === 'link' || mode === 'nonClickableContent' ? children : (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    variant: "quiet",
-    onPress: copyToClipboard,
-    "aria-label": "copy-content",
-    tabIndex: -1
-  }, focusProps), children);
+
+  var onTextClick = function onTextClick() {
+    var selection = window.getSelection();
+
+    if (selection.toString() === '') {
+      copyToClipboard();
+    }
+  };
+  /* Used for text copying */
+
+
+  var contentRef = (0, _react.useRef)();
+
+  var _usePress = (0, _interactions.usePress)({
+    ref: contentRef,
+    onClick: onTextClick
+  }),
+      pressProps = _usePress.pressProps;
+
+  delete pressProps.onMouseDown;
+  delete pressProps.onPointerDown;
+  var content = mode === 'link' || mode === 'nonClickableContent' ? children : (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: contentRef
+  }, (0, _utils.mergeProps)(focusProps, pressProps)), children);
   var tooltip = isCopied ? 'Copied!' : tooltipText;
   var isTooltipOpen = isFocusVisible || isHovered || isCopied;
+  var pressableRef = (0, _react.useRef)();
+
+  var _usePress2 = (0, _interactions.usePress)({
+    ref: pressableRef
+  }),
+      pressableProps = _usePress2.pressProps;
+
+  delete pressableProps.onMouseDown;
+  delete pressableProps.onPointerDown;
   var wrapperRef = (0, _react.useRef)();
 
   if (mode === 'nonClickableContent') {
@@ -153,12 +180,19 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   return (0, _react2.jsx)(TooltipWrapper, {
     isOpen: isTooltipOpen,
-    tooltip: tooltip
-  }, (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    tooltip: tooltip,
+    targetRef: pressableRef
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: pressableRef
+  }, (0, _utils.mergeProps)(hoverProps, pressableProps), {
+    sx: {
+      width: 'min-content'
+    }
+  }), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: ref,
     isRow: true,
     variant: "boxes.copy"
-  }, (0, _utils.mergeProps)(hoverProps, others)), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
+  }, others), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
     onPress: copyToClipboard
   }, focusProps)))));
 });

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

@@ -49,6 +49,7 @@ var testId = 'test-copy-text';
 var originalClipboard = _objectSpread({}, global.navigator.clipboard);
 
 var originalExecCommand = global.document.execCommand;
+var originalGetSelection = window.getSelection;
 
 var defaultTest = function defaultTest() {
   var getComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -107,11 +108,15 @@ describe('Text mode', function () {
     global.navigator.clipboard = mockClipboard;
     global.document.execCommand = jest.fn();
     global.document.execCommand.mockReturnValue(true);
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
   });
   afterEach(function () {
     jest.resetAllMocks();
     global.navigator.clipboard = originalClipboard;
     global.document.execCommand = originalExecCommand;
+    window.getSelection = originalGetSelection;
   });
   test('click on text copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
     var button;
@@ -433,10 +438,14 @@ describe('Link mode', function () {
       writeText: jest.fn()
     };
     global.navigator.clipboard = mockClipboard;
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
   });
   afterEach(function () {
     jest.resetAllMocks();
     global.navigator.clipboard = originalClipboard;
+    window.getSelection = originalGetSelection;
   });
   test('click on copy button copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
     var button;

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

@@ -0,0 +1,165 @@
+"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.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Recipes/AttributeMappingReadOnlyField'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var Row = function Row(props) {
+    var withChip = props.withChip,
+        withTooltip = props.withTooltip,
+        leftValue = props.leftValue,
+        rightValue = props.rightValue;
+    return (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      alignItems: "center",
+      mt: "10px"
+    }, (0, _react2.jsx)(_index.TextField, {
+      isReadOnly: true,
+      value: leftValue,
+      labelProps: {
+        mb: 0
+      },
+      controlProps: {
+        variant: 'input.small',
+        'aria-label': "input ".concat(leftValue),
+        sx: {
+          width: '165px'
+        }
+      }
+    }), (0, _react2.jsx)(_index.Separator, {
+      sx: {
+        width: '21px',
+        ml: '2px',
+        mr: '2px'
+      }
+    }), (0, _react2.jsx)(_index.TextField, {
+      isReadOnly: true,
+      value: rightValue,
+      labelProps: {
+        mb: 0
+      },
+      controlProps: {
+        variant: 'input.small',
+        'aria-label': "input ".concat(rightValue),
+        sx: {
+          width: '165px'
+        }
+      }
+    }), withChip && (0, _react2.jsx)(_index.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 && (0, _react2.jsx)(_index.Box, {
+      ml: "5px",
+      height: "15px",
+      width: "15px"
+    }, (0, _react2.jsx)(_index.HelpHint, {
+      tooltipProps: {
+        direction: 'bottom'
+      }
+    }, "Population set to default")));
+  };
+
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center",
+    mb: "15px"
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontSize: 'lg',
+      lineHeight: '21px',
+      fontWeight: 3,
+      color: 'text.primary'
+    }
+  }, "Attribute Mapping"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
+    ml: "5px",
+    variant: "inverted",
+    "aria-label": "edit header button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    size: 18
+  })))), (0, _react2.jsx)(_index.Box, {
+    backgroundColor: "accent.99",
+    width: "450px",
+    padding: "10px 10px 25px 10px"
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: {
+      width: '100%'
+    }
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: {
+      width: 'calc(50% - 22px)'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 3,
+      fontSize: 'md',
+      lineHeight: '18px',
+      mb: '5px'
+    }
+  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+    sx: {
+      width: 'calc(50% - 22px)'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 3,
+      fontSize: 'md',
+      lineHeight: '18px',
+      mb: '5px'
+    }
+  }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
+    withChip: true,
+    leftValue: "UserId",
+    rightValue: "mdorey"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "givenName",
+    rightValue: "firstName"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "familyName",
+    rightValue: "lastName"
+  }), (0, _react2.jsx)(Row, {
+    withTooltip: true,
+    leftValue: "population",
+    rightValue: "population"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "password",
+    rightValue: "password"
+  })));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,76 @@
+"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.Spacing = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Text = _interopRequireDefault(require("../components/Text"));
+
+var _spacing = _interopRequireDefault(require("./spacing"));
+
+var _ = require("..");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Design/Spacing'
+};
+exports["default"] = _default;
+var tableBodyStyles = {
+  border: 'unset'
+};
+var tableRowStyles = {
+  backgroundColor: 'transparent !important'
+};
+
+var Spacing = function Spacing() {
+  var _context;
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], {
+    variant: "sectionTitle"
+  }, "Spacing"), (0, _react2.jsx)(_.Separator, {
+    mb: "sm"
+  }), (0, _react2.jsx)(_.Table, {
+    width: "75%"
+  }, (0, _react2.jsx)(_.TableHead, null, (0, _react2.jsx)(_.TableRow, {
+    sx: tableRowStyles,
+    key: "head"
+  }, (0, _react2.jsx)(_.TableCell, {
+    isHeading: true,
+    key: "name"
+  }, "Token"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true,
+    key: "value"
+  }, "Size"))), (0, _map["default"])(_context = (0, _entries["default"])(_spacing["default"])).call(_context, function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return (0, _react2.jsx)(_.TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, (0, _react2.jsx)(_.TableRow, {
+      sx: tableRowStyles
+    }, (0, _react2.jsx)(_.TableCell, {
+      bg: "white"
+    }, key), (0, _react2.jsx)(_.TableCell, {
+      bg: "white"
+    }, value, "px")));
+  })));
+};
+
+exports.Spacing = Spacing;

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

@@ -0,0 +1,160 @@
+"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.TypographyTokens = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Text = _interopRequireDefault(require("../components/Text"));
+
+var _ = require("..");
+
+var _text = require("./text");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Design/Typography'
+};
+exports["default"] = _default;
+var tableBodyStyles = {
+  border: 'unset'
+};
+var tableRowStyles = {
+  backgroundColor: 'transparent !important'
+};
+
+var TypographyTokens = function TypographyTokens() {
+  var _context, _context2;
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], {
+    variant: "sectionTitle"
+  }, "Font Sizes"), (0, _react2.jsx)(_.Separator, {
+    mb: "sm"
+  }), (0, _react2.jsx)(_.Table, {
+    width: "75%"
+  }, (0, _react2.jsx)(_.TableHead, null, (0, _react2.jsx)(_.TableRow, {
+    key: "head"
+  }, (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Token"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Size"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Example"))), (0, _map["default"])(_context = (0, _entries["default"])(_text.fontSizes)).call(_context, function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return (0, _react2.jsx)(_.TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, (0, _react2.jsx)(_.TableRow, {
+      sx: tableRowStyles
+    }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontSize: value
+    }, key)), (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontSize: value
+    }, value)), (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontSize: value
+    }, "<Text fontSize={", key, "} />"))));
+  }))), (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], {
+    variant: "sectionTitle",
+    mt: "xx"
+  }, "Font Weights"), (0, _react2.jsx)(_.Separator, {
+    mb: "sm"
+  }), (0, _react2.jsx)(_.Table, {
+    width: "75%"
+  }, (0, _react2.jsx)(_.TableHead, null, (0, _react2.jsx)(_.TableRow, {
+    key: "head"
+  }, (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Token"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Size"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Example"))), (0, _map["default"])(_context2 = (0, _entries["default"])(_text.fontWeights)).call(_context2, function (_ref3) {
+    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+
+    return (0, _react2.jsx)(_.TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, (0, _react2.jsx)(_.TableRow, {
+      sx: tableRowStyles
+    }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontWeight: value
+    }, key)), (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontWeight: value
+    }, value)), (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontWeight: value
+    }, "<Text fontWeight={", key, "} />"))));
+  }))), (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], {
+    variant: "sectionTitle",
+    mt: "xx"
+  }, "Text Colors"), (0, _react2.jsx)(_.Separator, {
+    mb: "sm"
+  }), (0, _react2.jsx)(_.Table, {
+    width: "75%"
+  }, (0, _react2.jsx)(_.TableHead, null, (0, _react2.jsx)(_.TableRow, {
+    key: "head"
+  }, (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Token"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Color"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Example"))), (0, _react2.jsx)(_.TableBody, {
+    sx: tableBodyStyles
+  }, (0, _react2.jsx)(_.TableRow, {
+    sx: tableRowStyles
+  }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_.Box, {
+    width: "30px",
+    height: "30px",
+    bg: "text.primary",
+    mr: "xs"
+  }), (0, _react2.jsx)(_Text["default"], {
+    alignSelf: "center"
+  }, "text.primary"))), (0, _react2.jsx)(_.TableCell, {
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_Text["default"], null, "neutral.10")), (0, _react2.jsx)(_.TableCell, {
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_Text["default"], {
+    color: "text.primary"
+  }, "<Text textColor={text.primary} />"))), (0, _react2.jsx)(_.TableRow, {
+    sx: tableRowStyles
+  }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_.Box, {
+    width: "30px",
+    height: "30px",
+    bg: "text.secondary",
+    mr: "xs"
+  }), (0, _react2.jsx)(_Text["default"], {
+    alignSelf: "center"
+  }, "text.secondary"))), (0, _react2.jsx)(_.TableCell, {
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_Text["default"], null, "neutral.40")), (0, _react2.jsx)(_.TableCell, {
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_Text["default"], {
+    color: "text.secondary"
+  }, "<Text color={text.secondary} />")))))));
+};
+
+exports.TypographyTokens = TypographyTokens;

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

@@ -172,12 +172,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/lib/components/CopyText/CopyText.js

@@ -7,10 +7,10 @@ var _excluded = ["children", "tooltip"],
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useFocusRing } from '@react-aria/focus';
-import { Pressable, useHover } from '@react-aria/interactions';
+import { useHover, usePress } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { announce } from '@react-aria/live-announcer';
-import { Box, Button, Tooltip, TooltipTrigger } from '../../index';
+import { Box, Tooltip, TooltipTrigger } from '../../index';
 import CopyButton from './CopyButton';
 import useCopyToClipboard from '../../hooks/useCopyToClipboard';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -82,14 +82,41 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     return undefined;
   }, [isCopied]);
   var copyToClipboard = useCopyToClipboard(value, setIsCopied);
-  var content = mode === 'link' || mode === 'nonClickableContent' ? children : ___EmotionJSX(Button, _extends({
-    variant: "quiet",
-    onPress: copyToClipboard,
-    "aria-label": "copy-content",
-    tabIndex: -1
-  }, focusProps), children);
+
+  var onTextClick = function onTextClick() {
+    var selection = window.getSelection();
+
+    if (selection.toString() === '') {
+      copyToClipboard();
+    }
+  };
+  /* Used for text copying */
+
+
+  var contentRef = useRef();
+
+  var _usePress = usePress({
+    ref: contentRef,
+    onClick: onTextClick
+  }),
+      pressProps = _usePress.pressProps;
+
+  delete pressProps.onMouseDown;
+  delete pressProps.onPointerDown;
+  var content = mode === 'link' || mode === 'nonClickableContent' ? children : ___EmotionJSX(Box, _extends({
+    ref: contentRef
+  }, mergeProps(focusProps, pressProps)), children);
   var tooltip = isCopied ? 'Copied!' : tooltipText;
   var isTooltipOpen = isFocusVisible || isHovered || isCopied;
+  var pressableRef = useRef();
+
+  var _usePress2 = usePress({
+    ref: pressableRef
+  }),
+      pressableProps = _usePress2.pressProps;
+
+  delete pressableProps.onMouseDown;
+  delete pressableProps.onPointerDown;
   var wrapperRef = useRef();
 
   if (mode === 'nonClickableContent') {
@@ -121,12 +148,19 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return ___EmotionJSX(TooltipWrapper, {
     isOpen: isTooltipOpen,
-    tooltip: tooltip
-  }, ___EmotionJSX(Pressable, null, ___EmotionJSX(Box, _extends({
+    tooltip: tooltip,
+    targetRef: pressableRef
+  }, ___EmotionJSX(Box, _extends({
+    ref: pressableRef
+  }, mergeProps(hoverProps, pressableProps), {
+    sx: {
+      width: 'min-content'
+    }
+  }), ___EmotionJSX(Box, _extends({
     ref: ref,
     isRow: true,
     variant: "boxes.copy"
-  }, mergeProps(hoverProps, others)), content, ___EmotionJSX(CopyButton, _extends({
+  }, others), content, ___EmotionJSX(CopyButton, _extends({
     onPress: copyToClipboard
   }, focusProps)))));
 });

package/lib/components/CopyText/CopyText.test.js

@@ -27,6 +27,7 @@ var testId = 'test-copy-text';
 var originalClipboard = _objectSpread({}, global.navigator.clipboard);
 
 var originalExecCommand = global.document.execCommand;
+var originalGetSelection = window.getSelection;
 
 var defaultTest = function defaultTest() {
   var getComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -75,11 +76,15 @@ describe('Text mode', function () {
     global.navigator.clipboard = mockClipboard;
     global.document.execCommand = jest.fn();
     global.document.execCommand.mockReturnValue(true);
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
   });
   afterEach(function () {
     jest.resetAllMocks();
     global.navigator.clipboard = originalClipboard;
     global.document.execCommand = originalExecCommand;
+    window.getSelection = originalGetSelection;
   });
   test('click on text copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var button;
@@ -388,10 +393,14 @@ describe('Link mode', function () {
       writeText: jest.fn()
     };
     global.navigator.clipboard = mockClipboard;
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
   });
   afterEach(function () {
     jest.resetAllMocks();
     global.navigator.clipboard = originalClipboard;
+    window.getSelection = originalGetSelection;
   });
   test('click on copy button copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
     var button;

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/Spacing.stories.js

@@ -0,0 +1,52 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import Text from '../components/Text';
+import scale from './spacing';
+import { Table, TableHead, TableRow, TableBody, TableCell, Separator } from '..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design/Spacing'
+};
+var tableBodyStyles = {
+  border: 'unset'
+};
+var tableRowStyles = {
+  backgroundColor: 'transparent !important'
+};
+export var Spacing = function Spacing() {
+  var _context;
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    variant: "sectionTitle"
+  }, "Spacing"), ___EmotionJSX(Separator, {
+    mb: "sm"
+  }), ___EmotionJSX(Table, {
+    width: "75%"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    sx: tableRowStyles,
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    isHeading: true,
+    key: "name"
+  }, "Token"), ___EmotionJSX(TableCell, {
+    isHeading: true,
+    key: "value"
+  }, "Size"))), _mapInstanceProperty(_context = _Object$entries(scale)).call(_context, function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return ___EmotionJSX(TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, ___EmotionJSX(TableRow, {
+      sx: tableRowStyles
+    }, ___EmotionJSX(TableCell, {
+      bg: "white"
+    }, key), ___EmotionJSX(TableCell, {
+      bg: "white"
+    }, value, "px")));
+  })));
+};

package/lib/styles/Typography.stories.js

@@ -0,0 +1,136 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import Text from '../components/Text';
+import { Table, TableRow, TableBody, TableHead, TableCell, Box, Separator } from '..';
+import { fontWeights, fontSizes } from './text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design/Typography'
+};
+var tableBodyStyles = {
+  border: 'unset'
+};
+var tableRowStyles = {
+  backgroundColor: 'transparent !important'
+};
+export var TypographyTokens = function TypographyTokens() {
+  var _context, _context2;
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    variant: "sectionTitle"
+  }, "Font Sizes"), ___EmotionJSX(Separator, {
+    mb: "sm"
+  }), ___EmotionJSX(Table, {
+    width: "75%"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Token"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Size"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Example"))), _mapInstanceProperty(_context = _Object$entries(fontSizes)).call(_context, function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return ___EmotionJSX(TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, ___EmotionJSX(TableRow, {
+      sx: tableRowStyles
+    }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontSize: value
+    }, key)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontSize: value
+    }, value)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontSize: value
+    }, "<Text fontSize={", key, "} />"))));
+  }))), ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    variant: "sectionTitle",
+    mt: "xx"
+  }, "Font Weights"), ___EmotionJSX(Separator, {
+    mb: "sm"
+  }), ___EmotionJSX(Table, {
+    width: "75%"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Token"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Size"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Example"))), _mapInstanceProperty(_context2 = _Object$entries(fontWeights)).call(_context2, function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+
+    return ___EmotionJSX(TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, ___EmotionJSX(TableRow, {
+      sx: tableRowStyles
+    }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontWeight: value
+    }, key)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontWeight: value
+    }, value)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontWeight: value
+    }, "<Text fontWeight={", key, "} />"))));
+  }))), ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    variant: "sectionTitle",
+    mt: "xx"
+  }, "Text Colors"), ___EmotionJSX(Separator, {
+    mb: "sm"
+  }), ___EmotionJSX(Table, {
+    width: "75%"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Token"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Color"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Example"))), ___EmotionJSX(TableBody, {
+    sx: tableBodyStyles
+  }, ___EmotionJSX(TableRow, {
+    sx: tableRowStyles
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Box, {
+    width: "30px",
+    height: "30px",
+    bg: "text.primary",
+    mr: "xs"
+  }), ___EmotionJSX(Text, {
+    alignSelf: "center"
+  }, "text.primary"))), ___EmotionJSX(TableCell, {
+    alignSelf: "center"
+  }, ___EmotionJSX(Text, null, "neutral.10")), ___EmotionJSX(TableCell, {
+    alignSelf: "center"
+  }, ___EmotionJSX(Text, {
+    color: "text.primary"
+  }, "<Text textColor={text.primary} />"))), ___EmotionJSX(TableRow, {
+    sx: tableRowStyles
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Box, {
+    width: "30px",
+    height: "30px",
+    bg: "text.secondary",
+    mr: "xs"
+  }), ___EmotionJSX(Text, {
+    alignSelf: "center"
+  }, "text.secondary"))), ___EmotionJSX(TableCell, {
+    alignSelf: "center"
+  }, ___EmotionJSX(Text, null, "neutral.40")), ___EmotionJSX(TableCell, {
+    alignSelf: "center"
+  }, ___EmotionJSX(Text, {
+    color: "text.secondary"
+  }, "<Text color={text.secondary} />")))))));
+};

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-alpha.5",
+  "version": "1.13.0-alpha.8",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",