@pingux/astro 2.121.0-alpha.0 → 2.121.0-alpha.2

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

@@ -4,14 +4,20 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.listViewItem = exports.listView = void 0;
+exports.listViewItem = exports.listView = exports.lisViewItemChart = exports.focusBoxShadow = exports.borderRadius = void 0;
+var focusBoxShadow = '0 0 0 3px inset #1a73e8';
+exports.focusBoxShadow = focusBoxShadow;
+var borderRadius = '16px';
+exports.borderRadius = borderRadius;
 var listViewItem = {
   rightOfData: {
-    flexShrink: 4,
     whiteSpace: 'nowrap'
   },
   iconContainer: {
-    ml: '0px'
+    ml: '0'
+  },
+  imageWrapper: {
+    ml: 'md'
   },
   styledListItem: {
     bg: 'white',
@@ -27,13 +33,22 @@ var listViewItem = {
       bg: 'gray-100'
     },
     '&.is-focused': {
-      boxShadow: '0 0 0 3px inset #1a73e8',
+      boxShadow: focusBoxShadow,
       bg: 'gray-100'
+    },
+    '&.is-first-item': {
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius
+    },
+    '&.is-last-item': {
+      borderBottomLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius,
+      '&.has-separator': {
+        border: 'none'
+      }
     }
   },
   styledContainer: {
-    py: 'md',
-    px: 'lg',
     bg: 'transparent',
     '&.is-hovered': {
       bg: 'transparent',
@@ -41,37 +56,87 @@ var listViewItem = {
     }
   },
   expandableStyledListItem: {
-    pr: '1.25rem',
-    pl: 0
+    px: 'lg',
+    bg: 'background.base',
+    '&.is-first-item': {
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius
+    },
+    '&.is-last-item': {
+      borderBottomLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius,
+      '&.is-hovered, &.is-expanded': {
+        borderBottomLeftRadius: '0',
+        borderBottomRightRadius: '0'
+      }
+    },
+    '&.is-hovered': {
+      bg: 'gray-100'
+    },
+    '&.is-selected': {
+      bg: 'gray-100'
+    },
+    '&.is-focused': {
+      boxShadow: focusBoxShadow,
+      bg: 'gray-100'
+    }
   },
   expandableItemBody: {
-    px: '1.5rem'
+    px: 'lg',
+    outline: 'none',
+    '&.is-last-item-body': {
+      borderBottomLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius
+    },
+    '&.is-focused': {
+      boxShadow: focusBoxShadow
+    }
   },
   expandableRow: {
     '&.has-separator': {
       borderBottom: '1px solid',
       borderBottomColor: 'border.base'
+    },
+    '&.has-separator.is-last-row': {
+      border: 'none'
     }
+  },
+  editIcon: {
+    width: '1.5rem !important',
+    height: '1.5rem !important'
+  },
+  menuIcon: {
+    width: '1.5rem !important',
+    height: '1.5rem !important'
   }
 };
 exports.listViewItem = listViewItem;
 var listView = {
   container: {
-    borderRadius: '16px',
+    borderRadius: borderRadius,
     border: '1px solid',
-    borderColor: '#e7eef4',
-    '& > div > div': {
-      '& > div:first-of-type': {
-        '& > div > div': {
-          borderRadius: '16px 16px 0 0'
-        }
-      },
-      '& > div:last-of-type': {
-        '& > div > div': {
-          borderRadius: ' 0 0 16px 16px'
-        }
-      }
-    }
+    borderColor: '#e7eef4'
+  }
+};
+exports.listView = listView;
+var lisViewItemChart = {
+  title: {
+    color: 'gray-900'
+  },
+  count: {
+    color: 'gray-900'
+  },
+  countLabel: {
+    color: 'gray-900'
+  },
+  chartLabel: {
+    color: 'gray-900'
+  },
+  trend: {
+    color: 'gray-900'
+  },
+  chartButton: {
+    color: 'gray-900'
   }
 };
-exports.listView = listView;
+exports.lisViewItemChart = lisViewItemChart;

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

@@ -68,14 +68,26 @@ export declare const text: {
         lineHeight: string;
     };
     listViewItemText: {
+        fontFamily: string;
         color: string;
         fontWeight: number;
+        mb: string;
+        fontSize: string;
     };
-    small: {
+    listViewItemSubtext: {
         fontSize: string;
+        lineHeight: string;
         color: string;
+    };
+    itemTitle: {
+        fontWeight: number;
+        color: string;
+    };
+    small: {
+        fontSize: string;
         fontFamily: string;
         lineHeight: string;
+        color: string;
     };
     response: {
         color: string;

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

@@ -82,14 +82,26 @@ var text = _objectSpread(_objectSpread({
     lineHeight: 'body'
   },
   listViewItemText: {
-    color: 'text.secondary',
-    fontWeight: 2
+    fontFamily: 'standard',
+    color: 'text.primary',
+    fontWeight: 2,
+    mb: 'xs',
+    fontSize: 'md'
+  },
+  listViewItemSubtext: {
+    fontSize: 'md',
+    lineHeight: 'body',
+    color: 'gray-700'
+  },
+  itemTitle: {
+    fontWeight: 2,
+    color: 'text.primary'
   },
   small: {
     fontSize: 'sm',
-    color: 'text.primary',
     fontFamily: 'standard',
-    lineHeight: 'md'
+    lineHeight: 'md',
+    color: 'text.primary'
   },
   response: {
     color: 'text.primary',

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

@@ -605,12 +605,14 @@ declare const _default: {
     };
     listViewItem: {
         rightOfData: {
-            flexShrink: number;
             whiteSpace: string;
         };
         iconContainer: {
             ml: string;
         };
+        imageWrapper: {
+            ml: string;
+        };
         styledListItem: {
             bg: string;
             '&.is-selected': {
@@ -628,10 +630,19 @@ declare const _default: {
                 boxShadow: string;
                 bg: string;
             };
+            '&.is-first-item': {
+                borderTopLeftRadius: string;
+                borderTopRightRadius: string;
+            };
+            '&.is-last-item': {
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+                '&.has-separator': {
+                    border: string;
+                };
+            };
         };
         styledContainer: {
-            py: string;
-            px: string;
             bg: string;
             '&.is-hovered': {
                 bg: string;
@@ -639,17 +650,58 @@ declare const _default: {
             };
         };
         expandableStyledListItem: {
-            pr: string;
-            pl: number;
+            px: string;
+            bg: string;
+            '&.is-first-item': {
+                borderTopLeftRadius: string;
+                borderTopRightRadius: string;
+            };
+            '&.is-last-item': {
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+                '&.is-hovered, &.is-expanded': {
+                    borderBottomLeftRadius: string;
+                    borderBottomRightRadius: string;
+                };
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            '&.is-selected': {
+                bg: string;
+            };
+            '&.is-focused': {
+                boxShadow: string;
+                bg: string;
+            };
         };
         expandableItemBody: {
             px: string;
+            outline: string;
+            '&.is-last-item-body': {
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+            };
+            '&.is-focused': {
+                boxShadow: string;
+            };
         };
         expandableRow: {
             '&.has-separator': {
                 borderBottom: string;
                 borderBottomColor: string;
             };
+            '&.has-separator.is-last-row': {
+                border: string;
+            };
+        };
+        editIcon: {
+            width: string;
+            height: string;
+        };
+        menuIcon: {
+            width: string;
+            height: string;
         };
     };
     progressBar: {
@@ -670,18 +722,26 @@ declare const _default: {
             borderRadius: string;
             border: string;
             borderColor: string;
-            '& > div > div': {
-                '& > div:first-of-type': {
-                    '& > div > div': {
-                        borderRadius: string;
-                    };
-                };
-                '& > div:last-of-type': {
-                    '& > div > div': {
-                        borderRadius: string;
-                    };
-                };
-            };
+        };
+    };
+    lisViewItemChart: {
+        title: {
+            color: string;
+        };
+        count: {
+            color: string;
+        };
+        countLabel: {
+            color: string;
+        };
+        chartLabel: {
+            color: string;
+        };
+        trend: {
+            color: string;
+        };
+        chartButton: {
+            color: string;
         };
     };
     dataTable: {
@@ -1155,5 +1215,41 @@ declare const _default: {
             };
         };
     };
+    footer: {
+        container: {
+            fontFamily: string;
+            justifyContent: string;
+            backgroundColor: string;
+        };
+        wrapper: {
+            px: string[];
+            py: string;
+            maxWidth: string;
+            mx: string;
+            width: string;
+            flexDirection: string[];
+            justifyContent: string;
+            alignItems: string;
+        };
+        footerLeftSection: {
+            columnGap: string;
+            flexDirection: string[];
+        };
+        footerNav: {
+            listStyle: string;
+            margin: string;
+            padding: string;
+            alignItems: string;
+            justifyContent: string[];
+            gap: string;
+            flexWrap: string;
+            my: string;
+        };
+    };
+    loader: {
+        withinListView: {
+            color: string;
+        };
+    };
 };
 export default _default;

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

@@ -20,6 +20,7 @@ var _codeView = _interopRequireDefault(require("../codeView/codeView"));
 var _avatar = require("./avatar");
 var _button = _interopRequireDefault(require("./button"));
 var _dataTable = require("./dataTable");
+var _footer = require("./footer");
 var _iconWrapper = _interopRequireDefault(require("./iconWrapper"));
 var _listview = require("./listview");
 var _menu = require("./menu");
@@ -301,6 +302,11 @@ var overlayPanel = {
     backgroundColor: 'background.base'
   }
 };
+var loader = {
+  withinListView: {
+    color: 'active'
+  }
+};
 var _default = {
   attachment: _Attachment["default"],
   navBar: _navbar.navBar,
@@ -316,6 +322,7 @@ var _default = {
   listViewItem: _listview.listViewItem,
   progressBar: progressBar,
   listView: _listview.listView,
+  lisViewItemChart: _listview.lisViewItemChart,
   dataTable: _dataTable.dataTable,
   codeView: _codeView["default"],
   prompt: _prompt["default"],
@@ -326,6 +333,8 @@ var _default = {
   suggestions: _suggestions["default"],
   suggestion: _suggestion["default"],
   response: _response["default"],
-  skeleton: _Skeleton["default"]
+  skeleton: _Skeleton["default"],
+  footer: _footer.footer,
+  loader: loader
 };
 exports["default"] = _default;

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

@@ -30,6 +30,7 @@ var _CopyText = _interopRequireDefault(require("../../components/CopyText/CopyTe
 var _DataTable = _interopRequireDefault(require("../../components/DataTable/DataTable.styles"));
 var _EnvironmentalBreadcrumb = _interopRequireDefault(require("../../components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles"));
 var _FieldHelperText = _interopRequireDefault(require("../../components/FieldHelperText/FieldHelperText.styles"));
+var _Footer = _interopRequireDefault(require("../../components/Footer/Footer.styles"));
 var _HelpHint = _interopRequireDefault(require("../../components/HelpHint/HelpHint.styles"));
 var _imageUpload = _interopRequireDefault(require("../../components/ImageUploadField/imageUpload"));
 var _ListBox = _interopRequireDefault(require("../../components/ListBox/ListBox.styles"));
@@ -82,6 +83,7 @@ var _default = _objectSpread({
   dataTable: _DataTable["default"],
   environmentBreadcrumb: _EnvironmentalBreadcrumb["default"],
   fieldHelperText: _FieldHelperText["default"],
+  footer: _Footer["default"],
   helpHint: _HelpHint["default"],
   imageUpload: _imageUpload["default"],
   listBox: _ListBox["default"],

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BoxProps } from './box';
+import { LinkProps } from './link';
+export type FooterProps = BoxProps;
+export interface FooterLinkProps extends BoxProps {
+    children?: React.ReactNode;
+}
+export interface CopyrightTextProps extends BoxProps {
+    linkProps?: LinkProps;
+    children?: React.ReactNode;
+}

package/lib/cjs/types/footer.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/cjs/types/iconWrapper.d.ts

@@ -9,7 +9,7 @@ export interface IconWrapperProps extends StyleProps {
     size: string;
     className?: string;
     isCircle?: boolean;
-    title: {
+    title?: {
         name: string;
         id?: string;
     };

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

@@ -15,6 +15,7 @@ export * from './copyText';
 export * from './dataTable';
 export * from './environmentBreadcrumb';
 export * from './fieldHelperText';
+export * from './footer';
 export * from './grid';
 export * from './helpHint';
 export * from './icon';