@pingux/astro 2.221.6 → 2.234.0-alpha.0

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

@@ -12,7 +12,8 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLimitedItemsNumber = exports.WithBothSlots = exports.Uncontrolled = exports.Customizations = exports.Controlled = void 0;
+exports["default"] = exports.WithLimitedItemsNumber = exports.WithBothSlots = exports.Uncontrolled = exports.Error = exports.Customizations = exports.Controlled = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -27,6 +28,7 @@ var _index = require("../../index");
 var _ArrayField = _interopRequireDefault(require("./ArrayField.mdx"));
 var _arrayFieldAttributes = require("./arrayFieldAttributes");
 var _react2 = require("@emotion/react");
+var _excluded = ["status", "helperText"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty2(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _default = exports["default"] = {
@@ -44,9 +46,9 @@ var _default = exports["default"] = {
   },
   argTypes: _objectSpread({}, _arrayFieldAttributes.arrayFieldArgTypes),
   args: {
-    label: 'Array field label',
+    label: 'Array Field Label',
     helperText: 'Helper text info...',
-    addButtonLabel: '+ Add field'
+    addButtonLabel: '+ Add Field'
   }
 };
 var defaultData = [{
@@ -60,9 +62,9 @@ var Uncontrolled = exports.Uncontrolled = function Uncontrolled(_ref) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
   return (0, _react2.jsx)(_index.ArrayField, {
     defaultValue: defaultData,
-    label: "Array field label",
+    label: "Array Field Label",
     helperText: "Helper text info...",
-    addButtonLabel: "+ Add field",
+    addButtonLabel: "+ Add Field",
     labelProps: {
       hintText: 'Example Hint',
       isRequired: true,
@@ -72,12 +74,11 @@ var Uncontrolled = exports.Uncontrolled = function Uncontrolled(_ref) {
     },
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
       return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
-        "aria-label": "Text field",
+        "aria-label": "Text Field",
         value: fieldValue,
         onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
-        mr: "xs",
         slots: {
           inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
@@ -97,11 +98,12 @@ var Controlled = exports.Controlled = function Controlled(_ref2) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
   var defaultDataSelectField = [{
     id: (0, _uuid.v4)(),
-    fieldValue: 'red',
-    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
-        defaultSelectedKey: fieldValue,
-        onSelectionChange: function onSelectionChange(e) {
+    value: 'The value of the input',
+    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps) {
+      return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
+        "aria-label": "Text Field",
+        value: fieldValue,
+        onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
         width: "100%",
@@ -113,24 +115,15 @@ var Controlled = exports.Controlled = function Controlled(_ref2) {
             }
           })
         }
-      }, otherFieldProps, {
-        listBoxProps: {
-          'aria-labelledby': otherFieldProps
-        }
-      }), (0, _react2.jsx)(_index.Item, {
-        key: "red"
-      }, "Red"), (0, _react2.jsx)(_index.Item, {
-        key: "blue"
-      }, "Blue"), (0, _react2.jsx)(_index.Item, {
-        key: "yellow"
-      }, "Yellow")));
+      }, otherFieldProps));
     }
   }, {
     id: (0, _uuid.v4)(),
-    fieldValue: 'black',
-    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+    value: 'red',
+    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps) {
       return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
-        defaultSelectedKey: fieldValue,
+        "aria-label": "Select Field",
+        selectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(key) {
           return onFieldValueChange(key, id);
         },
@@ -145,47 +138,50 @@ var Controlled = exports.Controlled = function Controlled(_ref2) {
         }
       }, otherFieldProps, {
         listBoxProps: {
-          'aria-labelledby': otherFieldProps
-        }
-      }), (0, _react2.jsx)(_index.Item, {
-        key: "orange"
-      }, "Orange"), (0, _react2.jsx)(_index.Item, {
-        key: "purple"
-      }, "Purple"), (0, _react2.jsx)(_index.Item, {
-        key: "black"
-      }, "Black")));
-    }
-  }];
-  var defaultEmptyField = {
-    id: (0, _uuid.v4)(),
-    fieldValue: 'blue',
-    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
-        defaultSelectedKey: fieldValue,
-        onSelectionChange: function onSelectionChange(e) {
-          return onFieldValueChange(e, id);
-        },
-        width: "100%",
-        slots: {
-          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
-            isDisabled: isDisabled,
-            onDelete: function onDelete() {
-              return onFieldDelete(id);
-            }
-          })
-        }
-      }, otherFieldProps, {
-        listBoxProps: {
-          'aria-labelledby': otherFieldProps
+          'aria-labelledby': labelId
         }
       }), (0, _react2.jsx)(_index.Item, {
+        key: "red"
+      }, "Red"), (0, _react2.jsx)(_index.Item, {
         key: "blue"
       }, "Blue"), (0, _react2.jsx)(_index.Item, {
-        key: "teal"
-      }, "Teal"), (0, _react2.jsx)(_index.Item, {
-        key: "turquoise"
-      }, "Turquoise")));
+        key: "yellow"
+      }, "Yellow")));
     }
