@pingux/astro 2.120.0 → 2.121.0-alpha.0

package/lib/cjs/components/Text/Text.styles.js

@@ -129,6 +129,9 @@ var HTags = {
     lineHeight: '16px'
   })
 };
+var attachmentTitle = _objectSpread(_objectSpread(_objectSpread({}, base), textEllipsis), {}, {
+  fontWeight: 2
+});
 var text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -235,6 +238,7 @@ var text = _objectSpread(_objectSpread(_objectSpread({
     fontFamily: 'standard'
   }),
   textEllipsis: textEllipsis,
-  title: title
+  title: title,
+  attachmentTitle: attachmentTitle
 });
 exports.text = text;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts

@@ -49,6 +49,7 @@ export declare const colors: {
         dark: string;
         input: string;
         separator: string;
+        attachment: string;
     };
     iconWrapper: {
         wrapper: {
@@ -60,6 +61,11 @@ export declare const colors: {
             red: string;
             yellow: string;
             teal: string;
+            lightBlue: string;
+            lightPink: string;
+            lightGreen: string;
+            lightYellow: string;
+            lightIndigo: string;
         };
         icon: {
             orange: string;
@@ -70,6 +76,11 @@ export declare const colors: {
             red: string;
             yellow: string;
             teal: string;
+            lightBlue: string;
+            lightPink: string;
+            lightGreen: string;
+            lightYellow: string;
+            lightIndigo: string;
         };
     };
 };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -30,7 +30,8 @@ var border = {
   base: _chromaJs["default"].mix('#23282e', 'white', 0.15, 'rgb').hex(),
   dark: _chromaJs["default"].mix('#23282e', 'white', 0.25, 'rgb').hex(),
   input: _colorTokens.nextGenColors['gray-500'],
-  separator: _chromaJs["default"].mix('#23282e', 'white', 0.15, 'rgb').hex()
+  separator: _chromaJs["default"].mix('#23282e', 'white', 0.15, 'rgb').hex(),
+  attachment: '#39414b'
 };
 var iconWrapper = {
   wrapper: {
@@ -41,7 +42,12 @@ var iconWrapper = {
     pink: _colorTokens.nextGenColors['pink-500'],
     red: _colorTokens.nextGenColors['red-500'],
     yellow: _colorTokens.nextGenColors['yellow-500'],
-    teal: _colorTokens.nextGenColors['teal-500']
+    teal: _colorTokens.nextGenColors['teal-500'],
+    lightBlue: _colorTokens.nextGenColors['blue-600'],
+    lightPink: _colorTokens.nextGenColors['pink-600'],
+    lightGreen: _colorTokens.nextGenColors['green-800'],
+    lightYellow: _colorTokens.nextGenColors['yellow-800'],
+    lightIndigo: _colorTokens.nextGenColors['indigo-700']
   },
   icon: {
     orange: 'black',
@@ -51,7 +57,12 @@ var iconWrapper = {
     pink: 'black',
     red: 'black',
     yellow: 'black',
-    teal: 'black'
+    teal: 'black',
+    lightBlue: _colorTokens.nextGenColors['blue-100'],
+    lightPink: _colorTokens.nextGenColors['pink-100'],
+    lightGreen: _colorTokens.nextGenColors['green-100'],
+    lightYellow: _colorTokens.nextGenColors['yellow-100'],
+    lightIndigo: _colorTokens.nextGenColors['indigo-100']
   }
 };
 var colors = _objectSpread(_objectSpread({

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts

@@ -80,6 +80,13 @@ declare const buttons: {
                 };
             };
         };
+        deleteAttachment: {
+            backgroundColor: string;
+            borderColor: string;
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+        };
     };
 };
 export default buttons;

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

@@ -54,6 +54,13 @@ var iconButtons = {
         fill: 'black'
       }
     }
+  },
+  deleteAttachment: {
+    backgroundColor: 'background.secondary',
+    borderColor: 'border.attachment',
+    '&.is-hovered': {
+      backgroundColor: '#0a0b0d'
+    }
   }
 };
 var buttons = {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -1,4 +1,10 @@
 declare const _default: {
+    attachment: {
+        container: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
     avatar: {
         backgroundColor: string;
         color: string;

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

@@ -62,7 +62,14 @@ var modal = {
     bg: 'background.base'
   }
 };
+var attachment = {
+  container: {
+    backgroundColor: 'background.secondary',
+    borderColor: 'border.attachment'
+  }
+};
 var _default = {
+  attachment: attachment,
   avatar: _avatar.avatar,
   message: _message.message,
   menu: _menu.menu,

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

@@ -62,6 +62,11 @@ declare const colors: {
             red: string;
             yellow: string;
             teal: string;
+            lightBlue: string;
+            lightPink: string;
+            lightGreen: string;
+            lightYellow: string;
+            lightIndigo: string;
         };
         icon: {
             orange: string;
@@ -72,6 +77,11 @@ declare const colors: {
             red: string;
             yellow: string;
             teal: string;
+            lightBlue: string;
+            lightPink: string;
+            lightGreen: string;
+            lightYellow: string;
+            lightIndigo: string;
         };
     };
     neutral: {

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

@@ -8,6 +8,11 @@ export declare const iconWrapper: {
         red: string;
         yellow: string;
         teal: string;
+        lightBlue: string;
+        lightPink: string;
+        lightGreen: string;
+        lightYellow: string;
+        lightIndigo: string;
     };
     icon: {
         orange: string;
@@ -18,5 +23,10 @@ export declare const iconWrapper: {
         red: string;
         yellow: string;
         teal: string;
+        lightBlue: string;
+        lightPink: string;
+        lightGreen: string;
+        lightYellow: string;
+        lightIndigo: string;
     };
 };

package/lib/cjs/styles/themes/next-gen/colors/iconWrapper.js

@@ -15,7 +15,12 @@ var iconWrapper = {
     pink: _colorTokens.nextGenColors['pink-100'],
     red: _colorTokens.nextGenColors['red-100'],
     yellow: _colorTokens.nextGenColors['yellow-100'],
-    teal: _colorTokens.nextGenColors['teal-100']
+    teal: _colorTokens.nextGenColors['teal-100'],
+    lightBlue: _colorTokens.nextGenColors['blue-100'],
+    lightPink: _colorTokens.nextGenColors['pink-100'],
+    lightGreen: _colorTokens.nextGenColors['green-100'],
+    lightYellow: _colorTokens.nextGenColors['yellow-100'],
+    lightIndigo: _colorTokens.nextGenColors['indigo-100']
   },
   icon: {
     orange: _colorTokens.nextGenColors['orange-800'],
@@ -25,7 +30,12 @@ var iconWrapper = {
     pink: _colorTokens.nextGenColors['pink-800'],
     red: _colorTokens.nextGenColors['red-800'],
     yellow: _colorTokens.nextGenColors['yellow-800'],
-    teal: _colorTokens.nextGenColors['teal-800']
+    teal: _colorTokens.nextGenColors['teal-800'],
+    lightBlue: _colorTokens.nextGenColors['blue-500'],
+    lightPink: _colorTokens.nextGenColors['pink-600'],
+    lightGreen: _colorTokens.nextGenColors['green-800'],
+    lightYellow: _colorTokens.nextGenColors['yellow-800'],
+    lightIndigo: _colorTokens.nextGenColors['indigo-700']
   }
 };
 exports.iconWrapper = iconWrapper;

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

@@ -50,6 +50,11 @@ declare const _default: {
                 red: string;
                 yellow: string;
                 teal: string;
+                lightBlue: string;
+                lightPink: string;
+                lightGreen: string;
+                lightYellow: string;
+                lightIndigo: string;
             };
             icon: {
                 orange: string;
@@ -60,6 +65,11 @@ declare const _default: {
                 red: string;
                 yellow: string;
                 teal: string;
+                lightBlue: string;
+                lightPink: string;
+                lightGreen: string;
+                lightYellow: string;
+                lightIndigo: string;
             };
         };
         neutral: {
@@ -953,6 +963,9 @@ declare const _default: {
                 borderColor: string;
                 size: string;
                 p: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
                 cursor: string;
                 transition: string;
                 outline: string;
@@ -965,12 +978,6 @@ declare const _default: {
                     outlineColor: string;
                     outlineOffset: string;
                 };
-                '&.is-hovered': {
-                    backgroundColor: string;
-                    path: {
-                        fill: string;
-                    };
-                };
                 '&.is-pressed': {
                     backgroundColor: string;
                     borderColor: string;

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

@@ -720,6 +720,9 @@ declare const buttons: {
             borderColor: string;
             size: string;
             p: string;
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
             cursor: string;
             transition: string;
             outline: string;
@@ -732,12 +735,6 @@ declare const buttons: {
                 outlineColor: string;
                 outlineOffset: string;
             };
-            '&.is-hovered': {
-                backgroundColor: string;
-                path: {
-                    fill: string;
-                };
-            };
             '&.is-pressed': {
                 backgroundColor: string;
                 borderColor: string;

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

@@ -307,11 +307,14 @@ var iconButtons = {
   }),
   copyButton: _codeView.copyButton,
   deleteAttachment: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    backgroundColor: 'white',
+    backgroundColor: 'light',
     border: '1px solid',
     borderColor: 'gray-300',
     size: '24px',
-    p: '4px'
+    p: '4px',
+    '&.is-hovered': {
+      backgroundColor: '#dde5ec'
+    }
   }),
   inverted: {
     cursor: 'pointer',

package/lib/components/AIComponents/Attachment/Attachment.js

@@ -15,6 +15,7 @@ import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import PaperOutlineIcon from '@pingux/mdi-react/PaperOutlineIcon';
 import { useStatusClasses } from '../../../hooks';
 import { Box, Icon, IconButton, IconWrapper, Text } from '../../../index';
+import { fileTypeConfig } from './constants';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var getFileExtension = function getFileExtension(fullString) {
   var fileExtensionPattern = /\.([0-9a-z]+)(?:[?#]|$)/i;
@@ -33,12 +34,16 @@ var Attachment = function Attachment(props) {
     id = props.id,
     containerProps = props.containerProps,
     iconWrapperProps = props.iconWrapperProps,
-    icon = props.icon,
     deleteButtonProps = props.deleteButtonProps;
   var _useStatusClasses = useStatusClasses(className, {
       isFullScreen: isFullScreen
     }),
     classNames = _useStatusClasses.classNames;
+  var defaultIconProps = {
+    icon: PaperOutlineIcon,
+    color: 'lightBlue'
+  };
+  var iconProps = fileTypeConfig[fileType] || defaultIconProps;
   return ___EmotionJSX(Box, _extends({
     variant: "attachment.container",
     className: classNames
@@ -47,13 +52,11 @@ var Attachment = function Attachment(props) {
     alignItems: "center",
     px: "lg",
     py: "md"
-  }, ___EmotionJSX(IconWrapper, {
+  }, ___EmotionJSX(IconWrapper, _extends({
     isCircle: true,
     title: {
-      name: 'File Icon'
+      name: "".concat(fileType, " File Icon")
     },
-    icon: icon,
-    color: "red",
     size: "sm",
     wrapperProps: _objectSpread({
       size: '36px',
@@ -61,18 +64,13 @@ var Attachment = function Attachment(props) {
       minWidth: '36px',
       p: '9px'
     }, iconWrapperProps)
-  }), ___EmotionJSX(Box, {
+  }, iconProps)), ___EmotionJSX(Box, {
     sx: {
       ml: 'md'
     }
   }, ___EmotionJSX(Text, {
     as: "h5",
-    sx: {
-      fontWeight: 2,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden'
-    }
+    variant: "attachmentTitle"
   }, title), ___EmotionJSX(Text, {
     sx: {
       textOverflow: 'ellipsis'
@@ -94,7 +92,4 @@ var Attachment = function Attachment(props) {
     icon: CloseIcon
   }))));
 };
-Attachment.defaultProps = {
-  icon: PaperOutlineIcon
-};
 export default Attachment;

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

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '../../../utils/testUtils/testWrapper';
+import Attachment from './Attachment';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var mockFileName = 'sampleFile';
+var defaultProps = {
+  key: 'file_key',
+  title: mockFileName,
+  fileType: 'PPT',
+  removeFile: function removeFile() {
+    return false;
+  },
+  id: 'Example Title'
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Attachment, _extends({}, defaultProps, props)));
+};
+describe('Attachment', function () {
+  test('renders with PPT file format ', function () {
+    getComponent();
+    screen.getByRole('img', {
+      name: /ppt file icon/i
+    });
+    screen.getByRole('heading', {
+      name: mockFileName
+    });
+    screen.getAllByText(/ppt/i);
+    screen.getByRole('button', {
+      name: /remove attachment/i
+    });
+  });
+  test('renders with PDF file format', function () {
+    getComponent({
+      fileType: 'pdf'
+    });
+    screen.getByRole('img', {
+      name: /pdf file icon/i
+    });
+    screen.getByRole('heading', {
+      name: mockFileName
+    });
+    screen.getAllByText(/pdf/i);
+  });
+  test('renders with CSV file format', function () {
+    getComponent({
+      fileType: 'csv'
+    });
+    screen.getAllByText(/csv/i);
+  });
+  test('renders with JS file format', function () {
+    getComponent({
+      fileType: 'js'
+    });
+    screen.getAllByText(/js/i);
+  });
+  test('renders with ZIP file format', function () {
+    getComponent({
+      fileType: 'zip'
+    });
+    screen.getAllByText(/zip/i);
+  });
+});

package/lib/components/AIComponents/Attachment/constants.js

@@ -0,0 +1,42 @@
+import CodeTagsIcon from '@pingux/mdi-react/CodeTagsIcon';
+import FileDocumentOutlineIcon from '@pingux/mdi-react/FileDocumentOutlineIcon';
+import FolderZipOutlineIcon from '@pingux/mdi-react/FolderZipOutlineIcon';
+import TableLargeIcon from '@pingux/mdi-react/TableLargeIcon';
+export var fileTypeConfig = {
+  pdf: {
+    icon: FileDocumentOutlineIcon,
+    color: 'lightPink'
+  },
+  doc: {
+    icon: FileDocumentOutlineIcon,
+    color: 'lightPink'
+  },
+  docx: {
+    icon: FileDocumentOutlineIcon,
+    color: 'lightPink'
+  },
+  text: {
+    icon: FileDocumentOutlineIcon,
+    color: 'lightPink'
+  },
+  csv: {
+    icon: TableLargeIcon,
+    color: 'lightGreen'
+  },
+  xls: {
+    icon: TableLargeIcon,
+    color: 'lightGreen'
+  },
+  xlsx: {
+    icon: TableLargeIcon,
+    color: 'lightGreen'
+  },
+  js: {
+    icon: CodeTagsIcon,
+    color: 'lightYellow'
+  },
+  zip: {
+    icon: FolderZipOutlineIcon,
+    color: 'lightIndigo'
+  }
+};

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

@@ -13,7 +13,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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, { useState } from 'react';
 import DocsLayout from '../../../../.storybook/storybookDocsLayout';
-import { AstroProvider, Box, NextGenTheme } from '../../..';
+import { Box } from '../../..';
 import { booleanArg } from '../../../utils/docUtils/docArgTypes';
 import PromptInput from './PromptInput';
 import PromptInputReadMe from './PromptInputReadMe.mdx';
@@ -54,9 +54,7 @@ export var Default = function Default(args) {
     console.log('submit');
     setValue('');
   };
-  return ___EmotionJSX(AstroProvider, {
-    themeOverrides: [NextGenTheme]
-  }, ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, {
     maxWidth: "768px"
   }, ___EmotionJSX(PromptInput, _extends({}, args, {
     placeholder: "Enter a prompt here",
@@ -68,5 +66,5 @@ export var Default = function Default(args) {
     onFileChange: onFileChange,
     onSubmit: onSubmit,
     onCancel: onCancel
-  }))));
+  })));
 };

package/lib/components/Text/Text.styles.js

@@ -120,6 +120,9 @@ var HTags = {
     lineHeight: '16px'
   })
 };
+var attachmentTitle = _objectSpread(_objectSpread(_objectSpread({}, base), textEllipsis), {}, {
+  fontWeight: 2
+});
 export var text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -226,5 +229,6 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
     fontFamily: 'standard'
   }),
   textEllipsis: textEllipsis,
-  title: title
+  title: title,
+  attachmentTitle: attachmentTitle
 });

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -22,7 +22,8 @@ var border = {
   base: chroma.mix('#23282e', 'white', 0.15, 'rgb').hex(),
   dark: chroma.mix('#23282e', 'white', 0.25, 'rgb').hex(),
   input: nextGenColors['gray-500'],
-  separator: chroma.mix('#23282e', 'white', 0.15, 'rgb').hex()
+  separator: chroma.mix('#23282e', 'white', 0.15, 'rgb').hex(),
+  attachment: '#39414b'
 };
 var iconWrapper = {
   wrapper: {
@@ -33,7 +34,12 @@ var iconWrapper = {
     pink: nextGenColors['pink-500'],
     red: nextGenColors['red-500'],
     yellow: nextGenColors['yellow-500'],
-    teal: nextGenColors['teal-500']
+    teal: nextGenColors['teal-500'],
+    lightBlue: nextGenColors['blue-600'],
+    lightPink: nextGenColors['pink-600'],
+    lightGreen: nextGenColors['green-800'],
+    lightYellow: nextGenColors['yellow-800'],
+    lightIndigo: nextGenColors['indigo-700']
   },
   icon: {
     orange: 'black',
@@ -43,7 +49,12 @@ var iconWrapper = {
     pink: 'black',
     red: 'black',
     yellow: 'black',
-    teal: 'black'
+    teal: 'black',
+    lightBlue: nextGenColors['blue-100'],
+    lightPink: nextGenColors['pink-100'],
+    lightGreen: nextGenColors['green-100'],
+    lightYellow: nextGenColors['yellow-100'],
+    lightIndigo: nextGenColors['indigo-100']
   }
 };
 export var colors = _objectSpread(_objectSpread({

package/lib/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -47,6 +47,13 @@ var iconButtons = {
         fill: 'black'
       }
     }
+  },
+  deleteAttachment: {
+    backgroundColor: 'background.secondary',
+    borderColor: 'border.attachment',
+    '&.is-hovered': {
+      backgroundColor: '#0a0b0d'
+    }
   }
 };
 var buttons = {

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -54,7 +54,14 @@ var modal = {
     bg: 'background.base'
   }
 };
+var attachment = {
+  container: {
+    backgroundColor: 'background.secondary',
+    borderColor: 'border.attachment'
+  }
+};
 export default {
+  attachment: attachment,
   avatar: avatar,
   message: message,
   menu: menu,

package/lib/styles/themes/next-gen/colors/iconWrapper.js

@@ -8,7 +8,12 @@ export var iconWrapper = {
     pink: nextGenColors['pink-100'],
     red: nextGenColors['red-100'],
     yellow: nextGenColors['yellow-100'],
-    teal: nextGenColors['teal-100']
+    teal: nextGenColors['teal-100'],
+    lightBlue: nextGenColors['blue-100'],
+    lightPink: nextGenColors['pink-100'],
+    lightGreen: nextGenColors['green-100'],
+    lightYellow: nextGenColors['yellow-100'],
+    lightIndigo: nextGenColors['indigo-100']
   },
   icon: {
     orange: nextGenColors['orange-800'],
@@ -18,6 +23,11 @@ export var iconWrapper = {
     pink: nextGenColors['pink-800'],
     red: nextGenColors['red-800'],
     yellow: nextGenColors['yellow-800'],
-    teal: nextGenColors['teal-800']
+    teal: nextGenColors['teal-800'],
+    lightBlue: nextGenColors['blue-500'],
+    lightPink: nextGenColors['pink-600'],
+    lightGreen: nextGenColors['green-800'],
+    lightYellow: nextGenColors['yellow-800'],
+    lightIndigo: nextGenColors['indigo-700']
   }
 };

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

@@ -300,11 +300,14 @@ var iconButtons = {
   }),
   copyButton: copyButton,
   deleteAttachment: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    backgroundColor: 'white',
+    backgroundColor: 'light',
     border: '1px solid',
     borderColor: 'gray-300',
     size: '24px',
-    p: '4px'
+    p: '4px',
+    '&.is-hovered': {
+      backgroundColor: '#dde5ec'
+    }
   }),
   inverted: {
     cursor: 'pointer',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.120.0",
+  "version": "2.121.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",