@pingux/astro 2.106.0-alpha.1 → 2.106.0-alpha.3

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

@@ -38,6 +38,7 @@ declare const _default: {
             base: string;
             secondary: string;
             card: string;
+            suggestion: string;
         };
         iconWrapper: {
             wrapper: {
@@ -1806,6 +1807,44 @@ declare const _default: {
             fontWeight: number;
             flex: string;
         };
+        suggestionColumn: {
+            display: string;
+            backgroundColor: string;
+            borderRadius: string;
+            p: string;
+            '&.is-hovered': {
+                cursor: string;
+                backgroundColor: string;
+            };
+            gap: string;
+            flexGrow: number;
+            transition: string;
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+                backgroundColor: string;
+            };
+        };
+        suggestionRow: {
+            display: string;
+            backgroundColor: string;
+            borderRadius: string;
+            p: string;
+            '&.is-hovered': {
+                cursor: string;
+                backgroundColor: string;
+            };
+            gap: string;
+            flexGrow: number;
+            transition: string;
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+                backgroundColor: string;
+            };
+        };
     };
     variants: {
         navBar: {
@@ -2480,6 +2519,22 @@ declare const _default: {
                 backgroundColor: string;
             };
         };
+        suggestions: {
+            justifyContent: string;
+            gap: string;
+            flexDirection: string;
+            '&.is-full-screen': {
+                gap: string;
+                flexDirection: string;
+            };
+        };
+        suggestion: {
+            iconContainer: {
+                ml: string;
+                mr: string;
+                minWidth: string;
+            };
+        };
         response: {
             iconWrapper: {
                 border: string;

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

@@ -72,5 +72,43 @@ declare const _default: {
         fontWeight: number;
         flex: string;
     };
+    suggestionColumn: {
+        display: string;
+        backgroundColor: string;
+        borderRadius: string;
+        p: string;
+        '&.is-hovered': {
+            cursor: string;
+            backgroundColor: string;
+        };
+        gap: string;
+        flexGrow: number;
+        transition: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+            backgroundColor: string;
+        };
+    };
+    suggestionRow: {
+        display: string;
+        backgroundColor: string;
+        borderRadius: string;
+        p: string;
+        '&.is-hovered': {
+            cursor: string;
+            backgroundColor: string;
+        };
+        gap: string;
+        flexGrow: number;
+        transition: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+            backgroundColor: string;
+        };
+    };
 };
 export default _default;

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

@@ -57,11 +57,37 @@ var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
     bg: 'default'
   }
 });
+var baseSuggestion = {
+  backgroundColor: 'light',
+  borderRadius: '4px',
+  p: 'md',
+  '&.is-hovered': {
+    cursor: 'pointer',
+    backgroundColor: 'background.suggestion'
+  },
+  gap: 'md',
+  flexGrow: 1,
+  transition: 'all .2s ease',
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0px',
+    backgroundColor: 'background.suggestion'
+  }
+};
+var suggestionRow = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
+  display: 'flex'
+});
+var suggestionColumn = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
+  display: 'flex'
+});
 var _default = {
   interactive: interactive,
   dark: dark,
   light: light,
   activeCard: activeCard,
-  container: container
+  container: container,
+  suggestionColumn: suggestionColumn,
+  suggestionRow: suggestionRow
 };
 exports["default"] = _default;

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    iconContainer: {
+        ml: string;
+        mr: string;
+        minWidth: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,16 @@
+"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 iconContainer = {
+  ml: 'auto',
+  mr: '0px',
+  minWidth: '25px'
+};
+var _default = {
+  iconContainer: iconContainer
+};
+exports["default"] = _default;

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

@@ -0,0 +1,10 @@
+declare const _default: {
+    justifyContent: string;
+    gap: string;
+    flexDirection: string;
+    '&.is-full-screen': {
+        gap: string;
+        flexDirection: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,17 @@
+"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 _default = {
+  justifyContent: 'space-between',
+  gap: 'sm',
+  flexDirection: 'column',
+  '&.is-full-screen': {
+    gap: 'lg',
+    flexDirection: 'row'
+  }
+};
+exports["default"] = _default;

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

@@ -879,6 +879,22 @@ declare const _default: {
             backgroundColor: string;
         };
     };
