@ember-eui/core 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### Master
 
+### 1.6.0
+🚀 Enhancements
+`@ember-eui/core`
+- `<EuiStat/>` component!
 ### 1.5.0
 🚀 Enhancements
 `@ember-eui/validated-form`

package/addon/components/eui-markdown-format/index.hbs

@@ -1,3 +1,4 @@
+{{! This hbs was inspired by https://github.com/ampatspell/ember-cli-remark-static/blob/v3.0.5/addon/components/remark.hbs }}
 <div class="euiMarkdownFormat">
   {{this.result.element}}
   {{#each this.result.components as |CompNode|}}
@@ -10,4 +11,4 @@
       {{/let}}
     {{/in-element}}
   {{/each}}
-</div>
+</div>

package/addon/components/eui-stat/description/index.hbs

@@ -0,0 +1,16 @@
+{{#if @descriptionElement}}
+  {{#let (element @descriptionElement) as |DescriptionElement|}}
+    <EuiText class="euiStat__description" @size="s">
+      <DescriptionElement aria-hidden="true">
+        {{yield}}
+      </DescriptionElement>
+    </EuiText>
+  {{/let}}
+
+{{else}}
+  <EuiText class="euiStat__description" @size="s">
+    <p aria-hidden="true">
+      {{yield}}
+    </p>
+  </EuiText>
+{{/if}}

package/addon/components/eui-stat/index.hbs

@@ -0,0 +1,82 @@
+{{#let
+  (class-names
+    textAlign=(arg-or-default @textAlign "left") componentName="EuiStat"
+  )
+  (class-names
+    "euiStat__title"
+    (if @isLoading "euiStat__title-isLoading")
+    color=(arg-or-default @titleColor "default")
+    addBase=false
+    componentName="EuiStat"
+  )
+  (arg-or-default @reverse false)
+  (arg-or-default @titleSize "l")
+  as |classes titleClasses reverse titleSize|
+}}
+  <div class={{classes}} ...attributes>
+    {{#if reverse}}
+      <EuiStat::Title
+        class={{titleClasses}}
+        @titleElement={{@titleElement}}
+        @titleSize={{titleSize}}
+				@isColorClass={{this.isColorClass}}
+      >
+        {{#if @isLoading}}
+          --
+        {{else}}
+          {{#if (has-block "title")}}
+            {{yield to="title"}}
+          {{else}}
+            {{@title}}
+          {{/if}}
+        {{/if}}
+      </EuiStat::Title>
+      <EuiStat::Description
+        @descriptionElement={{@descriptionElement}}
+      >
+        {{#if (has-block "description")}}
+          {{yield to="description"}}
+        {{else}}
+          {{@description}}
+        {{/if}}
+      </EuiStat::Description>
+    {{else}}
+      <EuiStat::Description
+        @descriptionElement={{@descriptionElement}}
+      >
+        {{#if (has-block "description")}}
+          {{yield to="description"}}
+        {{else}}
+          {{@description}}
+        {{/if}}
+      </EuiStat::Description>
+      <EuiStat::Title
+        class={{titleClasses}}
+        @titleElement={{@titleElement}}
+				@titleSize={{titleSize}}
+				@isColorClass={{this.isColorClass}}
+      >
+        {{#if @isLoading}}
+          --
+        {{else}}
+          {{#if (has-block "title")}}
+            {{yield to="title"}}
+          {{else}}
+            {{@title}}
+          {{/if}}
+        {{/if}}
+      </EuiStat::Title>
+    {{/if}}
+    {{#if this.screenReader}}
+      <p {{screen-reader-only}}>
+        {{#if reverse}}
+          {{@title}}
+          {{@description}}
+        {{else}}
+          {{@description}}
+          {{@title}}
+        {{/if}}
+      </p>
+    {{/if}}
+  </div>
+{{/let}}

package/addon/components/eui-stat/index.ts

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { colorMapping } from '../../utils/css-mappings/eui-stat';
+import { sizeMapping } from '../../utils/css-mappings/eui-title';
+import { keysOf } from '../common';
+
+type EuiTitleSize = keyof typeof sizeMapping;
+
+export const COLORS = keysOf(colorMapping);
+
+export const isColorClass = (
+  input: string
+): input is keyof typeof colorMapping => {
+  return colorMapping.hasOwnProperty(input);
+};
+
+type StatArgs = {
+  /**
+   * The color of the title text
+   */
+  titleColor?: keyof typeof colorMapping | string;
+
+  /**
+   * Size of the title. See EuiTitle for options ('s', 'm', 'l'... etc)
+   */
+  titleSize?: EuiTitleSize;
+
+  title?: string | Component;
+  description?: string | Component;
+};
+
+export default class EuiStart extends Component<StatArgs> {
+  get isColorClass() {
+    if (this.args.titleColor) {
+      return isColorClass(this.args.titleColor);
+    }
+    return false;
+  }
+
+  get useScreenReader() {
+    return (
+      typeof this.args.title === 'string' &&
+      typeof this.args.description === 'string'
+    );
+  }
+}

package/addon/components/eui-stat/title/index.hbs

@@ -0,0 +1,18 @@
+{{#if @titleElement}}
+  {{#let (element @titleElement) as |TitleElement|}}
+    <EuiTitle @size={{@titleSize}} ...attributes>
+      <TitleElement
+        aria-hidden="true"
+        {{style (if @isColorClass (hash color=@titleColor))}}
+      >
+        {{yield}}
+      </TitleElement>
+    </EuiTitle>
+  {{/let}}
+{{else}}
+  <EuiTitle @size={{@titleSize}} ...attributes>
+    <p aria-hidden="true" {{style (if @isColorClass (hash color=@titleColor))}}>
+      {{yield}}
+    </p>
+  </EuiTitle>
+{{/if}}

package/addon/helpers/class-names.ts

@@ -40,8 +40,12 @@ interface Options extends IObjectKeys {
  *
  * @param classes - List of classes that will be joined
  */
-export function classNames(classNames: string[] = [], options: Options): string {
+export function classNames(
+  classNames: string[] = [],
+  options: Options & { addBase: boolean }
+): string {
   let { componentName, ...rest } = options;
+  let includeBase = options.addBase !== false;
   let str = `${classNames.join(' ')}`;
   if (options.componentName) {
     assert(
@@ -49,7 +53,9 @@ export function classNames(classNames: string[] = [], options: Options): string
       cssMappings[options.componentName] !== undefined
     );
     const component = cssMappings[options.componentName];
-    str = `${str} ${component.base}`;
+    if (includeBase) {
+      str = `${str} ${component.base}`;
+    }
 
     for (let key in rest) {
       if (component.properties[key] && component.properties[key][rest[key]]) {

package/addon/utils/css-mappings/eui-stat.ts

@@ -0,0 +1,26 @@
+export const baseClass = 'euiStat';
+
+export const textAlignMapping = {
+  left: `${baseClass}--leftAligned`,
+  center: `${baseClass}--centerAligned`,
+  right: `${baseClass}--rightAligned`
+};
+
+export const colorMapping = {
+  default: '',
+  subdued: `${baseClass}__title--subdued`,
+  primary: `${baseClass}__title--primary`,
+  success: `${baseClass}__title--success`,
+  danger: `${baseClass}__title--danger`,
+  accent: `${baseClass}__title--accent`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    textAlign: textAlignMapping,
+    color: colorMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/index.ts

@@ -53,8 +53,10 @@ import EuiToolTip from './eui-tool-tip';
 import EuiToast from './eui-toast';
 import EuiGlobalToastList from './eui-global-toast-list';
 import EuiCodeBlockImpl from './eui-code-block-impl';
+import EuiStat from './eui-stat';
 
 const mapping: Mapping = {
+  EuiStat,
   EuiCodeBlockImpl,
   EuiAccordion,
   EuiIcon,

package/addon/utils/markdown/plugins/to-dom.ts

@@ -1,3 +1,7 @@
+/*
+This util was extracted from https://github.com/ampatspell/ember-cli-remark-static/blob/v3.0.5/addon/util/to-dom.js
+*/
+
 import { assert } from '@ember/debug';
 import { RehypeNode } from '../markdown-types';
 

package/app/components/eui-stat/description/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-stat/description';

package/app/components/eui-stat/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-stat';

package/app/components/eui-stat/title/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-stat/title';

package/docs/display/stat-demo/demo1.md

@@ -0,0 +1,131 @@
+---
+order: 1
+---
+# Demo
+
+```hbs template
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat @title='7,600 mm' @description='Total people' />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+<EuiSpacer />
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat
+        @title='22,123'
+        @description='Total people'
+        @titleColor='primary'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='22,123'
+        @description='Total people'
+        @titleColor='accent'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='22,123'
+        @description='Total people'
+        @titleColor='danger'
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+
+<EuiSpacer />
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat
+        @title='22,123'
+        @description='Total people'
+        @isLoading={{this.isLoading}}
+        @titleColor='primary'
+      />
+      <EuiSpacer />
+      <EuiSwitch
+        @label='Show as loading'
+        @checked={{this.isLoading}}
+        @onChange={{pick 'target.checked' (set this 'isLoading')}}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+<EuiSpacer />
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='8,888'
+          @description='Total widgets'
+          @textAlign='right'
+          @isLoading={{this.isLoading}}
+        >
+          <EuiIcon @type='empty' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='2,000'
+          @description='Pending widgets'
+          @titleColor='accent'
+          @textAlign='right'
+          @isLoading={{this.Loading}}
+        >
+          <EuiIcon @type='clock' @color='accent' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='6,800'
+          @description='Success widgets'
+          @titleColor='success'
+          @textAlign='right'
+          @isLoading={{this.isLoading}}
+        >
+          <EuiIcon @type='check' @color='success' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='88'
+          @description='Error widgets'
+          @titleColor='danger'
+          @textAlign='right'
+          @isLoading={{this.isLoading}}
+        >
+          <EuiIcon @type='alert' @color='danger' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer />
+  <EuiSwitch
+    @label='Show as loading'
+    @checked={{this.isLoading}}
+    @onChange={{pick 'target.checked' (set this 'isLoading')}}
+  />
+</div>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class StatDemoComponent extends Component {
+  @tracked isLoading = true;
+}
+```

package/docs/display/stat-demo/demo2.md

@@ -0,0 +1,59 @@
+# Demo
+
+<EuiTitle>Title size</EuiTitle>
+<EuiText>
+title uses the <EuiCode>EuiTitle</EuiCode> component and thus uses the same sizing property
+values (applied via the titleSize property). Although all EuiTitle sizes are
+available, suggested sizes include <EuiCode>'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs'</EuiCode>. By
+default, the size is set to large <EuiCode>l</EuiCode>. The @description label cannot be
+re-sized via component properties.
+</EuiText>
+<EuiSpacer/>
+
+```hbs template
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat @title='1,000,000' @description='Large size' @titleSize='l' />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat @title='1,000,000' @description='Medium size' @titleSize='m' />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat @title='1,000,000' @description='Small size' @titleSize='s' />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat
+        @title='1,000,000'
+        @description='Extra small size'
+        @titleSize='xs'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='1,000,000'
+        @description='Extra extra small size'
+        @titleSize='xxs'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='1,000,000'
+        @description='Extra extra extra small size'
+        @titleSize='xxxs'
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class StatDemoComponent extends Component {
+  @tracked isLoading = true;
+}
+```

package/docs/display/stat.md

@@ -0,0 +1 @@
+# Stat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -154,5 +154,5 @@
   "volta": {
     "node": "12.22.1"
   },
-  "gitHead": "51aac7b1e346dcd59cf60693be8df778c9020237"
+  "gitHead": "da091fff2aaf81d6988bc7c2ef11999764750d8b"
 }