Skip to content

Commit

Permalink
fix: Merge pull request #24 from fayez-baig/component/image
Browse files Browse the repository at this point in the history
fix: image-component
  • Loading branch information
fayez-baig authored Oct 10, 2020
2 parents 3bb0305 + 9681ae6 commit c0d52a0
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 0 deletions.
63 changes: 63 additions & 0 deletions src/components/Elements/Image/Image.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React from 'react';
import { Story } from '@storybook/react/types-6-0';
import Image from './Image';
import { ImageProps } from './types';

const ImageSize = [
'16x16',
'24x24',
'32x32',
'48x48',
'64x64',
'96x96',
'128x128',
'square',
'1by1',
'5by4',
'4by3',
'3by2',
'16by9',
'2by1',
'3by1',
'4by5',
'3by4',
'2by3',
'3by5',
'9by16',
'1by2',
'1by3',
'fullwidth'
];
export default {
argTypes: {
alt: {
control: {
type: 'text'
}
},

imageSize: {
control: {
options: ImageSize,
type: 'select'
}
},
isRounded: {
control: {
type: 'boolean'
}
}
},
component: Image,
title: 'Elements/Image'
};

const defaultImageTemplate: Story<ImageProps> = args => <Image {...args} />;

export const Default = defaultImageTemplate.bind({});

Default.args = {
alt: 'alt-text',
imageSize: '128x128',
src: 'https://bulma.io/images/placeholders/128x128.png'
};
29 changes: 29 additions & 0 deletions src/components/Elements/Image/Image.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import { ImageProps, defaultProps } from './types';
import { getStyles } from '../../styles/getStyles';

const Image: React.FC<ImageProps> = ({
isRounded,
imageSize,
alt,
...otherImageProps
}) => {
let imageClassesStr = 'image,';
imageSize && (imageClassesStr += `is-${imageSize},`);

const classes = getStyles(imageClassesStr.split(','));

return (
<figure className={classes}>
<img
className={isRounded ? 'is-rounded' : ''}
alt={alt}
{...otherImageProps}
/>
</figure>
);
};

Image.defaultProps = defaultProps;

export default Image;
36 changes: 36 additions & 0 deletions src/components/Elements/Image/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
type Size =
| '16x16'
| '24x24'
| '32x32'
| '48x48'
| '64x64'
| '96x96'
| '128x128'
| 'square'
| '1by1'
| '5by4'
| '4by3'
| '3by2'
| '16by9'
| '2by1'
| '3by1'
| '4by5'
| '3by4'
| '2by3'
| '3by5'
| '9by16'
| '1by2'
| '1by3'
| 'fullwidth';
export interface ImageProps {
alt?: string;
imageSize?: Size;
isRounded?: boolean;
src: string;
}

export const defaultProps: ImageProps = {
alt: 'alt-text',
imageSize: '128x128',
src: 'https://bulma.io/images/placeholders/64x64.png'
};
2 changes: 2 additions & 0 deletions src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@
export { default as Button } from './Elements/Button/Button';
export { default as Block } from './Elements/Block/Block';
export { default as Box } from './Elements/Box/Box';
export { default as Image } from './Elements/Image/Image';
export { default as Notification } from './Elements/Notification/Notification';
export { default as DeleteButton } from './Elements/DeleteButton/DeleteButton';
export { default as Text } from './Elements/Text/Text';


//Form
export { default as Input } from './Form/Input/Input';
export { default as TextArea } from './Form/TextArea/TextArea';
Expand Down

0 comments on commit c0d52a0

Please sign in to comment.