Add header examples to the main site page

packages/terra-clinical-item-view/package.json

@@ -30,6 +30,7 @@
     "classnames": "^2.2.5",
     "prop-types": "^15.5.8",
     "terra-clinical-item-display": "^4.9.0",
+    "terra-heading": "^4.52.0",
     "terra-icon": "^3.0.0",
     "terra-mixins": "^1.0.0",
     "terra-theme-context": "^1.0.0"

packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/clinicalItemView.1.doc.mdx

@@ -1,4 +1,5 @@
 import { Badge } from 'terra-clinical-item-view/package.json?dev-site-package';
+import { Notice } from "@cerner/terra-docs";
 
 import ItemViewStandard from '../example/ItemViewStandard?dev-site-example';
 import ItemViewTwoColumn from '../example/ItemViewTwoColumn?dev-site-example';
@@ -8,6 +9,8 @@ import ItemViewComment from '../example/ItemViewComment?dev-site-example';
 import ItemViewAll from '../example/ItemViewAll?dev-site-example';
 import ItemViewAllTopAligned from '../example/ItemViewAllTopAligned?dev-site-example';
 import ItemViewOverrideDefaultStyling from '../example/ItemViewOverrideDefaultStyling?dev-site-example';
+import ItemViewWithHeader from '../example/ItemViewWithHeader?dev-site-example';
+import ItemViewTwoColumnWithHeader from '../example/ItemViewTwoColumnWithHeader?dev-site-example';
 
 import ItemViewProps from 'terra-clinical-item-view/src/ItemView.jsx?dev-site-props-table';
 
@@ -32,15 +35,66 @@ import ItemView from 'terra-clinical-item-view';
 * [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
 * [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
 
+## Accessibility
+
+<Notice variant="important" ariaLevel="3">
+
+#### Accessibility Guidance: Headers
+
+For the purposes of accessibility compliance, it is **strongly** suggested to include a header element directly above
+the Clinical Item View during implementation. This ensures that the list of displays in the view have proper context.
+**The header not only acts as the main label for what the view contains, but also helps with page navigation.**
+
+Consumers can use the Terra Core Heading component found [here](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/heading/about)
+or the Clincial Header component found [here](https://engineering.cerner.com/terra-clinical/components/terra-clinical-header/clinical-header/clinical-header).
+Refer to A11y standards for how to properly implement headings in the context of your webpage. Further information can be found on the Clinical Item View accessibility guide.
+
+The following are two examples of how to implement a header for the one column and two column layouts. 
+
+</Notice>
+
+<ItemViewWithHeader
+    title="ItemView - With Header"
+/>
+<ItemViewTwoColumnWithHeader
+    title="ItemView - Two Column Layout With Header"
+/>
+
+<Notice variant="important" ariaLevel="3">
+
+#### Accessibility Guidance: Truncated Text
+
+Truncation of text can pose an accessibility concern if no method of disclosing the full text is available
+to the user. When using `isTruncated`, consumers are responsible for providing a progressive disclosure pattern
+ to disclose the full Item Display text in order to ensure that it is accessible for keyboard navigation users.
+
+**There should always be a method of accessing the truncated information. If there is no way to progressively
+disclose the full content of the truncated information, then truncation should not be used.**
+
+Some examples of progressive disclosure patterns that may be used to disclose truncated information include:
+- Accordions
+- Dialogs
+- Popovers
+- Show/Hide
+- Split Views
+- Toasts
+
+The method of disclosure **must** be accessible via keyboard interactions.
+
+Truncation should be avoided where it is not necessary. Certain content should **never** be truncated (i.e. 
+medication names and dosages in menus where the user is selecting from a list of choices).
+
+</Notice>
+
 ## Examples
 <ItemViewStandard title="ItemView - Default" />
 <ItemViewTwoColumn
     title="ItemView - Two Column Layout"
-    description="When including icons as part of an '<ItemView.Display />'', it is recommended to use the iconAlignment='inline' prop for best alignment and wrapping with the text."
+    description="When including icons as part of an '<ItemView.Display />', it is recommended to use the iconAlignment='inline' prop for best alignment and wrapping with the text."
 />
 <ItemViewTwoColumnByRow
     title="ItemView - Two Column Layout By Row"
-    description="When the `trueColumn` prop is set to `false` the displays are split two at a time into rows which are stylized to look like columns instead of true columns. So the ItemView is formatted to look like columns but programmatically it's handled by row."
+    description="When the 'trueColumn' prop is set to 'false' the displays are split two at a time into rows which are stylized to look like columns instead of true columns. So the ItemView is formatted to look like columns but programmatically it's handled by row."
 />
 <ItemViewTwoColumnStart title="ItemView - Start Emphasis" />
 <ItemViewComment title="ItemView - Comment" />

packages/terra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewTwoColumnWithHeader.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Heading from 'terra-heading';
+import IconBriefcase from 'terra-icon/lib/icon/IconBriefcase';
+import IconPerson from 'terra-icon/lib/icon/IconPerson';
+import ItemView from 'terra-clinical-item-view';
+
+const display1 = <ItemView.Display icon={<IconPerson />} iconAlignment="inline" text="Asif Khan" />;
+const display2 = <ItemView.Display icon={<IconBriefcase />} iconAlignment="inline" text="Care Position: Primary" />;
+const display3 = <ItemView.Display text="Room 100A" />;
+const display4 = <ItemView.Display text="Acuity: 5" />;
+const display5 = <ItemView.Display text="Start Time: 08-05-2016 12:00:00" />;
+const display6 = <ItemView.Display text="End Time: 08-05-2016 16:00:00" />;
+const displays = [display1, display2, display3, display4, display5, display6];
+
+export default () => (
+  <div>
+    <Heading id="heading" level={5}>Patient Information</Heading>
+    <ItemView displays={displays} layout="twoColumns" />
+  </div>
+);

packages/terra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewWithHeader.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Heading from 'terra-heading';
+import IconPerson from 'terra-icon/lib/icon/IconPerson';
+import ItemView from 'terra-clinical-item-view';
+
+const display1 = <ItemView.Display icon={<IconPerson />} iconAlignment="inline" text="Asif Khan" />;
+const display2 = <ItemView.Display text="Care Position: Primary" />;
+const display3 = <ItemView.Display text="Room 100A" />;
+const display4 = <ItemView.Display text="Acuity: 5" />;
+const display5 = <ItemView.Display text="Start Time: 08-05-2016 12:00:00" />;
+const display6 = <ItemView.Display text="End Time: 08-05-2016 16:00:00" />;
+const displays = [display1, display2, display3, display4, display5, display6];
+
+export default () => (
+  <div>
+    <Heading id="heading" level={5}>Patient Information</Heading>
+    <ItemView displays={displays} />
+  </div>
+);