UX-223 Add Picture Component

packages/matchbox/src/components/Picture/Picture.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { layout, margin, compose } from 'styled-system';
+import styled from 'styled-components';
+import { createPropTypes } from '@styled-system/prop-types';
+import PropTypes from 'prop-types';
+import { pick } from '../../helpers/systemProps';
+import { Box } from '../Box';
+
+const system = compose(layout, margin);
+const StyledFigure = styled.figure`
+  ${system};
+  ${({ seeThrough }) => (seeThrough ? 'mix-blend-mode: multiply;' : '')}
+`;
+
+// Picture Component
+const Picture = React.forwardRef(function Picture(props, userRef) {
+  const { children, seeThrough, role, ...rest } = props;
+  const systemProps = pick(rest, system.propNames);
+  return (
+    <StyledFigure
+      as="figure"
+      m="0"
+      role={role}
+      ref={userRef}
+      seeThrough={seeThrough}
+      {...systemProps}
+    >
+      <picture>{children}</picture>
+    </StyledFigure>
+  );
+});
+
+Picture.displayName = 'Picture';
+Picture.propTypes = {
+  children: PropTypes.node, // For passing in child `<source />` elements - may have additional uses in the future, so not restricting that now
+  role: PropTypes.string,
+  seeThrough: PropTypes.bool,
+  ...createPropTypes(margin.propNames),
+  ...createPropTypes(layout.propNames),
+};
+
+// Picture.Image Component
+const Image = React.forwardRef(function Image(props, userRef) {
+  const { alt, className, src } = props;
+  return <Box as="img" alt={alt} className={className} src={src} ref={userRef} width="100%" />;
+});
+
+Image.displayName = 'Picture.Image';
+
+Image.propTypes = {
+  alt: PropTypes.string,
+  className: PropTypes.string,
+  src: PropTypes.string.isRequired,
+};
+
+Image.defaultProps = {
+  alt: '',
+};
+
+Picture.Image = Image;
+export default Picture;

packages/matchbox/src/components/Picture/index.js

@@ -0,0 +1 @@
+export { default as Picture } from './Picture';

packages/matchbox/src/components/Picture/tests/Picture.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Picture from '../Picture';
+import 'jest-styled-components';
+
+describe('Picture Components', () => {
+  const subject = props => global.mountStyled(<Picture {...props} />);
+
+  it('renders a child image correctly', () => {
+    let wrapper = subject({ children: <Picture.Image className="test" src="/test.jpg" /> });
+    expect(wrapper.find('.test')).toExist();
+    expect(wrapper.find('img').props().alt).toEqual('');
+    expect(wrapper.find('img').props().src).toEqual('/test.jpg');
+  });
+
+  it('renders a child image with alt correctly', () => {
+    let wrapper = subject({ children: <Picture.Image alt="test-alt" src="/test.jpg" /> });
+    expect(wrapper.find('img').props().alt).toEqual('test-alt');
+  });
+
+  it('renders a role correctly', () => {
+    let wrapper = subject({ role: 'presentation' });
+    expect(wrapper.find('[role="presentation"]')).toExist();
+  });
+
+  it('renders as see through', () => {
+    let wrapper = subject({ seeThrough: true });
+    expect(wrapper.find('figure')).toHaveStyleRule('mix-blend-mode', 'multiply');
+  });
+
+  it('renders system props', () => {
+    let wrapper = subject({ m: '500px', width: '100px' });
+    expect(wrapper.find('figure')).toHaveStyleRule('margin', '500px');
+    expect(wrapper.find('figure')).toHaveStyleRule('width', '100px');
+  });
+});

packages/matchbox/src/components/index.js

@@ -24,6 +24,7 @@ export * from './Page';
 export * from './Pager';
 export * from './Pagination';
 export * from './Panel';
+export * from './Picture';
 export * from './Popover';
 export * from './Portal';
 export * from './ProgressBar';

stories/media/Picture.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { Picture } from '@sparkpost/matchbox/components/Picture';
+import { Box } from '@sparkpost/matchbox/components/Box';
+import Image from '@sparkpost/matchbox-media/images/Accounts.jpg';
+
+export default {
+  title: 'media|Picture',
+};
+
+export const BasicImage = withInfo({ propTables: [Picture] })(() => (
+  <Picture>
+    <Picture.Image src={Image} />
+  </Picture>
+));
+
+export const MultiplyBackground = withInfo({ propTables: [Picture] })(() => (
+  <Box bg="blue.100">
+    <Picture seeThrough>
+      <Picture.Image src={Image} />
+    </Picture>
+  </Box>
+));
+
+export const SystemProps = withInfo({ propTables: [Picture] })(() => (
+  <Picture mx="500" width={['200px', '400px', '500px', '600px']} role="presentation">
+    <Picture.Image src={Image} />
+  </Picture>
+));