More EuiCard props and added accessibility icon

CHANGELOG.md

@@ -6,6 +6,8 @@
 - Added `disabled` prop to the `EuiCheckboxGroup` definition ([#2545](https://github.com/elastic/eui/pull/2545))
 - Added `disabled` option to the `option` attribute of the `options` object that is passed to the `EuiCheckboxGroup` so that checkboxes in a group can be individually disabled ([#2548](https://github.com/elastic/eui/pull/2548))
 - Added `EuiAspectRatio` component that allows for responsively resizing embeds ([#2535](https://github.com/elastic/eui/pull/2535))
+- Added `display` and `titleSize` props to `EuiCard` ([#2566](https://github.com/elastic/eui/pull/2566))
+- Added `accessibility` glyph to `EuiIcon` ([#2566](https://github.com/elastic/eui/pull/2566))
 
 **Bug fixes**
 

src-docs/src/views/button/button_example.js

@@ -323,13 +323,17 @@ export const ButtonExample = {
             displaying a group of icons, add the prop{' '}
             <EuiCode>isIconOnly</EuiCode>.
           </p>
-          <EuiCallOut title="Accessibility">
-            <p>
-              In order for groups to be properly read as groups with a title,
-              add the <EuiCode>legend</EuiCode> prop. This is only for
-              accessibility, however, so it will be visibly hidden.
-            </p>
-          </EuiCallOut>
+          <EuiCallOut
+            iconType="accessibility"
+            color="warning"
+            title={
+              <span>
+                In order for groups to be properly read as groups with a title,
+                add the <EuiCode>legend</EuiCode> prop. This is only for
+                accessibility, however, so it will be visibly hidden.
+              </span>
+            }
+          />
         </div>
       ),
       demo: <ButtonGroup />,

src-docs/src/views/card/card_example.js

@@ -57,17 +57,14 @@ export const CardExample = {
             At its core an <EuiCode>EuiCard</EuiCode> should contain a{' '}
             <EuiCode>title</EuiCode>,<EuiCode>description</EuiCode>, and an{' '}
             <EuiCode>icon</EuiCode>. You can make the whole card clickable by
-            giving it an <EuiCode>onClick</EuiCode> handler.
+            giving it an <EuiCode>onClick</EuiCode> handler or{' '}
+            <EuiCode>href</EuiCode>.
           </p>
           <p>
-            By default a card&apos;s title element is a <EuiCode>span</EuiCode>.
-            This can be changed via the <EuiCode>titleElement</EuiCode> prop.
-            However, it will always remain the same visual size.
-          </p>
-          <p>
-            By default a card&apos;s content is center aligned. To change the
-            alignment set <EuiCode>textAlign</EuiCode> to{' '}
-            <EuiCode>left</EuiCode> or <EuiCode>right</EuiCode>.
+            For accessibility and heading hierarchy, a card&apos;s title element
+            is a <EuiCode>span</EuiCode> by default. However, this can be
+            changed via the <EuiCode>titleElement</EuiCode> prop without
+            altering the visual size.
           </p>
         </div>
       ),
@@ -182,13 +179,17 @@ export const CardExample = {
             <EuiCode>EuiButton</EuiCode> you <strong>must not</strong> also give
             it an <EuiCode>onClick</EuiCode>.
           </p>
-          <EuiCallOut title="Accessibility" color="warning">
-            <p>
-              When using footers to display generic &quot;Go&quot; buttons. You
-              must provide an <EuiCode>aria-label</EuiCode> to the button itself
-              that refers back to the title of the card.
-            </p>
-          </EuiCallOut>
+          <EuiCallOut
+            iconType="accessibility"
+            color="warning"
+            title={
+              <span>
+                When using footers to display generic &quot;Go&quot; buttons,
+                you must provide an <EuiCode>aria-label</EuiCode> to the button
+                itself that refers back to the title of the card.
+              </span>
+            }
+          />
         </>
       ),
       components: { EuiCard },

src-docs/src/views/card/card_layout.js

@@ -14,16 +14,17 @@ export default () => (
         layout="horizontal"
         icon={<EuiIcon size="xl" type={'logoBeats'} />}
         title={'Elastic Beats'}
-        description="Example of a card's description. Stick to one or two sentences."
+        description="This card adds uses an 'xl' size icon which works well in a horizontal layout."
         onClick={() => window.alert('Card clicked')}
       />
     </EuiFlexItem>
     <EuiFlexItem>
       <EuiCard
         layout="horizontal"
-        icon={<EuiIcon size="xl" type={'logoCloud'} />}
+        icon={<EuiIcon size="l" type={'logoCloud'} />}
+        titleSize="xs"
         title={'Elastic Cloud'}
-        description="Example of a card's description. Stick to one or two sentences."
+        description="This card uses an 'l' size icon but also shrinks the 'titleSize' to 'xs'."
         onClick={() => window.alert('Card clicked')}
       />
     </EuiFlexItem>

src-docs/src/views/form_compressed/form_compressed_example.js

@@ -198,14 +198,18 @@ export const FormCompressedExample = {
             This is an example of how to combine compressed form controls with
             from rows, labels, prepend and appends in a column layout.
           </p>
-          <EuiCallOut color="warning" title="Accessibility in compressed forms">
-            <p>
-              Pay close attention to the patterns of using{' '}
-              <EuiCode>htmlFor</EuiCode> and <EuiCode>aria-label</EuiCode>. For
-              best results each form control that is not wrapped in an
-              EuiFormRow should be supplied an <EuiCode>id</EuiCode>.
-            </p>
-          </EuiCallOut>
+          <EuiCallOut
+            color="warning"
+            iconType="accessibility"
+            title={
+              <span>
+                Pay close attention to the patterns of using{' '}
+                <EuiCode>htmlFor</EuiCode> and <EuiCode>aria-label</EuiCode>.
+                For best results, each form control that is not wrapped in an
+                EuiFormRow should be supplied an <EuiCode>id</EuiCode>.
+              </span>
+            }
+          />
         </Fragment>
       ),
       demo: <ComplexExample />,

src-docs/src/views/guidelines/accessibility.js

@@ -76,7 +76,7 @@ export default {
         <>
           <EuiText grow={false}>
             <p>
-              You can aid navigation abd make pages more accessible for screen
+              You can aid navigation and make pages more accessible for screen
               reader users by using solid headings and landmarks.{' '}
               <strong>Headings</strong> are the simplest way for screen readers
               to navigate pages. A good heading hierarchy:

src-docs/src/views/icon/icons.js

@@ -21,6 +21,7 @@ import {
 } from '../../../../src/components';
 
 export const iconTypes = [
+  'accessibility',
   'alert',
   'apmTrace',
   'apps',

src-docs/src/views/toggle/toggle_example.js

@@ -40,16 +40,20 @@ export const ToggleExample = {
             <Link to="/utilities/css-utility-classes">utility classes</Link>{' '}
             like <EuiCode>.eui-displayInlineBlock</EuiCode>.
           </p>
-          <EuiCallOut title="Accessibility">
-            <p>
-              This utility is just a helper component and comes with no inherit
-              styles including no <EuiCode>:hover</EuiCode> or{' '}
-              <EuiCode>:focus</EuiCode> states. If you use this utility
-              directly, be sure to add these states. Otherwise, you may just
-              want to utilize the{' '}
-              <Link to="/navigation/button">EuiButtonToggle</Link> component.
-            </p>
-          </EuiCallOut>
+          <EuiCallOut
+            iconType="accessibility"
+            color="warning"
+            title={
+              <span>
+                This utility is just a helper component and comes with no
+                inherit styles including no <EuiCode>:hover</EuiCode> or{' '}
+                <EuiCode>:focus</EuiCode> states. If you use this utility
+                directly, be sure to add these states. Otherwise, you may just
+                want to utilize the{' '}
+                <Link to="/navigation/button">EuiButtonToggle</Link> component.
+              </span>
+            }
+          />
         </div>
       ),
       components: { EuiToggle },

src/components/card/__snapshots__/card.test.tsx.snap

@@ -53,6 +53,31 @@ exports[`EuiCard props children 1`] = `
 </div>
 `;
 
+exports[`EuiCard props display 1`] = `
+<div
+  class="euiCard euiCard--plain euiCard--centerAligned"
+>
+  <div
+    class="euiCard__content"
+  >
+    <span
+      class="euiTitle euiTitle--small euiCard__title"
+      id="generated-idTitle"
+    >
+      Card title
+    </span>
+    <div
+      class="euiText euiText--small euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiCard props footer 1`] = `
 <div
   class="euiCard euiCard--centerAligned"
@@ -289,3 +314,28 @@ exports[`EuiCard props titleElement 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiCard props titleSize 1`] = `
+<div
+  class="euiCard euiCard--centerAligned"
+>
+  <div
+    class="euiCard__content"
+  >
+    <span
+      class="euiTitle euiTitle--xsmall euiCard__title"
+      id="generated-idTitle"
+    >
+      Card title
+    </span>
+    <div
+      class="euiText euiText--small euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+</div>
+`;

src/components/card/_card.scss

@@ -22,10 +22,13 @@
   @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing); // sass-lint:disable-line mixins-before-declarations
 
   &.euiCard-isDisabled {
-    background-color: $euiColorLightestShade;
     cursor: not-allowed; // duplicate property due to Chrome bug
     box-shadow: none;
 
+    &:not(.euiCard--plain) {
+      background-color: $euiColorLightestShade;
+    }
+
     .euiCard__title,
     .euiCard__description,
     .euiCard__top {
@@ -103,6 +106,17 @@
   }
 }
 
+// Selectable cards don't work well without a border
+.euiCard--plain:not(.euiCard--isSelectable) {
+  border: none;
+  box-shadow: none;
+
+  .euiCard__image {
+    // Without a border, the image should stand on it's own so it needs to have all corners rounded
+    border-radius: $euiBorderRadius;
+  }
+}
+
 @each $name, $color in $euiCardSelectButtonBorders {
   .euiCard--isSelectable--#{$name}.euiCard-isSelected {
     border-color: $color;

src/components/card/card.test.tsx

@@ -88,6 +88,18 @@ describe('EuiCard', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('titleSize', () => {
+      const component = render(
+        <EuiCard
+          title="Card title"
+          description="Card description"
+          titleSize="xs"
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     test('footer', () => {
       const component = render(
         <EuiCard
@@ -122,6 +134,18 @@ describe('EuiCard', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('display', () => {
+      const component = render(
+        <EuiCard
+          title="Card title"
+          description="Card description"
+          display="plain"
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     test('selectable', () => {
       const component = render(
         <EuiCard