@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

package/lib/recipes/ConditionalFilter.stories.js

@@ -3,13 +3,13 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React from 'react';
 import CreateIcon from 'mdi-react/CreateIcon';
 import TrashIcon from 'mdi-react/TrashIcon';
-import { Box, Bracket, Button, Chip, IconButton, Icon, Item, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
+import { Box, Bracket, Button, Badge, IconButton, Icon, Item, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Conditional Filter'
 };
 var sx = {
-  customChipStyles: {
+  customBadgeStyles: {
     marginRight: 'sm',
     '& > span': {
       textTransform: 'none',
@@ -72,7 +72,7 @@ export var Default = function Default() {
   }];
 
   var trashButton = ___EmotionJSX(IconButton, {
-    "aria-label": "deleteButton",
+    "aria-label": "badge.deleteButton",
     sx: {
       alignSelf: 'center'
     }
@@ -112,10 +112,10 @@ export var Default = function Default() {
     size: "xs"
   }))), ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Chip, {
+  }, ___EmotionJSX(Badge, {
     label: "ALL",
     bg: "decorative.7",
-    sx: sx.customChipStyles
+    sx: sx.customBadgeStyles
   }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
     return ___EmotionJSX(Box, {
       isRow: true,
@@ -123,32 +123,32 @@ export var Default = function Default() {
     }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
       width: "100%"
     }, ___EmotionJSX(Box, {
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       sx: sx.allConditionsBox
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), ___EmotionJSX(Chip, {
+    }, item.field1), ___EmotionJSX(Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3))));
   }), ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     mt: "md",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Chip, {
+  }, ___EmotionJSX(Badge, {
     label: "ANY",
     bg: "decorative.4",
-    sx: sx.customChipStyles,
+    sx: sx.customBadgeStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "sm"
@@ -160,7 +160,7 @@ export var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       width: "100%",
@@ -168,11 +168,11 @@ export var Default = function Default() {
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), ___EmotionJSX(Chip, {
+    }, item.field1), ___EmotionJSX(Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3)));
   })))), ___EmotionJSX(Box, {
@@ -180,15 +180,15 @@ export var Default = function Default() {
   }, ___EmotionJSX(Bracket, {
     isLast: true
   }), ___EmotionJSX(Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     mt: "md",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Chip, {
+  }, ___EmotionJSX(Badge, {
     label: "NONE",
     bg: "accent.20",
-    sx: sx.customChipStyles,
+    sx: sx.customBadgeStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "sm"
@@ -200,7 +200,7 @@ export var Default = function Default() {
       isLast: index === noneConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       width: "100%",
@@ -208,11 +208,11 @@ export var Default = function Default() {
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), ___EmotionJSX(Chip, {
+    }, item.field1), ___EmotionJSX(Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3)));
   }))))) : ___EmotionJSX(Box, {
@@ -304,7 +304,7 @@ export var Default = function Default() {
   }), ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true,
@@ -394,7 +394,7 @@ export var Default = function Default() {
     isRow: true,
     mt: "md"
   }, ___EmotionJSX(Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true,

package/lib/recipes/CountryPicker.stories.js

@@ -31,11 +31,11 @@ var sx = {
   comboBoxFieldWrapperClose: {
     position: 'absolute',
     transition: '0.2s width ease',
-    width: '110px'
+    maxWidth: '110px'
   },
   inputWrapper: {
     width: '100%',
-    marginLeft: '110px'
+    ml: '110px'
   }
 };
 export var Default = function Default() {
@@ -111,7 +111,7 @@ export var Default = function Default() {
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
-    wrapperProps: {
+    containerProps: {
       sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {

package/lib/recipes/DatePicker.stories.js

@@ -8,6 +8,7 @@ import moment from 'moment';
 import { Box, Icon, IconButton, TextField, useOverlayPosition, useOverlayTrigger, useOverlayTriggerState } from '../index';
 import statuses from '../utils/devUtils/constants/statuses';
 import PopoverContainer from '../components/PopoverContainer';
+import { text } from '../components/Text/Text.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Date Picker',
@@ -26,6 +27,50 @@ var sx = {
     top: 8,
     width: 28,
     height: 28
+  },
+  container: {
+    maxWidth: 300,
+    '.react-calendar': {
+      width: 280,
+      '& .react-calendar__month-view__days__day': {
+        width: 40,
+        height: 40,
+        color: 'neutral.10',
+        fontSize: 'sm',
+        fontWeight: 1
+      },
+      '& .react-calendar__navigation__label__labelText': text.itemTitle,
+      '& .react-calendar__navigation__arrow, & .react-calendar__month-view__days__day--neighboringMonth': {
+        color: 'neutral.40'
+      },
+      '& .react-calendar__month-view__weekdays': {
+        borderBottom: '1px solid',
+        borderColor: 'neutral.80'
+      },
+      '& .react-calendar__month-view__weekdays__weekday abbr': {
+        textDecoration: 'none',
+        textTransform: 'capitalize'
+      },
+      '& .react-calendar__month-view__days__day--weekend': {
+        color: 'decorative.4'
+      },
+      '& .react-calendar__tile--active, & .react-calendar__tile--hasActive': {
+        backgroundColor: 'active',
+        color: 'white'
+      },
+      '& .react-calendar__year-view__months__month': {
+        padding: '19px 0'
+      },
+      '& .react-calendar__decade-view__years__year, & .react-calendar__month-view__days__day, & .react-calendar__year-view__months__month': {
+        '&:hover': {
+          backgroundColor: 'rgba(70, 96, 162, .1);',
+          color: 'neutral.10'
+        }
+      },
+      '& .react-calendar__navigation': {
+        marginBottom: 0
+      }
+    }
   }
 };
 export var Default = function Default() {
@@ -91,10 +136,7 @@ export var Default = function Default() {
     setError(false);
   }, []);
   return ___EmotionJSX(Box, {
-    sx: {
-      maxWidth: 300
-    },
-    variant: "boxes.dataPicker"
+    sx: sx.container
   }, ___EmotionJSX(TextField, {
     slots: {
       inContainer: ___EmotionJSX(IconButton, _extends({
@@ -120,7 +162,7 @@ export var Default = function Default() {
     hasNoArrow: true,
     isDismissable: true
   }), ___EmotionJSX(Box, {
-    variant: "boxes.datePicker"
+    sx: sx.container
   }, ___EmotionJSX(Calendar, {
     onChange: handleCalendarChange,
     value: date.toDate()

package/lib/recipes/FlippableCaretMenuButton.stories.js

@@ -22,7 +22,7 @@ import React, { useState, useRef } from 'react';
 import CloseIcon from 'mdi-react/CloseIcon';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
-import { useOverlayPosition } from '@react-aria/overlays';
+import { useOverlayPosition } from 'react-aria';
 import { useLayoutEffect } from '@react-aria/utils';
 import { Button, Box, Icon, IconButton } from '../index';
 import PopoverContainer from '../components/PopoverContainer';

package/lib/recipes/LinkedListView.stories.js

@@ -5,9 +5,8 @@ import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/in
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useState } from 'react';
-import { Item } from '@react-stately/collections';
 import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
-import { ListView, Text, Box, Icon, IconButton, Chip, Separator, OverlayProvider, PopoverMenu, Menu } from '../index';
+import { Box, Badge, Icon, IconButton, Item, ListView, Menu, OverlayProvider, PopoverMenu, Separator, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/LinkedListView',
@@ -68,7 +67,7 @@ var testData = [{
 // I.e. the staging rows will need to immediately follow the prod row that they correspond to.
 // This flat, sorted array will then be passed into the listview component as the items prop.
 // You may not need these functions if you are able to change the data shape on the back end
-// (which is reccomended for performance reasons)
+// (which is recommended for performance reasons)
 
 var flattenArray = function flattenArray(array) {
   var newArray = array;
@@ -250,8 +249,8 @@ export var Default = function Default(_ref) {
   }; // made these separate components because staging and production both use them.
 
 
-  var DefaultChip = function DefaultChip() {
-    return ___EmotionJSX(Chip, {
+  var DefaultBadge = function DefaultBadge() {
+    return ___EmotionJSX(Badge, {
       label: "Default",
       bg: "active",
       sx: {
@@ -263,7 +262,7 @@ export var Default = function Default(_ref) {
     });
   };
 
-  var ExprirationChip = function ExprirationChip(props) {
+  var ExprirationBadge = function ExprirationBadge(props) {
     var expirationText = props.expirationText,
         chipText = props.chipText;
     return ___EmotionJSX(Box, {
@@ -273,7 +272,7 @@ export var Default = function Default(_ref) {
       flexGrow: 1,
       alignItems: "center",
       alignSelf: "center"
-    }, ___EmotionJSX(Chip, {
+    }, ___EmotionJSX(Badge, {
       bg: "white",
       sx: {
         border: 'solid 1px',
@@ -326,7 +325,7 @@ export var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id: ", policyId)), chipText && ___EmotionJSX(DefaultChip, null)), ___EmotionJSX(IconWithPopover, null));
+    }, "Policy Id: ", policyId)), chipText && ___EmotionJSX(DefaultBadge, null)), ___EmotionJSX(IconWithPopover, null));
   }; // jsx of the staging row.
 
 
@@ -367,7 +366,7 @@ export var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id: ", policyId))), chipText && ___EmotionJSX(DefaultChip, null), expirationText && ___EmotionJSX(ExprirationChip, {
+    }, "Policy Id: ", policyId))), chipText && ___EmotionJSX(DefaultBadge, null), expirationText && ___EmotionJSX(ExprirationBadge, {
       expirationText: expirationText
     }), ___EmotionJSX(IconWithPopover, null));
   };
@@ -379,7 +378,20 @@ export var Default = function Default(_ref) {
       textValue: item.name,
       "data-id": item.key,
       listItemProps: {
-        variant: 'boxes.linkedListViewItem'
+        minHeight: '75px',
+        sx: {
+          '&.has-inset-separator': {
+            '&:before': {
+              content: '""',
+              position: 'absolute',
+              width: 'calc(100% - 43px)',
+              right: 0,
+              bottom: 0,
+              borderBottom: '1px solid',
+              borderBottomColor: 'line.hairline'
+            }
+          }
+        }
       }
     }), item.parentId ? ___EmotionJSX(Staging, _extends({}, item, {
       hasInsetSeparator: true

package/lib/recipes/ListAndPanel.stories.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import React, { useRef, useState } from 'react';
-import { FocusScope } from '@react-aria/focus';
-import { Item } from '@react-stately/collections';
 import AccountIcon from 'mdi-react/AccountIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import PencilIcon from 'mdi-react/PencilIcon';
 import PlusIcon from 'mdi-react/PlusIcon';
+import { FocusScope } from 'react-aria';
+import { Item } from 'react-stately';
 import { Avatar, Box, Icon, IconButton, Link, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
 import { useOverlayPanelState } from '../hooks';
 import { pingImg } from '../utils/devUtils/constants/images';

package/lib/recipes/LogoTabs.stories.js

@@ -18,7 +18,7 @@ import React, { useState } from 'react';
 import ShuffleVariant from 'mdi-react/ShuffleVariantIcon';
 import Filter from 'mdi-react/FilterIcon';
 import { Tabs, Tab, Text, Icon, Box, Separator } from '../index';
-import { tab } from '../styles/variants/tabs';
+import { tab } from '../components/Tabs/Tabs.style';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Logo Tabs'

package/lib/recipes/MaskedValue.stories.js

@@ -35,6 +35,17 @@ var sx = {
     width: 'fit-content',
     marginLeft: 'sm',
     alignSelf: 'auto'
+  },
+  maskedItem: {
+    color: 'black',
+    fontSize: '16px',
+    width: 252,
+    wordBreak: 'break-all',
+    '&.is-masked': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      fontWeight: 3
+    }
   }
 };
 export var Default = function Default(_ref) {
@@ -59,7 +70,7 @@ export var Default = function Default(_ref) {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Text, {
-    variant: "maskedValue",
+    sx: sx.maskedItem,
     className: classNames
   }, isMasked ? _repeatInstanceProperty(_context = '•').call(_context, 99) : secretData), ___EmotionJSX(IconButton, {
     "aria-label": isMasked ? 'Show content' : 'Hide content',

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -123,7 +123,7 @@ export var Default = function Default() {
       size: 'xs'
     },
     buttonProps: {
-      variant: 'bidirectionalIconButton'
+      variant: 'bidirectional'
     }
   })), ___EmotionJSX(ComboBoxField, {
     items: items,
@@ -195,7 +195,7 @@ export var Default = function Default() {
       size: 8
     },
     buttonProps: {
-      variant: 'bidirectionalIconButton'
+      variant: 'bidirectional'
     }
   })), ___EmotionJSX(ComboBoxField, {
     items: items,