refactor: add data-modalopen attribute to Modal

src/components/modal/modal.tsx

@@ -27,6 +27,7 @@ const Modal: FC<ModalProps> = ({
       open={open}
       {...props}
       className={_className}
+      data-modalopen={open ? true : null}
     >
       {children}
     </StyledModal>
@@ -50,7 +51,8 @@ interface PrimitiveModalProps {
   /**
    * onClose - function to execute while closing the Dialog
    */
-  onClose: (item: false) => void
+
+  onClose?: (item: false) => void
 
   /**
    * unmount - controls if the Dialog should be unmounted or hidden when closed

src/components/modal/readme.md

@@ -0,0 +1,47 @@
+# Modals
+
+Renders a select for the user to choose from a range of options
+
+## Quick Use
+
+```jsx
+import { Select } from 'avocado-ui'
+const [name, setName] = useState('')
+
+const genderOptions = [
+  { value: 'male', displayText: 'Male' },
+  { value: 'female', displayText: 'Female' }
+]
+
+const App: FC = () => (
+  <Select
+    onChange={(e) => setState(e.target.value)}
+    placeholder='Placeholder content'
+    selectOptions={genderOptions}
+  />
+)
+```
+
+## Props
+
+| property     | description                                                                                                    | type        | default |
+| ------------ | -------------------------------------------------------------------------------------------------------------- | ----------- | ------- |
+| open         | sets the state of the Dialog. Whether the Dialog is open or not.                                               | `boolean`   | `false` |
+| onClose      | function to execute while closing the Dialog                                                                   | () => void  | =       |
+| unmount      | controls if the Dialog should be unmounted or hidden when closed                                               | `boolean`   | `blue`  |
+| as           | specifies the html element the component should be rendered as                                                 | JSX.Element | `div`   |
+| initialFocus | control the element that receives focus once the modal is open. Only elements in the tab order can be focused. | React.Ref   | `null`  |
+
+## Todo
+
+- [x] open
+- [x] onClose
+- [x] unmount
+- [x] as
+- [x] initialFocus
+
+## Test Suites
+
+- [x] Modal renders correctly
+- [ ] Modal traps focus
+- [ ] Modal is active when `open` prop is set to true

src/components/modal/title.tsx

@@ -28,7 +28,8 @@ interface ModalTitleProps extends HTMLAttributes<HTMLElement> {
   /**
    * as - specifies the html element the component should be rendered as
    */
-  as: ElementType<any>
+
+  as?: ElementType<any>
 }
 
 const StyledTitle = styled<any>(Title)`

website/package.json

@@ -8,7 +8,7 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "@avocado-ui/react": "^0.1.15",
+    "@avocado-ui/react": "^0.1.18",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.3.0",
     "gatsby": "^2.15.18",