@bitrise/bitkit 9.3.0-alpha.3 → 9.3.1

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

@@ -7,132 +7,158 @@ import './SectionColors.css';
 
 const { useState } = React;
 
-const colorGrid: [TypeColors, boolean][][] = [[
-  ['black', true],
-  ['gray-8', true],
-  ['gray-7', true],
-  ['gray-6', true],
-  ['gray-5', false],
-  ['gray-4', false],
-  ['gray-3', false],
-  ['gray-2', false],
-  ['gray-1', false],
-  ['white', false],
-], [
-  ['black', true],
-  ['aqua-5', true],
-  ['grape-5', true],
-  ['red-5', true],
-  ['orange-5', true],
-  ['yellow-5', true],
-  ['green-5', true],
-  ['blue-5', true],
-  ['darkblue-5', true],
-  ['violet-5', true],
-], [
-  ['black', true],
-  ['aqua-4', true],
-  ['grape-4', true],
-  ['red-4', true],
-  ['orange-4', true],
-  ['yellow-4', true],
-  ['green-4', true],
-  ['blue-4', true],
-  ['darkblue-4', true],
-  ['violet-4', true],
-], [
-  ['black', true],
-  ['aqua-3', false],
-  ['grape-3', true],
-  ['red-3', true],
-  ['orange-3', true],
-  ['yellow-3', true],
-  ['green-3', true],
-  ['blue-3', true],
-  ['darkblue-3', true],
-  ['violet-3', true],
-], [
-  ['black', true],
-  ['aqua-2', false],
-  ['grape-2', false],
-  ['red-2', false],
-  ['orange-2', false],
-  ['yellow-2', false],
-  ['green-2', false],
-  ['blue-2', false],
-  ['darkblue-2', false],
-  ['violet-2', false],
-], [
-  ['black', true],
-  ['aqua-1', false],
-  ['grape-1', false],
-  ['red-1', false],
-  ['orange-1', false],
-  ['yellow-1', false],
-  ['green-1', false],
-  ['blue-1', false],
-  ['darkblue-1', false],
-  ['violet-1', false],
-]];
+const colorGrid: [TypeColors, boolean][][] = [
+  [
+    ['black', true],
+    ['gray-8', true],
+    ['gray-7', true],
+    ['gray-6', true],
+    ['gray-5', false],
+    ['gray-4', false],
+    ['gray-3', false],
+    ['gray-2', false],
+    ['gray-1', false],
+    ['white', false],
+  ],
+  [
+    ['black', true],
+    ['aqua-5', true],
+    ['grape-5', true],
+    ['red-5', true],
+    ['orange-5', true],
+    ['yellow-5', true],
+    ['green-5', true],
+    ['blue-5', true],
+    ['darkblue-5', true],
+    ['violet-5', true],
+  ],
+  [
+    ['black', true],
+    ['aqua-4', true],
+    ['grape-4', true],
+    ['red-4', true],
+    ['orange-4', true],
+    ['yellow-4', true],
+    ['green-4', true],
+    ['blue-4', true],
+    ['darkblue-4', true],
+    ['violet-4', true],
+  ],
+  [
+    ['black', true],
+    ['aqua-3', false],
+    ['grape-3', true],
+    ['red-3', true],
+    ['orange-3', true],
+    ['yellow-3', true],
+    ['green-3', true],
+    ['blue-3', true],
+    ['darkblue-3', true],
+    ['violet-3', true],
+  ],
+  [
+    ['black', true],
+    ['aqua-2', false],
+    ['grape-2', false],
+    ['red-2', false],
+    ['orange-2', false],
+    ['yellow-2', false],
+    ['green-2', false],
+    ['blue-2', false],
+    ['darkblue-2', false],
+    ['violet-2', false],
+  ],
+  [
+    ['black', true],
+    ['aqua-1', false],
+    ['grape-1', false],
+    ['red-1', false],
+    ['orange-1', false],
+    ['yellow-1', false],
+    ['green-1', false],
+    ['blue-1', false],
+    ['darkblue-1', false],
+    ['violet-1', false],
+  ],
+];
 
 const SectionColors = () => {
-  const [[permActiveColor, isPermActiveColorDark], setPermActiveColor] =
-    useState<[TypeColors, boolean]>(['grape-3', true]);
-  const [[tempActiveColor, isTempActiveColorDark], setTempActiveColor] =
-    useState<[TypeColors | null, boolean]>([null, true]);
+  const [[permActiveColor, isPermActiveColorDark], setPermActiveColor] = useState<[TypeColors, boolean]>([
+    'grape-3',
+    true,
+  ]);
+  const [[tempActiveColor, isTempActiveColorDark], setTempActiveColor] = useState<[TypeColors | null, boolean]>([
+    null,
+    true,
+  ]);
 
   const activeColor = tempActiveColor || permActiveColor;
   const isActiveColorDark = tempActiveColor ? isTempActiveColorDark : isPermActiveColorDark;
 
   return (
     <Flex>
-      <Text margin="x12" size="8" weight="bold">Colors</Text>
+      <Text margin="x12" size="8" weight="bold">
+        Colors
+      </Text>
 
       <Card elevation="x2">
         <CardContent padding="x6">
           <Flex direction="horizontal" gap="x6">
             <Flex borderColor="gray-2" borderRadius="x2">
-              { colorGrid.map((colors, index) => (
-                <Flex
-                    className="SectionColors__color-row"
-                    direction="horizontal"
-                    key={ index }>
-                  { colors.map(([color, isDark]) => (
+              {colorGrid.map((colors, index) => (
+                <Flex className="SectionColors__color-row" direction="horizontal" key={index}>
+                  {colors.map(([color, isDark]) => (
                     <Flex
-                        backgroundColor={ color }
-                        className={ classnames('SectionColors__color', { 'SectionColors__color--active': color === permActiveColor }) }
-                        clickable
-                        container={ color === permActiveColor }
-                        elevation={ color === permActiveColor ? 'x1' : undefined }
-                        grow
-                        height="2rem"
-                        key={ color }
-                        onClick={ () => setPermActiveColor([color, isDark]) }
-                        onMouseEnter={ () => setTempActiveColor([color, isDark]) }
-                        onMouseLeave={ () => setTempActiveColor([null, isDark]) }
-                        width="2rem" />
-                  )) }
+                      backgroundColor={color}
+                      className={classnames('SectionColors__color', {
+                        'SectionColors__color--active': color === permActiveColor,
+                      })}
+                      clickable
+                      container={color === permActiveColor}
+                      elevation={color === permActiveColor ? 'x1' : undefined}
+                      grow
+                      height="2rem"
+                      key={color}
+                      onClick={() => setPermActiveColor([color, isDark])}
+                      onMouseEnter={() => setTempActiveColor([color, isDark])}
+                      onMouseLeave={() => setTempActiveColor([null, isDark])}
+                      width="2rem"
+                    />
+                  ))}
                 </Flex>
-              )) }
+              ))}
             </Flex>
 
             <Flex
-                backgroundColor={ activeColor }
-                borderRadius="x2"
-                direction="vertical"
-                grow
-                initial="none"
-                padding="x6"
-                textColor={ isActiveColorDark ? 'gray-1' : 'grape-5' }>
+              backgroundColor={activeColor}
+              borderRadius="x2"
+              direction="vertical"
+              grow
+              initial="none"
+              padding="x6"
+              textColor={isActiveColorDark ? 'gray-1' : 'grape-5'}
+            >
               <Flex grow>
-                <Text letterSpacing="x2" size="2" uppercase>{ activeColor.replace('-', ' ') }</Text>
-                <Text size="2"><code>{ variables.colorMap[activeColor] }</code></Text>
-                <Text size="2"><code>rgb({ variables.rgbMap[activeColor].join(', ') })</code></Text>
+                <Text letterSpacing="x2" size="2" uppercase>
+                  {activeColor.replace('-', ' ')}
+                </Text>
+                <Text size="2">
+                  <code>{variables.colorMap[activeColor]}</code>
+                </Text>
+                <Text size="2">
+                  <code>rgb({variables.rgbMap[activeColor].join(', ')})</code>
+                </Text>
               </Flex>
 
               <Flex>
-                <Text size="2"><code>var(--bitkit-colors-{ activeColor })</code></Text>
-                <Text size="2"><code>variables.color{ activeColor.charAt(0).toUpperCase() + activeColor.slice(1).replace('-', '') }</code></Text>
+                <Text size="2">
+                  <code>var(--color-{activeColor.replace('-', '--')})</code>
+                </Text>
+                <Text size="2">
+                  <code>
+                    variables.color{activeColor.charAt(0).toUpperCase() + activeColor.slice(1).replace('-', '')}
+                  </code>
+                </Text>
               </Flex>
             </Flex>
           </Flex>
@@ -140,33 +166,32 @@ const SectionColors = () => {
       </Card>
 
       <Text margin="x12">
-        Colors from the available swatch above can be used from exported
-        javascript variables, the available CSS variables (<Link color="grape-3" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">Custom Properties</Link>)
-        and also from the handy props provided by the <Link Component={ RouterLink } color="grape-3" to="/documentation/components/base">Base component</Link>, which
-        makes them available on all components (...there's some exceptions).
+        Colors from the available swatch above can be used from exported javascript variables, the available CSS
+        variables (
+        <Link color="grape-3" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">
+          Custom Properties
+        </Link>
+        ) and also from the handy props provided by the{' '}
+        <Link Component={RouterLink} color="grape-3" to="/documentation/components/base">
+          Base component
+        </Link>
+        , which makes them available on all components (...there's some exceptions).
       </Text>
 
-      <CodeBlock title="Colors from the React components">{
-`<Flex backgroundColor="grape-5" borderRadius="x1" padding="x2" textColor="gray-1">
+      <CodeBlock title="Colors from the React components">{`<Flex backgroundColor="grape-5" borderRadius="x1" padding="x2" textColor="gray-1">
   <Icon name="Bitbot">
-</Flex>`
-      }</CodeBlock>
+</Flex>`}</CodeBlock>
 
-      <CodeBlock title="Colors from the Javascript variables">{
-`import { variables } from '@bitrise/bitkit';
+      <CodeBlock title="Colors from the Javascript variables">{`import { variables } from '@bitrise/bitkit';
 
-console.log(variables.colorAqua1) // ${variables.colorAqua1}`
-      }</CodeBlock>
+console.log(variables.colorAqua1) // ${variables.colorAqua1}`}</CodeBlock>
 
-      <CodeBlock language="css" title="Colors from the CSS variables">{
-`.MyComponent {
-  background-color: var(--bitikit-colors-grape-5);
-  color: var(--bitkit-colors-gray-1);
-}`
-      }</CodeBlock>
+      <CodeBlock language="css" title="Colors from the CSS variables">{`.MyComponent {
+  background-color: var(--color-grape--5);
+  color: var(--color-gray--1);
+}`}</CodeBlock>
     </Flex>
   );
 };
 
 export default SectionColors;
-

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

@@ -21,8 +21,7 @@ const { useEffect, useState } = React;
 const SectionIcons = () => {
   const [iconName, setIconName] = useState<string>('');
   const [iconRandomName, setIconRandomName] = useState<TypeIconName | null>(null);
-  const icons = variables.icons.filter((name) =>
-    !iconName || name.toLowerCase().includes(iconName.toLowerCase()) );
+  const icons = variables.icons.filter((name) => !iconName || name.toLowerCase().includes(iconName.toLowerCase()));
 
   useEffect(() => {
     const iconRandomName = sample(variables.icons);
@@ -34,73 +33,74 @@ const SectionIcons = () => {
 
   return (
     <Flex>
-      <Text margin="x6" size="8" weight="bold">Icons</Text>
+      <Text margin="x6" size="8" weight="bold">
+        Icons
+      </Text>
 
       <Text>
-        All of the Icons below can be achieved with the
-        React <Link Component={ RouterLink } color="grape-3" to="/documentation/components/icon">Icon component</Link> and
-        outputs inline SVG for super quality and easy alignment. The SVG
-        elements uses <code>fill: currentColor;</code> and so inherits the font
-        color from it's parent.
+        All of the Icons below can be achieved with the React{' '}
+        <Link Component={RouterLink} color="grape-3" to="/documentation/components/icon">
+          Icon component
+        </Link>{' '}
+        and outputs inline SVG for super quality and easy alignment. The SVG elements uses{' '}
+        <code>fill: currentColor;</code> and so inherits the font color from it's parent.
       </Text>
 
-      <CodeBlock title="Icon component example">{
-'<Icon name="Bitbot" size="2rem" textColor="grape-3" />'
-      }</CodeBlock>
-
+      <CodeBlock title="Icon component example">{'<Icon name="Bitbot" size="2rem" textColor="grape-3" />'}</CodeBlock>
 
-      <InputLabel>
-        Icon search
-      </InputLabel>
+      <InputLabel>Icon search</InputLabel>
 
       <InputContainer>
         <InputContent>
           <Input
-              onChange={ (e: React.ChangeEvent<HTMLInputElement>) => setIconName(e.target.value) }
-              placeholder="Looking for something special?"
-              value={ iconName } />
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setIconName(e.target.value)}
+            placeholder="Looking for something special?"
+            value={iconName}
+          />
           <Icon name="Magnifier" />
         </InputContent>
       </InputContainer>
 
-      { !!icons.length && (
-        <Grid alignChildren="middle" gap="x2" margin="x8" repeatWidthMin="4rem" >
-          { icons.map((name) => (
+      {!!icons.length && (
+        <Grid alignChildren="middle" gap="x2" margin="x8" repeatWidthMin="4rem">
+          {icons.map((name) => (
             <Flex
-                alignChildren="middle"
-                backgroundColor="gray-1"
-                borderRadius="x1"
-                clickable
-                direction="vertical"
-                key={ name }
-                padding="x2"
-                title={ name }>
-              <Icon name={ name } />
-              <Text ellipsis margin="x1" size="1">{ name }</Text>
+              alignChildren="middle"
+              backgroundColor="gray-1"
+              borderRadius="x1"
+              clickable
+              direction="vertical"
+              key={name}
+              padding="x2"
+              title={name}
+            >
+              <Icon name={name} />
+              <Text ellipsis margin="x1" size="1">
+                {name}
+              </Text>
             </Flex>
-          )) }
+          ))}
         </Grid>
-      ) }
+      )}
 
-      { !icons.length && iconRandomName && (
+      {!icons.length && iconRandomName && (
         <Flex alignChildren="middle" direction="vertical" gap="x4" margin="x12">
-          <Flex
-              backgroundColor="gray-1"
-              borderRadius="x2"
-              padding="x2"
-              title={ iconRandomName }>
-            <Icon name={ iconRandomName } size="3rem" />
+          <Flex backgroundColor="gray-1" borderRadius="x2" padding="x2" title={iconRandomName}>
+            <Icon name={iconRandomName} size="3rem" />
           </Flex>
 
           <Flex>
-            <Text align="middle" margin="x1">No icons found matching "{ iconName }".</Text>
-            <Text align="middle" margin="x1">How about this random icon called "{ iconRandomName }"?</Text>
+            <Text align="middle" margin="x1">
+              No icons found matching "{iconName}".
+            </Text>
+            <Text align="middle" margin="x1">
+              How about this random icon called "{iconRandomName}"?
+            </Text>
           </Flex>
         </Flex>
-      ) }
+      )}
     </Flex>
   );
 };
 
 export default SectionIcons;
-

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

@@ -21,111 +21,123 @@ const configurations: {
   lineHeightPx: number;
   size: TypeTextSize;
   uppercase?: boolean;
-}[] = [{
-  fontSizePx: variables.fontSize1Px,
-  lineHeightPx: variables.lineHeight1Px,
-  size: '1',
-}, {
-  fontSizePx: variables.fontSize2Px,
-  lineHeightPx: variables.lineHeight2Px,
-  size: '2',
-}, {
-  fontSizePx: variables.fontSize3Px,
-  lineHeightPx: variables.lineHeight3Px,
-  size: '3',
-}, {
-  fontSizePx: variables.fontSize4Px,
-  lineHeightPx: variables.lineHeight4Px,
-  size: '4',
-}, {
-  fontSizePx: variables.fontSize5Px,
-  lineHeightPx: variables.lineHeight5Px,
-  size: '5',
-}, {
-  fontSizePx: variables.fontSize6Px,
-  lineHeightPx: variables.lineHeight6Px,
-  size: '6',
-}, {
-  fontSizePx: variables.fontSize7Px,
-  lineHeightPx: variables.lineHeight7Px,
-  size: '7',
-}, {
-  fontSizePx: variables.fontSize8Px,
-  lineHeightPx: variables.lineHeight8Px,
-  size: '8',
-}];
+}[] = [
+  {
+    fontSizePx: variables.fontSize1Px,
+    lineHeightPx: variables.lineHeight1Px,
+    size: '1',
+  },
+  {
+    fontSizePx: variables.fontSize2Px,
+    lineHeightPx: variables.lineHeight2Px,
+    size: '2',
+  },
+  {
+    fontSizePx: variables.fontSize3Px,
+    lineHeightPx: variables.lineHeight3Px,
+    size: '3',
+  },
+  {
+    fontSizePx: variables.fontSize4Px,
+    lineHeightPx: variables.lineHeight4Px,
+    size: '4',
+  },
+  {
+    fontSizePx: variables.fontSize5Px,
+    lineHeightPx: variables.lineHeight5Px,
+    size: '5',
+  },
+  {
+    fontSizePx: variables.fontSize6Px,
+    lineHeightPx: variables.lineHeight6Px,
+    size: '6',
+  },
+  {
+    fontSizePx: variables.fontSize7Px,
+    lineHeightPx: variables.lineHeight7Px,
+    size: '7',
+  },
+  {
+    fontSizePx: variables.fontSize8Px,
+    lineHeightPx: variables.lineHeight8Px,
+    size: '8',
+  },
+];
 
 const SectionTypography = () => {
   const [expanded, setExpanded] = useState<{ [key in TypeTextSize]?: boolean }>({});
 
   return (
     <Flex>
-      <Text Component="h2" margin="x6" size="8" weight="bold">Typography</Text>
+      <Text Component="h2" margin="x6" size="8" weight="bold">
+        Typography
+      </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>.
+        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="1" uppercase weight="medium">
+      <CodeBlock title="Text component example">{`<Text letterSpacing="x5" size="1" uppercase weight="medium">
   I must protest your unauthorised presence on this bridge!
 </Text>
 
 <Text size="8">
   I must protest your unauthorised presence on this bridge!
-</Text>`
-      }</CodeBlock>
+</Text>`}</CodeBlock>
 
-      { configurations.map((config) => (
-        <Card
-            direction="vertical"
-            elevation="x2"
-            key={ config.size }
-            margin="x6"
-            onClick={ () => {} }>
-          <Link
-              color="grape-5"
-              onClick={ () => setExpanded({ ...expanded, [config.size]: !expanded[config.size] }) }>
+      {configurations.map((config) => (
+        <Card direction="vertical" elevation="x2" key={config.size} margin="x6" onClick={() => {}}>
+          <Link color="grape-5" 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 Component="h3" margin="x1" weight="bold">Size { config.size }</Text>
+                  <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>
+                    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 size={ config.size } textColor="gray-3">
+                  <Text size={config.size} textColor="gray-3">
                     Aa
                   </Text>
                 </Flex>
 
                 <Flex>
-                  <Icon
-                      name={ expanded[config.size] ? 'ChevronDown' : 'ChevronRight' } />
+                  <Icon name={expanded[config.size] ? 'ChevronDown' : 'ChevronRight'} />
                 </Flex>
               </Flex>
             </CardContent>
           </Link>
 
-          <Expand expanded={ !!expanded[config.size] }>
+          <Expand expanded={!!expanded[config.size]}>
             <CardDivider />
 
             <CardContent padding="x6">
-              <Text size={ config.size } textColor="gray-7">
+              <Text size={config.size} textColor="gray-7">
                 I must protest your unauthorised presence on this bridge!
               </Text>
             </CardContent>
           </Expand>
         </Card>
-      )) }
+      ))}
     </Flex>
   );
 };
 
 export default SectionTypography;
-

package/site/components/Page/Page.tsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import { Base, BaseProps } from '@bitrise/bitkit';
 
 const Page: React.SFC<BaseProps> = (props: BaseProps) => {
-  return (
-    <Base { ...props } />
-  );
+  return <Base {...props} />;
 };
 
 export default Page;

package/site/components/Page/PageTitle.tsx

@@ -2,13 +2,7 @@ import * as React from 'react';
 import { Text, TextProps } from '@bitrise/bitkit';
 
 const PageTitle: React.SFC<TextProps> = (props: TextProps) => {
-  return (
-    <Text { ...props }
-        margin="x6"
-        size="6"
-        textColor="grape-5"
-        weight="bold" />
-  );
+  return <Text {...props} margin="x6" size="6" textColor="grape-5" weight="bold" />;
 };
 
 export default PageTitle;