@pingux/astro 2.88.0-alpha.3 → 2.89.0-alpha.0

package/lib/components/CopyText/CopyText.js

@@ -134,9 +134,9 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "copyText.copy"
   }, others, {
     role: "presentation"
-  }), content, ___EmotionJSX(CopyButton, _extends({
+  }), mode !== 'rightText' && content, ___EmotionJSX(CopyButton, _extends({
     onPress: copyToClipboard
-  }, focusProps, iconButtonProps)))));
+  }, focusProps, iconButtonProps)), mode === 'rightText' && content)));
 });
 CopyText.defaultProps = {
   mode: 'text',

package/lib/components/NavigationHeader/HeaderAccountMenu.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import ChevronDownIcon from '@pingux/mdi-react/ChevronDownIcon';
+import LogoutVariantIcon from '@pingux/mdi-react/LogoutVariantIcon';
+import { Avatar, Box, Button, Icon, Item, Link, Menu, OverlayProvider, PopoverMenu, Separator, Text } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var HeaderAccountMenu = function HeaderAccountMenu(props) {
+  var userData = props.userData,
+    avatarProps = props.avatarProps;
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, {
+    variant: "navigationHeader.accountButton"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    gap: "xs"
+  }, ___EmotionJSX(Avatar, _extends({
+    src: userData === null || userData === void 0 ? void 0 : userData.image,
+    alt: "Avatar",
+    "aria-label": "Avatar"
+  }, avatarProps)), ___EmotionJSX(Icon, {
+    icon: ChevronDownIcon,
+    size: "16px",
+    color: "gray-800"
+  }))), ___EmotionJSX(Menu, {
+    variant: "navigationHeader.dropdownMenu"
+  }, ___EmotionJSX(Item, {
+    key: "profile"
+  }, ___EmotionJSX(Link, {
+    href: "#",
+    variant: "navigationHeader.dropdownMenuItem"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    gap: "md"
+  }, ___EmotionJSX(Avatar, _extends({
+    src: userData === null || userData === void 0 ? void 0 : userData.image,
+    alt: "Avatar",
+    "aria-label": "Avatar"
+  }, avatarProps)), ___EmotionJSX(Box, {
+    ml: "0"
+  }, ___EmotionJSX(Text, {
+    as: "h5",
+    variant: "h5",
+    mb: "0"
+  }, userData === null || userData === void 0 ? void 0 : userData.firstName, ' ', userData === null || userData === void 0 ? void 0 : userData.lastName), ___EmotionJSX(Text, {
+    color: "gray-500",
+    fontSize: "sm"
+  }, userData === null || userData === void 0 ? void 0 : userData.email))))), ___EmotionJSX(Item, {
+    isSeparator: true,
+    textValue: "-",
+    my: "sm"
+  }, ___EmotionJSX(Separator, null)), ___EmotionJSX(Item, {
+    key: "signOut"
+  }, ___EmotionJSX(Link, {
+    color: "gray-700",
+    variant: "navigationHeader.dropdownMenuItem"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: LogoutVariantIcon,
+    size: "18px",
+    mr: "sm"
+  }), ___EmotionJSX(Text, null, "Sign Out")))))));
+};
+export default HeaderAccountMenu;

package/lib/components/NavigationHeader/NavigationHeader.js

@@ -0,0 +1,37 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "isSticky"];
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _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 { Box } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var NavigationHeader = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    isSticky = props.isSticky,
+    others = _objectWithoutProperties(props, _excluded);
+  return ___EmotionJSX(Box, _extends({
+    as: "nav",
+    ref: ref,
+    variant: "navigationHeader.container",
+    sx: _objectSpread(_objectSpread({}, props === null || props === void 0 ? void 0 : props.sx), isSticky && {
+      position: 'sticky'
+    })
+  }, others), ___EmotionJSX(Box, {
+    variant: "navigationHeader.wrapper"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    justifyContent: "space-between",
+    alignItems: "center"
+  }, children)));
+});
+export default NavigationHeader;

