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 ); };