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

@@ -20,6 +20,7 @@ import { ReactComponent as ReportsIcon } from '@media/icons/reports.svg'
 
 import githubVideoMp4 from '@media/github/landing-video.mp4'
 import gitlabVideoMp4 from '@media/gitlab/landing-video.mp4'
+import bitbucketVideoMp4 from '@media/bitbucket/landing-video.mp4'
 
 import backgroundImage from '@media/landing-background.png'
 
@@ -102,11 +103,14 @@ 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={bitbucketVideoMp4} mode="bitbucket" />
+            }
           />
         </Box>
       </Collapser>