@bitrise/bitkit 11.2.3 → 11.3.1-alpha-chakra.1

package/package.json

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

package/src/Components/{Accordion → AccordionLegacy}/Accordion.theme.ts

@@ -61,7 +61,7 @@ const colors: ColorObj = {
 };
 
 const variants: VariantObj = {
-  default: {
+  legacy: {
     borderRadius: '8',
     boxShadow: 'small',
   },

package/src/Components/{Accordion/Accordion.tsx → AccordionLegacy/LegacyAccordion.tsx}

@@ -6,13 +6,13 @@ import {
   usePrefersReducedMotion,
 } from '@chakra-ui/react';
 
-export interface AccordionProps extends Omit<ChakraAccordionProps, 'onChange'> {
+export interface LegacyAccordionProps extends Omit<ChakraAccordionProps, 'onChange'> {
   colorScheme?: 'white' | 'gray' | 'orange';
-  variant?: 'default' | 'flat';
+  variant?: 'flat' | 'legacy';
   onChange?: (ids: string[], indexes: number[]) => void;
 }
 
-const getItemIds = (props: AccordionProps) => {
+const getItemIds = (props: LegacyAccordionProps) => {
   const ids: string[] = [];
   const items = Children.toArray(props.children);
   items.forEach((item: any, index: number) => {
@@ -24,7 +24,7 @@ const getItemIds = (props: AccordionProps) => {
 /**
  * Accordions display a list of high-level options that can expand/collapse to reveal more information.
  */
-const Accordion = (props: AccordionProps) => {
+const LegacyAccordion = (props: LegacyAccordionProps) => {
   const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
   const { children, colorScheme, variant, onChange, ...rest } = props;
   const itemIds = getItemIds(props);
@@ -54,8 +54,8 @@ const Accordion = (props: AccordionProps) => {
   );
 };
 
-Accordion.defaultProps = {
+LegacyAccordion.defaultProps = {
   colorScheme: 'white',
-  variant: 'default',
+  variant: 'legacy',
 };
-export default Accordion;
+export default LegacyAccordion;

package/src/Components/{Accordion/AccordionItem.tsx → AccordionLegacy/LegacyAccordionItem.tsx}

@@ -10,13 +10,13 @@ import {
 } from '@chakra-ui/react';
 import Text from '../Text/Text';
 
-export interface AccordionItemProps extends AccordionPanelProps {
+export interface LegacyAccordionItemProps extends AccordionPanelProps {
   buttonContent: ReactNode;
   children?: ReactNode;
   id?: ChakraAccordionItemProps['id'];
 }
 
-const AccordionItem = (props: AccordionItemProps) => {
+const LegacyAccordionItem = (props: LegacyAccordionItemProps) => {
   const { buttonContent, children, id, ...rest } = props;
   const styles = useAccordionStyles();
 
@@ -31,4 +31,4 @@ const AccordionItem = (props: AccordionItemProps) => {
   );
 };
 
-export default AccordionItem;
+export default LegacyAccordionItem;

package/src/Components/Text/Text.tsx

@@ -37,7 +37,6 @@ type TextTags =
   | 'var';
 
 export interface TextProps extends ChakraTextProps {
-  align?: ResponsiveValue<'center' | 'justify' | 'left' | 'right'>;
   /**
    * Any valid HTML text tag
    */
@@ -45,13 +44,12 @@ export interface TextProps extends ChakraTextProps {
   /**
    * Font weight
    */
-  fontWeight?: ResponsiveValue<'bold' | 'normal'>;
+  fontWeight?: ResponsiveValue<'bold' | 'demiBold' | 'normal'>;
+  hasEllipsis?: boolean;
   /**
    * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
    */
   size?: ResponsiveValue<TextSizes>;
-  textTransform?: ResponsiveValue<'capitalize' | 'lowercase' | 'none' | 'uppercase'>;
-  hasEllipsis?: boolean;
 }
 
 /**

package/src/Foundations/Typography/Typography.ts

@@ -15,6 +15,7 @@ const typography = {
   },
   fontWeights: {
     normal: 400,
+    demiBold: 600,
     bold: 700,
   },
   letterSpacings: {
@@ -24,51 +25,41 @@ const typography = {
     '4': '0.0375rem',
     '5': '0.05rem',
   },
-  lineHeights: {
-    '1': '1rem',
-    '2': '1.25rem',
-    '3': '1.5rem',
-    '4': '1.75rem',
-    '5': '2.25rem',
-    '6': '2.5rem',
-    '7': '3rem',
-    '8': '3.75rem',
-  },
 };
 
 export const textSizes = {
   sizes: {
     '1': {
       fontSize: '1',
-      lineHeight: '1',
+      lineHeight: '1rem',
     },
     '2': {
       fontSize: '2',
-      lineHeight: '2',
+      lineHeight: '1.25rem',
     },
     '3': {
       fontSize: '3',
-      lineHeight: '3',
+      lineHeight: '1.5rem',
     },
     '4': {
       fontSize: '4',
-      lineHeight: '4',
+      lineHeight: '1.75rem',
     },
     '5': {
       fontSize: '5',
-      lineHeight: '5',
+      lineHeight: '2.25rem',
     },
     '6': {
       fontSize: '6',
-      lineHeight: '6',
+      lineHeight: '2.5rem',
     },
     '7': {
       fontSize: '7',
-      lineHeight: '7',
+      lineHeight: '3rem',
     },
     '8': {
       fontSize: '8',
-      lineHeight: '8',
+      lineHeight: '3.75rem',
     },
   },
 };

package/src/index.ts

@@ -159,11 +159,11 @@ export { default as Notification } from './Components/Notification/Notification'
 
 export { BREAKPOINTS } from './Foundations/Breakpoints/Breakpoints';
 
-export type { AccordionProps } from './Components/Accordion/Accordion';
-export { default as Accordion } from './Components/Accordion/Accordion';
+export type { LegacyAccordionProps } from './Components/AccordionLegacy/LegacyAccordion';
+export { default as LegacyAccordion } from './Components/AccordionLegacy/LegacyAccordion';
 
-export type { AccordionItemProps } from './Components/Accordion/AccordionItem';
-export { default as AccordionItem } from './Components/Accordion/AccordionItem';
+export type { LegacyAccordionItemProps } from './Components/AccordionLegacy/LegacyAccordionItem';
+export { default as LegacyAccordionItem } from './Components/AccordionLegacy/LegacyAccordionItem';
 
 export type { LightBoxProps } from './Components/LightBox/LightBox';
 export { default as LightBox } from './Components/LightBox/LightBox';

package/src/theme.ts

@@ -1,4 +1,4 @@
-import Accordion from './Components/Accordion/Accordion.theme';
+import Accordion from './Components/AccordionLegacy/Accordion.theme';
 import Avatar from './Components/Avatar/Avatar.theme';
 import Badge from './Components/Badge/Badge.theme';
 import Breadcrumb from './Components/Breadcrumb/Breadcrumb.theme';