@aurodesignsystem/auro-dialog 1.0.0

package/demo/index.md

@@ -0,0 +1,200 @@
+<!--
+The demo.md file is a compiled document. No edits should be made directly to this file.
+README.md is created by running `npm run build:docs`.
+This file is generated based on a template fetched from `./docs/partials/demo.md`
+-->
+
+# Dialog
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
+<!-- The below content is automatically added from ./description.md -->
+The `<auro-dialog>` component is an intrusive interactive component, not passive. The component is best used when there is a requirement the user be made aware of the content being shown, moving focus from the main content to the dialog content.
+
+The component also supports a modal (blocking) state where the user must interact with the content of the component in order to continue. Passive dismissal of the content is not allowed. Users of this state must add a trigger for the user to move beyond this content.
+
+Auro holds the opinions of the [Nielsen Norman Group](https://www.nngroup.com/articles/modal-nonmodal-dialog/) on dialog and modal use to be true.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## auro-dialog use cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./useCases.md) -->
+<!-- The below content is automatically added from ./useCases.md -->
+The `<auro-dialog>` component should be used in situations where users may:
+
+* Be prompted to take an action before doing anything else or going back
+* Be prompted to view content with the option of closing it
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Additional Information
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./readmeAddlInfo.md) -->
+<!-- The below content is automatically added from ./readmeAddlInfo.md -->
+**Important Notice**: This component no longer lives within the `auro-interruption` repository, as that is now being deprecated. `<auro-dialog>` is now a standalone component and users will be required to install it seperately. See the [Install Page](https://auro.alaskaair.com/components/auro/dialog/install) for instructions on how to install the component.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Set Up
+
+Triggering the dialog relies on functions being installed. See the following example code that is installed into this demo.
+
+```javascript
+function toggleDialog(elem) {
+  let dialog = document.querySelector(elem);
+
+  dialog.hasAttribute('open')
+  ? dialog.removeAttribute("open")
+  : (dialog.removeAttribute("open"),
+    dialog.setAttribute("open", true));
+}
+
+// This function can be retrieved from https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/toggleDialog.js
+```
+
+Once the JavaScript is added to the scope of the experience, the next part is adding a trigger. In this example, the button component will toggle a dialog with the ID of `#demo1`.
+
+```javascript
+<auro-button onClick="toggleDialog('#demo1')">Open Default Dialog</auro-button>
+```
+
+## The Structure
+
+The structure of the dialog itself consists of three slots. The `header`, `content` and `footer` slots. See the scaffolding example below for adding content to the component.
+
+```javascript
+  <auro-dialog id="[unique ID]">
+    <span slot="header">[header content]</span>
+    <span slot="content">
+      [body content]
+    </span>
+    <span slot="footer">
+      [footer content]
+    </span>
+  </auro-dialog>
+```
+
+It should be noted that the `footer` slot is reserved for the placement of action buttons.
+
+## Example(s)
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
+  <div>
+    <auro-button onClick="toggleDialog('#defaultDialog')">Open default dialog</auro-button>
+  </div>
+  <auro-dialog id="defaultDialog">
+    <span slot="header">Default Dialog</span>
+    <div slot="content">
+      <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
+      <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
+      <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
+      <ul>
+        <li>Caerphilly croque monsieur fondue</li>
+        <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
+        <li>Cheddar cheese and biscuits chalk and cheese</li>
+        <li>Camembert de normandie stinking bishop bavarian bergkase</li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <auro-button secondary onClick="toggleDialog('#defaultDialog')">Close</auro-button>
+    </div>
+  </auro-dialog>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
+
+```html
+<div>
+  <auro-button onClick="toggleDialog('#defaultDialog')">Open default dialog</auro-button>
+</div>
+<auro-dialog id="defaultDialog">
+  <span slot="header">Default Dialog</span>
+  <div slot="content">
+    <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
+    <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
+    <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
+    <ul>
+      <li>Caerphilly croque monsieur fondue</li>
+      <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
+      <li>Cheddar cheese and biscuits chalk and cheese</li>
+      <li>Camembert de normandie stinking bishop bavarian bergkase</li>
+    </ul>
+  </div>
+  <div slot="footer">
+    <auro-button secondary onClick="toggleDialog('#defaultDialog')">Close</auro-button>
+  </div>
+</auro-dialog>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+Having a closing statement about your example helps to really complete the thought with your reader.
+
+## Recommended Use and Version Control
+
+There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-dialog` custom element is defined automatically.
+
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+
+```js
+import './node_modules/@aurodesignsystem/auro-dialog';
+registerComponent('custom-dialog');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `auro-dialog` element.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/custom.html -->
+  <div>
+    <auro-button onClick="toggleDialog('#customDialog')">Open default dialog</auro-button>
+  </div>
+  <custom-dialog id="customDialog">
+    <span slot="header">Default Dialog</span>
+    <div slot="content">
+      <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
+      <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
+      <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
+      <ul>
+        <li>Caerphilly croque monsieur fondue</li>
+        <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
+        <li>Cheddar cheese and biscuits chalk and cheese</li>
+        <li>Camembert de normandie stinking bishop bavarian bergkase</li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <auro-button secondary onClick="toggleDialog('#customDialog')">Close</auro-button>
+    </div>
+  </custom-dialog>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->
+
+```html
+<div>
+  <auro-button onClick="toggleDialog('#customDialog')">Open default dialog</auro-button>
+</div>
+<custom-dialog id="customDialog">
+  <span slot="header">Default Dialog</span>
+  <div slot="content">
+    <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
+    <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
+    <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
+    <ul>
+      <li>Caerphilly croque monsieur fondue</li>
+      <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
+      <li>Cheddar cheese and biscuits chalk and cheese</li>
+      <li>Camembert de normandie stinking bishop bavarian bergkase</li>
+    </ul>
+  </div>
+  <div slot="footer">
+    <auro-button secondary onClick="toggleDialog('#customDialog')">Close</auro-button>
+  </div>
+</custom-dialog>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

package/dist/auro-dialog.d.ts

@@ -0,0 +1,22 @@
+export class AuroDialog extends ComponentBase {
+    static get properties(): {
+        open: {
+            noAccessor: boolean;
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        modal: {
+            type: BooleanConstructor;
+        };
+        unformatted: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        triggerElement: {
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[][];
+}
+import ComponentBase from './componentBase';
+//# sourceMappingURL=auro-dialog.d.ts.map

package/dist/auro-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auro-dialog.d.ts","sourceRoot":"","sources":["../src/auro-dialog.js"],"names":[],"mappings":"AAQA;IAME;;;;;;;;;;;;;;;;MASC;IAED,iDAEC;CACF;0BAvByB,iBAAiB"}