eui-card-41.4.0

packages/core/addon/components/eui-card/eui-card-select/index.hbs → packages/core/addon/components/eui-card-select/index.hbs

@@ -1,13 +1,10 @@
 <EuiButtonEmpty
-  class={{class-names
-    componentName="EuiCardSelect"
-    color=(if @color @color (if @isSelected "success" "text"))
-  }}
+  class={{class-names this.selectColorClass componentName="EuiCardSelect"}}
   id={{@buttonId}}
   @color={{arg-or-default @color "text"}}
   @size="xs"
   @isDisabled={{@isDisabled}}
-  @iconType={{if @isSelected "check" @iconType}}
+  @iconType={{if @isSelected "check" undefined}}
   @isLoading={{@isLoading}}
   @href={{@href}}
   @iconSide={{@iconSide}}

packages/core/addon/components/eui-card-select/index.ts

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+
+export type EuiCardSelectProps = {
+  /**
+   * Is in the selected state
+   */
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  color?: string;
+};
+
+export function euiCardSelectableColor(
+  color: string | undefined,
+  isSelected: boolean | undefined
+): string {
+  let calculatedColor;
+  if (color) {
+    calculatedColor = color;
+  } else if (isSelected) {
+    calculatedColor = 'success';
+  } else {
+    calculatedColor = 'text';
+  }
+
+  return calculatedColor;
+}
+
+export default class EuiCardSelectComponent extends Component<EuiCardSelectProps> {
+  get selectColorClass() {
+    return `euiCardSelect--${euiCardSelectableColor(
+      this.args.color,
+      this.args.isSelected
+    )}`;
+  }
+}

packages/core/addon/components/eui-card/index.hbs

@@ -1,46 +1,39 @@
 {{#let
-  (if @titleId @titleId (if (or @href @onClick) (unique-id)))
   (if @selectable (unique-id))
-  as |titleId selectableId|
+  (and
+    (not @isDisabled)
+    (or @onClick @href (and @selectable (not @selectable.isDisabled)))
+  )
+  (arg-or-default @titleElement "span")
+  (arg-or-default @layout "vertical")
+  as |selectableId isClickable titleElement layout|
 }}
-  <div
+  <EuiPanel
     class={{class-names
-      "euiCard--shadow"
-      (if (eq @layout "horizontal") "euiCard--horizontal")
-      (if (and (eq @display "plain") (not @selectable)) "euiCard--plain")
-      (if @isDisabled "euiCard-isDisabled")
-      (if (has-block) "euiCard--hasChildren")
-      (if @icon "euiCard--hasIcon" (if (has-block) "icon" "euiCard--hasIcon"))
+      (if (eq layout "horizontal") "euiCard--horizontal")
+      (if isClickable "euiCard--isClickable")
       (if @betaBadgeProps.label "euiCard--hasBetaBadge")
-      (if
-        (or titleId (and @selectable (not @selectable.isDisabled)))
-        "euiCard--isClickable"
-      )
+      (if @icon "euiCard--hasIcon" (if (has-block "icon") "euiCard--hasIcon"))
       (if @selectable "euiCard--isSelectable")
       (if (and @selectable @selectable.isSelected) "euiCard-isSelected")
+      (if @isDisabled "euiCard-isDisabled")
+      this.selectableColorClass
       componentName="EuiCard"
-      paddingSize=(arg-or-default @paddingSize "m")
       textAlign=(arg-or-default @textAlign "center")
-      color=(if
-        @selectable.isSelected (arg-or-default @selectable.color "success")
-      )
     }}
+    @color={{if @isDisabled "subdued" @display}}
+    @onClick={{if isClickable this.outerOnClick}}
+    @hasShadow={{or @isDisabled @display}}
+    @hasBorder={{if @display @display undefined}}
+    @paddingSize={{@paddingSize}}
     ...attributes
