[Terra-Image] Adds support for Decorative Image

packages/terra-core-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added examples and accessibility guide for `terra-image`.
+
 ## 1.18.0 - (January 9, 2023)
 
 * Changed

packages/terra-core-docs/src/terra-dev-site/common/layout-helpers/Whitespace.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import classNamesBind from 'classnames/bind';
+import styles from './Whitespace.module.scss';
+
+const cx = classNamesBind.bind(styles);
+
+const propTypes = {
+  /**
+   * Sets the height of a newline spacer, equivalent to number of lines based on lineheight, not fontsize.
+   * One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, default is `1`.
+   */
+  newline: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
+};
+
+const defaultProps = {
+  newline: 1,
+};
+
+const Whitespace = ({
+  newline,
+  ...customProps
+}) => {
+  const WhitespaceClassNames = classNames(
+    cx(
+      'whitespace',
+      `newline-${newline}`,
+    ),
+    customProps.className,
+  );
+
+  return <div {...customProps} className={WhitespaceClassNames} aria-hidden="true" />;
+};
+
+Whitespace.propTypes = propTypes;
+Whitespace.defaultProps = defaultProps;
+
+export default Whitespace;

packages/terra-core-docs/src/terra-dev-site/common/layout-helpers/Whitespace.module.scss

@@ -0,0 +1,48 @@
+/* 
+ * SASS calculation 
+ * based on lineheight of 20px (1.42857) for fontsize of 14px (1rem)
+ */
+@mixin terra-newline-height ($number-of-lines) {
+  height: 1.4285714286em * $number-of-lines;
+}
+
+:local {
+  .whitespace {
+    display: block;
+    margin: 0;
+    min-height: 0;
+    padding: 0;
+  }
+
+  .newline-1 {
+    @include terra-newline-height(1);
+  }
+
+  .newline-2 {
+    @include terra-newline-height(2);
+  }
+
+  .newline-3 {
+    @include terra-newline-height(3);
+  }
+
+  .newline-4 {
+    @include terra-newline-height(4);
+  }
+
+  .newline-5 {
+    @include terra-newline-height(5);
+  }
+
+  .newline-6 {
+    @include terra-newline-height(6);
+  }
+
+  .newline-7 {
+    @include terra-newline-height(7);
+  }
+
+  .newline-8 {
+    @include terra-newline-height(8);
+  }
+}

packages/terra-core-docs/src/terra-dev-site/doc/image/About.1.doc.mdx

@@ -2,6 +2,8 @@ import { Badge } from 'terra-image/package.json?dev-site-package';
 
 import ImageDefault from './example/ImageDefault?dev-site-example';
 import ImageFit from './example/ImageFitTypes?dev-site-example';
+import DecorativeImage from './example/DecorativeImage?dev-site-example';
+import InformativeImage from './example/InformativeImage?dev-site-example';
 
 import ImagePropsTable from 'terra-image/src/Image?dev-site-props-table';
 
@@ -11,6 +13,37 @@ import ImagePropsTable from 'terra-image/src/Image?dev-site-props-table';
 
 The terra-image component provides styling for visual imagery.
 
+
+# Infomative Image
+
+Informative images are images that graphically represent concepts and information on a page. images are known as informative when they convey a concept or information of image with a short phrase or sentence.
+
+Images must have text alternatives described through `alt` prop which will provide the information or function represented by them. This will ensure that images are accessible for people with various disabilities.
+
+Images may be infomative when they are:
+- Used to label other information
+- Used to supplement other information
+- Conveying succinct information
+- Conveying an impression or emotion
+- Conveying file format
+
+
+# Decorative Image
+
+Decorative images are images that don’t add information to the content of a page but instead support existing content or are used plainly for aesthetics. For example, it can be an image depicting adjacent text or to make the website more visually attractive.
+
+`DecorativeImage` should be used only when the purpose of an image is to add visual interest to the page, rather than to convey information that is important to understanding the page.
+
+Images may be decorative when they are:
+- Visual styling such as borders, spacers, and corners.
+- Supplementary to link text to improve its appearance or increase the clickable area.
+- Illustrative of adjacent text but not contributing information (“eye-candy”).
+- Identified and described by surrounding text.
+
+`DecorativeImage` is implemented in a way that it can be ignored by assistive technology.
+
+Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page.
+
 ## Getting Started
 
 - Install with [npmjs](https://www.npmjs.com):
@@ -42,6 +75,8 @@ import Image from 'terra-image';
 ## Examples
 <ImageDefault />
 <ImageFit />
+<DecorativeImage />
+<InformativeImage />
 
 ## Image Props
 <ImagePropsTable />