Icon in buttons and text alignment (#3365)

Author: SamyPesse

.changeset/gorgeous-cycles-grow.md

@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+Add support for icons in buttons.

.changeset/neat-walls-drum.md

@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+Add support for text alignment for headings and paragraphs.

bun.lock

@@ -286,7 +286,7 @@
     "react-dom": "^19.0.0",
   },
   "catalog": {
-    "@gitbook/api": "^0.121.0",
+    "@gitbook/api": "^0.122.0",
   },
   "packages": {
     "@ai-sdk/provider": ["@ai-sdk/[email protected]", "", { "dependencies": { "json-schema": "^0.4.0" } }, "sha512-0M+qjp+clUD0R1E5eWQFhxEvWLNaOtGQRUaBn8CUABnSKredagq92hUS9VjOzGsTm37xLfpaxl97AVtbeOsHew=="],
@@ -651,7 +651,7 @@
 
     "@fortawesome/fontawesome-svg-core": ["@fortawesome/[email protected]", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.6.0" } }, "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg=="],
 
-    "@gitbook/api": ["@gitbook/api@0.121.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-o4/N24RM0Rg8S/3yPDjPmt6TbQF+1iZmg9q9QKxOxMqpQ2bZmMUqS7dSkeqEbEBMALx/m/x0xQlJbEJGbOwteg=="],
+    "@gitbook/api": ["@gitbook/api@0.122.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-zZ40xlJsfh4aed4zkEAcLtuSNRbPmyG9HZ0zqVXqeUiqsm6gm2uhdY0VDL+zYxcDXDqbPcA1fiubfivdfe3LtA=="],
 
     "@gitbook/cache-do": ["@gitbook/cache-do@workspace:packages/cache-do"],
 

package.json

@@ -36,7 +36,7 @@
     "workspaces": {
         "packages": ["packages/*"],
         "catalog": {
-            "@gitbook/api": "^0.121.0"
+            "@gitbook/api": "^0.122.0"
         }
     },
     "patchedDependencies": {

packages/gitbook/e2e/internal.spec.ts

@@ -613,6 +613,11 @@ const testCases: TestsCase[] = [
                 url: 'blocks/links',
                 run: waitForCookiesDialog,
             },
+            {
+                name: 'Buttons',
+                url: 'blocks/buttons',
+                run: waitForCookiesDialog,
+            },
             {
                 name: 'Lists',
                 url: 'blocks/lists',

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

@@ -6,6 +6,7 @@ import type { BlockProps } from './Block';
 import { HashLinkButton, hashLinkButtonWrapperStyles } from './HashLinkButton';
 import { Inlines } from './Inlines';
 import { getBlockTextStyle } from './spacing';
+import { getTextAlignment } from './utils';
 
 export function Heading(props: BlockProps<DocumentBlockHeading>) {
     const { block, style, context, ...rest } = props;
@@ -42,7 +43,7 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
                     'grid-area-1-1',
                     'z-[1]',
                     'justify-self-start',
-                    'text-left',
+                    getTextAlignment(block.data.align),
                     textStyle.lineHeight,
                     textStyle.marginTop
                 )}

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

@@ -1,5 +1,6 @@
 import { resolveContentRef } from '@/lib/references';
 import * as api from '@gitbook/api';
+import type { IconName } from '@gitbook/icons';
 import { Button } from '../primitives';
 import type { InlineProps } from './Inline';
 
@@ -25,6 +26,7 @@ export async function InlineButton(props: InlineProps<api.DocumentInlineButton>)
                 // TODO: use a variant specifically for user-defined buttons.
                 variant={inline.data.kind}
                 className="leading-normal"
+                icon={inline.data.icon as IconName | undefined}
                 insights={{
                     type: 'link_click',
                     link: {

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

@@ -4,12 +4,13 @@ import { tcls } from '@/lib/tailwind';
 
 import type { BlockProps } from './Block';
 import { Inlines } from './Inlines';
+import { getTextAlignment } from './utils';
 
 export function Paragraph(props: BlockProps<DocumentBlockParagraph>) {
     const { block, style, ...contextProps } = props;
 
     return (
-        <p className={tcls(style)}>
+        <p className={tcls(style, getTextAlignment(block.data?.align))}>
             <Inlines {...contextProps} nodes={block.nodes} ancestorInlines={[]} />
         </p>
     );

packages/gitbook/src/components/DocumentView/utils/index.ts

@@ -1 +1,2 @@
 export * from './isBlockOffscreen';
+export * from './textAlignment';

packages/gitbook/src/components/DocumentView/utils/textAlignment.ts

@@ -0,0 +1,20 @@
+import type { ClassValue } from '@/lib/tailwind';
+import { nullIfNever } from '@/lib/typescript';
+import { TextAlignment } from '@gitbook/api';
+
+/**
+ * Get the tailwind class for a text alignment.
+ */
+export function getTextAlignment(textAlignment: TextAlignment | undefined): ClassValue {
+    switch (textAlignment) {
+        case undefined:
+        case TextAlignment.Start:
+            return ['text-start', 'justify-self-start'];
+        case TextAlignment.Center:
+            return ['text-center', 'justify-self-center'];
+        case TextAlignment.End:
+            return ['text-end', 'justify-self-end'];
+        default:
+            return nullIfNever(textAlignment);
+    }
+}