@ember-eui/core 4.4.0 → 5.0.0-alpha.1

package/docs/display/card/checkable-demo/demo1.md

@@ -1,98 +1,24 @@
-# Demo
+---
+order: 1
+---
 
-```hbs template
-<EuiFlexGroup @wrap={{true}} @alignItems="flexStart">
-  <div style="min-width: 400px;" class="euiFlexItem">
-    <EuiCheckableCard
-      @label="Radio 1"
-    />
-  </div>
-  <div style="min-width: 400px;" class="euiFlexItem">
-    <EuiCheckableCard
-      @label="Radio 1 (Selected)"
-      @checked={{true}}
-    />
-  </div>
-  <div style="min-width: 400px;" class="euiFlexItem">
-    <EuiCheckableCard
-      @label="Radio 1 (Disabled)"
-      @disabled={{true}}
-    />
-  </div>
-  <div style="min-width: 400px;" class="euiFlexItem">
-    <EuiCheckableCard
-      @checkableType="checkbox"
-      @label="Click on this checkbox"
-    />
-  </div>
-  <div style="min-width: 400px;" class="euiFlexItem">
-    <EuiCheckableCard
-      @checkableType="checkbox"
-      @label="Click on this checkbox (Selected)"
-      @checked={{true}}
-    />
-  </div>
-  <div style="min-width: 400px;" class="euiFlexItem">
-    <EuiCheckableCard
-      @checkableType="checkbox"
-      @label="Click on this checkbox (Disabled)"
-      @disabled={{true}}
-    />
-  </div>
-  <div style="min-width: 400px;" class="euiFlexItem">
-    <EuiCheckableCard
-      @iconClasses="pl-2"
-      @checkableType="checkbox"
-    >
-      <:label>
-        <EuiIcon @type="logoGolang" @size="l" />
-        Click on this checkbox
-      </:label>
-    </EuiCheckableCard>
-  </div>
-  <div style="min-width: 400px;" class="euiFlexItem">
-    <EuiCheckableCard
-      @iconClasses="pl-2"
-      @checkableType="checkbox"
-      @label="This is a checkable card with more content inside"
-    >
-      <:content>
-        <EuiRadioGroup
-          @options={{this.radios}}
-          @idSelected={{this.selectedRadioId}}
-          @onChange={{set this "selectedRadioId"}}
-        />
-      </:content>
-    </EuiCheckableCard>
-  </div>
-</EuiFlexGroup>
-```
+# Checkable
 
