@pingux/astro 1.32.1 → 1.33.0-alpha.0

package/lib/components/Text/Text.stories.js

@@ -1,19 +1,8 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-var _excluded = ["children", "bg"];
-
-var _context;
-
 import React from 'react';
-import { Divider } from 'theme-ui';
-import Text from './Text';
-import { textVariants } from '../../utils/devUtils/constants/variants.js';
-import { flatColorList } from '../../styles/colors.js';
-import { Box } from '../../index';
+import { Box, Separator, Table, TableCell, TableBody, TableHead, TableRow, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Text',
@@ -21,72 +10,411 @@ export default {
   argTypes: {
     variant: {
       control: {
-        type: 'select',
-        options: _Object$values(textVariants)
+        type: 'none'
       },
-      description: 'Text variant.',
-      defaultValue: _Object$values(textVariants)[0]
+      description: 'Text variant.'
     },
     children: {
       control: {
-        type: 'text'
+        type: 'none'
       },
-      table: {
-        type: {
-          summary: 'string'
-        }
-      },
-      description: 'Text value.',
-      defaultValue: 'Hi, this is some text!'
+      description: 'Text value.'
     },
     color: {
       control: {
-        type: 'select',
-        options: _concatInstanceProperty(_context = [undefined]).call(_context, _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 1),
-              colorName = _ref2[0];
-
-          return colorName;
-        }))
+        type: 'none'
       },
-      table: {
-        type: {
-          summary: 'string'
-        }
-      },
-      description: 'Text color.',
-      defaultValue: undefined
+      description: 'Text color.'
     },
     bg: {
       control: {
-        type: 'select',
-        options: _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 1),
-              colorName = _ref4[0];
-
-          return colorName;
-        })
-      },
-      table: {
-        type: {
-          summary: 'string'
-        }
+        type: 'none'
       },
-      description: 'Background color.',
-      defaultValue: 'white'
+      description: 'Background color.'
     }
   }
 };