-    {{on-event-simulate-event
-      "click"
-      target=(or
-        (if titleId (concat "#" titleId))
-        (if selectableId (concat "#" selectableId))
-      )
-      event=(create-event (hash eventType="Event" trigger="click"))
-    }}
   >
     <div class="euiCard__top">
       {{#if (has-block "icon")}}
         {{yield "euiCard__icon" to="icon"}}
       {{else}}
         {{#if (or @image @icon)}}
-          {{#if (and @image (not (eq @layout "horizontal")))}}
+          {{#if (and @image (not-eq layout "horizontal"))}}
             <div class="euiCard__image">
               <img src={{@image}} alt="card-top" />
             </div>
@@ -56,49 +49,64 @@
       {{/if}}
     </div>
     <div class="euiCard__content">
-      <EuiTitle
-        class="euiCard__title"
-        @size={{arg-or-default @titleSize "s"}}
-        @tag={{arg-or-default @titleElement "span"}}
-      >
+      <EuiTitle class="euiCard__title" @size={{arg-or-default @titleSize "s"}}>
         {{#if (has-block "title")}}
-          {{yield titleId to="title"}}
+          {{yield (set this "link") to="title"}}
         {{else if (and (not @isDisabled) @href)}}
           <a
             class="euiCard__titleAnchor"
             target={{@target}}
             disabled={{@isDisabled}}
             href={{@href}}
-            id={{titleId}}
+            {{did-insert (set this "link")}}
           >
-            {{@title}}
+            {{#if (not-eq titleElement "span")}}
+              {{#let (element titleElement) as |TitleElement|}}
+                <TitleElement>{{@title}}</TitleElement>
+              {{/let}}
+            {{else}}
+              <span>{{@title}}</span>
+            {{/if}}
+
           </a>
         {{else if (or @isDisabled @onClick)}}
           <button
             type="button"
             class="euiCard__titleButton"
             disabled={{@isDisabled}}
-            id={{titleId}}
+            {{did-insert (set this "link")}}
             {{on "click" (optional @onClick)}}
           >
-            {{@title}}
+            {{#if (not-eq titleElement "span")}}
+              {{#let (element titleElement) as |TitleElement|}}
+                <TitleElement>{{@title}}</TitleElement>
+              {{/let}}
+            {{else}}
+              <span>{{@title}}</span>
+            {{/if}}
           </button>
         {{else}}
-          {{@title}}
+          {{#if (not-eq titleElement "span")}}
+            {{#let (element titleElement) as |TitleElement|}}
+              <TitleElement>{{@title}}</TitleElement>
+            {{/let}}
+          {{else}}
+            <span>{{@title}}</span>
+          {{/if}}
         {{/if}}
       </EuiTitle>
       {{#if (or @description (has-block "description"))}}
         <EuiText @grow={{true}} @size="s" class="euiCard__description">
           {{#if (has-block "description")}}
-            {{yield to="description"}}
+            <p>{{yield to="description"}}</p>
           {{else}}
-            {{@description}}
+            <p>{{@description}}</p>
           {{/if}}
         </EuiText>
       {{/if}}
       {{yield to="body"}}
     </div>
-    {{#if @betaBadgeProps.Label}}
+    {{#if @betaBadgeProps.label}}
       <span class="euiCard__betaBadgeWrapper">
         <EuiBetaBadge
           class="euiCard__betaBadge"
@@ -108,13 +116,17 @@
         />
       </span>
     {{/if}}
-    {{#if (and (not (eq @layout "horizontal")) (has-block "footer"))}}
+    {{#if (and (eq layout "vertical") (or (has-block "footer") @footer))}}
       <div class="euiCard__footer">
-        {{yield to="footer"}}
+        {{#if (has-block "footer")}}
+          {{yield to="footer"}}
+        {{else}}
+          {{@footer}}
+        {{/if}}
       </div>
     {{/if}}
     {{#if @selectable}}
-      <EuiCard::EuiCardSelect
+      <EuiCardSelect
         @type={{@selectable.type}}
         @buttonId={{selectableId}}
         @isSelected={{@selectable.isSelected}}
@@ -125,8 +137,9 @@
         @href={{@selectable.href}}
         @iconSide={{@selectable.iconSide}}
         @flush={{@selectable.flush}}
+        {{did-insert (set this "link")}}
         {{on "click" (optional @selectable.onClick)}}
       />
     {{/if}}
-  </div>
+  </EuiPanel>
 {{/let}}

packages/core/addon/components/eui-card/index.ts

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { EuiCardSelectProps, euiCardSelectableColor } from '../eui-card-select';
+
+type EuiCardComponentArgs = {
+  selectable?: EuiCardSelectProps;
+};
+
+export default class EuiCardComponent extends Component<EuiCardComponentArgs> {
+  @tracked link: HTMLAnchorElement | HTMLButtonElement | null = null;
+
+  outerOnClick = (e: MouseEvent) => {
+    if (this.link && this.link !== e.target) {
+      this.link.click();
+    }
+  };
+
+  get selectableColorClass() {
+    const selectable = this.args.selectable;
+    return selectable
+      ? `euiCard--isSelectable--${euiCardSelectableColor(
+          selectable.color,
+          selectable.isSelected
+        )}`
+      : undefined;
+  }
+}

packages/core/addon/components/eui-checkable-card/index.hbs

@@ -1,15 +1,16 @@
 {{#let (arg-or-default @id (unique-id)) as |id|}}
   <div
     class={{class-names
-      "euiCheckableCard"
-      "euiCheckableCard--shadow"
-      "euiCheckableCard--borderRadiusMedium"
+    "euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row euiCheckableCard"
       (if @checked "euiCheckableCard-isChecked")
-      (if @disabled "euiCheckableCard-isDisabled")
+      (if @disabled "euiCheckableCard__label-isDisabled")
     }}
   >
-    <div class="euiCheckableCard__row">
-      <div class="euiCheckableCard__control">
+    <div class={{class-names
+    "euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiPanel--isClickable euiSplitPanel__inner"
+    (if @checked "euiPanel--primary")
+    }}>
+
         {{#if (eq @checkableType "checkbox")}}
           <EuiCheckbox
             @id={{id}}
@@ -25,7 +26,8 @@
             ...attributes
           />
         {{/if}}
-      </div>
+    </div>
+   <div class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner">
       <label 
         class={{class-names
           "euiCheckableCard__label"
@@ -40,15 +42,19 @@
           {{@label}}
         {{/if}}
       </label>
-    </div>
+
+
     {{#if (has-block "content")}}
-      <div class="euiCheckableCard__row">
+
         {{!-- Empty div for left side background color only --}}
-        <div class="euiCheckableCard__control" />
+
         <div id={{concat id "-details"}} class="euiCheckableCard__children">
           {{yield to="content"}}
         </div>
-      </div>
+
     {{/if}}
+
+
+ </div>
   </div>
 {{/let}}

packages/core/addon/components/eui-image/index.hbs

@@ -27,7 +27,7 @@
       <EuiIcon
         @iconClasses="euiImage__icon"
         @type="fullScreen"
-        @color={{if (not (eq @fullScreenIconColor "dark")) "ghost"}}
+        @color={{if (not-eq @fullScreenIconColor "dark") "ghost"}}
       />
     </button>
 
@@ -98,7 +98,7 @@
     <EuiIcon
       @iconClasses="euiImage-isFullScreenCloseIcon"
       @type="cross"
-      @color={{if (not (eq @fullScreenIconColor "dark")) "ghost"}}
+      @color={{if (not-eq @fullScreenIconColor "dark") "ghost"}}
     />
   </EuiOverlayMask>
 {{/if}}