@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledSystem = require("styled-system");
+
+var _themeUi = require("theme-ui");
+
+var _variants = require("../../utils/devUtils/constants/variants");
+
+var _react2 = require("@emotion/react");
+
+var ExtendedText = ( /*#__PURE__*/0, _base["default"])(_themeUi.Text, process.env.NODE_ENV === "production" ? {
+  target: "eifd86o0"
+} : {
+  target: "eifd86o0",
+  label: "ExtendedText"
+})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRcUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvVGV4dC9UZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IFRleHQgYXMgVGhlbWVVSVRleHQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IHRleHRWYXJpYW50cyB9IGZyb20gJy4uLy4uL3V0aWxzL2RldlV0aWxzL2NvbnN0YW50cy92YXJpYW50cyc7XG5cbmNvbnN0IEV4dGVuZGVkVGV4dCA9IHN0eWxlZChUaGVtZVVJVGV4dCkobGF5b3V0LCBmbGV4Ym94LCB0eXBvZ3JhcGh5KTtcblxuLyoqXG4gKiBUaGUgVGV4dCBjb21wb25lbnQgaXMgdXNlZCBmb3IgZGlzcGxheWluZyB0ZXh0LlxuICogVGV4dCBzdXBwb3J0cyBbVHlwb2dyYXBoeSBQcm9wcyBmcm9tIFN0eWxlZCBTeXN0ZW0gXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlLyN0eXBvZ3JhcGh5KS5cbiAqL1xuXG5jb25zdCBUZXh0ID0gUmVhY3QuZm9yd2FyZFJlZigocHJvcHMsIHJlZikgPT4gKFxuICA8RXh0ZW5kZWRUZXh0IHZhcmlhbnQ9XCJiYXNlXCIgey4uLnByb3BzfSByZWY9e3JlZn0gLz5cbikpO1xuXG5UZXh0LnByb3BUeXBlcyA9IHtcbiAgdmFyaWFudDogUHJvcFR5cGVzLnN0cmluZyxcbn07XG5cblxuVGV4dC5kZWZhdWx0UHJvcHMgPSB7XG4gIHZhcmlhbnQ6IHRleHRWYXJpYW50cy5CQVNFLFxufTtcblxuVGV4dC5kaXNwbGF5TmFtZSA9ICdUZXh0JztcblxuZXhwb3J0IGRlZmF1bHQgVGV4dDtcbiJdfQ== */");
+/**
+ * The Text component is used for displaying text.
+ * Text supports [Typography Props from Styled System ](https://styled-system.com/table/#typography).
+ */
+
+var Text = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  return (0, _react2.jsx)(ExtendedText, (0, _extends2["default"])({
+    variant: "base"
+  }, props, {
+    ref: ref
+  }));
+});
+
+Text.propTypes = {
+  variant: _propTypes["default"].string
+};
+Text.defaultProps = {
+  variant: _variants.textVariants.BASE
+};
+Text.displayName = 'Text';
+var _default = Text;
+exports["default"] = _default;

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

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.WithCustomWidth = exports.TypographyStyleProps = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _themeUi = require("theme-ui");
+
+var _Text = _interopRequireDefault(require("./Text"));
+
+var _variants = require("../../utils/devUtils/constants/variants.js");
+
+var _colors = require("../../styles/colors.js");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "bg"];
+
+var _context;
+
+var _default = {
+  title: 'Text',
+  component: _Text["default"],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: (0, _values["default"])(_variants.textVariants)
+      },
+      description: 'Text variant.',
+      defaultValue: (0, _values["default"])(_variants.textVariants)[0]
+    },
+    children: {
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      },
+      description: 'Text value.',
+      defaultValue: 'Hi, this is some text!'
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: (0, _concat["default"])(_context = [undefined]).call(_context, (0, _map["default"])(_colors.flatColorList).call(_colors.flatColorList, function (_ref) {
+          var _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
+              colorName = _ref2[0];
+
+          return colorName;
+        }))
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      },
+      description: 'Text color.',
+      defaultValue: undefined
+    },
+    bg: {
+      control: {
+        type: 'select',
+        options: (0, _map["default"])(_colors.flatColorList).call(_colors.flatColorList, function (_ref3) {
+          var _ref4 = (0, _slicedToArray2["default"])(_ref3, 1),
+              colorName = _ref4[0];
+
+          return colorName;
+        })
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      },
+      description: 'Background color.',
+      defaultValue: 'white'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(_ref5) {
+  var children = _ref5.children,
+      bg = _ref5.bg,
+      args = (0, _objectWithoutProperties2["default"])(_ref5, _excluded);
+  return (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
+    bg: bg
+  }, args, {
+    p: "xl"
+  }), children);
+};
+
+exports.Default = Default;
+
+var WithCustomWidth = function WithCustomWidth() {
+  return (0, _react2.jsx)(_index.Box, {
+    width: 200
+  }, (0, _react2.jsx)(_Text["default"], {
+    p: "xl"
+  }, "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
+};
+
+exports.WithCustomWidth = WithCustomWidth;
+
+var TypographyStyleProps = function TypographyStyleProps() {
+  var textProps = {
+    fontFamily: 'times',
+    fontSize: 'md',
+    fontWeight: 900,
+    lineHeight: '2em',
+    letterSpacing: '5px',
+    textAlign: 'right',
+    fontStyle: 'italic'
+  };
+  var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.';
+  return (0, _react2.jsx)(_index.Box, {
+    p: "xx",
+    gap: "md"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "title"
+  }, "The Text component allows typography style props to be passed in directly."), (0, _react2.jsx)(_Text["default"], textProps, loremText), (0, _react2.jsx)(_themeUi.Divider, null), (0, _react2.jsx)(_Text["default"], {
+    variant: "title"
+  }, "Typography styles can also be passed in through the sx prop for the same result."), (0, _react2.jsx)(_Text["default"], {
+    sx: textProps
+  }, loremText));
+};
+
+exports.TypographyStyleProps = TypographyStyleProps;
+TypographyStyleProps.argTypes = {
+  variant: {
+    control: {
+      type: 'none'
+    }
+  },
+  children: {
+    control: {
+      type: 'none'
+    }
+  },
+  color: {
+    control: {
+      type: 'none'
+    }
+  },
+  bg: {
+    control: {
+      type: 'none'
+    }
+  },
+  tabPanelProps: {
+    control: {
+      type: 'none'
+    }
+  }
+};

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _themeUi = require("theme-ui");
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _ = _interopRequireDefault(require("."));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testTheme = _interopRequireDefault(require("../../utils/testUtils/testTheme"));
+
+var _react2 = require("@emotion/react");
+
+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) { (0, _defineProperty2["default"])(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 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 (0, _testWrapper.render)((0, _react2.jsx)(_themeUi.ThemeProvider, {
+    theme: _testTheme["default"]
+  }, (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), children)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('default text', function () {
+  getComponent();
+
+  var text = _testWrapper.screen.getByTestId(testId);
+
+  expect(text).toBeInstanceOf(HTMLSpanElement);
+  expect(text).toBeInTheDocument();
+});
+test('typography props will be applied', function () {
+  var customTypographyProps = {
+    fontFamily: 'times',
+    fontSize: 'xx',
+    fontWeight: 900,
+    lineHeight: '2em',
+    letterSpacing: '5px',
+    textAlign: 'right',
+    fontStyle: 'italic'
+  };
+  getComponent(_objectSpread({}, customTypographyProps));
+
+  var text = _testWrapper.screen.getByTestId(testId);
+
+  expect(text).toHaveStyle({
+    fontFamily: 'times',
+    fontSize: '23px',
+    fontWeight: 900,
+    lineHeight: '2em',
+    letterSpacing: '5px',
+    textAlign: 'right',
+    fontStyle: 'italic'
+  });
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Text["default"];
+  }
+});
+
+var _Text = _interopRequireDefault(require("./Text"));

package/lib/cjs/components/TextArea/TextArea.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _themeUi = require("theme-ui");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Basic textarea input.
+ * Built on top of the [TextArea from Theme-UI Forms](https://theme-ui.com/components/textarea and
+ * uses the available [props from Theme-UI](https://theme-ui.com/sx-prop).
+ *
+ * **Note: Requires a label. It's recommended to use `TextAreaField` for a complete solution.**
+ */
+var TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react2.jsx)(_themeUi.Textarea, (0, _extends2["default"])({
+    ref: ref // this requires to fix safari resizing issue (UIP-4995)
+    ,
+    sx: {
+      position: 'relative'
+    }
+  }, props));
+});
+TextArea.displayName = 'TextArea';
+var _default = TextArea;
+exports["default"] = _default;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@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 (0, _react2.render)((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent, {
+  // TextArea with label provided by TextAreaField
+  rules: {
+    'label': {
+      enabled: false
+    }
+  }
+});
+test('TextArea renders', function () {
+  getComponent();
+
+  var textArea = _react2.screen.getByTestId(testId);
+
+  expect(textArea).toBeInstanceOf(HTMLTextAreaElement);
+  expect(textArea).toBeInTheDocument();
+});

package/lib/cjs/components/TextArea/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _TextArea["default"];
+  }
+});
+
+var _TextArea = _interopRequireDefault(require("./TextArea"));