@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/{styles/variants/text.js → components/Text/Text.styles.js}

@@ -7,26 +7,22 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 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 base = {
+export var base = {
   display: 'block',
   fontSize: 'md',
   color: 'text.primary',
   fontFamily: 'standard',
   overflowWrap: 'break-word'
 };
-var wordWrap = {
+export var wordWrap = {
   display: 'block',
   overflowWrap: 'break-word',
   maxWidth: '100%',
   wordWrap: 'break-word',
   wordBreak: 'break-word'
 };
-
 var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
   fontWeight: 1,
@@ -45,217 +41,30 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
     color: 'neutral.80'
   }
 });
-
-var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
-  fontSize: 'sm',
-  '&.is-default': {
-    color: 'text.secondary'
-  },
-  '&.is-error': {
-    color: 'critical.dark'
-  },
-  '&.is-success': {
-    color: 'success.dark'
-  },
-  '&.is-warning': {
-    color: 'warning.dark'
-  },
-  '.is-left-label > &': {
-    gridRowEnd: 3,
-    gridColumnEnd: 3
-  }
-});
-
-var tooltipContent = {
-  maxWidth: '10em',
-  maxHeight: '15em',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  WebkitLineClamp: '10',
-  WebkitBoxOrient: 'vertical',
-  display: '-webkit-box !important',
-  wordBreak: 'break-word',
-  '.is-right > * > &, .is-left > * > &': {
-    maxWidth: '24em',
-    maxHeight: '6.5em',
-    WebkitLineClamp: '4'
-  }
-};
-var expandableRowSharedStyle = {
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap'
-};
-var expandableRow = {
-  title: _objectSpread({
-    fontSize: 'lg',
-    color: 'neutral.20'
-  }, expandableRowSharedStyle),
-  subtitle: _objectSpread({
-    fontSize: 'sm',
-    color: 'neutral.60'
-  }, expandableRowSharedStyle),
-  lineChart: {
-    title: _objectSpread({
-      fontSize: 'sm',
-      color: 'neutral.40',
-      maxWidth: '100%'
-    }, expandableRowSharedStyle),
-    count: {
-      color: 'neutral.20',
-      fontSize: 22,
-      fontWeight: 2
-    },
-    countLabel: {
-      fontSize: 'xs',
-      color: 'neutral.50'
-    },
-    chartLabel: {
-      fontSize: 'xs',
-      color: 'neutral.50',
-      minWidth: '60px'
-    },
-    trend: {
-      color: 'neutral.20',
-      fontSize: 'sm',
-      fontWeight: 3,
-      whiteSpace: 'nowrap'
-    }
-  }
-};
-var breadcrumbLi = {
-  'a.is-hovered.is-current ': {
-    textDecoration: 'none'
-  }
-};
-var breadcrumbLink = {
-  color: 'active',
-  fontFamily: 'standard',
-  fontSize: '15px',
-  textDecoration: 'none',
-  outline: 'none',
-  '&.is-hovered': {
-    textDecoration: 'underline'
-  },
-  '&.is-focused': {
-    textDecoration: 'underline'
-  },
-  '&.is-disabled': {
-    pointerEvents: 'none'
-  },
-  '&.is-current': _objectSpread(_objectSpread({
-    pointerEvents: 'none'
-  }, base), {}, {
-    fontWeight: 1
-  })
-};
-
 var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
   fontSize: 'sm',
   fontWeight: 3,
   color: 'secondary',
   textTransform: 'capitalize'
 });
-
-var navBarSubtitle = {
-  ml: 'md',
-  my: 'sm',
-  fontWeight: 1,
-  fontSize: 'sm',
-  color: 'accent.80',
-  zIndex: '100'
-};
-
-var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
-  whiteSpace: 'break-spaces',
-  lineHeight: 1,
-  fontSize: 'md',
-  fontWeight: 1,
-  maxWidth: '150px',
-  color: 'neutral.95',
-  '.is-selected &': {
-    color: 'white'
-  }
-});
-
-var collapsiblePanellItem = _objectSpread(_objectSpread({}, wordWrap), {}, {
-  color: 'neutral.30',
-  fontSize: 'sm',
-  fontWeight: 500,
-  overflow: 'hidden',
-  marginRight: 'xs',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-
-var collapsiblePanelTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
-  fontSize: 'sm',
-  fontWeight: 500,
-  color: 'text.secondary',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  mr: 'xs'
-});
-
-var maskedValue = {
-  width: 252,
-  wordBreak: 'break-all',
-  '&.is-masked': {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    fontWeight: 700
-  }
-};
-var timeZone = {
-  title: {
-    color: 'neutral.10',
-    fontSize: 'md',
-    whiteSpace: 'nowrap',
-    lineHeight: 1,
-    '.is-focused &': {
-      color: 'white'
-    }
-  },
-  subTitle: {
-    color: 'neutral.40',
-    fontSize: 'sm',
-    ml: 10,
-    '.is-focused &': {
-      color: 'white'
-    }
-  },
-  time: {
-    color: 'neutral.10',
-    fontSize: 'sm',
-    fontWeight: 1,
-    '.is-focused &': {
-      color: 'white'
-    }
-  }
-};
-
 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), {}, {
@@ -268,8 +77,6 @@ export var text = {
     color: 'text.secondary',
     fontFamily: 'standard'
   }),
