chore: Minor linting on demo pages for consistency (#1356)

castastrophe · castastrophe · web-flow · commit cd174e35718f · 2021-02-15T09:44:19.000-05:00
* Update packages

* Add viewport to all the demos and standardize the js calls

* Compile assets with build task

* Update babel config files and recompile assets

* Resolving this warning: babel plugin: Using "external-helpers" plugin with rollup-plugin-babel is deprecated, as it now automatically deduplicates your Babel helpers.

* Bring a few missing packages from a bad merge with master.

* : Standardize order of links in the header of the demo pages

* : Standardize title format; remove bablerc files

* : Remove babel

* : Update configuration and packages

* : Update configuration to resolve audit errors

* chore: Revert bable-related chagnes

* chore: Update markup after merge

* chore: Unformat demo page for markdown file

Co-authored-by: castastrophe &lt;casnroberts+github@gmail.com&gt;
diff --git a/.prettierignore b/.prettierignore
@@ -32,7 +32,7 @@ elements/*/dist/**/*
 elements/pfe-sass/demo/assets/*
 
 # This demo page has strict formatting needs that prettier can't handle
-elements/pfe-markdown/demo/*
+elements/pfe-markdown/demo/index.html
 
 # Compiled assets from storybook
 storybook/**/*
diff --git a/docs/layouts/_default/baseof.html b/docs/layouts/_default/baseof.html
@@ -5,7 +5,7 @@
   {{ .Hugo.Generator }}
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>{{ block "title" . }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
 
   {{ with .Description }}
diff --git a/docs/themes/kube/index.html b/docs/themes/kube/index.html
@@ -4,7 +4,7 @@
     <title>Basic Template</title>
 
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
     <!-- Kube CSS -->
     <link rel="stylesheet" href="dist/css/kube.min.css">
diff --git a/docs/themes/kube/layouts/_default/baseof.html b/docs/themes/kube/layouts/_default/baseof.html
@@ -5,7 +5,7 @@
   {{ .Hugo.Generator }}
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>{{ block "title" . }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
 
   {{ with .Description }}
diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html
@@ -2,9 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Accordion Demo</title>
+
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PFElements: pfe-accordion Demo</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
   <noscript>
     <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
diff --git a/elements/pfe-autocomplete/demo/index.html b/elements/pfe-autocomplete/demo/index.html
@@ -2,9 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Auto-complete Demo</title>
+
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PFElements: pfe-autocomplete Demo</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
diff --git a/elements/pfe-avatar/demo/index.html b/elements/pfe-avatar/demo/index.html
@@ -2,8 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Avatar Demo</title>
+
   <meta charset="utf-8">
-  <title>PFElements: pfe-avatar Demo</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
diff --git a/elements/pfe-badge/demo/index.html b/elements/pfe-badge/demo/index.html
@@ -2,27 +2,27 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Badge Demo</title>
+
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
-  <title>PatternFly Element | pfe-badge Demo</title>
+  <noscript>
+    <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
+  </noscript>
 
-  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
+  <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
 
   <!-- Stylesheets for testing light DOM styles.
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
-    -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
+  -->
 
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
 
-  <noscript>
-    <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
-  </noscript>
-
-  <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
   <!-- uncomment the es5-adapter if you're using the umd version -->
   <script src="/examples/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
diff --git a/elements/pfe-button/demo/index.html b/elements/pfe-button/demo/index.html
@@ -2,9 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Element | Button Demo</title>
+
   <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-button Demo</title>
 
   <noscript>
     <link href="../../pfelement/dist/pfelement-noscript.min.css" rel="stylesheet">
diff --git a/elements/pfe-card/demo/index.html b/elements/pfe-card/demo/index.html
@@ -2,9 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Card Demo</title>
+
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PFElements: pfe-card Demo</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
@@ -40,11 +41,7 @@
 
   </script>
 
-  <noscript>
-    <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
-  </noscript>
 
-  <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
   <link href="../dist/pfe-card--lightdom.css" rel="stylesheet">
 
   <link href="demo.css" rel="stylesheet">
diff --git a/elements/pfe-collapse/demo/index.html b/elements/pfe-collapse/demo/index.html
@@ -2,9 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Collapse Demo</title>
+
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>PatternFly Element | pfe-collapse Demo</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
   <noscript>
     <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html
@@ -2,11 +2,10 @@
 <html>
 
 <head>
-  <meta charset="utf-8">
-  <title>PatternFly Element | pfe-content-set Demo</title>
+  <title>PatternFly Elements: Content set Demo</title>
 
+  <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
-  <title>PatternFly Element | pfe-content-set Demo</title>
 
 
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
diff --git a/elements/pfe-cta/demo/index.html b/elements/pfe-cta/demo/index.html
@@ -2,9 +2,10 @@
 <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 Elements: pfe-cta demo</title>
+  <title>PatternFly Elements: Call-to-action demo</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
@@ -30,6 +31,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
+
   <script>
     require([
       "../dist/pfe-cta.umd.js",
@@ -39,6 +41,10 @@
     ]);
 
   </script>
+
+  <link href="../../pfe-cta/dist/pfe-cta--lightdom.css" rel="stylesheet" />
+  <link href="demo.css" rel="stylesheet" />
+
 </head>
 
 <body unresolved>
diff --git a/elements/pfe-datetime/demo/index.html b/elements/pfe-datetime/demo/index.html
@@ -2,9 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Datetime Demo</title>
+
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-  <title>PFElements: pfe-datetime Demo</title>
 
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
diff --git a/elements/pfe-dropdown/demo/index.html b/elements/pfe-dropdown/demo/index.html
@@ -2,8 +2,10 @@
 <html>
 
 <head>
-  <meta charset="utf-8" />
-  <title>PatternFly Element | pfe-dropdown Demo</title>
+  <title>PatternFly Elements: Dropdown Demo</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
diff --git a/elements/pfe-health-index/demo/index.html b/elements/pfe-health-index/demo/index.html
@@ -2,9 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Health-index Demo</title>
+
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-  <title>PFElements: pfe-health-index Demo</title>
 
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
diff --git a/elements/pfe-icon-panel/demo/index.html b/elements/pfe-icon-panel/demo/index.html
@@ -2,9 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Icon Panel Demo</title>
+
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-  <title>PFElements: pfe-icon-panel Demo</title>
 
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
diff --git a/elements/pfe-icon/demo/index.html b/elements/pfe-icon/demo/index.html
@@ -2,6 +2,8 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Icon Demo</title>
+
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
diff --git a/elements/pfe-markdown/demo/index.html b/elements/pfe-markdown/demo/index.html
@@ -2,9 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Element | Markdown Demo</title>
+
   <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-markdown Demo</title>
 
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
diff --git a/elements/pfe-modal/demo/index.html b/elements/pfe-modal/demo/index.html
@@ -2,9 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Modal Demo</title>
+
   <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>
 
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
@@ -45,6 +46,7 @@
       --pfe-modal--MaxWidth: 800px;
       --pfe-modal--MaxHeight: 800px;
     }
+
   </style>
 </head>
 
diff --git a/elements/pfe-navigation/demo/index.html b/elements/pfe-navigation/demo/index.html
@@ -3,6 +3,8 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Navigation Demo</title>
+
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
@@ -21,17 +23,18 @@
 
   <noscript>
     <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
+    <link href="../dist/pfe-navigation--noscript.css" rel="stylesheet">
   </noscript>
 
   <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
+
   <link href="../dist/pfe-navigation--lightdom.css" rel="stylesheet">
 
   <!-- uncomment the es5-adapter if you're using the umd version -->
   <script src="/examples/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="/examples/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script src="/examples/node_modules/requirejs/require.js"></script>
 
-
   <script>
     require([
       '../dist/pfe-navigation.umd.js',
@@ -41,13 +44,6 @@
     ])
 
   </script>
-  <!-- <link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" media="all" /> -->
-
-
-  <noscript>
-    <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
-    <link href="../dist/pfe-navigation--noscript.css" rel="stylesheet">
-  </noscript>
 
   <!-- <script type="module" src="../dist/pfe-navigation.js"></script> -->
   <!-- emulate custom logo overrides -->
diff --git a/elements/pfe-navigation/demo/pfe-navigation.story.js b/elements/pfe-navigation/demo/pfe-navigation.story.js
@@ -205,7 +205,7 @@ stories.add(PfeNavigation.tag, () => {
   ];
 
   const render =
-    `<link rel="stylesheet" type="text/css" href="/pfe-navigation/pfe-navigation--lightdom.css"></link>` +
+    `<link rel="stylesheet" type="text/css" href="/pfe-navigation/dist/pfe-navigation--lightdom.css"></link>` +
     template(config);
   return tools.preview(render);
 });
diff --git a/elements/pfe-number/demo/index.html b/elements/pfe-number/demo/index.html
@@ -2,8 +2,10 @@
 <html>
 
 <head>
+  <title>PatternFly Elements: Number Demo</title>
+
   <meta charset="utf-8">
-  <title>PFElements: pfe-number Demo</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
   <link rel="stylesheet" type="text/css" href="../../pfe-styles/dist/red-hat-font.min.css">
 
diff --git a/elements/pfe-page-status/demo/index.html b/elements/pfe-page-status/demo/index.html
diff --git a/elements/pfe-progress-indicator/demo/index.html b/elements/pfe-progress-indicator/demo/index.html
diff --git a/elements/pfe-select/demo/index.html b/elements/pfe-select/demo/index.html
diff --git a/elements/pfe-styles/demo/index.html b/elements/pfe-styles/demo/index.html
diff --git a/elements/pfe-tabs/demo/index.html b/elements/pfe-tabs/demo/index.html
diff --git a/elements/pfe-toast/demo/index.html b/elements/pfe-toast/demo/index.html
diff --git a/elements/pfelement/demo/index.html b/elements/pfelement/demo/index.html
