-
Notifications
You must be signed in to change notification settings - Fork 6
/
polaris-display-text.js
60 lines (54 loc) · 1.34 KB
/
polaris-display-text.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import Component from '@ember/component';
import { computed } from '@ember/object';
import { classify } from '@ember/string';
import layout from '../templates/components/polaris-display-text';
/**
* Polaris display text component.
* See https://polaris.shopify.com/components/titles-and-text/display-text
*
* Default inline usage:
*
* {{polaris-display-text text="This is some text"}}
*
* Customised block usage (note the use of tagName instead of element - this is an ember thing):
*
* {{#polaris-display-text tagName="h1" size="extraLarge"}}
* This is some BIG text
* {{/polaris-display-text}}
*/
export default Component.extend({
tagName: 'p',
classNames: ['Polaris-DisplayText'],
classNameBindings: ['sizeClassName'],
layout,
/**
* Size of the text
*
* @property size
* @type {String}
* @default medium
* @public
*/
size: 'medium',
/**
* Content to display
*
* This component can be used in block form,
* in which case the block content will be used
* instead of `text`
*
* @property text
* @type {String}
* @default null
* @public
*/
text: null,
'data-test-display-text': true,
/**
* @private
*/
sizeClassName: computed('size', function() {
const size = this.get('size');
return `Polaris-DisplayText--size${classify(size)}`;
}).readOnly(),
});