From d88f8d31d10684936798d3524c2cc49eaf491dd5 Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Mon, 9 Aug 2021 10:43:30 -0700
Subject: [PATCH 01/17] creates stattext component

---
 .../templates/vault/cluster/metrics/index.hbs |  2 ++
 ui/lib/core/addon/components/stat-text.js     | 25 ++++++++++++++++++
 .../addon/templates/components/stat-text.hbs  |  4 +++
 ui/lib/core/app/components/stat-text.js       |  1 +
 .../integration/components/stat-text-test.js  | 26 +++++++++++++++++++
 5 files changed, 58 insertions(+)
 create mode 100644 ui/lib/core/addon/components/stat-text.js
 create mode 100644 ui/lib/core/addon/templates/components/stat-text.hbs
 create mode 100644 ui/lib/core/app/components/stat-text.js
 create mode 100644 ui/tests/integration/components/stat-text-test.js

diff --git a/ui/app/templates/vault/cluster/metrics/index.hbs b/ui/app/templates/vault/cluster/metrics/index.hbs
index a783fb0dd28e0..d793278d84df0 100644
--- a/ui/app/templates/vault/cluster/metrics/index.hbs
+++ b/ui/app/templates/vault/cluster/metrics/index.hbs
@@ -6,6 +6,8 @@
   </p.levelLeft>
 </PageHeader>
 
+<StatText @label="label" @stat="number"/>
+
 <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-pricing-metrics>
   <nav class="tabs">
     <ul>
diff --git a/ui/lib/core/addon/components/stat-text.js b/ui/lib/core/addon/components/stat-text.js
new file mode 100644
index 0000000000000..afb67e268fdc7
--- /dev/null
+++ b/ui/lib/core/addon/components/stat-text.js
@@ -0,0 +1,25 @@
+/**
+ * @module StatText
+ * StatText components are used to display a label and associated statistic below, with the option to add a description.
+ *
+ * @example
+ * ```js
+ * <StatText
+ *  @label={label}
+ *  @stat={stat}
+ *  @size={size}
+ *  @subText={subText}
+ * ```
+ * @param {string} label - Label is the name of the statistic
+ * @param {string} stat - stat is the integer passed in to be displayed
+ * @param {string} size - sizes component as large or small
+ * @param {string} [subText] - subText is optional and will display below the label
+ */
+
+import Component from '@glimmer/component';
+import layout from '../templates/components/stat-text';
+import { setComponentTemplate } from '@ember/component';
+
+class StatTextComponent extends Component {}
+
+export default setComponentTemplate(layout, StatTextComponent);
diff --git a/ui/lib/core/addon/templates/components/stat-text.hbs b/ui/lib/core/addon/templates/components/stat-text.hbs
new file mode 100644
index 0000000000000..6b01be53f6ec9
--- /dev/null
+++ b/ui/lib/core/addon/templates/components/stat-text.hbs
@@ -0,0 +1,4 @@
+<div class="selectable-card is-rounded">
+  <div class="title is-3">{{@label}}</div>
+  <div class="is-6">{{@stat}}</div>
+</div>
\ No newline at end of file
diff --git a/ui/lib/core/app/components/stat-text.js b/ui/lib/core/app/components/stat-text.js
new file mode 100644
index 0000000000000..a15c6b560fcbc
--- /dev/null
+++ b/ui/lib/core/app/components/stat-text.js
@@ -0,0 +1 @@
+export { default } from 'core/components/stat-text';
diff --git a/ui/tests/integration/components/stat-text-test.js b/ui/tests/integration/components/stat-text-test.js
new file mode 100644
index 0000000000000..adbf807b1bcce
--- /dev/null
+++ b/ui/tests/integration/components/stat-text-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | stat-text', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<StatText />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <StatText>
+        template block text
+      </StatText>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

From 8531dbee1f37e6c425eb19083e0db536f95f37e6 Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Mon, 9 Aug 2021 15:46:14 -0700
Subject: [PATCH 02/17] creates .scss file

---
 ui/app/styles/components/stat-text.scss         | 17 +++++++++++++++++
 ui/app/styles/core.scss                         |  1 +
 .../templates/vault/cluster/metrics/index.hbs   |  2 --
 ui/lib/core/addon/components/stat-text.js       |  2 ++
 .../addon/templates/components/stat-text.hbs    |  7 ++++---
 5 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 ui/app/styles/components/stat-text.scss

diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss
new file mode 100644
index 0000000000000..b212bf2863350
--- /dev/null
+++ b/ui/app/styles/components/stat-text.scss
@@ -0,0 +1,17 @@
+.stat-text {
+  .container {
+    line-height: normal;
+
+    &:hover {
+      box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
+    }
+  }
+
+  .sub-text {
+    font-weight: $font-weight-normal;
+  }
+
+  .title.is-6 {
+    margin-bottom: $spacing-xs;
+  }
+}
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index a2d5b1abafd15..cc4400750871c 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -101,6 +101,7 @@
 @import './components/shamir-progress';
 @import './components/sidebar';
 @import './components/splash-page';
+@import './components/stat-text';
 @import './components/status-menu';
 @import './components/tabs';
 @import './components/text-file';
diff --git a/ui/app/templates/vault/cluster/metrics/index.hbs b/ui/app/templates/vault/cluster/metrics/index.hbs
index d793278d84df0..a783fb0dd28e0 100644
--- a/ui/app/templates/vault/cluster/metrics/index.hbs
+++ b/ui/app/templates/vault/cluster/metrics/index.hbs
@@ -6,8 +6,6 @@
   </p.levelLeft>
 </PageHeader>
 
-<StatText @label="label" @stat="number"/>
-
 <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-pricing-metrics>
   <nav class="tabs">
     <ul>
