@bitrise/bitkit 9.7.0-alpha-chakra.4 → 9.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.7.0-alpha-chakra.4",
+  "version": "9.7.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -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/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

@@ -6,7 +6,6 @@ import * as hooks from './Old/hooks';
 export { variables };
 export { hooks };
 export { default as Provider } from './Components/Provider/Provider';
-
 export { default as theme } from './theme';
 
 export type { TypeBorderRadius } from './Old/Base/Base';