@caweb/webpack 1.2.28 → 1.3.1

package/plugins/jshint/sample/jshint.css

@@ -0,0 +1,247 @@
+
+/*
+ * JSHint
+ */
+body {
+	--body-margin: 2rem;
+
+	/* Body colours */
+	--body-bg: #fff;
+	--body-fg: #111;
+
+	/* Nav & link colours */
+	--nav-bg: #eee;
+	--nav-bg-hover: #bbb;
+	--nav-fg: #11c;
+
+	/* Heading colours */
+	--h-fg: #222;
+	--h-bg: #eee;
+
+	/* Border style for bordered components */
+	--component-border: 1px solid #aaa;
+
+	/* Consistent component margins */
+	--component-margin-sm: 1.5rem;
+	--component-margin-lg: 3rem;
+
+  /* Colour chips */
+	--count-bg: #eee;
+	--count-border: var(--component-border);
+}
+/*
+ * Dark mode
+ */
+body.is-dark-mode {
+	/* Body colours */
+	--body-bg: #111;
+	--body-fg: #fff;
+
+	/* Nav & link colours */
+	--nav-bg: #444;
+	--nav-bg-hover: #222;
+	--nav-fg: #bcf;
+
+	/* Heading colours */
+	--h-fg: #eee;
+	--h-bg: #222;
+  
+	/* Border style for bordered components */
+	--component-border: 1px solid #666;
+
+	/* Consistent component margins */
+	--component-margin-sm: 1.5rem;
+	--component-margin-lg: 3rem;
+
+
+	/* Colour chips */
+	--count-bg: #111;
+	--count-border: var(--component-border);
+}
+/*
+ * General
+ */
+* {
+	box-sizing: border-box;
+}
+
+html {
+	scroll-behavior: smooth;
+
+	@media (prefers-reduced-motion: reduce) {
+		scroll-behavior: auto;
+	}
+}
+
+body {
+	background-color: var(--body-bg);
+	color: var(--body-fg);
+	font-family: sans-serif;
+	margin: var(--body-margin);
+}
+
+a {
+	color: var(--nav-fg);
+}
+p{
+  margin: 0 0 .5em 0
+}
+h1, h2 {
+	font-weight: normal;
+}
+
+h1, h2, h3 {
+	color: var(--h-fg);
+	margin: 0 0 var(--component-margin-sm) 0;
+}
+/*
+ * Layout
+ */
+#main{
+  display: flex;
+}
+aside {
+  margin-right: calc(1.5* var(--body-margin));
+  padding-right: calc(1* var(--body-margin));
+  border-right: var(--component-border);
+}
+#information{
+  flex-grow: 1
+}
+/*
+ * Hints
+ */
+.hint {
+	margin-bottom: var(--component-margin-lg);
+}
+.hint__header {
+	align-items: baseline;
+	background-color: var(--h-bg);
+	display: flex;
+	justify-content: space-between;
+	margin-right: calc(-1 * var(--body-margin));
+	margin-left: calc(-1 * var(--body-margin));
+	margin-bottom: var(--component-margin-sm);
+	padding: var(--component-margin-sm) var(--body-margin) 0;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
+/*
+ * Lists
+ */
+ul,
+ol {
+	padding: 0 0 0 2em;
+}
+li {
+	margin: 0 0 2em 0;
+}
+li li {
+  margin: 0;
+}
+/*
+ * Header, nav, 'back to top' button
+ */
+.site__header {
+	align-items: baseline;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+  .nav {
+	margin-bottom: var(--component-margin-sm);
+}
+
+.nav ul {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	list-style: none;
+	padding: 0;
+}
+
+.nav li {
+	margin-bottom: var(--component-margin-sm);
+	margin: 0 0.5em 0 0;
+}
+
+.nav a {
+	display: block;
+	height: 100%;
+}
+
+.nav a,
+.btn {
+	background-color: var(--nav-bg);
+	padding: 0.5em;
+	text-decoration: none;
+	transition: background-color 0.2s ease;
+}
+
+.nav a:hover,
+.nav a:focus,
+.btn:hover,
+.btn:focus {
+	background-color: var(--nav-bg-hover);
+}
+
+.nav a:focus,
+.btn:focus {
+	outline: 4px dashed var(--nav-fg);
+}
+
+.btn {
+	font-size: 1.2em;
+	margin-bottom: var(--component-margin-sm);
+	text-align: center;
+}
+/*
+ * Count component on colour chips
+ */
+.count {
+	background-color: var(--count-bg);
+	border: var(--count-border);
+	border-radius: 50%;
+	box-sizing: border-box;
+	color: var(--count-fg);
+	display: inline-block;
+	height: auto;
+	min-width: 2.3em;
+	padding: 0.5em;
+	text-align: center;
+
+	/* Counteract .chip:hover */
+	font-weight: normal;
+	text-shadow: none;
+}
+/*
+ * Darkmode switch
+ */
+.button__theme-toggle {
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	margin-bottom: 0;
+}
+
+.button__theme-toggle::before {
+	content: "🌛";
+	font-size: 1.5rem;
+}
+
+body.is-dark-mode .button__theme-toggle::before {
+	content: "🌞";
+}
+
+/*
+ * Link Icon
+ */
+.link{
+  text-decoration: none;
+  cursor: pointer;
+}
+.link::before{
+  content: "🔗";
+}

package/plugins/jshint/sample/jshint.html

@@ -0,0 +1,7 @@
+<html>
+    <head>
+        <title>{{ title }}</title>
+    </head>
+    <body>
+    </body>
+</html>

package/plugins/jshint/sample/jshint.js

@@ -0,0 +1,25 @@
+
+  
+const jsHint = {};
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	const button = document.querySelector( '.button__theme-toggle' );
+
+	jsHint.toggleDarkMode = function() {
+		const isDarkMode = document.body.classList.contains( 'is-dark-mode' );
+		if ( isDarkMode ) {
+			button.setAttribute( 'aria-pressed', 'false' );
+			document.body.classList.remove( 'is-dark-mode' );
+		} else {
+			button.setAttribute( 'aria-pressed', 'true' );
+			document.body.classList.add( 'is-dark-mode' );
+		}
+	}
+
+	// Set is-dark-mode class if user has requested dark mode.
+	if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ){
+		document.body.classList.add( 'is-dark-mode' );
+		button.setAttribute( 'aria-pressed', 'true' );
+	}
+
+});

