@pingux/astro 2.25.0 → 2.26.0-alpha.1

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -13,25 +13,25 @@ export declare const wordWrap: {
     wordBreak: string;
 };
 export declare const text: {
-    base: {
-        display: string;
-        fontSize: string;
+    inputValue: {
+        fontWeight: number;
         color: string;
         fontFamily: string;
-        overflowWrap: string;
     };
-    bodyStrong: {
+    itemTitle: {
+        fontSize: string;
+        fontWeight: number;
         color: string;
         fontFamily: string;
-        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    bodyWeak: {
+    itemSubtitle: {
         fontSize: string;
+        fontWeight: number;
         color: string;
         fontFamily: string;
         display: string;
@@ -40,125 +40,150 @@ export declare const text: {
         wordWrap: string;
         wordBreak: string;
     };
-    buttonLabel: {
+    label: {
         fontSize: string;
-        fontWeight: number;
         color: string;
         fontFamily: string;
+        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    buttonTitle: {
+    listTitle: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
         fontSize: string;
         fontWeight: number;
         color: string;
-        fontFamily: string;
-        lineHeight: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    buttonSubtitle: {
+    listSubtitle: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
         fontSize: string;
         fontWeight: number;
         color: string;
-        fontFamily: string;
-        lineHeight: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    capsLabel: {
+    listViewItemSubtext: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
+        alignSelf: string;
+        fontSize: string;
+        mt: string;
         color: string;
-        textTransform: string;
         fontFamily: string;
+        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    environmentBreadcrumb: {
+    listViewItemText: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
+        alignSelf: string;
         fontSize: string;
-        fontWeight: number;
         color: string;
-        textTransform: string;
-        display: string;
         fontFamily: string;
-        overflowWrap: string;
-    };
-    H1: {
         fontWeight: number;
-        lineHeight: string;
-        fontSize: string;
-        color: string;
-        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    H2: {
+    placeholder: {
         fontWeight: number;
-        lineHeight: string;
+        color: string;
+        fontFamily: string;
+    };
+    panelHeaderSubtext: {
+        alignSelf: string;
         fontSize: string;
+        mt: string;
         color: string;
         fontFamily: string;
+        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    H3: {
-        fontWeight: number;
-        lineHeight: string;
+    panelHeaderText: {
+        alignSelf: string;
         fontSize: string;
         color: string;
         fontFamily: string;
+        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    H4: {
+    sectionTitle: {
         fontSize: string;
         fontWeight: number;
         color: string;
         fontFamily: string;
-        lineHeight: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    inputValue: {
-        fontWeight: number;
+    subtitle: {
         color: string;
         fontFamily: string;
+        fontWeight: number;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
     };
-    itemTitle: {
+    tabLabel: {
         fontSize: string;
         fontWeight: number;
+        mb: string;
+        lineHeight: string;
         color: string;
-        fontFamily: string;
+        height: string;
+        '.is-selected &, .is-hovered &': {
+            color: string;
+        };
+        '.is-selected &': {
+            color: string;
+            mb: number;
+        };
+        '.is-disabled &': {
+            color: string;
+        };
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
+        fontFamily: string;
     };
-    itemSubtitle: {
+    tableHeader: {
         fontSize: string;
         fontWeight: number;
         color: string;
@@ -169,105 +194,115 @@ export declare const text: {
         wordWrap: string;
         wordBreak: string;
     };
-    label: {
+    tableData: {
         fontSize: string;
+        fontWeight: number;
         color: string;
         fontFamily: string;
-        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    listTitle: {
+    textEllipsis: {
         textOverflow: string;
         overflow: string;
         whiteSpace: string;
+    };
+    title: {
         fontSize: string;
         fontWeight: number;
         color: string;
+        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    listSubtitle: {
-        textOverflow: string;
-        overflow: string;
-        whiteSpace: string;
-        fontSize: string;
+    H1: {
+        lineHeight: string;
         fontWeight: number;
+        fontSize: string;
         color: string;
+        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    listViewItemSubtext: {
-        textOverflow: string;
-        overflow: string;
-        whiteSpace: string;
-        alignSelf: string;
+    H2: {
+        lineHeight: string;
+        fontWeight: number;
         fontSize: string;
-        mt: string;
         color: string;
         fontFamily: string;
-        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    listViewItemText: {
-        textOverflow: string;
-        overflow: string;
-        whiteSpace: string;
-        alignSelf: string;
+    H3: {
+        lineHeight: string;
+        fontWeight: number;
         fontSize: string;
         color: string;
         fontFamily: string;
-        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    placeholder: {
+    H4: {
+        lineHeight: string;
+        fontSize: string;
         fontWeight: number;
         color: string;
         fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
     };
-    panelHeaderSubtext: {
-        alignSelf: string;
+    h1: {
+        fontWeight: number;
         fontSize: string;
-        mt: string;
         color: string;
         fontFamily: string;
-        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    panelHeaderText: {
-        alignSelf: string;
+    h2: {
+        fontWeight: number;
         fontSize: string;
         color: string;
         fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    h3: {
         fontWeight: number;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    sectionTitle: {
+    h4: {
         fontSize: string;
         fontWeight: number;
         color: string;
@@ -278,7 +313,14 @@ export declare const text: {
         wordWrap: string;
         wordBreak: string;
     };
-    subtitle: {
+    base: {
+        display: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        overflowWrap: string;
+    };
+    bodyStrong: {
         color: string;
         fontFamily: string;
         fontWeight: number;
@@ -288,31 +330,17 @@ export declare const text: {
         wordWrap: string;
         wordBreak: string;
     };
-    tabLabel: {
+    bodyWeak: {
         fontSize: string;
-        fontWeight: number;
-        mb: string;
-        lineHeight: string;
         color: string;
-        height: string;
-        '.is-selected &, .is-hovered &': {
-            color: string;
-        };
-        '.is-selected &': {
-            color: string;
-            mb: number;
-        };
-        '.is-disabled &': {
-            color: string;
-        };
+        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
-        fontFamily: string;
     };
-    tableHeader: {
+    buttonLabel: {
         fontSize: string;
         fontWeight: number;
         color: string;
@@ -323,31 +351,47 @@ export declare const text: {
         wordWrap: string;
         wordBreak: string;
     };
-    tableData: {
+    buttonTitle: {
         fontSize: string;
         fontWeight: number;
         color: string;
         fontFamily: string;
+        lineHeight: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    textEllipsis: {
-        textOverflow: string;
-        overflow: string;
-        whiteSpace: string;
-    };
-    title: {
+    buttonSubtitle: {
         fontSize: string;
         fontWeight: number;
         color: string;
         fontFamily: string;
+        lineHeight: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    capsLabel: {
+        color: string;
+        textTransform: string;
+        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
+    environmentBreadcrumb: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        textTransform: string;
+        display: string;
+        fontFamily: string;
+        overflowWrap: string;
+    };
 };

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

@@ -98,7 +98,38 @@ var listViewItemSubtext = _objectSpread(_objectSpread({}, subtitle), {}, {
   fontSize: 'sm',
   mt: '1px'
 });
-var text = {
+var hTags = {
+  h1: _objectSpread(_objectSpread({}, title), {}, {
+    fontWeight: 3
+  }),
+  h2: _objectSpread(_objectSpread({}, sectionTitle), {}, {
+    fontWeight: 3
+  }),
+  h3: _objectSpread(_objectSpread({}, itemTitle), {}, {
+    fontWeight: 3
+  }),
+  h4: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  })
+};
+var HTags = {
+  H1: _objectSpread(_objectSpread({}, hTags.h1), {}, {
+    lineHeight: '28px'
+  }),
+  H2: _objectSpread(_objectSpread({}, hTags.h2), {}, {
+    lineHeight: '21px'
+  }),
+  H3: _objectSpread(_objectSpread({}, hTags.h3), {}, {
+    lineHeight: '18px'
+  }),
+  H4: _objectSpread(_objectSpread({}, hTags.h4), {}, {
+    lineHeight: '16px'
+  })
+};
+var text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
   bodyWeak: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -131,26 +162,8 @@ var text = {
     textTransform: 'uppercase',
     fontFamily: 'standard'
   }),
-  environmentBreadcrumb: environmentBreadcrumb,
-  H1: _objectSpread(_objectSpread({}, title), {}, {
-    fontWeight: 3,
-    lineHeight: '28px'
-  }),
-  H2: _objectSpread(_objectSpread({}, sectionTitle), {}, {
-    fontWeight: 3,
-    lineHeight: '21px'
-  }),
-  H3: _objectSpread(_objectSpread({}, itemTitle), {}, {
-    fontWeight: 3,
-    lineHeight: '18px'
-  }),
-  H4: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'sm',
-    fontWeight: 3,
-    color: 'text.primary',
-    fontFamily: 'standard',
-    lineHeight: '16px'
-  }),
+  environmentBreadcrumb: environmentBreadcrumb
+}, hTags), HTags), {}, {
   inputValue: {
     fontWeight: 1,
     color: 'text.primary',
@@ -205,5 +218,5 @@ var text = {
   }),
   textEllipsis: textEllipsis,
   title: title
-};
+});
 exports.text = text;

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -7,7 +7,8 @@ _Object$defineProperty(exports, "__esModule", {
 exports.FIGMA_LINKS = void 0;
 var FIGMA_LINKS = {
   accordionGroup: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=446-1808&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=446-1808&t=8Wwd3tIBh3GEjCJB-0',
+    differentLevels: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=446%3A1949&mode=dev'
   },
   attributeMappings: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=15076%3A33905&mode=dev',

package/lib/components/AccordionGroup/Accordion.styles.js

@@ -37,6 +37,11 @@ var body = {
     display: 'flex'
   }
 };
+export var hoveredState = {
+  '&.is-hovered': {
+    color: 'active'
+  }
+};
 var header = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'transparent',
@@ -44,14 +49,11 @@ var header = _objectSpread(_objectSpread({}, base), {}, {
   padding: '0 5px',
   flexGrow: 0,
   fontWeight: 700,
-  '&.is-hovered': {
-    color: 'active'
-  },
   '&.is-pressed': {
     color: 'accent.20'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
-});
+}, hoveredState);
 export default {
   title: title,
   accordion: accordion,

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"],
+var _excluded = ["defaultExpandedKeys", "expandedKeys", "labelHeadingTag", "onExpandedChange"],
   _excluded2 = ["onFocus"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -35,6 +35,7 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var defaultExpandedKeys = props.defaultExpandedKeys,
     expandedKeys = props.expandedKeys,
+    labelHeadingTag = props.labelHeadingTag,
     onExpandedChange = props.onExpandedChange,
     others = _objectWithoutProperties(props, _excluded);
   var state = useTreeState(props);
@@ -61,9 +62,10 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: accordionRef
   }, mergeProps(theseProps, others)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(AccordionItem, {
-      key: item.key,
+      "data-id": item['data-id'],
       item: item,
-      "data-id": item['data-id']
+      key: item.key,
+      labelHeadingTag: labelHeadingTag
     }, item.props.children);
   })));
 });
@@ -82,7 +84,9 @@ AccordionGroup.propTypes = {
   /** The initial expanded keys in the collection (uncontrolled). */
   defaultExpandedKeys: isIterableProp,
   /** Id of the selected element */
-  id: PropTypes.string
+  id: PropTypes.string,
+  /** HTML header element wrapping the label */
+  labelHeadingTag: AccordionItem.propTypes.labelHeadingTag
 };
 AccordionGroup.displayName = 'AccordionGroup';
 export default AccordionGroup;