+    suggestions: {
+        justifyContent: string;
+        gap: string;
+        flexDirection: string;
+        '&.is-full-screen': {
+            gap: string;
+            flexDirection: string;
+        };
+    };
+    suggestion: {
+        iconContainer: {
+            ml: string;
+            mr: string;
+            minWidth: string;
+        };
+    };
     response: {
         iconWrapper: {
             border: string;

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

@@ -24,6 +24,8 @@ var _messages = require("./messages");
 var _navbar = require("./navbar");
 var _prompt = _interopRequireDefault(require("./prompt"));
 var _response = _interopRequireDefault(require("./response"));
+var _suggestion = _interopRequireDefault(require("./suggestion"));
+var _suggestions = _interopRequireDefault(require("./suggestions"));
 var _tabs = require("./tabs");
 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) { (0, _defineProperty2["default"])(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; }
@@ -328,6 +330,8 @@ var _default = {
   menu: _menu.menu,
   iconWrapper: _iconWrapper["default"],
   overlayPanel: overlayPanel,
+  suggestions: _suggestions["default"],
+  suggestion: _suggestion["default"],
   response: _response["default"]
 };
 exports["default"] = _default;

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

@@ -0,0 +1,13 @@
+import { BoxProps } from './box';
+import { CardProps } from './card';
+import { IconProps } from './icon';
+import { TextProps } from './text';
+export interface SuggestionProps extends CardProps {
+    iconProps?: IconProps;
+    textProps?: TextProps;
+    text: string;
+    isFullScreen?: boolean;
+}
+export interface SuggestionsProps extends BoxProps {
+    isFullScreen?: boolean;
+}

package/lib/cjs/types/suggestions.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/AIComponents/Suggestions/Suggestion.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["isFullScreen", "text", "textProps", "iconProps"];
+import React from 'react';
+import PlusIcon from '@pingux/mdi-react/PlusIcon';
+import { Box, Card, Icon, Text } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Suggestion = function Suggestion(props) {
+  var isFullScreen = props.isFullScreen,
+    text = props.text,
+    textProps = props.textProps,
+    iconProps = props.iconProps,
+    others = _objectWithoutProperties(props, _excluded);
+  if (isFullScreen) {
+    return ___EmotionJSX(Card, _extends({
+      variant: "cards.suggestionColumn",
+      tabIndex: "0"
+    }, others), ___EmotionJSX(Icon, _extends({
+      icon: PlusIcon
+    }, iconProps)), ___EmotionJSX(Text, _extends({
+      variant: "suggestion"
+    }, textProps), text));
+  }
+  return ___EmotionJSX(Card, _extends({
+    variant: "cards.suggestionRow",
+    isRow: true,
+    alignItems: "center",
+    tabIndex: "0"
+  }, others), ___EmotionJSX(Text, _extends({
+    variant: "suggestion"
+  }, textProps), text), ___EmotionJSX(Box, {
+    variant: "suggestion.iconContainer"
+  }, ___EmotionJSX(Icon, _extends({
+    icon: PlusIcon
+  }, iconProps))));
+};
+export default Suggestion;

package/lib/components/AIComponents/Suggestions/Suggestions.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "isFullScreen", "className"];
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { Children } from 'react';
+import { useStatusClasses } from '../../../hooks';
+import { Box } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Suggestions = function Suggestions(props) {
+  var children = props.children,
+    isFullScreen = props.isFullScreen,
+    className = props.className,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useStatusClasses = useStatusClasses(className, {
+      isFullScreen: isFullScreen
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(Box, _extends({}, others, {
+    className: classNames,
+    isRow: isFullScreen,
+    variant: "suggestions"
+  }), _mapInstanceProperty(Children).call(Children, children, function (child) {
+    return ___EmotionJSX(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
+      isFullScreen: isFullScreen
+    }));
+  }));
+};
+export default Suggestions;

package/lib/components/AIComponents/Suggestions/Suggestions.stories.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { AstroWrapper, NextGenTheme } from '../../../index';
+import Suggestion from './Suggestion';
+import Suggestions from './Suggestions';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Ai Components/Suggestions',
+  component: Suggestions
+};
+var lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+export var Default = function Default() {
+  return ___EmotionJSX(AstroWrapper, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(Suggestions, null, ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  })));
+};
+export var FullScreen = function FullScreen() {
+  return ___EmotionJSX(AstroWrapper, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(Suggestions, {
+    isFullScreen: true
+  }, ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  })));
+};

package/lib/components/AIComponents/Suggestions/Suggestions.test.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../..';
+import { render, screen } from '../../../utils/testUtils/testWrapper';
+import Suggestion from './Suggestion';
+import Suggestions from './Suggestions';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var containerTestId = 'suggestions-container';
+var defaultProps = {
+  isFullScreen: false,
+  'data-testid': containerTestId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(AstroProvider, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(Suggestions, _extends({}, defaultProps, props), ___EmotionJSX(Suggestion, {
+    text: "Suggestion 1"
+  }))));
+};
+test('Suggestions component renders correctly', function () {
+  _Object$defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(function (query) {
+      return {
+        matches: query === '(max-width: 993px)',
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn()
+      };
+    })
+  });
+  getComponent();
+  expect(screen.getAllByText('Suggestion 1')[0]).toBeInTheDocument();
+});
+test('Suggestions component applies isFullScreen prop correctly', function () {
+  getComponent({
+    isFullScreen: true
+  });
+  var suggestions = screen.getByTestId(containerTestId);
+  expect(suggestions).toHaveClass('is-full-screen');
+});

package/lib/components/AIComponents/Suggestions/index.js

@@ -0,0 +1,2 @@
+export { default as Suggestion } from './Suggestion';
+export { default } from './Suggestions';

package/lib/components/NavigationHeader/HeaderAccountMenu.js

@@ -6,7 +6,8 @@ import useGetTheme from '../../hooks/useGetTheme';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var HeaderAccountMenu = function HeaderAccountMenu(props) {
   var userData = props.userData,
-    avatarProps = props.avatarProps;
+    avatarProps = props.avatarProps,
+    buttonProps = props.buttonProps;
   var _ref = userData || {},
     image = _ref.image,
     firstName = _ref.firstName,
@@ -15,9 +16,9 @@ var HeaderAccountMenu = function HeaderAccountMenu(props) {
   var _useGetTheme = useGetTheme(),
     icons = _useGetTheme.icons;
   var MenuDown = icons.MenuDown;
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, _extends({
     variant: "navigationHeader.accountButton"
-  }, ___EmotionJSX(Box, {
+  }, buttonProps), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
     gap: "xs"