package/plugins/jshint/sample/no-files.html

@@ -0,0 +1,9 @@
+<html>
+    <head>
+        <title>JSHint - No Files</title>
+    </head>
+    <body>
+        <strong>No file(s) or directory path(s) were given or default directory was not found.'</strong>
+        <strong>Hinter did not execute.</strong>
+    </body>
+</html>

package/sample/index.html

@@ -0,0 +1,364 @@
+<div class="header-primary-banner hidden-print">
+    <div class="container">
+      <div class="row my-4">
+        <div class="col my-auto">
+          <h1 class="color-white font-weight-600">State Web Template V6</h1>
+          <div class="color-white lead m-b-lg line-height-1-6em" style="max-width:22em;">
+            Use the latest version of the template to develop your websites and
+            applications
+          </div>
+          <div class="btn-row p-b">
+            <a href="/download-and-setup.html" class="btn btn-primary">Download and setup</a>
+          </div>
+        </div>
+        <div class="col my-auto">
+          <img class="py-3" width="100%" src="https://template.webstandards.ca.gov/images/header-bear.svg" alt="" style="aspect-ratio: 1146 / 827">
+        </div>
+      </div>
+    </div>
+  </div>
+   <!--Icon Image Blocks-->
+  <div style="background:#EDEDEF;">
+    <div class="container p-t-lg">
+      <div class="row">
+        <div class="third m-b-lg round-card">
+          <!-- Icon Blocks -->
+          <a href="/components.html" class="no-underline d-block p-a-md color-gray-dark" title="Browse components">
+            <div class="text-center">
+              <img class="image-icon rounded-50x m-b" height="155px" src="https://template.webstandards.ca.gov/images/browse-components.svg" alt="" style="width:138px;">
+              <strong class="h5 m-b-sm m-t-0 d-block">Browse components</strong>
+            </div>
+          </a>
+          <!-- End Icon Blocks -->
+        </div>
+        <div class="third m-b-lg round-card">
+          <!-- Icon Blocks -->
+          <a href="/visual-design/icons.html#Search-icons" class="no-underline d-block p-a-md color-gray-dark" title="Search icons">
+            <div class="text-center">
+              <img class="image-icon rounded-50x m-b" height="155px" src="https://template.webstandards.ca.gov/images/search-icons.svg" alt="" style="width:138px;">
+              <strong class="h5 m-b-sm m-t-0 d-block">Search icons</strong>
+            </div>
+          </a>
+          <!-- End Icon Blocks -->
+        </div>
+        <div class="third m-b-lg round-card">
+          <!-- Icon Blocks -->
+          <a href="/visual-design/color.html#ColorThemes" class="no-underline d-block p-a-md color-gray-dark" title="Color themes">
+            <div class="text-center">
+              <img class="image-icon rounded-50x m-b" height="155px" src="https://template.webstandards.ca.gov/images/explore-color-themes.svg" alt="" style="width:138px;">
+              <strong class="h5 m-b-sm m-t-0 d-block">
+                Explore color themes
+              </strong>
+            </div>
+          </a>
+          <!-- End Icon Blocks -->
+        </div>
+      </div>
+      <!-- End group -->
+    </div>
+  </div>
+   <div class="container">
+    <h2 class="p-t-1 p-b-3">What's new in V6</h2>
+    <div class="row">
+      <div class="col-md-4 m-b-md p-3 outline-1-gray-200-hover">
+        <div class="h-100 bg-gray-100 bg-gray-50-hover pos-rel">
+          <div class="bg-primary-secondary-gradient p-a d-flex justify-content-center align-items-center">
+            <img class="p-4" height="155px" src="https://template.webstandards.ca.gov/images/pattern-icon.svg" style="aspect-ratio: 1" alt="">
+          </div>
+  
+          <div class="p-a-md">
+            <h3 class="h4 m-t-0 m-b-sm">
+              <a class="color-gray-dark text-decoration-none link-before" href="/patterns.html" aria-label="Content patterns">
+                Patterns
+              </a>
+            </h3>
+            <p>
+              Content patterns are now available! This design solution will help your visitors complete their tasks.
+            </p>
+          </div>
+        </div>
+      </div>
+  
+      <div class="col-md-4 m-b-md p-3 outline-1-gray-200-hover">
+        <div class="h-100 bg-gray-100 bg-gray-50-hover pos-rel">
+          <div class="bg-primary-secondary-gradient p-a d-flex justify-content-center align-items-center">
+            <img class="p-4" height="155px" src="https://template.webstandards.ca.gov/images/nav-icon.svg" style="aspect-ratio: 1" alt="">
+          </div>
+  
+          <div class="p-a-md">
+            <h3 class="h4 m-t-0 m-b-sm">
+              <a class="color-gray-dark text-decoration-none link-before" href="/structure/site-navigation.html" aria-label="Enhanced navigation">
+                Enhanced navigation
+              </a>
+            </h3>
+            <p>
+              Better wayfinding and new side navigation makes developing user-friendly websites easier than ever.
+            </p>
+          </div>
+        </div>
+      </div>
+  
+      <div class="col-md-4 m-b-md p-3 outline-1-gray-200-hover">
+        <div class="h-100 bg-gray-100  bg-gray-50-hover pos-rel">
+          <div class="bg-primary-secondary-gradient p-a d-flex justify-content-center align-items-center">
+            <img class="p-4" height="155px" src="https://template.webstandards.ca.gov/images/refreshed-icon.svg" style="aspect-ratio: 1" alt="">
+          </div>
+          <div class="p-a-md">
+            <h3 class="h4 m-t-0 m-b-sm">
+              <a class="color-gray-dark text-decoration-none link-before" href="/visual-design/typography.html" aria-label="Refreshed visual design">
+                Refreshed visual design
+              </a>
+            </h3>
+            <p>
+              We’ve enhanced our typography with the Public Sans font family. Strengthen your department’s brand and content with this strong, neutral typeface.
+            </p>
+            <p>Visit <a href="/whats-new.html">What’s new</a> for more detail on V6 template and website updates.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p class="link-action m-b-md">
+      <span class="d-flex flex-center lh-1">
+        <svg class="m-r-sm height-20" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 23">
+          <path d="m19 22.1-1.1-1 8.8-8.8H0v-1.6h26.7L17.9 2 19 1l10.6 10.6L19 22.1Z" fill="#046B99"></path>
+        </svg>
+        <span>
+          Visit
+          <a href="/whats-new.html">What’s new</a>
+          for more detail on V6 template and website updates.
+        </span>
+      </span>
+    </p>
+  </div>
+   <!-- Static Process Bold -->
+  
+  <div style="background:linear-gradient(0deg, rgba(73, 147, 181, 0.2) 4.53%, rgba(73, 147, 181, 0) 100%);overflow:hidden;min-height:632px;">
+    <div class="container mb-2">
+      <div style="margin-bottom:6rem;max-width:876px;">
+        <h2>The State Template is one step closer to the Design System</h2>
+        <p>
+          The final release (V6) of the State Web Template is part of a planned move to the Design System. V6 of the State Template moves us one step closer to a new statewide digital standard. This timeline describes our planned activities and release dates.
+        </p>
+      </div>
+    </div>
+    <div class="container">
+      <div class="row timeline-lines">
+        <div class="col-sm-3" style="margin-top:-1rem;">
+          <!-- Static Process -->
+          <div class="dot-line brd-transparent-before brd-primary-light-after">
+            <span class="dot-line-inner bg-white bg-primary-before brd-gray-light"></span>
+          </div>
+          <div class="dot-text">
+            <h3 class="h5 mb-0" style="font-size:23px;color:#035376;">2021</h3>
+            <p class="mb-4">
+              Release the beta version of the new statewide Design System
+            </p>
+          </div>
+          <!-- End Static Process -->
+        </div>
+  
+        <div class="col-sm-3" style="margin-top:-1rem;">
+          <!-- Static Process -->
+          <div class="dot-line brd-primary-light-before brd-primary-light-after">
+            <span class="dot-line-inner bg-white bg-primary-before brd-gray-light"></span>
+          </div>
+          <div class="dot-text">
+            <h3 class="h5 mb-0" style="font-size:23px;color:#035376;">2022</h3>
+            <p class="mb-4">
+              Update and modernize the State Web Template V6
+            </p>
+          </div>
+          <!-- End Static Process -->
+        </div>
+  
+        <div class="col-sm-3" style="margin-top:-1rem;">
+          <!-- Static Process -->
+          <div class="dot-line brd-primary-light-before brd-gray-light-after">
+            <span class="dot-line-inner bg-white bg-primary-before brd-gray-light"></span>
+          </div>
+          <div class="dot-text">
+            <h3 class="h5 mb-0" style="font-size:23px;color:#035376;">2023</h3>
+            <p class="mb-4">
+              Release the first production version of the State Web Template V6
+            </p>
+          </div>
+          <!-- End Static Process -->
+        </div>
+  
+        <div class="col-sm-3" style="margin-top:-1rem;">
+          <!-- Static Process -->
+          <div class="dot-line brd-gray-light-before brd-transparent-after">
+            <span class="dot-line-inner bg-grey-light brd-gray-light"></span>
+          </div>
+          <div class="dot-text">
+            <h3 class="h5 mb-0" style="font-size:23px;color:#035376;">2024+</h3>
+            <p class="mb-4">
+              Release Eureka, the next version of  the Design System and support a transition to it
+            </p>
+          </div>
+          <!-- End Static Process -->
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- End Static Process -->
+  
+  <style></style>
+   <div class="container">
+    <h2 class="p-t-1 p-b-3">Who's using V6</h2>
+    <div class="row">
+      <div class="col-md-6 m-b-md p-r-lg-desktop">
+        <div class="pos-rel m-b-0 overflow-hidden bg-white text-center  brd-solid-1 brd-gray-200">
+          <picture>
+            <source media="(max-width: 575px)" srcset="https://template.webstandards.ca.gov/images/homepage-sample-cdt-low.jpg">
+            <img class="img-fluid w-100" src="https://template.webstandards.ca.gov/images/homepage-sample-cdt.jpg" style="aspect-ratio: 450 / 310" alt="Homepage screenshot of California Department of Technology website.">
+          </picture>
+        </div>
+  
+        <div class="pt-3 m-b-lg" style="min-height: 236px;">
+          <h3 class="h4 m-t-0 m-b-sm">California Department of Technology website redesign</h3>
+          <p>
+            The template components, patterns, and structure made it easier to develop and design. With more free time, the team could focus on content, UX design, and branding. They help departments deliver public services through strategy, innovation, and delivery
+          </p>
+  
+          <span class="d-flex flex-center lh-1">
+            <svg class="m-r-sm height-20" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 23">
+              <path d="m19 22.1-1.1-1 8.8-8.8H0v-1.6h26.7L17.9 2 19 1l10.6 10.6L19 22.1Z" fill="#046B99"></path>
+            </svg>
+            <a class="font-weight-bold" href="https://www.cdt.ca.gov/">cdt.ca.gov</a>
+          </span>
+        </div>
+      </div>
+  
+      <div class="col-md-6 m-b-md p-l-lg-desktop">
+        <div class="pos-rel m-b-0 overflow-hidden bg-white text-center brd-solid-1 brd-gray-200">
+          <picture>
+            <source media="(max-width: 575px)" srcset="https://template.webstandards.ca.gov/images/homepage-sample-build-low.jpg">
+            <img class="img-fluid w-100" src="https://template.webstandards.ca.gov/images/homepage-sample-build.jpg" style="aspect-ratio: 450 / 310" alt="Homepage screenshot of build.ca.gov website.">
+          </picture>
+        </div>
+  
+        <div class="pt-3 m-b-lg" style="min-height: 236px;">
+          <h3 class="h4 m-t-0 m-b-sm">Build.ca.gov</h3>
+          <p>
+            The template and UI kit helped the design team fast track designs and prototypes . The template provided a good foundation to share updates on infrastructure projects in California. 
+          </p>
+          <span class="d-flex flex-center lh-1">
+            <svg class="m-r-sm height-20" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 23">
+              <path d="m19 22.1-1.1-1 8.8-8.8H0v-1.6h26.7L17.9 2 19 1l10.6 10.6L19 22.1Z" fill="#046B99"></path>
+            </svg>
+            <a class="font-weight-bold" href="https://www.build.ca.gov/">
+              build.ca.gov
+            </a>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+   <div class="bg-primary-gradient p-b-md">
+    <div class="partner-with-us container">
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="pb-3">
+            <h2 class="mt-5 mb-2 text-white">Partner with us</h2>
+            <p class="text-white pb-3">
+              Improvements to the State Web Template and the Design System are
+              largely driven by your feedback.&nbsp; We’d love to hear from you!
+            </p>
+          </div>
+        </div>
+        <div class="col-sm-6 p-l-lg">
+          <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 395 153">
+            <mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="395" height="153">
+              <path fill="#D9D9D9" d="M0 0H395V153H0z"></path>
+            </mask>
+            <g mask="url(#a)" stroke-miterlimit="10" stroke-linejoin="round">
+              <path d="M371 7.7 118.8-92 236.3 17.6 371 7.7Z" stroke="#3689AD" stroke-width="2"></path>
+              <path d="M118.8-92.1 236.3 17.6 0 86.8l118.8-179Z" stroke="#3689AD" stroke-width="2"></path>
+              <path d="m371 7.7-134.7 10V151L371 7.7Z" fill="url(#b)" fill-opacity=".4" stroke="#3689AD" stroke-width="2"></path>
+              <path d="M236.3 151.1V17.6L0 86.8l236.3 64.3Z" stroke="#3689AD" stroke-width="2"></path>
+              <path d="m391 56.2-53.3 2.6L289 76.2l57.7-3 44.3-17Z" fill="url(#c)" stroke="#FECD61"></path>
+              <path d="m346.7 73.2 44.3-17-27.4 64.8-16.9-47.8Z" fill="url(#d)" stroke="#FECD61"></path>
+              <path d="m363.6 121-16.9-47.8-57.7 3 74.6 44.7Z" fill="url(#e)" stroke="#FECD61"></path>
+            </g>
+            <defs>
+              <linearGradient id="b" x1="236" y1="151.3" x2="324.6" y2="-17" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#fff" stop-opacity=".1"></stop>
+                <stop offset="1" stop-color="#fff"></stop>
+              </linearGradient>
+              <linearGradient id="c" x1="329.7" y1="70" x2="444.2" y2="24.7" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#FDB81E"></stop>
+                <stop offset="1" stop-color="#fff"></stop>
+              </linearGradient>
+              <linearGradient id="d" x1="312" y1="142.3" x2="374.4" y2="32.2" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#323A45"></stop>
+                <stop offset=".5" stop-color="#FDB81E"></stop>
+                <stop offset="1" stop-color="#FFFEFD"></stop>
+                <stop offset="1" stop-color="#fff"></stop>
+                <stop offset="1" stop-color="#fff"></stop>
+              </linearGradient>
+              <linearGradient id="e" x1="326.3" y1="73.2" x2="333.7" y2="226.8" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#FDB81E"></stop>
+                <stop offset="1" stop-color="#323A45"></stop>
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-4 m-b-md">
+          <div class="d-flex">
+            <div class="m-b-0">
+              <img class="p-1" height="120px" src="https://template.webstandards.ca.gov/images/idea-icon.svg" style="aspect-ratio: 1" alt="">
+            </div>
+            <div class="p-a align-self-center">
+              <p class="text-white">
+                Have an idea or an issue?
+                <br>
+                <a class="partner-link text-white" href="https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/issues">
+                  Reach out in GitHub
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+  
+        <div class="col-lg-4 m-b-md">
+          <div class="d-flex">
+            <div class="m-b-0">
+              <img class="p-1" height="120px" src="https://template.webstandards.ca.gov/images/feedback-icon.svg" style="aspect-ratio: 1" alt="">
+            </div>
+  
+            <div class="p-a align-self-center">
+              <p class="text-white">
+                Want to give website feedback?
+                <br>
+                <a class="partner-link text-white" href="https://airtable.com/shro9V6ry2Cf4mpgG">
+                  Fill out this form
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+  
+        <div class="col-lg-4 m-b-md">
+          <div class="d-flex">
+            <div class="m-b-0">
+              <img class="p-1" height="120px" style="aspect-ratio: 1" src="https://template.webstandards.ca.gov/images/support-icon.svg" alt="">
+            </div>
+  
+            <div class="p-a align-self-center">
+              <p class="text-white">
+                Need template support?
+                <br>
+                <a class="partner-link text-white" href="/contact-us.html">
+                  Email the team
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+