@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

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

@@ -5,10 +5,12 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["status", "helperText"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -36,9 +38,9 @@ export default {
   },
   argTypes: _objectSpread({}, arrayFieldArgTypes),
   args: {
-    label: 'Array field label',
+    label: 'Array Field Label',
     helperText: 'Helper text info...',
-    addButtonLabel: '+ Add field'
+    addButtonLabel: '+ Add Field'
   }
 };
 var defaultData = [{
@@ -52,9 +54,9 @@ export var Uncontrolled = function Uncontrolled(_ref) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(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,
@@ -64,12 +66,11 @@ export var Uncontrolled = function Uncontrolled(_ref) {
     },
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
       return ___EmotionJSX(TextField, _extends({
-        "aria-label": "Text field",
+        "aria-label": "Text Field",
         value: fieldValue,
         onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
-        mr: "xs",
         slots: {
           inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
@@ -89,11 +90,12 @@ export var Controlled = function Controlled(_ref2) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   var defaultDataSelectField = [{
     id: uuid(),
-    fieldValue: 'red',
-    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({
-        defaultSelectedKey: fieldValue,
-        onSelectionChange: function onSelectionChange(e) {
+    value: 'The value of the input',
+    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps) {
+      return ___EmotionJSX(TextField, _extends({
+        "aria-label": "Text Field",
+        value: fieldValue,
+        onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
         width: "100%",
@@ -105,24 +107,15 @@ export var Controlled = function Controlled(_ref2) {
             }
           })
         }
-      }, otherFieldProps, {
-        listBoxProps: {
-          'aria-labelledby': otherFieldProps
-        }
-      }), ___EmotionJSX(Item, {
-        key: "red"
-      }, "Red"), ___EmotionJSX(Item, {
-        key: "blue"
-      }, "Blue"), ___EmotionJSX(Item, {
-        key: "yellow"
-      }, "Yellow")));
+      }, otherFieldProps));
     }
   }, {
     id: uuid(),
-    fieldValue: 'black',
-    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+    value: 'red',
+    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps) {
       return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({
-        defaultSelectedKey: fieldValue,
+        "aria-label": "Select Field",
+        selectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(key) {
           return onFieldValueChange(key, id);
         },
@@ -137,47 +130,50 @@ export var Controlled = function Controlled(_ref2) {
         }
       }, otherFieldProps, {
         listBoxProps: {
-          'aria-labelledby': otherFieldProps
-        }
-      }), ___EmotionJSX(Item, {
-        key: "orange"
-      }, "Orange"), ___EmotionJSX(Item, {
-        key: "purple"
-      }, "Purple"), ___EmotionJSX(Item, {
-        key: "black"
-      }, "Black")));
-    }
-  }];
-  var defaultEmptyField = {
-    id: uuid(),
-    fieldValue: 'blue',
-    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({
-        defaultSelectedKey: fieldValue,
-        onSelectionChange: function onSelectionChange(e) {
-          return onFieldValueChange(e, id);
-        },
-        width: "100%",
-        slots: {
-          inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
-            isDisabled: isDisabled,
-            onDelete: function onDelete() {
-              return onFieldDelete(id);
-            }
-          })
-        }
-      }, otherFieldProps, {
-        listBoxProps: {
-          'aria-labelledby': otherFieldProps
+          'aria-labelledby': labelId
         }
       }), ___EmotionJSX(Item, {
+        key: "red"
+      }, "Red"), ___EmotionJSX(Item, {
         key: "blue"
       }, "Blue"), ___EmotionJSX(Item, {
-        key: "teal"
-      }, "Teal"), ___EmotionJSX(Item, {
-        key: "turquoise"
-      }, "Turquoise")));
+        key: "yellow"
+      }, "Yellow")));
     }
