@kaizen/components 0.0.0-canary-link-button-wip-canary-20241121010628 → 0.0.0-canary-link-button-wip-canary-20241121043208

package/dist/cjs/__actions__/LinkButton/v3/LinkButton.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var buttonStyles = require('~components/__actions__/Button/v3/Button.module.css');
+require('classnames');
+require('../../../Loading/LoadingGraphic/LoadingGraphic.cjs');
+require('../../../Loading/LoadingHeading/LoadingHeading.cjs');
+require('../../../Loading/LoadingInput/LoadingInput.cjs');
+require('../../../Loading/LoadingParagraph/LoadingParagraph.cjs');
+require('../../../Loading/LoadingSpinner/LoadingSpinner.cjs');
+require('../../../VisuallyHidden/VisuallyHidden.cjs');
+var ButtonContent = require('../../Button/v3/subcomponents/ButtonContent/ButtonContent.cjs');
+var mergeClassNames = require('../../../utils/mergeClassNames.cjs');
+var LinkButton_module = require('./LinkButton.module.css.cjs');
+var ReversedColors = require('../../../__utilities__/ReversedColors/v3/ReversedColors.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var buttonStyles__default = /*#__PURE__*/_interopDefault(buttonStyles);
+var LinkButton = React.forwardRef(function (_a, ref) {
+  var children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    _c = _a.size,
+    size = _c === void 0 ? "medium" : _c,
+    icon = _a.icon,
+    _d = _a.iconPosition,
+    iconPosition = _d === void 0 ? "start" : _d,
+    _e = _a.hasHiddenLabel,
+    hasHiddenLabel = _e === void 0 ? false : _e,
+    _f = _a.isFullWidth,
+    isFullWidth = _f === void 0 ? false : _f,
+    isDisabled = _a.isDisabled,
+    className = _a.className,
+    otherProps = tslib.__rest(_a, ["children", "variant", "size", "icon", "iconPosition", "hasHiddenLabel", "isFullWidth", "isDisabled", "className"]);
+  var isReversed = ReversedColors.useReversedColors();
+  return React__default.default.createElement(reactAriaComponents.Link, tslib.__assign({
+    ref: ref,
+    className: mergeClassNames.mergeClassNames(LinkButton_module.linkButton, buttonStyles__default.default.button, buttonStyles__default.default[size], hasHiddenLabel && buttonStyles__default.default["".concat(size, "IconButton")], isDisabled && buttonStyles__default.default.isDisabled, isReversed ? buttonStyles__default.default["".concat(variant, "Reversed")] : buttonStyles__default.default[variant], isFullWidth && buttonStyles__default.default.fullWidth, className),
+    isDisabled: isDisabled
+  }, otherProps), function (racStateProps) {
+    var childIsFunction = typeof children === "function";
+    return React__default.default.createElement(ButtonContent.ButtonContent, {
+      size: size,
+      icon: icon,
+      iconPosition: iconPosition,
+      hasHiddenLabel: hasHiddenLabel
+    }, childIsFunction ? children(racStateProps) : children);
+  });
+});
+exports.LinkButton = LinkButton;

package/dist/cjs/__actions__/LinkButton/v3/LinkButton.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "linkButton": "LinkButton-module_linkButton__1kdGO"
+};
+module.exports = styles;

package/dist/cjs/actionsV3.cjs

@@ -4,7 +4,9 @@ var Menu = require('./__actions__/Menu/v3/Menu.cjs');
 var MenuItem = require('./__actions__/Menu/v3/MenuItem.cjs');
 var MenuTrigger = require('./__actions__/Menu/v3/MenuTrigger.cjs');
 var Button = require('./__actions__/Button/v3/Button.cjs');
+var LinkButton = require('./__actions__/LinkButton/v3/LinkButton.cjs');
 exports.Menu = Menu.Menu;
 exports.MenuItem = MenuItem.MenuItem;
 exports.MenuTrigger = MenuTrigger.MenuTrigger;
 exports.Button = Button.Button;
+exports.LinkButton = LinkButton.LinkButton;

package/dist/esm/__actions__/LinkButton/v3/LinkButton.mjs

