refactor: 💡 convert p tags to Hds::Text component (#2800)

* refactor: 💡 convert p tags to Hds::Text component

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16865

* style: 💄 remove comment

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16865

addons/core/tests/dummy/app/templates/index.hbs

@@ -4,7 +4,7 @@
 }}
 
 <Hds::Text::Display @tag='h2' id='title'>Welcome to Ember</Hds::Text::Display>
-<p>{{relative-datetime-live this.now}}</p>
+<Hds::Text::Body @tag='p'>{{relative-datetime-live this.now}}</Hds::Text::Body>
 
 <ul>
   <li>{{truncate-list 'actions.more' this.list}}</li>

addons/core/tests/dummy/app/templates/smoke-test.hbs

@@ -4,12 +4,14 @@
 }}
 
 <Hds::Text::Display @tag='h1'>Smoke Test</Hds::Text::Display>
-<p>
+<Hds::Text::Body @tag='p'>
   This template is used by the smoke-test acceptance tests, which validate that
   Ember can start up and basic features work as intended.
-</p>
+</Hds::Text::Body>
 
 <Hds::Text::Display @tag='h2'>{{t
     'resources.account.title'
   }}</Hds::Text::Display>
-<p>{{t 'resources.account.description'}}</p>
+<Hds::Text::Body @tag='p'>{{t
+    'resources.account.description'
+  }}</Hds::Text::Body>

addons/rose/addon/components/rose/form/checkbox/index.hbs

