QPPA-9465: update design-systems to v11

package.json

@@ -27,7 +27,7 @@
   },
   "homepage": "https://cmsgov.github.io/qpp-submissions-docs",
   "dependencies": {
-    "@cmsgov/design-system": "10.1.1",
+    "@cmsgov/design-system": "11.0.0",
     "@vitejs/plugin-react": "4.2.1",
     "@xzar90/react-router-hash-link": "6.0.4",
     "core-js": "3.36.0",

src/app/components/guides/qualified-registries-and-qcdrs.tsx

@@ -106,7 +106,7 @@ const QualifiedRegistriesAndQcdrs: React.FC<DocPageProps> = ({dataTestId}: DocPa
       <p className='ds-text-body--md'>
         Below is a comprehensive list of how each endpoint behaves if you are using an organization-type API key:
       </p>
-      <table className='ds-c-table ds-c-table--borderless ds-u-font-size--small'>
+      <table className='ds-c-table ds-c-table--borderless ds-u-font-size--sm'>
         <thead>
           <tr>
             {['Endpoint', 'HTTP Method', 'Description'].map((h, i) => <th key={i}>{h}</th>)}

src/app/components/left-nav.tsx

@@ -38,7 +38,7 @@ const LeftNav = () => {
       {Routes && Routes.map(({ groupTitle, paths }, i) =>
         <li key={i}>
           <ul role='list' className='ds-c-vertical-nav left-nav'>
-            <li className={`ds-c-vertical-nav__item ds-u-font-weight--semibold ${leftNavPaddingClasses}`}>
+            <li className={`ds-c-vertical-nav__item ${leftNavPaddingClasses}`}>
               {groupTitle.toUpperCase()}
             </li>
             {paths.map((p) => buildLinkListItem(p))}

src/app/components/references/benchmarks.tsx

@@ -9,7 +9,7 @@ const Benchmarks: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
     <div data-testid={dataTestId}>
       <p className='qpp-docs-page-updated'>Last Updated: 08/28/2024</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
       <h2 className='ds-text-heading--2xl' style={{marginTop: 0}} id='current-benchmarks'>Benchmarks</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         Benchmarks serve as the reference points for measurements and are used to score submissions. Each benchmark is unique based upon its combination of measureId, submissionMethod, and performanceYear, and each has a list of 9 data points.
       </p>
       <p>

src/app/components/references/measurement-sets.tsx

@@ -8,10 +8,10 @@ const MeasurementSets: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) =>
     <div data-testid={dataTestId}>
       <p className='qpp-docs-page-updated'>Last Updated: 07/06/2023</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
       <h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>Measurement Sets</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         The MeasurementSets resource represents performance data for a specified category. Each Submission can have multiple MeasurementSets. Each MeasurementSet in a given Submission is uniquely identified by category, submission method, and programName. MeasurementSets contain Measurements, which can be accessed both via MeasurementSets methods and Measurements methods.
         </p>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         <ExternalLink href={`${envConfig.qppCmsPreviewUrl}/api/submissions/public/docs/#/MeasurementSets`} text='Try it out!' />
       </p>
 
@@ -23,7 +23,7 @@ const MeasurementSets: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) =>
       >
         Practice Details
       </h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         The MeasurementSet property practiceDetails is an optional property only available when programName is set to "pcf".
       </p>
       <CodeTab data={measurementSetsTabs.practiceDetails} />

src/app/components/references/measurements.tsx

@@ -15,60 +15,60 @@ const Measurements: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
           </li>,
         )}
       </ul>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         The Measurements resource represents performance data for a specific measure within a MeasurementSet. There are five types of Measurements: Boolean, Proportion, Non-Proportion, Single-Performance Rate, and Multi-Performance Rate. Each MeasurementSet can have multiple Measurements. No two Measurements in a given MeasurementSet can have the same measureId.
       </p>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         <ExternalLink href={`${envConfig.qppCmsPreviewUrl}/api/submissions/public/docs/#/Measurements`} text='Try it out!' />
       </p>
 
       <CodeTab data={measurementsTabs.fields} />
       <DataModelTable data={measurementsFields.fields} />
 
       <h2 className='ds-text-heading--2xl' id={measurementsTitleAndId.Boolean}>Boolean Measurements</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         Boolean Measurements are applicable to Improvement Activity (IA) and Promoting Interoperability (PI) measures. For PI Measures, if a measure has an Exclusion measure ID listed, this means that the Exclusion measure ID cannot be submitted in the same Measurement Set as the original measure because they have opposite meanings and cannot both be true.
       </p>
       <CodeTab data={measurementsTabs.boolean} />
       <DataModelTable data={measurementsFields.boolean} />
 
       <h2 className='ds-text-heading--2xl' id={measurementsTitleAndId.Proportion}>Proportion Measurements</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         Proportion Measurements are applicable to Promoting Interoperability (PI) measures. For PI Measures, if a measure has an Exclusion measure ID listed, this means that the Exclusion measure ID cannot be submitted in the same Measurement Set as the original measure because they have opposite meanings and cannot both be true.
       </p>
       <CodeTab data={measurementsTabs.proportion} />
       <DataModelTable data={measurementsFields.proportion} />
 
       <h2 className='ds-text-heading--2xl' id={measurementsTitleAndId['Non-Proportion']}>Non-Proportion Measurements</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         Non-Proportion Measurements are applicable to quality measures. Most are authored by QCDRs and are used to attest to measures that are otherwise categorized as 'ratio', 'continuous variable', or a combination of 'proportion' and the former. Note this means that having a false value in the proportion field of QCDR documentation is sufficient to determine that a measure as non-proportional, but having a true value for proportion is insufficient to determine that measure as proportional. Non-proportion measurements are unconstrained, so while the fields are 'numerator' and 'denominator' there is no validation that the numerator must be less than or equal to the denominator or that the denominator is greater than 0, as is the case for proportion measurements.
       </p>
       <CodeTab data={measurementsTabs.nonProportion} />
       <DataModelTable data={measurementsFields.nonProportion} />
 
       <h2 className='ds-text-heading--2xl' id={measurementsTitleAndId['CQM Single-Performance Rate']}>MIPS CQM Single-Performance Rate Measurements</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         Single-Performance Rate Measurements are applicable to MIPS CQM Quality measures.
       </p>
       <CodeTab data={measurementsTabs.cqmSinglePerformanceRate} />
       <DataModelTable data={measurementsFields.cqmSinglePerformanceRate} />
 
       <h2 className='ds-text-heading--2xl' id={measurementsTitleAndId['QCDR Single-Performance Rate']}>QCDR Single-Performance Rate Measurements</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         Single-Performance Rate Measurements are applicable to QCDR Quality measures. The performanceRate field is both writable and required for these measures.
       </p>
       <CodeTab data={measurementsTabs.qcdrSinglePerformanceRate} />
       <DataModelTable data={measurementsFields.qcdrSinglePerformanceRate} />
 
       <h2 className='ds-text-heading--2xl' id={measurementsTitleAndId['Multi-Performance Rate']}>Multi-Performance Rate Measurements</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         Multi-Performance Rate Measurements are applicable to Quality measures. There are two types of Multi-Performance Rate Measurements: registry and normal. The difference between the two is that for Registry Multi-Performance Rate Measurements, the performanceRate field is both writable and required. Multi-Performance Rate Measurements contain multiple strata and the stratum field is required for each.
       </p>
       <CodeTab data={measurementsTabs.multiPerformanceRate} />
       <DataModelTable data={measurementsFields.multiPerformanceRate} />
 
       <h2 className='ds-text-heading--2xl' id={measurementsTitleAndId['Multi-Performance Rate Stratum']}>Multi-Performance Rate Stratum</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         A Multi-Performance Rate Stratum represents the performance data for a specified subset of the population, as described by the stratum field. Submissions should follow the specifications for population and stratum name, below is an example submission.
       </p>
       <CodeTab data={measurementsTabs.stratum} />

src/app/components/references/scoring.tsx

@@ -41,18 +41,18 @@ const Scoring: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
     <div data-testid={dataTestId}>
       <p className='qpp-docs-page-updated'>Last Updated: 08/28/2024</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
       <h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>Scoring</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         The scoring engine is responsible for interpreting submissions and outputting a score. Each category score is utilized to create the QPP score object.
       </p>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         Note: Registries and QCDRs submitting on behalf of others will only have access to view the score for the data they submitted.  If they need to see the complete score, they will need permission from the practice.
       </p>
       <h3 className='ds-text-heading--xl'>Developer Preview Testing Environment</h3>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         In the Developer Preview Testing Environment you can use the <code>POST .../score-preview</code> endpoint to view the scoring object returned for the data you are proposing to submit.
         The data is not saved. Try the <code>POST .../submissions/score-preview</code> endpoint <ExternalLink href={`${envConfig.qppCmsPreviewUrl}/api/submissions/public/docs/#/Submissions/scoreSubmission`} text='here' />.
       </p>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         Note: You can use the <ExternalLink href={`${envConfig.cmsGithubIo}/qpp-developer-preview-docs/tutorial-special-scoring-scenarios`}text='special scoring scenarios test data'/> to see the score responses for different types of eligibility profiles.
       </p>
       <h3 className='ds-text-heading--xl'>During Submissions Window</h3>
@@ -63,7 +63,7 @@ const Scoring: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
       </p>
       <br/>
       <h2 className='ds-text-heading--2xl' id={textAndId['Improvement Activities'].id}>Improvement Activities (IA) Scoring</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         The only available option for reporting Improvement Activities is boolean, and only Activities completed need to be reported.
       </p>
       <ul>
@@ -74,7 +74,7 @@ const Scoring: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
 
 
       <h3 className='ds-text-heading--xl' id={textAndId['Improvement Activities'].sub['Improvement Activity Submissions']}>Example IA Submission</h3>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         The example submission below contains 4 activities. The reported activities contain both High and Medium weighted activities.
       </p>
       <CodeTab data={scoringData.submissionJsonExampleStringIa} />
@@ -88,7 +88,7 @@ const Scoring: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
 
       <br/>
       <h2 className='ds-text-heading--2xl'>Promoting Interoperability (PI) Scoring</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         The Promoting Interoperability Category requires all measures associated with the category to either be reported or their corresponding exclusion to be claimed. Additionally, to receive credit for the category, all the criteria below must be fulfilled:
       </p>
       <ul>
@@ -103,7 +103,7 @@ const Scoring: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
       </ul>
 
       <h3 className='ds-text-heading--xl' id={textAndId['Promoting Interoperability'].sub['Promoting Interoperability Submissions']}>Example PI Submission</h3>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         The measure types available for submission are outlined below. Each measure in the repo will dictate which type is to be utilized.
       </p>
       <ul>
@@ -125,12 +125,12 @@ const Scoring: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
 
       <br/>
       <h2 className='ds-text-heading--2xl' id={textAndId.Quality.id}>Quality</h2>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         The Quality category requires 6 measures to receive full credit, one of which must be either an Outcome measure or High Priority. If no Outcome or High Priority measure is submitted, you will only be scored on the top 5 measures and receive a score of 0 for the sixth measure.
       </p>
 
       <h3 className='ds-text-heading--xl' id={textAndId.Quality.sub['Quality Submissions']}>Example Quality Submission</h3>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         Submission structure in the Quality category are contingent on the measure being submitted. If there are questions around the data to be submitted in the fields, please refer to the measure specification. The available types related to the measures are outlined below:
       </p>
       <ul>
@@ -144,7 +144,7 @@ const Scoring: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
           <LinkToId to='/measurements#multi-performance-rate-measurements' text='Multi-Performance Rates' offset='120' />
         </li>
       </ul>
-      <p className='ds-text--lead'>
+      <p className='ds-text-body--lg'>
         In the sample below, measure 305 is a multi-strata performance measure, 102 is a single performance measure, ACRAD15 is a non-proportion measure.
       </p>
       <CodeTab data={scoringData.submissionJsonExampleStringQuality} />

src/app/components/resources-and-support/frequently-asked-questions.tsx

@@ -42,7 +42,7 @@ const FrequentlyAskedQuestions: React.FC<DocPageProps> = ({dataTestId}: DocPageP
       </p>
 
       <h3 className='ds-text-heading--xl'>Submissions API</h3>
-      <table className='ds-c-table ds-u-font-size--small faq-table'>
+      <table className='ds-c-table ds-u-font-size--sm faq-table'>
         <thead>
           <tr>
             {['Question', 'Answer'].map((h, i) => <th key={i}>{h}</th>)}
@@ -61,7 +61,7 @@ const FrequentlyAskedQuestions: React.FC<DocPageProps> = ({dataTestId}: DocPageP
         </tbody>
       </table>
       <h3 className='ds-text-heading--xl'>PY24 Questions and Known Issues</h3>
-      <table className='ds-c-table ds-u-font-size--small faq-table'>
+      <table className='ds-c-table ds-u-font-size--sm faq-table'>
         <thead>
           <tr>
             {['Question', 'Answer'].map((h, i) => <th key={i}>{h}</th>)}

src/app/components/topics/change-log.tsx

@@ -230,13 +230,13 @@ const ChangeLog: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) =>{
       </p>
 
       <h3 className='ds-text-heading--xl'>Submission API</h3>
-      <table className='ds-c-table ds-u-font-size--small'>
+      <table className='ds-c-table ds-u-font-size--sm'>
         {buildTableHeader()}
         {buildTableBody(submissionChangesTable)}
       </table>
 
       <h3 className='ds-text-heading--xl'>Measures Repository</h3>
-      <table className='ds-c-table ds-u-font-size--small'>
+      <table className='ds-c-table ds-u-font-size--sm'>
         {buildTableHeader()}
         {buildTableBody(measuresChangeTable)}
       </table>

src/shared/data-model-table.tsx

@@ -15,7 +15,7 @@ const checkTDforHTML = (val: string) =>
 export const DataModelTable = ({ data }: { data: IDataModelTable[] }) => {
   return (
     <>
-      <table className='ds-c-table ds-c-table--borderless ds-u-font-size--small'>
+      <table className='ds-c-table ds-c-table--borderless ds-u-font-size--sm'>
         <thead>
           <tr>
             {['Property Name: Type', 'Description', 'Notes'].map((h, i) => <th key={i}>{h}</th>)}

src/styles/_global.scss

@@ -6,7 +6,7 @@
 body {
   margin: 0;
   padding-top: 85px;
-  background: $off-white;
+  background: $qpp-gray-04;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -18,7 +18,7 @@ table {
 }
 
 table td {
-  border: 1px solid #5b616b;
+  border: 1px solid $qpp-gray-60;
 }
 
 table td pre {
@@ -37,8 +37,8 @@ ol {
 
 .content-block {
   border-radius: 3px;
-  border: 1px solid #dcdcdc;
-  background: white;
+  border: 1px solid $qpp-gray-10;
+  background: $qpp-gray-00;
 }
 
 section {
@@ -51,7 +51,7 @@ h1 {
 
 h2 a.tutorial-header-link {
   text-decoration: none;
-  color: #000;
+  color: $qpp-gray-100;
 }
 
 h2:hover a.tutorial-header-link {
@@ -63,23 +63,23 @@ h2:hover a.tutorial-header-link {
 }
 
 .qpp-docs-page-updated {
-  color: #036;
+  color: $qpp-primary-80;
   font-size: small;
   text-align: right;
   margin: 0;
 }
 
 .qpp-docs-title-container {
-  background: #036;
+  background: $qpp-primary-80;
   padding-top: 30px;
   padding-bottom: 10px;
 }
 
 a.qpp-docs-title-back {
-  color: #fff;
+  color: $qpp-gray-00;
 
   &:focus {
-    color: #fff;
+    color: $qpp-gray-00;
     outline: 0;
   }
 }
@@ -89,7 +89,7 @@ a.qpp-docs-title-back {
 }
 
 .qpp-docs-title-text {
-  color: #fff;
+  color: $qpp-gray-00;
   font-size: 24px;
   margin-top: 20px;
   margin-bottom: 10px;
@@ -106,12 +106,8 @@ a.qpp-docs-title-back {
   font-weight: normal;
 }
 
-.ds-u-font-weight--semibold {
-  font-weight: 500 !important;
-}
-
 a.ds-c-button:visited {
-  color: #fff;
+  color: $qpp-gray-00;
 }
 
 a:focus {
@@ -121,9 +117,9 @@ a:focus {
 
 .ds-c-vertical-nav__label.ds-c-vertical-nav__label--current:visited:focus,
 .ds-c-vertical-nav__label:visited:focus {
-  background-color: $off-white;
+  background-color: $qpp-gray-04;
   text-decoration: none;
-  color: $qpp-navy;
+  color: $qpp-primary-70;
 }
 
 .ds-c-vertical-nav > .ds-c-vertical-nav__item {
@@ -134,12 +130,12 @@ a:focus {
   thead {
     th,
     tr {
-      background-color: #f1f1f1;
+      background-color: $qpp-gray-04;
     }
   }
 
   td {
-    background-color: #fff;
+    background-color: $qpp-gray-00;
   }
 }