feat(components): add component for multi column layout

packages/gatsby-theme-docs/src/components/multi-column-layout.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { designSystem } from '@commercetools-docs/ui-kit';
+
+const Container = styled.div`
+  border: 1px solid ${designSystem.colors.light.borderSecondary};
+  @media screen and (${designSystem.dimensions.viewports.mobile}) {
+    padding: ${designSystem.dimensions.spacings.s};
+  }
+  padding: ${designSystem.dimensions.spacings.m}
+    ${designSystem.dimensions.spacings.m} ${designSystem.dimensions.spacings.s}
+    ${designSystem.dimensions.spacings.m};
+  border-radius: ${designSystem.tokens.borderRadiusForChildSectionNav}
+    ${designSystem.tokens.borderRadiusForChildSectionNav};
+  columns: auto ${designSystem.dimensions.widths.multiColumnLayoutColumnWidth};
+  column-gap: ${designSystem.dimensions.spacings.l};
+`;
+
+const MultiColumnLayout = (props) => <Container>{props.children}</Container>;
+
+MultiColumnLayout.propTypes = {
+  children: PropTypes.any.isRequired,
+};
+
+export default MultiColumnLayout;

packages/gatsby-theme-docs/src/templates/page-content.js

@@ -10,6 +10,7 @@ import { SEO, ThemeProvider } from '../components';
 import markdownComponents from '../markdown-components';
 import { PageDataContext } from '../hooks/use-page-data';
 import ChildSectionsNav from '../components/child-sections-nav';
+import MultiColumnLayout from '../components/multi-column-layout';
 
 const ContentCards = (props) => (
   <markdownComponents.Cards fitContentColumn={true} {...props} />
@@ -28,6 +29,7 @@ const PageContentTemplate = (props) => (
               ...markdownComponents,
               Cards: ContentCards,
               ChildSectionsNav,
+              MultiColumnLayout,
             }}
           >
             <Markdown.TypographyPage>

packages/ui-kit/src/design-system.ts

@@ -219,6 +219,7 @@ export const dimensions = {
     searchBarSmall: '160px',
     selectDropDownArrowWith: '12px',
     sideBySideSecondColumn: asideColumnWidth,
+    multiColumnLayoutColumnWidth: '240px',
     // The card sizes are manually optimized to make regular cards two-aside on landing pages
     // and narrow cards three-aside in any landing page size.
     // Plus, you can put 2,3,4,6 cards in a grid without whitespace.

websites/docs-smoke-test/src/content/components/multi-column-layout.mdx

@@ -0,0 +1,50 @@
+---
+title: Multi column layout
+---
+
+# A list of links
+
+<MultiColumnLayout>
+
+  - [Address]() on [Cart](), [Order](), [OrderEdit](), [Customer](), and [Channel]()
+  - [Asset]() on [Category]() and [ProductVariant]()
+  - [Cart]()
+  - [CartDiscount]()
+  - [Category]()
+  - [Channel]()
+  - [Customer]()
+  - [CustomerGroup]()
+  - [CustomLineItem]() on [Cart]() and [Order]()
+  - [Delivery]()
+  - [DiscountCode]()
+  - [EmbeddedPrice]()
+  - [InterfaceInteraction]() on [Payment]()
+  - [InventoryEntry]()
+  - [LineItem]() on [Cart]() and [Order](), and [LineItem]() on [ShoppingList]()
+  - [Order]()
+  - [OrderEdit]() <Beta />
+  - [Parcel]()
+  - [Payment]()
+  - [ProductSelection]() <Beta />
+  - [ReturnItem]()
+  - [Review]()
+  - [ShippingMethod]()
+  - [ShoppingList]()
+  - [StandalonePrice]() <Beta />
+  - [Store]()
+  - [TextLineItem]() on [ShoppingList]()
+  - [Transaction]() on [Payment]()
+
+</MultiColumnLayout>
+
+# A long text
+
+<MultiColumnLayout>
+
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis et nunc ac pulvinar. Nunc tempus bibendum accumsan. Aenean nibh nisl, pellentesque ac velit et, finibus pharetra ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sodales lectus justo, eu venenatis nunc luctus id. Nunc odio nisl, rutrum nec eros tincidunt, blandit aliquet erat. Suspendisse eu augue tellus. Ut varius metus lectus, nec vulputate libero ultrices dictum. Proin sit amet mi vestibulum dui congue ornare. Nullam condimentum quam non sem suscipit mollis. Vivamus mollis, augue sit amet viverra condimentum, lorem arcu dictum purus, sit amet bibendum neque nulla non elit. Nunc eu quam ut ante scelerisque interdum. Integer porta dolor vitae ipsum bibendum, id suscipit odio fringilla. Quisque vitae lacus non libero condimentum blandit. Maecenas maximus risus ligula, a viverra magna cursus non.
+
+  Maecenas tempus vel ligula in commodo. Vivamus tincidunt finibus erat, vitae aliquet lorem sodales ac. Ut arcu mi, laoreet eu facilisis eget, rutrum vel neque. Praesent quis faucibus felis. Praesent feugiat pellentesque nisi non hendrerit. Mauris non consectetur libero. Praesent ornare dignissim turpis a euismod. Nunc bibendum libero egestas est cursus tempus. Fusce eu venenatis lectus, pulvinar lobortis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris aliquet, mauris non molestie pellentesque, ex lacus elementum metus, et suscipit ex dui a tellus. Nunc sagittis laoreet ligula id imperdiet.
+
+  Suspendisse a eleifend ipsum, eu dapibus lorem. Praesent mattis felis sit amet nulla finibus, eget pretium ipsum cursus. Maecenas at elit eget lacus molestie posuere. Fusce dignissim sagittis tortor, dignissim venenatis nulla vehicula vestibulum. Suspendisse euismod sem lectus. Aliquam nisi nisl, sollicitudin vestibulum tellus at, malesuada rhoncus lorem. Vivamus ultricies posuere dolor vitae ullamcorper. Quisque ullamcorper porttitor justo eu sodales. Morbi id ex quis dolor vehicula aliquet sit amet eget arcu. Praesent maximus turpis leo, at congue leo sagittis a.
+
+</MultiColumnLayout>

websites/docs-smoke-test/src/data/navigation.yaml

@@ -39,6 +39,8 @@
       path: /components/child-section-navigation
     - title: Mermaid Diagrams
       path: /components/mermaid-diagram
+    - title: Multi column layout
+      path: /components/multi-column-layout
 - chapter-title: Chapter 9999 With a Longer Multi-Word Name that Wraps
   pages:
     - title: Page with some very long title too much for our innocent API to handle