@@ -0,0 +1,47 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { Link } from 'react-aria-components';
+import buttonStyles from '~components/__actions__/Button/v3/Button.module.css';
+import 'classnames';
+import '../../../Loading/LoadingGraphic/LoadingGraphic.mjs';
+import '../../../Loading/LoadingHeading/LoadingHeading.mjs';
+import '../../../Loading/LoadingInput/LoadingInput.mjs';
+import '../../../Loading/LoadingParagraph/LoadingParagraph.mjs';
+import '../../../Loading/LoadingSpinner/LoadingSpinner.mjs';
+import '../../../VisuallyHidden/VisuallyHidden.mjs';
+import { ButtonContent } from '../../Button/v3/subcomponents/ButtonContent/ButtonContent.mjs';
+import { mergeClassNames } from '../../../utils/mergeClassNames.mjs';
+import styles from './LinkButton.module.css.mjs';
+import { useReversedColors } from '../../../__utilities__/ReversedColors/v3/ReversedColors.mjs';
+var LinkButton = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    _c = _a.size,
+    size = _c === void 0 ? "medium" : _c,
+    icon = _a.icon,
+    _d = _a.iconPosition,
+    iconPosition = _d === void 0 ? "start" : _d,
+    _e = _a.hasHiddenLabel,
+    hasHiddenLabel = _e === void 0 ? false : _e,
+    _f = _a.isFullWidth,
+    isFullWidth = _f === void 0 ? false : _f,
+    isDisabled = _a.isDisabled,
+    className = _a.className,
+    otherProps = __rest(_a, ["children", "variant", "size", "icon", "iconPosition", "hasHiddenLabel", "isFullWidth", "isDisabled", "className"]);
+  var isReversed = useReversedColors();
+  return /*#__PURE__*/React.createElement(Link, __assign({
+    ref: ref,
+    className: mergeClassNames(styles.linkButton, buttonStyles.button, buttonStyles[size], hasHiddenLabel && buttonStyles["".concat(size, "IconButton")], isDisabled && buttonStyles.isDisabled, isReversed ? buttonStyles["".concat(variant, "Reversed")] : buttonStyles[variant], isFullWidth && buttonStyles.fullWidth, className),
+    isDisabled: isDisabled
+  }, otherProps), function (racStateProps) {
+    var childIsFunction = typeof children === "function";
+    return /*#__PURE__*/React.createElement(ButtonContent, {
+      size: size,
+      icon: icon,
+      iconPosition: iconPosition,
+      hasHiddenLabel: hasHiddenLabel
+    }, childIsFunction ? children(racStateProps) : children);
+  });
+});
+export { LinkButton };

package/dist/esm/__actions__/LinkButton/v3/LinkButton.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "linkButton": "LinkButton-module_linkButton__1kdGO"
+};
+export { styles as default };

package/dist/esm/actionsV3.mjs

@@ -2,3 +2,4 @@ export { Menu } from './__actions__/Menu/v3/Menu.mjs';
 export { MenuItem } from './__actions__/Menu/v3/MenuItem.mjs';
 export { MenuTrigger } from './__actions__/Menu/v3/MenuTrigger.mjs';
 export { Button } from './__actions__/Button/v3/Button.mjs';
+export { LinkButton } from './__actions__/LinkButton/v3/LinkButton.mjs';

package/dist/styles.css

@@ -308,6 +308,11 @@
   visibility: hidden;
 }
 
+.LinkButton-module_linkButton__1kdGO {
+  /* Reset */
+  text-decoration: inherit;
+}
+
 .PendingContent-module_pendingContent__c4IFS {
   display: inline-flex;
   align-items: center;

package/dist/types/__actions__/v3.d.ts

@@ -1,2 +1,3 @@
 export * from "./Menu/v3";
 export * from "./Button/v3";
+export * from "./LinkButton/v3";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-link-button-wip-canary-20241121010628",
+  "version": "0.0.0-canary-link-button-wip-canary-20241121043208",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -118,8 +118,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.0",
     "tsx": "^4.19.2",
-    "@kaizen/design-tokens": "10.8.4",
-    "@kaizen/package-bundler": "2.0.1"
+    "@kaizen/package-bundler": "2.0.1",
+    "@kaizen/design-tokens": "10.8.4"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/__actions__/LinkButton/v3/LinkButton.tsx

@@ -49,6 +49,7 @@ export const LinkButton = forwardRef(
           isFullWidth && buttonStyles.fullWidth,
           className
         )}
