@ember-eui/core 1.3.4 → 1.6.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ### Master
 
+### 1.6.0
+🚀 Enhancements
+`@ember-eui/core`
+- `<EuiStat/>` component!
+### 1.5.0
+🚀 Enhancements
+`@ember-eui/validated-form`
+- Allow providing an markdown-editor componet for easier composability
+
+### 1.4.0
+🚀 Enhancements
+- Easier extending of processing plugins, add demo
+
+### 1.3.5
+🐛 Bug / Fixes
+- Urls for markdown editor icons
+
 ### 1.3.4
 🐛 Bug / Fixes
 - Fix docs related to ember-svg-jar and netlify demo

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

@@ -29,7 +29,7 @@ type IconColor = string | NamedColor;
 
 export type IconSize = keyof typeof sizeToClassNameMap;
 
-// const SVG_PREI : string | undefined = config['ember-eui'].svgPrefixPath || 'svg/assets';
+// const SVG_PREI : string | undefined = config['ember-eui'].svgPath || 'svg/assets';
 
 export type EuiIconArgs = CommonArgs & {
   /**

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

@@ -56,6 +56,7 @@
         aria-labelledby={{@ariaLabelledBy}}
         aria-describedby={{@ariaDescribedBy}}
         {{on "input" (pick "target.value" @onChange)}}
+        {{validatable-control @isInvalid}}
         ...attributes
       />
     </EuiMarkdownEditorDropZone>

package/addon/components/eui-markdown-editor-footer/index.ts

@@ -10,11 +10,11 @@ export default class EuiMarkdownEditorFooterComponent extends Component<EuiMarkd
 
   get svgPath() {
     const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg';
+    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
     return svgPath;
   }
 
   get markdownLogo() {
-    return `${this.svgPath}/markdown-logo`;
+    return `${this.svgPath}markdown-logo`;
   }
 }

package/addon/components/eui-markdown-editor-toolbar/index.ts

@@ -31,7 +31,7 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
 
   get svgPath() {
     const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg';
+    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
     return svgPath;
   }
 
@@ -55,7 +55,7 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
         label: 'Task list',
         name: 'tl',
         useSvg: true,
-        iconType: `${this.svgPath}/markdown-checkmark`
+        iconType: `${this.svgPath}markdown-checkmark`
       }
     ];
   }

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-markdown-format/index.ts

@@ -1,19 +1,18 @@
 import Component from '@glimmer/component';
-import type MarkdownActions from '../../utils/markdown/markdown-actions';
 import {
   defaultParsingPlugins,
   defaultProcessingPlugins
 } from '../../utils/markdown/plugins/markdown-default-plugins';
 import { cached } from '@glimmer/tracking';
-import unified from 'unified';
+import unified, { Processor } from 'unified';
 import { toDOM } from '../../utils/markdown/plugins/to-dom';
 import type { RehypeNode } from '../../utils/markdown/markdown-types';
+import type EuiMarkdownEditorComponent from '../eui-markdown-editor';
 
 export interface EuiMarkdownEditorToolbarArgs {
   parsingPluginList?: typeof defaultParsingPlugins;
   processingPluginList?: typeof defaultProcessingPlugins;
-  viewMode?: string;
-  markdownActions: MarkdownActions;
+  replaceNode?: EuiMarkdownEditorComponent['replaceNode'];
   value: string;
 }
 
@@ -28,7 +27,17 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
 
   @cached
   get processor() {
-    return unified().use(this.parsingPluginList).use(this.processingPluginList);
+    const Compiler = (tree: any) => {
+      return tree;
+    };
+
+    function identityCompiler(this: Processor) {
+      this.Compiler = Compiler;
+    }
+    return unified()
+      .use(this.parsingPluginList)
+      .use(this.processingPluginList)
+      .use(identityCompiler);
   }
 
   @cached

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/markdown-default-plugins.ts

@@ -34,12 +34,6 @@ import {
   Settings
 } from 'unified';
 import remark2Rehype from 'remark-rehype';
-import { RehypeNode } from '../markdown-types';
-// import * as MarkdownTooltip from './markdown_tooltip';
-// import * as MarkdownCheckbox from './markdown_checkbox';
-// import { markdownLinkValidator } from './markdown_link_validator';
-// import { EuiLink } from '../../link';
-// import { EuiCodeBlock, EuiCode } from '../../code';
 import markdown from 'remark-parse';
 import emoji from 'remark-emoji';
 import all from 'mdast-util-to-hast/lib/all';
@@ -71,29 +65,12 @@ const unknownHandler: Handler = (h, node) => {
 
 export const defaultParsingPlugins = getDefaultEuiMarkdownParsingPlugins();
 
-class Compiler {
-  tree: RehypeNode | null = null;
-  constructor(tree: RehypeNode) {
-    this.tree = tree;
-  }
-
-  compile() {
-    return this.tree;
-  }
-}
-
-function compiler() {
-  //@ts-expect-error
-  this.Compiler = Compiler;
-}
-
 export const getDefaultEuiMarkdownProcessingPlugins = (): [
   [typeof remark2Rehype, Record<string, unknown>],
   ...PluggableList // any additional are generic
 ] => [
   [remark2Rehype, { allowDangerousHtml: true, unknownHandler }],
-  [MarkdownAddComponents, {}],
-  [compiler]
+  [MarkdownAddComponents, {}]
 ];
 
 export const defaultProcessingPlugins =

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/app/utils/markdown/plugins/markdown-add-components.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/utils/markdown/plugins/markdown-add-components';

package/app/utils/markdown/plugins/markdown-default-plugins.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/utils/markdown/plugins/markdown-default-plugins';

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/docs/editors/markdown-editor/base-editor-demo/demo1.md

@@ -8,6 +8,7 @@ order: 1
 <EuiMarkdownEditor
   @value={{this.value}}
   @onChange={{set this 'value'}}
+  @processingPluginList={{this.processingPlugins}}
 />
 ```
 
@@ -15,8 +16,31 @@ order: 1
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { visit } from '@ember-eui/core/utils/markdown/plugins/markdown-add-components';
+import { defaultProcessingPlugins } from '@ember-eui/core/utils/markdown/plugins/markdown-default-plugins';
+
+
+/*
+ Quick example how you can extend plugins, this plugin adds _blank to `a` elements
+*/
+function TargetBlankProcessingPlugin() {
+  return (tree) => {
+    visit(tree, (node) => {
+      if (node.type === 'element' && node.tagName === 'a') {
+				node.properties.target = '_blank';
+      }
+      return node;
+    });
+  };
+}
+
+const processingPlugins = [
+  ...defaultProcessingPlugins,
+  [TargetBlankProcessingPlugin, {}]
+];
 
 export default class EuiMarkdownEditor1 extends Component {
+  processingPlugins = processingPlugins;
   @tracked value = `## 👋 Hello there!
 
 I'm a **EuiMarkdownEditor** with:
@@ -81,6 +105,16 @@ func main() {
 
 \`\`\`
 
+----
+
+### You can also add tooltips if you want more explanation!
+
+!{tooltip[You can also add tooltips](Some helpful description)}
+
+### And links, check the demo source in how to tweak plugins!
+
+[Access Google!](https://google.com)
+
 `;
 }
 ```

package/package.json

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