@pingux/astro 1.1.0-alpha.6 → 1.1.0

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

@@ -211,6 +211,26 @@ var expandableRow = {
     }
   }
 };
+var navBar = {
+  height: '100%',
+  width: '230px',
+  position: 'absolute',
+  zIndex: '1',
+  top: '0',
+  left: '0',
+  backgroundColor: 'accent.20',
+  overflowY: 'hidden'
+};
+var navBarSectionContainer = {
+  height: '100%',
+  maxHeight: '100%',
+  overflowY: 'overlay !important'
+};
+var navBarItemHeaderContainer = {
+  flexGrow: 1,
+  alignItems: 'center',
+  maxWidth: '180px'
+};
 var datePicker = {
   '.react-calendar': {
     width: 280,
@@ -292,6 +312,9 @@ var _default = {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox
+  bottomShadowScrollbox: bottomShadowScrollbox,
+  navBar: navBar,
+  navBarSectionContainer: navBarSectionContainer,
+  navBarItemHeaderContainer: navBarItemHeaderContainer
 };
 exports["default"] = _default;

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

@@ -74,6 +74,33 @@ var defaultFocus = {
   outline: 'none',
   boxShadow: 'focus'
 };
+var navItemButton = {
+  textDecoration: 'none',
+  outline: 'none',
+  cursor: 'pointer',
+  borderRadius: 0,
+  backgroundColor: 'transparent',
+  paddingTop: '5px',
+  paddingBottom: '5px',
+  display: 'block',
+  color: 'neutral.95',
+  fontSize: 'sm',
+  fontWeight: 1,
+  flexGrow: '1',
+  width: '100%',
+  textAlign: 'left',
+  lineHeight: '16px',
+  whiteSpace: 'break-spaces',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'accent.10',
+    boxShadow: 'inset 2px 0 0 0 white'
+  }
+};
 var iconButton = {
   justifyContent: 'center',
   appearance: 'none',
@@ -89,7 +116,7 @@ var iconButton = {
   width: 'inherit',
   height: 'inherit',
   path: {
-    fill: 'neutral.20'
+    fill: 'neutral.40'
   },
   outline: 'none',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -538,6 +565,7 @@ var _default = {
   text: text,
   helpHint: helpHint,
   modalCloseButton: modalCloseButton,
+  navItemButton: navItemButton,
   applicationPortalPinned: applicationPortalPinned,
   applicationPortal: applicationPortal,
   square: square,

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+require("a11y-syntax-highlighting/dist/prism/a11y-light.min.css");
+
+var wrapper = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.95',
+  width: 400,
+  height: 200,
+  my: 5,
+  overflow: 'auto',
+  alignItems: 'center',
+  '&.is-focused, &:focus': {
+    boxShadow: 'focus',
+    outline: 'none'
+  },
+  pre: {
+    backgroundColor: 'transparent',
+    m: 0,
+    p: 10,
+    pr: 0,
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    fontFamily: 'standard',
+    fontSize: 'sm',
+    '& .token-line': {
+      display: 'block',
+      alignItems: 'center',
+      '& .token': {
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all'
+      }
+    }
+  },
+  '&.has-no-copy-button': {
+    pre: {
+      p: 10
+    }
+  },
+  '&.has-line-numbers': {
+    pre: {
+      p: '0 10px 0 0',
+      overflow: 'auto',
+      '& .token-line:first-of-type *': {
+        pt: 10
+      },
+      '& .token-line': {
+        display: 'flex',
+        '& .token': {
+          whiteSpace: 'pre'
+        }
+      }
+    }
+  }
+};
+var lineNo = {
+  display: 'table-cell',
+  userSelect: 'none',
+  p: 5,
+  m: '0 10px 0 0',
+  bg: 'accent.30',
+  minWidth: 26,
+  color: 'white'
+};
+var _default = {
+  wrapper: wrapper,
+  lineNo: lineNo
+};
+exports["default"] = _default;

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 var link = {
-  color: 'active',
+  color: 'white',
   fontFamily: 'standard',
   fontSize: 'md',
   textDecoration: 'none',

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

@@ -1,13 +1,38 @@
 "use strict";
 
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-_Object$defineProperty(exports, "__esModule", {
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
   value: true
 });
 
 exports["default"] = void 0;
-var _default = {
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var base = {
   bg: 'neutral.80',
   width: '100%',
   height: '1px',
@@ -18,4 +43,22 @@ var _default = {
     mx: '5px'
   }
 };
+
+var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
+  width: '100%',
+  backgroundColor: 'neutral.60'
+});
+
+var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
+  ml: '45px',
+  width: 'calc(100% - 75px)',
+  mb: '15px',
+  backgroundColor: 'neutral.60'
+});
+
+var _default = {
+  base: base,
+  navBarSeparator: navBarSeparator,
+  navBarSubtitleSeparator: navBarSubtitleSeparator
+};
 exports["default"] = _default;

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

@@ -139,6 +139,19 @@ var expandableRow = {
     }
   }
 };
