forked from hashicorp/vault
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
UI/StatText Component (hashicorp#12295)
* creates stattext component * creates .scss file * creates storybook * fixes typo * fixes readme * adds changelog * finishes tests
- Loading branch information
1 parent
7dfa835
commit 98b9090
Showing
11 changed files
with
247 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
```release-note:feature | ||
ui: Creates new StatText component | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
.stat-text-container { | ||
line-height: normal; | ||
|
||
&.l, | ||
&.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; | ||
} | ||
} | ||
|
||
&.s { | ||
.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-5; | ||
font-weight: $font-weight-normal; | ||
margin-top: $spacing-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; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
/** | ||
* @module StatText | ||
* 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 - 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'; | ||
import layout from '../templates/components/stat-text'; | ||
import { setComponentTemplate } from '@ember/component'; | ||
|
||
class StatTextComponent extends Component {} | ||
|
||
export default setComponentTemplate(layout, StatTextComponent); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<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> | ||
{{/if}} | ||
<div class="stat-value">{{@value}}</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from 'core/components/stat-text'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 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>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** | ||
|
||
```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) | ||
|
||
--- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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}} | ||
@value={{value}} | ||
@size={{size}} | ||
@subText={{subText}} /> | ||
`, | ||
context: { | ||
label: text('label', 'Active Clients'), | ||
value: text('value', '4,198'), | ||
size: text('size', 'l'), | ||
subText: text('subText', 'These are your active clients'), | ||
}, | ||
}), | ||
{ notes } | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
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 | StatText', function(hooks) { | ||
setupRenderingTest(hooks); | ||
|
||
test('it renders', async function(assert) { | ||
await render(hbs`<StatText />`); | ||
|
||
assert.dom('[data-test-stat-text-container]').exists('renders element'); | ||
}); | ||
|
||
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'); | ||
|
||
await render( | ||
hbs`<StatText @label={{this.label}} @size={{this.size}} @value={{this.value}} @subText={{this.subText}}/>` | ||
); | ||
|
||
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'); | ||
}); | ||
}); |