-```javascript component
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+<EuiText>
+<p><strong>EuiCheckableCard</strong> wraps an <strong>EuiRadio</strong> or <strong>EuiCheckbox</strong> with a more-prominent panel, allowing for children to be displayed.</p>
+</EuiText>
 
-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;
-}
+```hbs template
+{{#let (use-state false) as |checkState|}}
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiCheckableCard
+        @checkableType='checkbox'
+        @label='I am a checkbox'
+        @checked={{checkState.value}}
+        {{on 'change' (fn checkState.setState (not checkState.value))}}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+{{/let}}
 ```

package/docs/display/card/checkable-demo/demo2.md

@@ -0,0 +1,63 @@
+---
+order: 2
+---
+
+<EuiCallOut @iconType='accessibility' @color='warning'>
+<:title>
+<span>When used as a radio group, you must provide a <EuiCode>fieldset</EuiCode> with a <EuiCode>legend</EuiCode> for accessibility.</span>
+</:title>
+</EuiCallOut>
+
+```hbs template
+<EuiFormFieldset @legend='With legend'>
+
+  <EuiCheckableCard @label='Option One ' @checked={{false}} />
+  <EuiSpacer size='m' />
+
+  <EuiCheckableCard @label='Option Two ' @checked={{false}}>
+    <:content>
+      <EuiRadioGroup
+        @options={{this.radios}}
+        @idSelected={{this.selectedRadioId}}
+        @onChange={{set this 'selectedRadioId'}}
+      />
+    </:content>
+  </EuiCheckableCard>
+  <EuiSpacer size='m' />
+  <EuiCheckableCard
+    @label='Option One '
+    @checked={{false}}
+    @disabled={{true}}
+  />
+
+</EuiFormFieldset>
+```
+
+```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;
+}
+```

package/docs/display/card/checkable.md

@@ -1 +1,9 @@
-# Checkable
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Checkable
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/display/card/custom-children-demo/demo1.md

@@ -0,0 +1,93 @@
+# Custom Children
+
+<EuiText>
+<p>In the event that you need <strong>more than</strong> just paragraph text for the <EuiCode>description</EuiCode>, you can suppliment with anything you need as the <EuiCode>children</EuiCode> of the component. You can also completely replace the description with custom children, but <strong>EuiCard</strong> at least one of these.</p>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup @gutterSize='l'>
+  <EuiFlexItem>
+    <EuiCard @textAlign='left' @title='Lists' @description='efefefefe'>
+      <:body>
+        <EuiText @size='s'>
+
+          <ul>
+            <li>Bullet 1</li>
+            <li>Bullet 2</li>
+            <li>Bullet 3</li>
+          </ul>
+        </EuiText>
+      </:body>
+    </EuiCard>
+  </EuiFlexItem>
+
+  <EuiFlexItem>
+    <EuiCard @textAlign='left' @title='Form controls'>
+      <:body>
+        <EuiRadioGroup
+          @options={{this.radios}}
+          @idSelected={{this.selectedRadioId}}
+          @onChange={{set this 'selectedRadioId'}}
+          @compressed={{true}}
+        />
+      </:body>
+      <:footer>
+        <EuiFlexGroup @justifyContent='flexEnd'>
+          <EuiFlexItem @grow={{false}}>
+            <EuiButton @size='s' @fill={{true}}>
+              Send
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </:footer>
+
+    </EuiCard>
+
+  </EuiFlexItem>
+
+  <EuiFlexItem>
+    <EuiCard
+      @textAlign='left'
+      @title='Just about anything'
+      @description='Just be sure not to add any onClick handler to
+              the card if the children are also interactable.'
+    >
+      <:body>
+        <EuiCodeBlock @language='html' @paddingSize='s'>
+          {'<yoda>Hello, young Skywalker</yoda>'}
+        </EuiCodeBlock>
+      </:body>
+    </EuiCard>
+  </EuiFlexItem>
+
+</EuiFlexGroup>
+```
+
+```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;
+}
+```

package/docs/display/card/custom-children.md

@@ -0,0 +1,9 @@
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Custom children
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/display/card/footer-demo/demo1.md

@@ -0,0 +1,77 @@
+# Footer
+
+<EuiText>
+<p>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 <strong>EuiButton</strong> you <strong>must not</strong> also give it an <EuiCode @language="text">onClick</EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup @gutterSize='l'>
+
+  <EuiFlexItem>
+    <EuiCard
+      @icon='devToolsApp'
+      @iconSize='xxl'
+      @title='Developers Tools'
+      @description='Example of a short card description.'
+    >
+      <:footer>
+        <div>
+          <EuiButton @aria-label='Go to Developers Tools'>Go for it</EuiButton>
+          <EuiSpacer @size='xs' />
+          <EuiText @size='s'>
+            <p>
+              Or try
+              <EuiLink @href='http://google.com'>this</EuiLink>
+            </p>
+          </EuiText>
+        </div>
+      </:footer>
+    </EuiCard>
+  </EuiFlexItem>
+
+  <EuiFlexItem>
+    <EuiCard
+      @icon='dashboardApp'
+      @iconSize='xxl'
+      @title='Dashboards'
+      @description='Example of a longer card description. See how the footers stay lined up.'
+    >
+      <:footer>
+        <div>
+          <EuiButton @aria-label='Go to Developers Tools'>Go for it</EuiButton>
+          <EuiSpacer @size='xs' />
+          <EuiText @size='s'>
+            <p>
+              Or try
+              <EuiLink @href='http://google.com'>this</EuiLink>
+            </p>
+          </EuiText>
+        </div>
+      </:footer>
+    </EuiCard>
+  </EuiFlexItem>
+
+  <EuiFlexItem>
+    <EuiCard
+      @icon='savedObjectsApp'
+      @iconSize='xxl'
+      @title='Save Objects'
+      @description='Example of a short card description.'
+    >
+      <:footer>
+        <div>
+          <EuiButton @aria-label='Go to Developers Tools'>Go for it</EuiButton>
+          <EuiSpacer @size='xs' />
+          <EuiText @size='s'>
+            <p>
+              Or try
+              <EuiLink @href='http://google.com'>this</EuiLink>
+            </p>
+          </EuiText>
+        </div>
+      </:footer>
+    </EuiCard>
+  </EuiFlexItem>
+
+</EuiFlexGroup>
+```

package/docs/display/card/footer.md

@@ -0,0 +1,9 @@
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Footer
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/display/card/images-demo/demo1.md

@@ -0,0 +1,57 @@
+---
+order: 1
+---
+
+# Images
+
+<EuiText>
+<p>Images can be added in place of, or in conjuction with, icons. Just pass a url into the <EuiCode @language="text">image</EuiCode> prop and it will expand to the edges of the card.</p>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup @gutterSize='l'>
+  <EuiFlexItem>
+    <EuiCard
+      @textAlign='left'
+      @title='Elastic in Nature'
+      @description="Example of a card's description. Stick to one or two sentences."
+      @image='https://source.unsplash.com/400x200/?Nature'
+    >
+      <:footer>
+        <EuiFlexGroup @justifyContent='flexEnd'>
+          <EuiFlexItem @grow={{false}}>
+            <EuiButton>Go for it</EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </:footer>
+    </EuiCard>
+  </EuiFlexItem>
+
+  <EuiFlexItem>
+    <EuiCard
+      @textAlign='left'
+      @title='Elastic in Nature'
+      @description="Example of a card's description. Stick to one or two sentences."
+      @image='https://source.unsplash.com/400x200/?Water'
+    >
+
+      <:footer>
+        <EuiFlexGroup @justifyContent='flexEnd'>
+          <EuiFlexItem @grow={{false}}>
+            <EuiButton>Go for it</EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </:footer>
+    </EuiCard>
+  </EuiFlexItem>
+
+  <EuiFlexItem>
+    <EuiCard
+      @textAlign='left'
+      @title='Elastic in Nature'
+      @description="Example of a card's description. Stick to one or two sentences."
+      @image='https://source.unsplash.com/400x200/?Cit'
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+```

package/docs/display/card/images.md

@@ -0,0 +1,9 @@
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Images
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/display/card/layout-demo/demo1.md

@@ -0,0 +1,40 @@
+# Layout
+
+<EuiText>
+<p>At its core an <strong>EuiCard</strong> should contain a <EuiCode @language="text">title</EuiCode>,<EuiCode @language="text">description</EuiCode>, and an <EuiCode @language="text">icon</EuiCode>. You can make the whole card clickable by giving it an <EuiCode @language="text">onClick</EuiCode> handler or <EuiCode @language="text">href</EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup @gutterSize='l'>
+
+  <EuiFlexItem>
+    <EuiCard
+      @layout='horizontal'
+      @icon='logoBeats'
+      @title='logoBeats'
+      @iconSize='xl'
+      @description="This card adds uses an 'xl' size icon which works well in a horizontal layout."
+    />
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiCard
+      @layout='horizontal'
+      @icon='logoCloud'
+      @iconSize='l'
+      @titleSize='xs'
+      @title='Elastic Cloud'
+      @description="This card uses an 'l' size icon but also shrinks the 'titleSize' to 'xs'."
+    />
+  </EuiFlexItem>
+
+  <EuiFlexItem>
+    <EuiCard
+      @layout='horizontal'
+      @title='No icon example'
+      @description="Example of a card's description. Stick to one or two sentences."
+      @href='#'
+    />
+  </EuiFlexItem>
+
+</EuiFlexGroup>
+```

package/docs/display/card/layout.md

@@ -0,0 +1,9 @@
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Layout
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/display/card/selectable-demo/demo1.md

@@ -1,70 +1,77 @@
 # Demo
 
 ```hbs template
-
-<EuiSpacer @size="xl" />
-<EuiTitle @size="m">
-  Selectable
-</EuiTitle>
-<EuiSpacer @size="s" />
-<div
-  class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--gutterLarge"
->
-  <div class="euiFlexItem">
+<EuiFlexGroup @gutterSize='l'>
+  <EuiFlexItem>
     <EuiCard
-      @title="E-11 Blaster Rifle"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="Manufactured by BlasTech Industries"
-      @image="https://vignette.wikia.nocookie.net/starwars/images/2/20/E-11_blaster_rifle_DICE.png/revision/latest/scale-to-width-down/500?cb=20151106030234"
+      @icon='logoSketch'
+      @iconSize='xxl'
+      @title='Sketch'
+      @description='Example of a short card description.'
       @selectable={{hash
-        color="primary"
-        onClick=(fn this.selectToggle "cardOneSelected")
+        onClick=(fn this.selectToggle 'cardOneSelected')
         isSelected=this.cardOneSelected
       }}
-    />
-  </div>
-  <div class="euiFlexItem">
+    >
+      <:footer>
+        <EuiButtonEmpty
+          @iconType='iInCircle'
+          @size='xs'
+          @aria-label='See more details about Sketch'
+          {{on 'click' (stop-propagation this.punchIt)}}
+        >
+          More details
+        </EuiButtonEmpty>
+      </:footer>
+    </EuiCard>
+  </EuiFlexItem>
+  <EuiFlexItem>
     <EuiCard
-      @title="A280 Blaster Rifle"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="Manufactured by BlasTech Industries"
-      @image="https://vignette.wikia.nocookie.net/starwars/images/c/c1/A280_blaster_rifle.jpg/revision/latest/scale-to-width-down/499?cb=20061203115750"
+      @icon='logoGCP'
+      @iconSize='xxl'
+      @title='Google'
+      @description='Example of a short card description.'
       @selectable={{hash
-        onClick=(fn this.selectToggle "cardTwoSelected")
+        onClick=(fn this.selectToggle 'cardTwoSelected')
         isSelected=this.cardTwoSelected
       }}
-    />
-  </div>
-  <div class="euiFlexItem">
+    >
+      <:footer>
+        <EuiButtonEmpty
+          @iconType='iInCircle'
+          @size='xs'
+          @aria-label='See more details about Sketch'
+          {{on 'click' (stop-propagation this.punchIt)}}
+        >
+          More details
+        </EuiButtonEmpty>
+      </:footer>
+    </EuiCard>
+  </EuiFlexItem>
+  <EuiFlexItem>
     <EuiCard
-      @title="E-10 Blaster Rifle"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="Manufactured by BlasTech Industries"
-      @image="https://vignette.wikia.nocookie.net/starwars/images/6/6f/E-10.png/revision/latest/scale-to-width-down/500?cb=20181125220049"
+      @icon='logoAerospike'
+      @iconSize='xxl'
+      @title='Not Adobe'
+      @description='Example of a short card description.'
       @selectable={{hash
-        onClick=(fn this.selectToggle "cardThreeSelected")
+        onClick=(fn this.selectToggle 'cardThreeSelected')
         isSelected=this.cardThreeSelected
       }}
-    />
-  </div>
-  <div class="euiFlexItem">
-    <EuiCard
-      @title="E-5C Heavy Blaster Rifle"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="Manufactured by BlasTech Industries"
-      @image="https://vignette.wikia.nocookie.net/starwars/images/b/ba/E-5C_BF2.png/revision/latest/scale-to-width-down/499?cb=20180310060911"
-      @selectable={{hash
-        onClick=(fn this.selectToggle "cardFourSelected")
-        isSelected=this.cardFourSelected
-        isDisabled=this.weaponLocked
-      }}
-    />
-  </div>
-</div>
+    >
+      <:footer>
+        <EuiButtonEmpty
+          @size='xs'
+          @iconType='iInCircle'
+          @aria-label='See more details about Sketch'
+          {{on 'click' (stop-propagation this.punchIt)}}
+        >
+          More details
+        </EuiButtonEmpty>
+      </:footer>
+    </EuiCard>
+  </EuiFlexItem>
+</EuiFlexGroup>
 ```
 
 ```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;

package/docs/display/card/selectable.md

@@ -1 +1,9 @@
-# Selectable
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Selectable
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/display/comment-list.md

@@ -1 +1,9 @@
-# Comment List
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Comment List
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>