+var navBarSubtitle = {
+  fontWeight: 3,
+  fontSize: '11px',
+  color: 'accent.80'
+};
+
+var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  whiteSpace: 'break-spaces',
+  lineHeight: '13px',
+  fontSize: '13px',
+  fontWeight: 1
+});
+
 var text = {
   base: base,
   bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -202,6 +215,8 @@ var text = {
     textOverflow: 'ellipsis'
   }),
   expandableRow: expandableRow,
+  navBarHeaderText: navBarHeaderText,
+  navBarSubtitle: navBarSubtitle,
   placeholder: {
     fontWeight: -1,
     color: 'text.secondary',

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

@@ -34,6 +34,8 @@ var _accordion = _interopRequireDefault(require("./accordion"));
 
 var _boxes = _interopRequireDefault(require("./boxes"));
 
+var _codeView = _interopRequireDefault(require("./codeView"));
+
 var _images = _interopRequireDefault(require("./images"));
 
 var _imageUpload = _interopRequireDefault(require("./imageUpload"));
@@ -77,6 +79,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = _objectSpread(_objectSpread({
   accordion: _accordion["default"],
   boxes: _boxes["default"],
+  codeView: _codeView["default"],
   images: _images["default"],
   imageUpload: _imageUpload["default"],
   loader: _loader["default"],

package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js

@@ -4,7 +4,7 @@ import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
-import { Link, Box } from '../../index';
+import { Link, Box, OverlayPanel } from '../../index';
 import AccordionGridGroup from '../AccordionGridGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
@@ -26,6 +26,22 @@ var getComponent = function getComponent() {
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button")))));
 };
 
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(AccordionGridGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))), ___EmotionJSX(Item, {
+    key: "second",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))), ___EmotionJSX(Item, {
+    key: "third",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))))));
+};
+
 axeTest(getComponent, {
   // landmark-unique rule conflicts with react-aria role definition
   rules: {
@@ -166,4 +182,10 @@ test('default expanded keys expands an accordion item', function () {
   var row = screen.getAllByRole('row');
   var selectedRow = row[0];
   expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+  var row = screen.getAllByRole('row');
+  var selectedRow = row[0];
+  expect(selectedRow).not.toHaveAttribute('aria-selected', 'true');
 });

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -7,6 +7,7 @@ import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import Text from '../Text';
 import AccordionGroup from '../AccordionGroup';
+import { OverlayPanel } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
 var defaultProps = {
@@ -31,6 +32,25 @@ var getComponent = function getComponent() {
     "data-id": "third",
     label: "Accordion item"
   }, ___EmotionJSX(Text, null, "Render me!"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first"
+  }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
+    key: "second",
+    textValue: "Duplicate",
+    "data-id": "second"
+  }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
+    key: "third",
+    textValue: "Duplicate",
+    "data-id": "third"
+  }, ___EmotionJSX(Text, null, "Render me!")))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -200,4 +220,10 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
   var selectedItem = buttons[0];
   var parentElement = selectedItem.parentElement;
   expect(parentElement).toHaveAttribute('data-id', 'first');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+  var buttons = screen.getAllByRole('button');
+  var selectedItem = buttons[0];
+  expect(selectedItem).not.toHaveAttribute('aria-expanded', 'true');
 });

package/lib/components/AccordionItem/AccordionItem.js

