ButtonLink to Tailwind

packages/orbit-components/src/Button/index.tsx

@@ -4,49 +4,16 @@ import * as React from "react";
 import cx from "clsx";
 
 import ButtonPrimitive from "../primitives/ButtonPrimitive";
-import type { Props, Size, Type } from "./types";
-
-const sizeStyles: Record<Size, string> = {
-  small: "h-button-small text-small [&_svg]:h-icon-small [&_svg]:w-icon-small",
-  normal: "h-button-normal text-normal [&_svg]:h-icon-medium [&_svg]:w-icon-medium",
-  large: "h-button-large text-large [&_svg]:h-icon-large [&_svg]:w-icon-large",
-};
-
-const paddingNoIconsStyles: Record<Size, string> = {
-  small: "px-button-padding-sm",
-  normal: "px-button-padding-md",
-  large: "px-button-padding-xl",
-};
-
-const paddingLeftIconStyles: Record<Size, string> = {
-  small: "ps-button-padding-xs pe-button-padding-sm",
-  normal: "ps-button-padding-sm pe-button-padding-md",
-  large: "ps-button-padding-lg pe-button-padding-xl",
-};
-
-const paddingRightIconStyles: Record<Size, string> = {
-  small: "ps-button-padding-sm pe-button-padding-xs",
-  normal: "ps-button-padding-md pe-button-padding-sm",
-  large: "ps-button-padding-xl pe-button-padding-lg",
-};
-
-const paddingBothIconsStyles: Record<Size, string> = {
-  small: "px-button-padding-xs",
-  normal: "px-button-padding-sm",
-  large: "px-button-padding-lg",
-};
-
-const circledStyles: Record<Size, string> = {
-  small: "rounded-button-circled-small",
-  normal: "rounded-button-circled-normal",
-  large: "rounded-button-circled-large",
-};
-
-const circledIconOnlyStyles: Record<Size, string> = {
-  small: "w-button-small",
-  normal: "w-button-normal",
-  large: "w-button-large",
-};
+import {
+  iconOnlyStyles,
+  circledStyles,
+  paddingBothIconsStyles,
+  paddingLeftIconStyles,
+  paddingNoIconsStyles,
+  paddingRightIconStyles,
+  sizeStyles,
+} from "../primitives/ButtonPrimitive/sizes";
+import type { Props, Type } from "./types";
 
 const typeStyles: Record<Type, string> = {
   primary:
@@ -97,15 +64,15 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
         disabled={disabled}
         {...props}
         className={cx(
-          "orbit-button space-x-xs rtl:space-x-reverse",
+          "space-x-xs rtl:space-x-reverse",
           sizeStyles[size],
+          children == null && iconOnlyStyles[size],
           disabled === true ? typeDisabledStyled[type] : typeStyles[type],
           children != null && iconLeft == null && iconRight == null && paddingNoIconsStyles[size],
           children != null && iconLeft != null && iconRight == null && paddingLeftIconStyles[size],
           children != null && iconLeft == null && iconRight != null && paddingRightIconStyles[size],
           children != null && iconLeft != null && iconRight != null && paddingBothIconsStyles[size],
           props.circled === true && circledStyles[size],
-          props.circled === true && children == null && circledIconOnlyStyles[size],
         )}
       >
         {children}

packages/orbit-components/src/Button/types.d.ts

@@ -8,8 +8,6 @@ import type {
   FullWidthConditionalProps,
 } from "../primitives/ButtonPrimitive/types";
 
-export type { Size };
-
 export type Type =
   | "primary"
   | "secondary"

packages/orbit-components/src/primitives/ButtonPrimitive/index.tsx

@@ -159,13 +159,13 @@ const ButtonPrimitive = React.forwardRef<HTMLButtonElement | HTMLAnchorElement,
         disabled={isDisabled}
         className={cx(
           className,
-          "orbit-button-primitive font-base duration-fast group relative max-w-full cursor-pointer items-center border-none text-center transition-all [&>*]:align-middle [&_.orbit-loading-spinner]:stroke-[currentColor]",
+          "orbit-button-primitive font-base duration-fast group relative max-w-full items-center border-none text-center leading-none transition-all [&>*]:align-middle [&_.orbit-loading-spinner]:stroke-[currentColor]",
           fullWidth && "w-full",
           centered || children == null ? "justify-center" : "justify-[var(--button-content-align)]",
           circled !== true && "rounded-large tb:rounded-normal",
           isDisabled
             ? "cursor-not-allowed opacity-30"
-            : "hover:no-underline focus:no-underline active:no-underline",
+            : "cursor-pointer hover:no-underline focus:no-underline active:no-underline",
           isLink ? "inline-flex" : "flex",
           underlined && "underline",
           boxShadowFocus != null && "outline-none",

packages/orbit-components/src/primitives/ButtonPrimitive/sizes.ts

@@ -0,0 +1,43 @@
+import type { Size } from "./types";
+
+export const sizeStyles: Record<Size, string> = {
+  small: "h-button-small text-small [&_svg]:h-icon-small [&_svg]:w-icon-small",
+  normal: "h-button-normal text-normal [&_svg]:h-icon-medium [&_svg]:w-icon-medium",
+  large: "h-button-large text-large [&_svg]:h-icon-large [&_svg]:w-icon-large",
+};
+
+export const paddingNoIconsStyles: Record<Size, string> = {
+  small: "px-button-padding-sm",
+  normal: "px-button-padding-md",
+  large: "px-button-padding-lg",
+};
+
+export const paddingLeftIconStyles: Record<Size, string> = {
+  small: "ps-button-padding-xs pe-button-padding-sm",
+  normal: "ps-button-padding-sm pe-button-padding-md",
+  large: "ps-button-padding-md pe-button-padding-lg",
+};
+
+export const paddingRightIconStyles: Record<Size, string> = {
+  small: "ps-button-padding-sm pe-button-padding-xs",
+  normal: "ps-button-padding-md pe-button-padding-sm",
+  large: "ps-button-padding-lg pe-button-padding-md",
+};
+
+export const paddingBothIconsStyles: Record<Size, string> = {
+  small: "px-button-padding-xs",
+  normal: "px-button-padding-sm",
+  large: "px-button-padding-md",
+};
+
+export const circledStyles: Record<Size, string> = {
+  small: "rounded-button-circled-small",
+  normal: "rounded-button-circled-normal",
+  large: "rounded-button-circled-large",
+};
+
+export const iconOnlyStyles: Record<Size, string> = {
+  small: "w-button-small",
+  normal: "w-button-normal",
+  large: "w-button-large",
+};

packages/orbit-components/src/tmp-tailwind/ButtonLink/ButtonLink.stories.tsx

@@ -0,0 +1,163 @@
+import * as React from "react";
+import { action } from "@storybook/addon-actions";
+import { text, number, boolean, select } from "@storybook/addon-knobs";
+
+import * as Icons from "../../icons";
+import { TYPES } from "../../ButtonLink/consts";
+import { SIZE_OPTIONS } from "../../primitives/ButtonPrimitive/common/consts";
+import RenderInRtl from "../../utils/rtl/RenderInRtl";
+import SPACINGS_AFTER from "../../common/getSpacingToken/consts";
+
+import ButtonLink from ".";
+
+const getIcons = (name: string, defaultIcon: string) =>
+  select(name, [null, ...Object.keys(Icons)], defaultIcon);
+
+const getIcon = (source: string | null) => (source ? Icons[source] : null);
+
+export default {
+  title: "tailwind/ButtonLink",
+};
+
+export const Default = () => <ButtonLink href="https://kiwi.com">ButtonLink</ButtonLink>;
+
+Default.story = {
+  parameters: {
+    info: "Link buttons have a similar look as classic links, but the area surrounding them is clickable. That makes them great to use outside of paragraphs or for less important actions in the interface. We use Link buttons only in a small and normal version.",
+  },
+};
+
+export const Secondary = () => (
+  <ButtonLink href="https://kiwi.com" type="secondary">
+    ButtonLink
+  </ButtonLink>
+);
+
+Secondary.story = {
+  parameters: {
+    info: "Link buttons have a similar look as classic links, but the area surrounding them is clickable. That makes them great to use outside of paragraphs or for less important actions in the interface. We use Link buttons only in a small and normal version.",
+  },
+};
+
+export const Critical = () => (
+  <ButtonLink onClick={action("onClick")} type="critical">
+    ButtonLink
+  </ButtonLink>
+);
+
+Critical.story = {
+  parameters: {
+    info: "Link buttons have a similar look as classic links, but the area surrounding them is clickable. That makes them great to use outside of paragraphs or for less important actions in the interface. We use Link buttons only in a small and normal version.",
+  },
+};
+
+export const Circled = () => {
+  const circled = boolean("circled", true);
+  const type = select("Type", Object.values(TYPES), TYPES.SECONDARY);
+  const size = select("Size", Object.values(SIZE_OPTIONS), SIZE_OPTIONS.LARGE);
+  const IconLeft = getIcon(getIcons("iconLeft", "Airplane"));
+
+  return (
+    <ButtonLink
+      type={type}
+      size={size}
+      iconLeft={IconLeft && <IconLeft />}
+      onClick={action("clicked")}
+      circled={circled}
+      title="Button"
+    />
+  );
+};
+
+Circled.story = {
+  parameters: {
+    info: "Link buttons have a similar look as classic links, but the area surrounding them is clickable. That makes them great to use outside of paragraphs or for less important actions in the interface. We use Link buttons only in a small and normal version.",
+  },
+};
+
+export const Playground = () => {
+  const children = text("Children", "ButtonLink");
+  const disabled = boolean("Disabled", false);
+  const fullWidth = boolean("fullWidth", false);
+  const type = select("Type", Object.values(TYPES), TYPES.SECONDARY);
+  const size = select("Size", Object.values(SIZE_OPTIONS), SIZE_OPTIONS.LARGE);
+  const width = number("Width", NaN);
+  const IconLeft = getIcon(getIcons("iconLeft", "Airplane"));
+  const IconRight = getIcon(getIcons("iconRight", "ChevronDown"));
+  const href = text("Href", "");
+  const dataTest = text("dataTest", "test");
+  const external = boolean("External", false);
+  const compact = boolean("compact", false);
+  const submit = boolean("Submit", false);
+  const ariaExpanded = boolean("Aria expanded", false);
+  const ariaControls = text("Aria controls", "element ID");
+  const tabIndex = text("tabIndex", "0");
+  const spaceAfter = select("spaceAfter", [undefined, ...Object.values(SPACINGS_AFTER)], undefined);
+  const title = text("Title", "Additional information for accessibility");
+  const rel = text("Rel", "nofollow");
+
+  return (
+    <ButtonLink
+      disabled={disabled}
+      fullWidth={fullWidth}
+      type={type}
+      size={size}
+      href={href}
+      dataTest={dataTest}
+      iconLeft={IconLeft && <IconLeft />}
+      iconRight={IconRight && <IconRight />}
+      width={String(width)}
+      external={external}
+      onClick={action("clicked")}
+      compact={compact}
+      submit={submit}
+      ariaExpanded={ariaExpanded}
+      ariaControls={ariaControls}
+      tabIndex={tabIndex}
+      spaceAfter={spaceAfter}
+      title={title}
+      rel={rel}
+    >
+      {children}
+    </ButtonLink>
+  );
+};
+
+Playground.story = {
+  parameters: {
+    info: "Link buttons have a similar look as classic links, but the area surrounding them is clickable. That makes them great to use outside of paragraphs or for less important actions in the interface. We use Link buttons only in a small and normal version.",
+  },
+};
+
+export const Accessibility = () => {
+  const children = text("Children", "ButtonLink");
+  const ariaExpanded = boolean("Aria expanded", false);
+  const ariaControls = text("Aria controls", "element ID");
+  const title = text("Title", "Additional information for accessibility");
+
+  return (
+    <ButtonLink ariaExpanded={ariaExpanded} ariaControls={ariaControls} title={title}>
+      {children}
+    </ButtonLink>
+  );
+};
+
+Accessibility.story = {
+  parameters: {
+    info: "This is a preview of component accessibility props",
+  },
+};
+
+export const Rtl = () => (
+  <RenderInRtl>
+    <ButtonLink iconLeft={<Icons.Airplane />}>ButtonLink</ButtonLink>
+  </RenderInRtl>
+);
+
+Rtl.story = {
+  name: "RTL",
+
+  parameters: {
+    info: "This is a preview of this component in RTL setup.",
+  },
+};