@workday/canvas-kit-docs 7.0.0-alpha.100-next.25 → 7.0.0-alpha.103-next.28

package/dist/commonjs/lib/specs.js

@@ -1299,6 +1299,46 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Hyperlink.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Button",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given internal hyperlinks are rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              },
+              {
+                "type": "it",
+                "name": "should render the correct text"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given external hyperlinks are rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              },
+              {
+                "type": "it",
+                "name": "should render the correct text"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Menu.spec.ts",

package/dist/es6/lib/specs.js

@@ -1299,6 +1299,46 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Hyperlink.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Button",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given internal hyperlinks are rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              },
+              {
+                "type": "it",
+                "name": "should render the correct text"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given external hyperlinks are rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              },
+              {
+                "type": "it",
+                "name": "should render the correct text"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Menu.spec.ts",

package/dist/mdx/react/button/button/Hyperlink.mdx

@@ -0,0 +1,72 @@
+import {Hyperlink, ExternalHyperlink} from '@workday/canvas-kit-react/button';
+import {Specifications} from '@workday/canvas-kit-docs';
+
+import Link from './examples/Hyperlink';
+import LinkInverse from './examples/HyperlinkInverse';
+import ExternalLink from './examples/ExternalHyperlink';
+import ExternalLinkInverse from './examples/ExternalHyperlinkInverse';
+
+
+# Canvas Kit Hyperlinks
+
+Clickable anchor elements that extend the native `<a>` element with Canvas styling.
+
+[> Workday Design Reference](https://design.workday.com/components/buttons/buttons)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+### Hyperlink
+
+`Hyperlink`s should be used when you want to navigate away from the current page or to an anchor on
+the current page.
+
+<ExampleCodeBlock code={Link} />
+
+#### Inverse
+
+`Hyperlink`s also have an `inverse` variant. Use this variant when you need to place a `Hyperlink` on a
+dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={LinkInverse} />
+
+#### Props
+
+Undocumented props are spread to the underlying `<a>` element.
+
+<ArgsTable of={Hyperlink} />
+
+### ExternalHyperlink
+
+If your link should open in a new tab or window use the `ExternalHyperlink` component. It will let
+users know about the behavior by adding an icon, `extLinkIcon`. By default, the icon has a label of
+"Opens link in new window". You can override `aria-label` of the icon by using the `iconLabel`
+prop. This override will be needed for translations.
+
+<ExampleCodeBlock code={ExternalLink} />
+
+`ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the link on a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={ExternalLinkInverse} />
+
+#### Props
+
+Undocumented props are spread to the underlying `<a>` element.
+
+<ArgsTable of={ExternalHyperlink} />
+
+### Accessible Use of the `as` Prop
+
+Like many of our components, `Hyperlink` and `ExternalHyperlink` accept an `as` prop, which lets you change the underlying
+semantic element - usually an `<a>`, or a `<button>`. This should be done with caution to ensure the
+best accessibility. Generally, `<button>` elements should be used for actions, and `<a>` elements
+should be used for navigation.
+
+## Specifications
+
+<Specifications file="Hyperlink.spec.ts" name="Hyperlink" />

package/dist/mdx/react/button/button/examples/ExternalHyperlink.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+
+export default () => (
+  <ExternalHyperlink href="https://workday.com">External Hyperlink</ExternalHyperlink>
+);

package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+export default () => (
+  <Box backgroundColor="blueberry400" padding="s">
+    <ExternalHyperlink href="https://workday.com" variant="inverse">
+      Hyperlink
+    </ExternalHyperlink>
+  </Box>
+);

package/dist/mdx/react/button/button/examples/Hyperlink.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import {Hyperlink} from '@workday/canvas-kit-react/button';
+
+export default () => <Hyperlink href="#hyperlink">Hyperlink</Hyperlink>;

package/dist/mdx/react/button/button/examples/HyperlinkInverse.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+export default () => (
+  <Box backgroundColor="blueberry400" padding="s">
+    <Hyperlink href="#hyperlink" variant="inverse">
+      Hyperlink
+    </Hyperlink>
+  </Box>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.0.0-alpha.100-next.25+911bfad3",
+  "version": "7.0.0-alpha.103-next.28+a55aeef9",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.100-next.25+911bfad3"
+    "@workday/canvas-kit-react": "^7.0.0-alpha.103-next.28+a55aeef9"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -49,5 +49,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "911bfad34147c054ac08fd77845d0a0339fd3f95"
+  "gitHead": "a55aeef97c5138c9b1144584287afa8cac6fe17f"
 }