@pingux/astro 2.78.0 → 2.79.0-alpha.1

package/lib/cjs/components/ListView/ListView.stories.d.ts

@@ -133,11 +133,12 @@ declare const _default: {
 };
 export default _default;
 export interface ExampleItemProps {
-    key?: Key;
-    name?: string;
+    key: Key;
+    name: string;
     textValue?: string;
     subtext?: string;
-    id?: string;
+    id: string | number;
+    hasSeparator?: boolean;
 }
 export declare const Default: ({ ...args }: {
     [x: string]: any;

package/lib/cjs/components/ListView/ListViewContext.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { ListViewState } from '../../types/listView';
+import { ExampleItemProps } from './ListView.stories';
 interface ListViewContextType<T> {
     state: ListViewState<T>;
 }
-export declare const ListViewContext: React.Context<ListViewContextType<object>>;
+export declare const ListViewContext: React.Context<ListViewContextType<ExampleItemProps>>;
 export {};

package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js

@@ -420,9 +420,11 @@ var InnerPanel = function InnerPanel(_ref2) {
     pt: "md"
   }, "Children render here.")));
   var items = [{
+    key: 'Form 1',
     id: 1,
     name: 'Form 1'
   }, {
+    key: 'Form 2',
     id: 2,
     name: 'Form 2'
   }];

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

@@ -640,6 +640,58 @@ declare const _default: {
                     };
                 };
             };
