docs(image): Add local image example and wording changes to prop desc…

…riptions.

docs/scss/_examples.scss

@@ -26,13 +26,3 @@
 .docs_align-flex-start {
   align-items: flex-start;
 }
-
-[class*='rsg--'].docs_image_sample {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
-  // padding: 20px;
-}

src/components/Image/Image.jsx

@@ -8,9 +8,6 @@ import safeRest from '../../utils/safeRest'
 import styles from './Image.modules.scss'
 import borderStyles from '../Borders.modules.scss'
 
-/**
- * An image is a graphic representation of something.
- */
 const Image = ({ src, width, height, alt, rounded, ...rest }) => {
   const isCircle = rounded === 'circle'
   const isSquare = width === height
@@ -42,23 +39,23 @@ const Image = ({ src, width, height, alt, rounded, ...rest }) => {
 
 Image.propTypes = {
   /**
-   * The source attribute from img element tag
+   * The src attribute for the HTML img element.
    */
   src: PropTypes.string.isRequired,
   /**
-   * The alt attribute from img element tag for accessibility
+   * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
    */
   alt: PropTypes.string.isRequired,
   /**
-   * The width attribute from img element tag
+   * The image's width.
    */
   width: PropTypes.number.isRequired,
   /**
-   * The height attribute from img element tag
+   * The image's height.
    */
   height: PropTypes.number.isRequired,
   /**
-   * Makes the border of the image rounded (4pxs)
+   * Apply rounding.
    */
   rounded: PropTypes.oneOf(['circle', 'corners']),
 }

src/components/Image/Image.md

@@ -1,6 +1,3 @@
-
-
-```jsx { "props": { "className": "docs_image_sample" }}
-<Image src="https://image.shutterstock.com/z/stock-vector-vertical-rectangular-red-white-motivation-read-sci-fibook-poster-based-in-vintage-retro-style-keep-550670074.jpg" alt="Two happy people taking a selfie" rounded="corners" width={287} height={490}/>
-
+```jsx
+<Image src="image-example.jpg" rounded="corners" width={300} height={300} />
 ```