@@ -23,7 +23,11 @@
   <label class='rose-form-checkbox-label' for={{this.id}}>
     <Hds::Text::Body>{{@label}}</Hds::Text::Body>
     {{#if @description}}
-      <p class='rose-form-checkbox-label-description'>{{@description}}</p>
+      <Hds::Text::Body
+        @tag='p'
+        @weight='semibold'
+        class='rose-form-checkbox-label-description'
+      >{{@description}}</Hds::Text::Body>
     {{/if}}
   </label>
 

addons/rose/app/styles/rose/_typography.scss

@@ -57,7 +57,8 @@ h3,
   margin-bottom: sizing.rems(xs);
 }
 
-p {
+p,
+.p {
   margin-bottom: sizing.rems(m);
 }
 

addons/rose/tests/integration/components/rose/dialog/cover-test.js

@@ -20,9 +20,9 @@ module('Integration | Component | rose/dialog/cover', function (hooks) {
           >Authentication Pending</Hds::Text::Display>
         </:header>
         <:body>
-          <p>Complete authentication in the newly-opened window.</p>
-          <p>Don't see the new window?  <a href="#">Try again.</a></p>
-          <p><a href="#">Cancel</a></p>
+          <Hds::Text::Body @tag='p'>Complete authentication in the newly-opened window.</Hds::Text::Body>
+          <Hds::Text::Body @tag='p'>Don't see the new window?  <a href="#">Try again.</a></Hds::Text::Body>
+          <Hds::Text::Body @tag='p'><a href="#">Cancel</a></Hds::Text::Body>
         </:body>
       </Rose::Dialog::Cover>
     `);

addons/rose/tests/integration/components/rose/layout/body-content-test.js

@@ -27,7 +27,7 @@ module('Integration | Component | rose/layout/body-content', function (hooks) {
   test('it renders with content', async function (assert) {
     await render(hbs`<Rose::Layout::BodyContent as |bc|>
       <bc.Body><button id="button" type="button" /></bc.Body>
-      <bc.Sidebar><p id="details">Resource Details</p></bc.Sidebar>
+      <bc.Sidebar><Hds::Text::Body @tag='p' id="details">Resource Details</Hds::Text::Body></bc.Sidebar>
     </Rose::Layout::BodyContent>`);
 
     assert.dom('.rose-layout-body-content-body #button').isVisible();

ui/admin/app/components/auth-methods/auth-method/accounts/account/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.account.title'}}
   <DocLink @doc='account' />
 </Hds::Text::Display>
-<p>{{t 'resources.account.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.account.description'}}
+</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/auth-methods/auth-method/header/index.hbs

@@ -12,5 +12,7 @@
   {{/if}}
   <DocLink @doc='auth-method' />
 </Hds::Text::Display>
-<p>{{t 'resources.auth-method.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>{{t
+    'resources.auth-method.description'
+  }}</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.managed-group.title'}}
   <DocLink @doc='managed-groups' />
 </Hds::Text::Display>
-<p>{{t 'resources.managed-group.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>{{t
+    'resources.managed-group.description'
+  }}</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/credential-stores/credential-store/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.credential-store.title'}}
   <DocLink @doc='credential-store' />
 </Hds::Text::Display>
-<p>{{t 'resources.credential-store.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>{{t
+    'resources.credential-store.description'
+  }}</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/form/account/ldap/index.hbs

@@ -79,9 +79,9 @@
 
       <F.Control>
         <div class='ldap-section'>
-          <p class='hds-typography-display-300 hds-font-weight-bold'>{{t
-              'form.other_fields.label'
-            }}</p>
+          <Hds::Text::Display @tag='h3' @size='300' @weight='bold'>
+            {{t 'form.other_fields.label'}}
+          </Hds::Text::Display>
           <Hds::Form::HelperText @controlId='helper-text-for-section'>{{t
               'form.other_fields.help'
             }}</Hds::Form::HelperText>
@@ -109,9 +109,9 @@
         {{/if}}
 
         {{#if @model.member_of_groups}}
-          <p class='hds-font-weight-semibold'>
-            {{t 'resources.account.form.member_of_groups.label'}}
-          </p>
+          <Hds::Text::Body @tag='p' @size='300' @weight='semibold' class='p'>{{t
+              'resources.account.form.member_of_groups.label'
+            }}</Hds::Text::Body>
           {{#each @model.member_of_groups as |group|}}
             <Hds::Form::TextInput::Field
               @value={{group.value}}

ui/admin/app/components/form/auth-method/ldap/index.hbs

@@ -47,9 +47,9 @@
   </Hds::Form::Textarea::Field>
 
   <div class='ldap-section'>
-    <p class='hds-typography-display-300 hds-font-weight-bold'>{{t
-        'resources.auth-method.section.connection.title'
-      }}</p>
+    <Hds::Text::Display @tag='h3' @size='300' @weight='bold'>
+      {{t 'resources.auth-method.section.connection.title'}}
+    </Hds::Text::Display>
     <Hds::Form::HelperText @controlId='for-connection'>{{t
         'resources.auth-method.section.connection.help'
       }}</Hds::Form::HelperText>
@@ -215,9 +215,9 @@
   </Hds::Form::Toggle::Field>
 
   <div class='ldap-section'>
-    <p class='hds-typography-display-300 hds-font-weight-bold'>{{t
-        'resources.auth-method.section.authenticated-search.title'
-      }}</p>
+    <Hds::Text::Display @tag='h3' @size='300' @weight='bold'>
+      {{t 'resources.auth-method.section.authenticated-search.title'}}
+    </Hds::Text::Display>
     <Hds::Form::HelperText @controlId='for-authenticated-search'>{{t
         'resources.auth-method.section.authenticated-search.help'
       }}</Hds::Form::HelperText>
@@ -294,9 +294,9 @@
   </Hds::Form::TextInput::Field>
 
   <div class='ldap-section'>
-    <p class='hds-typography-display-300 hds-font-weight-bold'>{{t
-        'resources.auth-method.section.anonymous-search.title'
-      }}</p>
+    <Hds::Text::Display @tag='h3' @size='300' @weight='bold'>
+      {{t 'resources.auth-method.section.anonymous-search.title'}}
+    </Hds::Text::Display>
     <Hds::Form::HelperText @controlId='for-anonymous-search'>{{t
         'resources.auth-method.section.anonymous-search.help'
       }}</Hds::Form::HelperText>
@@ -331,9 +331,9 @@
   </Hds::Form::Toggle::Field>
 
   <div class='ldap-section'>
-    <p class='hds-typography-display-300 hds-font-weight-bold'>{{t
-        'resources.auth-method.section.user-entries.title'
-      }}</p>
+    <Hds::Text::Display @tag='h3' @size='300' @weight='bold'>
+      {{t 'resources.auth-method.section.user-entries.title'}}
+    </Hds::Text::Display>
     <Hds::Form::HelperText @controlId='for-user-entries'>{{t
         'resources.auth-method.section.user-entries.help'
       }}</Hds::Form::HelperText>
@@ -423,9 +423,9 @@
   </Form::Field::ListWrapper>
 
   <div class='ldap-section'>
-    <p class='hds-typography-display-300 hds-font-weight-bold'>{{t
-        'resources.auth-method.section.group-entries.title'
-      }}</p>
+    <Hds::Text::Display @tag='h3' @size='300' @weight='bold'>
+      {{t 'resources.auth-method.section.group-entries.title'}}
+    </Hds::Text::Display>
     <Hds::Form::HelperText @controlId='for-group-entries'>{{t
         'resources.auth-method.section.group-entries.help'
       }}</Hds::Form::HelperText>

ui/admin/app/components/form/worker/create-worker-led/index.hbs

@@ -157,9 +157,9 @@
       </Hds::Form::Fieldset>
     {{/if}}
 
-    <p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
       {{t 'resources.worker.form.steps.1.create_directory'}}
-    </p>
+    </Hds::Text::Body>
 
     <Hds::CodeBlock
       @language='bash'
@@ -169,9 +169,9 @@
       data-test-worker-directory
     />
 
-    <p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
       {{t 'resources.worker.form.steps.1.create_config'}}
-    </p>
+    </Hds::Text::Body>
 
     <Hds::CodeBlock
       @language='hcl'
@@ -181,9 +181,9 @@
       data-test-worker-config
     />
 
-    <p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
       {{t 'resources.worker.form.steps.1.save_config' htmlSafe=true}}
-    </p>
+    </Hds::Text::Body>
   </div>
 
   <Hds::Text::Display
@@ -196,9 +196,9 @@
   </Hds::Text::Display>
   <div class='worker-create-section'>
 
-    <p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
       {{t 'resources.worker.form.steps.2.run_command'}}
-    </p>
+    </Hds::Text::Body>
 
     <Hds::CodeBlock
       @language='bash'
@@ -207,12 +207,12 @@
       @hasLineNumbers={{false}}
     />
 
-    <p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
       {{t 'resources.worker.form.steps.2.copy_registration_request'}}
       <code>{{t
           'resources.worker.form.steps.3.worker_auth_registration_request.label'
         }}</code>.
-    </p>
+    </Hds::Text::Body>
   </div>
 
   <Hds::Text::Display
@@ -264,7 +264,9 @@
       <div class='worker-success'>
         <div>
           <Hds::Icon @name='cpu' @color='success' @isInline={{true}} />
-          <p>{{this.generatedWorkerAuthToken}}</p>
+          <Hds::Text::Body @tag='p' @size='300' class='p'>
+            {{this.generatedWorkerAuthToken}}
+          </Hds::Text::Body>
         </div>
         <div>
           <Hds::Icon
@@ -272,7 +274,9 @@
             @color='success'
             @isInline={{true}}
           />
-          <p>{{t 'resources.worker.form.steps.3.registered'}}</p>
+          <Hds::Text::Body @tag='p' @size='300' class='p'>
+            {{t 'resources.worker.form.steps.3.registered'}}
+          </Hds::Text::Body>
         </div>
       </div>
     {{/unless}}

ui/admin/app/components/groups/group/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.group.title'}}
   <DocLink @doc='group' />
 </Hds::Text::Display>
-<p>{{t 'resources.group.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.group.description'}}
+</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.host-catalog.title'}}
   <DocLink @doc='host-catalog' />
 </Hds::Text::Display>
-<p>{{t 'resources.host-catalog.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.host-catalog.description'}}
+</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/add-hosts/header/index.hbs

@@ -7,4 +7,6 @@
   {{t 'resources.host-set.host.messages.add.title'}}
   <DocLink @doc='host-set.add-hosts' />
 </Hds::Text::Display>
-<p>{{t 'resources.host-set.host.messages.add.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.host-set.host.messages.add.description'}}
+</Hds::Text::Body>

ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.host-set.title'}}
   <DocLink @doc='host-set' />
 </Hds::Text::Display>
-<p>{{t 'resources.host-set.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.host-set.description'}}
+</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/hosts/host/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.host.title'}}
   <DocLink @doc='host' />
 </Hds::Text::Display>
-<p>{{t 'resources.host.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.host.description'}}
+</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/host-sets/new/header/index.hbs

@@ -7,4 +7,6 @@
   {{t 'resources.host-set.titles.new'}}
   <DocLink @doc='host-set.new' />
 </Hds::Text::Display>
-<p>{{t 'resources.host-set.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.host-set.description'}}
+</Hds::Text::Body>

ui/admin/app/components/host-catalogs/host-catalog/hosts/host/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.host.title'}}
   <DocLink @doc='host' />
 </Hds::Text::Display>
-<p>{{t 'resources.host.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.host.description'}}
+</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/hosts/new/header/index.hbs

@@ -7,4 +7,6 @@
   {{t 'resources.host.titles.new'}}
   <DocLink @doc='host.new' />
 </Hds::Text::Display>
-<p>{{t 'resources.host.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.host.description'}}
+</Hds::Text::Body>

ui/admin/app/components/link-list-panel/item/index.hbs

@@ -13,7 +13,9 @@
           {{/if}}
 
           <div>
-            <p class='link-list-item__text'>{{@text}}</p>
+            <Hds::Text::Body @tag='p' @size='300' class='link-list-item__text'>
+              {{@text}}
+            </Hds::Text::Body>
             {{yield}}
           </div>
         </div>
@@ -28,7 +30,9 @@
           {{/if}}
 
           <div>
-            <p class='link-list-item__text'>{{@text}}</p>
+            <Hds::Text::Body @tag='p' @size='300' class='link-list-item__text'>
+              {{@text}}
+            </Hds::Text::Body>
             {{yield}}
           </div>
         </div>
@@ -43,7 +47,9 @@
       {{/if}}
 
       <div>
-        <p class='link-list-item__text'>{{@text}}</p>
+        <Hds::Text::Body @tag='p' @size='300' class='link-list-item__text'>
+          {{@text}}
+        </Hds::Text::Body>
         {{yield}}
       </div>
     </div>

ui/admin/app/components/roles/role/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.role.title'}}
   <DocLink @doc='role' />
 </Hds::Text::Display>
-<p>{{t 'resources.role.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.role.description'}}
+</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/targets/target/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.target.title'}}
   <DocLink @doc='target' />
 </Hds::Text::Display>
-<p>{{t 'resources.target.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.target.description'}}
+</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/users/user/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.user.title'}}
   <DocLink @doc='user' />
 </Hds::Text::Display>
-<p>{{t 'resources.user.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.user.description'}}
+</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/worker-diagram/dual-filter/hcp/index.hbs

@@ -23,11 +23,9 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
-  <p
-    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
-  >
+  <Hds::Text::Body @tag='p' @size='100' @color='faint'>
     {{t 'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'}}
-  </p>
+  </Hds::Text::Body>
 {{else if @ingressWorkerFilterEnabled}}
   <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-off-ingress-on as |D|>
     <D.Item @icon='user'>
@@ -40,11 +38,9 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
-  <p
-    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
-  >
+  <Hds::Text::Body @tag='p' @size='100' @color='faint'>
     {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
-  </p>
+  </Hds::Text::Body>
 {{else if @egressWorkerFilterEnabled}}
   <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-on-ingress-off as |D|>
     <D.Item @icon='user'>
@@ -69,11 +65,9 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
-  <p
-    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
-  >
+  <Hds::Text::Body @tag='p' @size='100' @color='faint'>
     {{t 'resources.target.workers.filter-explainer.hcp-dual-egress-on'}}
-  </p>
+  </Hds::Text::Body>
 {{else}}
   <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-off-ingress-off as |D|>
     <D.Item @icon='user'>
@@ -86,9 +80,7 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
-  <p
-    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
-  >
+  <Hds::Text::Body @tag='p' @size='100' @color='faint'>
     {{t 'resources.target.workers.filter-explainer.hcp-worker'}}
-  </p>
+  </Hds::Text::Body>
 {{/if}}

ui/admin/app/components/worker-diagram/dual-filter/index.hbs

@@ -23,11 +23,9 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
-  <p
-    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
-  >
+  <Hds::Text::Body @tag='p' @size='100' @color='faint'>
     {{t 'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'}}
-  </p>
+  </Hds::Text::Body>
 {{else if @ingressWorkerFilterEnabled}}
   <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-on as |D|>
     <D.Item @icon='user'>
@@ -40,11 +38,9 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
-  <p
-    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
-  >
+  <Hds::Text::Body @tag='p' @size='100' @color='faint'>
     {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
-  </p>
+  </Hds::Text::Body>
 {{else if @egressWorkerFilterEnabled}}
   <OrderedSeriesDiagram data-test-dual-filter-egress-on-ingress-off as |D|>
     <D.Item @icon='user'>
@@ -65,11 +61,9 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
-  <p
-    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
-  >
+  <Hds::Text::Body @tag='p' @size='100' @color='faint'>
     {{t 'resources.target.workers.filter-explainer.dual-egress-on'}}
-  </p>
+  </Hds::Text::Body>
 {{else}}
   <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-off as |D|>
     <D.Item @icon='user'>
@@ -82,9 +76,7 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
-  <p
-    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
-  >
+  <Hds::Text::Body @tag='p' @size='100' @color='faint'>
     {{t 'resources.target.workers.filter-explainer.any-worker'}}
-  </p>
+  </Hds::Text::Body>
 {{/if}}

ui/admin/app/components/worker-diagram/single-filter/index.hbs

@@ -20,11 +20,9 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
-  <p
-    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
-  >
+  <Hds::Text::Body @tag='p' @size='100' @color='faint'>
     {{t 'resources.target.workers.filter-explainer.egress-worker'}}
-  </p>
+  </Hds::Text::Body>
 {{else}}
   <OrderedSeriesDiagram data-test-single-filter-egress-off as |D|>
     <D.Item @icon='user'>
@@ -37,9 +35,7 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
-  <p
-    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
-  >
+  <Hds::Text::Body @tag='p' @size='100' @color='faint'>
     {{t 'resources.target.workers.filter-explainer.any-worker'}}
-  </p>
+  </Hds::Text::Body>
 {{/if}}

ui/admin/app/components/workers/worker/header/index.hbs

@@ -7,5 +7,7 @@
   {{t 'resources.worker.title'}}
   <DocLink @doc='worker' />
 </Hds::Text::Display>
-<p>{{t 'resources.worker.description'}}</p>
+<Hds::Text::Body @tag='p' @size='300' class='p'>
+  {{t 'resources.worker.description'}}
+</Hds::Text::Body>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/styles/app.scss

@@ -549,12 +549,6 @@
 
 // target sidebar
 .target-sidebar {
-  .description {
-    color: var(--token-form-helper-text-color);
-    font-weight: var(--token-typography-font-weight-normal);
-    font-size: var(--token-typography-body-200-font-size);
-  }
-
   .hds-link-standalone {
     margin-top: 1rem;
   }
@@ -563,12 +557,6 @@
 .target-sidebar-aliases {
   margin-bottom: 3rem;
 
-  .description {
-    color: var(--token-form-helper-text-color);
-    font-weight: var(--token-typography-font-weight-normal);
-    font-size: var(--token-typography-body-200-font-size);
-  }
-
   .hds-link-standalone {
     margin-top: 1rem;
   }

ui/admin/app/templates/onboarding/index.hbs

@@ -15,7 +15,9 @@
       >{{t 'onboarding.add-target.titles.have-a-target'}}</Hds::Text::Display>
     </:header>
     <:body>
-      <p>{{t 'onboarding.add-target.descriptions.setup-first-target'}}</p>
+      <Hds::Text::Body @tag='p'>
+        {{t 'onboarding.add-target.descriptions.setup-first-target'}}
+      </Hds::Text::Body>
       <Form::Onboarding
         @model={{@model}}
         @submit={{fn this.createResources @model}}

ui/admin/app/templates/onboarding/success.hbs

@@ -30,7 +30,9 @@
               'onboarding.success.titles.creation-success'
             }}</Hds::Text::Display>
         </span>
-        <p>{{t 'onboarding.success.descriptions.role'}}</p>
+        <Hds::Text::Body @tag='p'>
+          {{t 'onboarding.success.descriptions.role'}}
+        </Hds::Text::Body>
       </div>
 
       {{! Download Desktop client }}
@@ -40,7 +42,9 @@
               'onboarding.success.titles.desktop'
             }}</Hds::Text::Display>
         </span>
-        <p>{{t 'onboarding.success.descriptions.download'}}</p>
+        <Hds::Text::Body @tag='p'>
+          {{t 'onboarding.success.descriptions.download'}}
+        </Hds::Text::Body>
 
         <Hds::Link::Standalone
           @icon='download'
@@ -77,7 +81,9 @@
         <Hds::Text::Display @tag='h4'>
           {{t 'onboarding.success.titles.developers'}}
         </Hds::Text::Display>
-        <p>{{t 'onboarding.success.descriptions.developers'}}</p>
+        <Hds::Text::Body @tag='p'>
+          {{t 'onboarding.success.descriptions.developers'}}
+        </Hds::Text::Body>
 
         <Hds::Link::Standalone
           @icon='docs-link'

ui/admin/app/templates/scopes/scope/add-storage-policy/create.hbs

@@ -24,7 +24,9 @@
       {{t 'resources.policy.titles.new'}}
       <DocLink @doc='storage-policy.new' />
     </Hds::Text::Display>
-    <p>{{t 'resources.policy.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.policy.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/aliases/alias/index.hbs

@@ -17,7 +17,9 @@
       {{t 'resources.alias.title'}}
       <DocLink @doc='alias' />
     </Hds::Text::Display>
-    <p>{{t 'resources.alias.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.alias.description'}}
+    </Hds::Text::Body>
     <Hds::Copy::Snippet @color='secondary' @textToCopy={{@model.id}} />
   </page.header>
 

ui/admin/app/templates/scopes/scope/aliases/index.hbs

@@ -18,7 +18,9 @@
       {{t 'resources.alias.title_plural'}}
       <DocLink @doc='alias' />
     </Hds::Text::Display>
-    <p>{{t 'resources.alias.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.alias.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.actions>

ui/admin/app/templates/scopes/scope/aliases/new.hbs

@@ -24,7 +24,9 @@
       {{t 'resources.alias.titles.new'}}
       <DocLink @doc='alias' />
     </Hds::Text::Display>
-    <p>{{t 'resources.alias.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.alias.description'}}
+    </Hds::Text::Body>
 
   </page.header>
   <page.body>

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password.hbs

@@ -22,7 +22,9 @@
       @weight='bold'
       class='header-spacing'
     >{{t 'resources.account.title'}}</Hds::Text::Display>
-    <p>{{t 'resources.account.messages.set-password.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.account.messages.set-password.description'}}
+    </Hds::Text::Body>
     <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs

@@ -57,7 +57,9 @@
                 {{else}}
                   {{B.data.displayName}}
                 {{/if}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               </B.Td>
               <B.Td>
                 {{B.data.issuer}}
@@ -108,7 +110,9 @@
                 {{else}}
                   {{B.data.displayName}}
                 {{/if}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               </B.Td>
               <B.Td>
                 {{B.data.email}}
@@ -148,7 +152,9 @@
                 {{else}}
                   {{B.data.accountName}}
                 {{/if}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               </B.Td>
               <B.Td>
                 {{B.data.login_name}}

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/new.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.account.titles.new'}}
       <DocLink @doc='account.new' />
     </Hds::Text::Display>
-    <p>{{t 'resources.account.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.account.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.hbs

@@ -54,7 +54,9 @@
             <B.Tr>
               <B.Td>
                 {{B.data.accountName}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               </B.Td>
               <B.Td>{{B.data.issuer}}</B.Td>
               <B.Td>{{B.data.subject}}</B.Td>
@@ -86,7 +88,9 @@
             <B.Tr>
               <B.Td>
                 {{B.data.displayName}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               </B.Td>
               <B.Td>{{B.data.email}}</B.Td>
               <B.Td>{{B.data.full_name}}</B.Td>

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/new.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.managed-group.titles.new'}}
       <DocLink @doc='managed-groups' />
     </Hds::Text::Display>
-    <p>{{t 'resources.managed-group.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.managed-group.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/auth-methods/index.hbs

@@ -14,7 +14,9 @@
       {{t 'resources.auth-method.title_plural'}}
       <DocLink @doc='auth-method' />
     </Hds::Text::Display>
-    <p>{{t 'resources.auth-method.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.auth-method.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.breadcrumbs>
@@ -124,7 +126,9 @@
                 {{else}}
                   {{B.data.displayName}}
                 {{/if}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               </B.Td>
               <B.Td>
                 <Hds::Badge

ui/admin/app/templates/scopes/scope/auth-methods/new.hbs

@@ -20,7 +20,9 @@
       {{t 'resources.auth-method.titles.new'}}
       <DocLink @doc='auth-method' />
     </Hds::Text::Display>
-    <p>{{t 'resources.auth-method.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.auth-method.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.breadcrumbs>

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/index.hbs

@@ -19,7 +19,9 @@
       {{t 'resources.credential-library.title'}}
       <DocLink @doc='credential-library' />
     </Hds::Text::Display>
-    <p>{{t 'resources.credential-library.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.credential-library.description'}}
+    </Hds::Text::Body>
     <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/new.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.credential-library.titles.new'}}
       <DocLink @doc='credential-library' />
     </Hds::Text::Display>
-    <p>{{t 'resources.credential-library.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.credential-library.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/credential/index.hbs

@@ -19,7 +19,9 @@
       {{t 'resources.credential.title'}}
       <DocLink @doc='credential' />
     </Hds::Text::Display>
-    <p>{{t 'resources.credential.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.credential.description'}}
+    </Hds::Text::Body>
     <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/new.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.credential.titles.new'}}
       <DocLink @doc='credential' />
     </Hds::Text::Display>
-    <p>{{t 'resources.credential.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.credential.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/credential-stores/index.hbs

@@ -19,7 +19,9 @@
       <DocLink @doc='credential-store' />
     </Hds::Text::Display>
     {{#if @model.doCredentialStoresExist}}
-      <p>{{t 'resources.credential-store.description'}}</p>
+      <Hds::Text::Body @tag='p' @size='300' class='p'>
+        {{t 'resources.credential-store.description'}}
+      </Hds::Text::Body>
     {{/if}}
   </page.header>
 

ui/admin/app/templates/scopes/scope/credential-stores/new.hbs

@@ -24,7 +24,9 @@
       {{t 'resources.credential-store.titles.new'}}
       <DocLink @doc='credential-store' />
     </Hds::Text::Display>
-    <p>{{t 'resources.credential-store.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.credential-store.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/edit.hbs

@@ -30,7 +30,9 @@
         {{t 'resources.global.title'}}
         <DocLink @doc='global' />
       </Hds::Text::Display>
-      <p>{{t 'resources.global.description'}}</p>
+      <Hds::Text::Body @tag='p' @size='300' class='p'>
+        {{t 'resources.global.description'}}
+      </Hds::Text::Body>
     {{/if}}
     {{#if @model.isOrg}}
       <Hds::Text::Display
@@ -42,7 +44,9 @@
         {{t 'resources.org.title'}}
         <DocLink @doc='org' />
       </Hds::Text::Display>
-      <p>{{t 'resources.org.description'}}</p>
+      <Hds::Text::Body @tag='p' @size='300' class='p'>
+        {{t 'resources.org.description'}}
+      </Hds::Text::Body>
     {{/if}}
     {{#if @model.isProject}}
       <Hds::Text::Display
@@ -54,7 +58,9 @@
         {{t 'resources.project.title'}}
         <DocLink @doc='project' />
       </Hds::Text::Display>
-      <p>{{t 'resources.project.description'}}</p>
+      <Hds::Text::Body @tag='p' @size='300' class='p'>
+        {{t 'resources.project.description'}}
+      </Hds::Text::Body>
     {{/if}}
     <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>

ui/admin/app/templates/scopes/scope/groups/group/add-members.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.group.messages.add-members.title'}}
       <DocLink @doc='group.add-members' />
     </Hds::Text::Display>
-    <p>{{t 'resources.group.messages.add-members.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.group.messages.add-members.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/groups/index.hbs

@@ -20,7 +20,9 @@
       <DocLink @doc='group' />
     </Hds::Text::Display>
     {{#if @model.doGroupsExist}}
-      <p>{{t 'resources.group.description'}}</p>
+      <Hds::Text::Body @tag='p' @size='300' class='p'>
+        {{t 'resources.group.description'}}
+      </Hds::Text::Body>
     {{/if}}
   </page.header>
 
@@ -71,7 +73,9 @@
                 {{else}}
                   {{B.data.displayName}}
                 {{/if}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               </B.Td>
               <B.Td>
                 <Hds::Copy::Snippet

ui/admin/app/templates/scopes/scope/groups/new.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.group.titles.new'}}
       <DocLink @doc='group' />
     </Hds::Text::Display>
-    <p>{{t 'resources.group.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.group.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/host-catalogs/index.hbs

@@ -20,7 +20,9 @@
       <DocLink @doc='host-catalog' />
     </Hds::Text::Display>
     {{#if @model.doHostCatalogsExist}}
-      <p>{{t 'resources.host-catalog.description'}}</p>
+      <Hds::Text::Body @tag='p' @size='300' class='p'>
+        {{t 'resources.host-catalog.description'}}
+      </Hds::Text::Body>
     {{/if}}
   </page.header>
 

ui/admin/app/templates/scopes/scope/host-catalogs/new.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.host-catalog.titles.new'}}
       <DocLink @doc='host-catalog.new' />
     </Hds::Text::Display>
-    <p>{{t 'resources.host-catalog.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.host-catalog.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/policies/index.hbs

@@ -17,7 +17,9 @@
       {{t 'resources.policy.title_plural'}}
       <DocLink @doc='storage-policy' />
     </Hds::Text::Display>
-    <p>{{t 'resources.policy.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.policy.description'}}
+    </Hds::Text::Body>
   </page.header>
   <page.actions>
     {{#if (can 'create model' this.scope collection='policies')}}
@@ -56,7 +58,9 @@
                 {{B.data.displayName}}
               {{/if}}
               {{#if B.data.description}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               {{/if}}
             </B.Td>
             <B.Td>

ui/admin/app/templates/scopes/scope/policies/new.hbs

@@ -24,7 +24,9 @@
       {{t 'resources.policy.titles.new'}}
       <DocLink @doc='storage-policy.new' />
     </Hds::Text::Display>
-    <p>{{t 'resources.policy.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.policy.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/policies/policy/index.hbs

@@ -18,7 +18,9 @@
       {{t 'resources.policy.title'}}
       <DocLink @doc='storage-policy' />
     </Hds::Text::Display>
-    <p>{{t 'resources.policy.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.policy.description'}}
+    </Hds::Text::Body>
     <Hds::Copy::Snippet @color='secondary' @textToCopy={{@model.id}} />
   </page.header>
 

ui/admin/app/templates/scopes/scope/roles/index.hbs

@@ -20,7 +20,9 @@
       <DocLink @doc='role' />
     </Hds::Text::Display>
     {{#if @model.doRolesExist}}
-      <p>{{t 'resources.role.description'}}</p>
+      <Hds::Text::Body @tag='p' @size='300' class='p'>
+        {{t 'resources.role.description'}}
+      </Hds::Text::Body>
     {{/if}}
   </page.header>
 
@@ -68,7 +70,9 @@
                 {{else}}
                   {{B.data.displayName}}
                 {{/if}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               </B.Td>
               <B.Td>
                 {{#if (includes this.grantScopeThis B.data.grant_scope_ids)}}

ui/admin/app/templates/scopes/scope/roles/new.hbs

@@ -24,7 +24,9 @@
       {{t 'resources.role.titles.new'}}
       <DocLink @doc='role' />
     </Hds::Text::Display>
-    <p>{{t 'resources.role.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.role.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/roles/role/add-principals.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.role.principal.messages.add-principals.title'}}
       <DocLink @doc='role.add-principals' />
     </Hds::Text::Display>
-    <p>{{t 'resources.role.principal.messages.add-principals.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.role.principal.messages.add-principals.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/roles/role/grants.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.role.title'}}
       <DocLink @doc='role' />
     </Hds::Text::Display>
-    <p>{{t 'resources.role.grant.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.role.grant.description'}}
+    </Hds::Text::Body>
     <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 

ui/admin/app/templates/scopes/scope/roles/role/manage-scopes/index.hbs

@@ -19,7 +19,9 @@
       {{t 'resources.role.scope.messages.manage-scopes.title'}}
       <DocLink @doc='role.add-grant-scopes' />
     </Hds::Text::Display>
-    <p>{{t 'resources.role.scope.messages.manage-scopes.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.role.scope.messages.manage-scopes.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/roles/role/manage-scopes/manage-custom-scopes.hbs

@@ -25,9 +25,9 @@
       {{t 'resources.role.scope.messages.manage-custom-scopes.title'}}
       <DocLink @doc='role.add-grant-scopes' />
     </Hds::Text::Display>
-    <p>{{t
-        'resources.role.scope.messages.manage-custom-scopes.description'
-      }}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.role.scope.messages.manage-custom-scopes.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body class='search-filtering'>

ui/admin/app/templates/scopes/scope/roles/role/manage-scopes/manage-org-projects.hbs

@@ -43,7 +43,9 @@
       }}
       <DocLink @doc='role.add-grant-scopes' />
     </Hds::Text::Display>
-    <p>{{t 'resources.role.scope.messages.manage-org-projects.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.role.scope.messages.manage-org-projects.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body class='search-filtering'>

ui/admin/app/templates/scopes/scope/roles/role/principals.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.role.title'}}
       <DocLink @doc='role' />
     </Hds::Text::Display>
-    <p>{{t 'resources.role.principal.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.role.principal.description'}}
+    </Hds::Text::Body>
     <Hds::Copy::Snippet @textToCopy={{@model.role.id}} @color='secondary' />
   </page.header>
 

ui/admin/app/templates/scopes/scope/roles/role/scopes.hbs

@@ -25,7 +25,7 @@
       {{t 'resources.role.title'}}
       <DocLink @doc='role' />
     </Hds::Text::Display>
-    <p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
       {{#if @model.role.scope.isOrg}}
         {{t 'resources.role.scope.description.org'}}
       {{else if @model.role.scope.isProject}}
@@ -33,7 +33,7 @@
       {{else}}
         {{t 'resources.role.scope.description.global'}}
       {{/if}}
-    </p>
+    </Hds::Text::Body>
     <Hds::Copy::Snippet @textToCopy={{@model.role.id}} @color='secondary' />
   </page.header>
 

ui/admin/app/templates/scopes/scope/scopes/index.hbs

@@ -21,7 +21,9 @@
         <DocLink @doc='org' />
       </Hds::Text::Display>
       {{#if @model.doScopesExist}}
-        <p>{{t 'resources.org.description'}}</p>
+        <Hds::Text::Body @tag='p' @size='300' class='p'>
+          {{t 'resources.org.description'}}
+        </Hds::Text::Body>
       {{/if}}
     {{else if @model.currentScope.isOrg}}
       <Hds::Text::Display
@@ -34,7 +36,9 @@
         <DocLink @doc='project' />
       </Hds::Text::Display>
       {{#if @model.doScopesExist}}
-        <p>{{t 'resources.project.description'}}</p>
+        <Hds::Text::Body @tag='p' @size='300' class='p'>
+          {{t 'resources.project.description'}}
+        </Hds::Text::Body>
       {{/if}}
     {{/if}}
   </page.header>

ui/admin/app/templates/scopes/scope/scopes/new.hbs

@@ -33,7 +33,9 @@
         {{t 'resources.org.titles.new'}}
         <DocLink @doc='org.new' />
       </Hds::Text::Display>
-      <p>{{t 'resources.org.description'}}</p>
+      <Hds::Text::Body @tag='p' @size='300' class='p'>
+        {{t 'resources.org.description'}}
+      </Hds::Text::Body>
     {{else if @model.isProject}}
       <Hds::Text::Display
         @tag='h2'
@@ -44,7 +46,9 @@
         {{t 'resources.project.titles.new'}}
         <DocLink @doc='project.new' />
       </Hds::Text::Display>
-      <p>{{t 'resources.project.description'}}</p>
+      <Hds::Text::Body @tag='p' @size='300' class='p'>
+        {{t 'resources.project.description'}}
+      </Hds::Text::Body>
     {{/if}}
   </page.header>
 

ui/admin/app/templates/scopes/scope/session-recordings/index.hbs

@@ -17,7 +17,9 @@
     >{{t 'resources.session-recording.title_plural'}}
       <DocLink @doc='session-recording' />
     </Hds::Text::Display>
-    <p>{{t 'resources.session-recording.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.session-recording.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body class='search-filtering'>

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs

@@ -83,13 +83,13 @@
               as |connection|
             }}
               <div class='channels-by-connection-connection-header'>
-                <p class='hds-typography-display-300 hds-font-weight-semibold'>
+                <Hds::Text::Display @size='300' @weight='semibold'>
                   {{reverse-indexed-display-name
                     'resources.session-recording.connection.title_index'
                     @model.sessionRecording.connection_recordings
                     connection
                   }}
-                </p>
+                </Hds::Text::Display>
                 <Hds::Copy::Snippet
                   @textToCopy={{connection.id}}
                   @color='secondary'

ui/admin/app/templates/scopes/scope/sessions/index.hbs

@@ -19,7 +19,9 @@
       {{t 'resources.session.title_plural'}}
       <DocLink @doc='session' />
     </Hds::Text::Display>
-    <p>{{t 'resources.session.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.session.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body class='search-filtering'>

ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs

@@ -18,7 +18,9 @@
       {{t 'resources.storage-bucket.title_plural'}}
       <DocLink @doc='storage-bucket' />
     </Hds::Text::Display>
-    <p>{{t 'resources.storage-bucket.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.storage-bucket.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.actions>
@@ -59,7 +61,9 @@
                 {{B.data.displayName}}
               {{/if}}
               {{#if B.data.description}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               {{/if}}
             </B.Td>
             <B.Td>

ui/admin/app/templates/scopes/scope/targets/index.hbs

@@ -19,7 +19,9 @@
       <DocLink @doc='target' />
     </Hds::Text::Display>
     {{#if @model.doTargetsExist}}
-      <p>{{t 'resources.target.description'}}</p>
+      <Hds::Text::Body @tag='p' @size='300' class='p'>
+        {{t 'resources.target.description'}}
+      </Hds::Text::Body>
     {{/if}}
   </page.header>
 
@@ -94,7 +96,9 @@
                   {{else}}
                     {{B.data.displayName}}
                   {{/if}}
-                  <p>{{B.data.description}}</p>
+                  <Hds::Text::Body @tag='p' class='p'>
+                    {{B.data.description}}
+                  </Hds::Text::Body>
                 </B.Td>
                 <B.Td>
                   {{#if B.data.type}}
@@ -134,7 +138,9 @@
                     {{else}}
                       {{B.data.displayName}}
                     {{/if}}
-                    <p>{{B.data.description}}</p>
+                    <Hds::Text::Body @tag='p' class='p'>
+                      {{B.data.description}}
+                    </Hds::Text::Body>
                   </B.Td>
                   <B.Td>
                     {{#if B.data.type}}

ui/admin/app/templates/scopes/scope/targets/new.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.target.titles.new'}}
       <DocLink @doc='target.new' />
     </Hds::Text::Display>
-    <p>{{t 'resources.target.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.target.description'}}
+    </Hds::Text::Body>
   </page.header>
   <page.body>
     <Form::Target

ui/admin/app/templates/scopes/scope/targets/target/add-brokered-credential-sources.hbs

@@ -24,9 +24,11 @@
     >
       {{t 'resources.target.brokered-credential-source.messages.add.title'}}
     </Hds::Text::Display>
-    <p>{{t
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t
         'resources.target.brokered-credential-source.messages.add.description'
-      }}</p>
+      }}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/targets/target/add-host-sources.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.target.host-source.messages.add.title'}}
       <DocLink @doc='target.add-host-sources' />
     </Hds::Text::Display>
-    <p>{{t 'resources.target.host-source.messages.add.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.target.host-source.messages.add.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/targets/target/add-injected-application-credential-sources.hbs

@@ -29,9 +29,11 @@
         'resources.target.injected-application-credential-source.messages.add.title'
       }}
     </Hds::Text::Display>
-    <p>{{t
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t
         'resources.target.injected-application-credential-source.messages.add.description'
-      }}</p>
+      }}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/targets/target/brokered-credential-sources.hbs

@@ -66,7 +66,9 @@
                 {{/if}}
               {{/if}}
 
-              <p>{{B.data.description}}</p>
+              <Hds::Text::Body @tag='p' class='p'>
+                {{B.data.description}}
+              </Hds::Text::Body>
             </B.Td>
             <B.Td>
               <CredSourceTypeBadge @model={{B.data}} />

ui/admin/app/templates/scopes/scope/targets/target/create-alias.hbs

@@ -24,7 +24,9 @@
       {{t 'resources.alias.titles.new'}}
       <DocLink @doc='alias' />
     </Hds::Text::Display>
-    <p>{{t 'resources.alias.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.alias.description'}}
+    </Hds::Text::Body>
 
   </page.header>
   <page.body>

ui/admin/app/templates/scopes/scope/targets/target/edit-egress-worker-filter.hbs

@@ -24,9 +24,9 @@
       {{t 'resources.target.workers.edit-egress-worker-filter.title'}}
       <DocLink @doc='worker-filters-format' />
     </Hds::Text::Display>
-    <p>{{t
-        'resources.target.workers.edit-egress-worker-filter.description'
-      }}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.target.workers.edit-egress-worker-filter.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body class='target-workers'>

ui/admin/app/templates/scopes/scope/targets/target/edit-ingress-worker-filter.hbs

@@ -25,9 +25,9 @@
       {{t 'resources.target.workers.edit-ingress-worker-filter.title'}}
       <DocLink @doc='worker-filters-format' />
     </Hds::Text::Display>
-    <p>{{t
-        'resources.target.workers.edit-ingress-worker-filter.description'
-      }}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.target.workers.edit-ingress-worker-filter.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body class='target-workers'>

ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs

@@ -56,7 +56,9 @@
               {{else}}
                 {{B.data.model.displayName}}
               {{/if}}
-              <p>{{B.data.model.description}}</p>
+              <Hds::Text::Body @tag='p' class='p'>
+                {{B.data.description}}
+              </Hds::Text::Body>
             </B.Td>
             <B.Td>
               <HostCatalogTypeBadge @model={{B.data.model}} />

ui/admin/app/templates/scopes/scope/targets/target/index.hbs

@@ -38,9 +38,9 @@
             <Hds::Text::Display @tag='h3'>
               {{t 'resources.alias.title_plural'}}
             </Hds::Text::Display>
-            <p class='description'>
+            <Hds::Text::Body @tag='p' @color='faint' class='p'>
               {{t 'resources.alias.form.sidebar.help'}}
-            </p>
+            </Hds::Text::Body>
             {{#each this.aliases as |alias|}}
               <LinkListPanel as |P|>
                 <P.Item
@@ -96,9 +96,9 @@
               <Hds::Text::Display @tag='h3'>
                 {{t 'resources.alias.title_plural'}}
               </Hds::Text::Display>
-              <p class='description'>
+              <Hds::Text::Body @tag='p' @color='faint' class='p'>
                 {{t 'resources.alias.form.sidebar.help'}}
-              </p>
+              </Hds::Text::Body>
 
               <Hds::Button
                 @icon='plus'
@@ -114,9 +114,9 @@
             <Hds::Text::Display @tag='h3'>
               {{t 'resources.target.form.sidebar.label'}}
             </Hds::Text::Display>
-            <p class='description'>
+            <Hds::Text::Body @tag='p' @color='faint' class='p'>
               {{t 'resources.target.form.sidebar.help'}}
-            </p>
+            </Hds::Text::Body>
             {{#if @model.enable_session_recording}}
               {{#if this.storageBucket.isUnknown}}
                 <LinkListPanel as |P|>

ui/admin/app/templates/scopes/scope/targets/target/injected-application-credential-sources.hbs

@@ -70,7 +70,9 @@
                 {{/if}}
               {{/if}}
 
-              <p>{{B.data.description}}</p>
+              <Hds::Text::Body @tag='p' class='p'>
+                {{B.data.description}}
+              </Hds::Text::Body>
             </B.Td>
             <B.Td>
               <CredSourceTypeBadge @model={{B.data}} />

ui/admin/app/templates/scopes/scope/targets/target/manage-alias.hbs

@@ -22,7 +22,9 @@
       {{t 'resources.alias.title'}}
       <DocLink @doc='alias' />
     </Hds::Text::Display>
-    <p>{{t 'resources.alias.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.alias.description'}}
+    </Hds::Text::Body>
     <Hds::Copy::Snippet @color='secondary' @textToCopy={{@model.id}} />
   </page.header>
   <page.navigation>

ui/admin/app/templates/scopes/scope/users/index.hbs

@@ -20,7 +20,9 @@
       <DocLink @doc='user' />
     </Hds::Text::Display>
     {{#if @model.doUsersExist}}
-      <p>{{t 'resources.user.description'}}</p>
+      <Hds::Text::Body @tag='p' @size='300' class='p'>
+        {{t 'resources.user.description'}}
+      </Hds::Text::Body>
     {{/if}}
   </page.header>
 
@@ -69,7 +71,9 @@
                 {{#if B.data.accountName}}
                   <br /><Hds::Badge @text={{B.data.accountName}} />
                 {{/if}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               </B.Td>
               <B.Td>
                 <Hds::Copy::Snippet

ui/admin/app/templates/scopes/scope/users/new.hbs

@@ -25,7 +25,9 @@
       {{t 'resources.user.titles.new'}}
       <DocLink @doc='user' />
     </Hds::Text::Display>
-    <p>{{t 'resources.user.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.user.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/users/user/accounts.hbs

@@ -59,7 +59,9 @@
                 {{/if}}
               </Hds::Text::Body>
 
-              <p>{{B.data.description}}</p>
+              <Hds::Text::Body @tag='p' class='p'>
+                {{B.data.description}}
+              </Hds::Text::Body>
             </B.Td>
             <B.Td>
               <Hds::Badge

ui/admin/app/templates/scopes/scope/users/user/add-accounts.hbs

@@ -22,7 +22,9 @@
       @weight='bold'
       class='header-spacing'
     >{{t 'resources.user.messages.add-accounts.title'}}</Hds::Text::Display>
-    <p>{{t 'resources.user.messages.add-accounts.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.user.messages.add-accounts.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body>

ui/admin/app/templates/scopes/scope/workers/index.hbs

@@ -121,7 +121,9 @@
                 {{B.data.displayName}}
               {{/if}}
               {{#if B.data.description}}
-                <p>{{B.data.description}}</p>
+                <Hds::Text::Body @tag='p' class='p'>
+                  {{B.data.description}}
+                </Hds::Text::Body>
               {{/if}}
             </B.Td>
             <B.Td>

ui/desktop/app/components/branded-card/index.hbs

@@ -9,6 +9,8 @@
     @size='500'
     class='branded-card-title'
   >{{@title}}</Hds::Text::Display>
-  <p class='branded-card-description'>{{@description}}</p>
+  <Hds::Text::Body @tag='p' @size='300' class='branded-card-description'>
+    {{@description}}
+  </Hds::Text::Body>
   {{yield}}
 </div>

ui/desktop/app/components/target/host-modal/index.hbs

@@ -24,15 +24,13 @@
                   @size='small'
                 />
                 <div class='host-info'>
-                  <p
-                    class='hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary'
-                  >
+                  <Hds::Text::Body @tag='p' @weight='semibold' @color='primary'>
                     {{host.displayName}}
-                  </p>
+                  </Hds::Text::Body>
                   {{#if host.isStatic}}
-                    <p class='hds-typography-body-100 hds-foreground-faint'>
+                    <Hds::Text::Body @tag='p' @size='100' @color='faint'>
                       {{host.address}}
-                    </p>
+                    </Hds::Text::Body>
                   {{/if}}
                   {{#if host.isPlugin}}
                     {{#if host.isUnknown}}
@@ -47,9 +45,9 @@
                     {{/if}}
                   {{/if}}
                   {{#if host.description}}
-                    <p class='hds-typography-body-100 hds-foreground-faint'>
+                    <Hds::Text::Body @tag='p' @size='100' @color='faint'>
                       {{host.description}}
-                    </p>
+                    </Hds::Text::Body>
                   {{/if}}
                 </div>
               </div>

ui/desktop/app/templates/scopes/scope/authenticate.hbs

@@ -62,14 +62,14 @@
           </Hds::ApplicationState>
         </Rose::Layout::Centered>
       {{/if}}
-      <p class='change-origin'>
+      <Hds::Text::Body @tag='p' class='change-origin'>
         {{t 'cluster-url.connected-to'}}:
         <code>{{this.clusterUrl}}</code>
         <br />
         <LinkTo @route='cluster-url'>
           {{t 'actions.change-cluster-url'}}
         </LinkTo>
-      </p>
+      </Hds::Text::Body>
     </BrandedCard>
   {{/if}}
 </main>

ui/desktop/app/templates/scopes/scope/projects/sessions.hbs

@@ -14,7 +14,9 @@
       {{t 'resources.session.title_plural'}}
       <DocLink @doc='sessions' />
     </Hds::Text::Display>
-    <p>{{t 'resources.session.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.session.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body class='search-filtering'>

ui/desktop/app/templates/scopes/scope/projects/targets.hbs

@@ -16,7 +16,9 @@
       {{t 'resources.target.title_plural'}}
       <DocLink @doc='targets' />
     </Hds::Text::Display>
-    <p>{{t 'resources.target.description'}}</p>
+    <Hds::Text::Body @tag='p' @size='300' class='p'>
+      {{t 'resources.target.description'}}
+    </Hds::Text::Body>
   </page.header>
 
   <page.body class='search-filtering'>

ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs

@@ -109,7 +109,9 @@
               {{B.data.displayName}}
             {{/if}}
             {{#if B.data.description}}
-              <p>{{B.data.description}}</p>
+              <Hds::Text::Body @tag='p' class='p'>
+                {{B.data.description}}
+              </Hds::Text::Body>
             {{/if}}
           </Hds::Text::Body>
         </B.Td>