[UI Framework] Reactify kuiGallery and related CSS components (#12277)
* [UI Framework] Reactify kuiGallery and related CSS components
This commit is contained in:
parent
7bec60cd6e
commit
2a0ed8e367
|
@ -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>
|
||||
`;
|
19
ui_framework/components/gallery/gallery.js
Normal file
19
ui_framework/components/gallery/gallery.js
Normal file
|
@ -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,
|
||||
};
|
12
ui_framework/components/gallery/gallery.test.js
Normal file
12
ui_framework/components/gallery/gallery.test.js
Normal file
|
@ -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();
|
||||
});
|
|
@ -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>
|
||||
`;
|
|
@ -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>
|
||||
`;
|
|
@ -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>
|
||||
`;
|
|
@ -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>
|
||||
`;
|
|
@ -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,
|
||||
};
|
|
@ -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();
|
||||
});
|
|
@ -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,
|
||||
};
|
|
@ -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();
|
||||
});
|
|
@ -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,
|
||||
};
|
|
@ -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();
|
||||
});
|
|
@ -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,
|
||||
};
|
|
@ -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();
|
||||
});
|
5
ui_framework/components/gallery/index.js
Normal file
5
ui_framework/components/gallery/index.js
Normal file
|
@ -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';
|
|
@ -43,6 +43,14 @@ export {
|
|||
KuiFieldGroupSection,
|
||||
} from './form_layout';
|
||||
|
||||
export {
|
||||
KuiGallery,
|
||||
KuiGalleryButton,
|
||||
KuiGalleryButtonIcon,
|
||||
KuiGalleryButtonImage,
|
||||
KuiGalleryButtonLabel
|
||||
} from './gallery';
|
||||
|
||||
export { KuiInfoButton } from './info_button';
|
||||
|
||||
export {
|
||||
|
|
|
@ -163,6 +163,7 @@ const components = [{
|
|||
}, {
|
||||
name: 'Gallery',
|
||||
component: GalleryExample,
|
||||
hasReact: true,
|
||||
}, {
|
||||
name: 'HeaderBar',
|
||||
component: HeaderBarExample,
|
||||
|
|
|
@ -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>
|
97
ui_framework/doc_site/src/views/gallery/gallery.js
Normal file
97
ui_framework/doc_site/src/views/gallery/gallery.js
Normal file
|
@ -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>
|
||||
);
|
||||
};
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue