@bitrise/bitkit 9.9.0-alpha-link-release.1 → 9.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.9.0-alpha-link-release.1",
+  "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.theme.ts

@@ -1,15 +1,25 @@
 import { textSizes } from '../../Foundations/Typography/Typography';
 
+const schemeColors = {
+  purple: { color: 'purple.50', hover: 'purple.30' },
+  white: { color: 'neutral.100', hover: 'neutral.95' },
+  gray: { color: 'neutral.70', hover: 'neutral.50' },
+  default: { color: 'inherit', hover: 'inherit' },
+};
+
 const LinkTheme = {
-  baseStyle: {
-    color: 'text.link',
-    fontSize: 'inherit',
-    _focus: {
-      outline: 'none',
-    },
-    _hover: {
-      color: 'text.linkHover',
-    },
+  baseStyle: ({ colorScheme: c }: { colorScheme?: 'purple' | 'white' | 'gray' }) => {
+    const { color, hover } = schemeColors[c || 'default'];
+    return {
+      color,
+      fontSize: 'inherit',
+      _focus: {
+        outline: 'none',
+      },
+      _hover: {
+        color: hover,
+      },
+    };
   },
   ...textSizes,
 };

package/src/Components/Link/Link.tsx

@@ -1,28 +1,32 @@
-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 = {
-  isUnderlined: true,
+  as: 'a',
+  isUnderlined: false,
 } as LinkProps;
 
 export default Link;

package/src/Old/Icon/tsx/index.ts

@@ -50,7 +50,6 @@ import Coffee from './IconsCoffee';
 import Console from './IconsConsole';
 import Credit from './IconsCredit';
 import Creditcard from './IconsCreditcard';
-import Crown from './IconsCrown';
 import DeleteNope from './IconsDeleteNope';
 import Deployment from './IconsDeployment';
 import Doc from './IconsDoc';
@@ -224,7 +223,6 @@ export type TypeIconName =
   | 'Console'
   | 'Credit'
   | 'Creditcard'
-  | 'Crown'
   | 'DeleteNope'
   | 'Deployment'
   | 'Doc'
@@ -398,7 +396,6 @@ export const IconList: TypeIconName[] = [
   'Console',
   'Credit',
   'Creditcard',
-  'Crown',
   'DeleteNope',
   'Deployment',
   'Doc',
@@ -575,7 +572,6 @@ export const IconMap: {
   Console,
   Credit,
   Creditcard,
-  Crown,
   DeleteNope,
   Deployment,
   Doc,

package/src/theme.ts

@@ -34,6 +34,9 @@ const theme = {
       hr: {
         borderTopWidth: 0,
       },
+      a: {
+        textDecoration: 'none',
+      },
       '*:focus-visible': {
         boxShadow: 'outline',
         outline: 'none',