feat(image): update image component, docs and stories. Remove unecess…

…ary APIs

remove unecessary APIs, add support for `imageAlt`, `loading` and `fit` props

BREAKING CHANGE: `imageURL` prop is now renamed to `imageUrl`. This is simply a name change but the
functionality remains the same. `Width` prop has been removed and deprecated. Setting the image
width should be done with the default image HTML width attribute

"resolves #19", "resolves #17".

CHANGELOG.md

@@ -2,7 +2,23 @@
 
 `Camara` strictly follows [semantic versioning](https://semver.org/)
 
-## v1.0.0-beta.11 (Tue Mar 29, 2021)
+## v1.0.0-beta.12 (Wed Mar 31, 2021)
+
+- `Image` component:
+
+  - ❗ Breaking: `imageURL` prop is now renamed to `imageUrl`, both still work the same way. It's simply a name change.
+  - ❗ Breaking: `width` prop is removed and deprecated. Setting the image width can be set with default image HTML width attribute.
+  - 🆕 `imageAlt` prop sets the description of the image
+  - 🆕 `loading` prop controls if the image should be deferred when its off the screen
+  - 🆕 `fit` prop sets the image object-fit property
+
+### Authors: 1
+
+- ᑭᖇᗴᔕᕼ ᗝᑎƳᗴᗴ ([@Preshonyee](https://github.com/Preshonyee))
+
+---
+
+## v1.0.0-beta.11 (Tue Mar 30, 2021)
 
 - `Badge` component:
   - 🆕 `color` prop sets the color of the badge text

src/components/image/image.stories.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
-import { Image } from '.';
+import { Image, ImageProps } from '.';
+import { Story, Meta } from '@storybook/react/types-6-0';
 
 export default {
-  title: 'Image',
-};
+  title: 'Components/Image',
+  component: Image,
+} as Meta;
 
-export const Primary = () => (
-  <Image imageURL='https://source.unsplash.com/200x200/?beanie' width={100} />
-);
+const Template: Story<ImageProps> = (args) => <Image {...args} />;
+
+// Base default button
+export const Base = Template.bind({});

src/components/image/image.tsx

@@ -1,21 +1,51 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-export interface ImageProps {
-  width?: number;
-  imageURL?: string;
+interface StyleProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  /* Image source */
+  imageUrl?: string;
+
+  /* Image description */
+  imageAlt?: string;
+
+  /* Control if loading the image should be deferred when its off the screen */
+  loading?: 'eager' | 'lazy';
+
+  /* Set the object-fit property of the image */
+  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 }
 
+export type ImageProps = StyleProps;
+
 const StyledImage = styled.img<Partial<ImageProps>>`
-  width: ${(props) => props.width}%;
+  width: 100%;
   display: block;
-  object-fit: cover;
+  object-fit: ${(props) => props.fit};
 `;
 
-export const Image: React.FC<ImageProps> = ({ width = 100, imageURL }) => {
-  return <StyledImage src={imageURL} width={width} />;
+export const Image: React.FC<ImageProps> = ({
+  imageUrl,
+  imageAlt,
+  loading,
+  fit,
+  ...rest
+}) => {
+  return (
+    <StyledImage
+      src={imageUrl}
+      alt={imageAlt}
+      loading={loading}
+      fit={fit}
+      {...rest}
+    />
+  );
 };
 
-Image.defaultProps = {};
+Image.defaultProps = {
+  imageUrl: 'https://source.unsplash.com/1600x900/?beanie',
+  imageAlt: 'Image of person wearing a beanie',
+  fit: 'cover',
+  loading: 'lazy',
+};
 
-Image.displayName = 'ImageComponent';
+Image.displayName = 'Image';

src/index.css

@@ -0,0 +1,4 @@
+html {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}