consolidated examples and added info on emphases

modules/preview-react/InformationHighlight/stories/InformationHighlight.mdx

@@ -8,14 +8,14 @@ import * as InformationHighlight from './InformationHighlight.stories.ts';
 import { Basic } from './examples/Basic';
 import {Body} from './examples/Body';
 import {Heading} from './examples/Heading';
-import {InformationalLow} from './examples/informationalLow';
-import {CautionLow} from './examples/cautionLow';
-import {AttentionLow} from './examples/attentionLow';
-import {InformationalHigh} from './examples/informationalHigh';
-import {CautionHigh} from './examples/cautionHigh';
-import {AttentionHigh} from './examples/attentionHigh';
-import {IconAttentionHigh} from './examples/customIconAttentionHigh';
-import {IconAttentionLow} from './examples/customIconAttentionLow';
+import {Informational} from './examples/informational';
+import {Caution} from './examples/caution';
+import {Attention} from './examples/attention';
+import {InformationalHigh} from './examples/informational';
+import {CautionHigh} from './examples/caution';
+import {AttentionHigh} from './examples/attention';
+import {IconAttentionHigh} from './examples/customIconAttention';
+import {IconAttentionLow} from './examples/customIconAttention';
 import {RTL} from './examples/RTL';
 
 <Meta of={InformationHighlight} />
@@ -47,17 +47,23 @@ lower or higher contrast. If no variant or emphasis is selected the layout will
 
 ## Low Emphasis Variants
 
+The low emphasis should be used when the information highlight is competing with other more important content on the page.
+It provides information in a way that is digestible but not distracting.
+
 ### Informational
-<ExampleCodeBlock code={InformationalLow} />
+<ExampleCodeBlock code={Informational} />
 
 ### Caution
-<ExampleCodeBlock code={CautionLow} />
+<ExampleCodeBlock code={Caution} />
 
 ### Attention
-<ExampleCodeBlock code={AttentionLow} />
+<ExampleCodeBlock code={Attention} />
 
 ## High Emphasis Variants
 
+High emphasis should be used when the information highlight is not competing with other important content on the page.
+It draws the user's attention and can emphasize importance.
+
 ### Informational
 <ExampleCodeBlock code={InformationalHigh} />
 

modules/preview-react/InformationHighlight/stories/InformationHighlight.stories.ts

@@ -6,14 +6,19 @@ import {InformationHighlight} from '@workday/canvas-kit-preview-react/Informatio
 import {Basic as BasicExample} from './examples/Basic';
 import {Body as BodyExample} from './examples/Body';
 import {Heading as HeadingExample} from './examples/Heading';
