@ember-eui/core 1.6.3 → 3.0.2

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 ### Master
 
+### 3.0.2
+`@ember-eui/core`
+🐛 Bug / Fixes
+- Fix `<EuiMarkdownEditor />` icons compatibility with ember-source < 3.27
+
+### 3.0.1
+`@ember-eui/core`
+🚀 Enhancements
+- No longer need to add icons from public icons in ember-eui/core
+
+### 3.0.0
+💥 Breaking change
+`@ember-eui/*`
+- Drops support for ember-source < v3.20.0
+- Drops support for node 10
+- Drops support for importing sass, elastic eui is migrating to emotion, so its better we just focus on that instead of sass, so we no longer dynamically import template only components for now, this could possibly be achieved later post embroider
+
+🏠 Internal
+`@ember-eui/*`
+- `ember-cli-update --to=3.28.0` on all packages
+- Update ember-cli-typescript
+- Remove some deprecations like new imports paths and helpers usage and `#with` helper
+
+### 2.0.0
+💥 Breaking change
+`@ember-eui/core`
+- Deprecate `ember-svg-jar` `hbs` strategy for now, just use stock `ember-svg-jar`
+
 ### 1.6.3
 🐛 Bug / Fixes
 `@ember-eui/core`

package/README.md

@@ -1,25 +1,18 @@
 # ember-eui
 
 This project aims to provide ember components implementing the css layer of https://elastic.github.io/eui
-
 ### Icons
 
 For icons to work you will need to:
 
 - install `ember-svg-jar`
 - add the following `ember-svg-jar` options to your `ember-cli-build.js`:
-- NOTICE: we are currently using a fork from ember-svg-jar, for the hbs strategy
-  `"ember-svg-jar": "https://github.com/betocantu93/ember-svg-jar.git#add-bundle-flag"`
 
 ```javascript
 // ember-cli-build.js
 var app = new EmberApp(defaults, {
   ...
     svgJar: {
-      strategy: ['hbs'],
-      hbs: {
-        stripPath: false,
-      },
       sourceDirs: [
         'public/assets',
         'node_modules/@elastic/eui/lib/components/icon',
@@ -30,15 +23,15 @@ var app = new EmberApp(defaults, {
 
 ```
 
