home: add bitbucket

src/components/organisms/SwitchableMode/Switch/index.js

@@ -31,8 +31,10 @@ const ModeSwitch = ({
   variant = 'switches.primary',
   left = 'GitLab',
   leftMode = 'gitlab',
-  right = 'GitHub',
-  rightMode = 'github',
+  center = 'Github',
+  centerMode = 'github',
+  right = 'Bitbucket',
+  rightMode = 'bitbucket',
   className = '',
   sx
 }) => {
@@ -45,11 +47,15 @@ const ModeSwitch = ({
       sx={msx({
         ...sx,
         idPrefix,
+        // TODO: duplicated in cml.dev/src/components/organisms/SwitchableMode/common.js
         modes: {
           gitlab: {
             variant: `switches.Base.Left`
           },
           github: {
+            variant: `switches.Base.Center`
+          },
+          bitbucket: {
             variant: `switches.Base.Right`
           }
         }
@@ -58,6 +64,11 @@ const ModeSwitch = ({
       <ModeSwitchLabel mode={leftMode} variant={variant} idPrefix={idPrefix}>
         {left}
       </ModeSwitchLabel>
+
+      <ModeSwitchLabel mode={centerMode} variant={variant} idPrefix={idPrefix}>
+        {center}
+      </ModeSwitchLabel>
+
       <ModeSwitchLabel mode={rightMode} variant={variant} idPrefix={idPrefix}>
         {right}
       </ModeSwitchLabel>

src/components/organisms/SwitchableMode/Switchable/index.js

@@ -21,7 +21,7 @@ const invisible = {
   '& video': { display: 'none' }
 }
 
-const Switchable = ({ github, gitlab, idPrefix = undefined }) => (
+const Switchable = ({ github, gitlab, bitbucket, idPrefix = undefined }) => (
   <Box>
     <Box
       sx={msx({
@@ -47,6 +47,18 @@ const Switchable = ({ github, gitlab, idPrefix = undefined }) => (
     >
       {github}
     </Box>
+    <Box
+      sx={msx({
+        idPrefix,
+        ...invisible,
+        modes: {
+          bitbucket: visible
+        }
+      })}
+      aria-label="Bitbucket-specific content"
+    >
+      {bitbucket}
+    </Box>
   </Box>
 )
 

src/components/organisms/SwitchableMode/common.js

@@ -1,2 +1,2 @@
-export const defaultModes = ['gitlab', 'github']
+export const defaultModes = ['gitlab', 'github', 'bitbucket']
 export const defaultIdPrefix = 'site-mode-'

src/components/organisms/SwitchableMode/styleHelpers.js

@@ -1,3 +1,4 @@
+// TODO: duplicated in cml.dev/src/components/organisms/SwitchableMode/common.js
 const defaultPrefix = `site-mode-`
 
 const makeModeId = (mode, prefix = defaultPrefix) => prefix + mode

src/components/pages/Home/HeroSection/index.tsx

@@ -102,11 +102,12 @@ const HeroSection: React.ForwardRefRenderFunction<HTMLElement> = () => (
         </Box>
         <Box sx={{ flex: '1', width: '100%' }}>
           <Switch
-            sx={{ mt: 4, mx: 'auto', maxWidth: ['100%', null, '160px'] }}
+            sx={{ mt: 4, mx: 'auto', maxWidth: ['100%', null, '240px'] }}
           />
           <Switchable
             gitlab={<LandingVideo src={gitlabVideoMp4} mode="gitlab" />}
             github={<LandingVideo src={githubVideoMp4} mode="github" />}
+            bitbucket={<LandingVideo src={githubVideoMp4} mode="bitbucket" />}
           />
         </Box>
       </Collapser>

src/gatsby-plugin-theme-ui/components.js

@@ -22,6 +22,7 @@ import Switchable from '../components/organisms/SwitchableMode/Switchable'
 import Switch from '../components/organisms/SwitchableMode/Switch'
 import { ReactComponent as GitHubIcon } from '../media/icons/github.svg'
 import { ReactComponent as GitLabIcon } from '../media/icons/gitlab.svg'
+import { ReactComponent as BitbucketIcon } from '../media/icons/bitbucket.svg'
 
 const getTextFromPreChildren = preChildren => {
   return Array.from(preChildren).reduce((acc, child, index) => {
@@ -141,6 +142,18 @@ const RepoButton = ({ url, host = new URL(url).host }) => {
           <span>GitLab</span>
         </Link>
       )
+    case 'bitbucket.org':
+      return (
+        <Link
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          variant="RepoButton"
+        >
+          <BitbucketIcon width="14" height="14" />
+          <span>Bitbucket</span>
+        </Link>
+      )
     default:
       return null
   }

src/gatsby-plugin-theme-ui/index.js

@@ -632,7 +632,7 @@ export default {
     RepoButton: {
       variant: 'buttons.base',
       textAlign: 'center',
-      width: '96px',
+      width: '103px',
       display: 'flex',
       flexFlow: 'row nowrap',
       alignItems: 'center',
@@ -718,13 +718,19 @@ export default {
       Left: {
         '::before': {
           left: '0',
-          right: '50%'
+          right: '66%'
+        }
+      },
+      Center: {
+        '::before': {
+          left: '33%',
+          right: '33%'
         }
       },
       Right: {
         '::before': {
-          right: '0',
-          left: '50%'
+          left: '66%',
+          right: '0'
         }
       },
       Label: {
@@ -748,7 +754,7 @@ export default {
         py: 1,
         px: 2,
         zIndex: '3',
-        width: '50%',
+        width: '33%',
         textAlign: 'center',
         display: 'inline-block',
         position: 'relative',