diff --git a/ui/lib/core/addon/components/stat-text.js b/ui/lib/core/addon/components/stat-text.js
index afb67e268fdc7..455d3787ce310 100644
--- a/ui/lib/core/addon/components/stat-text.js
+++ b/ui/lib/core/addon/components/stat-text.js
@@ -4,6 +4,8 @@
  *
  * @example
  * ```js
+ *
+ * <StatText @label="label" @stat="number" @subText="I am optional subtext" />
  * <StatText
  *  @label={label}
  *  @stat={stat}
diff --git a/ui/lib/core/addon/templates/components/stat-text.hbs b/ui/lib/core/addon/templates/components/stat-text.hbs
index 6b01be53f6ec9..9c07714dd713d 100644
--- a/ui/lib/core/addon/templates/components/stat-text.hbs
+++ b/ui/lib/core/addon/templates/components/stat-text.hbs
@@ -1,4 +1,5 @@
-<div class="selectable-card is-rounded">
-  <div class="title is-3">{{@label}}</div>
-  <div class="is-6">{{@stat}}</div>
+<div class="stat-text container">
+  <div class="stat-text title is-6">{{@label}}</div>
+  <div class="stat-text sub-text">{{@label}}</div>
+  <div class="stat-text is-3">{{@stat}}</div>
 </div>
\ No newline at end of file

From fe5c60108586ada19974ca72c2601a85a3ad8dbd Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Tue, 10 Aug 2021 09:21:08 -0500
Subject: [PATCH 03/17] updates scss

---
 ui/app/styles/components/stat-text.scss           | 15 ++++++++-------
 ui/app/templates/vault/cluster/metrics/index.hbs  |  2 +-
 .../core/addon/templates/components/stat-text.hbs |  6 +++---
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss
index b212bf2863350..f626bacce2171 100644
--- a/ui/app/styles/components/stat-text.scss
+++ b/ui/app/styles/components/stat-text.scss
@@ -1,17 +1,18 @@
 .stat-text {
-  .container {
+  &.container {
     line-height: normal;
+    border: 1px solid lavender;
 
     &:hover {
       box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
     }
-  }
 
-  .sub-text {
-    font-weight: $font-weight-normal;
-  }
+    div > &.sub-text {
+      font-weight: $font-weight-normal;
+    }
 
-  .title.is-6 {
-    margin-bottom: $spacing-xs;
+    div > &.title.is-6 {
+      margin-bottom: $spacing-xs;
+    }
   }
 }
diff --git a/ui/app/templates/vault/cluster/metrics/index.hbs b/ui/app/templates/vault/cluster/metrics/index.hbs
index a783fb0dd28e0..01960d9dec225 100644
--- a/ui/app/templates/vault/cluster/metrics/index.hbs
+++ b/ui/app/templates/vault/cluster/metrics/index.hbs
@@ -5,7 +5,7 @@
     </h1>
   </p.levelLeft>
 </PageHeader>
-
+<StatText @label="Active Clients" @stat="4,198" @subText="These are your active clients"/>
 <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-pricing-metrics>
   <nav class="tabs">
     <ul>
diff --git a/ui/lib/core/addon/templates/components/stat-text.hbs b/ui/lib/core/addon/templates/components/stat-text.hbs
index 9c07714dd713d..c604a55bdcedf 100644
--- a/ui/lib/core/addon/templates/components/stat-text.hbs
+++ b/ui/lib/core/addon/templates/components/stat-text.hbs
@@ -1,5 +1,5 @@
 <div class="stat-text container">
-  <div class="stat-text title is-6">{{@label}}</div>
-  <div class="stat-text sub-text">{{@label}}</div>
-  <div class="stat-text is-3">{{@stat}}</div>
+  <div class="title is-6">{{@label}}</div>
+  <div class="sub-text">{{@subText}}</div>
+  <div class="is-3">{{@stat}}</div>
 </div>
\ No newline at end of file

From 0fa1d8f55cc43311dfee45041bfd6fce5e32d858 Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Tue, 10 Aug 2021 11:07:27 -0500
Subject: [PATCH 04/17] creats storybook

---
 .../templates/vault/cluster/metrics/index.hbs |  2 +-
 ui/lib/core/addon/components/stat-text.js     | 14 +++-------
 ui/lib/core/stories/stat-text.md              | 26 +++++++++++++++++
 ui/lib/core/stories/stat-text.stories.js      | 28 +++++++++++++++++++
 4 files changed, 59 insertions(+), 11 deletions(-)
 create mode 100644 ui/lib/core/stories/stat-text.md
 create mode 100644 ui/lib/core/stories/stat-text.stories.js

diff --git a/ui/app/templates/vault/cluster/metrics/index.hbs b/ui/app/templates/vault/cluster/metrics/index.hbs
index 01960d9dec225..a783fb0dd28e0 100644
--- a/ui/app/templates/vault/cluster/metrics/index.hbs
+++ b/ui/app/templates/vault/cluster/metrics/index.hbs
@@ -5,7 +5,7 @@
     </h1>
   </p.levelLeft>
 </PageHeader>
-<StatText @label="Active Clients" @stat="4,198" @subText="These are your active clients"/>
+
 <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-pricing-metrics>
   <nav class="tabs">
     <ul>
diff --git a/ui/lib/core/addon/components/stat-text.js b/ui/lib/core/addon/components/stat-text.js
index 455d3787ce310..bd42a433f4871 100644
--- a/ui/lib/core/addon/components/stat-text.js
+++ b/ui/lib/core/addon/components/stat-text.js
@@ -4,17 +4,11 @@
  *
  * @example
  * ```js
