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

package/lib/components/ListView/ListView.stories.js

@@ -31,12 +31,15 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context14, _context15; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context14 = ownKeys(Object(source), !0)).call(_context14, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context15 = ownKeys(Object(source))).call(_context15, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useRef, useState } from 'react';
 import { Item, useAsyncList } from 'react-stately';
+import ClockTimeEightOutlineIcon from '@pingux/mdi-react/ClockTimeEightOutlineIcon';
+import CogIcon from '@pingux/mdi-react/CogIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
 import { action } from '@storybook/addon-actions';
 import isChromatic from 'chromatic/isChromatic';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, SearchField, Text } from '../..';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
+import animals from '../../utils/devUtils/constants/animals';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { chartData } from '../ListViewItem/controls/chart/chartData';
 import ListViewReadme from './ListView.mdx';
@@ -66,464 +69,29 @@ var items = [{
   key: 'Aardvark',
   name: 'Aardvark',
   id: '1',
-  hasSeparator: false
+  icon: CogIcon,
+  iconWrapperProps: {
+    size: 'sm',
+    color: 'blue'
+  }
 }, {
   key: 'Kangaroo',
   name: 'Kangaroo',
-  id: '2'
+  id: '2',
+  icon: ClockTimeEightOutlineIcon,
+  iconWrapperProps: {
+    size: 'sm',
+    color: 'green'
+  }
 }, {
   key: 'Snake',
   name: 'Snake',
-  id: '3'
-}];
-export var animals = [{
-  name: 'Aardvark'
-}, {
-  name: 'Albatross'
-}, {
-  name: 'Alligator'
-}, {
-  name: 'Alpaca'
-}, {
-  name: 'Ant'
-}, {
-  name: 'Anteater'
-}, {
-  name: 'Antelope'
-}, {
-  name: 'Ape'
-}, {
-  name: 'Armadillo'
-}, {
-  name: 'Donkey'
-}, {
-  name: 'Baboon'
-}, {
-  name: 'Badger'
-}, {
-  name: 'Barracuda'
-}, {
-  name: 'Bat'
-}, {
-  name: 'Bear'
-}, {
-  name: 'Beaver'
-}, {
-  name: 'Bee'
-}, {
-  name: 'Bison'
-}, {
-  name: 'Boar'
-}, {
-  name: 'Buffalo'
-}, {
-  name: 'Butterfly'
-}, {
-  name: 'Camel'
-}, {
-  name: 'Capybara'
-}, {
-  name: 'Caribou'
-}, {
-  name: 'Cassowary'
-}, {
-  name: 'Cat'
-}, {
-  name: 'Caterpillar'
-}, {
-  name: 'Cattle'
-}, {
-  name: 'Chamois'
-}, {
-  name: 'Cheetah'
-}, {
-  name: 'Chicken'
-}, {
-  name: 'Chimpanzee'
-}, {
-  name: 'Chinchilla'
-}, {
-  name: 'Chough'
-}, {
-  name: 'Clam'
-}, {
-  name: 'Cobra'
-}, {
-  name: 'Cockroach'
-}, {
-  name: 'Cod'
-}, {
-  name: 'Cormorant'
-}, {
-  name: 'Coyote'
-}, {
-  name: 'Crab'
-}, {
-  name: 'Crane'
-}, {
-  name: 'Crocodile'
-}, {
-  name: 'Crow'
-}, {
-  name: 'Curlew'
-}, {
-  name: 'Deer'
-}, {
-  name: 'Dinosaur'
-}, {
-  name: 'Dog'
-}, {
-  name: 'Dogfish'
-}, {
-  name: 'Dolphin'
-}, {
-  name: 'Dotterel'
-}, {
-  name: 'Dove'
-}, {
-  name: 'Dragonfly'
-}, {
-  name: 'Duck'
-}, {
-  name: 'Dugong'
-}, {
-  name: 'Dunlin'
-}, {
-  name: 'Eagle'
-}, {
-  name: 'Echidna'
-}, {
-  name: 'Eel'
-}, {
-  name: 'Eland'
-}, {
-  name: 'Elephant'
-}, {
-  name: 'Elk'
-}, {
-  name: 'Emu'
-}, {
-  name: 'Falcon'
-}, {
-  name: 'Ferret'
-}, {
-  name: 'Finch'
-}, {
-  name: 'Fish'
-}, {
-  name: 'Flamingo'
-}, {
-  name: 'Fly'
-}, {
-  name: 'Fox'
-}, {
-  name: 'Frog'
-}, {
-  name: 'Gaur'
-}, {
-  name: 'Gazelle'
-}, {
-  name: 'Gerbil'
-}, {
-  name: 'Giraffe'
-}, {
-  name: 'Gnat'
-}, {
-  name: 'Gnu'
-}, {
-  name: 'Goat'
-}, {
-  name: 'Goldfinch'
-}, {
-  name: 'Goldfish'
-}, {
-  name: 'Goose'
-}, {
-  name: 'Gorilla'
-}, {
-  name: 'Goshawk'
-}, {
-  name: 'Grasshopper'
-}, {
-  name: 'Grouse'
-}, {
-  name: 'Guanaco'
-}, {
-  name: 'Gull'
-}, {
-  name: 'Hamster'
-}, {
-  name: 'Hare'
-}, {
-  name: 'Hawk'
-}, {
-  name: 'Hedgehog'
-}, {
-  name: 'Heron'
-}, {
-  name: 'Herring'
-}, {
-  name: 'Hippopotamus'
-}, {
-  name: 'Hornet'
-}, {
-  name: 'Horse'
-}, {
-  name: 'Human'
-}, {
-  name: 'Hummingbird'
-}, {
-  name: 'Hyena'
-}, {
-  name: 'Ibex'
-}, {
-  name: 'Ibis'
-}, {
-  name: 'Jackal'
-}, {
-  name: 'Jaguar'
-}, {
-  name: 'Jay'
-}, {
-  name: 'Jellyfish'
-}, {
-  name: 'Kangaroo'
-}, {
-  name: 'Kingfisher'
-}, {
-  name: 'Koala'
-}, {
-  name: 'Kookabura'
-}, {
-  name: 'Kouprey'
-}, {
-  name: 'Kudu'
-}, {
-  name: 'Lapwing'
-}, {
-  name: 'Lark'
-}, {
-  name: 'Lemur'
-}, {
-  name: 'Leopard'
-}, {
-  name: 'Lion'
-}, {
-  name: 'Llama'
-}, {
-  name: 'Lobster'
-}, {
-  name: 'Locust'
-}, {
-  name: 'Loris'
-}, {
-  name: 'Louse'
-}, {
-  name: 'Lyrebird'
-}, {
-  name: 'Magpie'
-}, {
-  name: 'Mallard'
-}, {
-  name: 'Manatee'
-}, {
-  name: 'Mandrill'
-}, {
-  name: 'Mantis'
-}, {
-  name: 'Marten'
-}, {
-  name: 'Meerkat'
-}, {
-  name: 'Mink'
-}, {
-  name: 'Mole'
-}, {
-  name: 'Mongoose'
-}, {
-  name: 'Monkey'
-}, {
-  name: 'Moose'
-}, {
-  name: 'Mosquito'
-}, {
-  name: 'Mouse'
-}, {
-  name: 'Mule'
-}, {
-  name: 'Narwhal'
-}, {
-  name: 'Newt'
-}, {
-  name: 'Nightingale'
-}, {
-  name: 'Octopus'
-}, {
-  name: 'Okapi'
-}, {
-  name: 'Opossum'
-}, {
-  name: 'Oryx'
-}, {
-  name: 'Ostrich'
-}, {
-  name: 'Otter'
-}, {
-  name: 'Owl'
-}, {
-  name: 'Oyster'
-}, {
-  name: 'Panther'
-}, {
-  name: 'Parrot'
-}, {
-  name: 'Partridge'
-}, {
-  name: 'Peafowl'
-}, {
-  name: 'Pelican'
-}, {
-  name: 'Penguin'
-}, {
-  name: 'Pheasant'
-}, {
-  name: 'Pig'
-}, {
-  name: 'Pigeon'
-}, {
-  name: 'Pony'
-}, {
-  name: 'Porcupine'
-}, {
-  name: 'Porpoise'
-}, {
-  name: 'Quail'
-}, {
-  name: 'Quelea'
-}, {
-  name: 'Quetzal'
-}, {
-  name: 'Rabbit'
-}, {
-  name: 'Raccoon'
-}, {
-  name: 'Rail'
-}, {
-  name: 'Ram'
-}, {
-  name: 'Rat'
-}, {
-  name: 'Raven'
-}, {
-  name: 'Red deer'
-}, {
-  name: 'Red panda'
-}, {
-  name: 'Reindeer'
-}, {
-  name: 'Rhinoceros'
-}, {
-  name: 'Rook'
-}, {
-  name: 'Salamander'
-}, {
-  name: 'Salmon'
-}, {
-  name: 'Sand Dollar'
-}, {
-  name: 'Sandpiper'
-}, {
-  name: 'Sardine'
-}, {
-  name: 'Scorpion'
-}, {
-  name: 'Seahorse'
-}, {
-  name: 'Seal'
-}, {
-  name: 'Shark'
-}, {
-  name: 'Sheep'
-}, {
-  name: 'Shrew'
-}, {
-  name: 'Skunk'
-}, {
-  name: 'Snail'
-}, {
-  name: 'Snake'
-}, {
-  name: 'Sparrow'
-}, {
-  name: 'Spider'
-}, {
-  name: 'Spoonbill'
-}, {
-  name: 'Squid'
-}, {
-  name: 'Squirrel'
-}, {
-  name: 'Starling'
-}, {
-  name: 'Stingray'
-}, {
-  name: 'Stinkbug'
-}, {
-  name: 'Stork'
-}, {
-  name: 'Swallow'
-}, {
-  name: 'Swan'
-}, {
-  name: 'Tapir'
-}, {
-  name: 'Tarsier'
-}, {
-  name: 'Termite'
-}, {
-  name: 'Tiger'
-}, {
-  name: 'Toad'
-}, {
-  name: 'Trout'
-}, {
-  name: 'Turkey'
-}, {
-  name: 'Turtle'
-}, {
-  name: 'Viper'
-}, {
-  name: 'Vulture'
-}, {
-  name: 'Wallaby'
-}, {
-  name: 'Walrus'
-}, {
-  name: 'Wasp'
-}, {
-  name: 'Weasel'
-}, {
-  name: 'Whale'
-}, {
-  name: 'Wildcat'
-}, {
-  name: 'Wolf'
-}, {
-  name: 'Wolverine'
-}, {
-  name: 'Wombat'
-}, {
-  name: 'Woodcock'
-}, {
-  name: 'Woodpecker'
-}, {
-  name: 'Worm'
-}, {
-  name: 'Wren'
-}, {
-  name: 'Yak'
-}, {
-  name: 'Zebra'
+  id: '3',
+  icon: FormSelectIcon,
+  iconWrapperProps: {
+    size: 'sm',
+    color: 'indigo'
+  }
 }];
 var props = {
   disabledKeys: ['Snake']
@@ -579,11 +147,12 @@ export var Default = function Default(_ref) {
     }, ___EmotionJSX(ListViewItem, {
       data: {
         text: item.name,
-        icon: FormSelectIcon
+        icon: item.icon
       },
       iconProps: {
         color: 'text.secondary'
-      }
+      },
+      iconWrapperProps: item.iconWrapperProps
     }, ___EmotionJSX(Controls, null)));
   });
 };
