@workday/canvas-kit-docs 7.0.0-alpha.102-next.27 → 7.0.0-alpha.106-next.2

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/TESTING.mdx

@@ -162,7 +162,7 @@ different, but this will prevent snapshot tests that don't have any changes from
 
 ## Functional tests
 
-Canvas Kit uses [Cypress][https://cypress.io] for browser-based behavior testing (additional info:
+Canvas Kit uses [Cypress](https://cypress.io) for browser-based behavior testing (additional info:
 [Why Cypress?](https://github.com/Workday/canvas-kit/tree/master/cypress/WHY_CYPRESS.md)).
 Functional tests ensure the code meets functional specifications from a user's perspective. All
 functional tests are written against a Storybook Story. Specifications can come from many different

package/dist/mdx/react/action-bar/examples/OverflowActionBar.tsx

@@ -7,7 +7,6 @@ import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
 type MyActionItem = {
   id: string;
   text: React.ReactNode;
-  as?: any;
 };
 
 export default () => {

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/dist/mdx/react/button/button/examples/Tertiary.tsx

@@ -5,8 +5,6 @@ import {HStack} from '@workday/canvas-kit-react/layout';
 import {
   plusIcon,
   relatedActionsVerticalIcon,
-  arrowLeftIcon,
-  arrowRightIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
 

package/dist/mdx/react/layout/Stack.mdx

@@ -99,7 +99,7 @@ hatches for when the default behavior becomes forced. Should you find none of th
 for your use case, we recommend using `Flex` instead of `Stack`, which will provide you with more
 flexibility.
 
-#### Valid Children
+### Valid Children
 
 Because `Stack` applies styles to children, it requires its immediate children to be valid child
 elements. For example, text outside of an HTML tag would not render if it was an immediate `Stack`

package/dist/mdx/react/tabs/Tabs.mdx

@@ -75,9 +75,9 @@ trigger an event to change the active tab.
 
 ### Named Tabs
 
-`Tabs.Item` and `Tabs.Panel` both take an optional `name` attribute that is used for the
-`onActivate` callback. This example is identical to the Basic Example, but with named tabs for the
-`Tabs.Item` and `Tabs.Panel` subcomponents.
+`Tabs.Item` and `Tabs.Panel` both take an optional `data-id` attribute that is used for the
+`onActivate` callback. This example is identical to the Basic Example, but with tabs named using
+`data-id` for the `Tabs.Item` and `Tabs.Panel` subcomponents.
 
 <ExampleCodeBlock code={NamedTabs} />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.0.0-alpha.102-next.27+a618e6a9",
+  "version": "7.0.0-alpha.106-next.2+ab2883e3",
   "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.102-next.27+a618e6a9"
+    "@workday/canvas-kit-react": "^7.0.0-alpha.106-next.2+ab2883e3"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -49,5 +49,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "a618e6a972dc1d5d577833b94d71e4e3be761f11"
+  "gitHead": "ab2883e3305013c8a9048ea7b67d4012659c2516"
 }