- *
- * <StatText @label="label" @stat="number" @subText="I am optional subtext" />
- * <StatText
- *  @label={label}
- *  @stat={stat}
- *  @size={size}
- *  @subText={subText}
+ * <StatText @label="Active Clients" @stat="4,198" @size="l" @subText="These are the active client counts"/>
  * ```
- * @param {string} label - Label is the name of the statistic
- * @param {string} stat - stat is the integer passed in to be displayed
- * @param {string} size - sizes component as large or small
+ * @param {string} label=null - the label for the statistic
+ * @param {string} stat=null - number or statistic
+ * @param {string} [size=l] - size the component as small or large, 's' or 'l'
  * @param {string} [subText] - subText is optional and will display below the label
  */
 
diff --git a/ui/lib/core/stories/stat-text.md b/ui/lib/core/stories/stat-text.md
new file mode 100644
index 0000000000000..b9824aeefcc4c
--- /dev/null
+++ b/ui/lib/core/stories/stat-text.md
@@ -0,0 +1,26 @@
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/stat-text.js. To make changes, first edit that file and run "yarn gen-story-md stat-text" to re-generate the content.-->
+
+## StatText
+StatText components are used to display a label and associated statistic below, with the option to add a description.
+
+**Params**
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | <code>string</code> | <code>null</code> | the label for the statistic |
+| stat | <code>string</code> | <code>null</code> | number or statistic |
+| [size] | <code>string</code> | <code>&quot;l&quot;</code> | size the component as small or large, 's' or 'l' |
+| [subText] | <code>string</code> |  | subText is optional and will display below the label |
+
+**Example**
+  
+```js
+<StatText @label="Active Clients" @stat="4,198" @size="l" @subText="These are the active client counts"/>
+```
+
+**See**
+
+- [Uses of StatText](https://github.com/hashicorp/vault/search?l=Handlebars&q=StatText+OR+stat-text)
+- [StatText Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/stat-text.js)
+
+---
diff --git a/ui/lib/core/stories/stat-text.stories.js b/ui/lib/core/stories/stat-text.stories.js
new file mode 100644
index 0000000000000..d9af2012bb861
--- /dev/null
+++ b/ui/lib/core/stories/stat-text.stories.js
@@ -0,0 +1,28 @@
+import hbs from 'htmlbars-inline-precompile';
+import { storiesOf } from '@storybook/ember';
+import { text, withKnobs } from '@storybook/addon-knobs';
+import notes from './stat-text.md';
+
+storiesOf('StatText', module)
+  .addParameters({ options: { showPanel: true } })
+  .addDecorator(withKnobs())
+  .add(
+    `StatText`,
+    () => ({
+      template: hbs`
+    <h5 class="title is-5">StatText Component</h5>
+    <StatText
+     @label={{label}}
+     @stat={{stat}}
+     @size={{size}}
+     @subText={{subText}} />
+    `,
+      context: {
+        label: text('label', 'Active Clients'),
+        stat: text('stat', '4,198'),
+        size: text('size', 'l'),
+        subText: text('subText', 'These are your active clients'),
+      },
+    }),
+    { notes }
+  );

From 41fd3d9f5587799cd1104483138786139648985b Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Tue, 10 Aug 2021 12:06:20 -0500
Subject: [PATCH 05/17] storybook readme updates

---
 ui/README.md | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/ui/README.md b/ui/README.md
index 050be9aca7e47..6398aba85f784 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -178,7 +178,24 @@ Note that placing a param inside brackets (e.g. `[closedLabel=More options]` ind
 
 2. Generate a new story with `ember generate story [name-of-component]`
 3. Inside the newly generated `stories` file, add at least one example of the component. If the component should be interactive, enable the [Storybook Knobs addon](https://github.com/storybooks/storybook/tree/master/addons/knobs).
-4. Generate the `notes` file for the component with `yarn gen-story-md [name-of-component] [name-of-engine-or-addon]` (e.g. `yarn gen-md alert-banner core`). This will generate markdown documentation of the component and place it at `vault/ui/stories/[name-of-component].md`. If your component is a template-only component, you will need to manually create the markdown file.
+4. Generate the `notes` file for the component with `yarn gen-story-md [name-of-component] [name-of-engine-or-addon]` (e.g. `yarn gen-md alert-banner core`). This will generate markdown documentation of the component and place it at `vault/ui/stories/[name-of-component].md`. If your component is a template-only component, you will need to manually create the markdown file. 
+
+Note: The markdown file will need to be imported in your `[component-name].stories.js` (e.g. `import notes from './[name-of-component].md'`). The `add` method will look something like this:
+````js
+  .add(
+    `MyComponent`,
+    () => ({
+      template: hbs`
+    <h5 class="title is-5">MyComponent</h5>
+    <MyComponent @param={{param}} />
+    `,
+      context: {
+        param: text('param', 'My Parameter'),
+      },
+    }),
+    { notes }
+  );
+````
 
 See the [Storybook Docs](https://storybook.js.org/docs/basics/introduction/) for more information on writing stories.
 

From 9f90be69dcb872294cd2c8a0192688f2f331fd57 Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Tue, 10 Aug 2021 12:22:36 -0500
Subject: [PATCH 06/17] storybook readme updates2

---
 ui/README.md | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/ui/README.md b/ui/README.md
index 6398aba85f784..2b24afbeda6b4 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -178,19 +178,27 @@ Note that placing a param inside brackets (e.g. `[closedLabel=More options]` ind
 
 2. Generate a new story with `ember generate story [name-of-component]`
 3. Inside the newly generated `stories` file, add at least one example of the component. If the component should be interactive, enable the [Storybook Knobs addon](https://github.com/storybooks/storybook/tree/master/addons/knobs).
-4. Generate the `notes` file for the component with `yarn gen-story-md [name-of-component] [name-of-engine-or-addon]` (e.g. `yarn gen-md alert-banner core`). This will generate markdown documentation of the component and place it at `vault/ui/stories/[name-of-component].md`. If your component is a template-only component, you will need to manually create the markdown file. 
-
-Note: The markdown file will need to be imported in your `[component-name].stories.js` (e.g. `import notes from './[name-of-component].md'`). The `add` method will look something like this:
+4. Generate the `notes` file for the component with `yarn gen-story-md [name-of-component] [name-of-engine-or-addon]` (e.g. `yarn gen-md alert-banner core`). This will generate markdown documentation of the component and place it at `vault/ui/stories/[name-of-component].md`. If your component is a template-only component, you will need to manually create the markdown file. The markdown file will need to be imported in your `[component-name].stories.js` file (e.g. `import notes from './[name-of-component].md'`).
+5. The completed `[component-name].stories.js` file should look something like this (example includes knobs):
 ````js
+import hbs from 'htmlbars-inline-precompile';
+import { storiesOf } from '@storybook/ember';
+import { text, withKnobs } from '@storybook/addon-knobs';
+import notes from './stat-text.md';
+
+storiesOf('StatText', module)
+  .addParameters({ options: { showPanel: true } })
+  .addDecorator(withKnobs())
   .add(
     `MyComponent`,
     () => ({
       template: hbs`