@@ -630,7 +199,8 @@ export var ControlledExpandableItems = function ControlledExpandableItems(_ref3)
   return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
     onPress: function onPress() {
       expandAllKeys();
-    }
+    },
+    mb: "lg"
   }, "Expand all"), ___EmotionJSX(ListView, _extends({}, props, args, {
     items: items,
     expandedKeys: expandedKeys,

package/lib/components/ListView/ListViewExpandableItem.js

@@ -65,6 +65,7 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
       ml: 'auto'
     },
     icon: isExpanded ? MenuUp : MenuDown,
+    variant: "listViewItem.expandIcon",
     title: {
       name: "".concat(key, " expand icon button")
     }

package/lib/components/ListView/ListViewItem.js

@@ -76,7 +76,9 @@ var ListViewItem = function ListViewItem(props) {
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,
       hasInsetSeparator: hasInsetSeparator,
-      isPressed: isPressed
+      isPressed: isPressed,
+      isFirstItem: item.index === 0,
+      isLastItem: item.index === state.collection.size - 1
     }),
     classNames = _useStatusClasses.classNames;
 
@@ -112,6 +114,7 @@ var ListViewItem = function ListViewItem(props) {
 };
 ListViewItem.propTypes = {
   item: PropTypes.shape({
+    index: PropTypes.number,
     key: PropTypes.string,
     rendered: PropTypes.node,
     props: PropTypes.shape({

package/lib/{styles/themes/next-gen/stories/NextGenListView.chromatic.stories.js → components/ListView/stories/ListView.chromatic.stories.js}

@@ -1,9 +1,9 @@
 import React from 'react';
-import { AstroProvider, NextGenTheme } from '../../../..';
+import { AstroProvider, NextGenTheme } from '../../..';
 import { ListViewNextGen } from './ListViewNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Chromatic Only Onyx ListView'
+  title: 'Onyx ListView'
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/components/ListView/stories/ListViewNextGenComponent.js

@@ -0,0 +1,130 @@
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useRef } from 'react';
+import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
+import TrashCanOutlineIcon from '@pingux/mdi-react/TrashCanOutlineIcon';
+import { Box, Item, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, SearchField, Text } from '../../..';
+import { chartData } from '../../ListViewItem/controls/chart/chartData';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+var items = _Array$from({
+  length: 10
+}, function (_, index) {
+  var id = (index + 1).toString();
+  return {
+    key: "Animal".concat(id),
+    name: "Animal".concat(id),
+    id: id
+  };
+});
+var colors = ['cyan', 'orange', 'red', 'green', 'purple', 'yellow', 'teal', 'pink', 'yellow', 'green'];
+var getColor = function getColor(index) {
+  var lastDigit = index % 10;
+  return colors[lastDigit];
+};
+export var ListViewNextGen = function ListViewNextGen() {
+  var chartContainerRef = useRef();
+  var Controls = function Controls() {
+    return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListViewItemSwitchField, null), ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
+      key: "enable"
+    }, "Enable user"), ___EmotionJSX(Item, {
+      key: "disable"
+    }, "Disable user"), ___EmotionJSX(Item, {
+      key: "delete"
+    }, "Delete user")));
+  };
+  return ___EmotionJSX(Box, {
+    backgroundColor: "background.base",
+    p: "lg"
+  }, ___EmotionJSX(Box, {
+    height: "400px",
+    mb: "xl"
+  }, ___EmotionJSX(Text, {
+    as: "h2",
+    mb: "md"
+  }, "ListView"), ___EmotionJSX(ListView, {
+    items: items,
+    selectionMode: "single"
+  }, _mapInstanceProperty(items).call(items, function (item, index) {
+    return ___EmotionJSX(Item, item, ___EmotionJSX(ListViewItem, {
+      data: {
+        icon: TrashCanOutlineIcon,
+        text: item.name,
+        subtext: loremText
+      },
+      iconWrapperProps: {
+        size: 'md',
+        color: getColor(index)
+      },
+      hasSeparator: false
+    }));
+  }))), ___EmotionJSX(Box, {
+    height: "400px",
+    mb: "xl"
+  }, ___EmotionJSX(Text, {
+    as: "h2",
+    mb: "md"
+  }, "ListView with Expanded Items"), ___EmotionJSX(ListView, {
+    items: items,
+    selectionMode: "expansion",
+    expandedKeys: ['Animal1']
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      textValue: item.name
+    }, ___EmotionJSX(Box, {
+      isRow: true,
+      sx: {
+        alignItems: 'center'
+      }
+    }, ___EmotionJSX(Text, {
+      variant: "itemTitle"
+    }, item.name)), ___EmotionJSX(Box, {
+      sx: {
+        my: 'lg'
+      }
+    }, ___EmotionJSX(SearchField, {
+      value: "Animal1",
+      maxWidth: "400px",
+      "aria-label": "Search",
+      placeholder: "Search"
+    }), ___EmotionJSX(Text, {
+      sx: {
+        mt: 'md',
+        fontWeight: '1'
+      }
+    }, "Lorem ipsum dolor sit amet consectetur. Viverra nulla nec velit sollicitudin sed nisi mi gravida. Maecenas vestibulum pretium dictum dictum tempus. Sit et rutrum hendrerit facilisi turpis tellus elementum. Egestas consectetur in ac id. Sit aliquam et ut pellentesque in at blandit sed. Sapien morbi cras eleifend lectus.")));
+  })), ___EmotionJSX(Box, {
+    height: "400px"
+  }, ___EmotionJSX(Text, {
+    as: "h2",
+    mb: "md"
+  }, "ListView with Charts"), ___EmotionJSX(ListView, {
+    items: items
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, ___EmotionJSX(ListViewItem, {
+      ref: chartContainerRef,
+      data: {
+        text: item.name,
+        subtext: item.subtext,
+        icon: FormSelectIcon
+      },
+      iconProps: {
+        color: 'text.secondary'
+      }
+    }, ___EmotionJSX(ListViewItemChart, {
+      containerRef: chartContainerRef,
+      chartData: chartData,
+      chartDataKey: "fullData",
+      title: "Avg daily sign-ons:",
+      contentCount: "31",
+      contentCountLabel: "Past 7 days",
+      chartLabel: "12 wk trend",
+      trend: "+115.0%",
+      tooltipText: "See Contributing Data",
+      ariaLabel: item.name
+    }), ___EmotionJSX(Controls, null)));
+  })));
+};

package/lib/{styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkListView.chromatic.stories.js → components/ListView/stories/ListViewOnyxDark.stories.js}

@@ -1,9 +1,9 @@
 import React from 'react';
-import { AstroProvider, NextGenDarkTheme } from '../../../..';
-import { ListViewNextGen } from '../../../themes/next-gen/stories/ListViewNextGenComponent';
+import { AstroProvider, NextGenDarkTheme } from '../../..';
+import { ListViewNextGen } from './ListViewNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Chromatic Only Onyx Dark ListView'
+  title: 'Onyx Dark ListView'
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {