qpp-style 2.1.13 → 2.2.0-sm.0

package/storybook-static/runtime~main.b165398bf7ef3e30d431.manager.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>chunkId+"."+{51:"fc4b02f2a75c894ae64e",229:"630347465201d1822126",295:"aa3c5122636a27ad7c7b",551:"45aead073703cc6fb12b",807:"1a7f4dcf15e4696572ca",897:"9b5fee8cc7074607c812",935:"532759f0652585685af7"}[chunkId]+".manager.bundle.js",__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.hmd=module=>((module=Object.create(module)).children||(module.children=[]),Object.defineProperty(module,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+module.id)}}),module),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="qpp-style:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","qpp-style:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunkqpp_style=self.webpackChunkqpp_style||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();

package/styles/_global.scss

@@ -1,84 +1,106 @@
-a[href^=http] span {
-	margin-left: 0;
+/*
+* Only suppress the focus ring once what-input has successfully started
+* https://github.com/ten1seven/what-input
+*/
+
+[data-whatintent='mouse'] *:focus {
+  outline: none;
+}
+
+[data-whatintent='keyboard'] *:focus {
+  box-shadow: 0 0 0 3px orange !important;
+  outline: none;
+}
+
+a[href^='http'] span {
+  margin-left: 0;
 }
 
 #panel {
-	section:first-of-type {
-		margin-top: 2rem;
-	}
+  section:first-of-type {
+    margin-top: 2rem;
+  }
 }
 
 svg.icon {
-	width: $font-size-base;
-	height: $font-size-base;
+  height: $font-size-base;
+  width: $font-size-base;
 }
 
 .glyphicon {
-	position: relative;
-	top: 1px;
-	display: inline-block;
+  display: inline-block;
+  position: relative;
+  top: 1px;
 }
 
 .glyphicon-chevron-up::before {
-	content: "\f077";
-	font-family: 'FontAwesome';
-	color: $color-white;
+  content: '\f077';
+  font-family: 'FontAwesome';
 }
 