-export var Default = function Default(_ref5) {
-  var children = _ref5.children,
-      bg = _ref5.bg,
-      args = _objectWithoutProperties(_ref5, _excluded);
+var sx = {
+  cell: {
+    wordWrap: 'break-word',
+    wordBreak: 'break-word'
+  },
+  tableBody: {
+    borderBottom: 'unset'
+  }
+};
 
-  return ___EmotionJSX(Text, _extends({
-    bg: bg
-  }, args, {
-    p: "xl"
-  }), children);
+var TableHeading = function TableHeading(_ref) {
+  var title = _ref.title;
+  return ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, title), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, "Weight"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, "Size"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true
+  }, "Example")));
+};
+
+var TableData = function TableData(_ref2) {
+  var variant = _ref2.variant,
+      value = _ref2.value;
+  return ___EmotionJSX(TableRow, {
+    sx: {
+      backgroundColor: 'transparent !important',
+      alignItems: 'center'
+    }
+  }, ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    width: "30%"
+  }, ___EmotionJSX(Text, null, variant)), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    width: "30%"
+  }, ___EmotionJSX(Text, null, value.weight)), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    width: "30%"
+  }, ___EmotionJSX(Text, null, value.fontSize)), ___EmotionJSX(TableCell, {
+    sx: sx.cell
+  }, ___EmotionJSX(Text, null, value.example)));
+};
+
+export var Default = function Default() {
+  var _context, _context2, _context3, _context4, _context5, _context6;
+
+  var fontSizes = {
+    xx: '23px (xx)',
+    lg: '17px (lg)',
+    md: '15px (md)',
+    sm: '13px (sm)',
+    xs: '11px (xs)'
+  };
+  var fontWeights = {
+    '-1': '300 (-1)',
+    '0': '400 (0)',
+    '1': '500 (1)',
+    '3': '700 (3)'
+  };
+  var headingVariants = {
+    H1: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.xx,
+      example: ___EmotionJSX(Text, {
+        variant: "H1",
+        as: "H1"
+      }, '<Text variant="H1" as="H1"/>')
+    },
+    H2: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.lg,
+      example: ___EmotionJSX(Text, {
+        variant: "H2",
+        as: "H2"
+      }, '<Text variant="H2" as="H2"/>')
+    },
+    H3: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.md,
+      example: ___EmotionJSX(Text, {
+        variant: "H3",
+        as: "H3"
+      }, '<Text variant="H3" as="H3"/>')
+    },
+    H4: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.sm,
+      example: ___EmotionJSX(Text, {
+        variant: "H4",
+        as: "H4"
+      }, '<Text variant="H4" as="H4"/>')
+    }
+  };
+  var baseAndSubtitleVariants = {
+    'Base (default variant of Text)': {
+      weight: fontWeights[1],
+      fontSize: fontSizes.md,
+      color: 'text.primary',
+      example: ___EmotionJSX(Text, {
+        variant: "base"
+      }, '<Text variant="base"/>')
+    },
+    Subtitle: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.sm,
+      color: 'text.secondary',
+      example: ___EmotionJSX(Text, {
+        variant: "subtitle"
+      }, '<Text variant="subtitle"/>')
+    }
+  };
+  var largeVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.lg,
+      example: ___EmotionJSX(Text, {
+        fontSize: "lg",
+        fontWeight: "3"
+      }, '<Text fontSize="lg" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.lg,
+      example: ___EmotionJSX(Text, {
+        fontSize: "lg",
+        fontWeight: "1"
+      }, '<Text fontSize="lg" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.lg,
+      example: ___EmotionJSX(Text, {
+        fontSize: "lg",
+        fontWeight: "0"
+      }, '<Text fontSize="lg" fontWeight="0">')
+    }
+  };
+  var mediumVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "3"
+      }, '<Text fontSize="md" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "1"
+      }, '<Text fontSize="md" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "0"
+      }, '<Text fontSize="md" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeights[-1],
+      fontSize: fontSizes.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "-1"
+      }, '<Text fontSize="md" fontWeight="-1">')
+    }
+  };
+  var smallVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "3"
+      }, '<Text fontSize="sm" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "1"
+      }, '<Text fontSize="sm" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "0"
+      }, '<Text fontSize="sm" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeights[-1],
+      fontSize: fontSizes.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "-1"
+      }, '<Text fontSize="sm" fontWeight="-1">')
+    }
+  };
+  var xsmallVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "3"
+      }, '<Text fontSize="xs" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "1"
+      }, '<Text fontSize="xs" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "0"
+      }, '<Text fontSize="xs" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeights[-1],
+      fontSize: fontSizes.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "-1"
+      }, '<Text fontSize="xs" fontWeight="-1">')
+    }
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Heading"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context = _Object$entries(headingVariants)).call(_context, function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "60%"
+  }, "Base and Subtitle"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "20%"
+  }, "Weight"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, "Size"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "40%"
+  }, "Color"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true
+  }, "Example"))), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context2 = _Object$entries(baseAndSubtitleVariants)).call(_context2, function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+        key = _ref6[0],
+        value = _ref6[1];
+
+    return ___EmotionJSX(TableRow, {
+      sx: {
+        backgroundColor: 'transparent !important'
+      },
+      key: key
+    }, ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "60%"
+    }, ___EmotionJSX(Text, null, key)), ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "25%"
+    }, ___EmotionJSX(Text, null, value.weight)), ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "35%"
+    }, ___EmotionJSX(Text, null, value.fontSize)), ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "45%"
+    }, ___EmotionJSX(Text, null, value.color)), ___EmotionJSX(TableCell, {
+      sx: sx.cell
+    }, value.example));
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Large"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context3 = _Object$entries(largeVariants)).call(_context3, function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+        key = _ref8[0],
+        value = _ref8[1];
+
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Medium"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context4 = _Object$entries(mediumVariants)).call(_context4, function (_ref9) {
+    var _ref10 = _slicedToArray(_ref9, 2),
+        key = _ref10[0],
+        value = _ref10[1];
+
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Small"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context5 = _Object$entries(smallVariants)).call(_context5, function (_ref11) {
+    var _ref12 = _slicedToArray(_ref11, 2),
+        key = _ref12[0],
+        value = _ref12[1];
+
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "XSmall"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context6 = _Object$entries(xsmallVariants)).call(_context6, function (_ref13) {
+    var _ref14 = _slicedToArray(_ref13, 2),
+        key = _ref14[0],
+        value = _ref14[1];
+
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))));
 };
 export var WithCustomWidth = function WithCustomWidth() {
   return ___EmotionJSX(Box, {
@@ -111,7 +439,7 @@ export var TypographyStyleProps = function TypographyStyleProps() {
     gap: "md"
   }, ___EmotionJSX(Text, {
     variant: "title"
-  }, "The Text component allows typography style props to be passed in directly."), ___EmotionJSX(Text, textProps, loremText), ___EmotionJSX(Divider, null), ___EmotionJSX(Text, {
+  }, "The Text component allows typography style props to be passed in directly."), ___EmotionJSX(Text, textProps, loremText), ___EmotionJSX(Separator, null), ___EmotionJSX(Text, {
     variant: "title"
   }, "Typography styles can also be passed in through the sx prop for the same result."), ___EmotionJSX(Text, {
     sx: textProps

package/lib/styles/variants/accordion.js

@@ -1,3 +1,18 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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; }
+
+import { defaultFocus } from '../variants/buttons';
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -39,13 +54,9 @@ var accordionGridHeader = {
   color: 'neutral.10',
   flexGrow: 1,
   fontWeight: 700,
-  '&.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus',
-    WebkitBoxShadow: 'focus',
-    MozBoxShadow: 'focus',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
     zIndex: '10'
-  },
+  }),
   minHeight: '64px',
   '&.is-hovered': {
     backgroundColor: 'accent.99'

package/lib/styles/variants/text.js

@@ -231,6 +231,28 @@ var timeZone = {
     }
   }
 };
+
+var title = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'xx',
+  fontWeight: 1,
+  color: 'text.primary',
+  fontFamily: 'standard'
+});
+
+var sectionTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'lg',
+  fontWeight: 2,
+  color: 'text.primary',
+  fontFamily: 'standard'
+});
+
+var itemTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'md',
+  fontWeight: 1,
+  color: 'text.primary',
+  fontFamily: 'standard'
+});
+
 export var text = {
   base: base,
   bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -272,17 +294,31 @@ export var text = {
   }),
   environmentBreadcrumb: environmentBreadcrumb,
   fieldHelperText: fieldHelperText,
+  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'
+  }),
   inputValue: {
     fontWeight: 1,
     color: 'text.primary',
     fontFamily: 'standard'
   },
-  itemTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'md',
-    fontWeight: 1,
-    color: 'text.primary',
-    fontFamily: 'standard'
-  }),
+  itemTitle: itemTitle,
   itemSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'sm',
     fontWeight: 0,
@@ -322,12 +358,7 @@ export var text = {
     color: 'text.secondary',
     fontFamily: 'standard'
   },
-  sectionTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'lg',
-    fontWeight: 2,
-    color: 'text.primary',
-    fontFamily: 'standard'
-  }),
+  sectionTitle: sectionTitle,
   subtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontWeight: 0,
     color: 'text.secondary',
@@ -345,12 +376,7 @@ export var text = {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   },
-  title: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'xx',
-    fontWeight: 1,
-    color: 'text.primary',
-    fontFamily: 'standard'
-  }),
+  title: title,
   tooltipContent: tooltipContent,
   timeZone: timeZone
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.32.1",
+  "version": "1.33.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",