PR review tidying

Workday · Dec 18, 2024 · 44f8c57 · 44f8c57
1 parent 41b376d
commit 44f8c57
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 89 deletions.
diff --git 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 <Base as={Element} ref={ref} cs={headingStyles} {...props} />;

diff --git 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 <ExternalHyperlink as={Element} ref={ref} className={linkStyles} {...props} />;
+    return <Hyperlink as={Element} ref={ref} className={linkStyles} {...props} />;
   },
 });
diff --git 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
 <ExampleCodeBlock code={AttentionHigh} />
 
-## 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
+<ExampleCodeBlock code={RTL} />
+
+## 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
 <ExampleCodeBlock code={IconAttentionHigh} />
@@ -89,9 +97,6 @@ It draws the user's attention and can emphasize importance.
 ### Heading Only Example
 <ExampleCodeBlock code={Heading} />
 
-### RTL Example
-<ExampleCodeBlock code={RTL} />
-
 
 
 

diff --git 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{' '}
       </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.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
     </InformationHighlight>
   );
 };
diff --git 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 (
     <CanvasProvider theme={theme}>
       <InformationHighlight variant={'attention'} emphasis={'high'}>
-        <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.Icon icon={undefined} />
+        <InformationHighlight.Heading> انتباه! من اليمين إلى اليسار </InformationHighlight.Heading>
+        <InformationHighlight.Body>نحن ندعم اللغات من اليمين إلى اليسار</InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">وثائق</InformationHighlight.Link>
       </InformationHighlight>
     </CanvasProvider>
   );

diff --git a/modules/preview-react/InformationHighlight/stories/examples/attention.tsx b/modules/preview-react/InformationHighlight/stories/examples/attention.tsx
@@ -1,38 +1,27 @@
 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.Heading> Attention! Highlight Something </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.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
     </InformationHighlight>
   );
 };
 export const AttentionHigh = () => {
   return (
     <InformationHighlight variant={'attention'} emphasis={'high'}>
       <InformationHighlight.Icon icon={undefined} />
-      <InformationHighlight.Heading> Information Highlight </InformationHighlight.Heading>
+      <InformationHighlight.Heading> Attention! Highlight Something </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.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
     </InformationHighlight>
   );
 };
diff --git a/modules/preview-react/InformationHighlight/stories/examples/caution.tsx b/modules/preview-react/InformationHighlight/stories/examples/caution.tsx
@@ -1,38 +1,27 @@
 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.Heading> Caution: Highlight Something </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.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
     </InformationHighlight>
   );
 };
 export const CautionHigh = () => {
   return (
     <InformationHighlight variant={'caution'} emphasis={'high'}>
       <InformationHighlight.Icon icon={undefined} />
-      <InformationHighlight.Heading> Information Highlight </InformationHighlight.Heading>
+      <InformationHighlight.Heading> Caution: Highlight Something </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.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
     </InformationHighlight>
   );
 };
diff --git a/modules/preview-react/InformationHighlight/stories/examples/customIconAttention.tsx b/modules/preview-react/InformationHighlight/stories/examples/customIconAttention.tsx
@@ -1,39 +1,28 @@
 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.Heading> Attention! Custom 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.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
     </InformationHighlight>
   );
 };
 export const IconAttentionHigh = () => {
   return (
     <InformationHighlight variant={'attention'} emphasis={'high'}>
       <InformationHighlight.Icon icon={chartIcon} />
-      <InformationHighlight.Heading> Information Highlight </InformationHighlight.Heading>
+      <InformationHighlight.Heading> Attention! Custom 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.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
     </InformationHighlight>
   );
 };
diff --git a/modules/preview-react/InformationHighlight/stories/examples/informational.tsx b/modules/preview-react/InformationHighlight/stories/examples/informational.tsx
@@ -1,38 +1,27 @@
 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.Heading> Informational 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.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
     </InformationHighlight>
   );
 };
 export const InformationalHigh = () => {
   return (
     <InformationHighlight variant={'informational'} emphasis={'high'}>
       <InformationHighlight.Icon icon={undefined} />
-      <InformationHighlight.Heading> Information Highlight </InformationHighlight.Heading>
+      <InformationHighlight.Heading> Informational 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.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
     </InformationHighlight>
   );
 };