-.glyphicon-chevron-down::before {
-	content: url('/images/chevron-down-black.png');
-	margin-left: 8px;
+.back-to-top .glyphicon-chevron-up {
+  color: $color-teal;
+}
+
+.back-to-top:hover .glyphicon-chevron-up {
+  color: $color-white;
 }
 
 .link-large {
-	font-size: 24px;
-	line-height: 1;
-	text-decoration: none;
-	color: #006693;
+  color: #006693;
+  font-size: 24px;
+  line-height: 1;
+  text-decoration: none;
 }
 
 .boxes {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-	@include breakpoint(md) {
-		flex-direction: row;
-	}
-	.box {
-		margin: 0 1.5rem 1.5rem 0;
-		padding: 1.5rem;
-		border: 1px solid $color-gray-light;
-		&:last-of-type {
-			margin-right: 0;
-		}
-		@include breakpoint(md) {
-			margin-bottom: 0;
-		}
-	}
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  @include breakpoint(md) {
+    flex-direction: row;
+  }
+
+  .box {
+    border: 1px solid $color-gray-light;
+    margin: 0 1.5rem 1.5rem 0;
+    padding: 1.5rem;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+    @include breakpoint(md) {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .skip {
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 9999;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	clip-path: inset(50%);
-	border: 0;
-
-	&:active,
-	&:focus {
-	  width: auto;
-	  height: auto;
-	  overflow: visible;
-	  clip: auto;
-	  white-space: normal;
-	  clip-path: none;
-	}
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  left: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  white-space: nowrap;
+  width: 1px;
+  z-index: 9999;
+  background-color: white;
+
+  &:active,
+  &:focus {
+    clip: auto;
+    clip-path: none;
+    height: auto;
+    overflow: visible;
+    white-space: normal;
+    width: auto;
+  }
 }
 
+.hide {
+  display: none;
+}

package/styles/_main.scss

@@ -1,7 +1,15 @@
 @charset "utf-8";
 
-@import "paths";
+// TODO: Remove @cmsgov/design-system dependancies from shared package
+$font-path: '~@cmsgov/design-system/dist/fonts';
+$image-path: '~@cmsgov/design-system/dist/images';
 
-@import "qpp-style";
+@import '@cmsgov/design-system/dist/scss/index';
 
-@import "guide/_layout";
+@import 'paths';
+
+@import 'third-party/legacy-bootstrap';
+
+@import 'qpp-style';
+
+@import 'qppds';

package/styles/_paths.scss

@@ -1 +1 @@
-$font-path: '../fonts/';
+$font-path: '../fonts/';

package/styles/_qpp-style.scss

@@ -19,10 +19,13 @@
 @import 'components/tables';
 @import 'components/text';
 @import 'components/toggles';
-@import 'components/tool-tips';
+@import 'components/tooltip';
 @import 'components/modals';
 @import 'components/breadcrumbs';
-@import 'components/sidebar';
 @import 'components/info-modal';
-@import 'components/header';
-@import 'components/footer';
+@import 'components/tabs';
+@import 'components/error-page';
+@import 'components/notification-banner';
+@import 'components/flash-notification';
+@import 'components/autocomplete';
+@import 'components/spinner';

package/styles/components/_accordion.scss

@@ -1,172 +1,296 @@
 .stats {
-	display: flex !important;
-	flex-wrap: wrap;
-	flex-direction: column;
-	@include breakpoint(sm) {
-		flex-direction: row;
-	}
+  display: flex !important;
+  flex-direction: column;
+  flex-wrap: wrap;
+  @include breakpoint(sm) {
+    flex-direction: row;
+  }
 }
 
 .stat {
-	ul {
-		padding-left: 20px;
-	}
+  ul {
+    padding-left: 20px;
+  }
 }
 
-.measures-search {
-	.dropdown {
-		display: block;
-		margin-bottom: 10px;
-		@include breakpoint(sm) {
-			display: inline-block;
-			margin-right: 10px;
-		}
-	}
-
-	button.btn-default.dropdown-toggle {
-		width: 100%;
-		@include breakpoint(sm) {
-			width: auto;
-		}
-		.glyphicon-chevron-down {
-			position: absolute;
-			right: 10px;
-			@include breakpoint(sm) {
-				position: inherit;
-				right: auto;
-			}
-		}
-	}
-}
+.panel-title a {
+  padding: 8px 15px 8px 30px;
+  position: relative;
 
-.measures-search {
-	.dropdown.open {
-		border-bottom-right-radius: 0;
-		border-bottom-left-radius: 0;
-		.dropdown-menu {
-			position: relative;
-			width: 100%;
-			box-shadow: none;
-			margin: 0 0 10px;
-			border: 1px solid $form-border-color;
-			padding-bottom: 15px;
-			min-width: 100%;
-			border-radius: 0;
-			@include breakpoint(sm) {
-				width: auto;
-				position: absolute;
-			}
-
-			li {
-				margin-top: 0;
-				a {
-					text-decoration: none;
-					cursor: pointer;
-					input[type=checkbox],
-					input[type=radio] {
-						margin: 4px 10px 0 -10px;
-						line-height: normal;
-						float: left;
-					}
-				}
-				label {
-					color: #333;
-					font-weight: 400;
-					input[type=checkbox] {
-						margin: 4px 10px 0;
-						line-height: normal;
-						float: left;
-					}
-				}
-				@include breakpoint(sm) {
-					margin: 10px 0 0;
-					min-width: 215px;
-
-					a {
-						display: block;
-						padding: 3px 20px 3px 30px;
-						clear: both;
-						font-weight: 400;
-						line-height: 1.42857143;
-						color: #333;
-						margin-top: 0;
-
-						input[type=checkbox] {
-							margin: 5px 4px 4px -20px;
-							line-height: normal;
-							float: left;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.dropdown-menu.all-filtered {
-		width: auto;
-		position: absolute;
-		top: 60px;
-		margin-left: -85px;
-	}
-
-	.dropdown {
-		margin-bottom: 0.5em;
-	}
+  &:link,
+  &:visited {
+    color: $color-teal;
+    text-decoration: underline;
+  }
+
+  &:hover,
+  &:focus {
+    color: $color-teal;
+    text-decoration: none;
+  }
 }
 
-.panel-collapse.collapse {
-	border-top: 0;
+.panel-title a::before {
+  color: $color-teal;
+  content: '\f078';
+  display: inline-block;
+  font-family: 'FontAwesome';
+  font-size: 20px;
+  left: 0;
+  margin-top: -14px;
+  position: absolute;
+  text-decoration: underline;
+  top: 50%;
+  transition: all 0.1s linear;
 }
 
-.panel-collapse.collapse.in {
-	border-bottom: 0;
+// IE doesn't allow you to set text-decoration:none unless it was already set
+
+.panel-title a::before {
+  text-decoration: none;
 }
 
-.panel-title a {
-	padding: 8px 15px 8px 30px;
-	position: relative;
-	&:link,
-	&:visited {
-		color: $color-teal;
-		text-decoration: underline;
-	}
-
-	&:hover,
-	&:focus {
-		color: $color-teal;
-		text-decoration: none;
-	}
+.panel-title a.collapsed::before {
+  transform: rotate(-90deg);
 }
 
-.panel-title a::before {
-	content: "\f078";
-	font-family: 'FontAwesome';
-	color: $color-teal;
-	text-decoration: underline;
-	display: inline-block;
-	font-size: 20px;
-	position: absolute;
-	top: 50%;
-	left: 0;
-	margin-top: -14px;
-	transition: all 0.1s linear;
+.measures-search {
+  .dropdown {
+    display: block;
+    margin-bottom: 0.5em;
+    @include breakpoint(sm) {
+      display: inline-block;
+      margin-right: 10px;
+    }
+  }
+
+  button.btn-default.dropdown-toggle {
+    width: 100%;
+    @include breakpoint(sm) {
+      width: auto;
+    }
+
+    .glyphicon-chevron-down {
+      position: absolute;
+      right: 10px;
+      @include breakpoint(sm) {
+        position: inherit;
+        right: auto;
+      }
+    }
+  }
+
+  .dropdown.open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    .dropdown-menu {
+      border: 1px solid $form-border-color;
+      border-radius: 0;
+      box-shadow: none;
+      margin: 0 0 10px;
+      min-width: 100%;
+      padding-bottom: 15px;
+      position: relative;
+      width: 100%;
+      @include breakpoint(sm) {
+        position: absolute;
+        width: auto;
+      }
+
+      li {
+        margin-top: 0;
+
+        a {
+          cursor: pointer;
+          text-decoration: none;
+
+          input[type='checkbox'],
+          input[type='radio'] {
+            float: left;
+            line-height: normal;
+            margin: 4px 10px 0 -10px;
+          }
+        }
+
+        label {
+          color: #333;
+          font-weight: 400;
+
+          input[type='checkbox'] {
+            float: left;
+            line-height: normal;
+            margin: 4px 10px 0;
+          }
+        }
+        @include breakpoint(sm) {
+          margin: 10px 0 0;
+          min-width: 215px;
+
+          a {
+            clear: both;
+            color: #333;
+            display: block;
+            font-weight: 400;
+            line-height: 1.42857143;
+            margin-top: 0;
+            padding: 3px 20px 3px 30px;
+
+            input[type='checkbox'] {
+              float: left;
+              line-height: normal;
+              margin: 5px 4px 4px -20px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .dropdown-menu.all-filtered {
+    margin-left: -85px;
+    position: absolute;
+    top: 60px;
+    width: auto;
+  }
 }
 
-// IE doesn't allow you to set text-decoration:none unless it was already set
-.panel-title a::before {
-	text-decoration: none;
+.panel-collapse.collapse {
+  border-top: 0;
 }
 
-.panel-title a.collapsed::before {
-	transform: rotate(-90deg);
+.panel-collapse.collapse.in {
+  border-bottom: 0;
 }
 
 .filters {
-	hr {
-		margin-top: 0;
-	}
-	.btn {
-		margin-right: 10px;
-		margin-bottom: 1rem;
-	}
+  hr {
+    margin-top: 0;
+  }
+
+  .btn {
+    margin-bottom: 1rem;
+    margin-right: 10px;
+  }
+}
+
+// Accordion Component
+.accordion-section {
+  border: 2px solid $color-gray-very-light;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  margin: 15px 0;
+
+  .accordion {
+    align-items: center;
+    background-color: $color-white;
+    color: $color-gray-darker;
+    cursor: pointer;
+    display: flex;
+    border: none;
+    outline: none;
+    padding: 20px 30px;
+    transition: background-color 0.6s ease;
+
+    &.sticky {
+      position: sticky;
+      top: 0px;
+      z-index: 1;
+      box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.2);
+    }
+
+    &:focus {
+      border: 1px solid $color-gray-medium;
+    }
+
+    .accordion-left-title {
+      color: $color-gray-darker;
+      flex-grow: 1;
+      font-size: 1.125rem;
+      font-weight: 500;
+      max-width: 100%;
+      text-align: left;
+      width: 33%;
+
+      .accordion-title {
+        width: 75%;
+      }
+
+      .accordion-subtitle {
+        color: $color-gray-dark;
+        font-size: 1rem;
+        font-weight: 400;
+        margin-top: 5px;
+      }
+
+      p {
+        margin: 0;
+        padding: 0;
+      }
+    }
+
+    .accordion-center,
+    .accordion-right {
+      color: $color-gray-darker;
+      flex-grow: 1;
+      font-size: 1.125rem;
+      font-weight: 400;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    .accordion-center {
+      text-align: left;
+    }
+
+    .accordion-right {
+      text-align: right;
+      margin-right: 30px;
+    }
+
+    .chevron-container {
+      position: relative;
+      height: 30px;
+      width: 30px;
+      background-color: $color-gray-light;
+      border: 1px solid $color-gray-medium;
+      border-radius: 50%;
+      display: inline-block;
+
+      .accordion-icon {
+        position: absolute;
+        top: 41%;
+        left: 33%;
+        margin-left: auto;
+        transition: transform 0.5s ease;
+      }
+
+      .rotate {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .accordion-content {
+    overflow: hidden;
+    padding: 0 30px;
+    transition: max-height 0.5s ease;
+
+    .accordion-text {
+      font-size: 1rem;
+      line-height: 1.7;
+      padding: 15px 0;
+
+      &.dashed-border {
+        border-top: 1px dashed $color-gray-very-light;
+      }
+
+      p:last-child {
+        margin: 0;
+      }
+    }
+  }
 }