diff --git a/modules/preview-react/InformationHighlight/lib/parts/Heading.tsx b/modules/preview-react/InformationHighlight/lib/parts/Heading.tsx
index ca650ba47f..cb40550395 100644
--- a/modules/preview-react/InformationHighlight/lib/parts/Heading.tsx
+++ b/modules/preview-react/InformationHighlight/lib/parts/Heading.tsx
@@ -10,9 +10,11 @@ const headingStyles = createStyles({
color: base.blackPepper400,
gridColumn: '2',
fontWeight: system.fontWeight.bold,
+ marginTop: system.space.zero,
+ marginBottom: system.space.zero,
});
-export const Heading = createComponent('div')({
+export const Heading = createComponent('h3')({
displayName: 'Heading',
Component: (props, ref, Element) => {
return ;
diff --git a/modules/preview-react/InformationHighlight/lib/parts/Link.tsx b/modules/preview-react/InformationHighlight/lib/parts/Link.tsx
index 39ecbad656..10c356e72d 100644
--- a/modules/preview-react/InformationHighlight/lib/parts/Link.tsx
+++ b/modules/preview-react/InformationHighlight/lib/parts/Link.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+import {Hyperlink} from '@workday/canvas-kit-react/button';
import {createComponent} from '@workday/canvas-kit-react/common';
import {createStyles, cssVar} from '@workday/canvas-kit-styling';
import {base, system} from '@workday/canvas-tokens-web';
@@ -12,9 +12,9 @@ const linkStyles = createStyles({
fontWeight: system.fontWeight.bold,
});
-export const Link = createComponent('div')({
+export const Link = createComponent('a')({
displayName: 'Link',
Component: (props, ref, Element) => {
- return ;
+ return ;
},
});
diff --git a/modules/preview-react/InformationHighlight/stories/InformationHighlight.mdx b/modules/preview-react/InformationHighlight/stories/InformationHighlight.mdx
index cafbdec03d..3827518871 100644
--- a/modules/preview-react/InformationHighlight/stories/InformationHighlight.mdx
+++ b/modules/preview-react/InformationHighlight/stories/InformationHighlight.mdx
@@ -73,9 +73,17 @@ It draws the user's attention and can emphasize importance.
### Attention
-## Partial Custom Information Highlights
+## Right-to-Left (RTL) Support
-`Information Highlights` can use custom icons or be designed to only use certain features
+`Information Highlight` is compatible with right-to-left (RTL) languages. The layout will automatically adjust to RTL
+if a custom theme with a direction of `ContentDirection.RTL` is provided.
+
+### RTL Example
+
+
+## Partial and Custom Information Highlights
+
+`Information Highlights` can use custom icons or be designed to only use some of its components.
### Custom Icon: Attention, High Emphasis
@@ -89,9 +97,6 @@ It draws the user's attention and can emphasize importance.
### Heading Only Example
-### RTL Example
-
-
diff --git a/modules/preview-react/InformationHighlight/stories/examples/Basic.tsx b/modules/preview-react/InformationHighlight/stories/examples/Basic.tsx
index b9762a18ff..1a4856b9ea 100644
--- a/modules/preview-react/InformationHighlight/stories/examples/Basic.tsx
+++ b/modules/preview-react/InformationHighlight/stories/examples/Basic.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
-import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
export const Basic = () => {
return (
@@ -13,12 +12,7 @@ export const Basic = () => {
This is what an information highlight would look like with with the default settings and
every field filled in{' '}
-
- View the Docs
-
+ View the Docs
);
};
diff --git a/modules/preview-react/InformationHighlight/stories/examples/RTL.tsx b/modules/preview-react/InformationHighlight/stories/examples/RTL.tsx
index 4367b1d8c8..ceef7effd4 100644
--- a/modules/preview-react/InformationHighlight/stories/examples/RTL.tsx
+++ b/modules/preview-react/InformationHighlight/stories/examples/RTL.tsx
@@ -1,8 +1,6 @@
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';
import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
export const RTL = () => {
const theme = {
@@ -13,17 +11,10 @@ export const RTL = () => {
return (
-
- Information Highlight
-
- A custom Icon can be added to the Information Highlight component
-
-
- View the Docs
-
+
+ انتباه! من اليمين إلى اليسار
+ نحن ندعم اللغات من اليمين إلى اليسار
+ وثائق
);
diff --git a/modules/preview-react/InformationHighlight/stories/examples/attention.tsx b/modules/preview-react/InformationHighlight/stories/examples/attention.tsx
index df95c434ee..91a3df4ee6 100644
--- a/modules/preview-react/InformationHighlight/stories/examples/attention.tsx
+++ b/modules/preview-react/InformationHighlight/stories/examples/attention.tsx
@@ -1,21 +1,15 @@
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 (
- Information Highlight
+ Attention! Highlight Something
If you select the link below it will just reroute you back to this page
-
- View the Docs
-
+ View the Docs
);
};
@@ -23,16 +17,11 @@ export const AttentionHigh = () => {
return (
- Information Highlight
+ Attention! Highlight Something
If you select the link below it will just reroute you back to this page
-
- View the Docs
-
+ View the Docs
);
};
diff --git a/modules/preview-react/InformationHighlight/stories/examples/caution.tsx b/modules/preview-react/InformationHighlight/stories/examples/caution.tsx
index 7972acda0f..a143ed0d5f 100644
--- a/modules/preview-react/InformationHighlight/stories/examples/caution.tsx
+++ b/modules/preview-react/InformationHighlight/stories/examples/caution.tsx
@@ -1,21 +1,15 @@
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 (
- Information Highlight
+ Caution: Highlight Something
If you select the link below it will just reroute you back to this page
-
- View the Docs
-
+ View the Docs
);
};
@@ -23,16 +17,11 @@ export const CautionHigh = () => {
return (
- Information Highlight
+ Caution: Highlight Something
If you select the link below it will just reroute you back to this page
-
- View the Docs
-
+ View the Docs
);
};
diff --git a/modules/preview-react/InformationHighlight/stories/examples/customIconAttention.tsx b/modules/preview-react/InformationHighlight/stories/examples/customIconAttention.tsx
index 154ee7a8d3..be5212184c 100644
--- a/modules/preview-react/InformationHighlight/stories/examples/customIconAttention.tsx
+++ b/modules/preview-react/InformationHighlight/stories/examples/customIconAttention.tsx
@@ -1,22 +1,16 @@
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 (
- Information Highlight
+ Attention! Custom Highlight
A custom Icon can be added to the Information Highlight component
-
- View the Docs
-
+ View the Docs
);
};
@@ -24,16 +18,11 @@ export const IconAttentionHigh = () => {
return (
- Information Highlight
+ Attention! Custom Highlight
A custom Icon can be added to the Information Highlight component
-
- View the Docs
-
+ View the Docs
);
};
diff --git a/modules/preview-react/InformationHighlight/stories/examples/informational.tsx b/modules/preview-react/InformationHighlight/stories/examples/informational.tsx
index 3f6a31c770..b49bf7d0aa 100644
--- a/modules/preview-react/InformationHighlight/stories/examples/informational.tsx
+++ b/modules/preview-react/InformationHighlight/stories/examples/informational.tsx
@@ -1,21 +1,15 @@
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 (
- Information Highlight
+ Informational Highlight
If you select the link below it will just reroute you back to this page
-
- View the Docs
-
+ View the Docs
);
};
@@ -23,16 +17,11 @@ export const InformationalHigh = () => {
return (
- Information Highlight
+ Informational Highlight
If you select the link below it will just reroute you back to this page
-
- View the Docs
-
+ View the Docs
);
};