-We use `ember-svg-jar` to create SVGs as TOC (Template only components) with the `hbs` strategy. For fingerprinting and such, `ember-svg-jar#add-bundle-flag` exposes an `svg-jar` service, with a `resolveAsset` callback/hook, so you can implement your own resolver, you could use for example [ember-cli-resolve-assset](https://github.com/buschtoens/ember-cli-resolve-asset).
-
 ## Compatibility
 
-- Ember.js v3.12 or above
-- Ember CLI v2.13 or above
-- Node.js v10 or above
+* Ember.js v3.20 or above
+* Ember CLI v3.20 or above
+* Node.js v12 or above
+
 
-## Installation
+Installation
+------------------------------------------------------------------------------
 
 ```
 ember install @ember-eui/core

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

@@ -67,7 +67,7 @@
     }}
   >
     <span class="euiBadge__content">
-      {{#if hasBlock}}
+      {{#if (has-block)}}
         {{#if @onClick}}
           <button
             class="euiBadge__childButton"
@@ -101,14 +101,14 @@
             class={{class-names "euiBadge__icon" @closeButtonProps.iconClasses}}
             @type={{@iconType}}
             data-selected-index={{@closeButtonProps.dataSelectedIconIndex}}
-            @size={{if hasBlock "s" "m"}}
+            @size={{if (has-block) "s" "m"}}
           />
         </button>
         {{! tempalte-lint-enable}}
       {{else}}
         <EuiIcon
           @type={{@iconType}}
-          @size={{if hasBlock "s" "m"}}
+          @size={{if (has-block) "s" "m"}}
           class="euiBadge__icon"
         />
       {{/if}}

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

@@ -21,6 +21,7 @@
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
       @useSvg={{@useSvg}}
+      @useComponent={{@useComponent}}
       @textClasses={{class-names "euiButton__text" @textClasses}}
     >
       {{yield}}
@@ -48,6 +49,7 @@
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
       @useSvg={{@useSvg}}
+      @useComponent={{@useComponent}}
       @textClasses={{class-names "euiButton__text" @textClasses}}
     >
       {{yield}}

package/addon/components/eui-button-content/index.hbs

@@ -13,6 +13,7 @@
       @type={{@iconType}}
       @size="m"
       @useSvg={{@useSvg}}
+      @useComponent={{@useComponent}}
     />
   {{/if}}
   <span class={{@textClasses}}>

package/addon/components/eui-button-empty/index.hbs

@@ -18,6 +18,7 @@
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
       @useSvg={{@useSvg}}
+      @useComponent={{@useComponent}}
       @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
     >
       {{yield}}
@@ -44,6 +45,7 @@
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
       @useSvg={{@useSvg}}
+      @useComponent={{@useComponent}}
       @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
     >
       {{yield}}

package/addon/components/eui-button-icon/index.hbs

@@ -11,6 +11,7 @@
         @type={{@iconType}}
         @size={{arg-or-default @iconSize "m"}}
         @useSvg={{@useSvg}}
+        @useComponent={{@useComponent}}
         aria-hidden="true"
       />
     {{/if}}
@@ -29,6 +30,7 @@
         @type={{@iconType}}
         @size={{@iconSize}}
         @useSvg={{@useSvg}}
+        @useComponent={{@useComponent}}
         aria-hidden="true"
       />
     {{/if}}

package/addon/components/eui-card/eui-card-select/index.hbs

@@ -17,7 +17,7 @@
   aria-checked={{@isSelected}}
   ...attributes
 >
-  {{#if hasBlock}}
+  {{#if (has-block)}}
     {{yield}}
   {{else if @isSelected}}
     Selected

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

@@ -9,7 +9,7 @@
       (if (eq @layout "horizontal") "euiCard--horizontal")
       (if (and (eq @display "plain") (not @selectable)) "euiCard--plain")
       (if @isDisabled "euiCard-isDisabled")
-      (if hasBlock "euiCard--hasChildren")
+      (if (has-block) "euiCard--hasChildren")
       (if @icon "euiCard--hasIcon" (if has-block "icon" "euiCard--hasIcon"))
       (if @betaBadgeLabel "euiCard--hasBetaBadge")
       (if

package/addon/components/eui-combo-box/create-option/index.ts

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { isHTMLSafe, htmlSafe } from '@ember/string';
+import { isHTMLSafe, htmlSafe } from '@ember/template';
 import { get } from '@ember/object';
 
 type EuiComboBoxCreateOptionArgs = {

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

@@ -1,39 +1,58 @@
-{{#if this.icon.inner}}
+{{#if @useComponent}}
   {{! has the shape of a curried component }}
-  {{component this.icon}}
-{{else}}
-  {{#if this.useImage}}
-    <img
-      src={{this.icon}}
+  {{#let (component this.icon) as |IconComponent|}}
+    {{!template-lint-disable}}
+    <IconComponent
       class={{class-names
         this.optionalColorClass
         (if this.isAppIcon "euiIcon--app")
         componentName="EuiIcon"
         size=this.size
       }}
-      alt={{if @title @title}}
-      tabIndex={{@tabIndex}}
+      role="image"
+      aria-hidden={{if this.isAriaHidden "true"}}
+      aria-label={{if @aria-label @aria-label this.titleId}}
+      aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
+      tabindex={{this.tabIndex}}
+      style={{this.optionalCustomStyles}}
       ...attributes
     />
-  {{else}}
-    <Svg
-      @name={{this.icon}}
-      @loadingSvg={{this.emptyIcon}}
+  {{/let}}
+{{else}}
+  {{#if this.useImage}}
+    <img
+      src={{this.icon}}
       class={{class-names
         this.optionalColorClass
         (if this.isAppIcon "euiIcon--app")
         componentName="EuiIcon"
         size=this.size
       }}
-      style={{this.optionalCustomStyles}}
-      tabIndex={{this.tabIndex}}
-      role="image"
-      aria-hidden={{if this.isAriaHidden true}}
-      aria-label={{if @aria-label @aria-label this.titleId}}
-      aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
-      @title={{@title}}
-      @onIconLoad={{@onIconLoad}}
+      alt={{if @title @title}}
+      tabIndex={{@tabIndex}}
       ...attributes
     />
+  {{else}}
+    <div
+      class={{class-names "euiIcon" (if this.isAppIcon "euiIcon--app")}}
+      ...attributes
+    >
+      {{svg-jar
+        this.icon
+        class=(class-names
+          this.optionalColorClass
+          (if this.isAppIcon "euiIcon--app")
+          componentName="EuiIcon"
+          addBase=false
+          size=this.size
+        )
+        role="image"
+        aria-hidden=(if this.isAriaHidden "true")
+        aria-label=(if @aria-label @aria-label this.titleId)
+        aria-labelledby=(if @aria-labelledby @aria-labelledby this.titleId)
+        tabindex=this.tabIndex
+        style=this.optionalCustomStyles
+      }}
+    </div>
   {{/if}}
 {{/if}}

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

@@ -29,8 +29,6 @@ type IconColor = string | NamedColor;
 
 export type IconSize = keyof typeof sizeToClassNameMap;
 
-// const SVG_PREI : string | undefined = config['ember-eui'].svgPath || 'svg/assets';
-
 export type EuiIconArgs = CommonArgs & {
   /**
    * `Enum` is any of the named icons listed in the docs, `string` is usually a URL to an SVG file, and `elementType` is any Ember Icon SVG component
@@ -90,6 +88,7 @@ export default class EuiIcon extends Component<EuiIconArgs> {
   }
 
   get useSvg(): boolean {
+    //@ts-ignore
     const config = getOwner(this).resolveRegistration('config:environment');
     return (
       this.args.useSvg ??
@@ -118,10 +117,7 @@ export default class EuiIcon extends Component<EuiIconArgs> {
   }
 
   getEuiIconSvgPath(type: EuiIconType): string {
-    const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/assets/';
-    const euiIcon = typeToPathMap[type].replace(/_/g, '-').toLowerCase();
-    return `${svgPath}${euiIcon}`;
+    return typeToPathMap[type].replace('tokens/', '');
   }
 
   get isAppIcon(): string | boolean {

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

@@ -1,6 +1,6 @@
 import GlimmerComponent from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { htmlSafe } from '@ember/string';
+import { htmlSafe } from '@ember/template';
 import { action } from '@ember/object';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { sizeMapping } from '../../utils/css-mappings/eui-image';

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

@@ -188,6 +188,7 @@ export default class EuiMarkdownEditorComponent extends Component<EuiMarkdownEdi
     };
 
     function identityCompiler(this: Processor) {
+      //eslint-disable-next-line
       this.Compiler = Compiler;
     }
     return unified().use(this.parsingPluginList).use(identityCompiler);

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

@@ -0,0 +1,4 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+export type EuiMarkdownEditorToolbarIconsMarkdownLogo =
+  typeof templateOnlyComponent;

package/addon/components/eui-markdown-editor-footer/icons/markdown-logo/index.hbs

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="26"
+  height="16"
+  fill="none"
+  viewBox="0 0 26 16"
+  aria-labelledby={{@titleId}}
+  ...attributes
+>
+  {{#if @title}}
+    <title id={{@titleId}}>{{@title}}</title>
+  {{/if}}
+  <path
+    d="M1.25 1.875c0-.345.28-.625.625-.625h22.25c.345 0 .625.28.625.625v12.25c0 .345-.28.625-.625.625H1.875a.625.625 0 01-.625-.625V1.875zM1.875 0C.839 0 0 .84 0 1.875v12.25C0 15.161.84 16 1.875 16h22.25C25.16 16 26 15.16 26 14.125V1.875C26 .839 25.16 0 24.125 0H1.875zM3.75 3.75v8.5h2.5V7.375l2.5 3.125 2.5-3.125v4.875h2.5v-8.5h-2.5l-2.5 3.125-2.5-3.125h-2.5zm11.875 4.375l3.75 4.125 3.75-4.125h-2.5V3.75h-2.5v4.375h-2.5z"
+  ></path>
+</svg>

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

@@ -5,6 +5,7 @@
       {{! pending implementation}}
       <EuiButtonIcon
         @iconType={{component "eui-loading-spinner"}}
+        @useComponent={{true}}
         {{! aria-label={ariaLabels.uploadingFiles} }}
       />
     {{/if}}
@@ -29,7 +30,8 @@
   </div>
   <EuiButtonIcon
     class="euiMarkdownEditorFooter__help"
-    @iconType={{this.markdownLogo}}
+    @iconType={{component "eui-markdown-editor-footer/icons/markdown-logo"}}
+    @useComponent={{true}}
     @color="text"
     @useSvg={{true}}
     {{! aria-label={ariaLabels.showMarkdownHelp} }}

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

@@ -1,20 +1,9 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { getOwner } from '@ember/application';
 
 export interface EuiMarkdownEditorFooterArgs {}
 
 export default class EuiMarkdownEditorFooterComponent extends Component<EuiMarkdownEditorFooterArgs> {
   @tracked isPopoverOpen = false;
   @tracked isShowingHelp = false;
-
-  get svgPath() {
-    const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
-    return svgPath;
-  }
-
-  get markdownLogo() {
-    return `${this.svgPath}markdown-logo`;
-  }
 }

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

@@ -0,0 +1,4 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+export type EuiMarkdownEditorToolbarIconsMarkdownCheckmark =
+  typeof templateOnlyComponent;

package/addon/components/eui-markdown-editor-toolbar/icons/markdown-checkmark/index.hbs

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  fill="none"
+  viewBox="0 0 16 16"
+  aria-labelledby={{@titleId}}
+  ...attributes
+>
+  {{#if @title}}
+    <title id={{@titleId}}>{{@title}}</title>
+  {{/if}}
+  <path
+    d="M11.828 13H4.172A1.173 1.173 0 013 11.828V4.172C3 3.526 3.526 3 4.172 3h7.656C12.474 3 13 3.526 13 4.172v7.656c0 .646-.526 1.172-1.172 1.172zM4.172 3.781a.391.391 0 00-.39.39v7.657c0 .216.175.39.39.39h7.656a.39.39 0 00.39-.39V4.172a.391.391 0 00-.39-.39H4.172zm7.244 2.175l-.582-.521L7.22 9.469 5.125 7.476l-.539.566 2.68 2.548 4.15-4.634z"
+  ></path>
+</svg>

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

@@ -18,7 +18,12 @@
         <EuiButtonIcon
           @color="text"
           {{on "click" (fn this.handleMdButtonClick item.id)}}
-          @iconType={{item.iconType}}
+          @iconType={{if
+            item.iconType.component
+            (component item.iconType.component)
+            item.iconType
+          }}
+          @useComponent={{item.iconType.component}}
           aria-label={{item.label}}
           @useSvg={{item.useSvg}}
           @isDisabled={{this.isPreviewing}}

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

@@ -3,7 +3,7 @@ import { action } from '@ember/object';
 import type MarkdownActions from '../../utils/markdown/markdown-actions';
 import { MODE_VIEWING } from '../../utils/markdown/markdown-modes';
 import { cached } from '@glimmer/tracking';
-import { getOwner } from '@ember/application';
+
 import { Plugin } from 'unified';
 
 export interface EuiMarkdownEditorToolbarArgs {
@@ -29,12 +29,6 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
     }
   ];
 
-  get svgPath() {
-    const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
-    return svgPath;
-  }
-
   @cached
   get listButtons() {
     return [
@@ -55,7 +49,10 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
         label: 'Task list',
         name: 'tl',
         useSvg: true,
-        iconType: `${this.svgPath}markdown-checkmark`
+        iconType: {
+          // this should't be needed when we drop support for 3.24.0
+          component: 'eui-markdown-editor-toolbar/icons/markdown-checkmark'
+        }
       }
     ];
   }

package/addon/components/eui-tabbed-content/index.hbs

@@ -1,17 +1,21 @@
 {{#let
   (unique-id)
   (optional @onTabClick)
-  (arg-or-default @autoFocus "initial")
+  (arg-or-default @autoFocus 'initial')
   (use-state
-    (get-tab-id (arg-or-default (or @selectedTab @initialSelectedTab) (object-at 0 @tabs)))
-  ) as |id onTabClick autoFocus selectedTab|
+    (get-tab-id
+      (arg-or-default (or @selectedTab @initialSelectedTab) (object-at 0 @tabs))
+    )
+  )
+  as |id onTabClick autoFocus selectedTab|
 }}
   <div class={{@className}} ...attributes>
     <EuiTabs
       @selectedTab={{selectedTab.value}}
       @expand={{@expand}}
       @display={{@display}}
-      @size={{@size}} as |EuiTab|
+      @size={{@size}}
+      as |EuiTab|
     >
       {{#each @tabs as |tab|}}
         <EuiTab
@@ -26,14 +30,16 @@
         </EuiTab>
       {{/each}}
     </EuiTabs>
-    {{#with (find-by "id" selectedTab.value @tabs) as |currentTab|}}
-      <div role="tabpanel" id={{id}} aria-labelledby={{currentTab.id}}>
-        {{#if (has-block "selectedTabContent")}}
-          {{yield currentTab to="selectedTabContent"}}
-        {{else}}
-          {{currentTab.content}}
-        {{/if}}
-      </div>
-    {{/with}}
+    {{#let (find-by "id" selectedTab.value @tabs) as |currentTab|}}
+      {{#if currentTab}}
+        <div role="tabpanel" id={{id}} aria-labelledby={{currentTab.id}}>
+          {{#if (has-block "selectedTabContent")}}
+            {{yield currentTab to="selectedTabContent"}}
+          {{else}}
+            {{currentTab.content}}
+          {{/if}}
+        </div>
+      {{/if}}
+    {{/let}}
   </div>
 {{/let}}

package/addon/helpers/class-names.ts

@@ -66,4 +66,6 @@ export function classNames(
   return str;
 }
 
-export default helper(classNames);
+export default helper<string[], Options & { addBase: boolean }, string>(
+  classNames
+);

package/addon/styles/ember-eui.css

@@ -0,0 +1,28 @@
+/* This is to avoid bumping elastic eui styles to 3.2.x , delete when possible. */
+.euiAvatar {
+  -webkit-flex-shrink: 0;
+  flex-shrink: 0;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  align-items: center;
+  background-size: cover;
+  text-align: center;
+  vertical-align: middle;
+  overflow-x: hidden;
+  font-weight: 500;
+}
+
+.euiMarkdownEditor--fullHeight {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+}
+
+.euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer {
+  display: none;
+}

package/app/components/eui-markdown-editor-footer/icons/markdown-logo/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-editor-footer/icons/markdown-logo';

package/app/components/eui-markdown-editor-toolbar/icons/markdown-checkmark/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-editor-toolbar/icons/markdown-checkmark';

package/app/styles/ember-eui.scss

@@ -1,30 +1 @@
-/* This is to avoid bumping elastic eui styles to 3.2.x , delete when possible. */
-.euiAvatar {
-  -webkit-flex-shrink: 0;
-  flex-shrink: 0;
-  display: -webkit-inline-flex;
-  display: inline-flex;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  align-items: center;
-  background-size: cover;
-  text-align: center;
-  vertical-align: middle;
-  overflow-x: hidden;
-  font-weight: 500;
-}
-
-.euiMarkdownEditor--fullHeight {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  height: 100%;
-}
-
-.euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer {
-  display: none;
-}
-
 @import 'ember-eui-components';

package/config/environment.js

@@ -1,5 +1,5 @@
 'use strict';
 
-module.exports = function(/* environment, appConfig */) {
-  return { };
+module.exports = function (/* environment, appConfig */) {
+  return {};
 };

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

@@ -1,53 +1,58 @@
 # Demo
 
 ```hbs template
-<EuiText style="cursor: pointer;" {{on "mousemove" this.update}}>
-  You can hover on the icon below, open the network tab, all svgs are loaded on demand!
-  <EuiIcon @type={{this.icon}} />
-  <EuiIcon @type={{this.icon}} @size="m" />
-  <EuiIcon @type={{this.icon}} @size="l" />
-  <EuiIcon @type={{this.icon}} @size="xl" />
-  <EuiIcon @type={{this.icon}} @size="xxl" />
-</EuiText>
+<EuiIcon @type='logoGolang' />
+<EuiIcon @type='logoGolang' @size='m' />
+<EuiIcon @type='logoGolang' @size='l' />
+<EuiIcon @type='logoGolang' @size='xl' />
+<EuiIcon @type='logoGolang' @size='xxl' />
 <br />
-<EuiIcon @type="logoGolang" />
-<EuiIcon @type="logoGolang" @size="m" />
-<EuiIcon @type="logoGolang" @size="l" />
-<EuiIcon @type="logoGolang" @size="xl" />
-<EuiIcon @type="logoGolang" @size="xxl" />
+<EuiIcon @type='logoRedis' @size='s' />
+<EuiIcon @type='logoRedis' @size='m' />
+<EuiIcon @type='logoRedis' @size='l' />
+<EuiIcon @type='logoRedis' @size='xl' />
+<EuiIcon @type='logoRedis' @size='xxl' />
 <br />
-<EuiIcon @type="logoRedis" @size="s" />
-<EuiIcon @type="logoRedis" @size="m" />
-<EuiIcon @type="logoRedis" @size="l" />
-<EuiIcon @type="logoRedis" @size="xl" />
-<EuiIcon @type="logoRedis" @size="xxl" />
+<EuiIcon @type='logoAWS' @size='s' />
+<EuiIcon @type='logoAWS' @size='m' />
+<EuiIcon @type='logoAWS' @size='l' />
+<EuiIcon @type='logoAWS' @size='xl' />
+<EuiIcon @type='logoAWS' @size='xxl' />
 <br />
-<EuiIcon @type="logoAWS" @size="s" />
-<EuiIcon @type="logoAWS" @size="m" />
-<EuiIcon @type="logoAWS" @size="l" />
-<EuiIcon @type="logoAWS" @size="xl" />
-<EuiIcon @type="logoAWS" @size="xxl" />
+<EuiIcon @type='/assets/ember.svg' @size='s' />
+<EuiIcon @type='/assets/ember.svg' @size='m' />
+<EuiIcon @type='/assets/ember.svg' @size='l' />
+<EuiIcon @type='/assets/ember.svg' @size='xl' />
+<EuiIcon @type='/assets/ember.svg' @size='xxl' />
 <br />
-<EuiIcon @type="/assets/ember.svg" @size="s" />
-<EuiIcon @type="/assets/ember.svg" @size="m" />
-<EuiIcon @type="/assets/ember.svg" @size="l" />
-<EuiIcon @type="/assets/ember.svg" @size="xl" />
-<EuiIcon @type="/assets/ember.svg" @size="xxl" />
+<EuiIcon
+  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
+  @size='s'
+/>
+<EuiIcon
+  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
+  @size='m'
+/>
+<EuiIcon
+  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
+  @size='l'
+/>
+<EuiIcon
+  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
+  @size='xl'
+/>
+<EuiIcon
+  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
+  @size='xxl'
+/>
 <br />
-<EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="s" />
-<EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="m" />
-<EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="l" />
-<EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="xl" />
-<EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="xxl" />
-<br />
-<EuiIcon @type="flag" @size="s" @color="green" />
-<EuiIcon @type="flag" @size="m" @color="white" />
-<EuiIcon @type="flag" @size="l" @color="red" />
-<EuiIcon @type="flag" @size="xl" @color="green" />
-<EuiIcon @type="flag" @size="xxl" @color="white" />
+<EuiIcon @type='flag' @size='s' @color='green' />
+<EuiIcon @type='flag' @size='m' @color='white' />
+<EuiIcon @type='flag' @size='l' @color='red' />
+<EuiIcon @type='flag' @size='xl' @color='green' />
+<EuiIcon @type='flag' @size='xxl' @color='white' />
 ```
 
-
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
@@ -65,5 +70,4 @@ export default class DemoIconComponent extends Component {
     this.icon = this.icons[Math.floor(Math.random() * this.icons.length)];
   }
 }
-
-```
+```

package/index.js

@@ -1,10 +1,4 @@
 'use strict';
-const path = require('path');
-const resolve = require('resolve');
-const BroccoliMergeTrees = require('broccoli-merge-trees');
-const writeFile = require('broccoli-file-creator');
-const Funnel = require('broccoli-funnel');
-const EuiScssFilter = require('./lib/elastic-eui-scss-filter');
 
 module.exports = {
   name: require('./package').name,
@@ -53,14 +47,12 @@ module.exports = {
       ? this.emberEuiOptions.theme
       : 'light';
 
-    if (this.emberEuiOptions.useCompiledCss !== false) {
-      if (this.emberEuiOptions.theme) {
-        app.import(
-          `node_modules/@elastic/eui/dist/eui_theme_${this.emberEuiOptions.theme}.min.css`
-        );
-      } else {
-        app.import('node_modules/@elastic/eui/dist/eui_theme_light.min.css');
-      }
+    if (this.emberEuiOptions.theme) {
+      app.import(
+        `node_modules/@elastic/eui/dist/eui_theme_${this.emberEuiOptions.theme}.min.css`
+      );
+    } else {
+      app.import('node_modules/@elastic/eui/dist/eui_theme_light.min.css');
     }
 
     this._super.included.apply(this, arguments);
@@ -71,47 +63,5 @@ module.exports = {
       (a) => a.name === 'ember-power-select'
     );
     return emberPowerSelect.contentFor(type, config);
-  },
-
-  // TODO: Currently the performance of recompiling sass on every change are serious, find a way to improve them.
-  treeForStyles(tree) {
-    let trees = [];
-    let euiScssFiles;
-
-    if (this.emberEuiOptions.useCompiledCss === false) {
-      euiScssFiles = new Funnel(this.pathBase('@elastic/eui'), {
-        srcDir: '/src',
-        include: ['**/*.scss'],
-        destDir: 'elastic-eui',
-        annotation: 'ElasticEUIScssFunnel'
-      });
-
-      euiScssFiles = new EuiScssFilter(euiScssFiles);
-
-      trees.push(euiScssFiles);
-    }
-
-    let selectedTheme = this.emberEuiOptions.theme;
-
-    let importer = writeFile(
-      'ember-eui-components.scss',
-      euiScssFiles ? `@import './elastic-eui/theme_${selectedTheme}.scss';` : ''
-    );
-
-    trees.push(importer);
-
-    trees.push(tree);
-
-    let output = new BroccoliMergeTrees(trees, {
-      overwrite: true
-    });
-
-    return this._super.treeForStyles(output);
-  },
-
-  pathBase(packageName) {
-    return path.dirname(
-      resolve.sync(`${packageName}/package.json`, { basedir: __dirname })
-    );
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "1.6.3",
+  "version": "3.0.2",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -26,11 +26,14 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
     "lint:hbs": "ember-template-lint .",
-    "lint:js": "eslint .",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "npm-run-all lint:* test:*",
+    "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
     "prepack": "ember ts:precompile",
@@ -49,34 +52,30 @@
   },
   "dependencies": {
     "@elastic/eui": "31.0.0",
-    "@ember/render-modifiers": "^1.0.2",
-    "@html-next/vertical-collection": "^2.0.0",
+    "@ember/render-modifiers": "^2.0.4",
+    "@html-next/vertical-collection": "^2.1.0",
     "@types/lodash-es": "^4.17.4",
-    "broccoli-file-creator": "^2.1.1",
-    "broccoli-filter": "^1.3.0",
-    "broccoli-funnel": "^2.0.1",
-    "broccoli-merge-trees": "^4.2.0",
     "chroma-js": "^2.1.0",
-    "ember-auto-import": "^1.6.0",
+    "ember-auto-import": "^1.11.3",
     "ember-cached-decorator-polyfill": "^0.1.1",
-    "ember-cli-babel": "^7.21.0",
-    "ember-cli-htmlbars": "^5.3.2",
-    "ember-cli-typescript": "^4.1.0",
+    "ember-cli-babel": "^7.26.6",
+    "ember-cli-htmlbars": "^5.7.1",
+    "ember-cli-typescript": "4.2.1",
     "ember-composable-helpers": "^4.4.1",
-    "ember-element-helper": "^0.5.0",
-    "ember-focus-trap": "^0.4.0",
+    "ember-element-helper": "^0.5.5",
+    "ember-focus-trap": "^0.7.0",
     "ember-href-to": "^4.1.0",
     "ember-in-element-polyfill": "^1.0.0",
     "ember-keyboard": "^6.0.2",
     "ember-math-helpers": "^2.15.0",
-    "ember-modifier": "^2.1.1",
+    "ember-modifier": "^2.1.2",
     "ember-named-blocks-polyfill": "^0.2.3",
     "ember-power-select": "^5.0.2",
     "ember-set-body-class": "^1.0.2",
-    "ember-set-helper": "^2.0.0",
+    "ember-set-helper": "^2.0.1",
     "ember-style-modifier": "^0.6.0",
-    "ember-svg-jar": "https://github.com/betocantu93/ember-svg-jar.git#add-bundle-flag",
-    "ember-truth-helpers": "^2.1.0",
+    "ember-svg-jar": "^2.3.4",
+    "ember-truth-helpers": "^3.0.0",
     "highlight.js": "^9.18.5",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
@@ -93,57 +92,76 @@
     "vfile": "^4.2.0"
   },
   "devDependencies": {
-    "@ember/optional-features": "^1.3.0",
-    "@glimmer/component": "^1.0.1",
-    "@glimmer/tracking": "^1.0.0",
+    "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.6.0",
+    "@embroider/test-setup": "^1.0.0",
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
     "@types/ember": "^3.16.0",
-    "@types/ember-qunit": "^3.4.9",
-    "@types/ember-resolver": "^5.0.9",
-    "@types/ember__test-helpers": "^1.7.2",
-    "@types/qunit": "^2.9.1",
+    "@types/ember-qunit": "^5.0.0",
+    "@types/ember-resolver": "^5.0.11",
+    "@types/ember__application": "^4.0.0",
+    "@types/ember__array": "^4.0.1",
+    "@types/ember__component": "^4.0.4",
+    "@types/ember__controller": "^4.0.0",
+    "@types/ember__debug": "^4.0.0",
+    "@types/ember__engine": "^4.0.0",
+    "@types/ember__error": "^4.0.0",
+    "@types/ember__object": "^4.0.0",
+    "@types/ember__polyfills": "^4.0.0",
+    "@types/ember__routing": "^4.0.3",
+    "@types/ember__runloop": "^4.0.0",
+    "@types/ember__service": "^4.0.0",
+    "@types/ember__string": "^3.0.9",
+    "@types/ember__template": "^4.0.0",
+    "@types/ember__test": "^4.0.0",
+    "@types/ember__test-helpers": "^2.6.1",
+    "@types/ember__utils": "^4.0.0",
+    "@types/htmlbars-inline-precompile": "^3.0.0",
+    "@types/qunit": "^2.11.3",
+    "@types/rsvp": "^4.0.4",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.20.0",
+    "ember-cli": "~3.28.0",
     "ember-cli-dependency-checker": "^3.2.0",
-    "ember-cli-inject-live-reload": "^2.0.2",
+    "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-netlify": "^0.4.1",
-    "ember-cli-postcss": "^7.0.0",
-    "ember-cli-resolve-asset": "^0.3.0",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-string-helpers": "^5.0.0",
+    "ember-cli-string-helpers": "^6.1.0",
+    "ember-cli-terser": "^4.0.2",
     "ember-cli-typescript-blueprints": "^3.0.0",
-    "ember-cli-uglify": "^3.0.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-element-helper": "^0.3.1",
     "ember-export-application-global": "^2.0.1",
-    "ember-get-config": "^0.3.0",
-    "ember-load-initializers": "^2.1.1",
+    "ember-get-config": "~1.0.2",
+    "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-modifier": "^2.1.1",
-    "ember-qunit": "^4.6.0",
-    "ember-resolver": "^8.0.0",
-    "ember-source": "~3.20.2",
-    "ember-source-channel-url": "^2.0.1",
-    "ember-string-helpers": "^1.0.2",
-    "ember-template-lint": "^2.9.1",
+    "ember-page-title": "^6.2.2",
+    "ember-qunit": "^5.1.4",
+    "ember-resolver": "^8.0.2",
+    "ember-source": "~3.28.0",
+    "ember-source-channel-url": "^3.0.0",
+    "ember-template-lint": "^3.6.0",
     "ember-try": "^1.4.0",
-    "eslint": "^7.5.0",
-    "eslint-plugin-ember": "^8.9.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-ember": "^10.5.4",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-qunit": "^6.2.0",
     "loader.js": "^4.7.0",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
-    "qunit-dom": "^1.2.0",
-    "typescript": "^4.0.3"
+    "prettier": "^2.3.2",
+    "qunit": "^2.16.0",
+    "qunit-dom": "^1.6.0",
+    "typescript": "^4.5.5"
   },
   "publishConfig": {
     "access": "public"
   },
   "engines": {
-    "node": ">= 12"
+    "node": "12.* || 14.* || >= 16"
   },
   "ember": {
     "edition": "octane"
@@ -154,5 +172,5 @@
   "volta": {
     "node": "12.22.1"
   },
-  "gitHead": "9a24c611ad631adc96733da28942a10301abb05e"
+  "gitHead": "4954f174f17915ab6fa301a875071705ef3a6d0b"
 }

package/.prettierignore

@@ -1,20 +0,0 @@
-# unconventional js
-vendor/
-public/
-
-# compiled output
-dist/
-tmp/
-
-# dependencies
-node_modules/
-
-# ember-try
-.node_modules.ember-try/
-bower.json.ember-try
-package.json.ember-try
-
-package.json
-
-*.html
-*.js

package/lib/elastic-eui-scss-filter.js

@@ -1,16 +0,0 @@
-'use strict';
-
-const Filter = require('broccoli-filter');
-
-module.exports = class EuiScssFilter extends Filter {
-  constructor(inputNode) {
-    super(inputNode, { annotation: 'EuiScssFilter' });
-
-    this.extensions = ['scss'];
-    this.targetExtension = 'scss';
-  }
-
-  processString(content) {
-    return content.replace("@import '../packages/index';", '');
-  }
-};

package/public/markdown-checkmark.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
-	<path d="M11.828 13H4.172A1.173 1.173 0 013 11.828V4.172C3 3.526 3.526 3 4.172 3h7.656C12.474 3 13 3.526 13 4.172v7.656c0 .646-.526 1.172-1.172 1.172zM4.172 3.781a.391.391 0 00-.39.39v7.657c0 .216.175.39.39.39h7.656a.39.39 0 00.39-.39V4.172a.391.391 0 00-.39-.39H4.172zm7.244 2.175l-.582-.521L7.22 9.469 5.125 7.476l-.539.566 2.68 2.548 4.15-4.634z" />
-</svg>

package/public/markdown-logo.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="26" height="16" fill="none" viewBox="0 0 26 16">
-	<path d="M1.25 1.875c0-.345.28-.625.625-.625h22.25c.345 0 .625.28.625.625v12.25c0 .345-.28.625-.625.625H1.875a.625.625 0 01-.625-.625V1.875zM1.875 0C.839 0 0 .84 0 1.875v12.25C0 15.161.84 16 1.875 16h22.25C25.16 16 26 15.16 26 14.125V1.875C26 .839 25.16 0 24.125 0H1.875zM3.75 3.75v8.5h2.5V7.375l2.5 3.125 2.5-3.125v4.875h2.5v-8.5h-2.5l-2.5 3.125-2.5-3.125h-2.5zm11.875 4.375l3.75 4.125 3.75-4.125h-2.5V3.75h-2.5v4.375h-2.5z" />
-</svg>