@bitrise/bitkit 9.3.0-alpha.3 → 9.3.1

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>
   );
 };