README updates

Author: kylebuch8

elements/pfe-modal/README.md

@@ -1,10 +1,12 @@
-# PatternFly Modal Element
+# PFElements Modal Element
 
 ## Overview
 
 `pfe-modal` is a self-contained modal window that is hidden on page load and (when activated) restricts the user from interacting with content in the main window.
 
 ## Usage
+
+### With a trigger
 ```html
 <pfe-modal>
   <button slot="pfe-modal--trigger">Open modal</button>
@@ -16,6 +18,16 @@
 </pfe-modal>
 ```
 
+### Without a trigger
+```html
+<pfe-modal>
+  <h2 slot="pfe-modal--header">Modal with a header</h2>
+  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <pfe-cta>
+    <a href="#bar">Learn more</a>
+  </pfe-cta>
+</pfe-modal>
+```
 ## Slots
 
 ### Trigger
@@ -31,14 +43,32 @@ The default slot can contain any type of content. When the header is not present
 
 ### open
 
+Manually opens a modal. Return the modal that has been opened.
+
+```
+document.querySelector("pfe-modal").open();
+```
+
 ### close
 
+Manually closes a modal. Returns the modal that has been closed.
+
+```
+document.querySelector("pfe-modal").close();
+```
+
 ### toggle
 
+Manually toggles a modal. Returns the modal that has been toggled.
+
+```
+document.querySelector("pfe-modal").toggle();
+```
+
 ## Events
 
 ### pfe-modal:open
-Fires when a user clicks on the trigger. open can be accessed from outside the web component by getting the modal that you want to fire and passing in the firing event: `document.querySelector("pfe-modal#custom-id").open(event).`
+Fires when a user clicks on the trigger or manually opens a modal.
 
 ```
 detail: {
@@ -47,7 +77,7 @@ detail: {
 ```
 
 ### pfe-modal:close
-Fires when either a user clicks on either the close button or the overlay. close can be accessed from outside the web component by getting the modal that you want to fire and passing in the firing event: `document.querySelector("pfe-modal#custom-id").close(event).`
+Fires when either a user clicks on either the close button or the overlay or manually closes a modal.
 
 ```
 detail: {
@@ -71,7 +101,7 @@ From the PFElements root directory, run:
 
 ## Code style
 
-Collapsible (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
+Modal (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
 
 [prettier]: https://github.com/prettier/prettier/
 [prettier-ed]: https://github.com/prettier/prettier/#editor-integration