@bitrise/bitkit 9.10.0 → 9.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.10.0",
+  "version": "9.11.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Button/Button.stories.tsx

@@ -15,7 +15,4 @@ WithProps.args = sortObjectByKey({
   children: 'Button',
   isDanger: false,
   isDisabled: false,
-  href: '#',
-  target: '_self',
-  type: 'button',
 });

package/src/Components/Button/Button.tsx

@@ -1,34 +1,23 @@
-import React, { forwardRef, HTMLAttributeAnchorTarget } from 'react';
+import React, { HTMLAttributeAnchorTarget } from 'react';
 import { Button as ChakraButton, ButtonProps as ChackraButtonProps } from '@chakra-ui/react';
 import Icon from '../../Old/Icon/Icon';
 import { TypeIconName } from '../../Old/Icon/tsx';
 
-export interface LinkProps extends ChackraButtonProps {
-  as: 'a';
-  target?: HTMLAttributeAnchorTarget;
-}
-
 export interface ButtonProps extends ChackraButtonProps {
-  as?: 'button';
-}
-
-export type Props = {
-  children: string;
-  className?: string;
+  as?: 'a' | 'button';
+  href?: string;
   isDanger?: boolean;
-  isDisabled?: boolean;
   leftIconName?: TypeIconName;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  ref?: ChackraButtonProps['itemRef'];
   rightIconName?: TypeIconName;
   size?: 'small' | 'medium';
+  target?: HTMLAttributeAnchorTarget;
   variant?: 'primary' | 'secondary' | 'tertiary';
-} & (LinkProps | ButtonProps);
+}
 
 /**
  * The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
-const Button = forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
+const Button = (props: ButtonProps) => {
   const { as, isDanger, leftIconName, rightIconName, size, variant, ...rest } = props;
   const properties: ChackraButtonProps = {
     as,
@@ -42,18 +31,17 @@ const Button = forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
   if (rightIconName) {
     properties.rightIcon = <Icon name={rightIconName} />;
   }
-  if (leftIconName || rightIconName) {
+  if ((properties.leftIcon || properties.rightIcon) && !properties.iconSpacing) {
     properties.iconSpacing = size === 'medium' ? '0.625rem' : '0.375rem';
   }
 
-  return <ChakraButton ref={ref} {...properties} />;
-});
+  return <ChakraButton {...properties} />;
+};
 
 Button.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
   as: 'button',
   size: 'medium',
   variant: 'primary',
-};
+} as ButtonProps;
 
 export default Button;

package/src/Components/Link/Link.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
 import Text from '../Text/Text';
@@ -12,13 +13,12 @@ const args = sortObjectByKey({
   ...Link.defaultProps,
   children: 'The quick brown fox jumps over the lazy dog.',
   href: '#',
-  target: '_self',
 });
 
-export const WithProps: ComponentStory<typeof Link> = ({ ...props }) => <Link {...props} />;
+export const WithProps: ComponentStory<typeof Link> = (props) => <Link {...props} />;
 WithProps.args = args;
 
-export const InsideText: ComponentStory<typeof Link> = ({ ...props }) => (
+export const InsideText: ComponentStory<typeof Link> = (props) => (
   <Text size="2">
     This is a text with link: <Link {...props} />
     <br />

package/src/Components/Link/Link.tsx

@@ -1,28 +1,31 @@
-import React, { HTMLAttributeAnchorTarget } from 'react';
+import React from 'react';
 import { Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
 export interface LinkProps extends ChakraLinkProps {
+  as?: 'a' | 'button';
   colorScheme?: 'purple' | 'white' | 'gray';
   isUnderlined?: boolean;
   size?: TextSizes;
-  target?: HTMLAttributeAnchorTarget;
 }
 
 /**
- * Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an `<a>`
+ * Links are accessible elements used primarily for navigation.
  */
 const Link = (props: LinkProps) => {
-  const { isUnderlined, ...rest } = props;
-  const properties: ChakraLinkProps = { ...rest };
-  properties.as = 'a';
+  const { as, isUnderlined, ...rest } = props;
+  const properties: ChakraLinkProps = { as, ...rest };
   if (isUnderlined) {
     properties.textDecoration = 'underline';
   }
+  if (as === 'button') {
+    properties.type = 'button';
+  }
   return <ChakraLink {...properties} />;
 };
 
 Link.defaultProps = {
+  as: 'a',
   isUnderlined: false,
 } as LinkProps;