Merge pull request #459 from patternfly/US206196--modal-web-component

US206196  modal web component

Author: starryeyez024

elements/pfe-modal/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": [["env", { "modules": false }]],
+  "plugins": ["external-helpers"]
+}

elements/pfe-modal/.editorconfig

@@ -0,0 +1,17 @@
+# EditorConfig: http://EditorConfig.org
+
+# Top-most EditorConfig file
+root = true
+
+# Rules for JavaScript files:
+
+[*.{js,py,json,sh,html}]
+# 4 space indentation
+indent_style = space
+indent_size = 2
+# No trailing spaces
+trim_trailing_whitespace = true
+# Unix-style newlines
+end_of_line = lf
+# Newline ending every file
+insert_final_newline = true

elements/pfe-modal/.npmignore

@@ -0,0 +1 @@
+node_modules

elements/pfe-modal/.travis.yml

@@ -0,0 +1,18 @@
+language: node_js
+dist: trusty
+sudo: required
+addons:
+  firefox: "latest"
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
+node_js: stable
+before_install:
+  - npm install -g web-component-tester
+install:
+  - npm install
+before_script:
+script:
+  - xvfb-run npm run test

elements/pfe-modal/LICENSE.txt

@@ -0,0 +1,19 @@
+Copyright 2019 Red Hat, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

elements/pfe-modal/README.md

@@ -0,0 +1,108 @@
+# 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>
+  <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>
+```
+
+### 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
+The only part visible on page load, the trigger opens the modal window. The trigger can be a button, a cta or a link. While it is part of the modal web component, it does not contain any intrinsic styles.
+
+### Header
+The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6).
+
+### Default slot
+The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.
+
+## API
+
+### 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 or manually opens a modal.
+
+```
+detail: {
+  open: true
+}
+```
+
+### pfe-modal:close
+Fires when either a user clicks on either the close button or the overlay or manually closes a modal.
+
+```
+detail: {
+  open: false
+}
+```
+
+## Test
+
+    npm run test
+
+## Build
+
+    npm run build
+
+## Demo
+
+From the PFElements root directory, run:
+
+    npm start
+
+## Code style
+
+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
+[web-component-tester]: https://github.com/Polymer/web-component-tester

elements/pfe-modal/demo/index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>PatternFly Element | pfe-modal Demo</title>
+
+    <noscript>
+      <link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">
+    </noscript>
+
+    <link href="../../pfelement/pfelement.min.css" rel="stylesheet">
+
+    <!-- uncomment the es5-adapter if you're using the umd version -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-loader.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
+    <script>require(['../pfe-modal.umd.js'])</script>
+  </head>
+  <body unresolved>
+    <h1>&lt;pfe-modal&gt;</h1>
+    <section>
+      <h2>Modal: Standard modal</h2>
+      <pfe-modal>
+        <button slot="pfe-modal--trigger">Open modal</button>
+        <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>
+    </section>
+    <section>
+      <h2>Modal: No header region</h2>
+      <pfe-modal>
+        <button slot="pfe-modal--trigger">Open modal</button>
+        <h3>This has no header region</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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-modal>
+    </section>
+    <section>
+      <h2>Modal: No headings</h2>
+      <pfe-modal>
+        <button slot="pfe-modal--trigger">Open modal</button>
+        <p>This modal doesn't have any headings. Lorem ipsum dolor sit amet, consectetur adipisicing 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-modal>
+    </section>
+    <section>
+      <h2>Modal: External trigger</h2>
+      <button id="custom-trigger">Custom open modal</button>
+      <pfe-modal id="custom-modal">
+        <h2 slot="pfe-modal--header">Custom open modal</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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-modal>
+    </section>
+    <section>
+      <h2>Modal: a lot of content</h2>
+      <pfe-modal>
+        <button slot="pfe-modal--trigger">Open modal</button>
+        <h2 slot="pfe-modal--header">Modal with a header with a super duper long title and a lot of content</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>
+        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Sed posuere consectetur est at lobortis. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.</p>
+        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+        <pfe-cta>
+          <a href="#bar">Learn more</a>
+        </pfe-cta>
+      </pfe-modal>
+    </section>
+    <script>
+      document.querySelector("#custom-trigger").addEventListener("click", function (event) {
+        document.querySelector("#custom-modal").open(event);
+      });
+    </script>
+  </body>
+</html>

elements/pfe-modal/demo/pfe-modal.story.js

@@ -0,0 +1,62 @@
+import { storiesOf } from "@storybook/polymer";
+import * as storybookBridge from "@storybook/addon-knobs/polymer";
+import * as tools from "../../../.storybook/utils.js";
+
+import PfeModal from "../pfe-modal";
+import PfeCta from "../../pfe-cta/pfe-cta";
+
+const stories = storiesOf("Modal", module	);
+
+const defaultHeader = tools.autoHeading();
+const defaultContent = tools.autoContent();
+
+// Define the template to be used
+const template = (data = {}) => {
+  return tools.component(PfeModal.tag, data.prop, data.slots);
+};
+
+stories.addDecorator(storybookBridge.withKnobs);
+
+
+stories.add(PfeModal.tag, () => {
+  let config = {};
+  const props = PfeModal.properties;
+
+  // Trigger the auto generation of the knobs for attributes
+  config.prop = tools.autoPropKnobs(props, storybookBridge);
+
+  const slots = PfeModal.slots;
+
+  slots.trigger.default = "Launch modal";
+  slots.header.default = defaultHeader;
+  slots.body.default = defaultContent;
+
+  // Trigger the auto generation of the knobs for slots
+  config.has = tools.autoContentKnobs(slots, storybookBridge);
+
+  // prettier-ignore
+  config.slots = [{
+    slot: "pfe-modal--trigger",
+    tag: "button",
+    content: config.has.trigger
+  }, {
+    slot: "pfe-modal--header",
+    content: tools.customTag({
+      tag: "h3",
+      content: config.has.header
+    })
+  }, {
+    content: config.has.body + tools.component(PfeCta.tag, {}, [{
+      content: tools.customTag({
+        tag: "a",
+        attributes: {
+          href: "#"
+        },
+        content: "Learn more"
+      })
+    }])
+  }];
+
+	const render = template(config);
+  return tools.preview(render);
+});

elements/pfe-modal/gulpfile.js

@@ -0,0 +1,4 @@
+const gulpFactory = require("../../scripts/gulpfile.factory.js");
+const pfelementPackage = require("./package.json");
+
+gulpFactory(pfelementPackage);