-    <h5 class="title is-5">MyComponent</h5>
-    <MyComponent @param={{param}} />
+      <h5 class="title is-5">My Component</h5>
+      <MyComponent @param={{param}} @anotherParam={{anotherParam}} />
     `,
       context: {
-        param: text('param', 'My Parameter'),
+        param: text('param', 'My parameter'),
+        anotherParam: boolean('anotherParam', true)
       },
     }),
     { notes }

From b638b405717fb42bf4e953b524a485aa8d87c890 Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Tue, 10 Aug 2021 12:24:24 -0500
Subject: [PATCH 07/17] fixes typo

---
 ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/README.md b/ui/README.md
index 2b24afbeda6b4..51cf55a0f94c0 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -186,7 +186,7 @@ import { storiesOf } from '@storybook/ember';
 import { text, withKnobs } from '@storybook/addon-knobs';
 import notes from './stat-text.md';
 
-storiesOf('StatText', module)
+storiesOf('MyComponent', module)
   .addParameters({ options: { showPanel: true } })
   .addDecorator(withKnobs())
   .add(

From 39d175c67c01571ddf8889893d7a75d76083a55e Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Tue, 10 Aug 2021 12:32:20 -0500
Subject: [PATCH 08/17] fixes readme

---
 ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/README.md b/ui/README.md
index 51cf55a0f94c0..7f9a1ad674e93 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -179,7 +179,7 @@ Note that placing a param inside brackets (e.g. `[closedLabel=More options]` ind
 2. Generate a new story with `ember generate story [name-of-component]`
 3. Inside the newly generated `stories` file, add at least one example of the component. If the component should be interactive, enable the [Storybook Knobs addon](https://github.com/storybooks/storybook/tree/master/addons/knobs).
 4. Generate the `notes` file for the component with `yarn gen-story-md [name-of-component] [name-of-engine-or-addon]` (e.g. `yarn gen-md alert-banner core`). This will generate markdown documentation of the component and place it at `vault/ui/stories/[name-of-component].md`. If your component is a template-only component, you will need to manually create the markdown file. The markdown file will need to be imported in your `[component-name].stories.js` file (e.g. `import notes from './[name-of-component].md'`).
-5. The completed `[component-name].stories.js` file should look something like this (example includes knobs):
+5. The completed `[component-name].stories.js` file should look something like this (with knobs):
 ````js
 import hbs from 'htmlbars-inline-precompile';
 import { storiesOf } from '@storybook/ember';

From 179e5349a4d7569cdcea05b7f3cd5ba8764176f9 Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Tue, 10 Aug 2021 13:55:08 -0500
Subject: [PATCH 09/17] finishes styling

---
 ui/app/styles/components/stat-text.scss       | 70 ++++++++++++++++---
 ui/app/styles/utils/_bulma_variables.scss     |  7 +-
 ui/lib/core/addon/components/stat-text.js     |  4 +-
 .../addon/templates/components/stat-text.hbs  | 12 ++--
 ui/lib/core/stories/stat-text.md              |  4 +-
 ui/lib/core/stories/stat-text.stories.js      |  4 +-
 6 files changed, 76 insertions(+), 25 deletions(-)

diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss
index f626bacce2171..7d64e20d9818f 100644
--- a/ui/app/styles/components/stat-text.scss
+++ b/ui/app/styles/components/stat-text.scss
@@ -1,18 +1,66 @@
-.stat-text {
-  &.container {
-    line-height: normal;
-    border: 1px solid lavender;
+.stat-text-container {
+  border: 1px solid lavender;
 
-    &:hover {
-      box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
+  &.l {
+    .stat-label {
+      font-size: $size-5;
+      font-weight: $font-weight-semibold;
+      line-height: normal;
     }
-
-    div > &.sub-text {
+    .stat-text {
+      font-size: $size-8;
       font-weight: $font-weight-normal;
+      color: $ui-gray-700;
+      line-height: normal;
     }
-
-    div > &.title.is-6 {
-      margin-bottom: $spacing-xs;
+    .stat-value {
+      font-size: $size-3;
+      font-weight: $font-weight-normal;
+      line-height: normal;
+      margin-top: $spacing-s;
+    }
+  }
+  &.m {
+    .stat-label {
+      font-size: $size-5; // which design? stays same size or decrease to 8?
+      font-weight: $font-weight-semibold;
+      line-height: normal;
+    }
+    .stat-text {
+      font-size: $size-8;
+      font-weight: $font-weight-normal;
+      color: $ui-gray-700;
+      line-height: normal;
+    }
+    .stat-value {
+      font-size: $size-5;
+      font-weight: $font-weight-normal;
+      line-height: normal;
+      margin-top: $spacing-s;
+    }
+  }
+  &.s {
+    .stat-label {
+      font-size: $size-8;
+      font-weight: $font-weight-normal;
+      color: $ui-gray-500;
+      line-height: normal;
+    }
+    .stat-text {
+      font-size: $size-8;
+      font-weight: $font-weight-normal;
+      color: $ui-gray-700;
+      line-height: normal;
+    }
+    .stat-value {
+      font-size: $size-8;
+      font-weight: $font-weight-normal;
+      color: $ui-gray-800;
+      line-height: normal;
     }
   }
 }
+
+// &:hover {
+//   box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
+// }
diff --git a/ui/app/styles/utils/_bulma_variables.scss b/ui/app/styles/utils/_bulma_variables.scss
index bc20bb541356a..ff5aa2ca503a0 100644
--- a/ui/app/styles/utils/_bulma_variables.scss
+++ b/ui/app/styles/utils/_bulma_variables.scss
@@ -28,9 +28,10 @@ $family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto'
 $family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 $family-primary: $family-sans;
 $body-size: 14px;
-$size-3: (24/14) + 0rem;
-$size-7: (13/14) + 0rem;
-$size-8: (12/14) + 0rem;
+$size-3: (24/14) + 0rem; // ~1.714rem
+$size-5: 1.25rem;
+$size-7: (13/14) + 0rem; // ~.929rem
+$size-8: (12/14) + 0rem; // ~.857rem
 $size-9: 0.75rem;
 $size-10: 0.5rem;
 $size-11: 0.25rem;
diff --git a/ui/lib/core/addon/components/stat-text.js b/ui/lib/core/addon/components/stat-text.js
index bd42a433f4871..98c0c8bca96a6 100644
--- a/ui/lib/core/addon/components/stat-text.js
+++ b/ui/lib/core/addon/components/stat-text.js
@@ -7,8 +7,8 @@
  * <StatText @label="Active Clients" @stat="4,198" @size="l" @subText="These are the active client counts"/>
  * ```
  * @param {string} label=null - the label for the statistic