-  breadcrumbLi: breadcrumbLi,
-  breadcrumbLink: breadcrumbLink,
   buttonLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'md',
     fontWeight: 1,
@@ -296,7 +103,6 @@ export var text = {
     fontFamily: 'standard'
   }),
   environmentBreadcrumb: environmentBreadcrumb,
-  fieldHelperText: fieldHelperText,
   H1: _objectSpread(_objectSpread({}, title), {}, {
     fontWeight: 3,
     lineHeight: '28px'
@@ -350,12 +156,6 @@ export var text = {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   }),
-  maskedValue: maskedValue,
-  expandableRow: expandableRow,
-  collapsiblePanellItem: collapsiblePanellItem,
-  collapsiblePanelTitle: collapsiblePanelTitle,
-  navBarHeaderText: navBarHeaderText,
-  navBarSubtitle: navBarSubtitle,
   placeholder: {
     fontWeight: -1,
     color: 'text.secondary',
@@ -379,7 +179,5 @@ export var text = {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   },
-  title: title,
-  tooltipContent: tooltipContent,
-  timeZone: timeZone
+  title: title
 };

package/lib/components/Text/Text.test.js

@@ -8,32 +8,28 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-
 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 React from 'react';
 import { ThemeProvider } from 'theme-ui';
-import { render, screen } from '../../utils/testUtils/testWrapper';
-import Text from '.';
 import axeTest from '../../utils/testUtils/testAxe';
 import testTheme from '../../utils/testUtils/testTheme';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import Text from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-text';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var children = props.children;
   return render(___EmotionJSX(ThemeProvider, {
     theme: testTheme
   }, ___EmotionJSX(Text, _extends({}, defaultProps, props), children)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default text', function () {
   getComponent();
@@ -53,13 +49,11 @@ test('typography props will be applied', function () {
   };
   getComponent(_objectSpread({}, customTypographyProps));
   var text = screen.getByTestId(testId);
-  expect(text).toHaveStyle({
-    fontFamily: 'times',
-    fontSize: '23px',
-    fontWeight: 900,
-    lineHeight: '2em',
-    letterSpacing: '5px',
-    textAlign: 'right',
-    fontStyle: 'italic'
-  });
+  expect(text).toHaveStyle('fontFamily: times');
+  expect(text).toHaveStyle('fontSize: xx');
+  expect(text).toHaveStyle('fontWeight: 900');
+  expect(text).toHaveStyle('lineHeight: 2em');
+  expect(text).toHaveStyle('letterSpacing: 5px');
+  expect(text).toHaveStyle('textAlign: right');
+  expect(text).toHaveStyle('fontStyle: italic');
 });

package/lib/components/TextArea/TextArea.js

@@ -8,11 +8,11 @@ import { Textarea as ThemeUITextArea } from 'theme-ui';
  *
  * **Note: Requires a label. It's recommended to use `TextAreaField` for a complete solution.**
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ThemeUITextArea, _extends({
-    ref: ref // this requires to fix safari resizing issue (UIP-4995)
+    ref: ref
+    // this requires to fix safari resizing issue (UIP-4995)
     ,
     sx: {
       position: 'relative'

package/lib/components/TextArea/TextArea.styles.js

@@ -0,0 +1,45 @@
+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; }
+import { input } from '../Input/Input.styles';
+// Styles for default input and variants go here.
+
+export var baseField = _objectSpread(_objectSpread({}, input), {}, {
+  height: 'unset',
+  '&.is-unresizable': {
+    resize: 'none'
+  },
+  '.is-float-label &': {
+    height: 'unset'
+  }
+});
+var containerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  width: '20px',
+  right: '10px',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
+var floatLabelWrapper = {
+  width: 'calc(100% - 4px)',
+  backgroundColor: 'white',
+  position: 'relative',
+  height: '17px',
+  bottom: '-18px',
+  left: '3px',
+  zIndex: 2
+};
+export default {
+  baseField: baseField,
+  containerSlot: containerSlot,
+  floatLabelWrapper: floatLabelWrapper
+};

package/lib/components/TextArea/TextArea.test.js

@@ -1,20 +1,19 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import TextArea from '.';
 import axeTest from '../../utils/testUtils/testAxe';
+import TextArea from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'textAreaField';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(TextArea, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent, {
   // TextArea with label provided by TextAreaField
   rules: {