fix: enable SideBySide in MultiPathBlock (#2096)

* fix: enable SideBySide in MultiPathBlock * chore: changeset * chore: fix vale rules * chore: fix gatsbyjs.org broken link
commercetools · Oct 11, 2024 · dc29d10 · dc29d10
1 parent 5fe6164
commit dc29d10
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 7 deletions.
diff --git a/.changeset/wise-gorillas-fly.md b/.changeset/wise-gorillas-fly.md
@@ -0,0 +1,9 @@
+---
+'@commercetools-website/api-docs-smoke-test': patch
+'@commercetools-docs/gatsby-theme-docs': patch
+'@commercetools-website/docs-smoke-test': patch
+'@commercetools-website/documentation': patch
+'@commercetools-docs/ui-kit': patch
+---
+
+Fix MultiPathBlock component to be able to display content side by side on wide viewports
diff --git a/packages/gatsby-theme-docs/gatsby-config.mjs b/packages/gatsby-theme-docs/gatsby-config.mjs
@@ -64,7 +64,7 @@ const config = (themeOptions = {}) => {
 
       /*
         gatsby-source-filesystem notes:
-        https://www.gatsbyjs.org/packages/gatsby-source-filesystem/?=file#how-to-query
+        https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/
         Most of these files get queried through other transformers,
         but the `name` property here allows filtering allFile queries:
         allFile(filter: { sourceInstanceName: { eq: "blog" } }) {

diff --git a/packages/ui-kit/src/components/multi-path-block/index.tsx b/packages/ui-kit/src/components/multi-path-block/index.tsx
@@ -216,6 +216,7 @@ const SelectorsContainer = styled.div`
 const ComponentWrapper = styled.div`
   border: 2px solid ${designSystem.colors.light.borderPrimary};
   border-radius: ${designSystem.tokens.borderRadiusForMultiPath};
+  max-width: 100% !important;
 `;
 
 const PathsContainer = styled.div`

diff --git a/websites/api-docs-smoke-test/src/content/layouts/endpoint-large-desktop.mdx b/websites/api-docs-smoke-test/src/content/layouts/endpoint-large-desktop.mdx
@@ -85,3 +85,26 @@ Blick two - don't forget the blank lines!
   resource="/{projectKey}/resource/searchApiPattern"
   method="GET"
 />
+
+## An Endpoint grouped in MultiPathBlock
+
+<MultiPathBlock>
+<PathBlock label="by ID">
+
+<ApiEndpoint
+  apiKey="test"
+  resource="/{projectKey}/resource/searchApiPattern"
+  method="GET"
+/>
+</PathBlock>
+
+<PathBlock label="by Key">
+
+<ApiEndpoint
+  apiKey="test"
+  resource="/{projectKey}/resource/key={key}"
+  method="GET"
+/>
+</PathBlock>
+
+</MultiPathBlock>
diff --git a/websites/docs-smoke-test/src/content/views/multi-path-block.mdx b/websites/docs-smoke-test/src/content/views/multi-path-block.mdx
@@ -2,6 +2,8 @@
 title: Multi Path Block
 ---
 
+<!-- vale commercetools.Units = NO -->
+
 import { LoginButton, IfUserLoggedOut, FirstName } from '@commercetools-docs/gatsby-theme-docs'
 
 <MultiPathBlock>
@@ -132,7 +134,8 @@ Some custom plan tags: <PlanTag plan="plan1" />, <PlanTag plan="plan2" />.
 
 <br/>
 
-**Mermaid Diagram**
+
+<SideBySide>
 
 ```mermaid
   flowchart LR
@@ -147,14 +150,13 @@ Some custom plan tags: <PlanTag plan="plan1" />, <PlanTag plan="plan2" />.
   click GitHub "http://www.github.com" "B is a link to Github"
 ```
 
-<br/>
-
-**Video Player**
 <Video
   url="https://customer-ytbpo1yna9xohg5m.cloudflarestream.com/33709d50562534d2a6f9f2b1766d8ff6/manifest/video.m3u8"
   poster="https://customer-ytbpo1yna9xohg5m.cloudflarestream.com/33709d50562534d2a6f9f2b1766d8ff6/thumbnails/thumbnail.jpg?time=10s"
 />
 
+</SideBySide>
+
 <br />
 
 **Self learning conditionals**

diff --git a/websites/docs-smoke-test/src/content/views/wide.mdx b/websites/docs-smoke-test/src/content/views/wide.mdx
@@ -5,6 +5,8 @@ wideLayout: true
 showTimeToRead: true
 ---
 
+<!-- vale commercetools.Units = NO -->
+
 # Manual Side By Side Content
 
 <SideBySide>
@@ -26,3 +28,58 @@ Blick two - don't forget the blank lines!
 
 </SideBySide>
 
+
+# Multi Path Block example
+
+<MultiPathBlock>
+<PathBlock label="Side by side test" >
+
+<SideBySide>
+
+```mermaid
+  flowchart LR
+  subgraph a subgraph
+  b2-->A
+  end
+  A[Start] --> GitHub{GitHub}
+  GitHub -->|Yes| C[OK]
+  C --> D[Rethink]
+  D --> GitHub
+  GitHub ---->|No| E[End]
+  click GitHub "http://www.github.com" "B is a link to Github"
+```
+
+<Video
+  url="https://customer-ytbpo1yna9xohg5m.cloudflarestream.com/33709d50562534d2a6f9f2b1766d8ff6/manifest/video.m3u8"
+  poster="https://customer-ytbpo1yna9xohg5m.cloudflarestream.com/33709d50562534d2a6f9f2b1766d8ff6/thumbnails/thumbnail.jpg?time=10s"
+/>
+
+</SideBySide>
+
+</PathBlock>
+
+<PathBlock label="Wide layout standard content" >
+
+```mermaid
+  flowchart LR
+  subgraph a subgraph
+  b2-->A
+  end
+  A[Start] --> GitHub{GitHub}
+  GitHub -->|Yes| C[OK]
+  C --> D[Rethink]
+  D --> GitHub
+  GitHub ---->|No| E[End]
+  click GitHub "http://www.github.com" "B is a link to Github"
+```
+
+<br />
+
+<Video
+  url="https://customer-ytbpo1yna9xohg5m.cloudflarestream.com/33709d50562534d2a6f9f2b1766d8ff6/manifest/video.m3u8"
+  poster="https://customer-ytbpo1yna9xohg5m.cloudflarestream.com/33709d50562534d2a6f9f2b1766d8ff6/thumbnails/thumbnail.jpg?time=10s"
+/>
+
+</PathBlock>
+
+</MultiPathBlock>
diff --git a/websites/documentation/src/content/writing/paths.mdx b/websites/documentation/src/content/writing/paths.mdx
@@ -25,8 +25,6 @@ The content of the `<PathBlock>` tag can be any type of content, including markd
 
 - **Do not use any headings** as it will break the side page navigation that is constructed based on the headings.
 
-- **Do not use SiteBySide** component as it will not render correctly.
-
 - Breaking lines can **only** be done using the html `<br/>` tag. The markdown syntax for breaking lines will not work.
 
 - The sync mechanism between blocks is based on the exact match of the language string (case insensitive). Meaning that `js` and `javascript` are considered different languages. Keep it in mind when defining the `syncWith` prop.