+  }];
+  var defaultEmptyField = function defaultEmptyField() {
+    return {
+      id: uuid(),
+      value: 'blue',
+      onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps) {
+        return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({
+          "aria-label": "Select Field",
+          selectedKey: fieldValue,
+          onSelectionChange: function onSelectionChange(key) {
+            return onFieldValueChange(key, id);
+          },
+          width: "100%",
+          slots: {
+            inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
+              isDisabled: isDisabled,
+              onDelete: function onDelete() {
+                return onFieldDelete(id);
+              }
+            })
+          }
+        }, otherFieldProps, {
+          listBoxProps: {
+            'aria-labelledby': labelId
+          }
+        }), ___EmotionJSX(Item, {
+          key: "blue"
+        }, "Blue"), ___EmotionJSX(Item, {
+          key: "teal"
+        }, "Teal"), ___EmotionJSX(Item, {
+          key: "turquoise"
+        }, "Turquoise")));
+      }
+    };
   };
   var _React$useState = React.useState(defaultDataSelectField),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -189,7 +185,7 @@ export var Controlled = function Controlled(_ref2) {
   var handleOnAdd = function handleOnAdd() {
     setFieldValues(function (oldValues) {
       var _context;
-      return _concatInstanceProperty(_context = []).call(_context, oldValues, [defaultEmptyField]);
+      return _concatInstanceProperty(_context = []).call(_context, oldValues, [defaultEmptyField()]);
     });
   };
   var handleOnDelete = function handleOnDelete(fieldId) {
@@ -202,14 +198,14 @@ export var Controlled = function Controlled(_ref2) {
   };
   return ___EmotionJSX(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"
   });
 };
 export var WithLimitedItemsNumber = function WithLimitedItemsNumber() {
@@ -217,12 +213,11 @@ export var WithLimitedItemsNumber = function WithLimitedItemsNumber() {
     defaultValue: defaultData,
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
       return ___EmotionJSX(TextField, _extends({
-        "aria-label": "Text field",
+        "aria-label": "Text Field",
         value: fieldValue,
         onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
-        mr: "xs",
         slots: {
           inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
@@ -236,12 +231,56 @@ export var WithLimitedItemsNumber = function WithLimitedItemsNumber() {
     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"
   });
 };
+export var Error = function Error(_ref4) {
+  var status = _ref4.status,
+    helperText = _ref4.helperText,
+    args = _objectWithoutProperties(_ref4, _excluded);
+  return ___EmotionJSX(ArrayField, _extends({}, 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 ___EmotionJSX(TextField, _extends({
+        "aria-label": "Text Field",
+        status: status,
+        value: fieldValue,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        slots: {
+          inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps));
+    },
+    sx: {
+      width: '400px'
+    }
+  }));
+};
+Error.args = {
+  status: 'error',
+  helperText: 'Helper text info...'
+};
 export var Customizations = function Customizations() {
   return ___EmotionJSX(ArrayField, {
     fieldControlWrapperProps: {
@@ -263,12 +302,11 @@ export var Customizations = function Customizations() {
       return ___EmotionJSX(Box, {
         width: "400px"
       }, ___EmotionJSX(TextField, _extends({
-        "aria-label": "Text field",
+        "aria-label": "Text Field",
         value: fieldValue,
         onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
-        mr: "xs",
         slots: {
           inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
@@ -279,34 +317,34 @@ export var Customizations = function Customizations() {
         }
       }, otherFieldProps)));
     },
-    label: "Array field label",
+    label: "Array Field Label",
     helperText: "Helper text info...",
-    addButtonLabel: "+ Add field"
+    addButtonLabel: "+ Add Field"
   });
 };
 export var WithBothSlots = function WithBothSlots() {
   var LeftSlot = ___EmotionJSX(Button, {
-    "aria-label": "Add field",
+    "aria-label": "Left Slot",
     variant: "link",
     sx: {
-      width: 'fit-content',
-      mt: 'xs'
+      width: 'fit-content'
     }
   }, ___EmotionJSX(Text, {
-    variant: "label",
-    color: "active"
-  }, "Left slot"));
+    sx: {
+      variant: 'variants.arrayField.addButtonText'
+    }
+  }, "Left Slot"));
   var RightSlot = ___EmotionJSX(Button, {
-    "aria-label": "Add field",
+    "aria-label": "Right Slot",
     variant: "link",
     sx: {
-      width: 'fit-content',
-      mt: 'xs'
+      width: 'fit-content'
     }
   }, ___EmotionJSX(Text, {
-    variant: "label",
-    color: "active"
-  }, "Right slot"));
+    sx: {
+      variant: 'variants.arrayField.addButtonText'
+    }
+  }, "Right Slot"));
   return ___EmotionJSX(ArrayField, {
     defaultValue: defaultData,
     sx: {
@@ -327,12 +365,11 @@ export var WithBothSlots = function WithBothSlots() {
       return ___EmotionJSX(Box, {
         width: "400px"
       }, ___EmotionJSX(TextField, _extends({
-        "aria-label": "Text field",
+        "aria-label": "Text Field",
         value: fieldValue,
         onChange: function onChange(e) {
           return onFieldValueChange(e, id);
         },
-        mr: "xs",
         slots: {
           inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
@@ -343,8 +380,8 @@ export var WithBothSlots = function WithBothSlots() {
         }
       }, otherFieldProps)));
     },
-    label: "Array field label",
+    label: "Array Field Label",
     helperText: "Helper text info...",
-    addButtonLabel: "+ Add field"
+    addButtonLabel: "+ Add Field"
   });
 };

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

@@ -0,0 +1,34 @@
+// 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'
+};
+export default {
+  listItem: listItem,
+  helperTextContainer: helperTextContainer,
+  bottomBar: bottomBar,
+  addButton: addButton,
+  addButtonText: addButtonText
+};