@@ -93,9 +93,11 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     ml: "5px"
   }, ___EmotionJSX(Icon, {
     icon: isOpen ? MenuUp : MenuDown
-  }))), ___EmotionJSX(Box, _extends({
+  }))), isOpen && ___EmotionJSX(Box, _extends({
     variant: "accordion.accordionBody"
-  }, accordionRegionProps, regionProps), item.rendered));
+  }, accordionRegionProps, regionProps, {
+    className: itemClasses
+  }), item.rendered));
 });
 AccordionItem.propTypes = {
   'aria-label': PropTypes.string,

package/lib/components/CodeView/CodeView.js

@@ -0,0 +1,130 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import { useStatusClasses } from '../../hooks';
+import { Box, CopyText } from '../..';
+/**
+ * A text block that shows syntax highlighting code sample.
+ * Built on top of the [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
+ *
+ * A list of all supported languages that can be passed to `language` prop is [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js).
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      outerClassName = props.className,
+      hasLineNumbers = props.hasLineNumbers,
+      hasNoCopyButton = props.hasNoCopyButton,
+      language = props.language,
+      others = _objectWithoutProperties(props, ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language"]);
+
+  var _useFocusRing = useFocusRing(),
+      isFocusVisible = _useFocusRing.isFocusVisible,
+      focusProps = _useFocusRing.focusProps;
+
+  var _useHover = useHover(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useStatusClasses = useStatusClasses(outerClassName, {
+    isFocused: isFocusVisible,
+    isHovered: isHovered,
+    hasLineNumbers: hasLineNumbers,
+    hasNoCopyButton: hasNoCopyButton
+  }),
+      classNames = _useStatusClasses.classNames; // Get the width for the line number element depending on the total amount of lines
+
+
+  var getLineNoWidth = function getLineNoWidth(tokens) {
+    return tokens.length.toString().length * 12;
+  };
+
+  var content = ___EmotionJSX(Highlight, _extends({}, defaultProps, {
+    theme: undefined,
+    code: (children === null || children === void 0 ? void 0 : _trimInstanceProperty(children).call(children)) || '',
+    language: language
+  }), function (_ref) {
+    var className = _ref.className,
+        style = _ref.style,
+        tokens = _ref.tokens,
+        getLineProps = _ref.getLineProps,
+        getTokenProps = _ref.getTokenProps;
+    return ___EmotionJSX(Box, {
+      as: "pre",
+      className: className,
+      style: style
+    }, _mapInstanceProperty(tokens).call(tokens, function (line, i) {
+      return ___EmotionJSX(Box, _extends({
+        isRow: true
+      }, getLineProps({
+        line: line,
+        key: i
+      })), hasLineNumbers && ___EmotionJSX(Box, {
+        as: "span",
+        variant: "codeView.lineNo",
+        sx: {
+          minWidth: getLineNoWidth(tokens)
+        }
+      }, i + 1), _mapInstanceProperty(line).call(line, function (token, key) {
+        return ___EmotionJSX("span", getTokenProps({
+          token: token,
+          key: key
+        }));
+      }));
+    }));
+  });
+
+  if (hasNoCopyButton) {
+    return ___EmotionJSX(Box, _extends({
+      ref: ref,
+      variant: "codeView.wrapper",
+      tabIndex: 0,
+      className: classNames
+    }, mergeProps(focusProps, hoverProps, others)), content);
+  }
+
+  return ___EmotionJSX(CopyText, {
+    mode: "nonClickableContent",
+    textToCopy: children,
+    tooltipProps: {
+      offset: 15
+    },
+    wrapperProps: _objectSpread({
+      className: classNames,
+      variant: 'codeView.wrapper'
+    }, others)
+  }, content);
+});
+CodeView.propTypes = {
+  hasLineNumbers: PropTypes.bool,
+  hasNoCopyButton: PropTypes.bool,
+  language: PropTypes.string
+};
+CodeView.defaultProps = {
+  language: 'json',
+  hasLineNumbers: false,
+  hasNoCopyButton: false
+};
+export default CodeView;

package/lib/components/CodeView/CodeView.stories.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import CodeView from './CodeView';
+import { Text } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var code = "{\n  \"_links\": {\n    \"self\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"password\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.set\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.reset\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.check\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.recover\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"account.sendVerificationCode\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"linkedAccounts\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/linkedAccounts\"\n    }\n  },\n  \"id\": \"5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\",\n  \"environment\": {\n    \"id\": \"94e3268d-847d-47aa-a45e-1ef8dd8f4df0\"\n  },\n  \"account\": {\n    \"canAuthenticate\": true,\n    \"status\": \"OK\"\n  },\n  \"createdAt\": \"2021-09-03T15:01:43.555Z\",\n  \"email\": \"allegraweldon@pingidentity.com\",\n  \"enabled\": true,\n  \"identityProvider\": {\n    \"type\": \"PING_ONE\"\n  },\n  \"lifecycle\": {\n    \"status\": \"ACCOUNT_OK\"\n  },\n  \"mfaEnabled\": false,\n  \"population\": {\n    \"id\": \"c1adbc29-f188-4ea6-a015-49bddd74bc84\"\n  },\n  \"updatedAt\": \"2021-09-03T15:01:43.555Z\",\n  \"username\": \"allegraweldon@pingidentity.com\",\n  \"verifyStatus\": \"NOT_INITIATED\"\n}";
+export default {
+  title: 'CodeView',
+  component: CodeView,
+  argTypes: {
+    children: {
+      defaultValue: code,
+      table: {
+        type: {}
+      },
+      control: {
+        type: 'text'
+      }
+    }
+  },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+        /* Turned off since rule conflicts with the way how `prism-react-renderer` works
+         * and design specs */
+        {
+          id: 'scrollable-region-focusable',
+          enabled: false,
+          selector: '.prism-code'
+        }]
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 2
+    }
+  }, "JSON"), ___EmotionJSX(CodeView, args));
+};
+export var WithLineNumbers = function WithLineNumbers() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 2
+    }
+  }, "JSON"), ___EmotionJSX(CodeView, {
+    hasLineNumbers: true
+  }, code));
+};
+WithLineNumbers.story = {
+  parameters: {
+    docs: {
+      storyDescription: 'Please note that with adding line numbers, line wrapping does not work.'
+    }
+  }
+};
+export var WithCustomSize = function WithCustomSize() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeView, {
+    language: "javascript",
+    sx: {
+      width: '100%',
+      height: 300
+    },
+    hasNoCopyButton: true
+  }, "\nexport const ChipWithIcon = () => (\n  <>\n    <Chip label=\"Chip with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon Button\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" />\n    </Chip>\n  </>\n);\n    "));
+};