From 5e186fbb275519b6405fb76f639af71228b291ad Mon Sep 17 00:00:00 2001 From: GerardoPM Date: Tue, 5 Apr 2022 13:53:26 -0500 Subject: [PATCH 1/4] eui-card-41.4.0 --- .../core/addon/components/eui-card/index.hbs | 12 +- .../components/eui-checkable-card/index.hbs | 30 +- .../display/card/basic-card-demo/demo1.md | 338 ++---------------- packages/core/docs/display/card/basic-card.md | 4 + .../display/card/beta-badge-demo/demo1.md | 47 +++ packages/core/docs/display/card/beta-badge.md | 1 + .../docs/display/card/checkable-demo/demo1.md | 105 +----- .../docs/display/card/checkable-demo/demo2.md | 63 ++++ .../card/custom-children-demo/demo1.md | 93 +++++ .../core/docs/display/card/custom-children.md | 1 + .../docs/display/card/footer-demo/demo1.md | 77 ++++ packages/core/docs/display/card/footer.md | 1 + .../docs/display/card/images-demo/demo1.md | 57 +++ packages/core/docs/display/card/images.md | 5 + .../docs/display/card/layout-demo/demo1.md | 40 +++ packages/core/docs/display/card/layout.md | 5 + .../display/card/selectable-demo/demo1.md | 113 +++--- 17 files changed, 516 insertions(+), 476 deletions(-) create mode 100644 packages/core/docs/display/card/beta-badge-demo/demo1.md create mode 100644 packages/core/docs/display/card/beta-badge.md create mode 100644 packages/core/docs/display/card/checkable-demo/demo2.md create mode 100644 packages/core/docs/display/card/custom-children-demo/demo1.md create mode 100644 packages/core/docs/display/card/custom-children.md create mode 100644 packages/core/docs/display/card/footer-demo/demo1.md create mode 100644 packages/core/docs/display/card/footer.md create mode 100644 packages/core/docs/display/card/images-demo/demo1.md create mode 100644 packages/core/docs/display/card/images.md create mode 100644 packages/core/docs/display/card/layout-demo/demo1.md create mode 100644 packages/core/docs/display/card/layout.md diff --git a/packages/core/addon/components/eui-card/index.hbs b/packages/core/addon/components/eui-card/index.hbs index 635ae86df..9d80ffb35 100644 --- a/packages/core/addon/components/eui-card/index.hbs +++ b/packages/core/addon/components/eui-card/index.hbs @@ -3,9 +3,11 @@ (if @selectable (unique-id)) as |titleId selectableId| }} -
- {{#if @betaBadgeProps.Label}} + {{#if @betaBadgeProps.label}} {{/if}} -
+ {{/let}} \ No newline at end of file diff --git a/packages/core/addon/components/eui-checkable-card/index.hbs b/packages/core/addon/components/eui-checkable-card/index.hbs index fb12c9927..5f7552214 100644 --- a/packages/core/addon/components/eui-checkable-card/index.hbs +++ b/packages/core/addon/components/eui-checkable-card/index.hbs @@ -1,15 +1,18 @@ {{#let (arg-or-default @id (unique-id)) as |id|}}
-
-
+
+ {{#if (eq @checkableType "checkbox")}} {{/if}} -
+
+
+ + {{#if (has-block "content")}} -
+ {{!-- Empty div for left side background color only --}} -
+
{{yield to="content"}}
-
+ {{/if}} + + +
{{/let}} \ No newline at end of file diff --git a/packages/core/docs/display/card/basic-card-demo/demo1.md b/packages/core/docs/display/card/basic-card-demo/demo1.md index e9de99858..73e6e838b 100644 --- a/packages/core/docs/display/card/basic-card-demo/demo1.md +++ b/packages/core/docs/display/card/basic-card-demo/demo1.md @@ -1,330 +1,36 @@ -# Demo +# Basic card + + +

At its core an EuiCard should contain a title,description, and an icon. You can make the whole card clickable by giving it an onClick handler or href.

+ ```hbs template -
-
- - Clickable with href - - - <:body> - -

- Darth Vader's true name is Anakin Skywalker. -
- The One chosen by the force itself to bring balance to the galaxy. - The potentially most powerful force user to ever come to existence, - only to be seduced by the dark side; bringing chaos and destruction across the galaxy. -

- - - <:footer> - - - Dark Side - - - Sith Lord - - - Force - - - Empire - - - - -
-
- - Basic - - - <:body> - -

- Sidious's real name is Sheev Palpatine. He was a former member of the Galactic Senat annd secretly the Dark Lord of the Sith. - After the Jedi genocide, he became the self-titled Emperor of the Galaxy. -
- "There is only one plan—one great design which shall govern the universe—mine." -

- - - <:footer> - - - Dark Side - - - Sith Lord - - - Force - - - Empire - - - - -
-
- - Disabled - - - <:body> - -

- Considered to be an actual wound in the force, Nihilus experiences a never-ending hunger -
- for force energy. Able to strip entire planets of their life-force energy for himself, -
- He became to be considered as arguably one of the most powerful Sith Lords to have ever existed. -

- - - <:footer> - - - Sith Lord - - - Old Republic - - - Jedi Civil War - - - - -
-
- - Beta Badge - - - - <:body> - -

- By far the most iconic ship in the galaxy. -
- Commandeered by the its trusty crew of smugglers turned warriors: Han Solo and Chewbacca. -

- - - <:footer> -
- - Try it! - -
- - -
-
- - Plain Card - - - - <:body> - -

- The fighter of the republic. -
- Maneuvered by the galaxy's most talented pilots, - this is the primary starfighter of the Rebellion and New Republic. -

- - - <:footer> - - - Republic - - - xwing - - - starfighter - - - - -
-
- - Plain Card with Beta Badge and OnClick - - - - <:body> - -

- The powerhouse of the most feared bounty hunter across the galaxy: Boba Fett. -
- The Slave I is slave to none but the bounty hunter himself. - If you see it coming, you know he is out for you, and there is no stopping him. -

- - - <:footer> - - - Mandalore - - - Fett - - - bounty - - - - -
-
- - - Warring Factions - - -
-
- - Card with horizontal Layout and BetaBadge - - - - -

- Firstly known as the Rebellion, was a group of freedom fighters - that overthrew the Galactic Empire, and established the New Republic. -

- - -
-
- - Plain Card horizontal layout - - - - -

- The Galactic Empire was the reign of Darth Sidious, the Dark Lord of the Sith. -

-

- Click on the card for more info! -

- - -
-
+ + {{#each this.icons as |icon|}} + + + + {{/each}} + ``` ```js component import Component from '@glimmer/component'; -import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; export default class DemoCardComponent extends Component { - @tracked cardOneSelected = false; - @tracked cardTwoSelected = false; - @tracked cardThreeSelected = false; - @tracked cardFourSelected = false; - - @tracked weaponLocked = true; - - @action - punchIt() { - alert('You punched into hyperspacer!'); - } + @tracked icons = ['Beats', 'Cloud', 'Logging', 'Kibana']; @action - selectToggle(card, event) { - this[card] = !this[card]; - event.stopPropagation(); + click() { + alert('clicked!'); } } ``` diff --git a/packages/core/docs/display/card/basic-card.md b/packages/core/docs/display/card/basic-card.md index 7c02532f1..c65a6de62 100644 --- a/packages/core/docs/display/card/basic-card.md +++ b/packages/core/docs/display/card/basic-card.md @@ -1 +1,5 @@ +--- +order: 1 +--- + # Basic card diff --git a/packages/core/docs/display/card/beta-badge-demo/demo1.md b/packages/core/docs/display/card/beta-badge-demo/demo1.md new file mode 100644 index 000000000..3bc5b08bc --- /dev/null +++ b/packages/core/docs/display/card/beta-badge-demo/demo1.md @@ -0,0 +1,47 @@ +# Beta Badge + + +

Footers can contain any number of elements and will always align to the bottom of the card. However, if you supply a footer containing a EuiButton you must not also give it an onClick.

+ + +```hbs template + + + + + + + + + + + + + + + +``` diff --git a/packages/core/docs/display/card/beta-badge.md b/packages/core/docs/display/card/beta-badge.md new file mode 100644 index 000000000..f35c03452 --- /dev/null +++ b/packages/core/docs/display/card/beta-badge.md @@ -0,0 +1 @@ +# Beta Badge diff --git a/packages/core/docs/display/card/checkable-demo/demo1.md b/packages/core/docs/display/card/checkable-demo/demo1.md index 7e9b5ec41..1a0fb2dee 100644 --- a/packages/core/docs/display/card/checkable-demo/demo1.md +++ b/packages/core/docs/display/card/checkable-demo/demo1.md @@ -1,98 +1,21 @@ -# Demo +--- +order: 1 +--- + +# Checkable + + +

EuiCheckableCard wraps an EuiRadio or EuiCheckbox with a more-prominent panel, allowing for children to be displayed.

+ ```hbs template - -
+ + -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - <:label> - - Click on this checkbox - - -
-
- - <:content> - - - -
+ ``` - -```javascript component -import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; -import { action } from '@ember/object'; - -export default class DemoCheckableCardomponent extends Component { - radios = [ - { - id: 'radio-1', - label: 'radio 1', - }, - { - id: 'radio-2', - label: 'radio 2', - }, - { - id: 'radio-3', - label: 'radio 3', - }, - { - id: 'radio-4', - label: 'radio 4', - }, - ]; - - @tracked selectedRadioId = null; -} -``` diff --git a/packages/core/docs/display/card/checkable-demo/demo2.md b/packages/core/docs/display/card/checkable-demo/demo2.md new file mode 100644 index 000000000..c873e9f21 --- /dev/null +++ b/packages/core/docs/display/card/checkable-demo/demo2.md @@ -0,0 +1,63 @@ +--- +order: 2 +--- + + +<:title> +When used as a radio group, you must provide a fieldset with a legend for accessibility. + + + +```hbs template + + + + + + + <:content> + + + + + + + +``` + +```javascript component +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class DemoCheckableCardomponent extends Component { + radios = [ + { + id: 'radio-1', + label: 'radio 1' + }, + { + id: 'radio-2', + label: 'radio 2' + }, + { + id: 'radio-3', + label: 'radio 3' + }, + { + id: 'radio-4', + label: 'radio 4' + } + ]; + + @tracked selectedRadioId = null; +} +``` diff --git a/packages/core/docs/display/card/custom-children-demo/demo1.md b/packages/core/docs/display/card/custom-children-demo/demo1.md new file mode 100644 index 000000000..e1f350489 --- /dev/null +++ b/packages/core/docs/display/card/custom-children-demo/demo1.md @@ -0,0 +1,93 @@ +# Custom Children + + +

In the event that you need more than just paragraph text for the description, you can suppliment with anything you need as the children of the component. You can also completely replace the description with custom children, but EuiCard at least one of these.

+ + +```hbs template + + + + <:body> + + +
    +
  • Bullet 1
    • +
  • Bullet 2
    • +
  • Bullet 3
    • +
+ + + + + + + + <:body> + + + <:footer> + + + + Send + + + + + + + + + + + + <:body> + + {'Hello, young Skywalker'} + + + + + + +``` + +```javascript component +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class DemoCheckableCardomponent extends Component { + radios = [ + { + id: 'radio-1', + label: 'radio 1' + }, + { + id: 'radio-2', + label: 'radio 2' + }, + { + id: 'radio-3', + label: 'radio 3' + }, + { + id: 'radio-4', + label: 'radio 4' + } + ]; + + @tracked selectedRadioId = null; +} +``` diff --git a/packages/core/docs/display/card/custom-children.md b/packages/core/docs/display/card/custom-children.md new file mode 100644 index 000000000..a41a86e47 --- /dev/null +++ b/packages/core/docs/display/card/custom-children.md @@ -0,0 +1 @@ +# Custom children diff --git a/packages/core/docs/display/card/footer-demo/demo1.md b/packages/core/docs/display/card/footer-demo/demo1.md new file mode 100644 index 000000000..25196196e --- /dev/null +++ b/packages/core/docs/display/card/footer-demo/demo1.md @@ -0,0 +1,77 @@ +# Footer + + +

Footers can contain any number of elements and will always align to the bottom of the card. However, if you supply a footer containing a EuiButton you must not also give it an onClick.

+ + +```hbs template + + + + + <:footer> +
+ Go for it + + +

+ Or try + this +

+ +
+ + + + + + + <:footer> +
+ Go for it + + +

+ Or try + this +

+ +
+ + + + + + + <:footer> +
+ Go for it + + +

+ Or try + this +

+ +
+ + + + + +``` diff --git a/packages/core/docs/display/card/footer.md b/packages/core/docs/display/card/footer.md new file mode 100644 index 000000000..571fbcaac --- /dev/null +++ b/packages/core/docs/display/card/footer.md @@ -0,0 +1 @@ +# Footer diff --git a/packages/core/docs/display/card/images-demo/demo1.md b/packages/core/docs/display/card/images-demo/demo1.md new file mode 100644 index 000000000..b048010fd --- /dev/null +++ b/packages/core/docs/display/card/images-demo/demo1.md @@ -0,0 +1,57 @@ +--- +order: 1 +--- + +# Images + + +

Images can be added in place of, or in conjuction with, icons. Just pass a url into the image prop and it will expand to the edges of the card.

+ + +```hbs template + + + + <:footer> + + + Go for it + + + + + + + + + + <:footer> + + + Go for it + + + + + + + + + + +``` diff --git a/packages/core/docs/display/card/images.md b/packages/core/docs/display/card/images.md new file mode 100644 index 000000000..54ca62013 --- /dev/null +++ b/packages/core/docs/display/card/images.md @@ -0,0 +1,5 @@ +--- +order: 3 +--- + +# Images diff --git a/packages/core/docs/display/card/layout-demo/demo1.md b/packages/core/docs/display/card/layout-demo/demo1.md new file mode 100644 index 000000000..b06298880 --- /dev/null +++ b/packages/core/docs/display/card/layout-demo/demo1.md @@ -0,0 +1,40 @@ +# Layout + + +

At its core an EuiCard should contain a title,description, and an icon. You can make the whole card clickable by giving it an onClick handler or href.

+ + +```hbs template + + + + + + + + + + + + + + +``` diff --git a/packages/core/docs/display/card/layout.md b/packages/core/docs/display/card/layout.md new file mode 100644 index 000000000..53953c94c --- /dev/null +++ b/packages/core/docs/display/card/layout.md @@ -0,0 +1,5 @@ +--- +order: 2 +--- + +# Layout diff --git a/packages/core/docs/display/card/selectable-demo/demo1.md b/packages/core/docs/display/card/selectable-demo/demo1.md index bf935d4e2..19c1198c5 100644 --- a/packages/core/docs/display/card/selectable-demo/demo1.md +++ b/packages/core/docs/display/card/selectable-demo/demo1.md @@ -1,70 +1,77 @@ # Demo ```hbs template - - - - Selectable - - -
-
+ + -
-
+ > + <:footer> + + More details + + + + + -
-
+ > + <:footer> + + More details + + + + + -
-
- -
-
+ > + <:footer> + + More details + + + + + ``` ```js component @@ -73,7 +80,7 @@ import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; export default class DemoCardComponent extends Component { - @tracked cardOneSelected = false; + @tracked cardOneSelected = true; @tracked cardTwoSelected = false; @tracked cardThreeSelected = false; @tracked cardFourSelected = false; From 4c7b9e93ef9320be4af7470b658d5f93460b67b9 Mon Sep 17 00:00:00 2001 From: betocantu93 Date: Tue, 5 Apr 2022 18:41:18 -0500 Subject: [PATCH 2/4] docs --- .../components/eui-checkable-card/index.hbs | 2 -- packages/core/docs/display/card/basic-card.md | 14 ++++++++----- packages/core/docs/display/card/beta-badge.md | 10 ++++++++- .../docs/display/card/checkable-demo/demo1.md | 21 +++++++++++-------- packages/core/docs/display/card/checkable.md | 10 ++++++++- .../core/docs/display/card/custom-children.md | 10 ++++++++- packages/core/docs/display/card/footer.md | 10 ++++++++- packages/core/docs/display/card/images.md | 14 ++++++++----- packages/core/docs/display/card/layout.md | 14 ++++++++----- .../display/card/selectable-demo/demo1.md | 8 +++---- packages/core/docs/display/card/selectable.md | 10 ++++++++- 11 files changed, 88 insertions(+), 35 deletions(-) diff --git a/packages/core/addon/components/eui-checkable-card/index.hbs b/packages/core/addon/components/eui-checkable-card/index.hbs index 5f7552214..001e5a1c5 100644 --- a/packages/core/addon/components/eui-checkable-card/index.hbs +++ b/packages/core/addon/components/eui-checkable-card/index.hbs @@ -1,9 +1,7 @@ {{#let (arg-or-default @id (unique-id)) as |id|}}
+ + +

+ Basic card +

+ + + \ No newline at end of file diff --git a/packages/core/docs/display/card/beta-badge.md b/packages/core/docs/display/card/beta-badge.md index f35c03452..4b1dff99a 100644 --- a/packages/core/docs/display/card/beta-badge.md +++ b/packages/core/docs/display/card/beta-badge.md @@ -1 +1,9 @@ -# Beta Badge + + + +

+ Beta badge +

+ + + \ No newline at end of file diff --git a/packages/core/docs/display/card/checkable-demo/demo1.md b/packages/core/docs/display/card/checkable-demo/demo1.md index 1a0fb2dee..5ecd62a60 100644 --- a/packages/core/docs/display/card/checkable-demo/demo1.md +++ b/packages/core/docs/display/card/checkable-demo/demo1.md @@ -9,13 +9,16 @@ order: 1 ```hbs template - - - - - +{{#let (use-state false) as |checkState|}} + + + + + +{{/let}} ``` diff --git a/packages/core/docs/display/card/checkable.md b/packages/core/docs/display/card/checkable.md index 0d09a02f6..77c3c08cd 100644 --- a/packages/core/docs/display/card/checkable.md +++ b/packages/core/docs/display/card/checkable.md @@ -1 +1,9 @@ -# Checkable + + + +

+ Checkable +

+ + + \ No newline at end of file diff --git a/packages/core/docs/display/card/custom-children.md b/packages/core/docs/display/card/custom-children.md index a41a86e47..2319d4068 100644 --- a/packages/core/docs/display/card/custom-children.md +++ b/packages/core/docs/display/card/custom-children.md @@ -1 +1,9 @@ -# Custom children + + + +

+ Custom children +

+ + + \ No newline at end of file diff --git a/packages/core/docs/display/card/footer.md b/packages/core/docs/display/card/footer.md index 571fbcaac..c48bdeeec 100644 --- a/packages/core/docs/display/card/footer.md +++ b/packages/core/docs/display/card/footer.md @@ -1 +1,9 @@ -# Footer + + + +

+ Footer +

+ + + \ No newline at end of file diff --git a/packages/core/docs/display/card/images.md b/packages/core/docs/display/card/images.md index 54ca62013..319d62abb 100644 --- a/packages/core/docs/display/card/images.md +++ b/packages/core/docs/display/card/images.md @@ -1,5 +1,9 @@ ---- -order: 3 ---- - -# Images + + + +

+ Images +

+ + + \ No newline at end of file diff --git a/packages/core/docs/display/card/layout.md b/packages/core/docs/display/card/layout.md index 53953c94c..9a2cc7b8a 100644 --- a/packages/core/docs/display/card/layout.md +++ b/packages/core/docs/display/card/layout.md @@ -1,5 +1,9 @@ ---- -order: 2 ---- - -# Layout + + + +

+ Layout +

+ + + \ No newline at end of file diff --git a/packages/core/docs/display/card/selectable-demo/demo1.md b/packages/core/docs/display/card/selectable-demo/demo1.md index 19c1198c5..0a27a1435 100644 --- a/packages/core/docs/display/card/selectable-demo/demo1.md +++ b/packages/core/docs/display/card/selectable-demo/demo1.md @@ -17,8 +17,8 @@ More details @@ -40,8 +40,8 @@ More details @@ -61,10 +61,10 @@ > <:footer> More details diff --git a/packages/core/docs/display/card/selectable.md b/packages/core/docs/display/card/selectable.md index a781d3de6..928b8989e 100644 --- a/packages/core/docs/display/card/selectable.md +++ b/packages/core/docs/display/card/selectable.md @@ -1 +1,9 @@ -# Selectable + + + +

+ Selectable +

+ + + From 4f13732653d8bfa8d5e46a90931d0f0777005f16 Mon Sep 17 00:00:00 2001 From: betocantu93 Date: Tue, 5 Apr 2022 20:32:51 -0500 Subject: [PATCH 3/4] fixes --- .../{eui-card => }/eui-card-select/index.hbs | 7 +- .../addon/components/eui-card-select/index.ts | 35 +++++++ .../core/addon/components/eui-card/index.hbs | 99 ++++++++++--------- .../core/addon/components/eui-card/index.ts | 27 +++++ packages/core/addon/helpers/create-event.ts | 30 ------ .../modifiers/on-event-simulate-event.ts | 32 ------ .../utils/css-mappings/eui-card-select.ts | 12 +-- .../core/addon/utils/css-mappings/eui-card.ts | 19 +--- .../app/components/eui-card-select/index.js | 1 + .../eui-card/eui-card-select/index.js | 1 - packages/core/app/helpers/create-event.js | 1 - .../app/modifiers/on-event-simulate-event.js | 1 - 12 files changed, 122 insertions(+), 143 deletions(-) rename packages/core/addon/components/{eui-card => }/eui-card-select/index.hbs (72%) create mode 100644 packages/core/addon/components/eui-card-select/index.ts create mode 100644 packages/core/addon/components/eui-card/index.ts delete mode 100644 packages/core/addon/helpers/create-event.ts delete mode 100644 packages/core/addon/modifiers/on-event-simulate-event.ts create mode 100644 packages/core/app/components/eui-card-select/index.js delete mode 100644 packages/core/app/components/eui-card/eui-card-select/index.js delete mode 100644 packages/core/app/helpers/create-event.js delete mode 100644 packages/core/app/modifiers/on-event-simulate-event.js diff --git a/packages/core/addon/components/eui-card/eui-card-select/index.hbs b/packages/core/addon/components/eui-card-select/index.hbs similarity index 72% rename from packages/core/addon/components/eui-card/eui-card-select/index.hbs rename to packages/core/addon/components/eui-card-select/index.hbs index 2d6378de4..f7b30bfea 100644 --- a/packages/core/addon/components/eui-card/eui-card-select/index.hbs +++ b/packages/core/addon/components/eui-card-select/index.hbs @@ -1,13 +1,10 @@ { + get selectColorClass() { + return `euiCardSelect--${euiCardSelectableColor( + this.args.color, + this.args.isSelected + )}`; + } +} diff --git a/packages/core/addon/components/eui-card/index.hbs b/packages/core/addon/components/eui-card/index.hbs index 9d80ffb35..4545aefed 100644 --- a/packages/core/addon/components/eui-card/index.hbs +++ b/packages/core/addon/components/eui-card/index.hbs @@ -1,48 +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| }}
{{#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")))}}
card-top
@@ -58,49 +49,64 @@ {{/if}}
- + {{#if (has-block "title")}} - {{yield titleId to="title"}} + {{yield (set this "link") to="title"}} {{else if (and (not @isDisabled) @href)}} - {{@title}} + {{#if (not-eq titleElement "span")}} + {{#let (element titleElement) as |TitleElement|}} + {{@title}} + {{/let}} + {{else}} + {{@title}} + {{/if}} + {{else if (or @isDisabled @onClick)}} {{else}} - {{@title}} + {{#if (not-eq titleElement "span")}} + {{#let (element titleElement) as |TitleElement|}} + {{@title}} + {{/let}} + {{else}} + {{@title}} + {{/if}} {{/if}} {{#if (or @description (has-block "description"))}} {{#if (has-block "description")}} - {{yield to="description"}} +

{{yield to="description"}}

{{else}} - {{@description}} +

{{@description}}

{{/if}} {{/if}} {{yield to="body"}}
- {{#if @betaBadgeProps.label}} + {{#if @betaBadgeProps.label}} {{/if}} - {{#if (and (not (eq @layout "horizontal")) (has-block "footer"))}} + {{#if (and (eq layout "vertical") (or (has-block "footer") @footer))}}
- {{yield to="footer"}} + {{#if (has-block "footer")}} + {{yield to="footer"}} + {{else}} + {{@footer}} + {{/if}}
{{/if}} {{#if @selectable}} - {{/if}} diff --git a/packages/core/addon/components/eui-card/index.ts b/packages/core/addon/components/eui-card/index.ts new file mode 100644 index 000000000..79832ae69 --- /dev/null +++ b/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 { + @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; + } +} diff --git a/packages/core/addon/helpers/create-event.ts b/packages/core/addon/helpers/create-event.ts deleted file mode 100644 index 2e5b35513..000000000 --- a/packages/core/addon/helpers/create-event.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { helper } from '@ember/component/helper'; - -const EVENT_TYPE = 'Event'; -const KEYBOARD_EVENT = 'KeyboardEvent'; -const INPUT_EVENT = 'InputEvent'; -const MOUSE_EVENT = 'MouseEvent'; -const DEFAULT_TRIGGER = 'click'; - -type Configuration = { - eventType: string; - trigger: string; - config: EventInit; -}; - -export function createEvent([ - { eventType = EVENT_TYPE, trigger = DEFAULT_TRIGGER, config } -]: [Configuration]) { - switch (eventType) { - case KEYBOARD_EVENT: - return new KeyboardEvent(trigger, config); - case INPUT_EVENT: - return new InputEvent(trigger, config); - case MOUSE_EVENT: - return new MouseEvent(trigger, config); - default: - return new Event(trigger, config); - } -} - -export default helper(createEvent); diff --git a/packages/core/addon/modifiers/on-event-simulate-event.ts b/packages/core/addon/modifiers/on-event-simulate-event.ts deleted file mode 100644 index 73b486d69..000000000 --- a/packages/core/addon/modifiers/on-event-simulate-event.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { modifier } from 'ember-modifier'; - -type Target = Element | string | null; - -type OnEventSimulateEventOptions = { target: Target; event: Event }; - -export default modifier(function onEventSimulateEvent( - element, - [eventName]: [string], - { target, event }: OnEventSimulateEventOptions -): void | (() => unknown) { - let _target: EventTarget | null; - if (target && typeof target === 'string') { - _target = element.querySelector(target); - } - - function dispatch(e: MouseEvent): void { - if (_target && typeof target === 'string') { - // Prevent a recursive behavior catched by the browser - if (e.target instanceof Element && !e.target.closest(target)) { - _target.dispatchEvent(event); - } - } - } - - if (target) { - element.addEventListener(eventName, dispatch); - return (): void => { - element.removeEventListener(eventName, dispatch); - }; - } -}); diff --git a/packages/core/addon/utils/css-mappings/eui-card-select.ts b/packages/core/addon/utils/css-mappings/eui-card-select.ts index d20b9d30d..fe2714c63 100644 --- a/packages/core/addon/utils/css-mappings/eui-card-select.ts +++ b/packages/core/addon/utils/css-mappings/eui-card-select.ts @@ -1,18 +1,8 @@ export const baseClass = 'euiCardSelect'; -export const colorMapping = { - primary: `${baseClass}--primary`, - danger: `${baseClass}--danger`, - text: `${baseClass}--text`, - ghost: `${baseClass}--ghost`, - success: `${baseClass}--success` -}; - const mapping: ComponentMapping = { base: baseClass, - properties: { - color: colorMapping - } + properties: {} }; export default mapping; diff --git a/packages/core/addon/utils/css-mappings/eui-card.ts b/packages/core/addon/utils/css-mappings/eui-card.ts index ac2f6f6bd..500386529 100644 --- a/packages/core/addon/utils/css-mappings/eui-card.ts +++ b/packages/core/addon/utils/css-mappings/eui-card.ts @@ -6,27 +6,10 @@ export const textAlignMapping = { right: `${baseClass}--rightAligned` }; -export const paddingSizeMapping = { - none: `${baseClass}--paddingNone`, - s: `${baseClass}--paddingSmall`, - m: `${baseClass}--paddingMedium`, - l: `${baseClass}--paddingLarge` -}; - -export const selectableColor = { - primary: `${baseClass}--isSelectable--primary`, - danger: `${baseClass}--isSelectable--danger`, - text: `${baseClass}--isSelectable--text`, - ghost: `${baseClass}--isSelectable--ghost`, - success: `${baseClass}--isSelectable--success` -}; - const mapping: ComponentMapping = { base: baseClass, properties: { - textAlign: textAlignMapping, - paddingSize: paddingSizeMapping, - color: selectableColor + textAlign: textAlignMapping } }; diff --git a/packages/core/app/components/eui-card-select/index.js b/packages/core/app/components/eui-card-select/index.js new file mode 100644 index 000000000..897d8ef8d --- /dev/null +++ b/packages/core/app/components/eui-card-select/index.js @@ -0,0 +1 @@ +export { default } from '@ember-eui/core/components/eui-card-select'; diff --git a/packages/core/app/components/eui-card/eui-card-select/index.js b/packages/core/app/components/eui-card/eui-card-select/index.js deleted file mode 100644 index 9893dc43d..000000000 --- a/packages/core/app/components/eui-card/eui-card-select/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from '@ember-eui/core/components/eui-card/eui-card-select'; diff --git a/packages/core/app/helpers/create-event.js b/packages/core/app/helpers/create-event.js deleted file mode 100644 index a56260c45..000000000 --- a/packages/core/app/helpers/create-event.js +++ /dev/null @@ -1 +0,0 @@ -export { default, createEvent } from '@ember-eui/core/helpers/create-event'; diff --git a/packages/core/app/modifiers/on-event-simulate-event.js b/packages/core/app/modifiers/on-event-simulate-event.js deleted file mode 100644 index 3ddc7950e..000000000 --- a/packages/core/app/modifiers/on-event-simulate-event.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from '@ember-eui/core/modifiers/on-event-simulate-event'; From 6a2578d110b337297ac768d2c329ccb27c459ef8 Mon Sep 17 00:00:00 2001 From: betocantu93 Date: Tue, 5 Apr 2022 20:34:40 -0500 Subject: [PATCH 4/4] do not use not eq, use not-eq instead --- packages/core/addon/components/eui-card/index.hbs | 2 +- packages/core/addon/components/eui-image/index.hbs | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/addon/components/eui-card/index.hbs b/packages/core/addon/components/eui-card/index.hbs index 4545aefed..b93115de3 100644 --- a/packages/core/addon/components/eui-card/index.hbs +++ b/packages/core/addon/components/eui-card/index.hbs @@ -33,7 +33,7 @@ {{yield "euiCard__icon" to="icon"}} {{else}} {{#if (or @image @icon)}} - {{#if (and @image (not (eq layout "horizontal")))}} + {{#if (and @image (not-eq layout "horizontal"))}}
card-top
diff --git a/packages/core/addon/components/eui-image/index.hbs b/packages/core/addon/components/eui-image/index.hbs index 08bdf49e6..a386df944 100644 --- a/packages/core/addon/components/eui-image/index.hbs +++ b/packages/core/addon/components/eui-image/index.hbs @@ -27,7 +27,7 @@ @@ -98,7 +98,7 @@ {{/if}} \ No newline at end of file