@bitrise/bitkit 9.3.0-alpha.4 → 9.4.0

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

@@ -15,10 +15,10 @@ import {
 import Section from '../../Section/Section';
 
 type ModalTypes =
-  'modalWithHeaderVisible' |
-  'modalWithLotsOfContentVisible' |
-  'modalWithProgressVisible' |
-  'modalWithTitleVisible';
+  | 'modalWithHeaderVisible'
+  | 'modalWithLotsOfContentVisible'
+  | 'modalWithProgressVisible'
+  | 'modalWithTitleVisible';
 
 const { useState } = React;
 
@@ -37,32 +37,35 @@ const SectionModals = () => {
   return (
     <Section>
       <Buttons margin="x2">
-        <Button
-            level="primary"
-            onClick={ () => handleOpenModal('modalWithTitleVisible') }>Open Modal with Title</Button>
+        <Button level="primary" onClick={() => handleOpenModal('modalWithTitleVisible')}>
+          Open Modal with Title
+        </Button>
       </Buttons>
 
       <Buttons margin="x2">
-        <Button
-            level="primary"
-            onClick={ () => handleOpenModal('modalWithHeaderVisible') }>Open Modal with Header</Button>
+        <Button level="primary" onClick={() => handleOpenModal('modalWithHeaderVisible')}>
+          Open Modal with Header
+        </Button>
       </Buttons>
 
       <Buttons margin="x2">
-        <Button
-            level="primary"
-            onClick={ () => handleOpenModal('modalWithProgressVisible') }>Open Modal with Progress</Button>
+        <Button level="primary" onClick={() => handleOpenModal('modalWithProgressVisible')}>
+          Open Modal with Progress
+        </Button>
       </Buttons>
 
       <Buttons margin="x2">
-        <Button
-            level="primary"
-            onClick={ () => handleOpenModal('modalWithLotsOfContentVisible') }>Open Modal with lots of content</Button>
+        <Button level="primary" onClick={() => handleOpenModal('modalWithLotsOfContentVisible')}>
+          Open Modal with lots of content
+        </Button>
       </Buttons>
 
       <Modal
-          backgroundColor="white"
-          onClose={ () => handleCloseModal('modalWithTitleVisible') } visible={ state.modalWithTitleVisible } width="28rem">
+        backgroundColor="white"
+        onClose={() => handleCloseModal('modalWithTitleVisible')}
+        visible={state.modalWithTitleVisible}
+        width="28rem"
+      >
         <ModalHeader />
         <ModalBody>
           <Flex direction="horizontal">
@@ -72,37 +75,45 @@ const SectionModals = () => {
             </Flex>
           </Flex>
           <Buttons alignChildrenHorizontal="end" margin="x6">
-            <Button level="secondary" onClick={ () => handleCloseModal('modalWithTitleVisible') }>Run</Button>
+            <Button level="secondary" onClick={() => handleCloseModal('modalWithTitleVisible')}>
+              Run
+            </Button>
 
             <Tooltip title="Careful!" visible>
-              { ({ ref }) => (
+              {({ ref }) => (
                 <Button
-                    innerRef={ ref }
-                    level="primary"
-                    onClick={ () => handleCloseModal('modalWithTitleVisible') }
-                    variant="danger">
+                  innerRef={ref}
+                  level="primary"
+                  onClick={() => handleCloseModal('modalWithTitleVisible')}
+                  variant="danger"
+                >
                   Jump!
                 </Button>
-              ) }
+              )}
             </Tooltip>
           </Buttons>
         </ModalBody>
       </Modal>
 
       <Modal
-          backgroundColor="white"
-          onClose={ () => handleCloseModal('modalWithHeaderVisible') } visible={ state.modalWithHeaderVisible } width="600px">
+        backgroundColor="white"
+        onClose={() => handleCloseModal('modalWithHeaderVisible')}
+        visible={state.modalWithHeaderVisible}
+        width="600px"
+      >
         <ModalHeader alignChildrenVertical="middle" minHeight="4.5rem" paddingVertical="x0" withSeparator>
           <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
             <Flex>
-              <Icon name="Bitbot"size="2rem"></Icon>
+              <Icon name="Bitbot" size="2rem" />
             </Flex>
 
             <Flex>
               <Text letterSpacing="x3" size="4" textColor="grape-4" weight="bold">
                 Modals may have complex headers
               </Text>
-              <Text size="1" textColor="gray-7" uppercase>Even a subtitle fits in here!</Text>
+              <Text size="1" textColor="gray-7" uppercase>
+                Even a subtitle fits in here!
+              </Text>
             </Flex>
           </Flex>
         </ModalHeader>
@@ -111,91 +122,98 @@ const SectionModals = () => {
           <ModalTitle>And we can still use a Title for the content!</ModalTitle>
           <Text color="gray-7">And make the body look however you'd like</Text>
           <Flex alignChildrenHorizontal="end" direction="horizontal" margin="x6">
-            <Button level="primary" onClick={ () => handleCloseModal('modalWithHeaderVisible') }>Close</Button>
+            <Button level="primary" onClick={() => handleCloseModal('modalWithHeaderVisible')}>
+              Close
+            </Button>
           </Flex>
         </ModalBody>
       </Modal>
 
-
       <Modal
-          backgroundColor="white"
-          onClose={ () => handleCloseModal('modalWithProgressVisible') } visible={ state.modalWithProgressVisible } width="600px">
+        backgroundColor="white"
+        onClose={() => handleCloseModal('modalWithProgressVisible')}
+        visible={state.modalWithProgressVisible}
+        width="600px"
+      >
         <ModalHeader alignChildrenVertical="middle" minHeight="4.5rem" paddingVertical="x0" withSeparator>
           <Text size="5" textColor="grape-4" weight="bold">
             Modal Header
           </Text>
 
-          <ModalHeaderProgress
-              progress={ progress } />
+          <ModalHeaderProgress progress={progress} />
         </ModalHeader>
 
         <ModalBody>
-          <Text margin="x4">
-            Modal with a progress line inside the header,
-            click next to see it progress!
-          </Text>
+          <Text margin="x4">Modal with a progress line inside the header, click next to see it progress!</Text>
 
           <Buttons alignChildrenHorizontal="end">
-            { progress === 1 ? (
+            {progress === 1 ? (
               <Button
-                  level="primary"
-                  onClick={ () => { setProgress(0); handleCloseModal('modalWithProgressVisible'); } }>
+                level="primary"
+                onClick={() => {
+                  setProgress(0);
+                  handleCloseModal('modalWithProgressVisible');
+                }}
+              >
                 Ok, cool
               </Button>
             ) : (
-              <Button
-                  level="primary"
-                  onClick={ () => setProgress(progress + 0.25) }>
+              <Button level="primary" onClick={() => setProgress(progress + 0.25)}>
                 Next!
               </Button>
-            ) }
+            )}
           </Buttons>
         </ModalBody>
       </Modal>
 
       <Modal
-          backgroundColor="white"
-          onClose={ () => handleCloseModal('modalWithLotsOfContentVisible') } visible={ state.modalWithLotsOfContentVisible } width="600px">
+        backgroundColor="white"
+        onClose={() => handleCloseModal('modalWithLotsOfContentVisible')}
+        visible={state.modalWithLotsOfContentVisible}
+        width="600px"
+      >
         <ModalHeader />
         <ModalBody>
           <ModalTitle>Modal Title</ModalTitle>
 
           <Text margin="x2">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque arcu vitae nibh rutrum, sit amet lobortis
-            ligula rutrum. Quisque volutpat vitae mauris non interdum. Ut egestas, ex aliquam hendrerit placerat, mi nisi
-            sollicitudin elit, sit amet vulputate nisi leo a tortor. Pellentesque rhoncus mattis nisl, vel efficitur libero
-            euismod nec. Fusce sed tincidunt nisi. Sed porta odio risus, sagittis venenatis lacus pharetra ut. Integer turpis
-            leo, tempor vel est ut, viverra dignissim urna.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque arcu vitae nibh rutrum,
+            sit amet lobortis ligula rutrum. Quisque volutpat vitae mauris non interdum. Ut egestas, ex aliquam
+            hendrerit placerat, mi nisi sollicitudin elit, sit amet vulputate nisi leo a tortor. Pellentesque rhoncus
+            mattis nisl, vel efficitur libero euismod nec. Fusce sed tincidunt nisi. Sed porta odio risus, sagittis
+            venenatis lacus pharetra ut. Integer turpis leo, tempor vel est ut, viverra dignissim urna.
           </Text>
 
           <Text margin="x2">
-            Phasellus rhoncus consectetur risus efficitur finibus. Pellentesque in enim in lorem volutpat blandit sed venenatis
-            tortor. Praesent consectetur pellentesque risus eget elementum. Cras molestie dapibus nisl, in consequat tellus
-            sollicitudin id. Curabitur vitae molestie nunc. Mauris dapibus suscipit erat, vel tempus tellus. Morbi mi dui,
-            ornare et mattis eu, consequat ac tortor.
+            Phasellus rhoncus consectetur risus efficitur finibus. Pellentesque in enim in lorem volutpat blandit sed
+            venenatis tortor. Praesent consectetur pellentesque risus eget elementum. Cras molestie dapibus nisl, in
+            consequat tellus sollicitudin id. Curabitur vitae molestie nunc. Mauris dapibus suscipit erat, vel tempus
+            tellus. Morbi mi dui, ornare et mattis eu, consequat ac tortor.
           </Text>
 
           <Text margin="x2">
-            Curabitur laoreet porta est eu fermentum. Nunc imperdiet porta leo, ac commodo nisi maximus eu. Morbi ultricies
-            sed ex ac fermentum. Sed posuere ex non lectus pretium viverra eu non arcu. Nullam vel auctor tortor, non faucibus
-            nunc. Vestibulum bibendum nibh quam, in faucibus lacus condimentum ac. Integer at faucibus sapien. Phasellus
-            fringilla magna neque, et sodales mauris semper et. Vestibulum aliquam, sem gravida mollis hendrerit, felis
-            dui rutrum lectus, eu congue metus neque id eros. Maecenas posuere nunc a elit bibendum vulputate. Nam ut
-            faucibus magna. Maecenas id dolor lacinia ipsum rhoncus pellentesque. Maecenas nisl lectus, bibendum sit
-            amet justo ut, vestibulum bibendum dolor. Nullam sodales ultrices congue. Donec erat massa, consequat non
-            tincidunt sagittis, lobortis vel odio.
+            Curabitur laoreet porta est eu fermentum. Nunc imperdiet porta leo, ac commodo nisi maximus eu. Morbi
+            ultricies sed ex ac fermentum. Sed posuere ex non lectus pretium viverra eu non arcu. Nullam vel auctor
+            tortor, non faucibus nunc. Vestibulum bibendum nibh quam, in faucibus lacus condimentum ac. Integer at
+            faucibus sapien. Phasellus fringilla magna neque, et sodales mauris semper et. Vestibulum aliquam, sem
+            gravida mollis hendrerit, felis dui rutrum lectus, eu congue metus neque id eros. Maecenas posuere nunc a
+            elit bibendum vulputate. Nam ut faucibus magna. Maecenas id dolor lacinia ipsum rhoncus pellentesque.
+            Maecenas nisl lectus, bibendum sit amet justo ut, vestibulum bibendum dolor. Nullam sodales ultrices congue.
+            Donec erat massa, consequat non tincidunt sagittis, lobortis vel odio.
           </Text>
 
           <Text margin="x2">
-            Fusce vitae semper nibh, et efficitur ipsum. Ut mattis sollicitudin nisl, sit amet gravida nibh ornare
-            sed. Cras quis turpis sem. Suspendisse eget urna ac quam varius ullamcorper et at erat. Fusce eleifend
-            pulvinar justo, non faucibus neque. Vivamus elementum convallis tempor. Suspendisse egestas nunc in
-            erat commodo, sed rutrum ante maximus. Orci varius natoque penatibus et magnis dis parturient montes,
-            ]nascetur ridiculus mus. Nam sapien lorem, finibus ac molestie ut, ultrices id purus.
+            Fusce vitae semper nibh, et efficitur ipsum. Ut mattis sollicitudin nisl, sit amet gravida nibh ornare sed.
+            Cras quis turpis sem. Suspendisse eget urna ac quam varius ullamcorper et at erat. Fusce eleifend pulvinar
+            justo, non faucibus neque. Vivamus elementum convallis tempor. Suspendisse egestas nunc in erat commodo, sed
+            rutrum ante maximus. Orci varius natoque penatibus et magnis dis parturient montes, ]nascetur ridiculus mus.
+            Nam sapien lorem, finibus ac molestie ut, ultrices id purus.
           </Text>
 
           <Flex alignChildrenHorizontal="end" direction="horizontal" margin="x6">
-            <Button level="primary" onClick={ () => handleCloseModal('modalWithLotsOfContentVisible') }>Close</Button>
+            <Button level="primary" onClick={() => handleCloseModal('modalWithLotsOfContentVisible')}>
+              Close
+            </Button>
           </Flex>
         </ModalBody>
       </Modal>

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

@@ -6,33 +6,31 @@ import Section from '../../Section/Section';
 const SectionNotification = () => {
   return (
     <Section>
-      <Notification margin="x2" onRemove={ () => {} } type="warning">
+      <Notification margin="x2" onRemove={() => {}} type="warning">
         You need to setup publishing on the <Link underline>Settings page</Link>.
       </Notification>
 
-      <Notification icon="Deployment" margin="x2" onRemove={ () => {} } type="inform">
+      <Notification icon="Deployment" margin="x2" onRemove={() => {}} type="inform">
         App is ready for publishing to App Store Connect.
       </Notification>
 
-      <Notification margin="x2" onRemove={ () => {} } type="alert">
+      <Notification margin="x2" onRemove={() => {}} type="alert">
         Publish has failed. See the error log at the <Link underline>Activity tab</Link>.
       </Notification>
 
-      <Notification margin="x2" onRemove={ () => {} } type="success">
+      <Notification margin="x2" onRemove={() => {}} type="success">
         App has successfully published to <Link underline>App Store Connect</Link>
       </Notification>
 
-      <Notification margin="x2" onRemove={ () => {} } type="progress">
+      <Notification margin="x2" onRemove={() => {}} type="progress">
         Publishing to App Store Connect is in progress.
       </Notification>
 
-      <CodeBlock title="Notification usage example">{
-`const Component = () => (
+      <CodeBlock title="Notification usage example">{`const Component = () => (
   <Notification margin="x2" onRemove={ () => {} } type="progress">
     Publishing to App Store Connect is in progress.
   </Notification>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

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

@@ -26,69 +26,56 @@ const SectionPlacement = () => {
   return (
     <Section>
       <Tabs gap="x6" margin="x8">
-        <Tab
-            active={ selectedTab === 1 }
-            onClick={ () => setSelectedTab(1) }>
+        <Tab active={selectedTab === 1} onClick={() => setSelectedTab(1)}>
           Placement Reference
         </Tab>
 
-        <Tab
-            active={ selectedTab === 2 }
-            onClick={ () => setSelectedTab(2) }>
+        <Tab active={selectedTab === 2} onClick={() => setSelectedTab(2)}>
           Reference Element
         </Tab>
       </Tabs>
 
-      { selectedTab === 1 && (
-        <React.Fragment>
+      {selectedTab === 1 && (
+        <>
           <PlacementManager>
             <PlacementReference>
-              { ({ ref }) => (
-                <Button
-                    innerRef={ ref }
-                    level="primary"
-                    onClick={ handleToggle }>
+              {({ ref }) => (
+                <Button innerRef={ref} level="primary" onClick={handleToggle}>
                   <Icon name="More" />
                 </Button>
-              ) }
+              )}
             </PlacementReference>
 
-            <Placement onClose={ (event: MouseEvent) => {
-              console.log('Placement closed via event', event);
-              handleToggle();
-            } } visible={ visible }>
-              { () => (
+            <Placement
+              onClose={(event: MouseEvent) => {
+                console.log('Placement closed via event', event);
+                handleToggle();
+              }}
+              visible={visible}
+            >
+              {() => (
                 <DropdownMenu withArrow>
-                  <DropdownMenuItem
-                      icon="Percent"
-                      onClick={ handleToggle }>
+                  <DropdownMenuItem icon="Percent" onClick={handleToggle}>
                     Refer your friends
                   </DropdownMenuItem>
 
-                  <DropdownMenuItem
-                      icon="Settings"
-                      onClick={ handleToggle }>
+                  <DropdownMenuItem icon="Settings" onClick={handleToggle}>
                     Account setings
                   </DropdownMenuItem>
 
-                  <DropdownMenuItem
-                      icon="ChangePlan"
-                      onClick={ handleToggle }>
+                  <DropdownMenuItem icon="ChangePlan" onClick={handleToggle}>
                     Change plan
                   </DropdownMenuItem>
 
-                  <DropdownMenuItem
-                      icon="Logout"
-                      onClick={ handleToggle }>
+                  <DropdownMenuItem icon="Logout" onClick={handleToggle}>
                     Log out
                   </DropdownMenuItem>
                 </DropdownMenu>
-              ) }
+              )}
             </Placement>
           </PlacementManager>
 
-          <CodeBlock margin="x4" title="PlacementReference Example">{
-`const Component = () => {
+          <CodeBlock margin="x4" title="PlacementReference Example">{`const Component = () => {
   const [visible, setVisible] = React.useState(false);
 
   return (
@@ -127,36 +114,23 @@ const SectionPlacement = () => {
       </Placement>
     </PlacementManager>
   );
-};`
-          }</CodeBlock>
-        </React.Fragment>
-      ) }
-
-
-      { selectedTab === 2 && (
-        <React.Fragment>
-          <Icon
-              innerRef={ setRef }
-              name="Bitbot"
-              size="4rem" />
-
-          <Placement
-              backgroundColor="black"
-              placement="right"
-              referenceElement={ ref }
-              textColor="white"
-              visible={ !!ref }>
-            { () => (
-              <PlacementArea
-                  padding="x3"
-                  withArrow>
+};`}</CodeBlock>
+        </>
+      )}
+
+      {selectedTab === 2 && (
+        <>
+          <Icon innerRef={setRef} name="Bitbot" size="4rem" />
+
+          <Placement backgroundColor="black" placement="right" referenceElement={ref} textColor="white" visible={!!ref}>
+            {() => (
+              <PlacementArea padding="x3" withArrow>
                 Hi, I'm Bitbot 👋
               </PlacementArea>
-            ) }
+            )}
           </Placement>
 
-          <CodeBlock margin="x4" title="Pre-existing Reference Element">{
-`const Component = () => {
+          <CodeBlock margin="x4" title="Pre-existing Reference Element">{`const Component = () => {
   const [ref, setRef] = React.useState();
 
   return (
@@ -180,10 +154,9 @@ const SectionPlacement = () => {
       </Placement>
     </React.Fragment>
   );
-};`
-          }</CodeBlock>
-        </React.Fragment>
-      ) }
+};`}</CodeBlock>
+        </>
+      )}
     </Section>
   );
 };

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

@@ -1,5 +1,17 @@
 import * as React from 'react';
-import { hooks, Base, Buttons, ProgressBar, ProgressButton, ProgressColorButton, ProgressBitbot, ProgressSpinner, Flex, Text, Icon } from '@bitrise/bitkit';
+import {
+  hooks,
+  Base,
+  Buttons,
+  ProgressBar,
+  ProgressButton,
+  ProgressColorButton,
+  ProgressBitbot,
+  ProgressSpinner,
+  Flex,
+  Text,
+  Icon,
+} from '@bitrise/bitkit';
 import Section from '../../Section/Section';
 import SectionSubTitle from '../../Section/SectionSubTitle';
 
@@ -17,9 +29,12 @@ const SectionProgress = () => {
   const [progressing5, setProgressing5] = useState(false);
 
   React.useEffect(() => {
-    refTimeout.current = window.setTimeout(() => {
-      setProgress(progress < 1 ? progress + Math.random() * (0.1 - 0.05) + 0.05 : 0);
-    }, progress < 1 ? Math.random() * (500 - 250) + 250 : 1000);
+    refTimeout.current = window.setTimeout(
+      () => {
+        setProgress(progress < 1 ? progress + Math.random() * (0.1 - 0.05) + 0.05 : 0);
+      },
+      progress < 1 ? Math.random() * (500 - 250) + 250 : 1000,
+    );
 
     return () => {
       window.clearTimeout(refTimeout.current);
@@ -31,7 +46,7 @@ const SectionProgress = () => {
       <Base margin="x6">
         <SectionSubTitle>Indeterminate progress Bitbot</SectionSubTitle>
 
-        <Flex direction={ match('896px') ? 'horizontal' : 'vertical' } gap="x4">
+        <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x4">
           <Flex backgroundColor="gray-1" grow padding="x6">
             <ProgressBitbot content="Loading something..." size="64px" textColor="grape-3" />
           </Flex>
@@ -49,7 +64,7 @@ const SectionProgress = () => {
       <Base margin="x12">
         <SectionSubTitle>Indeterminate progress spinner</SectionSubTitle>
 
-        <Flex direction={ match('896px') ? 'horizontal' : 'vertical' } gap="x4">
+        <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x4">
           <Flex backgroundColor="gray-1" grow padding="x6">
             <ProgressSpinner size="2rem" textColor="grape-3" />
           </Flex>
@@ -68,40 +83,33 @@ const SectionProgress = () => {
         <SectionSubTitle>Indeterminate progress buttons (Press them to toggle the states)</SectionSubTitle>
 
         <Buttons>
-          <ProgressButton
-              level="primary"
-              onClick={ () => setProgressing1(!progressing1) }
-              progressing={ progressing1 }>
+          <ProgressButton level="primary" onClick={() => setProgressing1(!progressing1)} progressing={progressing1}>
             Primary
           </ProgressButton>
 
           <ProgressButton
-              level="primary"
-              onClick={ () => setProgressing2(!progressing2) }
-              progressing={ progressing2 }
-              variant="danger">
+            level="primary"
+            onClick={() => setProgressing2(!progressing2)}
+            progressing={progressing2}
+            variant="danger"
+          >
             Danger!
           </ProgressButton>
 
-          <ProgressButton
-              level="secondary"
-              onClick={ () => setProgressing3(!progressing3) }
-              progressing={ progressing3 }>
+          <ProgressButton level="secondary" onClick={() => setProgressing3(!progressing3)} progressing={progressing3}>
             Secondary
           </ProgressButton>
 
           <ProgressColorButton
-              color="blue"
-              onClick={ () => setProgressing4(!progressing4) }
-              progressing={ progressing4 }
-              size="medium">
+            color="blue"
+            onClick={() => setProgressing4(!progressing4)}
+            progressing={progressing4}
+            size="medium"
+          >
             Color button
           </ProgressColorButton>
 
-          <ProgressButton
-              level="primary"
-              onClick={ () => setProgressing5(!progressing5) }
-              progressing={ progressing5 }>
+          <ProgressButton level="primary" onClick={() => setProgressing5(!progressing5)} progressing={progressing5}>
             <Icon name="App" />
             <span>Button with icon</span>
           </ProgressButton>
@@ -114,23 +122,25 @@ const SectionProgress = () => {
         <Text>Without stripes</Text>
 
         <ProgressBar
-            backgroundColor="gray-2"
-            borderRadius="x2"
-            foregroundColor="grape-3"
-            height="8px"
-            margin="x2"
-            progress={ progress } />
+          backgroundColor="gray-2"
+          borderRadius="x2"
+          foregroundColor="grape-3"
+          height="8px"
+          margin="x2"
+          progress={progress}
+        />
 
         <Text>With stripes</Text>
 
         <ProgressBar
-            backgroundColor="gray-2"
-            borderRadius="x2"
-            foregroundColor="aqua-3"
-            height="8px"
-            margin="x2"
-            progress={ progress }
-            stripeColor="gray-1" />
+          backgroundColor="gray-2"
+          borderRadius="x2"
+          foregroundColor="aqua-3"
+          height="8px"
+          margin="x2"
+          progress={progress}
+          stripeColor="gray-1"
+        />
       </Base>
     </Section>
   );

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

@@ -11,37 +11,26 @@ const SectionFormElements = () => {
 
   return (
     <Section>
-      <Flex
-          direction={ match('896px') ? 'horizontal' : 'vertical' }
-          gap="x12"
-          margin="x12">
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+      <Flex direction={match('896px') ? 'horizontal' : 'vertical'} gap="x12" margin="x12">
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Checked RadioButton</SectionSubTitle>
-          <RadioButton defaultChecked>
-            RadioButton label
-          </RadioButton>
+          <RadioButton defaultChecked>RadioButton label</RadioButton>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Unchecked RadioButton</SectionSubTitle>
-          <RadioButton>
-            RadioButton label
-          </RadioButton>
+          <RadioButton>RadioButton label</RadioButton>
         </Flex>
 
-        <Flex grow initial={ match('896px') ? 'none' : 'content' }>
+        <Flex grow initial={match('896px') ? 'none' : 'content'}>
           <SectionSubTitle>Disabled RadioButton</SectionSubTitle>
-          <RadioButton disabled>
-            RadioButton label
-          </RadioButton>
+          <RadioButton disabled>RadioButton label</RadioButton>
         </Flex>
       </Flex>
 
-      <CodeBlock title="RadioButton usage example">{
-`const Component = () => (
+      <CodeBlock title="RadioButton usage example">{`const Component = () => (
   <RadioButton>RadioButton label</RadioButton>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };