@bitrise/bitkit 9.3.0 → 9.3.1

package/site/components/Documentation/Components/SectionAppear.tsx

@@ -7,11 +7,12 @@ import Section from '../../Section/Section';
 
 const { useState } = React;
 const AppearDocs: DocumentationObject = documentation.Appear;
-const animationElements = AppearDocs.props &&
+const animationElements =
+  AppearDocs.props &&
   AppearDocs.props &&
   AppearDocs.props.animation &&
   AppearDocs.props.animation.flowType &&
-  (AppearDocs.props.animation.flowType as FlowElementsType).elements as FlowLiteralType[];
+  ((AppearDocs.props.animation.flowType as FlowElementsType).elements as FlowLiteralType[]);
 
 const SectionAppear = () => {
   const [visible, setVisible] = useState(true);
@@ -20,46 +21,37 @@ const SectionAppear = () => {
     <Section>
       <Base margin="x6">
         <Grid alignChildren="middle" gap="x2" repeatWidthMin="12rem">
-          { animationElements && animationElements.map(({ value }, i) => (
-            <Flex
-                alignChildren="middle"
-                direction="vertical"
-                key={ value }
-                padding="x6">
-              <Appear
-                  animation={ value.slice(1, -1) as TypeAppearAnimationName }
+          {animationElements &&
+            animationElements.map(({ value }, i) => (
+              <Flex alignChildren="middle" direction="vertical" key={value} padding="x6">
+                <Appear
+                  animation={value.slice(1, -1) as TypeAppearAnimationName}
                   duration="base"
                   margin="x2"
-                  visible={ visible }>
-                <Icon
-                    name="Bitbot"
-                    size="3rem"
-                    textColor={ i % 2 ? 'grape-2' : 'grape-3' } />
-              </Appear>
+                  visible={visible}
+                >
+                  <Icon name="Bitbot" size="3rem" textColor={i % 2 ? 'grape-2' : 'grape-3'} />
+                </Appear>
 
-              <Text margin="x2">{ value }</Text>
-            </Flex>
-          )) }
+                <Text margin="x2">{value}</Text>
+              </Flex>
+            ))}
         </Grid>
       </Base>
 
       <Flex alignChildren="middle" direction="vertical">
         <Flex>
-          <Toggle
-              checked={ visible }
-              onChange={ () => setVisible(!visible) }>
+          <Toggle checked={visible} onChange={() => setVisible(!visible)}>
             Visible
           </Toggle>
         </Flex>
       </Flex>
 
-      <CodeBlock title="Appear Usage Example">{
-`const Component = () => (
+      <CodeBlock title="Appear Usage Example">{`const Component = () => (
   <Appear animation="FadeSlideUp" duration="slow">
     <Icon name="Bitbot" size="3rem" textColor="grape-3"></Icon>
   </Appear>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionAvatar.tsx

@@ -11,9 +11,9 @@ const SectionBadge = () => {
       <Base margin="x6">
         <SectionSubTitle>Avatar with URL</SectionSubTitle>
         <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
-          <Avatar name="Test User" size="4rem" url={ url } />
-          <Avatar name="Test User" size="3rem" url={ url } />
-          <Avatar name="Test User" size="2rem" url={ url } />
+          <Avatar name="Test User" size="4rem" url={url} />
+          <Avatar name="Test User" size="3rem" url={url} />
+          <Avatar name="Test User" size="2rem" url={url} />
         </Flex>
       </Base>
 
@@ -30,20 +30,18 @@ const SectionBadge = () => {
         <SectionSubTitle>Border radius variations</SectionSubTitle>
         <Flex direction="horizontal" gap="x2">
           <Avatar borderRadius="x1" name="placeholder" size="40px" />
-          <Avatar borderRadius="x1" name="placeholder" size="40px" url={ url }/>
+          <Avatar borderRadius="x1" name="placeholder" size="40px" url={url} />
           <Avatar borderRadius="x2" name="placeholder" size="40px" />
-          <Avatar borderRadius="x2" name="placeholder" size="40px" url={ url }/>
+          <Avatar borderRadius="x2" name="placeholder" size="40px" url={url} />
           <Avatar borderRadius="rounded" name="placeholder" size="40px" />
-          <Avatar borderRadius="rounded" name="placeholder" size="40px" url={ url } />
+          <Avatar borderRadius="rounded" name="placeholder" size="40px" url={url} />
         </Flex>
       </Base>
 
       <CodeBlock title="Badge Usage Example">
-        {
-`const Component = () => (
+        {`const Component = () => (
   <Avatar name="Bitrise" url="https://app.bitrise.io/assets/images/hero/cat-illustration.png" size="3rem" />
-);`
-        }
+);`}
       </CodeBlock>
     </Section>
   );

package/site/components/Documentation/Components/SectionBadge.tsx

@@ -6,40 +6,31 @@ import Section from '../../Section/Section';
 const SectionBadge = () => {
   return (
     <Section>
-
       <Base margin="x1">
-        <Badge
-            backgroundColor="eggplant"
-            textColor="gray-1">
+        <Badge backgroundColor="eggplant" textColor="gray-1">
           Coming soon
         </Badge>
       </Base>
 
       <Base margin="x1">
-        <Badge
-            backgroundColor="blue-3"
-            textColor="gray-1">
+        <Badge backgroundColor="blue-3" textColor="gray-1">
           Beta
         </Badge>
       </Base>
 
       <Base margin="x1">
-        <Badge
-            backgroundColor="green-3"
-            textColor="gray-1">
+        <Badge backgroundColor="green-3" textColor="gray-1">
           New feature
         </Badge>
       </Base>
 
-      <CodeBlock title="Badge Usage Example">{
-`const Component = () => (
+      <CodeBlock title="Badge Usage Example">{`const Component = () => (
   <Badge
       backgroundColor="eggplant"
       textColor="gray-1">
     Coming soon
   </Badge>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionBase.tsx

@@ -5,13 +5,11 @@ import Section from '../../Section/Section';
 const SectionBase = () => {
   return (
     <Section>
-      <CodeBlock title="Base Usage Example">{
-`const Component = () => (
+      <CodeBlock title="Base Usage Example">{`const Component = () => (
   <Base backgroundColor="grape-5" borderRadius="x2" padding="x6" textColor="gray-1">
     Some content
   </Base>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionButtons.tsx

@@ -23,60 +23,88 @@ const SectionButtons = () => {
   return (
     <Section>
       <Tabs gap="x6" margin="x8">
-        <Tab
-            active={ selectedTab === 1 }
-            onClick={ () => setSelectedTab(1) }>
+        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
           Variants & Sizes
         </Tab>
 
-        <Tab
-            active={ selectedTab === 2 }
-            onClick={ () => setSelectedTab(2) }>
+        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
           With Left & Right Icons
         </Tab>
 
-        <Tab
-            active={ selectedTab === 3 }
-            onClick={ () => setSelectedTab(3) }>
+        <Tab active={selectedTab === 3} onClick={() => setSelectedTab(3)}>
           Color Button
         </Tab>
 
-        <Tab
-            active={ selectedTab === 4 }
-            onClick={ () => setSelectedTab(4) }>
+        <Tab active={selectedTab === 4} onClick={() => setSelectedTab(4)}>
           with dropdown
         </Tab>
       </Tabs>
 
-      { selectedTab === 1 && (
-        <React.Fragment>
+      {selectedTab === 1 && (
+        <>
           <Base margin="x12">
             <SectionSubTitle>Default Variant Button</SectionSubTitle>
             <Buttons alignChildrenVertical="end" margin="x3">
-              <Button level="primary" size="small">Primary</Button>
-              <Button disabled level="primary" size="small">Disabled</Button>
-              <Button level="primary" size="medium">Primary</Button>
-              <Button disabled level="primary" size="medium">Disabled</Button>
-              <Button level="primary" size="large">Primary</Button>
-              <Button disabled level="primary" size="large">Disabled</Button>
+              <Button level="primary" size="small">
+                Primary
+              </Button>
+              <Button disabled level="primary" size="small">
+                Disabled
+              </Button>
+              <Button level="primary" size="medium">
+                Primary
+              </Button>
+              <Button disabled level="primary" size="medium">
+                Disabled
+              </Button>
+              <Button level="primary" size="large">
+                Primary
+              </Button>
+              <Button disabled level="primary" size="large">
+                Disabled
+              </Button>
             </Buttons>
 
             <Buttons alignChildrenVertical="end" margin="x3">
-              <Button level="secondary" size="small">Secondary</Button>
-              <Button disabled level="secondary" size="small">Disabled</Button>
-              <Button level="secondary" size="medium">Secondary</Button>
-              <Button disabled level="secondary" size="medium">Disabled</Button>
-              <Button level="secondary" size="large">Secondary</Button>
-              <Button disabled level="secondary" size="large">Disabled</Button>
+              <Button level="secondary" size="small">
+                Secondary
+              </Button>
+              <Button disabled level="secondary" size="small">
+                Disabled
+              </Button>
+              <Button level="secondary" size="medium">
+                Secondary
+              </Button>
+              <Button disabled level="secondary" size="medium">
+                Disabled
+              </Button>
+              <Button level="secondary" size="large">
+                Secondary
+              </Button>
+              <Button disabled level="secondary" size="large">
+                Disabled
+              </Button>
             </Buttons>
 
             <Buttons alignChildrenVertical="end" margin="x3">
-              <Button level="tertiary" size="small">Tertiary</Button>
-              <Button disabled level="tertiary" size="small">Disabled</Button>
-              <Button level="tertiary" size="medium">Tertiary</Button>
-              <Button disabled level="tertiary" size="medium">Disabled</Button>
-              <Button level="tertiary" size="large">Tertiary</Button>
-              <Button disabled level="tertiary" size="large">Disabled</Button>
+              <Button level="tertiary" size="small">
+                Tertiary
+              </Button>
+              <Button disabled level="tertiary" size="small">
+                Disabled
+              </Button>
+              <Button level="tertiary" size="medium">
+                Tertiary
+              </Button>
+              <Button disabled level="tertiary" size="medium">
+                Disabled
+              </Button>
+              <Button level="tertiary" size="large">
+                Tertiary
+              </Button>
+              <Button disabled level="tertiary" size="large">
+                Disabled
+              </Button>
             </Buttons>
           </Base>
 
@@ -84,37 +112,59 @@ const SectionButtons = () => {
             <SectionSubTitle>Danger Variant Button</SectionSubTitle>
 
             <Buttons alignChildrenVertical="end" margin="x3">
-              <Button level="primary" size="small" variant="danger">Primary</Button>
-              <Button disabled level="primary" size="small" variant="danger">Disabled</Button>
-              <Button level="primary" size="medium" variant="danger">Primary</Button>
-              <Button disabled level="primary" size="medium" variant="danger">Disabled</Button>
-              <Button level="primary" size="large" variant="danger">Primary</Button>
-              <Button disabled level="primary" size="large" variant="danger">Disabled</Button>
+              <Button level="primary" size="small" variant="danger">
+                Primary
+              </Button>
+              <Button disabled level="primary" size="small" variant="danger">
+                Disabled
+              </Button>
+              <Button level="primary" size="medium" variant="danger">
+                Primary
+              </Button>
+              <Button disabled level="primary" size="medium" variant="danger">
+                Disabled
+              </Button>
+              <Button level="primary" size="large" variant="danger">
+                Primary
+              </Button>
+              <Button disabled level="primary" size="large" variant="danger">
+                Disabled
+              </Button>
             </Buttons>
 
             <Buttons alignChildrenVertical="end" margin="x3">
-              <Button level="secondary" size="small" variant="danger">Secondary</Button>
-              <Button disabled level="secondary" size="small" variant="danger">Disabled</Button>
-              <Button level="secondary" size="medium" variant="danger">Secondary</Button>
-              <Button disabled level="secondary" size="medium" variant="danger">Disabled</Button>
-              <Button level="secondary" size="large" variant="danger">Secondary</Button>
-              <Button disabled level="secondary" size="large" variant="danger">Disabled</Button>
+              <Button level="secondary" size="small" variant="danger">
+                Secondary
+              </Button>
+              <Button disabled level="secondary" size="small" variant="danger">
+                Disabled
+              </Button>
+              <Button level="secondary" size="medium" variant="danger">
+                Secondary
+              </Button>
+              <Button disabled level="secondary" size="medium" variant="danger">
+                Disabled
+              </Button>
+              <Button level="secondary" size="large" variant="danger">
+                Secondary
+              </Button>
+              <Button disabled level="secondary" size="large" variant="danger">
+                Disabled
+              </Button>
             </Buttons>
           </Base>
 
-          <CodeBlock title="Button Usage Example">{
-`const Component = () => (
+          <CodeBlock title="Button Usage Example">{`const Component = () => (
   <Buttons>
     <Button level="secondary">Secondary</Button>
     <Button level="primary" variant="danger">Danger Action</Button>
   </Buttons>
-);`
-            }</CodeBlock>
-        </React.Fragment>
-      ) }
+);`}</CodeBlock>
+        </>
+      )}
 
-      { selectedTab === 2 && (
-        <React.Fragment>
+      {selectedTab === 2 && (
+        <>
           <Buttons margin="x4">
             <Button level="primary" size="large">
               <Icon name="Group" />
@@ -151,8 +201,7 @@ const SectionButtons = () => {
             </Button>
           </Buttons>
 
-          <CodeBlock title="Button with Icon usage example">{
-`const Component = () => (
+          <CodeBlock title="Button with Icon usage example">{`const Component = () => (
   <Buttons>
     <Button level="primary" size="small">
       <Icon name="Group" />
@@ -164,104 +213,168 @@ const SectionButtons = () => {
       <Icon name="Group" />
     </Button>
   </Buttons>
-);`
-            }</CodeBlock>
-        </React.Fragment>
-      ) }
+);`}</CodeBlock>
+        </>
+      )}
 
-      { selectedTab === 3 && (
-        <React.Fragment>
+      {selectedTab === 3 && (
+        <>
           <Ribbon margin="x6" type="inform">
             <SectionSubTitle>Blue</SectionSubTitle>
             <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="blue" size="small">Blue</ColorButton>
-              <ColorButton color="blue" disabled size="small">Disabled</ColorButton>
-              <ColorButton color="blue" size="medium">Blue</ColorButton>
-              <ColorButton color="blue" disabled size="medium">Disabled</ColorButton>
-              <ColorButton color="blue" size="large">Blue</ColorButton>
-              <ColorButton color="blue" disabled size="large">Disabled</ColorButton>
+              <ColorButton color="blue" size="small">
+                Blue
+              </ColorButton>
+              <ColorButton color="blue" disabled size="small">
+                Disabled
+              </ColorButton>
+              <ColorButton color="blue" size="medium">
+                Blue
+              </ColorButton>
+              <ColorButton color="blue" disabled size="medium">
+                Disabled
+              </ColorButton>
+              <ColorButton color="blue" size="large">
+                Blue
+              </ColorButton>
+              <ColorButton color="blue" disabled size="large">
+                Disabled
+              </ColorButton>
             </Buttons>
           </Ribbon>
 
           <Ribbon margin="x6" type="progress">
             <SectionSubTitle>Grape</SectionSubTitle>
             <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="grape" size="small">Grape</ColorButton>
-              <ColorButton color="grape" disabled size="small">Disabled</ColorButton>
-              <ColorButton color="grape" size="medium">Grape</ColorButton>
-              <ColorButton color="grape" disabled size="medium">Disabled</ColorButton>
-              <ColorButton color="grape" size="large">Grape</ColorButton>
-              <ColorButton color="grape" disabled size="large">Disabled</ColorButton>
+              <ColorButton color="grape" size="small">
+                Grape
+              </ColorButton>
+              <ColorButton color="grape" disabled size="small">
+                Disabled
+              </ColorButton>
+              <ColorButton color="grape" size="medium">
+                Grape
+              </ColorButton>
+              <ColorButton color="grape" disabled size="medium">
+                Disabled
+              </ColorButton>
+              <ColorButton color="grape" size="large">
+                Grape
+              </ColorButton>
+              <ColorButton color="grape" disabled size="large">
+                Disabled
+              </ColorButton>
             </Buttons>
           </Ribbon>
 
           <Ribbon margin="x6" type="success">
             <SectionSubTitle>Green</SectionSubTitle>
             <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="green" size="small">Green</ColorButton>
-              <ColorButton color="green" disabled size="small">Disabled</ColorButton>
-              <ColorButton color="green" size="medium">Green</ColorButton>
-              <ColorButton color="green" disabled size="medium">Disabled</ColorButton>
-              <ColorButton color="green" size="large">Green</ColorButton>
-              <ColorButton color="green" disabled size="large">Disabled</ColorButton>
+              <ColorButton color="green" size="small">
+                Green
+              </ColorButton>
+              <ColorButton color="green" disabled size="small">
+                Disabled
+              </ColorButton>
+              <ColorButton color="green" size="medium">
+                Green
+              </ColorButton>
+              <ColorButton color="green" disabled size="medium">
+                Disabled
+              </ColorButton>
+              <ColorButton color="green" size="large">
+                Green
+              </ColorButton>
+              <ColorButton color="green" disabled size="large">
+                Disabled
+              </ColorButton>
             </Buttons>
           </Ribbon>
 
           <Ribbon margin="x6" type="alert">
             <SectionSubTitle>Red</SectionSubTitle>
             <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="red" size="small">Red</ColorButton>
-              <ColorButton color="red" disabled size="small">Disabled</ColorButton>
-              <ColorButton color="red" size="medium">Red</ColorButton>
-              <ColorButton color="red" disabled size="medium">Disabled</ColorButton>
-              <ColorButton color="red" size="large">Red</ColorButton>
-              <ColorButton color="red" disabled size="large">Disabled</ColorButton>
+              <ColorButton color="red" size="small">
+                Red
+              </ColorButton>
+              <ColorButton color="red" disabled size="small">
+                Disabled
+              </ColorButton>
+              <ColorButton color="red" size="medium">
+                Red
+              </ColorButton>
+              <ColorButton color="red" disabled size="medium">
+                Disabled
+              </ColorButton>
+              <ColorButton color="red" size="large">
+                Red
+              </ColorButton>
+              <ColorButton color="red" disabled size="large">
+                Disabled
+              </ColorButton>
             </Buttons>
           </Ribbon>
 
-          <Base
-              backgroundColor="grape-4"
-              margin="x6"
-              paddingHorizontal="x6"
-              paddingVertical="x4"
-              textColor="white">
+          <Base backgroundColor="grape-4" margin="x6" paddingHorizontal="x6" paddingVertical="x4" textColor="white">
             <SectionSubTitle>White</SectionSubTitle>
             <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="white" size="small">White</ColorButton>
-              <ColorButton color="white" disabled size="small">Disabled</ColorButton>
-              <ColorButton color="white" size="medium">White</ColorButton>
-              <ColorButton color="white" disabled size="medium">Disabled</ColorButton>
-              <ColorButton color="white" size="large">White</ColorButton>
-              <ColorButton color="white" disabled size="large">Disabled</ColorButton>
+              <ColorButton color="white" size="small">
+                White
+              </ColorButton>
+              <ColorButton color="white" disabled size="small">
+                Disabled
+              </ColorButton>
+              <ColorButton color="white" size="medium">
+                White
+              </ColorButton>
+              <ColorButton color="white" disabled size="medium">
+                Disabled
+              </ColorButton>
+              <ColorButton color="white" size="large">
+                White
+              </ColorButton>
+              <ColorButton color="white" disabled size="large">
+                Disabled
+              </ColorButton>
             </Buttons>
           </Base>
 
           <Ribbon margin="x6" type="warning">
             <SectionSubTitle>Yellow</SectionSubTitle>
             <Buttons alignChildrenVertical="end" margin="x3">
-              <ColorButton color="yellow" size="small">Yellow</ColorButton>
-              <ColorButton color="yellow" disabled size="small">Disabled</ColorButton>
-              <ColorButton color="yellow" size="medium">Yellow</ColorButton>
-              <ColorButton color="yellow" disabled size="medium">Disabled</ColorButton>
-              <ColorButton color="yellow" size="large">Yellow</ColorButton>
-              <ColorButton color="yellow" disabled size="large">Disabled</ColorButton>
+              <ColorButton color="yellow" size="small">
+                Yellow
+              </ColorButton>
+              <ColorButton color="yellow" disabled size="small">
+                Disabled
+              </ColorButton>
+              <ColorButton color="yellow" size="medium">
+                Yellow
+              </ColorButton>
+              <ColorButton color="yellow" disabled size="medium">
+                Disabled
+              </ColorButton>
+              <ColorButton color="yellow" size="large">
+                Yellow
+              </ColorButton>
+              <ColorButton color="yellow" disabled size="large">
+                Disabled
+              </ColorButton>
             </Buttons>
           </Ribbon>
 
-          <CodeBlock title="Button with Icon usage example">{
-`const Component = () => (
+          <CodeBlock title="Button with Icon usage example">{`const Component = () => (
   <Buttons>
     <ColorButton color="blue" size="small">Blue</ColorButton>
     <ColorButton color="green" size="medium">Green</ColorButton>
   </Buttons>
-);`
-            }</CodeBlock>
-        </React.Fragment>
-      ) }
-      { selectedTab === 4 && (
-      <Flex alignChildren="end" direction="horizontal">
-        <ButtonWithDropdown
-            items={ [
+);`}</CodeBlock>
+        </>
+      )}
+      {selectedTab === 4 && (
+        <Flex alignChildren="end" direction="horizontal">
+          <ButtonWithDropdown
+            items={[
               {
                 component: 'button',
                 icon: 'Percent',
@@ -280,12 +393,13 @@ const SectionButtons = () => {
                 icon: 'Logout',
                 text: 'Log out',
               },
-            ] }>
-          <Icon name="Bitbot" />
-          <Text>Account</Text>
-        </ButtonWithDropdown>
-      </Flex>
-      ) }
+            ]}
+          >
+            <Icon name="Bitbot" />
+            <Text>Account</Text>
+          </ButtonWithDropdown>
+        </Flex>
+      )}
     </Section>
   );
 };