@bitrise/bitkit 9.7.0-alpha-chakra.3 → 9.7.1

package/README.md

@@ -44,7 +44,7 @@ Cleans up the build directories
 
 #### `$ yarn lint`
 
-Runs Javascript and CSS linting
+Runs Javascript linting
 
 #### `$ yarn serve`
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.7.0-alpha-chakra.3",
+  "version": "9.7.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -40,7 +40,7 @@
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.10",
-    "framer-motion": "^6.3.1",
+    "framer-motion": "^6.3.2",
     "luxon": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -81,15 +81,15 @@
     "@types/luxon": "^2.3.1",
     "@types/prismjs": "^1.26.0",
     "@types/react": "17.0.44",
-    "@types/react-dom": "^17.0.15",
+    "@types/react-dom": "^17.0.16",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.4",
     "@types/vfile-message": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "axios": "^0.26.1",
+    "axios": "^0.27.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-polyfill-corejs2": "^0.3.1",
@@ -97,9 +97,9 @@
     "concurrently": "^7.1.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.13.0",
+    "eslint": "^8.14.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.1.4",
+    "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",

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

@@ -1,5 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { sortObjectByKey } from '@/utils/storyUtils';
+import Text from '@/Components/Text/Text';
 import Link from './Link';
 
 export default {
@@ -7,12 +8,21 @@ export default {
   component: Link,
 } as ComponentMeta<typeof Link>;
 
-const Template: ComponentStory<typeof Link> = ({ ...props }) => <Link {...props} />;
-
-export const WithProps = Template.bind({});
-WithProps.args = sortObjectByKey({
+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} />;
+WithProps.args = args;
+
+export const InsideText: ComponentStory<typeof Link> = ({ ...props }) => (
+  <Text size="2">
+    This is a text with link: <Link {...props} />
+    <br />
+    The Link inherits fontSize, but you can overwrite with size param (or sx).
+  </Text>
+);
+InsideText.args = args;

package/src/Components/Link/Link.theme.ts

@@ -1,10 +1,14 @@
+import { textSizes } from '@/Foundations/Typography/Typography';
+
 const LinkTheme = {
   baseStyle: {
     color: 'text.link',
+    fontSize: 'inherit',
     _hover: {
       color: 'text.linkHover',
     },
   },
+  ...textSizes,
 };
 
 export default LinkTheme;

package/src/Components/Link/Link.tsx

@@ -1,9 +1,11 @@
 import { Link as ChakraLink, LinkProps } from '@chakra-ui/react';
+import { TextSizes } from '@/Components/Text/Text';
 
 export interface Props {
   children: LinkProps['children'];
   href: string;
   isUnderlined?: boolean;
+  size?: TextSizes;
   sx?: LinkProps['sx'];
   target?: '_blank' | '_parent' | '_self' | '_top';
 }

package/src/Components/Text/Text.theme.ts

@@ -1,38 +1,5 @@
-const TextTheme = {
-  sizes: {
-    1: {
-      fontSize: '1',
-      lineHeight: '1',
-    },
-    2: {
-      fontSize: '2',
-      lineHeight: '2',
-    },
-    3: {
-      fontSize: '3',
-      lineHeight: '3',
-    },
-    4: {
-      fontSize: '4',
-      lineHeight: '4',
-    },
-    5: {
-      fontSize: '5',
-      lineHeight: '5',
-    },
-    6: {
-      fontSize: '6',
-      lineHeight: '6',
-    },
-    7: {
-      fontSize: '7',
-      lineHeight: '7',
-    },
-    8: {
-      fontSize: '8',
-      lineHeight: '8',
-    },
-  },
-};
+import { textSizes } from '@/Foundations/Typography/Typography';
+
+const TextTheme = textSizes;
 
 export default TextTheme;

package/src/Components/Text/Text.tsx

@@ -34,6 +34,8 @@ type TextTags =
   | 'time'
   | 'var';
 
+export type TextSizes = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
+
 export interface Props {
   align?: 'center' | 'justify' | 'left' | 'right';
   /**
@@ -51,7 +53,7 @@ export interface Props {
   /**
    * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
    */
-  size?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
+  size?: TextSizes;
   sx?: TextProps['sx'];
   textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase';
 }

package/src/Foundations/Typography/Typography.ts

@@ -29,4 +29,41 @@ const typography = {
   },
 };
 
+export const textSizes = {
+  sizes: {
+    1: {
+      fontSize: '1',
+      lineHeight: '1',
+    },
+    2: {
+      fontSize: '2',
+      lineHeight: '2',
+    },
+    3: {
+      fontSize: '3',
+      lineHeight: '3',
+    },
+    4: {
+      fontSize: '4',
+      lineHeight: '4',
+    },
+    5: {
+      fontSize: '5',
+      lineHeight: '5',
+    },
+    6: {
+      fontSize: '6',
+      lineHeight: '6',
+    },
+    7: {
+      fontSize: '7',
+      lineHeight: '7',
+    },
+    8: {
+      fontSize: '8',
+      lineHeight: '8',
+    },
+  },
+};
+
 export default typography;

package/src/Old/Button/Button.tsx

@@ -33,10 +33,10 @@ export interface Props extends FlexProps {
 
 /** Standard Button component */
 const Button: React.FunctionComponent<Props> = (props: Props) => {
-  const { borderless, fullWidth, level, size, variant, ...rest } = props;
+  const { borderless, className, fullWidth, level, size, variant, ...rest } = props;
 
   const gap = size === 'small' ? 'x1' : 'x2';
-  const classes = classnames('Button', `Button--level-${level}`, `Button--size-${size}`, {
+  const classes = classnames(className, 'Button', `Button--level-${level}`, `Button--size-${size}`, {
     'Button--borderless': borderless,
     'Button--full-width': fullWidth,
     [`Button--variant-${variant}`]: variant,

package/src/Old/Dropdown/Dropdown.tsx

@@ -30,6 +30,7 @@ export interface Props extends DropdownButtonProps {
   /** Selected value from the options */
   selected?: DropdownValue;
   maxHeight?: string;
+  menuClassName?: string;
 }
 
 /**
@@ -38,7 +39,7 @@ export interface Props extends DropdownButtonProps {
  * and custom should be done with Placement.
  */
 const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, options, onChange, selected, maxHeight, ...rest } = props;
+  const { children, options, onChange, selected, maxHeight, menuClassName, ...rest } = props;
   const [visible, setVisible] = useState(false);
 
   const handleChange = (value: DropdownValue) => {
@@ -73,7 +74,7 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
 
       <Placement onClose={() => setVisible(false)} sameWidth visible={visible}>
         {() => (
-          <DropdownMenu maxHeight={maxHeight} width="100%">
+          <DropdownMenu className={menuClassName} maxHeight={maxHeight} width="100%">
             {options.map((option) => (
               <React.Fragment key={option.text}>
                 {'options' in option ? (

package/src/Old/Dropdown/DropdownMenu.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import { Props as BaseProps } from '../Base/Base';
 import Flex from '../Flex/Flex';
 import PlacementArea from '../Placement/PlacementArea';
@@ -15,11 +16,13 @@ export interface Props extends BaseProps {
  * Parent container for DropdownMenuItems
  */
 const DropdownMenu: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, maxHeight, width, ...rest } = props;
+  const { className, children, maxHeight, width, ...rest } = props;
+
+  const classes = classNames(className, 'DropdownMenu__content');
 
   return (
     <PlacementArea {...rest} direction="vertical" paddingVertical="x4">
-      <Flex className="DropdownMenu__content" direction="vertical" maxHeight={maxHeight} width={width}>
+      <Flex className={classes} direction="vertical" maxHeight={maxHeight} width={width}>
         {children}
       </Flex>
     </PlacementArea>

package/src/Old/Table/TableHeaderCell.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import classnames from 'classnames';
+import Flex from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 import Text, { Props as TextProps } from '../Text/Text';
 import Visibility from '../Visibility/Visibility';
 import VisibilityContainer from '../Visibility/VisibilityContainer';
-import Flex from '../Flex/Flex';
 
 export type TypeTableSort = 'asc' | 'desc';
 

package/src/index.ts

@@ -8,6 +8,8 @@ export { hooks };
 export { default as Provider } from './Components/Provider/Provider';
 export { default as theme } from './theme';
 
+export type { TypeBorderRadius } from './Old/Base/Base';
+
 export { default as AddonBeam, Props as AddonBeamProps } from './Old/AddonBeam/AddonBeam';
 export { default as AddonBeamLink, Props as AddonBeamLinkProps } from './Old/AddonBeam/AddonBeamLink';
 export { default as AddonFooter, Props as AddonFooterProps } from './Old/AddonFooter/AddonFooter';