@bitrise/bitkit 7.13.0 → 7.15.0-alpha.1

package/site/components/Documentation/Materials/SectionTypography.tsx

@@ -10,111 +10,70 @@ import {
   Icon,
   Link,
   Text,
-  TypeTextConfig,
-  TypeTextLetterSpacing,
   TypeTextSize,
-  TypeTextWeight,
 } from '@bitrise/bitkit';
 import CodeBlock from '../../CodeBlock/CodeBlock';
 
 const { useState } = React;
 
 const configurations: {
-  config: TypeTextConfig;
   fontSizePx: number;
-  letterSpacing?: TypeTextLetterSpacing;
-  letterSpacingPx?: number;
   lineHeightPx: number;
   size: TypeTextSize;
   uppercase?: boolean;
-  weight: TypeTextWeight;
 }[] = [{
-  config: '1',
-  fontSizePx: variables.fontSizeX8Px,
-  letterSpacing: 'x3',
-  letterSpacingPx: variables.letterSpacingX3Px,
-  lineHeightPx: variables.lineHeightX8Px,
-  size: 'x8',
-  weight: 'bold',
+  fontSizePx: variables.fontSize1Px,
+  lineHeightPx: variables.lineHeight1Px,
+  size: '1',
 }, {
-  config: '2',
-  fontSizePx: variables.fontSizeX7Px,
-  lineHeightPx: variables.lineHeightX7Px,
-  size: 'x7',
-  weight: 'bold',
+  fontSizePx: variables.fontSize2Px,
+  lineHeightPx: variables.lineHeight2Px,
+  size: '2',
 }, {
-  config: '3',
-  fontSizePx: variables.fontSizeX6Px,
-  letterSpacing: 'x2',
-  letterSpacingPx: variables.letterSpacingX2Px,
-  lineHeightPx: variables.lineHeightX6Px,
-  size: 'x6',
-  weight: 'bold',
+  fontSizePx: variables.fontSize3Px,
+  lineHeightPx: variables.lineHeight3Px,
+  size: '3',
 }, {
-  config: '4',
-  fontSizePx: variables.fontSizeX5Px,
-  letterSpacing: 'x1',
-  letterSpacingPx: variables.letterSpacingX1Px,
-  lineHeightPx: variables.lineHeightX5Px,
-  size: 'x5',
-  weight: 'bold',
+  fontSizePx: variables.fontSize4Px,
+  lineHeightPx: variables.lineHeight4Px,
+  size: '4',
 }, {
-  config: '5',
-  fontSizePx: variables.fontSizeX4Px,
-  lineHeightPx: variables.lineHeightX4Px,
-  size: 'x4',
-  weight: 'bold',
+  fontSizePx: variables.fontSize5Px,
+  lineHeightPx: variables.lineHeight5Px,
+  size: '5',
 }, {
-  config: '6',
-  fontSizePx: variables.fontSizeX2Px,
-  letterSpacing: 'x4',
-  letterSpacingPx: variables.letterSpacingX4Px,
-  lineHeightPx: variables.lineHeightX2Px,
-  size: 'x2',
-  uppercase: true,
-  weight: 'medium',
+  fontSizePx: variables.fontSize6Px,
+  lineHeightPx: variables.lineHeight6Px,
+  size: '6',
 }, {
-  config: '7',
-  fontSizePx: variables.fontSizeX3Px,
-  lineHeightPx: variables.lineHeightX3Px,
-  size: 'x3',
-  weight: 'medium',
+  fontSizePx: variables.fontSize7Px,
+  lineHeightPx: variables.lineHeight7Px,
+  size: '7',
 }, {
-  config: '8',
-  fontSizePx: variables.fontSizeX2Px,
-  lineHeightPx: variables.lineHeightX2Px,
-  size: 'x2',
-  weight: 'medium',
-}, {
-  config: '9',
-  fontSizePx: variables.fontSizeX1Px,
-  letterSpacing: 'x5',
-  letterSpacingPx: variables.letterSpacingX5Px,
-  lineHeightPx: variables.lineHeightX1Px,
-  size: 'x1',
-  uppercase: true,
-  weight: 'medium',
+  fontSizePx: variables.fontSize8Px,
+  lineHeightPx: variables.lineHeight8Px,
+  size: '8',
 }];
 
 const SectionTypography = () => {
-  const [expanded, setExpanded] = useState<{ [key in TypeTextConfig]?: boolean }>({});
+  const [expanded, setExpanded] = useState<{ [key in TypeTextSize]?: boolean }>({});
 
   return (
     <Flex>
-      <Text margin="x6" size="x7" weight="bold">Typography</Text>
+      <Text Component="h2" margin="x6" size="8" weight="bold">Typography</Text>
 
-      <Text>
+      <Text Component="p">
         You can mix and match to get any text you like, but below shows the
         best combinations to use from the design guide. All of these examples can
         be achieved with the <Link Component={ RouterLink } color="grape-3" to="/documentation/components/text">Text component</Link>.
       </Text>
 
       <CodeBlock title="Text component example">{
-`<Text letterSpacing="x5" size="x1" uppercase weight="medium">
+`<Text letterSpacing="x5" size="1" uppercase weight="medium">
   I must protest your unauthorised presence on this bridge!
 </Text>
 
-<Text config="9">
+<Text size="8">
   I must protest your unauthorised presence on this bridge!
 </Text>`
       }</CodeBlock>
@@ -123,44 +82,41 @@ const SectionTypography = () => {
         <Card
             direction="vertical"
             elevation="x2"
-            key={ config.config }
+            key={ config.size }
             margin="x6"
             onClick={ () => {} }>
           <Link
               color="grape-5"
-              onClick={ () => setExpanded({ ...expanded, [config.config]: !expanded[config.config] }) }>
+              onClick={ () => setExpanded({ ...expanded, [config.size]: !expanded[config.size] }) }>
             <CardContent paddingHorizontal="x6" paddingVertical="x4">
               <Flex alignChildrenVertical="middle" direction="horizontal" gap="x6">
                 <Flex grow initial="none">
-                  <Text margin="x1" weight="bold">Configuration { config.config }</Text>
-                  <Text margin="x1" size="x2">
-                    Size: { config.size } / Weight: { config.weight } { config.letterSpacing && `/ Letter Spacing: ${config.letterSpacing}` } { config.uppercase && '/ Uppercase' }
-                  </Text>
-
-                  <Text margin="x1" size="x2">
-                    Font size: { config.fontSizePx }px / Line height: { config.lineHeightPx }px { config.letterSpacingPx && `/ Letter Spacing: ${config.letterSpacingPx}px` }
+                  <Text Component="h3" margin="x1" weight="bold">Size { config.size }</Text>
+                  <Text Component="p" margin="x1" size="2">
+                    Font size: { config.fontSizePx }px <Text emphasis inline textColor="gray-5">({ config.fontSizePx / 16 }rem)</Text><br />
+                    Line height: { config.lineHeightPx }px <Text emphasis inline textColor="gray-5">({ config.lineHeightPx / 16 }rem)</Text>
                   </Text>
                 </Flex>
 
                 <Flex>
-                  <Text config={ config.config } textColor="gray-3">
+                  <Text size={ config.size } textColor="gray-3">
                     Aa
                   </Text>
                 </Flex>
 
                 <Flex>
                   <Icon
-                      name={ expanded[config.config] ? 'ChevronDown' : 'ChevronRight' } />
+                      name={ expanded[config.size] ? 'ChevronDown' : 'ChevronRight' } />
                 </Flex>
               </Flex>
             </CardContent>
           </Link>
 
-          <Expand expanded={ !!expanded[config.config] }>
+          <Expand expanded={ !!expanded[config.size] }>
             <CardDivider />
 
             <CardContent padding="x6">
-              <Text config={ config.config } textColor="gray-7">
+              <Text size={ config.size } textColor="gray-7">
                 I must protest your unauthorised presence on this bridge!
               </Text>
             </CardContent>

package/site/components/Page/PageTitle.tsx

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

package/site/components/PropsTable/PropsTable.tsx

@@ -15,7 +15,7 @@ const PropsTable: React.SFC<Props> = ({ composes, displayName, props = {}, ...re
 
   if (Object.keys(props).length === 0) {
     return (
-      <Text margin="x1" size="x2" textColor="gray-5">
+      <Text margin="x1" size="2" textColor="gray-5">
         This component has no props to
         show { composes && composes.length && `, however it extends ${composes.join(', ')}` }.
       </Text>

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 }