- * @param {string} stat=null - number or statistic
- * @param {string} [size=l] - size the component as small or large, 's' or 'l'
+ * @param {string} value=null - value passed in, usually a number or statistic
+ * @param {string} size=null - size the component as small or large, 's', 'm' or 'l'
  * @param {string} [subText] - subText is optional and will display below the label
  */
 
diff --git a/ui/lib/core/addon/templates/components/stat-text.hbs b/ui/lib/core/addon/templates/components/stat-text.hbs
index c604a55bdcedf..70d629a7ab6c6 100644
--- a/ui/lib/core/addon/templates/components/stat-text.hbs
+++ b/ui/lib/core/addon/templates/components/stat-text.hbs
@@ -1,5 +1,7 @@
-<div class="stat-text container">
-  <div class="title is-6">{{@label}}</div>
-  <div class="sub-text">{{@subText}}</div>
-  <div class="is-3">{{@stat}}</div>
-</div>
\ No newline at end of file
+<div class={{concat "stat-text-container " @size}}>
+  <div class="stat-label">{{@label}}</div>
+  {{#if @subText}}
+    <div class="stat-text">{{@subText}}</div>
+  {{/if}}
+  <div class="stat-value">{{@value}}</div>
+</div>
diff --git a/ui/lib/core/stories/stat-text.md b/ui/lib/core/stories/stat-text.md
index b9824aeefcc4c..bb02161472f7c 100644
--- a/ui/lib/core/stories/stat-text.md
+++ b/ui/lib/core/stories/stat-text.md
@@ -8,8 +8,8 @@ StatText components are used to display a label and associated statistic below,
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
 | label | <code>string</code> | <code>null</code> | the label for the statistic |
-| stat | <code>string</code> | <code>null</code> | number or statistic |
-| [size] | <code>string</code> | <code>&quot;l&quot;</code> | size the component as small or large, 's' or 'l' |
+| value | <code>string</code> | <code>null</code> | value passed in, usually a number or statistic |
+| [size] | <code>string</code> | <code>&quot;m&quot;</code> | size the component as small or large, 's', 'm' or 'l' |
 | [subText] | <code>string</code> |  | subText is optional and will display below the label |
 
 **Example**
diff --git a/ui/lib/core/stories/stat-text.stories.js b/ui/lib/core/stories/stat-text.stories.js
index d9af2012bb861..3217838b47011 100644
--- a/ui/lib/core/stories/stat-text.stories.js
+++ b/ui/lib/core/stories/stat-text.stories.js
@@ -13,13 +13,13 @@ storiesOf('StatText', module)
     <h5 class="title is-5">StatText Component</h5>
     <StatText
      @label={{label}}
-     @stat={{stat}}
+     @value={{value}}
      @size={{size}}
      @subText={{subText}} />
     `,
       context: {
         label: text('label', 'Active Clients'),
-        stat: text('stat', '4,198'),
+        value: text('value', '4,198'),
         size: text('size', 'l'),
         subText: text('subText', 'These are your active clients'),
       },

From b49c4a209fcb8028cad9555a08ebdc91db5bffdf Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Tue, 10 Aug 2021 15:15:08 -0500
Subject: [PATCH 10/17] WIP//needs conditional for optional description

---
 ui/app/styles/components/stat-text.scss | 38 +++++++++++--------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss
index 7d64e20d9818f..1bee50c3d9e8e 100644
--- a/ui/app/styles/components/stat-text.scss
+++ b/ui/app/styles/components/stat-text.scss
@@ -1,66 +1,62 @@
+// size will change conditionally depending on whether or not a description is passed in
+// IF description then title does NOT change size
+// if no description, title gets incrementally smaller
+// there will not be a description in key value use cases
+
 .stat-text-container {
   border: 1px solid lavender;
+  line-height: normal;
 
   &.l {
-    .stat-label {
+    > .stat-label {
       font-size: $size-5;
       font-weight: $font-weight-semibold;
-      line-height: normal;
+      line-height: inherit;
     }
     .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
-      line-height: normal;
     }
     .stat-value {
       font-size: $size-3;
       font-weight: $font-weight-normal;
-      line-height: normal;
       margin-top: $spacing-s;
     }
   }
+
   &.m {
-    .stat-label {
-      font-size: $size-5; // which design? stays same size or decrease to 8?
+    > .stat-label {
+      font-size: $size-5; // which design? stays same size or decrease to 8 (~.857rem)
       font-weight: $font-weight-semibold;
-      line-height: normal;
     }
-    .stat-text {
+    > .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
-      line-height: normal;
     }
-    .stat-value {
+    > .stat-value {
       font-size: $size-5;
       font-weight: $font-weight-normal;
-      line-height: normal;
       margin-top: $spacing-s;
     }
   }
+
   &.s {
-    .stat-label {
+    > .stat-label {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-500;
-      line-height: normal;
     }
-    .stat-text {
+    > .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
-      line-height: normal;
     }
-    .stat-value {
+    > .stat-value {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-800;
-      line-height: normal;
     }
   }
 }
-
-// &:hover {
-//   box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
-// }

From 4eec322f6d12af4eb32af9b5c2bfb998ec764cbe Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Thu, 12 Aug 2021 09:11:26 -0500
Subject: [PATCH 11/17] changes sizes depending on description

---
 ui/app/styles/components/stat-text.scss       | 56 ++++++++++++++++---
 .../addon/templates/components/stat-text.hbs  |  8 +--
 2 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss
index 1bee50c3d9e8e..e336557d1c4f9 100644
--- a/ui/app/styles/components/stat-text.scss
+++ b/ui/app/styles/components/stat-text.scss
@@ -1,10 +1,4 @@
-// size will change conditionally depending on whether or not a description is passed in
-// IF description then title does NOT change size
-// if no description, title gets incrementally smaller
-// there will not be a description in key value use cases
-
 .stat-text-container {
-  border: 1px solid lavender;
   line-height: normal;
 
   &.l {
@@ -17,6 +11,7 @@
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
+      line-height: inherit;
     }
     .stat-value {
       font-size: $size-3;
@@ -25,15 +20,17 @@
     }
   }
 
-  &.m {
+  &.s {
     > .stat-label {
-      font-size: $size-5; // which design? stays same size or decrease to 8 (~.857rem)
+      font-size: $size-5;
       font-weight: $font-weight-semibold;
+      line-height: inherit;
     }
     > .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
+      line-height: inherit;
     }
     > .stat-value {
       font-size: $size-5;
@@ -42,21 +39,62 @@
     }
   }
 
-  &.s {
+  &.l-no-subText {
+    > .stat-label {
+      font-size: $size-5;
+      font-weight: $font-weight-semibold;
+      line-height: inherit;
+    }
+    .stat-text {
+      font-size: $size-8;
+      font-weight: $font-weight-normal;
+      color: $ui-gray-700;
+      line-height: inherit;
+    }
+    .stat-value {
+      font-size: $size-3;
+      font-weight: $font-weight-normal;
+      margin-top: $spacing-xxs;
+    }
+  }
+
+  &.m-no-subText {
+    > .stat-label {
+      font-size: $size-8;
+      font-weight: $font-weight-bold;
+      line-height: inherit;
+    }
+    > .stat-text {
+      font-size: $size-8;
+      font-weight: $font-weight-normal;
+      color: $ui-gray-700;
+      line-height: inherit;
+    }
+    > .stat-value {
+      font-size: $size-5;
+      font-weight: $font-weight-normal;
+      margin-top: $spacing-xxs;
+    }
+  }
+
+  &.s-no-subText {
     > .stat-label {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-500;
+      line-height: inherit;
     }
     > .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
+      line-height: inherit;
     }
     > .stat-value {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-800;
+      line-height: inherit;
     }
   }
 }
diff --git a/ui/lib/core/addon/templates/components/stat-text.hbs b/ui/lib/core/addon/templates/components/stat-text.hbs
index 70d629a7ab6c6..c638a9f27fb5c 100644
--- a/ui/lib/core/addon/templates/components/stat-text.hbs
+++ b/ui/lib/core/addon/templates/components/stat-text.hbs
@@ -1,7 +1,7 @@
-<div class={{concat "stat-text-container " @size}}>
+<div class={{concat "stat-text-container " @size (unless @subText "-no-subText")}}>
   <div class="stat-label">{{@label}}</div>
-  {{#if @subText}}
-    <div class="stat-text">{{@subText}}</div>
-  {{/if}}
+    {{#if @subText}}
+      <div class="stat-text">{{@subText}}</div>
+    {{/if}}
   <div class="stat-value">{{@value}}</div>
 </div>

From ee42ac9761dbdc474c241848ec776d8497b446fc Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Thu, 12 Aug 2021 09:43:27 -0500
Subject: [PATCH 12/17] storybook updates

---
 ui/lib/core/addon/components/stat-text.js | 10 +++++-----
 ui/lib/core/stories/stat-text.md          | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/lib/core/addon/components/stat-text.js b/ui/lib/core/addon/components/stat-text.js
index 98c0c8bca96a6..e001c643bf4fa 100644
--- a/ui/lib/core/addon/components/stat-text.js
+++ b/ui/lib/core/addon/components/stat-text.js
@@ -1,15 +1,15 @@
 /**
  * @module StatText
- * StatText components are used to display a label and associated statistic below, with the option to add a description.
+ * StatText components are used to display a label and associated value beneath, with the option to include a description.
  *
  * @example
  * ```js
  * <StatText @label="Active Clients" @stat="4,198" @size="l" @subText="These are the active client counts"/>
  * ```
- * @param {string} label=null - the label for the statistic
- * @param {string} value=null - value passed in, usually a number or statistic
- * @param {string} size=null - size the component as small or large, 's', 'm' or 'l'
- * @param {string} [subText] - subText is optional and will display below the label
+ * @param {string} label=null - The label for the statistic
+ * @param {string} value=null - Value passed in, usually a number or statistic
+ * @param {string} size=null - Sizing changes whether or not there is subtext. If there is subtext 's' and 'l' are valid sizes. If no subtext, then 'm' is also acceptable.
+ * @param {string} [subText] - SubText is optional and will display below the label
  */
 
 import Component from '@glimmer/component';
diff --git a/ui/lib/core/stories/stat-text.md b/ui/lib/core/stories/stat-text.md
index bb02161472f7c..d156bfe83516a 100644
--- a/ui/lib/core/stories/stat-text.md
+++ b/ui/lib/core/stories/stat-text.md
@@ -1,16 +1,16 @@
 <!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/stat-text.js. To make changes, first edit that file and run "yarn gen-story-md stat-text" to re-generate the content.-->
 
 ## StatText
-StatText components are used to display a label and associated statistic below, with the option to add a description.
+StatText components are used to display a label and associated value beneath, with the option to include a description.
 
 **Params**
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
-| label | <code>string</code> | <code>null</code> | the label for the statistic |
-| value | <code>string</code> | <code>null</code> | value passed in, usually a number or statistic |
-| [size] | <code>string</code> | <code>&quot;m&quot;</code> | size the component as small or large, 's', 'm' or 'l' |
-| [subText] | <code>string</code> |  | subText is optional and will display below the label |
+| label | <code>string</code> | <code>null</code> | The label for the statistic |
+| value | <code>string</code> | <code>null</code> | Value passed in, usually a number or statistic |
+| size | <code>string</code> | <code>null</code> | Sizing changes whether or not there is subtext. If there is subtext 's' and 'l' are valid sizes. If no subtext, then 'm' is also acceptable. |
+| [subText] | <code>string</code> |  | SubText is optional and will display below the label |
 
 **Example**
   

From dbcf97b2b7e45576cf9beb0e8b997bcac40811fc Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Thu, 12 Aug 2021 09:53:28 -0500
Subject: [PATCH 13/17] adds changelog

---
 changelog/12295.txt | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 changelog/12295.txt

diff --git a/changelog/12295.txt b/changelog/12295.txt
new file mode 100644
index 0000000000000..144ad0f58e02b
--- /dev/null
+++ b/changelog/12295.txt
@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Creates new StatText component
+```
\ No newline at end of file

From 29987bd5faf1ec8560b5a3b1b79cb63e6c7ebb79 Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Thu, 12 Aug 2021 10:20:28 -0500
Subject: [PATCH 14/17] finishes tests

---
 .../integration/components/stat-text-test.js  | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/ui/tests/integration/components/stat-text-test.js b/ui/tests/integration/components/stat-text-test.js
index adbf807b1bcce..f5afabfb7095c 100644
--- a/ui/tests/integration/components/stat-text-test.js
+++ b/ui/tests/integration/components/stat-text-test.js
@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
-module('Integration | Component | stat-text', function(hooks) {
+module('Integration | Component | StatText', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
@@ -13,14 +13,20 @@ module('Integration | Component | stat-text', function(hooks) {
     await render(hbs`<StatText />`);
 
     assert.equal(this.element.textContent.trim(), '');
+  });
+
+  test('it renders passed in attributes', async function(assert) {
+    this.set('label', 'A Label');
+    this.set('value', '9,999');
+    this.set('size', 'l');
+    this.set('subText', 'This is my description');
 
-    // Template block usage:
-    await render(hbs`
-      <StatText>
-        template block text
-      </StatText>
-    `);
+    await render(
+      hbs`<StatText @label={{this.label}} @size={{this.size}} @value={{this.value}} @subText={{this.subText}}/>`
+    );
 
-    assert.equal(this.element.textContent.trim(), 'template block text');
+    assert.dom('.stat-label').hasText(this.label, 'renders label');
+    assert.dom('.stat-text').hasText(this.subText, 'renders subtext');
+    assert.dom('.stat-value').hasText(this.value, 'renders value');
   });
 });

From f025ba7ab5117386b2e3bc7fd40a9803ed7d6b2d Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Thu, 12 Aug 2021 13:43:29 -0500
Subject: [PATCH 15/17] fixes inheritance"

---
 ui/app/styles/components/stat-text.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss
index e336557d1c4f9..2170de7e358f9 100644
--- a/ui/app/styles/components/stat-text.scss
+++ b/ui/app/styles/components/stat-text.scss
@@ -7,13 +7,13 @@
       font-weight: $font-weight-semibold;
       line-height: inherit;
     }
-    .stat-text {
+    > .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
       line-height: inherit;
     }
-    .stat-value {
+    > .stat-value {
       font-size: $size-3;
       font-weight: $font-weight-normal;
       margin-top: $spacing-s;
@@ -45,13 +45,13 @@
       font-weight: $font-weight-semibold;
       line-height: inherit;
     }
-    .stat-text {
+    > .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
       line-height: inherit;
     }
-    .stat-value {
+    > .stat-value {
       font-size: $size-3;
       font-weight: $font-weight-normal;
       margin-top: $spacing-xxs;

From 9c966cf3b731a697c7dbd08f5588730264959382 Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Thu, 12 Aug 2021 14:28:54 -0500
Subject: [PATCH 16/17] fixes tests and css

---
 ui/app/styles/components/stat-text.scss       | 49 +++++++++++++------
 .../addon/templates/components/stat-text.hbs  |  2 +-
 .../integration/components/stat-text-test.js  |  5 +-
 3 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss
index 2170de7e358f9..337bfc9feae4f 100644
--- a/ui/app/styles/components/stat-text.scss
+++ b/ui/app/styles/components/stat-text.scss
@@ -2,18 +2,37 @@
   line-height: normal;
 
   &.l {
-    > .stat-label {
+    .stat-label {
       font-size: $size-5;
       font-weight: $font-weight-semibold;
       line-height: inherit;
     }
-    > .stat-text {
+    .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
       line-height: inherit;
     }
-    > .stat-value {
+    .stat-value {
+      font-size: $size-3;
+      font-weight: $font-weight-normal;
+      margin-top: $spacing-s;
+    }
+  }
+  // medium styling is the same as large
+  &.m {
+    .stat-label {
+      font-size: $size-5;
+      font-weight: $font-weight-semibold;
+      line-height: inherit;
+    }
+    .stat-text {
+      font-size: $size-8;
+      font-weight: $font-weight-normal;
+      color: $ui-gray-700;
+      line-height: inherit;
+    }
+    .stat-value {
       font-size: $size-3;
       font-weight: $font-weight-normal;
       margin-top: $spacing-s;
@@ -21,18 +40,18 @@
   }
 
   &.s {
-    > .stat-label {
+    .stat-label {
       font-size: $size-5;
       font-weight: $font-weight-semibold;
       line-height: inherit;
     }
-    > .stat-text {
+    .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
       line-height: inherit;
     }
-    > .stat-value {
+    .stat-value {
       font-size: $size-5;
       font-weight: $font-weight-normal;
       margin-top: $spacing-s;
@@ -40,18 +59,18 @@
   }
 
   &.l-no-subText {
-    > .stat-label {
+    .stat-label {
       font-size: $size-5;
       font-weight: $font-weight-semibold;
       line-height: inherit;
     }
-    > .stat-text {
+    .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
       line-height: inherit;
     }
-    > .stat-value {
+    .stat-value {
       font-size: $size-3;
       font-weight: $font-weight-normal;
       margin-top: $spacing-xxs;
@@ -59,18 +78,18 @@
   }
 
   &.m-no-subText {
-    > .stat-label {
+    .stat-label {
       font-size: $size-8;
       font-weight: $font-weight-bold;
       line-height: inherit;
     }
-    > .stat-text {
+    .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
       line-height: inherit;
     }
-    > .stat-value {
+    .stat-value {
       font-size: $size-5;
       font-weight: $font-weight-normal;
       margin-top: $spacing-xxs;
@@ -78,19 +97,19 @@
   }
 
   &.s-no-subText {
-    > .stat-label {
+    .stat-label {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-500;
       line-height: inherit;
     }
-    > .stat-text {
+    .stat-text {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-700;
       line-height: inherit;
     }
-    > .stat-value {
+    .stat-value {
       font-size: $size-8;
       font-weight: $font-weight-normal;
       color: $ui-gray-800;
diff --git a/ui/lib/core/addon/templates/components/stat-text.hbs b/ui/lib/core/addon/templates/components/stat-text.hbs
index c638a9f27fb5c..9d4bb916d16d9 100644
--- a/ui/lib/core/addon/templates/components/stat-text.hbs
+++ b/ui/lib/core/addon/templates/components/stat-text.hbs
@@ -1,4 +1,4 @@
-<div class={{concat "stat-text-container " @size (unless @subText "-no-subText")}}>
+<div class={{concat "stat-text-container " @size (unless @subText "-no-subText")}} data-test-stat-text-container>
   <div class="stat-label">{{@label}}</div>
     {{#if @subText}}
       <div class="stat-text">{{@subText}}</div>
diff --git a/ui/tests/integration/components/stat-text-test.js b/ui/tests/integration/components/stat-text-test.js
index f5afabfb7095c..2c1f2bf61af72 100644
--- a/ui/tests/integration/components/stat-text-test.js
+++ b/ui/tests/integration/components/stat-text-test.js
@@ -7,12 +7,9 @@ module('Integration | Component | StatText', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
     await render(hbs`<StatText />`);
 
-    assert.equal(this.element.textContent.trim(), '');
+    assert.dom('[data-test-stat-text-container]').exists('renders element');
   });
 
   test('it renders passed in attributes', async function(assert) {

From eebaeee68528ea95044855abbb2d0f388cc5e714 Mon Sep 17 00:00:00 2001
From: Claire Bontempo <cbontempo@hashicorp.com>
Date: Mon, 16 Aug 2021 11:01:54 -0700
Subject: [PATCH 17/17] combine l & m styling

---
 ui/app/styles/components/stat-text.scss | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss
index 337bfc9feae4f..814d8a87bedb1 100644
--- a/ui/app/styles/components/stat-text.scss
+++ b/ui/app/styles/components/stat-text.scss
@@ -1,25 +1,7 @@
 .stat-text-container {
   line-height: normal;
 
-  &.l {
-    .stat-label {
-      font-size: $size-5;
-      font-weight: $font-weight-semibold;
-      line-height: inherit;
-    }
-    .stat-text {
-      font-size: $size-8;
-      font-weight: $font-weight-normal;
-      color: $ui-gray-700;
-      line-height: inherit;
-    }
-    .stat-value {
-      font-size: $size-3;
-      font-weight: $font-weight-normal;
-      margin-top: $spacing-s;
-    }
-  }
-  // medium styling is the same as large
+  &.l,
   &.m {
     .stat-label {
       font-size: $size-5;