@pingux/astro 2.154.1 → 2.155.0-alpha.1

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -425,6 +425,15 @@ declare const buttons: {
         };
         transition: string;
     };
+    searchNavTabLabel: {
+        marginBottom: string;
+        color: string;
+        '&.is-hovered': {
+            '& > svg': {
+                fill: string;
+            };
+        };
+    };
     outlineCritical: {
         backgroundColor: string;
         borderColor: string;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -38,6 +38,15 @@ var defaultFocus = {
   outlineOffset: '2px'
 };
 exports.defaultFocus = defaultFocus;
+var searchNavTabLabel = {
+  marginBottom: '9px',
+  color: 'neutral.40',
+  '&.is-hovered': {
+    '& > svg': {
+      fill: 'active'
+    }
+  }
+};
 var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   alignItems: 'center',
   justifyContent: 'center',
@@ -584,6 +593,7 @@ var buttons = {
   inlinePrimary: inlinePrimary,
   checkboxButton: checkboxButton,
   checkboxActiveButton: checkboxActiveButton,
+  searchNavTabLabel: searchNavTabLabel,
   outlineCritical: outlineCritical,
   link: link,
   listBoxLink: listBoxLink,

package/lib/cjs/styles/themes/next-gen/variants/cards.d.ts

@@ -65,7 +65,7 @@ declare const _default: {
     container: {
         p: string;
         borderColor: string;
-        lineHeight: number;
+        lineHeight: string;
         boxShadow: string;
         border: string;
         borderRadius: string;
@@ -116,7 +116,7 @@ declare const _default: {
     tableWrapper: {
         p: string;
         borderColor: string;
-        lineHeight: number;
+        lineHeight: string;
         boxShadow: string;
         border: string;
         borderRadius: string;
@@ -126,5 +126,22 @@ declare const _default: {
         fontWeight: number;
         flex: string;
     };
+    withShadow: {
+        boxShadow: string;
+        backgroundColor: string;
+        p: string;
+        borderColor: string;
+        lineHeight: string;
+        border: string;
+        borderRadius: string;
+        display: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flex: string;
+    };
+    flat: {
+        boxShadow: string;
+    };
 };
 export default _default;

package/lib/cjs/styles/themes/next-gen/variants/cards.js

@@ -22,7 +22,7 @@ var interactive = {
   boxShadow: 'none',
   borderRadius: '1rem',
   border: '1px solid',
-  borderColor: 'border.base',
+  borderColor: 'gray-200',
   transition: 'border-color .25s ease-in',
   '&.is-focused': {
     backgroundColor: 'backgroundBase',
@@ -38,8 +38,13 @@ var interactive = {
 };
 var container = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   p: 'lg',
-  borderColor: 'border.base',
-  lineHeight: 1.6
+  borderColor: 'gray-200',
+  lineHeight: 'body',
+  boxShadow: 'none'
+});
+var withShadow = _objectSpread(_objectSpread({}, container), {}, {
+  boxShadow: 'standard',
+  backgroundColor: 'backgroundBase'
 });
 var dark = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   border: 'none',
@@ -54,7 +59,7 @@ var light = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   gap: 'lg'
 });
 var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
-  borderColor: 'border.base',
+  borderColor: 'gray-200',
   '&.is-hovered': {
     borderColor: 'active',
     bg: 'default'
@@ -93,6 +98,10 @@ var _default = {
   container: container,
   suggestionColumn: suggestionColumn,
   suggestionRow: suggestionRow,
-  tableWrapper: tableWrapper
+  tableWrapper: tableWrapper,
+  withShadow: withShadow,
+  flat: {
+    boxShadow: 'none'
+  }
 };
 exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/variants/searchNav.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    tab: {
+        marginBottom: string;
+    };
+};
+export default _default;

package/lib/cjs/styles/themes/next-gen/variants/searchNav.js

@@ -0,0 +1,14 @@
+"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;
+var tab = {
+  marginBottom: '-1.5px'
+};
+var _default = {
+  tab: tab
+};
+exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/variants/text.d.ts

@@ -137,6 +137,7 @@ export declare const text: {
     };
     tabLabel: {
         color: string;
+        wordBreak: string;
     };
     placeholder: {
         color: string;

package/lib/cjs/styles/themes/next-gen/variants/text.js

@@ -127,7 +127,8 @@ var text = _objectSpread(_objectSpread({
     lineHeight: '24px'
   },
   tabLabel: {
-    color: 'text.primary'
+    color: 'text.primary',
+    wordBreak: 'normal'
   },
   placeholder: {
     color: 'gray-600',

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -1457,6 +1457,11 @@ declare const _default: {
             };
         };
     };
+    searchNav: {
+        tab: {
+            marginBottom: string;
+        };
+    };
     separator: {
         base: {
             bg: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -35,6 +35,7 @@ var _panelHeader = _interopRequireDefault(require("./panelHeader"));
 var _popoverMenu = _interopRequireDefault(require("./popoverMenu"));
 var _prompt = _interopRequireDefault(require("./prompt"));
 var _response = _interopRequireDefault(require("./response"));
+var _searchNav = _interopRequireDefault(require("./searchNav"));
 var _stepper = _interopRequireDefault(require("./stepper"));
 var _suggestion = _interopRequireDefault(require("./suggestion"));
 var _suggestions = _interopRequireDefault(require("./suggestions"));
@@ -430,6 +431,7 @@ var _default = {
   prompt: _prompt["default"],
   response: _response["default"],
   rockerButton: rockerButton,
+  searchNav: _searchNav["default"],
   separator: separator,
   skeleton: _Skeleton["default"],
   stepper: _stepper["default"],

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

@@ -56,6 +56,7 @@ var _ProgressBar = _interopRequireDefault(require("../../components/ProgressBar/
 var _RangeCalendar = _interopRequireDefault(require("../../components/RangeCalendar/RangeCalendar.styles"));
 var _RockerButton = _interopRequireDefault(require("../../components/RockerButton/RockerButton.styles"));
 var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox/ScrollBox.styles"));
+var _SearchNav = _interopRequireDefault(require("../../components/SearchNav/SearchNav.styles"));
 var _Separator = _interopRequireDefault(require("../../components/Separator/Separator.styles"));
 var _ServerErrorBoundary = _interopRequireDefault(require("../../components/ServerErrorBoundary/ServerErrorBoundary.styles"));
 var _Skeleton = _interopRequireDefault(require("../../components/Skeleton/Skeleton.styles"));
@@ -114,6 +115,7 @@ var _default = _objectSpread(_objectSpread({
   progressBar: _ProgressBar["default"],
   rockerButton: _RockerButton["default"],
   scrollBox: _ScrollBox["default"],
+  searchNav: _SearchNav["default"],
   separator: _Separator["default"],
   serverErrorBoundary: _ServerErrorBoundary["default"],
   slider: _Slider["default"],

package/lib/cjs/types/searchNav.d.ts

@@ -0,0 +1,49 @@
+import { Dispatch, Key, MutableRefObject, SetStateAction } from 'react';
+import { BoxProps } from './box';
+import { ButtonProps } from './button';
+import { MenuProps } from './menu';
+import { PopoverMenuProps } from './popoverMenu';
+import { TabProps } from './tab';
+import { TextProps } from './text';
+type GenericItemType = {
+    text: string;
+    key: Key;
+};
+type StandardCallback = (key: Key) => void;
+type KeySetter = Dispatch<SetStateAction<Key>>;
+type CallbackOrSetter = StandardCallback | KeySetter;
+export interface MoreItemsPopoverProps {
+    buttonRef: MutableRefObject<HTMLButtonElement | null>;
+    items: GenericItemType[];
+    moreButtonText?: string;
+    onOpenChange?: (isOpen: boolean) => void;
+    popoverButtonProps?: ButtonProps;
+    popoverMenuProps?: MenuProps;
+    popoverProps?: PopoverMenuProps;
+    setSelectedKey: (key: Key) => void;
+    tabProps?: TabProps;
+}
+export interface SearchNavTabProps {
+    className?: string;
+    item: GenericItemType;
+    labelProps?: TextProps;
+    selectedKey?: Key;
+    setSelectedKey: (key: Key) => void;
+    tabProps?: TabProps;
+}
+export interface SearchNavProps {
+    defaultSelectedKey?: Key;
+    items: GenericItemType[];
+    labelProps?: TextProps;
+    moreButtonText?: string;
+    onSelectionChange?: (key?: Key | null) => void;
+    popoverButtonProps?: ButtonProps;
+    popoverMenuProps?: MenuProps;
+    popoverProps?: PopoverMenuProps;
+    rowProps?: BoxProps;
+    selectedKey?: Key;
+    setSelectedKey?: CallbackOrSetter;
+    onOpenChange?: (isOpen: boolean) => void;
+    tabProps?: TabProps;
+}
+export {};

package/lib/cjs/types/searchNav.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Button/Buttons.styles.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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 { text as textVariants } from '../Text/Text.styles';
+import { searchNavTabLabel, text as textVariants } from '../Text/Text.styles';
 export var base = _objectSpread({
   cursor: 'pointer',
   height: '37px',
@@ -280,6 +280,21 @@ var exampleText = _objectSpread(_objectSpread({}, base), {}, {
 var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
   fontWeight: 0
 });
+var tabLabelButton = _objectSpread(_objectSpread({}, searchNavTabLabel), {}, {
+  backgroundColor: 'transparent',
+  mb: '10px',
+  p: '0px',
+  borderImage: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  '&.is-hovered': {
+    color: 'active',
+    cursor: 'pointer'
+  },
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    borderRadius: '4px'
+  })
+});
 export default {
   colorBlock: colorBlock,
   colorBlockPrimary: colorBlockPrimary,
@@ -306,5 +321,6 @@ export default {
   quiet: quiet,
   success: success,
   withIcon: withIcon,
-  filter: filter
+  filter: filter,
+  searchNavTabLabel: tabLabelButton
 };

package/lib/components/Card/Card.mdx

@@ -29,4 +29,8 @@ These keys provide additional functionality to the Interactive Card components.
 | Keys | Functions |
 | ---- | --------- |
 | Space or Enter | Selects the button. |
-| Tab | Focuses the button and follows the page tab sequence.|
+| Tab | Focuses the button and follows the page tab sequence.|
+
+### Note
+
+Use variant "cards.withShadow" to apply box-shadow on Card component.

package/lib/components/Card/Card.stories.js

@@ -191,4 +191,12 @@ export var RadioGroupCard = function RadioGroupCard(args) {
     },
     isInteractiveWithin: false
   }), "Active Card");
+};
+export var WithShadow = function WithShadow(args) {
+  return ___EmotionJSX(Box, {
+    bg: "backgroundSecondary",
+    p: "40px"
+  }, ___EmotionJSX(Card, _extends({}, args, {
+    variant: "cards.withShadow"
+  })));
 };

package/lib/components/SearchNav/MoreItemsPopover.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useEffect, useState } from 'react';
+import DownIcon from '@pingux/mdi-react/ChevronDownIcon';
+import UpIcon from '@pingux/mdi-react/ChevronUpIcon';
+import { Box, Button, Icon, Item, Menu, PopoverMenu } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var MoreItemsPopover = function MoreItemsPopover(props) {
+  var buttonRef = props.buttonRef,
+    items = props.items,
+    moreButtonText = props.moreButtonText,
+    onOpenChange = props.onOpenChange,
+    popoverButtonProps = props.popoverButtonProps,
+    popoverMenuProps = props.popoverMenuProps,
+    popoverProps = props.popoverProps,
+    setSelectedKey = props.setSelectedKey,
+    tabProps = props.tabProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  useEffect(function () {
+    if (onOpenChange) {
+      onOpenChange(isOpen);
+    }
+  }, [isOpen]);
+  return ___EmotionJSX(Box, _extends({
+    role: "listitem",
+    variant: "searchNav.tab",
+    isRow: true,
+    alignItems: "center",
+    ml: "sm"
+  }, tabProps), ___EmotionJSX(PopoverMenu, _extends({}, popoverProps, {
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }), ___EmotionJSX(Button, _extends({
+    tabIndex: 0,
+    variant: "searchNavTabLabel",
+    ref: buttonRef
+  }, popoverButtonProps), moreButtonText, ___EmotionJSX(Icon, {
+    icon: isOpen ? UpIcon : DownIcon,
+    ml: "2px",
+    mt: "2px",
+    size: 13,
+    title: {
+      name: 'Add Circle Icon'
+    }
+  })), ___EmotionJSX(Menu, _extends({
+    onAction: function onAction(e) {
+      setSelectedKey(e);
+    }
+  }, popoverMenuProps), _mapInstanceProperty(items).call(items, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      textValue: item.text
+    }, item.text);
+  }))));
+};
+export default MoreItemsPopover;

package/lib/components/SearchNav/SearchNav.chromatic.stories.js

@@ -0,0 +1,86 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import React, { useState } from 'react';
+import { Box, SearchNav, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Search Nav Responsive'
+};
+var items = [{
+  text: 'Overview',
+  key: 'Overview',
+  children: ___EmotionJSX(Text, null, "Overview")
+}, {
+  text: 'Configuration',
+  key: 'Configuration',
+  children: ___EmotionJSX(Text, null, "Configuration")
+}, {
+  text: 'Resources',
+  key: 'Resources',
+  children: ___EmotionJSX(Text, null, "Resources")
+}, {
+  text: 'Policies',
+  key: 'Policies',
+  children: ___EmotionJSX(Text, null, "Policies")
+}, {
+  text: 'Attribute Mappings',
+  key: 'Attribute Mappings',
+  children: ___EmotionJSX(Text, null, "Attribute body")
+}, {
+  text: 'Access',
+  key: 'Access',
+  children: ___EmotionJSX(Text, null, "Access")
+}, {
+  text: 'Integration',
+  key: 'Integration',
+  children: ___EmotionJSX(Text, null, "Integration")
+}];
+export var Default = function Default() {
+  var _items$find, _items$find2, _items$find3;
+  var _useState = useState('Access'),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  var setSelectedKeyCallback = function setSelectedKeyCallback(e) {
+    setSelectedKey(e);
+  };
+  return ___EmotionJSX(Box, {
+    gap: "md"
+  }, ___EmotionJSX(Box, {
+    maxWidth: "600px"
+  }, ___EmotionJSX(SearchNav, {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), ___EmotionJSX(Box, {
+    p: "sm"
+  }, (_items$find = _findInstanceProperty(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find === void 0 ? void 0 : _items$find.children)), ___EmotionJSX(Box, {
+    maxWidth: "400px"
+  }, ___EmotionJSX(SearchNav, {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), ___EmotionJSX(Box, {
+    p: "sm"
+  }, (_items$find2 = _findInstanceProperty(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find2 === void 0 ? void 0 : _items$find2.children)), ___EmotionJSX(Box, {
+    maxWidth: "200px"
+  }, ___EmotionJSX(SearchNav, {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), ___EmotionJSX(Box, {
+    p: "sm"
+  }, (_items$find3 = _findInstanceProperty(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find3 === void 0 ? void 0 : _items$find3.children)));
+};