+        isDisabled={isDisabled}
         {...otherProps}
       >
         {racStateProps => {

package/src/__actions__/LinkButton/v3/_docs/LinkButton--api-specification.mdx

@@ -103,6 +103,16 @@ function ReactRouterApp() {
 
 Additional notes can be found in the React Aria's documentation on the using the `RouterProvider` with [React Router](https://react-spectrum.adobe.com/react-aria/routing.html#react-router).
 
+### Target `_blank` and opening in a new tab
+
+The general recommendation is to limit the number of links that open in a new tab or window on a page. While there are valid scenarios that help avoid loss of data and or progress on a page, opening a new tab or window can be disorienting for users, especially those who have difficulty perceiving visual content.
+
+In order to provide advance warning to all users, it is recommended that `LinkButton`'s that use `target="_blank"` be accompanied by a visual indicator and audible warning, as in the example below.
+
+<Canvas of={exampleStories.LinkButtonOpensInNewTab} />
+
+You can get more context on this recommendation via the [W3C page on the G200 success criteria](https://www.w3.org/TR/WCAG20-TECHS/G200.html).
+
 ### Variants
 
 `LinkButton` supports the following variants: `primary`, `secondary` and `tertiary`. If the `variant` prop is not specified, the default will be `primary`.

package/src/__actions__/LinkButton/v3/_docs/LinkButton.doc.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react"
-// import { action } from "@storybook/addon-actions"
 import { Meta, StoryObj } from "@storybook/react"
-import { Badge } from "~components/Badge"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import { Icon } from "~components/__future__"
 import { ReversedColors } from "~components/__utilities__/v3"
 import { LinkButton } from "../index"
@@ -22,6 +21,21 @@ type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {}
 
+export const LinkButtonOpensInNewTab: Story = {
+  args: {
+    children: (
+      <>
+        Label
+        <VisuallyHidden> opens a new tab</VisuallyHidden>
+      </>
+    ),
+    href: "https://www.google.com",
+    target: "_blank",
+    icon: <Icon isPresentational name="open_in_new" shouldMirrorInRTL />,
+    iconPosition: "end",
+  },
+}
+
 export const LinkButtonVariants: Story = {
   render: args => (
     <>
@@ -116,16 +130,3 @@ export const LinkButtonFullWidth: Story = {
     isFullWidth: true,
   },
 }
-
-export const LinkButtonWithBadge: Story = {
-  args: {
-    children: (
-      <>
-        Label
-        <Badge classNameOverride="ms-8" size="small">
-          3
-        </Badge>
-      </>
-    ),
-  },
-}

package/src/__actions__/LinkButton/v3/_docs/LinkButton.stickersheet.stories.tsx

@@ -0,0 +1,176 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { within } from "@storybook/test"
+import { Icon } from "~components/__future__/Icon"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { LinkButton, LinkButtonProps } from "../index"
+
+export default {
+  title: "Actions/LinkButton/LinkButton (v3)",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const variants = ["primary", "secondary", "tertiary"] satisfies Array<
+  LinkButtonProps["variant"]
+>
+const sizes = ["small", "medium", "large"] satisfies Array<
+  LinkButtonProps["size"]
+>
+
+const RowTemplate = ({
+  isReversed = false,
+}: {
+  isReversed?: boolean
+}): JSX.Element => (
+  <>
+    {variants.map(variant =>
+      sizes.map(size => (
+        <StickerSheet.Row
+          key={size + variant}
+          isReversed={isReversed}
+          rowTitle={`${variant} (${size})`}
+        >
+          <LinkButton variant={variant} size={size}>
+            Label
+          </LinkButton>
+          <LinkButton
+            icon={<Icon name="add" isPresentational />}
+            variant={variant}
+            size={size}
+          >
+            Label
+          </LinkButton>
+          <LinkButton
+            icon={
+              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
+            }
+            iconPosition="end"
+            variant={variant}
+            size={size}
+          >
+            Label
+          </LinkButton>
+          <LinkButton
+            icon={<Icon name="delete" isPresentational />}
+            variant={variant}
+            hasHiddenLabel
+            size={size}
+          >
+            Label
+          </LinkButton>
+          <LinkButton
+            icon={
+              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
+            }
+            iconPosition="end"
+            variant={variant}
+            size={size}
+            isDisabled
+          >
+            Label
+          </LinkButton>
+        </StickerSheet.Row>
+      ))
+    )}
+  </>
+)
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <>
+      <StickerSheet heading="Button" isReversed={isReversed}>
+        <StickerSheet.Header
+          headings={[
+            "Base",
+            "Icon start",
+            "Icon end",
+            "hasHiddenLabel",
+            "isDisabled",
+          ]}
+          headingsWidth="10rem"
+          hasVerticalHeadings
+          verticalHeadingsWidth="12rem"
+        />
+        <StickerSheet.Body>
+          <RowTemplate isReversed={isReversed} />
+        </StickerSheet.Body>
+      </StickerSheet>
+      <StickerSheet heading="Pseudo states" isReversed={isReversed}>
+        <StickerSheet.Header
+          headings={["isHovered", "isFocusVisible", "isPressed"]}
+          headingsWidth="10rem"
+          hasVerticalHeadings
+          verticalHeadingsWidth="12rem"
+        />
+        <StickerSheet.Body>
+          {variants.map(variant => (
+            <StickerSheet.Row
+              key={variant}
+              isReversed={isReversed}
+              rowTitle={variant}
+            >
+              <LinkButton data-testid="testid__button-hover" variant={variant}>
+                Label
+              </LinkButton>
+              <LinkButton data-testid="testid__button-focus" variant={variant}>
+                Label
+              </LinkButton>
+              <LinkButton
+                data-testid="testid__button-pressed"
+                variant={variant}
+              >
+                Label
+              </LinkButton>
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
+      </StickerSheet>
+    </>
+  ),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const focusButtons = canvas.getAllByTestId("testid__button-focus")
+    const hoverButtons = canvas.getAllByTestId("testid__button-hover")
+    const pressedButton = canvas.getAllByTestId("testid__button-pressed")
+
+    focusButtons.forEach(button => {
+      button.setAttribute("data-focus-visible", "true")
+    })
+    hoverButtons.forEach(button => {
+      button.setAttribute("data-hovered", "true")
+    })
+    pressedButton.forEach(button => {
+      button.setAttribute("data-pressed", "true")
+    })
+  },
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: {
+    textDirection: "rtl",
+  },
+}
+
+export const StickerSheetReversed: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Reversed)",
+  parameters: {
+    reverseColors: true,
+  },
+  args: {
+    isReversed: true,
+  },
+}

package/src/__actions__/v3.ts

@@ -1,2 +1,3 @@
 export * from "./Menu/v3"
 export * from "./Button/v3"
+export * from "./LinkButton/v3"