-import {AttentionLow as AttentionLowExample} from './examples/attentionLow';
-import {CautionLow as CautionLowExample} from './examples/cautionLow';
-import {InformationalLow as InformationalLowExample} from './examples/informationalLow';
-import {AttentionHigh as AttentionHighExample} from './examples/attentionHigh';
-import {CautionHigh as CautionHighExample} from './examples/cautionHigh';
-import {InformationalHigh as InformationalHighExample} from './examples/informationalHigh';
-import {IconAttentionHigh as IconAttentionHighExample} from './examples/customIconAttentionHigh';
-import {IconAttentionLow as IconAttentionLowExample} from './examples/customIconAttentionLow';
+import {
+  Attention as AttentionLowExample,
+  AttentionHigh as AttentionHighExample,
+} from './examples/./attention';
+import {Caution as CautionLowExample, CautionHigh as CautionHighExample} from './examples/caution';
+import {
+  Informational as InformationalLowExample,
+  InformationalHigh as InformationalHighExample,
+} from './examples/informational';
+import {
+  IconAttentionLow as IconAttentionLowExample,
+  IconAttentionHigh as IconAttentionHighExample,
+} from './examples/customIconAttention';
 import {RTL as RTLExample} from './examples/RTL';
 
 export default {

modules/preview-react/InformationHighlight/stories/examples/attentionHigh.tsx → modules/preview-react/InformationHighlight/stories/examples/attention.tsx

@@ -2,6 +2,23 @@ import React from 'react';
 
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+export const Attention = () => {
+  return (
+    <InformationHighlight variant={'attention'}>
+      <InformationHighlight.Icon icon={undefined} />
+      <InformationHighlight.Heading> Information Highlight </InformationHighlight.Heading>
+      <InformationHighlight.Body>
+        If you select the link below it will just reroute you back to this page
+      </InformationHighlight.Body>
+      <InformationHighlight.Link
+        as={ExternalHyperlink}
+        href="https://workday.github.io/canvas-kit/?path=/docs/preview-information-highlight--docs"
+      >
+        View the Docs
+      </InformationHighlight.Link>
+    </InformationHighlight>
+  );
+};
 export const AttentionHigh = () => {
   return (
     <InformationHighlight variant={'attention'} emphasis={'high'}>

modules/preview-react/InformationHighlight/stories/examples/cautionHigh.tsx → modules/preview-react/InformationHighlight/stories/examples/caution.tsx

@@ -2,6 +2,23 @@ import React from 'react';
 
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+export const Caution = () => {
+  return (
+    <InformationHighlight variant={'caution'}>
+      <InformationHighlight.Icon icon={undefined} />
+      <InformationHighlight.Heading> Information Highlight </InformationHighlight.Heading>
+      <InformationHighlight.Body>
+        If you select the link below it will just reroute you back to this page
+      </InformationHighlight.Body>
+      <InformationHighlight.Link
+        as={ExternalHyperlink}
+        href="https://workday.github.io/canvas-kit/?path=/docs/preview-information-highlight--docs"
+      >
+        View the Docs
+      </InformationHighlight.Link>
+    </InformationHighlight>
+  );
+};
 export const CautionHigh = () => {
   return (
     <InformationHighlight variant={'caution'} emphasis={'high'}>

modules/preview-react/InformationHighlight/stories/examples/customIconAttentionHigh.tsx → modules/preview-react/InformationHighlight/stories/examples/customIconAttention.tsx

@@ -3,6 +3,23 @@ import React from 'react';
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 import {chartIcon} from '@workday/canvas-system-icons-web';
+export const IconAttentionLow = () => {
+  return (
+    <InformationHighlight variant={'attention'} emphasis={'low'}>
+      <InformationHighlight.Icon icon={chartIcon} />
+      <InformationHighlight.Heading> Information Highlight </InformationHighlight.Heading>
+      <InformationHighlight.Body>
+        A custom Icon can be added to the Information Highlight component
+      </InformationHighlight.Body>
+      <InformationHighlight.Link
+        as={ExternalHyperlink}
+        href="https://workday.github.io/canvas-kit/?path=/docs/preview-information-highlight--docs"
+      >
+        View the Docs
+      </InformationHighlight.Link>
+    </InformationHighlight>
+  );
+};
 export const IconAttentionHigh = () => {
   return (
     <InformationHighlight variant={'attention'} emphasis={'high'}>

modules/preview-react/InformationHighlight/stories/examples/informationalHigh.tsx → modules/preview-react/InformationHighlight/stories/examples/informational.tsx

@@ -2,6 +2,23 @@ import React from 'react';
 
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+export const Informational = () => {
+  return (
+    <InformationHighlight variant={'informational'}>
+      <InformationHighlight.Icon icon={undefined} />
+      <InformationHighlight.Heading> Information Highlight </InformationHighlight.Heading>
+      <InformationHighlight.Body>
+        If you select the link below it will just reroute you back to this page
+      </InformationHighlight.Body>
+      <InformationHighlight.Link
+        as={ExternalHyperlink}
+        href="https://workday.github.io/canvas-kit/?path=/docs/preview-information-highlight--docs"
+      >
+        View the Docs
+      </InformationHighlight.Link>
+    </InformationHighlight>
+  );
+};
 export const InformationalHigh = () => {
   return (
     <InformationHighlight variant={'informational'} emphasis={'high'}>