Skip to content

Commit fc0ee10

Browse files
authored
Merge pull request #315 from CMSgov/QPPA-9269
QPPA-9269: update design systems to v10
2 parents c4ee4f7 + 77bf7d5 commit fc0ee10

26 files changed

+1927
-352
lines changed

package-lock.json

Lines changed: 1769 additions & 198 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
},
2828
"homepage": "https://cmsgov.github.io/qpp-submissions-docs",
2929
"dependencies": {
30-
"@cmsgov/design-system": "5.0.2",
30+
"@cmsgov/design-system": "10.1.1",
3131
"@vitejs/plugin-react": "4.2.1",
3232
"@xzar90/react-router-hash-link": "6.0.4",
3333
"core-js": "3.36.0",

src/app/components/footer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Footer = ({ openModal }: { openModal: CallableFunction }) => {
1212
<div className='logo-container'>
1313
<img className='qpp-logo' src={`${envConfig.qppCmsUrl}/images/qpp_logo_reversed.png`} alt='qpp logo' />
1414
</div>
15-
<ul>
15+
<ul className='ds-u-display--block'>
1616
<li>
1717
<ExternalLink href={`${envConfig.qppCmsUrl}/developers`} text='Developer Tools' />
1818
</li>
@@ -26,7 +26,7 @@ const Footer = ({ openModal }: { openModal: CallableFunction }) => {
2626
<a href='#modal-subscribe' data-toggle='modal' data-target='#modal-subscribe' onClick={() => openModal()}>Subscribe to Updates</a>
2727
</li>
2828
</ul>
29-
<ul className='small'>
29+
<ul className='ds-u-display--block small'>
3030
<li>
3131
<ExternalLink href={`${envConfig.qppCmsUrl}/privacy`} text='CMS Privacy Notice' />
3232
</li>

src/app/components/guides/advanced-tutorial.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const AdvancedTutorial: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) =>
99
return (
1010
<div data-testid={dataTestId}>
1111
<p className='qpp-docs-page-updated'>Last Updated: 08/31/2023</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
12-
<h2 className='ds-h2' style={{marginTop: 0}} id='advanced-tutorial'>Tutorial: Add and update data via API</h2>
12+
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}} id='advanced-tutorial'>Tutorial: Add and update data via API</h2>
1313
<p>
1414
In the <LinkToId to='/tutorial' text='first tutorial' /> we covered how to create a measurement set and retrieve the score in two different API requests. We're now going to build on the previous tutorial by adding another measure to the measurement set we created in the previous tutorial. All of these examples serve to illustrate how the Submissions API can make it easier to react to and fix issues that arise.
1515
</p>

src/app/components/guides/authorization-and-authentication.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ const AuthenticationAndAuthorization: React.FC<DocPageProps> = ({dataTestId}: Do
55
return (
66
<div data-testid={dataTestId}>
77
<p className='qpp-docs-page-updated'>Last Updated: 08/26/2020</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
8-
<h2 className='ds-h2' style={{marginTop: 0}}>Submissions API Authentication and Authorization</h2>
9-
<p className='ds-text'>
8+
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>Submissions API Authentication and Authorization</h2>
9+
<p className='ds-text-body--md'>
1010
To submit directly to QPP using the Submissions API, Qualified Registries and QCDRs use CMS-provided tokens in their API calls. You can learn more about the Submissions API authentication and authorization model for Qualified Registries and QCDRs <LinkToId to='/qualified-registries-and-qcdrs' text='here' />.
1111
</p>
1212

13-
<p className='ds-text'>
13+
<p className='ds-text-body--md'>
1414
We support OAuth Authentication, which provides client applications with secure, delegated access to the Submissions API. You can learn more about using OAuth with the Submissions API <LinkToId to='/getting-started-with-oauth' text='here' />.
1515
</p>
1616
</div>

src/app/components/guides/basic-tutorial.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const BasicTutorial: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
77
return (
88
<div data-testid={dataTestId}>
99
<p className='qpp-docs-page-updated'>Last Updated: 08/31/2023</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
10-
<h2 className='ds-h2' style={{marginTop: 0}}>Tutorial: Create and Score Data via API</h2>
10+
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>Tutorial: Create and Score Data via API</h2>
1111
<p>
1212
The Submissions API is an easy way to manage your performance data with CMS. Performance data is organized into submissions, which can have many measurements. Measurements within a submission are also grouped by category (e.g. quality) and submission method (e.g. registry) and program name (e.g. mips) into measurement sets.
1313
</p>
@@ -18,7 +18,7 @@ const BasicTutorial: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
1818
Let's walk through an example of how you might submit performance data as a registry API user!
1919
</p>
2020

21-
<h3 className='ds-h3' id='creating-a-measurement-set'>Create a new measurement set</h3>
21+
<h3 className='ds-text-heading--xl' id='creating-a-measurement-set'>Create a new measurement set</h3>
2222
<p>
2323
We need to create a <em>measurement set</em> first. We can do that by asking the API to create a measurement set record in the CMS database. In API terms, this means making a <code>POST</code> (synonym for <em>create</em>) request to the <code>/measurement-sets</code> endpoint.
2424
</p>
@@ -34,7 +34,7 @@ const BasicTutorial: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
3434
<ApiExample data={apiExamples.measurementSets} />
3535
<CodeTab data={steps.basic1} />
3636

37-
<h3 className='ds-h3' id='scoring-a-submission'>Scoring a submission</h3>
37+
<h3 className='ds-text-heading--xl' id='scoring-a-submission'>Scoring a submission</h3>
3838
<p>
3939
With the submission <code>id</code> we were given, we can ask the API to calculate the submission score with a GET request. We don't need to include a request body this time since we're only interested in retrieving the score, and CMS doesn't need any information other than the submission <code>id</code>.
4040
</p>

src/app/components/guides/getting-started-with-oauth.tsx

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,41 @@ const GettingStartedUsingQppOauth: React.FC<DocPageProps> = ({dataTestId}: DocPa
66
return (
77
<div data-testid={dataTestId}>
88
<p className='qpp-docs-page-updated'>Last Updated: 08/31/2023</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
9-
<h2 className='ds-h2' style={{marginTop: 0}}>Getting Started Using QPP OAuth</h2>
10-
<p className='ds-text'>
9+
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>Getting Started Using QPP OAuth</h2>
10+
<p className='ds-text-body--md'>
1111
Using OAuth with the Submissions API allows QPP participants to use their own QPP credentials to login through your application to submit their data to and view performance feedback from QPP. Before you can request production access, you will need to use the Developer Preview Environment to build, test and demo your OAuth application.
1212
</p>
1313

14-
<h2 className='ds-h2' id='oauth'>Using OAuth in the Developer Preview</h2>
15-
<p className='ds-text'>
14+
<h2 className='ds-text-heading--2xl' id='oauth'>Using OAuth in the Developer Preview</h2>
15+
<p className='ds-text-body--md'>
1616
To use the QPP Submissions API with OAuth, you must create a Developer Preview account and register the application.
1717
</p>
18-
<p className='ds-text'>
18+
<p className='ds-text-body--md'>
1919
Create an account for Developer Preview at <ExternalLink href={envConfig.qppCmsPreviewUrl} />.
2020
</p>
2121

22-
<h3 className='ds-h3'>Connect to EHR or reporting application</h3>
23-
<p className='ds-text'>
22+
<h3 className='ds-text-heading--xl'>Connect to EHR or reporting application</h3>
23+
<p className='ds-text-body--md'>
2424
Log in to Developer Preview (<ExternalLink href={envConfig.qppCmsPreviewUrl} />).
2525
</p>
26-
<p className='ds-text'>
26+
<p className='ds-text-body--md'>
2727
Locate your EHR (search by the EHR name as it appears in the <ExternalLink href={envConfig.chplHealthItUrl} text='CHPL database' />).
2828
</p>
29-
<p className='ds-text'>
29+
<p className='ds-text-body--md'>
3030
If you cannot locate your EHR or are a registry user, create one manually.
3131
</p>
32-
<p className='ds-text'>
32+
<p className='ds-text-body--md'>
3333
After requesting the role, it may take a few minutes to populate.
3434
</p>
3535

36-
<h3 className='ds-h3'>Register an Application</h3>
37-
<p className='ds-text'>
36+
<h3 className='ds-text-heading--xl'>Register an Application</h3>
37+
<p className='ds-text-body--md'>
3838
Once you are connected, you can use the OAuth APIs directly on the <ExternalLink href={`${envConfig.qppCmsPreviewUrl}/api/auth/docs/#/OAuth`} text='Auth API' />. Also, Development Preview contains a UI (<ExternalLink href={`${envConfig.qppCmsPreviewUrl}/user/applications`} text='here' />) where you can create and manage your OAuth applications.
3939
</p>
40-
<p className='ds-text'>
40+
<p className='ds-text-body--md'>
4141
Registering and testing your application within the Developer Preview is required prior to being granted production OAuth access.
4242
</p>
43-
<p className='ds-text'>
43+
<p className='ds-text-body--md'>
4444
To register the application, you will need:
4545
</p>
4646
<ul>
@@ -53,36 +53,36 @@ const GettingStartedUsingQppOauth: React.FC<DocPageProps> = ({dataTestId}: DocPa
5353
Terms of Service and Privacy Policy are optional for the test environment, but required for production.
5454
</li>
5555
</ul>
56-
<p className='ds-text'>
56+
<p className='ds-text-body--md'>
5757
In the test environment, a registered application is assigned a client ID and, if applicable, a client secret. The secret should only be used if it can be kept confidential, such as for communication between your server and the Submissions API.
5858
</p>
59-
<p className='ds-text'>
59+
<p className='ds-text-body--md'>
6060
Additional support along with a sample OAuth Client, can be found in the QPP Github at: <ExternalLink href='https://github.com/CMSgov/qpp-submissions-docs/tree/master/oauth_sample' />.
6161
</p>
6262

63-
<h2 className='ds-h2' id='create-user'>Create test users in the Developer Preview</h2>
64-
<p className='ds-text'>
63+
<h2 className='ds-text-heading--2xl' id='create-user'>Create test users in the Developer Preview</h2>
64+
<p className='ds-text-body--md'>
6565
To support Developer Preview integration and testing, we created the <ExternalLink href={`${envConfig.qppCmsPreviewUrl}/api/synthetic-data/docs/index.html`} text='Test Data Service' />. Using this API, you can reserve specific scenarios in the Test Data Service to test granting access to their QPP authorizations and try out different special scoring scenarios. Please visit the Interactive Documentation to learn more about setting up test users in Developer Preview.
6666
</p>
6767

68-
<h2 className='ds-h2' id='production-api-access'>Production API Access</h2>
69-
<p className='ds-text'>
68+
<h2 className='ds-text-heading--2xl' id='production-api-access'>Production API Access</h2>
69+
<p className='ds-text-body--md'>
7070
To submit data via OAuth and the Submissions API during the submission window, your application must be approved for production use by QPP. To apply for production access, you must demonstrate your application to QPP and attest that your organization:
7171
</p>
7272
<ul>
7373
<li>Is a US-based company</li>
7474
<li>Agrees to CMS API Terms of Use</li>
7575
<li>Participated in the CMS QPP Submissions API Developer Preview</li>
7676
</ul>
77-
<p className='ds-text'>
77+
<p className='ds-text-body--md'>
7878
You will also be asked to provide:
7979
</p>
8080
<ul>
8181
<li>A company website</li>
8282
<li>A point of contact</li>
8383
<li>URL to Application Privacy or Terms of Use</li>
8484
</ul>
85-
<p className='ds-text'>
85+
<p className='ds-text-body--md'>
8686
To request production access, please email the QPP Help Desk at [email protected] to set up a demonstration with the QPP team. In order to have sufficient time to go through the approval process, requests for production access for an upcoming submission period should be made no later than November 1 prior to submissions opening.
8787
</p>
8888
</div>

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -59,42 +59,42 @@ const QualifiedRegistriesAndQcdrs: React.FC<DocPageProps> = ({dataTestId}: DocPa
5959
return (
6060
<div data-testid={dataTestId}>
6161
<p className='qpp-docs-page-updated'>Last Updated: 07/01/2021</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
62-
<h2 className='ds-h2' style={{marginTop: 0}}>Qualified Registries and QCDRs</h2>
63-
<p className='ds-text'>
62+
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>Qualified Registries and QCDRs</h2>
63+
<p className='ds-text-body--md'>
6464
Qualified Registries and QCDRs entities that are authorized by the Centers for Medicare &amp; Medicaid Services (CMS) to submit Quality Measures, Promoting Interoperability Measures, and/or Improvement Activities on behalf of MIPS eligible clinicians, groups, and/or virtual groups for a specified performance year can submit directly to the Submissions API using an API token.
6565
</p>
66-
<p className='ds-text'>
66+
<p className='ds-text-body--md'>
6767
Tokens are specific to your organization and are specific to the environment within the Submissions API. Developer Preview tokens are for testing against the Submissions API in the Developer Preview environment. Production token are for submitting during the specific performance year's submissions window to the production environment of the Submissions API.
6868
</p>
69-
<p className='ds-text'>
69+
<p className='ds-text-body--md'>
7070
If you are a Registry or QCDR using the Developer Preview, you have an API key that is associated with an 'organization'. This affects what endpoints you are authorized to use, and what behavior each endpoint has.
7171
</p>
72-
<p className='ds-text'>
72+
<p className='ds-text-body--md'>
7373
At a high level, your API key allows you to create and edit data using the <code>/measurement-sets</code> and <code>/measurements</code> endpoints. You cannot create data using the <code>/submissions</code> endpoint. For more information about what you're authorized to do with the Submissions API, click <LinkToId to='/developer-preview#authorization' text='here' offset='130' />.
7474
</p>
7575

76-
<h2 className='ds-h2' id='authentication'>Authentication</h2>
77-
<p className='ds-text'>
76+
<h2 className='ds-text-heading--2xl' id='authentication'>Authentication</h2>
77+
<p className='ds-text-body--md'>
7878
You must authenticate your account when using the Submissions API. Authenticate via bearer auth by adding your API token to the header of every request using the key value: <strong>Authorization: Bearer [YOUR API TOKEN]</strong>.
7979
</p>
80-
<p className='ds-text'>
80+
<p className='ds-text-body--md'>
8181
API keys carry many privileges, and must not be shared in publicly accessible areas such as GitHub and in client-side code. Even within organizations, access must be limited to staff embedding it in software.
8282
</p>
83-
<p className='ds-text'>
83+
<p className='ds-text-body--md'>
8484
Your API key carries many privileges, so be sure to keep it secret! Do not share your secret API key in publicly accessible areas such GitHub, client-side code, and so forth.
8585
</p>
86-
<p className='ds-text'>
86+
<p className='ds-text-body--md'>
8787
All API requests must be made over HTTPS. Calls made over plain HTTP will fail. API requests in the Developer Preview without authentication will also fail.
8888
</p>
89-
<p className='ds-text'>
89+
<p className='ds-text-body--md'>
9090
Please see <ExternalLink href={`${envConfig.cmsGithubIo}/qpp-developer-preview-docs/getting-started`} text='Getting Started'/> for instructions on how to download your registry token.
9191
</p>
9292

93-
<h2 className='ds-h2' id='authorization'>Authorization</h2>
94-
<p className='ds-text'>
93+
<h2 className='ds-text-heading--2xl' id='authorization'>Authorization</h2>
94+
<p className='ds-text-body--md'>
9595
If you are a current Qualified Registry or QCDR using the Submissions API, you have an API key that is associated with an 'organization'. This affects what endpoints you are authorized to use, and what behavior each endpoint has.
9696
</p>
97-
<p className='ds-text'>
97+
<p className='ds-text-body--md'>
9898
In general, if you have an organization-type API key, you can:
9999
</p>
100100
<ul>
@@ -103,7 +103,7 @@ const QualifiedRegistriesAndQcdrs: React.FC<DocPageProps> = ({dataTestId}: DocPa
103103
<li>View scores based on data you've submitted</li>
104104
</ul>
105105

106-
<p className='ds-text'>
106+
<p className='ds-text-body--md'>
107107
Below is a comprehensive list of how each endpoint behaves if you are using an organization-type API key:
108108
</p>
109109
<table className='ds-c-table ds-c-table--borderless ds-u-font-size--small'>
@@ -126,8 +126,8 @@ const QualifiedRegistriesAndQcdrs: React.FC<DocPageProps> = ({dataTestId}: DocPa
126126
</tbody>
127127
</table>
128128

129-
<h2 className='ds-h2'>Retrieve your API tokens</h2>
130-
<p className='ds-text'>
129+
<h2 className='ds-text-heading--2xl'>Retrieve your API tokens</h2>
130+
<p className='ds-text-body--md'>
131131
To retrieve your Developer Preview and production tokens, you must have a HARP account that has a Security Official role for your Qualified Registry or QCDR. Please see <ExternalLink href={`${envConfig.cmsGithubIo}/qpp-developer-preview-docs/getting-started`} text='Getting Started'/> for instructions on how to download your registry token..
132132
</p>
133133
</div>

src/app/components/guides/submitting-to-submissions-api.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ const SubmittingToQppSubmissionApi: React.FC<DocPageProps> = ({dataTestId}: DocP
66
return (
77
<div data-testid={dataTestId}>
88
<p className='qpp-docs-page-updated'>Last Updated: 01/05/2021</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
9-
<h2 className='ds-h2' style={{marginTop: 0}}>The Submissions API enables submissions and real-time performance scoring of Quality Payment Program (QPP) data. </h2>
10-
<p className='ds-text'>
9+
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>The Submissions API enables submissions and real-time performance scoring of Quality Payment Program (QPP) data. </h2>
10+
<p className='ds-text-body--md'>
1111
The Submissions API is a RESTful API. It has predictable, resource-oriented URLs, and uses HTTP response codes to indicate API errors. It uses standard HTTP features, like HTTPS authentication and HTTP verbs, which are understood by off-the-shelf HTTP clients.
1212
</p>
13-
<p className='ds-text'>
13+
<p className='ds-text-body--md'>
1414
The Submissions API supports cross-origin resource sharing, allowing you to interact securely with the API from a client-side web application (though you should never expose your secret API key in any public website's client-side code).
1515
</p>
16-
<p className='ds-text'>API responses are returned in JSON, including errors.</p>
16+
<p className='ds-text-body--md'>API responses are returned in JSON, including errors.</p>
1717

18-
<h2 className='ds-h2'>Object Types</h2>
18+
<h2 className='ds-text-heading--2xl'>Object Types</h2>
1919
<ul>
2020
<li>
2121
Submissions: A submission object contains any performance data submitted on behalf of a single MIPS-eligible clinician, practice or group.
@@ -28,7 +28,7 @@ const SubmittingToQppSubmissionApi: React.FC<DocPageProps> = ({dataTestId}: DocP
2828
</li>
2929
</ul>
3030

31-
<p className='ds-text'>
31+
<p className='ds-text-body--md'>
3232
Visit the <ExternalLink href={`${envConfig.qppCmsPreviewUrl}/api/submissions/public/docs`} text='Interactive Documentation' /> to learn more about the endpoints available in the Submissions API.
3333
</p>
3434
</div>

0 commit comments

Comments
 (0)