[UI Framework] Reactify kuiCard and related CSS components

ui_framework/components/card/__snapshots__/card.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiCard 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiCard testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/card/__snapshots__/card_description.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiCardDescription 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiCard__description testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/card/__snapshots__/card_description_text.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiCardDescriptionText 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiCard__descriptionText testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/card/__snapshots__/card_description_title.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiCardDescriptionTitle 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiCard__descriptionTitle testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/card/__snapshots__/card_footer.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiCardFooter 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiCard__footer testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/card/__snapshots__/card_group.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiCardGroup 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiCardGroup testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;
+
+exports[`renders KuiCardGroup isUnited 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiCardGroup testClass1 testClass2 kuiCardGroup--united"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/card/_card_group.scss

@@ -1,23 +1,18 @@
-/**
- * 1. Use this container to offset the spacing between wrapped cards.
- */
-.kuiCardGroupContainer {
-  margin: -$cardSpacing; /* 1 */
-}
-
 /**
  * 1. Wrap cards when necessary.
+ * 2. Offset the spacing between wrapped cards.
  */
 .kuiCardGroup {
   display: flex;
   flex-wrap: wrap; /* 1 */
+  margin: -$cardSpacing; /* 2 */
 
   /**
    * 1. Use the defined width of the card to determine when to wrap.
    * 2. Use an even margin all around the card so that the spacing is still even when wrapped.
    */
   .kuiCard {
-    flex: 1 1 0; /* 1 */
+    flex: 1 1 auto; /* 1 */
     margin: $cardSpacing; /* 2 */
 
     .kuiCard__description {
@@ -28,17 +23,24 @@
 
 /**
  * 1. There's no way to make this look good when wrapped.
+ * 2. Undo the default styles.
  */
 .kuiCardGroup--united {
   flex-wrap: nowrap; /* 1 */
   border: 1px solid $cardBorderColor;
   border-radius: $globalBorderRadius;
   overflow: hidden;
+  margin: 0; /* 2 */
 
+  /**
+   * 1. Force all cards to be the same size.
+   * 2. Undo the default styles.
+   */
   .kuiCard {
-    border: none;
-    border-radius: 0;
-    margin: 0;
+    flex-basis: 0; /* 1 */
+    border: none; /* 2 */
+    border-radius: 0; /* 2 */
+    margin: 0; /* 2 */
   }
 
   .kuiCard + .kuiCard {

ui_framework/components/card/card.js

@@ -0,0 +1,13 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiCard = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiCard', className);
+  return <div className={classes} {...rest}>{children}</div>;
+};
+KuiCard.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};

ui_framework/components/card/card.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import {
+  KuiCard,
+} from './card';
+
+test('renders KuiCard', () => {
+  const component = <KuiCard { ...requiredProps }>children</KuiCard>;
+  expect(render(component)).toMatchSnapshot();
+});

ui_framework/components/card/card_description.js

@@ -0,0 +1,13 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiCardDescription = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiCard__description', className);
+  return <div className={classes} {...rest}>{children}</div>;
+};
+KuiCardDescription.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};

ui_framework/components/card/card_description.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import {
+  KuiCardDescription,
+} from './card_description';
+
+test('renders KuiCardDescription', () => {
+  const component = <KuiCardDescription { ...requiredProps }>children</KuiCardDescription>;
+  expect(render(component)).toMatchSnapshot();
+});

ui_framework/components/card/card_description_text.js

@@ -0,0 +1,13 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiCardDescriptionText = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiCard__descriptionText', className);
+  return <div className={classes} {...rest}>{children}</div>;
+};
+KuiCardDescriptionText.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};

ui_framework/components/card/card_description_text.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import {
+  KuiCardDescriptionText,
+} from './card_description_text';
+
+test('renders KuiCardDescriptionText', () => {
+  const component = <KuiCardDescriptionText { ...requiredProps }>children</KuiCardDescriptionText>;
+  expect(render(component)).toMatchSnapshot();
+});

ui_framework/components/card/card_description_title.js

@@ -0,0 +1,13 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiCardDescriptionTitle = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiCard__descriptionTitle', className);
+  return <div className={classes} {...rest}>{children}</div>;
+};
+KuiCardDescriptionTitle.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};

ui_framework/components/card/card_description_title.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import {
+  KuiCardDescriptionTitle,
+} from './card_description_title';
+
+test('renders KuiCardDescriptionTitle', () => {
+  const component = <KuiCardDescriptionTitle { ...requiredProps }>children</KuiCardDescriptionTitle>;
+  expect(render(component)).toMatchSnapshot();
+});

ui_framework/components/card/card_footer.js

@@ -0,0 +1,13 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiCardFooter = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiCard__footer', className);
+  return <div className={classes} {...rest}>{children}</div>;
+};
+KuiCardFooter.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};

ui_framework/components/card/card_footer.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import {
+  KuiCardFooter,
+} from './card_footer';
+
+test('renders KuiCardFooter', () => {
+  const component = <KuiCardFooter { ...requiredProps }>children</KuiCardFooter>;
+  expect(render(component)).toMatchSnapshot();
+});

ui_framework/components/card/card_group.js

@@ -0,0 +1,19 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiCardGroup = ({ children, className, isUnited, ...rest }) => {
+  const classes = classNames('kuiCardGroup', className, { 'kuiCardGroup--united': isUnited });
+  return <div className={classes} {...rest}>{children}</div>;
+};
+
+KuiCardGroup.defaultProps = {
+  isUnited: false
+};
+
+KuiCardGroup.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  isUnited: PropTypes.bool
+};

ui_framework/components/card/card_group.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import {
+  KuiCardGroup,
+} from './card_group';
+
+test('renders KuiCardGroup', () => {
+  const component = <KuiCardGroup { ...requiredProps }>children</KuiCardGroup>;
+  expect(render(component)).toMatchSnapshot();
+});
+
+test('renders KuiCardGroup isUnited', () => {
+  const component = <KuiCardGroup isUnited { ...requiredProps }>children</KuiCardGroup>;
+  expect(render(component)).toMatchSnapshot();
+});

ui_framework/components/card/index.js

@@ -0,0 +1,6 @@
+export { KuiCard } from './card';
+export { KuiCardDescriptionText } from './card_description_text';
+export { KuiCardDescriptionTitle } from './card_description_title';
+export { KuiCardDescription } from './card_description';
+export { KuiCardFooter } from './card_footer';
+export { KuiCardGroup } from './card_group';

ui_framework/components/index.js

@@ -12,6 +12,15 @@ export {
   KuiSubmitButton,
 } from './button';
 
+export {
+  KuiCard,
+  KuiCardDescriptionText,
+  KuiCardDescriptionTitle,
+  KuiCardDescription,
+  KuiCardFooter,
+  KuiCardGroup,
+} from './card';
+
 export {
   KuiCollapseButton
 } from './collapse_button';