[UI Framework] Reactify kuiGallery and related CSS components (#12277)

* [UI Framework] Reactify kuiGallery and related CSS components

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

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

ui_framework/components/gallery/gallery.js

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

ui_framework/components/gallery/gallery.test.js

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

ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button.test.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiGalleryButton href 1`] = `
+<a
+  aria-label="aria-label"
+  class="kuiGalleryButton testClass1 testClass2"
+  data-test-subj="test subject string"
+  href="#"
+>
+  children
+</a>
+`;

ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button_icon.test.js.snap

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

ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button_image.test.js.snap

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

ui_framework/components/gallery/gallery_button/__snapshots__/gallery_button_label.test.js.snap

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

ui_framework/components/gallery/gallery_button/gallery_button.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const KuiGalleryButton = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiGalleryButton', className);
+  return (
+    <a
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};
+KuiGalleryButton.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};

ui_framework/components/gallery/gallery_button/gallery_button.test.js

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

ui_framework/components/gallery/gallery_button/gallery_button_icon.js

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

ui_framework/components/gallery/gallery_button/gallery_button_icon.test.js

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

ui_framework/components/gallery/gallery_button/gallery_button_image.js

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

ui_framework/components/gallery/gallery_button/gallery_button_image.test.js

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

ui_framework/components/gallery/gallery_button/gallery_button_label.js

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

ui_framework/components/gallery/gallery_button/gallery_button_label.test.js

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

ui_framework/components/gallery/index.js

@@ -0,0 +1,5 @@
+export { KuiGallery } from './gallery';
+export { KuiGalleryButton } from './gallery_button/gallery_button.js';
+export { KuiGalleryButtonIcon } from './gallery_button/gallery_button_icon.js';
+export { KuiGalleryButtonImage } from './gallery_button/gallery_button_image.js';
+export { KuiGalleryButtonLabel } from './gallery_button/gallery_button_label.js';

ui_framework/components/index.js

@@ -43,6 +43,14 @@ export {
   KuiFieldGroupSection,
 } from './form_layout';
 
+export {
+  KuiGallery,
+  KuiGalleryButton,
+  KuiGalleryButtonIcon,
+  KuiGalleryButtonImage,
+  KuiGalleryButtonLabel
+} from './gallery';
+
 export { KuiInfoButton } from './info_button';
 
 export {

ui_framework/doc_site/src/services/routes/routes.js

@@ -163,6 +163,7 @@ const components = [{
 }, {
   name: 'Gallery',
   component: GalleryExample,
+  hasReact: true,
 }, {
   name: 'HeaderBar',
   component: HeaderBarExample,

ui_framework/doc_site/src/views/gallery/gallery.html

@@ -1,81 +0,0 @@
-<div class="kuiVerticalRhythm">
-  <div class="kuiSubTitle">
-    Some items
-  </div>
-
-  <div class="kuiGallery">
-    <a class="kuiGalleryButton" href="#">
-      <div class="kuiGalleryButton__image" style="background-color: lightgray">
-      </div>
-
-      <div class="kuiGalleryButton__label">
-        Item A
-      </div>
-
-      <div class="kuiGalleryButton__icon kuiIcon fa-flask">
-      </div>
-    </a>
-
-    <a class="kuiGalleryButton" href="#">
-      <div class="kuiGalleryButton__image" style="background-color: lightgray">
-      </div>
-
-      <div class="kuiGalleryButton__label">
-        Item B
-      </div>
-    </a>
-
-    <a class="kuiGalleryButton" href="#">
-      <div class="kuiGalleryButton__image" style="background-color: lightgray">
-      </div>
-
-      <div class="kuiGalleryButton__label">
-        Item C
-      </div>
-    </a>
-
-    <a class="kuiGalleryButton" href="#">
-      <div class="kuiGalleryButton__image" style="background-color: lightgray">
-      </div>
-
-      <div class="kuiGalleryButton__label">
-        Item D
-      </div>
-    </a>
-
-    <a class="kuiGalleryButton" href="#">
-      <div class="kuiGalleryButton__image" style="background-color: lightgray">
-      </div>
-
-      <div class="kuiGalleryButton__label">
-        Item E
-      </div>
-    </a>
-  </div>
-</div>
-
-<div class="kuiVerticalRhythm">
-  <div class="kuiSubTitle">
-    Some more items
-  </div>
-
-  <div class="kuiGallery">
-    <a class="kuiGalleryButton" href="#">
-      <div class="kuiGalleryButton__image" style="background-color: lightgray">
-      </div>
-
-      <div class="kuiGalleryButton__label">
-        Item F
-      </div>
-    </a>
-
-    <a class="kuiGalleryButton" href="#">
-      <div class="kuiGalleryButton__image" style="background-color: lightgray">
-      </div>
-
-      <div class="kuiGalleryButton__label">
-        Item G with a long label that wraps
-      </div>
-    </a>
-  </div>
-</div>

ui_framework/doc_site/src/views/gallery/gallery.js

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import {
+  KuiGallery,
+  KuiGalleryButton,
+  KuiGalleryButtonIcon,
+  KuiGalleryButtonImage,
+  KuiGalleryButtonLabel
+} from '../../../../components';
+
+export default () => {
+  /**
+  * These styles are just for demonstration purposes. It is recommended to use
+  * properly named classes instead of CSS properties in production code.
+  */
+  const imageStyle = {
+    backgroundColor: 'lightgray'
+  };
+
+  return (
+    <div>
+      <div className="kuiVerticalRhythm">
+        <h2 className="kuiSubTitle">
+          Some items
+        </h2>
+
+        <KuiGallery>
+          <KuiGalleryButton href="#">
+            <KuiGalleryButtonImage style={imageStyle}/>
+
+            <KuiGalleryButtonLabel>
+              Item A
+            </KuiGalleryButtonLabel>
+
+            <KuiGalleryButtonIcon className="fa-flask"/>
+          </KuiGalleryButton>
+
+          <KuiGalleryButton href="#">
+            <KuiGalleryButtonImage style={imageStyle}/>
+
+            <KuiGalleryButtonLabel>
+              Item B
+            </KuiGalleryButtonLabel>
+          </KuiGalleryButton>
+
+          <KuiGalleryButton>
+            <KuiGalleryButtonImage style={imageStyle}/>
+
+            <KuiGalleryButtonLabel>
+              Item C
+            </KuiGalleryButtonLabel>
+          </KuiGalleryButton>
+
+          <KuiGalleryButton>
+            <KuiGalleryButtonImage style={imageStyle}/>
+
+            <KuiGalleryButtonLabel>
+              Item D
+            </KuiGalleryButtonLabel>
+          </KuiGalleryButton>
+
+          <KuiGalleryButton>
+            <KuiGalleryButtonImage style={imageStyle}/>
+
+            <KuiGalleryButtonLabel>
+              Item E
+            </KuiGalleryButtonLabel>
+          </KuiGalleryButton>
+        </KuiGallery>
+      </div>
+
+      <div className="kuiVerticalRhythm">
+        <div className="kuiSubTitle">
+          Some more items
+        </div>
+
+        <KuiGallery>
+          <KuiGalleryButton href="#">
+            <KuiGalleryButtonImage style={imageStyle}/>
+
+            <KuiGalleryButtonLabel>
+              Item F
+            </KuiGalleryButtonLabel>
+          </KuiGalleryButton>
+
+          <KuiGalleryButton href="#">
+            <KuiGalleryButtonImage style={imageStyle}/>
+
+            <KuiGalleryButtonLabel>
+              Item G with a long label with ellipsis
+            </KuiGalleryButtonLabel>
+          </KuiGalleryButton>
+        </KuiGallery>
+      </div>
+    </div>
+  );
+};

ui_framework/doc_site/src/views/gallery/gallery_example.js

@@ -1,26 +1,38 @@
 import React from 'react';
+import { renderToHtml } from '../../services';
 
 import {
   GuideDemo,
   GuidePage,
   GuideSection,
   GuideSectionTypes,
+  GuideText
 } from '../../components';
 
-const galleryHtml = require('./gallery.html');
+import Gallery from './gallery';
+const gallerySource = require('!!raw!./gallery');
+const galleryHtml = renderToHtml(Gallery);
 
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Gallery"
       source={[{
+        type: GuideSectionTypes.JS,
+        code: gallerySource,
+      }, {
         type: GuideSectionTypes.HTML,
         code: galleryHtml,
       }]}
     >
-      <GuideDemo
-        html={galleryHtml}
-      />
+      <GuideText>
+        Use GalleryButton to show a gallery item.
+        It's an anchor and accepts all anchor properties.
+      </GuideText>
+
+      <GuideDemo>
+        <Gallery />
+      </GuideDemo>
     </GuideSection>
   </GuidePage>
 );