qpp-style 2.1.13 → 2.2.0-sm.0

package/lib/svg-definitions.svg

@@ -0,0 +1,125 @@
+<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"
+  width="0" height="0" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
+    <symbol id="icon-warning" viewBox="-2 -2 25 25">
+        <style>
+        .st0{clip-path:url(#SVGID_2_);} .st1{clip-path:url(#SVGID_4_);fill:#999999;} .st2{enable-background:new ;} .st3{clip-path:url(#SVGID_7_);} .st4{clip-path:url(#SVGID_8_);fill:#999999;}
+        </style>
+        <defs>
+            <circle id="SVGID_1_" cx="10" cy="10" r="10"/>
+        </defs>
+        <clipPath id="SVGID_2_">
+            <use xlink:href="#SVGID_1_" overflow="visible"/>
+        </clipPath>
+        <g>
+            <defs>
+                <path id="SVGID_3_" d="M0 0h20v20H0z"/>
+            </defs>
+            <clipPath id="SVGID_4_">
+                <use xlink:href="#SVGID_3_" overflow="visible"/>
+            </clipPath>
+            <path d="M10 22C3.4 22-2 16.6-2 10S3.4-2 10-2s12 5.4 12 12-5.4 12-12 12zm0-20c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/>
+        </g>
+        <g>
+            <defs>
+                <path id="SVGID_5_" d="M0 0h20v20H0z"/>
+            </defs>
+            <defs>
+                <path id="SVGID_6_" d="M0 0h20v20H0z"/>
+            </defs>
+            <clipPath id="SVGID_7_">
+                <use xlink:href="#SVGID_5_" overflow="visible"/>
+            </clipPath>
+            <clipPath id="SVGID_8_">
+                <use xlink:href="#SVGID_6_" overflow="visible"/>
+            </clipPath>
+            <path d="M10 11.7c-.6 0-1-.4-1-1V5.8c0-.6.4-1 1-1s1 .4 1 1v4.9c0 .5-.4 1-1 1zM10 15.3c-.6 0-1-.4-1-1v-.4c0-.6.4-1 1-1s1 .4 1 1v.4c0 .6-.4 1-1 1z"/>
+        </g>
+    </symbol>
+    <symbol id="search" viewBox="0 0 25 25">
+        <title>magnifying glass</title>
+        <path d="M3.9,12.8c-1.2-1.2-1.8-2.7-1.8-4.4c0-1.7,0.6-3.2,1.8-4.4c1.2-1.2,2.7-1.8,4.4-1.8c1.7,0,3.2,0.6,4.4,1.8
+            c2.4,2.4,2.4,6.4,0,8.8c-1.2,1.2-2.7,1.8-4.4,1.8C6.6,14.6,5.1,14,3.9,12.8z M19.7,18.3l-4.8-4.8c2.5-3.3,2.3-8-0.7-11
+            C12.6,1,10.5,0.1,8.3,0.1C6.1,0.1,4,1,2.4,2.6C0.9,4.1,0,6.2,0,8.4c0,2.2,0.9,4.3,2.4,5.9c1.6,1.6,3.7,2.4,5.9,2.4
+            c1.9,0,3.6-0.6,5.1-1.7l4.8,4.8c0.2,0.2,0.5,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3C20.1,19.4,20.1,18.8,19.7,18.3z"/>
+    </symbol>
+    <symbol id="star-icon" viewBox="0 0 25 25">
+        <title>star</title>
+        <path d="M24.7,9.4c-0.1-0.1-0.2-0.1-0.3-0.2L16.6,8L13,0.9c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1,0-0.3,0-0.4,0
+            c0,0-0.2,0.1-0.2,0.2L8.4,8L0.6,9.2c-0.3,0-0.5,0.3-0.5,0.6c0,0.1,0.1,0.2,0.2,0.3L6,15.7l-1.3,7.9c-0.1,0.3,0.1,0.6,0.4,0.7h0.1
+            c0.1,0,0.2,0,0.3-0.1l7-3.7l7,3.7c0.1,0,0.2,0.1,0.3,0.1c0.3,0,0.6-0.3,0.6-0.6v-0.1l-1.3-7.9l5.6-5.6C24.9,10,24.9,9.6,24.7,9.4z
+            M7.1,15.8c0-0.2,0-0.4-0.2-0.5l-5.1-5.1l7-1.1C9,9.1,9.1,9,9.2,8.8l3.2-6.4l3.2,6.4C15.7,9,15.8,9.1,16,9.1l7,1.1l-4.9,5
+            c-0.1,0.1-0.3,0.4-0.3,0.6l1.4,7l-6.7-3.2c-0.2-0.1-0.4-0.1-0.5,0l-6.3,3.3L7.1,15.8z"/>
+    </symbol>
+    <symbol id="dashboard" viewBox="0 0 25 25">
+      <title>dashboard</title>
+      <g>
+        <path d="M22.2,12.8H12.1V2.8c0-0.3-0.2-0.5-0.5-0.5h-0.1c-6.2,0-11.2,5-11.2,11.2c0,6.2,5,11.2,11.2,11.2
+          c6.2,0,11.2-5,11.2-11.2v-0.1C22.7,13.1,22.5,12.8,22.2,12.8z M11.6,13.9h10c-0.2,5.4-4.7,9.7-10.1,9.7c-5.6,0-10.2-4.6-10.2-10.2
+          c0-5.4,4.3-9.9,9.7-10.1v10C11.1,13.7,11.3,13.9,11.6,13.9z"/>
+        <path d="M24.7,9.9l0-0.1C24,4.9,20.1,1,15.2,0.3l-0.1,0l0,0c-0.1,0-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.2-0.2,0.4V10
+          c0,0.3,0.2,0.5,0.5,0.5h9.2c0.2,0,0.3-0.1,0.4-0.2C24.7,10.2,24.7,10.1,24.7,9.9z M23.5,9.5h-8v-8C19.5,2.2,22.8,5.5,23.5,9.5z"/>
+      </g>
+    </symbol>
+    <symbol id="early-claims-icon" viewBox="0 0 25 25">
+        <title>Claims Icon list</title>
+        <g>
+            <g transform="translate(2.000000, 0.000000)">
+                <g transform="translate(3.000000, 8.000000)">
+                    <polygon points="0 1 15 1 15 0 0 0"></polygon>
+                    <polygon points="0 4 15 4 15 3 0 3"></polygon>
+                    <polygon points="0 7 15 7 15 6 0 6"></polygon>
+                    <polygon points="0 10 15 10 15 9 0 9"></polygon>
+                    <polygon points="0 13 15 13 15 12 0 12"></polygon>
+                </g>
+                <path d="M1,24 L1,1 L16,1 L16,5.5 C16,5.776 16.224,6 16.5,6 L20,6 L20,24 L1,24 Z M17,1.851 L19.446,5 L17,5 L17,1.851 Z M20.895,5.235 L16.979,0.193 C16.884,0.071 16.738,0 16.583,0 L0.5,0 C0.224,0 0,0.224 0,0.5 L0,24.5 C0,24.776 0.224,25 0.5,25 L20.5,25 C20.776,25 21,24.776 21,24.5 L21,5.542 C21,5.43 20.963,5.322 20.895,5.235 Z"></path>
+            </g>
+        </g>
+    </symbol>
+    <symbol id="physician-compare-icon" viewBox="0 0 25 25">
+        <title>Physician Compare</title>
+        <g stroke="none" stroke-width="1">
+            <g>
+                <path d="M19.2204301,5 L18.1451613,5 C17.7419355,5 17.4731183,5.2601626 17.4731183,5.6504065 C17.4731183,6.04065041 17.7419355,6.30081301 18.1451613,6.30081301 L19.2204301,6.30081301 C19.3548387,6.30081301 19.4892473,6.43089431 19.4892473,6.56097561 L19.4892473,11.8943089 C19.4892473,13.3252033 18.2795699,14.6260163 16.6666667,14.6260163 C15.0537634,14.6260163 13.844086,13.4552846 13.844086,11.8943089 L13.844086,6.56097561 C13.844086,6.43089431 13.9784946,6.30081301 14.1129032,6.30081301 L15.188172,6.30081301 C15.5913978,6.30081301 15.8602151,6.04065041 15.8602151,5.6504065 C15.8602151,5.2601626 15.5913978,5 15.188172,5 L14.1129032,5 C13.3064516,5 12.5,5.6504065 12.5,6.56097561 L12.5,11.8943089 C12.5,13.8455285 13.9784946,15.5365854 15.9946237,15.9268293 C15.8602151,18.398374 14.6505376,19.699187 12.5,19.699187 L12.2311828,19.699187 C9.40860215,19.699187 8.33333333,17.2276423 8.33333333,15.6666667 L8.33333333,14.495935 C9.67741935,14.1056911 10.6182796,12.9349593 10.6182796,11.504065 C10.7526882,9.81300813 9.27419355,8.38211382 7.52688172,8.38211382 C5.77956989,8.38211382 4.16666667,9.81300813 4.16666667,11.504065 C4.16666667,13.0650407 5.37634409,14.3658537 6.98924731,14.6260163 L6.98924731,15.6666667 C6.98924731,18.2682927 8.87096774,21 12.2311828,21 L12.5,21 C15.4569892,21 17.2043011,19.1788618 17.3387097,15.796748 C19.3548387,15.5365854 20.8333333,13.8455285 20.8333333,11.7642276 L20.8333333,6.56097561 C20.8333333,5.6504065 20.1612903,5 19.2204301,5 Z M5.77956989,11.504065 C5.77956989,10.5934959 6.58602151,9.94308943 7.39247312,9.94308943 C8.19892473,9.94308943 9.00537634,10.7235772 9.00537634,11.504065 C9.00537634,12.2845528 8.33333333,13.195122 7.52688172,13.195122 C6.72043011,13.195122 5.77956989,12.4146341 5.77956989,11.504065 Z"></path>
+                <path d="M20.718232,0 L4.14364641,0 C1.79558011,0 0,1.82291667 0,3.90625 L0,21.09375 C0,23.3072917 1.93370166,25 4.14364641,25 L20.8563536,25 C23.2044199,25 25,23.1770833 25,21.09375 L25,3.90625 C24.8618785,1.82291667 23.0662983,0 20.718232,0 Z M23.480663,21.09375 C23.480663,22.5260417 22.2375691,23.6979167 20.718232,23.6979167 L4.14364641,23.6979167 C2.62430939,23.6979167 1.38121547,22.5260417 1.38121547,21.09375 L1.38121547,3.90625 C1.38121547,2.47395833 2.62430939,1.30208333 4.14364641,1.30208333 L20.8563536,1.30208333 C22.3756906,1.30208333 23.6187845,2.47395833 23.6187845,3.90625 L23.6187845,21.09375 L23.480663,21.09375 Z"></path>
+            </g>
+        </g>
+    </symbol>
+    <symbol id="hardship-icon"  viewBox="0 0 25 25" version="1.1">
+        <title>Hardship Icon</title>
+        <g>
+            <g transform="translate(2.000000, 0.000000)" fill-rule="nonzero">
+                <path d="M18.7721739,2.6119403 L14.4991304,2.6119403 L12.4813043,2.6119403 C12.5178261,2.44402985 12.5543478,2.2761194 12.5543478,2.0988806 C12.5543478,0.942164179 11.6321739,0 10.5,0 C9.36782609,0 8.44565217,0.942164179 8.44565217,2.0988806 C8.44565217,2.2761194 8.47304348,2.44402985 8.51869565,2.6119403 L6.49173913,2.6119403 L2.21869565,2.6119403 C0.995217391,2.6119403 0,3.62873134 0,4.8880597 L0,22.733209 C0,23.983209 0.995217391,25 2.21869565,25 L18.7721739,25 C19.9956522,25 21,23.983209 21,22.7238806 L21,4.8880597 C21,3.62873134 19.9956522,2.6119403 18.7721739,2.6119403 Z M10.5,0.932835821 C11.13,0.932835821 11.6413043,1.45522388 11.6413043,2.0988806 C11.6413043,2.31343284 11.5682609,2.5 11.4769565,2.66791045 C11.403913,2.7891791 11.3126087,2.9011194 11.2030435,2.99440299 C11.1482609,3.04104478 11.0843478,3.08768657 11.0204348,3.125 C10.9747826,3.14365672 10.9382609,3.17164179 10.8926087,3.19029851 C10.7647826,3.22761194 10.6369565,3.26492537 10.5,3.26492537 C10.3630435,3.26492537 10.2352174,3.22761194 10.1165217,3.18097015 C10.0708696,3.16231343 10.0343478,3.14365672 9.98869565,3.11567164 C9.92478261,3.07835821 9.86086957,3.03171642 9.80608696,2.98507463 C9.6873913,2.89179104 9.59608696,2.77052239 9.52304348,2.63992537 C9.43173913,2.47201493 9.36782609,2.29477612 9.36782609,2.08955224 C9.35869565,1.45522388 9.87,0.932835821 10.5,0.932835821 Z M20.0869565,22.7238806 C20.0869565,23.4608209 19.5026087,24.0671642 18.7721739,24.0671642 L2.21869565,24.0671642 C1.4973913,24.0671642 0.903913043,23.4701493 0.903913043,22.7238806 L0.903913043,4.8880597 C0.913043478,4.14179104 1.4973913,3.54477612 2.21869565,3.54477612 L6.49173913,3.54477612 L6.49173913,4.38432836 C6.49173913,4.95335821 6.93913043,5.41044776 7.49608696,5.41044776 L13.503913,5.41044776 C14.0608696,5.41044776 14.5082609,4.95335821 14.5082609,4.38432836 L14.5082609,3.54477612 L18.7813043,3.54477612 C19.5026087,3.54477612 20.096087,4.14179104 20.096087,4.8880597 L20.096087,22.7238806 L20.0869565,22.7238806 L20.0869565,22.7238806 Z"></path>
+                <g transform="translate(4.000000, 9.000000)">
+                    <rect x="3.50571429" y="7.24" width="7.97142857" height="1"></rect>
+                    <rect x="0.848571429" y="7.24" width="1.37142857" height="1"></rect>
+                    <rect x="6.50571429" y="2.17" width="4.97142857" height="1"></rect>
+                    <polygon points="2.13428571 4.04 0.402857143 2.01 1.01142857 1.31 2.13428571 2.62 4.03714286 0.41 4.64571429 1.11"></polygon>
+                </g>
+            </g>
+        </g>
+    </symbol>
+    <symbol id="target-icon"  viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>Targeted Review</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g transform="translate(1.000000, 1.000000)">
+                <path d="M15.6521739,13.3410862 C14.9799955,14.9155188 13.3391142,15.8471825 11.6426584,15.617619 C9.9462025,15.3880555 8.61194453,14.0537975 8.38238102,12.3573416 C8.15281751,10.6608858 9.08448121,9.0200045 10.6589138,8.34782609" stroke-linecap="round"></path>
+                <path d="M19.826087,11.4686261 C19.5475194,15.6524455 16.0240274,18.8752139 11.8318419,18.780577 C7.63965639,18.6859401 4.26519733,15.3074531 4.17572893,11.1153254 C4.08626053,6.92319774 7.31350554,3.40382874 11.4978365,3.13043478" stroke-linecap="round"></path>
+                <path d="M22.9565217,10.4801044 C22.9565217,10.8094757 22.9565217,11.1488279 22.9565217,11.4781992 C22.9565217,16.1251852 20.1544991,20.3136359 15.8592987,22.0872623 C11.5640982,23.8608888 6.62327363,22.8696906 3.3445233,19.5766243 C0.065772964,16.283558 -0.903887735,11.3384639 0.888438166,7.05103466 C2.68076407,2.7636054 6.8813862,-0.0200950351 11.5283306,0 C11.867683,0 12.2070354,0 12.5264259,0" stroke-linecap="round"></path>
+                <path d="M23.4104348,8.34782609 C23.4626087,8.69217391 23.5147826,9.04695652 23.546087,9.39130435" stroke-linecap="round"></path>
+                <path d="M19.0559527,8.3085908 L16.1993898,7.27346855 C15.9679825,7.18675289 15.7867762,7.00255341 15.7042523,6.77015223 L14.6758896,3.9211919 C14.5392501,3.60164864 14.6150694,3.23112279 14.8663271,2.99053153 L17.5610181,0.255529619 C17.7680939,0.0454487694 18.069052,-0.043464617 18.357445,0.020237671 C18.6458381,0.083939959 18.8810085,0.291277194 18.9797777,0.568915255 L19.7415278,2.61067015 C19.8301804,2.85007338 20.017334,3.04018548 20.2557092,3.13297955 L22.4076532,3.94968151 C22.6793557,4.05644917 22.8788566,4.29253202 22.938341,4.57768034 C22.9978255,4.86282867 22.9092906,5.15867892 22.7028314,5.36466513 L19.960531,8.07117744 C19.7289278,8.31564041 19.3782081,8.40768945 19.0559527,8.3085908 Z"></path>
+                <line x1="12.5217391" y1="10.4347826" x2="16.6956522" y2="6.26086957" stroke-linecap="round"></line>
+            </g>
+        </g>
+    </symbol>
+    <symbol id="manage-users" viewBox="0 0 25 25">
+      <title>manage-users</title>
+      <g>
+        <path d="M4.4,10.8V0.2H3.6v10.7c-1.9,0.2-3.4,1.8-3.4,3.8s1.5,3.6,3.4,3.8v6.4h0.9v-6.4c1.9-0.2,3.4-1.8,3.4-3.8
+		  S6.3,11.1,4.4,10.8z M4,17.6c-1.6,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S5.6,17.6,4,17.6z"/>
+        <path d="M12.9,2.3V0.2h-0.9v2.2c-1.9,0.2-3.4,1.8-3.4,3.8c0,2,1.5,3.6,3.4,3.8v14.9h0.9V9.9c1.9-0.2,3.4-1.8,3.4-3.8
+		  C16.3,4.2,14.8,2.6,12.9,2.3z M12.5,9.1c-1.6,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S14.1,9.1,12.5,9.1z"/>
+        <path d="M24.8,18.9c0-2-1.5-3.6-3.4-3.8V0.2h-0.9v14.9c-1.9,0.2-3.4,1.8-3.4,3.8s1.5,3.6,3.4,3.8v2.2h0.9v-2.2
+		  C23.3,22.4,24.8,20.8,24.8,18.9z M21,21.8c-1.6,0-3-1.3-3-3c0-1.6,1.3-3,3-3s3,1.3,3,3C24,20.5,22.6,21.8,21,21.8z"/>
+      </g>
+    </symbol>
+</svg>

package/package.json

@@ -1,56 +1,72 @@
 {
   "name": "qpp-style",
-  "version": "2.1.13",
+  "version": "2.2.0-sm.0",
   "description": "Shared style guide across the QPP program.",
   "main": "dist/index.js",
+  "homepage": "https://cmsgov.github.io/qpp-style",
   "scripts": {
     "prepublishOnly": "npm run build",
-    "build": "npm run clean && webpack --progress --colors --env.production=true",
-    "dev": "npm run clean && webpack --progress --colors --watch --env.production=false",
-    "docs": "bundle exec jekyll serve --config _config.dev.yml",
-    "build-css": "mkdirp ./build/css && node-sass ./styles/_main.scss ./build/css/qpp-style.css && npm run build-prefix",
+    "build": "npm run clean && webpack-cli --progress --env production=true && npm run build-react",
+    "dev": "npm run clean && webpack-cli --progress --watch --env production=false",
     "clean": "rimraf build && rimraf dist",
-    "build-fonts": "mkdirp ./build/fonts && cp ./fonts/* ./build/fonts",
-    "build-library": "npm run build-library-assets",
-    "build-library-assets": "npm run clean && npm run build-css && npm run build-fonts",
-    "build-prefix": "postcss --use autoprefixer build/css/qpp-style.css -o ./build/css/qpp-style.css",
+    "build-react": "webpack --progress --config webpack.config.react.js",
     "start": "npm run build",
-    "test": "mocha --require ./test/test_helper.js --require ignore-styles --compilers js:babel-core/register \"test/**/*@(.js|.jsx)\""
+    "test": "jest",
+    "prepare": "cd .. && husky install react/.husky",
+    "precommit": "npm run format && npm run lint && npm run format-styles",
+    "prepush": "npm test",
+    "format": "prettier --write 'components/**/*.(js|jsx)'",
+    "lint": "eslint 'components/**/*.{js,jsx}'",
+    "stylelint": "stylelint 'styles/**/*.{css,scss}'",
+    "format-styles": "prettier 'styles/**/*.{css,scss}' --write --quiet"
   },
   "devDependencies": {
-    "autoprefixer": "^6.6.1",
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.26.0",
-    "chai": "^4.1.0",
-    "css-loader": "^0.28.4",
-    "enzyme": "^2.9.1",
-    "enzyme-to-json": "^1.6.0",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "ignore-styles": "^5.0.1",
-    "jest": "^21.1.0",
-    "jsdom": "^11.1.0",
-    "jsonwebtoken": "^8.1.0",
-    "mkdirp": "^0.5.1",
-    "mocha": "^3.4.2",
+    "@babel/cli": "^7.22.9",
+    "@babel/core": "^7.22.9",
+    "@babel/eslint-parser": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/register": "^7.22.5",
+    "@svgr/webpack": "^8.0.1",
+    "@testing-library/react": "^14.0.0",
+    "autoprefixer": "^10.4.14",
+    "babel-jest": "^29.6.1",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "chai": "^4.3.7",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-webpack-plugin": "^4.0.1",
+    "feather-icons-react": "^0.6.2",
+    "gh-pages": "^5.0.0",
+    "husky": "^8.0.3",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
+    "jsonwebtoken": "^9.0.1",
+    "mini-css-extract-plugin": "^2.7.6",
     "moxios": "^0.4.0",
-    "node-sass": "^4.5.3",
-    "postcss": "^5.2.10",
-    "postcss-cli": "^2.3.3",
-    "raw-loader": "^0.5.1",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-svg-inline": "^2.0.0",
-    "react-test-renderer": "^15.6.1",
-    "rimraf": "^2.6.1",
-    "sass-loader": "^6.0.6",
-    "sinon": "^3.0.0",
-    "style-loader": "^0.18.2",
-    "webpack": "^3.1.0",
-    "webpack-bundle-analyzer": "^2.9.0"
+    "preact": "^10.16.0",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "regenerator-runtime": "^0.13.11",
+    "rimraf": "^5.0.1",
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.2",
+    "sinon": "^15.0.3",
+    "style-loader": "^3.3.3",
+    "svgo": "^3.0.2",
+    "svgo-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.9",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4"
   },
   "repository": {
     "type": "git",
@@ -64,22 +80,21 @@
     "CMS",
     "CMSgov"
   ],
-  "author": "Ad Hoc, LLC",
-  "license": "UNLICENSED",
+  "author": "Centers for Medicare & Medicaid Services",
+  "license": "CC0-1.0",
   "bugs": {
     "url": "https://github.com/CMSgov/qpp-style/issues"
   },
-  "homepage": "https://github.com/CMSgov/qpp-style#readme",
   "dependencies": {
-    "axios": "^0.16.2",
-    "cookie": "^0.3.1",
-    "d3-scale": "^1.0.6",
-    "d3-selection": "^1.1.0",
-    "d3-shape": "^1.2.0",
-    "file-loader": "^0.11.2",
-    "jwt-decode": "^2.2.0",
-    "prop-types": "^15.5.0",
-    "react-modal": "^2.2.2",
-    "svgo-loader": "^1.2.1"
+    "@material-design-icons/svg": "^0.14.11",
+    "ariakit": "^2.0.0-next.44",
+    "axios": "^1.5.0",
+    "cookie": "^0.5.0",
+    "jwt-decode": "^3.1.2",
+    "prop-types": "^15.8.1",
+    "react-modal": "^3.14.4",
+    "retry": "^0.13.1",
+    "what-input": "^5.2.12",
+    "xss": "^1.0.14"
   }
 }

package/{js/session → session}/index.js

@@ -2,8 +2,4 @@ import LogoutSession from './logout.js';
 import RefreshSession from './refresh.js';
 import fetchTtl from './ttl';
 
-export {
-    fetchTtl,
-    LogoutSession,
-    RefreshSession
-}
+export { fetchTtl, LogoutSession, RefreshSession };

package/session/isAuthV2.js

@@ -0,0 +1,22 @@
+let isAuthV2 = null;
+
+export async function shouldUseAuthV2() {
+  const url = '/meta/environment';
+  if (isAuthV2 !== null) {
+    return isAuthV2;
+  }
+  try {
+    const response = await fetch(url);
+    if (response.ok) {
+      const json = await response.json();
+      const value = json.data.find(
+        (flag) => flag.environmentVariableName === 'FEATURE_AUTH_V2',
+      ).evaluatedValue;
+      isAuthV2 = value;
+      return value;
+    }
+    throw new Error('unable to access /meta/environment');
+  } catch (error) {
+    return false;
+  }
+}

package/session/logout.js

@@ -0,0 +1,77 @@
+import cookie from 'cookie';
+import axios from 'axios';
+
+export const deleteImpersonatedUser = (cookies) => {
+  if (cookies.hasOwnProperty('qpp_impersonated_user')) {
+    document.cookie =
+      'qpp_impersonated_user=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+  }
+
+  if (cookies.hasOwnProperty('qpp_impersonated_type')) {
+    document.cookie =
+      'qpp_impersonated_type=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+  }
+};
+
+export const revertApmPaymentCookie = () => {
+  const userHasApmPayments = localStorage.getItem('user_has_apm_payments');
+
+  if (userHasApmPayments) {
+    document.cookie = `user_has_apm_payments=${userHasApmPayments}; Path=/;`;
+  }
+};
+
+export const revertQppHasAuthsCookie = () => {
+  const { qppHasAuthorizations, behindSSL } = JSON.parse(
+    localStorage.getItem('impersonatorAuthValues')
+  );
+  if (qppHasAuthorizations) {
+    document.cookie = `qpp_has_authorizations=${qppHasAuthorizations};path=/${
+      behindSSL ? ';secure' : ''
+    }`;
+  }
+};
+
+/**
+ * Makes an API request to end the user session.
+ * @param  {Object} [_window] The DOM Window
+ * @return {Function} Returns a promise
+ */
+const LogoutSession = (_window) => {
+  // Remove the Side Nav expanded state from localStorage
+  localStorage.removeItem('qpp_side_nav_expanded')
+
+  let cookies = cookie.parse(_window.document.cookie);
+  let logoutDestination = '/logout-confirmation';
+
+  if (cookies.hasOwnProperty('qpp_auth_token')) {
+    let onSuccess = () => {
+      // redirect to login/logged out screen
+      deleteImpersonatedUser(cookies);
+      _window.location.pathname = logoutDestination;
+    };
+
+    let onError = () => {
+      // delete cookie and redirect login/logged out screen
+      deleteImpersonatedUser(cookies);
+      _window.location.pathname = logoutDestination;
+    };
+
+    return axios({
+      method: 'POST',
+      url: '/user/session-logout',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${cookies.qpp_auth_token}`,
+      },
+    })
+      .then(onSuccess, onError)
+      .catch(function (err) {
+        console.log(err);
+      });
+  } else {
+    _window.location.pathname = logoutDestination;
+  }
+};
+
+export default LogoutSession;

package/session/refresh.js

@@ -0,0 +1,52 @@
+import cookie from 'cookie';
+import logoutSession from './logout.js';
+import { shouldUseAuthV2 } from './isAuthV2.js';
+
+/**
+ * Makes an API request to refresh the session token cookie, if it exists.
+ * @param {Object}   [options] - Optional configuration parameters.
+ * @param {function} [options.onSuccess] - An optional success callback.
+ * @param {function} [options.onError] - An optional error callback.
+ * @return {Function} Returns a promise
+ */
+const refreshSession = async (options = {}) => {
+  const url = '/api/auth/sessions/refresh';
+  const isAuthV2 = await shouldUseAuthV2();
+  const version = isAuthV2 ? 'v2' : 'v1';
+  let cookies = cookie.parse(window.document.cookie);
+  const headers = new Headers({
+    Accept: `application/vnd.qpp.cms.gov.${version}+json`,
+    'Content-Type': 'application/json',
+    Authorization: `Bearer ${cookies.qpp_auth_token}`,
+  });
+  const fetchOptions = {
+    method: 'POST',
+    headers,
+  };
+
+  const onSuccess = () => {
+    if (typeof options.onSuccess === 'function') {
+      options.onSuccess();
+    }
+  };
+
+  const onError = () => {
+    if (typeof options.onError === 'function') {
+      options.onError();
+    }
+
+    return logoutSession(window); // eslint-disable-line new-cap
+  };
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (response.ok) {
+      return onSuccess();
+    }
+    throw new Error('Unable to refresh session');
+  } catch (error) {
+    onError();
+  }
+};
+
+export default refreshSession;

package/session/ttl.js

@@ -0,0 +1,25 @@
+import { shouldUseAuthV2 } from './isAuthV2';
+
+const fetchTtl = async (token) => {
+  const url = '/api/auth/sessions/ttl';
+  const isAuthV2 = await shouldUseAuthV2();
+  const version = isAuthV2 ? 'v2' : 'v1';
+  const headers = new Headers({
+    Accept: `application/vnd.qpp.cms.gov.${version}+json`,
+    'Content-Type': 'application/json',
+    Authorization: `Bearer ${token}`,
+  });
+  const fetchOptions = { headers };
+  try {
+    const response = await fetch(url, fetchOptions);
+    const json = await response.json();
+    if (response.ok) {
+      return json.data.time_remaining;
+    }
+    return 0;
+  } catch (error) {
+    return 0;
+  }
+};
+
+export default fetchTtl;