+            nextGen: {
+                path: {
+                    fill: string;
+                };
+                '&.is-hovered': {
+                    backgroundColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                maxHeight: string;
+                maxWidth: string;
+                width: string;
+                p: string;
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+                minWidth: string;
+                cursor: string;
+                fontFamily: string;
+                fontSize: string;
+                flexGrow: string;
+                fontWeight: number;
+                textAlign: string;
+                verticalAlign: string;
+                lineHeight: number;
+                borderRadius: string;
+                border: string;
+                px: string;
+                py: string;
+                height: string;
+                '&.is-disabled': {
+                    opacity: number;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+                transition: string;
+                outline: string;
+            };
             modalCloseButton: {
                 position: string;
                 top: number;
@@ -886,6 +938,15 @@ declare const _default: {
             };
         };
     };
+    fontSizes: {
+        xs: number;
+        sm: number;
+        md: string;
+        lg: string;
+        xl: string;
+        xx: string;
+        xxx: string;
+    };
     fontWeights: {
         [-1]: number;
         0: number;
@@ -897,6 +958,43 @@ declare const _default: {
         body: string;
     };
     text: {
+        h1: {
+            fontSize: string;
+            fontWeight: number;
+            color: string;
+            fontFamily: string;
+        };
+        h2: {
+            fontSize: string;
+            fontWeight: number;
+            color: string;
+            fontFamily: string;
+        };
+        h3: {
+            fontSize: string;
+            fontWeight: number;
+            color: string;
+            fontFamily: string;
+        };
+        h4: {
+            fontSize: string;
+            fontWeight: number;
+            color: string;
+            fontFamily: string;
+        };
+        h5: {
+            fontSize: string;
+            fontWeight: number;
+            color: string;
+            fontFamily: string;
+        };
+        h6: {
+            textTransform: string;
+            color: string;
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+        };
         modalTitle: {
             fontSize: string;
             fontWeight: string;

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

@@ -34,6 +34,7 @@ var nextGenTheme = {
   colors: _colors["default"],
   buttons: _button["default"],
   forms: _forms["default"],
+  fontSizes: _text2.fontSizes,
   fontWeights: _text2.fontWeights,
   lineHeights: {
     body: '1.5'

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

@@ -1,10 +1,11 @@
 export declare const fontSizes: {
     xs: number;
     sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    xx: number;
+    md: string;
+    lg: string;
+    xl: string;
+    xx: string;
+    xxx: string;
 };
 export declare const fontWeights: {
     [-1]: number;

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

@@ -16,10 +16,11 @@ var getFontSize = function getFontSize(major) {
 var fontSizes = {
   'xs': getFontSize(-2),
   'sm': getFontSize(-1),
-  'md': getFontSize(0),
-  'lg': getFontSize(1),
-  'xl': getFontSize(2),
-  'xx': getFontSize(3)
+  'md': '15px',
+  'lg': '18.75px',
+  'xl': '22.5px',
+  'xx': '26.25px',
+  'xxx': '33.75px'
 };
 exports.fontSizes = fontSizes;
 var fontWeights = (_fontWeights = {}, (0, _defineProperty2["default"])(_fontWeights, -1, 400), (0, _defineProperty2["default"])(_fontWeights, 0, 400), (0, _defineProperty2["default"])(_fontWeights, 1, 400), (0, _defineProperty2["default"])(_fontWeights, 2, 600), (0, _defineProperty2["default"])(_fontWeights, 3, 600), _fontWeights);

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

@@ -444,6 +444,58 @@ declare const buttons: {
                 };
             };
         };
+        nextGen: {
+            path: {
+                fill: string;
+            };
+            '&.is-hovered': {
+                backgroundColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            maxHeight: string;
+            maxWidth: string;
+            width: string;
+            p: string;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+            minWidth: string;
+            cursor: string;
+            fontFamily: string;
+            fontSize: string;
+            flexGrow: string;
+            fontWeight: number;
+            textAlign: string;
+            verticalAlign: string;
+            lineHeight: number;
+            borderRadius: string;
+            border: string;
+            px: string;
+            py: string;
+            height: string;
+            '&.is-disabled': {
+                opacity: number;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            transition: string;
+            outline: string;
+        };
         modalCloseButton: {
             position: string;
             top: number;

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

@@ -193,6 +193,31 @@ var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
 });
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
+  nextGen: _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
+    path: {
+      fill: 'blue'
+    },
+    '&.is-hovered': {
+      backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
+      path: {
+        fill: 'white'
+      }
+    },
+    '&.is-pressed': {
+      backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+      borderColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+      path: {
+        fill: 'white'
+      }
+    },
+    maxHeight: '48.5px',
+    maxWidth: '48.5px',
+    width: '48.5px',
+    p: 'sm',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }),
   modalCloseButton: modalCloseButton,
   badge: {
     deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {

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

@@ -1,4 +1,41 @@
 export declare const text: {
+    h1: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    h2: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    h3: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    h4: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    h5: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    h6: {
+        textTransform: string;
+        color: string;
+        fontFamily: string;
+        fontWeight: number;
+        fontSize: string;
+    };
     modalTitle: {
         fontSize: string;
         fontWeight: string;

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

@@ -1,11 +1,61 @@
 "use strict";
 
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.text = void 0;
-var text = {
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/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) { (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; }
+var hTags = {
+  h1: {
+    fontSize: 'xxx',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  h2: {
+    fontSize: 'xx',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  h3: {
+    fontSize: 'xl',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  h4: {
+    fontSize: 'lg',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  h5: {
+    fontSize: 'md',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  h6: {
+    textTransform: 'uppercase',
+    color: 'text.primary',
+    fontFamily: 'standard',
+    fontWeight: 1,
+    fontSize: 'sm'
+  }
+};
+var text = _objectSpread({
   modalTitle: {
     fontSize: '20px',
     fontWeight: '2',
@@ -23,5 +73,5 @@ var text = {
   listViewItemText: {
     fontWeight: 2
   }
-};
+}, hTags);
 exports.text = text;

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

@@ -2,8 +2,9 @@ import { Dispatch, Key, ReactNode, SetStateAction } from 'react';
 import { FocusManager } from 'react-aria';
 import { TreeProps, TreeState } from 'react-stately';
 import type { GridNode } from '@react-types/grid';
+import { ExampleItemProps } from '../components/ListView/ListView.stories';
 export type SelectionOptions = 'expansion' | 'single' | 'multiple' | 'none';
-export interface ListViewProps extends Omit<TreeProps<object>, 'selectionMode'> {
+export interface ListViewProps extends Omit<TreeProps<ExampleItemProps>, 'selectionMode'> {
     selectionStyle?: string;
     isHoverable?: boolean;
     loadingState?: string;

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -403,9 +403,11 @@ export var InnerPanel = function InnerPanel(_ref2) {
     pt: "md"
   }, "Children render here.")));
   var items = [{
+    key: 'Form 1',
     id: 1,
     name: 'Form 1'
   }, {
+    key: 'Form 2',
     id: 2,
     name: 'Form 2'
   }];

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

@@ -16,13 +16,14 @@ import buttons from './variants/button';
 import { text as newText } from './variants/text';
 import variants, { badges } from './variants/variants';
 import forms from './forms';
-import { fontWeights } from './text';
+import { fontSizes, fontWeights } from './text';
 import './open_sans.css';
 var nextGenTheme = {
   name: 'Next Gen',
   colors: colors,
   buttons: buttons,
   forms: forms,
+  fontSizes: fontSizes,
   fontWeights: fontWeights,
   lineHeights: {
     body: '1.5'

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

@@ -8,9 +8,10 @@ var getFontSize = function getFontSize(major) {
 export var fontSizes = {
   'xs': getFontSize(-2),
   'sm': getFontSize(-1),
-  'md': getFontSize(0),
-  'lg': getFontSize(1),
-  'xl': getFontSize(2),
-  'xx': getFontSize(3)
+  'md': '15px',
+  'lg': '18.75px',
+  'xl': '22.5px',
+  'xx': '26.25px',
+  'xxx': '33.75px'
 };
 export var fontWeights = (_fontWeights = {}, _defineProperty(_fontWeights, -1, 400), _defineProperty(_fontWeights, 0, 400), _defineProperty(_fontWeights, 1, 400), _defineProperty(_fontWeights, 2, 600), _defineProperty(_fontWeights, 3, 600), _fontWeights);

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

@@ -186,6 +186,31 @@ var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
 });
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
+  nextGen: _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
+    path: {
+      fill: 'blue'
+    },
+    '&.is-hovered': {
+      backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
+      path: {
+        fill: 'white'
+      }
+    },
+    '&.is-pressed': {
+      backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+      borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+      path: {
+        fill: 'white'
+      }
+    },
+    maxHeight: '48.5px',
+    maxWidth: '48.5px',
+    width: '48.5px',
+    p: 'sm',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }),
   modalCloseButton: modalCloseButton,
   badge: {
     deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {

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

@@ -1,4 +1,54 @@
-export var text = {
+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 _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; }
+var hTags = {
+  h1: {
+    fontSize: 'xxx',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  h2: {
+    fontSize: 'xx',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  h3: {
+    fontSize: 'xl',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  h4: {
+    fontSize: 'lg',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  h5: {
+    fontSize: 'md',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  h6: {
+    textTransform: 'uppercase',
+    color: 'text.primary',
+    fontFamily: 'standard',
+    fontWeight: 1,
+    fontSize: 'sm'
+  }
+};
+export var text = _objectSpread({
   modalTitle: {
     fontSize: '20px',
     fontWeight: '2',
@@ -16,4 +66,4 @@ export var text = {
   listViewItemText: {
     fontWeight: 2
   }
-};
+}, hTags);

package/package.json

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