+  }];
+  var defaultEmptyField = function defaultEmptyField() {
+    return {
+      id: (0, _uuid.v4)(),
+      value: 'blue',
+      onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps) {
+        return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
+          "aria-label": "Select Field",
+          selectedKey: fieldValue,
+          onSelectionChange: function onSelectionChange(key) {
+            return onFieldValueChange(key, id);
+          },
+          width: "100%",
+          slots: {
+            inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+              isDisabled: isDisabled,
+              onDelete: function onDelete() {
+                return onFieldDelete(id);
+              }
+            })
+          }
+        }, otherFieldProps, {
+          listBoxProps: {
+            'aria-labelledby': labelId
+          }
+        }), (0, _react2.jsx)(_index.Item, {
+          key: "blue"
+        }, "Blue"), (0, _react2.jsx)(_index.Item, {
+          key: "teal"
+        }, "Teal"), (0, _react2.jsx)(_index.Item, {
+          key: "turquoise"
+        }, "Turquoise")));
+      }
+    };
   };
   var _React$useState = _react["default"].useState(defaultDataSelectField),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -197,7 +193,7 @@ var Controlled = exports.Controlled = function Controlled(_ref2) {
   var handleOnAdd = function handleOnAdd() {
     setFieldValues(function (oldValues) {
       var _context;
-      return (0, _concat["default"])(_context = []).call(_context, oldValues, [defaultEmptyField]);
+      return (0, _concat["default"])(_context = []).call(_context, oldValues, [defaultEmptyField()]);
     });
   };
   var handleOnDelete = function handleOnDelete(fieldId) {
@@ -210,14 +206,14 @@ var Controlled = exports.Controlled = function Controlled(_ref2) {
   };
   return (0, _react2.jsx)(_index.ArrayField, {
     value: fieldValues,
-    helperText: "Here is some helpful text...",
     onAdd: handleOnAdd,
     onChange: handleOnChange,
     onDelete: handleOnDelete,
     sx: {
       width: '400px'
     },
-    label: "Array field label"
+    label: "Array Field Label",
+    addButtonLabel: "+ Add Field"
   });
 };
 var WithLimitedItemsNumber = exports.WithLimitedItemsNumber = function WithLimitedItemsNumber() {
@@ -225,12 +221,11 @@ var WithLimitedItemsNumber = exports.WithLimitedItemsNumber = function WithLimit
     defaultValue: defaultData,
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
       return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
-        "aria-label": "Text field",
+        "aria-label": "Text Field",
         value: fieldValue,
         onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
-        mr: "xs",
         slots: {
           inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
@@ -244,12 +239,56 @@ var WithLimitedItemsNumber = exports.WithLimitedItemsNumber = function WithLimit
     sx: {
       width: '400px'
     },
-    maxSize: 3,
-    label: "Array field label",
+    maxSize: 2,
+    label: "Array Field Label",
     helperText: "Helper text info...",
-    addButtonLabel: "+ Add field"
+    addButtonLabel: "+ Add Field"
   });
 };
