@bitrise/bitkit 7.14.1 → 7.15.0-alpha.1

package/site/components/PropsTable/PropsTableCellUnion.tsx

@@ -30,7 +30,7 @@ const PropsTableCellUnion: React.SFC<Props> = (props: Props) => {
   }
 
   return (
-    <Text size="x2">
+    <Text size="2">
       { flowType.elements.map(elementFormatter).join(' | ') }
     </Text>
   );

package/site/components/PropsTable/PropsTableRow.tsx

@@ -28,18 +28,18 @@ const PropsTableRow: React.SFC<Props> = (props: Props) => {
 
           { required && (
             <Flex>
-              <Text config="9" textColor="red-3">[Required]</Text>
+              <Text size="1" textColor="red-3" uppercase>[Required]</Text>
             </Flex>
           ) }
         </Flex>
 
-        <Text config="8">{ description }</Text>
+        <Text size="2">{ description }</Text>
       </TableCell>
 
       <TableCell>
         { flowType && flowType.name }
         { defaultValue && (
-          <Text breakOn="none" size="x2" textColor="gray-5">
+          <Text breakOn="none" size="2" textColor="gray-5">
             Default Value: { defaultValue.value }
           </Text>
         ) }

package/site/components/Root/Root.tsx

@@ -7,6 +7,7 @@ const Root = () => {
   return (
     <Flex direction="vertical" grow maxWidth="75rem" paddingHorizontal="x6">
       <Flex
+          Component="header"
           alignChildrenVertical="middle"
           direction="horizontal"
           gap="x6"
@@ -45,13 +46,13 @@ const Root = () => {
         </Switch>
       </Flex>
 
-      <Flex paddingVertical="x16">
+      <Flex Component="footer" paddingVertical="x16">
         <Flex alignChildren="middle" direction="vertical" margin="x4">
           <Icon margin="x2" name="Bitbot" size="3rem" />
 
           <Text
               letterSpacing="x5"
-              size="x1"
+              size="1"
               uppercase>
             Bitkit
           </Text>
@@ -60,7 +61,7 @@ const Root = () => {
             <Flex>
               <Text
                   letterSpacing="x5"
-                  size="x1"
+                  size="1"
                   uppercase>
                 Built with
               </Text>
@@ -73,7 +74,7 @@ const Root = () => {
             <Flex>
               <Text
                   letterSpacing="x5"
-                  size="x1"
+                  size="1"
                   uppercase>
                 in London & Budapest
               </Text>

package/site/components/Section/SectionSubTitle.tsx

@@ -5,7 +5,7 @@ const SectionSubTitle: React.SFC<TextProps> = (props: TextProps) => {
   return (
     <Text { ...props }
         margin="x3"
-        size="x2"
+        size="2"
         uppercase />
   );
 };

package/site/components/Section/SectionTitle.tsx

@@ -5,7 +5,7 @@ const SectionTitle: React.SFC<TextProps> = (props: TextProps) => {
   return (
     <Text { ...props }
         margin="x6"
-        size="x5"
+        size="5"
         textColor="grape-4"
         weight="bold" />
   );

package/site/components/Window/Window.tsx

@@ -50,7 +50,7 @@ const Window: React.FunctionComponent<Props> = (props: Props) => {
         </Flex>
 
         <Flex grow initial="none">
-          <Text config="8" ellipsis>{ title }</Text>
+          <Text ellipsis size="2">{ title }</Text>
         </Flex>
 
         <Flex>

package/src/AddonBeam/AddonBeam.tsx

@@ -75,7 +75,7 @@ const AddonBeam: React.FunctionComponent<Props> = (props: Props) => {
         </Flex>
 
         <Flex>
-          <Text size="x3">
+          <Text size="3">
             <Text inline weight="bold">{ addonName }</Text> by Bitrise
           </Text>
         </Flex>

package/src/AddonFooter/AddonFooter.tsx

@@ -12,10 +12,10 @@ export interface Props extends FlexProps {
 const AddonFooter: React.FunctionComponent<Props> = ({ addonName, ...rest }: Props) => (
   <Flex { ...rest } alignChildren="middle" direction="vertical">
     <Icon margin="x2" name="Bitbot" size="1.5rem" />
-    <Text align="middle" letterSpacing="x5" size="x1" uppercase>
+    <Text align="middle" letterSpacing="x5" size="1" uppercase>
       { addonName }
     </Text>
-    <Text align="middle" letterSpacing="x5" size="x1" uppercase>
+    <Text align="middle" letterSpacing="x5" size="1" uppercase>
       An Official Bitrise Add-on
     </Text>
   </Flex>

package/src/Avatar/Avatar.tsx

@@ -51,7 +51,7 @@ const Avatar: React.FunctionComponent<Props> = (props: Props) => {
         width={ size }>
       <Flex>
         { memoizedValue.shortHand && (
-          <Text config="7" textColor="white">
+          <Text size="3" textColor="white">
             { memoizedValue.shortHand }
           </Text>
         ) }

package/src/Badge/Badge.css

@@ -2,4 +2,5 @@
   display: inline-block;
   padding: 0.1875rem var(--size--x2);
   border-radius: var(--size--x1);
+  line-height: 1.125rem;
 }

package/src/Badge/Badge.tsx

@@ -12,7 +12,8 @@ const Badge: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <Text { ...props }
         className="Badge"
-        config="9" />
+        size="1"
+        uppercase />
   );
 };
 

package/src/Button/Button.css

@@ -36,21 +36,21 @@
   padding: var(--Button--padding-small-vertical) var(--Button--padding-small-horizontal);
   border-width: var(--Button--border-small);
   border-radius: var(--size--x1);
-  font-size: var(--font-size--x2);
+  font-size: var(--font-size--2);
 }
 
 .Button--size-medium {
   padding: var(--Button--padding-medium-vertical) var(--Button--padding-medium-horizontal);
   border-width: var(--Button--border-medium);
   border-radius: var(--size--x1);
-  font-size: var(--font-size--x3);
+  font-size: var(--font-size--3);
 }
 
 .Button--size-large {
   padding: var(--Button--padding-large-vertical) var(--Button--padding-large-horizontal);
   border-width: var(--Button--border-large);
   border-radius: 0.375rem;
-  font-size: var(--font-size--x4);
+  font-size: var(--font-size--4);
 }
 
 .Button--borderless {

package/src/Button/ColorButton.css

@@ -20,21 +20,21 @@
   padding: var(--Button--padding-small-vertical) var(--Button--padding-small-horizontal);
   border-width: var(--Button--border-small);
   border-radius: var(--size--x1);
-  font-size: var(--font-size--x2);
+  font-size: var(--font-size--2);
 }
 
 .ColorButton--size-medium {
   padding: var(--Button--padding-medium-vertical) var(--Button--padding-medium-horizontal);
   border-width: var(--Button--border-medium);
   border-radius: var(--size--x1);
-  font-size: var(--font-size--x3);
+  font-size: var(--font-size--3);
 }
 
 .ColorButton--size-large {
   padding: var(--Button--padding-large-vertical) var(--Button--padding-large-horizontal);
   border-width: var(--Button--border-large);
   border-radius: 0.375rem;
-  font-size: var(--font-size--x4);
+  font-size: var(--font-size--4);
 }
 
 .ColorButton--color-blue {

package/src/DatePicker/DatePickerMonth.tsx

@@ -66,7 +66,7 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
               align="middle"
               key={ day }
               paddingVertical="x4"
-              size="x2"
+              size="2"
               textColor="gray-5"
               uppercase>
             { day }

package/src/Input/InputInlineHelp.tsx

@@ -6,7 +6,7 @@ export interface Props extends TextProps {}
 /** Provides specific styling for an inline input label */
 const InputInlineHelp: React.FunctionComponent<Props> = (props: Props) => {
   return (
-    <Text config="8" margin="x2" textColor="gray-6" { ...props } />
+    <Text margin="x2" size="2" textColor="gray-6" { ...props } />
   );
 };
 

package/src/Input/InputLabel.tsx

@@ -12,7 +12,7 @@ const InputLabel: React.FunctionComponent<Props> = (props: Props) => {
     <Text { ...props }
         Component="label"
         margin="x1"
-        size="x3"
+        size="3"
         textColor="grape-4"
         weight="bold" />
   );

package/src/Modal/ModalTitle.tsx

@@ -11,7 +11,7 @@ const ModalTitle: React.FunctionComponent<Props> = (props: Props) => {
     <Text { ...props }
         letterSpacing="x1"
         margin="x4"
-        size="x5"
+        size="5"
         textColor="grape-5"
         weight="bold" />
   );

package/src/Progress/ProgressBitbot.tsx

@@ -154,7 +154,7 @@ const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
         <Text
             align="middle"
             letterSpacing="x5"
-            size="x1"
+            size="1"
             uppercase>{ content }</Text>
       ) }
     </Text>

package/src/Status/Status404.tsx

@@ -20,10 +20,10 @@ const Status404: React.FunctionComponent<Props> = (props: Props) => {
           direction={ match('65rem') ? 'horizontal' : 'vertical' }
           gap={ match('65rem') ? 'x8' : 'x4' }
           paddingHorizontal="x6">
-        <Text align="middle" config="1">
+        <Text align="middle" size="7" weight="bold">
           404
         </Text>
-        <Text align="middle" config="3">
+        <Text align="middle" size="6" weight="bold">
           The coordinates you are looking for do not exist
         </Text>
       </Flex>

package/src/Status/Status500.tsx

@@ -19,15 +19,15 @@ const Status500: React.FunctionComponent<Props> = (props: Props) => {
           alignChildren="middle"
           direction={ match('65rem') ? 'horizontal' : 'vertical' }
           gap={ match('65rem') ? 'x8' : 'x4' }>
-        <Text align="middle" config="1">
+        <Text align="middle" size="7" weight="bold">
           500
         </Text>
-        <Text align="middle" config="3">
+        <Text align="middle" size="2" uppercase weight="bold">
           Something went wrong
         </Text>
       </Flex>
 
-      <Text align="middle" letterSpacing="x2" margin="x5" size="x4">
+      <Text align="middle" letterSpacing="x2" margin="x5" size="4">
         Everything is under control, we will be back soon. Until then keep refreshing your browser.
       </Text>
 

package/src/Text/Text.css

@@ -12,25 +12,6 @@
 .Text--letter-spacing-x4 { letter-spacing: var(--letter-spacing--x4); }
 .Text--letter-spacing-x5 { letter-spacing: var(--letter-spacing--x5); }
 
-.Text--size-x1 { font-size: var(--font-size--x1); line-height: var(--line-height--x1); }
-.Text--size-x2 { font-size: var(--font-size--x2); line-height: var(--line-height--x2); }
-.Text--size-x3 { font-size: var(--font-size--x3); line-height: var(--line-height--x3); }
-.Text--size-x4 { font-size: var(--font-size--x4); line-height: var(--line-height--x4); }
-.Text--size-x5 { font-size: var(--font-size--x5); line-height: var(--line-height--x5); }
-.Text--size-x6 { font-size: var(--font-size--x6); line-height: var(--line-height--x6); }
-.Text--size-x7 { font-size: var(--font-size--x7); line-height: var(--line-height--x7); }
-.Text--size-x8 { font-size: var(--font-size--x8); line-height: var(--line-height--x8); }
-
-.Text--line-height-1 { line-height: 1; }
-.Text--line-height-x1 { line-height: var(--line-height--x1); }
-.Text--line-height-x2 { line-height: var(--line-height--x2); }
-.Text--line-height-x3 { line-height: var(--line-height--x3); }
-.Text--line-height-x4 { line-height: var(--line-height--x4); }
-.Text--line-height-x5 { line-height: var(--line-height--x5); }
-.Text--line-height-x6 { line-height: var(--line-height--x6); }
-.Text--line-height-x7 { line-height: var(--line-height--x7); }
-.Text--line-height-x8 { line-height: var(--line-height--x8); }
-
 .Text--weight-bold { font-weight: var(--font-weight--bold); }
 .Text--weight-medium { font-weight: var(--font-weight--medium); }
 

package/src/Text/Text.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Base, { Props as BaseProps } from '../Base/Base';
-import './TextConfigurations.css';
+import './TextSizes.css';
 import './Text.css';
 
-export type TypeTextConfig = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
 export type TypeTextLetterSpacing = 'x1' | 'x2' | 'x3' | 'x4' | 'x5';
-export type TypeLineHeight = '1' | 'x1' | 'x2' | 'x3' | 'x4' | 'x5' | 'x6' | 'x7' | 'x8';
-export type TypeTextSize = 'x1' | 'x2' | 'x3' | 'x4' | 'x5' | 'x6' | 'x7' | 'x8';
+export type TypeTextSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
 export type TypeTextWeight = 'bold' | 'medium';
 
 export interface Props extends BaseProps {
@@ -23,8 +21,6 @@ export interface Props extends BaseProps {
   breakOn?: 'all' | 'none' | 'word';
   /** @ignore */
   className?: string;
-  /* Shortcut for setting the correct combination of props for valid typeography design */
-  config?: TypeTextConfig;
   /** Clips overflowing text with an ellipsis */
   ellipsis?: boolean;
   /** Empahsises text with an italic style */
@@ -33,11 +29,9 @@ export interface Props extends BaseProps {
   inline?: boolean;
   /** Adjusts the texts letter spacing to one of the curated values */
   letterSpacing?: TypeTextLetterSpacing;
-  /** Adjusts the line height to one of the curated values */
-  lineHeight?: TypeLineHeight;
   /** Sets the text to use a monospaced font family */
   monospace?: boolean;
-  /** Adjusts the texts sizing to one of the curated values */
+  /* Shortcut for setting the correct combination of props for valid typeography design */
   size?: TypeTextSize;
   /** Sets the text to use title casing (first letter of each word is uppercase) */
   titlecase?: boolean;
@@ -47,17 +41,6 @@ export interface Props extends BaseProps {
   weight?: TypeTextWeight;
 }
 
-const ComponentMap = {
-  x1: 'div',
-  x2: 'div',
-  x3: 'div',
-  x4: 'h5',
-  x5: 'h4',
-  x6: 'h3',
-  x7: 'h2',
-  x8: 'h1',
-};
-
 const InlineComponentMap = (props: Props) =>
   (props.weight === 'bold' && 'strong') ||
   (props.emphasis && 'em') ||
@@ -73,12 +56,10 @@ const Text: React.FunctionComponent<Props> = (props: Props) => {
     align,
     breakOn,
     className,
-    config,
     ellipsis,
     emphasis,
     inline,
     letterSpacing,
-    lineHeight,
     monospace,
     size,
     titlecase,
@@ -95,16 +76,12 @@ const Text: React.FunctionComponent<Props> = (props: Props) => {
     'Text--uppercase': uppercase,
     [`Text--align-${align}`]: align,
     [`Text--break-${breakOn}`]: breakOn,
-    [`Text--config-${config}`]: config,
     [`Text--letter-spacing-${letterSpacing}`]: letterSpacing,
-    [`Text--line-height-${lineHeight}`]: lineHeight,
     [`Text--size-${size}`]: size,
     [`Text--weight-${weight}`]: weight,
   });
 
-  const component = Component || (inline
-    ? InlineComponentMap(props)
-    : (size ? ComponentMap[size] : 'div'));
+  const component = inline ? InlineComponentMap(props) : Component;
 
   return (
     <Base { ...rest }

package/src/Text/TextSizes.css

@@ -0,0 +1,39 @@
+.Text--size-1 {
+  font-size: var(--font-size--1);
+  line-height: var(--line-height--1);
+}
+
+.Text--size-2 {
+  font-size: var(--font-size--2);
+  line-height: var(--line-height--2);
+}
+
+.Text--size-3 {
+  font-size: var(--font-size--3);
+  line-height: var(--line-height--3);
+}
+
+.Text--size-4 {
+  font-size: var(--font-size--4);
+  line-height: var(--line-heigt--4);
+}
+
+.Text--size-5 {
+  font-size: var(--font-size--5);
+  line-height: var(--line-height--5);
+}
+
+.Text--size-6 {
+  font-size: var(--font-size--6);
+  line-height: var(--line-height--6);
+}
+
+.Text--size-7 {
+  font-size: var(--font-size--7);
+  line-height: var(--line-height--7);
+}
+
+.Text--size-8 {
+  font-size: var(--font-size--8);
+  line-height: var(--line-height--8);
+}

package/src/Tooltip/Tooltip.tsx

@@ -63,7 +63,7 @@ const Tooltip: React.FunctionComponent<Props> = (props: Props) => {
           visible={ isControlled ? controlledVisible : uncontrolledVisible }>
         { () => (
           <PlacementArea paddingHorizontal="x3" paddingVertical="x2" withArrow>
-            <Text size="x2">{ title }</Text>
+            <Text size="2">{ title }</Text>
           </PlacementArea>
         ) }
       </Placement>

package/src/index.ts

@@ -91,7 +91,7 @@ export { default as TableHeaderRow, Props as TableHeaderRowProps } from './Table
 export { default as TableRow, Props as TableRowProps } from './Table/TableRow';
 export { default as Tab, Props as TabProps } from './Tabs/Tab';
 export { default as Tabs, Props as TabsProps } from './Tabs/Tabs';
-export { default as Text, Props as TextProps, TypeTextConfig, TypeTextLetterSpacing, TypeTextSize, TypeTextWeight } from './Text/Text';
+export { default as Text, Props as TextProps, TypeTextLetterSpacing, TypeTextSize, TypeTextWeight } from './Text/Text';
 export { default as Textarea, Props as TextareaProps } from './Textarea/Textarea';
 export { default as Toggle, Props as ToggleProps } from './Toggle/Toggle';
 export { default as Tooltip, Props as TooltipProps } from './Tooltip/Tooltip';

package/src/root.css

@@ -14,11 +14,11 @@ html {
 body:not(.bitrise-legacy) {
   color: var(--color-grape--5);
   font-family: var(--font-family);
-  font-size: var(--font-size--x3);
+  font-size: var(--font-size--3);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-weight: var(--font-weight--medium);
-  line-height: var(--line-height--x3);
+  line-height: var(--line-height--3);
 }
 
 canvas {

package/src/variables.css

@@ -152,14 +152,14 @@
   --font-family: 'TTNorms', sans-serif;
   --font-family-monospace: 'Source Code Pro', monospace;
 
-  --font-size--x1: 0.625rem;
-  --font-size--x2: 0.8125rem;
-  --font-size--x3: 1rem;
-  --font-size--x4: 1.1875rem;
-  --font-size--x5: 1.5625rem;
-  --font-size--x6: 2.125rem;
-  --font-size--x7: 3rem;
-  --font-size--x8: 4.125rem;
+  --font-size--1: 0.6875rem; /* 11px */
+  --font-size--2: 0.875rem; /* 14px */
+  --font-size--3: 1rem; /* 16px */
+  --font-size--4: 1.1875rem; /* 19px */
+  --font-size--5: 1.5rem; /* 24px */
+  --font-size--6: 1.875rem; /* 30px */
+  --font-size--7: 2.25rem; /* 36 px */
+  --font-size--8: 3rem; /* 48px */
 
   --font-weight--medium: 500;
   --font-weight--bold: 700;
@@ -167,14 +167,14 @@
   --font-weight-monospace--medium: 500;
   --font-weight-monospace--bold: 600;
 
-  --line-height--x1: 1.8; /* 18 / 10 */
-  --line-height--x2: 1.3846153846153846; /* 18 / 13 */
-  --line-height--x3: 1.5; /* 24 / 16 */
-  --line-height--x4: 1.2631578947; /* 24 / 19 */
-  --line-height--x5: 1.28; /* 32 / 25 */
-  --line-height--x6: 1.1764705882; /* 40 / 34 */
-  --line-height--x7: 1.1666666667; /* 56 / 48 */
-  --line-height--x8: 1.2121212121; /* 80 / 66 */
+  --line-height--1: 1.45; /* 16px / 1rem */
+  --line-height--2: 1.45; /* 20px / 1.25rem */
+  --line-height--3: 1.5; /* 24px / 1.5rem */
+  --line-height--4: 1.45; /* 28px / 1.75rem */
+  --line-height--5: 1.5; /* 36px / 2.25rem */
+  --line-height--6: 1.33; /* 40px / 2.5rem */
+  --line-height--7: 1.33; /* 48px / 3rem */
+  --line-height--8: 1.25; /* 60px / 3.75rem */
 
   --letter-spacing--x1: 0.00625rem;
   --letter-spacing--x2: 0.009375rem;

package/src/variables.ts

@@ -289,23 +289,23 @@ export const sizeX16 = 64;
 
 export const icons = IconList;
 
-export const fontSizeX1Px = 10;
-export const fontSizeX2Px = 13;
-export const fontSizeX3Px = 16;
-export const fontSizeX4Px = 19;
-export const fontSizeX5Px = 25;
-export const fontSizeX6Px = 34;
-export const fontSizeX7Px = 48;
-export const fontSizeX8Px = 66;
-
-export const lineHeightX1Px = 18;
-export const lineHeightX2Px = 18;
-export const lineHeightX3Px = 24;
-export const lineHeightX4Px = 24;
-export const lineHeightX5Px = 32;
-export const lineHeightX6Px = 40;
-export const lineHeightX7Px = 56;
-export const lineHeightX8Px = 80;
+export const fontSize1Px = 11;
+export const fontSize2Px = 14;
+export const fontSize3Px = 16;
+export const fontSize4Px = 19;
+export const fontSize5Px = 24;
+export const fontSize6Px = 30;
+export const fontSize7Px = 36;
+export const fontSize8Px = 48;
+
+export const lineHeight1Px = 16;
+export const lineHeight2Px = 20;
+export const lineHeight3Px = 24;
+export const lineHeight4Px = 28;
+export const lineHeight5Px = 36;
+export const lineHeight6Px = 40;
+export const lineHeight7Px = 48;
+export const lineHeight8Px = 60;
 
 export const letterSpacingX1Px = 0.1;
 export const letterSpacingX2Px = 0.15;

package/lib/cjs/Text/TextConfigurations.css

@@ -1,56 +0,0 @@
-.Text--config-1 {
-  font-size: var(--font-size--x8);
-  font-weight: var(--font-weight--bold);
-  letter-spacing: var(--letter-spacing--x1);
-  line-height: var(--line-height--x8);
-}
-
-.Text--config-2 {
-  font-size: var(--font-size--x7);
-  font-weight: var(--font-weight--bold);
-  line-height: var(--line-height--x7);
-}
-
-.Text--config-3 {
-  font-size: var(--font-size--x6);
-  font-weight: var(--font-weight--bold);
-  letter-spacing: var(--letter-spacing--x2);
-  line-height: var(--line-height--x6);
-}
-
-.Text--config-4 {
-  font-size: var(--font-size--x5);
-  font-weight: var(--font-weight--bold);
-  letter-spacing: var(--letter-spacing--x3);
-  line-height: var(--line-height--x5);
-}
-
-.Text--config-5 {
-  font-size: var(--font-size--x4);
-  font-weight: var(--font-weight--bold);
-  line-height: var(--line-height--x4);
-}
-
-.Text--config-6 {
-  font-size: var(--font-size--x2);
-  letter-spacing: var(--letter-spacing--x4);
-  text-transform: uppercase;
-  line-height: var(--line-height--x2);
-}
-
-.Text--config-7 {
-  font-size: var(--font-size--x3);
-  line-height: var(--line-height--x3);
-}
-
-.Text--config-8 {
-  font-size: var(--font-size--x2);
-  line-height: var(--line-height--x2);
-}
-
-.Text--config-9 {
-  font-size: var(--font-size--x1);
-  letter-spacing: var(--letter-spacing--x5);
-  text-transform: uppercase;
-  line-height: var(--line-height--x1);
-}