home: add bitbucket (#362)

* Forge Bitbucket * logo * images * com vs org * fix urls * fix broken gl link * com vs org again * Update example repositories * Update example repositories * Fix some broken links * Fix more links * fix format * bb video * revert org migration * Apply suggestions from code review * add PR link Co-authored-by: Helio Machado <[email protected]> Co-authored-by: Casper da Costa-Luis <[email protected]>
iterative · Nov 9, 2022 · d177ffd · d177ffd
1 parent f8cc008
commit d177ffd
Show file tree

Hide file tree

Showing 15 changed files with 264 additions and 35 deletions.
diff --git a/src/components/organisms/SwitchableMode/Switch/index.js b/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>

diff --git a/src/components/organisms/SwitchableMode/Switchable/index.js b/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>
 )
 

diff --git a/src/components/organisms/SwitchableMode/common.js b/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-'
diff --git a/src/components/organisms/SwitchableMode/styleHelpers.js b/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

diff --git a/src/components/pages/Home/HeroSection/index.tsx b/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>