+var Error = exports.Error = function Error(_ref4) {
+  var status = _ref4.status,
+    helperText = _ref4.helperText,
+    args = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
+  return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({}, args, {
+    defaultValue: defaultData,
+    status: status,
+    helperText: helperText,
+    label: "Array Field Label",
+    addButtonLabel: "+ Add Field",
+    labelProps: {
+      hintText: 'Example Hint',
+      isRequired: true,
+      helpHintProps: {
+        direction: 'top'
+      }
+    },
+    renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
+        "aria-label": "Text Field",
+        status: status,
+        value: fieldValue,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        slots: {
+          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps));
+    },
+    sx: {
+      width: '400px'
+    }
+  }));
+};
+Error.args = {
+  status: 'error',
+  helperText: 'Helper text info...'
+};
 var Customizations = exports.Customizations = function Customizations() {
   return (0, _react2.jsx)(_index.ArrayField, {
     fieldControlWrapperProps: {
@@ -271,12 +310,11 @@ var Customizations = exports.Customizations = function Customizations() {
       return (0, _react2.jsx)(_index.Box, {
         width: "400px"
       }, (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
-        "aria-label": "Text field",
+        "aria-label": "Text Field",
         value: fieldValue,
         onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
-        mr: "xs",
         slots: {
           inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
@@ -287,34 +325,34 @@ var Customizations = exports.Customizations = function Customizations() {
         }
       }, otherFieldProps)));
     },
-    label: "Array field label",
+    label: "Array Field Label",
     helperText: "Helper text info...",
-    addButtonLabel: "+ Add field"
+    addButtonLabel: "+ Add Field"
   });
 };
 var WithBothSlots = exports.WithBothSlots = function WithBothSlots() {
   var LeftSlot = (0, _react2.jsx)(_index.Button, {
-    "aria-label": "Add field",
+    "aria-label": "Left Slot",
     variant: "link",
     sx: {
-      width: 'fit-content',
-      mt: 'xs'
+      width: 'fit-content'
     }
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "label",
-    color: "active"
-  }, "Left slot"));
+    sx: {
+      variant: 'variants.arrayField.addButtonText'
+    }
+  }, "Left Slot"));
   var RightSlot = (0, _react2.jsx)(_index.Button, {
-    "aria-label": "Add field",
+    "aria-label": "Right Slot",
     variant: "link",
     sx: {
-      width: 'fit-content',
-      mt: 'xs'
+      width: 'fit-content'
     }
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "label",
-    color: "active"
-  }, "Right slot"));
+    sx: {
+      variant: 'variants.arrayField.addButtonText'
+    }
+  }, "Right Slot"));
   return (0, _react2.jsx)(_index.ArrayField, {
     defaultValue: defaultData,
     sx: {
@@ -335,12 +373,11 @@ var WithBothSlots = exports.WithBothSlots = function WithBothSlots() {
       return (0, _react2.jsx)(_index.Box, {
         width: "400px"
       }, (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
-        "aria-label": "Text field",
+        "aria-label": "Text Field",
         value: fieldValue,
         onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
-        mr: "xs",
         slots: {
           inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
@@ -351,8 +388,8 @@ var WithBothSlots = exports.WithBothSlots = function WithBothSlots() {
         }
       }, otherFieldProps)));
     },
-    label: "Array field label",
+    label: "Array Field Label",
     helperText: "Helper text info...",
-    addButtonLabel: "+ Add field"
+    addButtonLabel: "+ Add Field"
   });
 };

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

@@ -0,0 +1,9 @@
+import { ThemeUICSSObject } from 'theme-ui';
+declare const _default: {
+    listItem: ThemeUICSSObject;
+    helperTextContainer: ThemeUICSSObject;
+    bottomBar: ThemeUICSSObject;
+    addButton: ThemeUICSSObject;
+    addButtonText: ThemeUICSSObject;
+};
+export default _default;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+// Spacing between field rows, expressed as a space scale key. The delete
+// control layout stays a per-theme concern: legacy Astro positions it
+// absolutely outside the input, so the field keeps its column layout here.
+var listItem = {
+  mb: 'xs'
+};
+
+// Container for the array-level helper text and maximum feedback.
+var helperTextContainer = {};
+
+// Bottom bar holding the left and right slots and the add control.
+var bottomBar = {};
+
+// Add control at the end of the field list. Consumed through the `buttons`
+// theme key because it is applied to a Button.
+var addButton = {
+  width: 'fit-content',
+  mt: 'xs'
+};
+
+// Label text inside the add control; resolves the shared label text variant.
+// The add control is a link-style button, so the text takes the theme's
+// active (link) color; the weight stays on the label variant's scale value.
+var addButtonText = {
+  variant: 'text.label',
+  color: 'active'
+};
+var _default = exports["default"] = {
+  listItem: listItem,
+  helperTextContainer: helperTextContainer,
+  bottomBar: bottomBar,
+  addButton: addButton,
+  addButtonText: addButtonText
+};