Add vertical align property to column block (#3596)

Co-authored-by: Samy Pessé <samypesse@gmail.com>

Author: BrettJephson

.changeset/proud-lemons-whisper.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Adds vertical align to column block

bun.lock

@@ -293,7 +293,7 @@
     "react-dom": "^19.0.0",
   },
   "catalog": {
-    "@gitbook/api": "^0.136.0",
+    "@gitbook/api": "^0.137.0",
     "bidc": "^0.0.2",
   },
   "packages": {
@@ -659,7 +659,7 @@
 
     "@fortawesome/fontawesome-svg-core": ["@fortawesome/fontawesome-svg-core@6.6.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.6.0" } }, "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg=="],
 
-    "@gitbook/api": ["@gitbook/api@0.136.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-IxNqmXE6yUEUq0IzbenN8S/PcMfgxr4+akY8xh6V5ShI/+U37ixujJHZp2zJq6NdZOdBQoR3UQmhPnvtWrkF7g=="],
+    "@gitbook/api": ["@gitbook/api@0.137.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-3pTNbHI4kJT7ikqSdSLa2UCB0dOPOTzOUHcsCTLrk+rJVjTAFAJmTEW/Ax2prnwZ75ran2hz9/FhxUAGhp/8Mg=="],
 
     "@gitbook/browser-types": ["@gitbook/browser-types@workspace:packages/browser-types"],
 

package.json

@@ -34,7 +34,7 @@
     "workspaces": {
         "packages": ["packages/*"],
         "catalog": {
-            "@gitbook/api": "^0.136.0",
+            "@gitbook/api": "^0.137.0",
             "bidc": "^0.0.2"
         }
     },

packages/gitbook/src/components/DocumentView/Columns/Columns.tsx

@@ -1,5 +1,5 @@
-import { type ClassValue, tcls } from '@/lib/tailwind';
-import type { DocumentBlockColumns, Length } from '@gitbook/api';
+import { tcls } from '@/lib/tailwind';
+import { type DocumentBlockColumns, type Length, VerticalAlignment } from '@gitbook/api';
 import type { BlockProps } from '../Block';
 import { Blocks } from '../Blocks';
 
@@ -8,10 +8,12 @@ export function Columns(props: BlockProps<DocumentBlockColumns>) {
     return (
         <div className={tcls('flex flex-col gap-x-8 md:flex-row', style)}>
             {block.nodes.map((columnBlock) => {
-                const width = columnBlock.data.width;
-                const { className, style } = transformLengthToCSS(width);
                 return (
-                    <Column key={columnBlock.key} className={className} style={style}>
+                    <Column
+                        key={columnBlock.key}
+                        width={columnBlock.data.width}
+                        verticalAlignment={columnBlock.data.verticalAlignment}
+                    >
                         <Blocks
                             key={columnBlock.key}
                             nodes={columnBlock.nodes}
@@ -29,11 +31,23 @@ export function Columns(props: BlockProps<DocumentBlockColumns>) {
 
 export function Column(props: {
     children?: React.ReactNode;
-    className?: ClassValue;
-    style?: React.CSSProperties;
+    width?: Length;
+    verticalAlignment?: VerticalAlignment;
 }) {
+    const { width, verticalAlignment } = props;
+    const { className, style } = transformLengthToCSS(width);
     return (
-        <div className={tcls('flex-col', props.className)} style={props.style}>
+        <div
+            className={tcls(
+                'flex flex-col',
+                (verticalAlignment === VerticalAlignment.Top || !verticalAlignment) &&
+                    'justify-start',
+                verticalAlignment === VerticalAlignment.Middle && 'justify-center',
+                verticalAlignment === VerticalAlignment.Bottom && 'justify-end',
+                className
+            )}
+            style={style}
+        >
             {props.children}
         </div>
     );