@pingux/astro 2.166.1-alpha.5 → 2.167.0

package/lib/components/Modal/Modal.stories.js

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useGetTheme, useModalState } from '../../hooks';
-import { Box, Button, Item, Menu, Modal, ModalBody, ModalFooter, ModalHeader, OverlayProvider, PopoverMenu, RadioField, RadioGroupField, SearchField, SelectField, Text } from '../../index';
+import { Box, Button, ComboBoxField, Item, Menu, Modal, ModalBody, ModalFooter, ModalHeader, OverlayProvider, PopoverMenu, RadioField, RadioGroupField, SearchField, SelectField, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
 import ModalReadme from './Modal.mdx';
@@ -88,6 +88,16 @@ export default {
     hasAutoFocus: true
   }
 };
+var items = [{
+  key: 'apple',
+  name: 'Apple'
+}, {
+  key: 'banana',
+  name: 'Banana'
+}, {
+  key: 'blueberry',
+  name: 'Blueberry'
+}];
 export var Default = function Default(args) {
   var state = useModalState();
   return (
@@ -179,16 +189,6 @@ export var WithInputField = function WithInputField() {
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  var items = [{
-    key: 'apple',
-    name: 'Apple'
-  }, {
-    key: 'banana',
-    name: 'Banana'
-  }, {
-    key: 'blueberry',
-    name: 'Blueberry'
-  }];
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
     onPress: state.open,
     "aria-label": "Open modal"
@@ -276,4 +276,25 @@ export var WithPopoverMenu = function WithPopoverMenu() {
   }, ___EmotionJSX(Text, {
     color: "critical.bright"
   }, "Delete"))))))));
+};
+export var WithComboBoxField = function WithComboBoxField() {
+  var state = useModalState();
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+    onPress: state.open,
+    "aria-label": "Open modal"
+  }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, {
+    isOpen: state.isOpen,
+    onClose: state.close
+  }, ___EmotionJSX(ModalBody, null, ___EmotionJSX(Box, {
+    gap: "lg"
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet consectetur"), ___EmotionJSX(ComboBoxField, {
+    items: items,
+    label: "ComboBox Label",
+    placeholder: "Select an item"
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  })))));
 };