package/lib/components/NavigationHeader/NavigationHeader.mdx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/NavigationHeader/NavigationHeader" />
+
+# NavigationHeader
+The Header component is designed to help users navigate to different pages. 
+It incorporates several child components, including Link, Image, Avatar, and PopUp, allowing for a customizable and functional navigation experience.
+
+### Required components
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Navigation](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Key            | Functions                                                                                                         |
+| -------------- | ----------------------------------------------------------------------------------------------------------------- |
+| Tab            | Focuses item and follows the page tab sequence.                                                    |
+| Shift + Tab    | Moves focus to the previous focusable component.                                                         |
+| Space or Enter | Pressing Space or Enter on a focused trigger opens or closes the dropdown menu and selects the MenuItems it is focused on. |
+| Arrow keys     | Moves the selection through the popover.                                                                          |
+| Esc            | Pressing the escape key closes the popover and focuses on the previous focusable component.                       |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- Each Link component uses the **`aria-label`** attribute to provide an accessible name.

package/lib/components/NavigationHeader/NavigationHeader.stories.js

@@ -0,0 +1,195 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState } from 'react';
+import HelpCircleOutlineIcon from '@pingux/mdi-react/HelpCircleOutlineIcon';
+import MoonWaningCrescentIcon from '@pingux/mdi-react/MoonWaningCrescentIcon';
+import WhiteBalanceSunnyIcon from '@pingux/mdi-react/WhiteBalanceSunnyIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, Icon, IconButton, IconButtonToggle, Image, Item, Link, Menu, NavigationHeader, OverlayProvider, PopoverMenu, Separator, Text } from '../../index';
+import { pingLogoHorizontal, userImage } from '../../utils/devUtils/constants/images';
+import HeaderAccountMenu from './HeaderAccountMenu';
+import NavigationHeaderReadme from './NavigationHeader.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/NavigationHeader',
+  component: NavigationHeader,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(NavigationHeaderReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    src: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+var iconButtonSX = {
+  minWidth: '56px',
+  borderRadius: '3px',
+  py: 'xs',
+  px: 'sm'
+};
+var placeholderSeparator = {
+  bg: 'gray-300',
+  flexShrink: 0
+};
+
+// Breakpoints for display property
+var breakpointDisplaysXS = ['none', 'none', 'block', 'block', 'block', 'block'];
+var breakpointDisplaySmall = ['none', 'none', 'none', 'none', 'block', 'block'];
+var userData = {
+  email: 'bjensen@example.com',
+  firstName: 'Barbara',
+  lastName: 'Jensen',
+  image: userImage
+};
+export var Default = function Default(_ref) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoggedIn = _useState2[0],
+    setIsLoggedIn = _useState2[1];
+  return ___EmotionJSX(Box, {
+    p: "0"
+  }, ___EmotionJSX(NavigationHeader, _extends({}, args, {
+    isSticky: true,
+    "aria-labelledby": "next-gen-header"
+  }), ___EmotionJSX(Link, {
+    href: "#",
+    variant: "navigationHeader.logoBand"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    justifyContent: "center",
+    py: "sm",
+    flex: "0 0 auto"
+  }, ___EmotionJSX(Image, {
+    src: pingLogoHorizontal,
+    alt: "Ping Identity Logo",
+    mr: "md",
+    sx: {
+      height: '24px'
+    }
+  }), ___EmotionJSX(Separator, {
+    orientation: "vertical",
+    sx: placeholderSeparator,
+    style: {
+      height: '28px',
+      margin: '0'
+    }
+  }), ___EmotionJSX(Text, {
+    as: "h2",
+    variant: "navigationHeader.headerPlaceholder",
+    id: "next-gen-header"
+  }, "Marketplace"))), ___EmotionJSX(Box, {
+    as: "ul",
+    isRow: true,
+    alignItems: "center",
+    p: "0",
+    ml: "auto",
+    flex: "0 0 auto"
+  }, ___EmotionJSX(Box, {
+    as: "li",
+    display: breakpointDisplaySmall
+  }, ___EmotionJSX(Link, {
+    "aria-label": "Browse",
+    href: "#",
+    variant: "navigationHeader.link"
+  }, "Browse")), ___EmotionJSX(Box, {
+    as: "li",
+    display: breakpointDisplaySmall
+  }, ___EmotionJSX(Link, {
+    "aria-label": "My Content",
+    href: "#",
+    variant: "navigationHeader.link"
+  }, "My Content")), ___EmotionJSX(Box, {
+    as: "li",
+    display: breakpointDisplaySmall
+  }, ___EmotionJSX(Link, {
+    "aria-label": "Reports",
+    href: "#",
+    variant: "navigationHeader.link"
+  }, "Reports")), ___EmotionJSX(Box, {
+    as: "li",
+    display: breakpointDisplaysXS
+  }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
+    isContainFocus: true
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Help & Support",
+    variant: "headerNav"
+  }, ___EmotionJSX(Icon, {
+    size: "24px",
+    color: "gray-800",
+    icon: HelpCircleOutlineIcon,
+    title: {
+      name: 'help circle outline icon'
+    }
+  })), ___EmotionJSX(Menu, {
+    variant: "navigationHeader.dropdownMenu"
+  }, ___EmotionJSX(Item, {
+    key: "Help & Support"
+  }, ___EmotionJSX(Link, {
+    href: "Help & Support",
+    "aria-label": "Help & Support",
+    variant: "navigationHeader.dropdownMenuItem"
+  }, "Help & Support")), ___EmotionJSX(Item, {
+    key: "Doc"
+  }, ___EmotionJSX(Link, {
+    href: "Doc",
+    "aria-label": "Doc",
+    variant: "navigationHeader.dropdownMenuItem"
+  }, "Doc")), ___EmotionJSX(Item, {
+    key: "Developer"
+  }, ___EmotionJSX(Link, {
+    href: "Developer",
+    "aria-label": "Developer",
+    variant: "navigationHeader.dropdownMenuItem"
+  }, "Developer")), ___EmotionJSX(Item, {
+    key: "Labs"
+  }, ___EmotionJSX(Link, {
+    href: "Labs",
+    "aria-label": "Labs",
+    variant: "navigationHeader.dropdownMenuItem"
+  }, "Labs")))))), ___EmotionJSX(Box, {
+    as: "li",
+    display: breakpointDisplaysXS
+  }, ___EmotionJSX(IconButtonToggle, {
+    toggledIcon: WhiteBalanceSunnyIcon,
+    defaultIcon: MoonWaningCrescentIcon,
+    iconProps: {
+      size: '24px'
+    },
+    buttonProps: {
+      'aria-label': 'theme icon',
+      sx: iconButtonSX,
+      variant: 'headerNav'
+    }
+  })), ___EmotionJSX(Box, {
+    as: "li",
+    display: breakpointDisplaysXS
+  }, isLoggedIn ? ___EmotionJSX(HeaderAccountMenu, {
+    userData: userData,
+    avatarProps: {
+      defaultText: 'KL',
+      size: 'avatar.md',
+      backgroundColor: 'red-100',
+      color: 'red-800'
+    }
+  }) : ___EmotionJSX(Link, {
+    href: "#",
+    variant: "navigationHeader.link",
+    "aria-label": "Sign In",
+    onPress: function onPress() {
+      return setIsLoggedIn(!isLoggedIn);
+    }
+  }, "Sign In")))));
+};