From 6f8b84589dab17561b2fb2809ae4f44f950dd81b Mon Sep 17 00:00:00 2001 From: Gabriele Antonini Date: Tue, 7 Jun 2022 17:57:04 +0200 Subject: [PATCH 1/3] feat(components): add component for multi column layout --- .../src/components/multi-column-layout.js | 26 ++++++++++ .../src/templates/page-content.js | 2 + .../components/multi-column-layout.mdx | 50 +++++++++++++++++++ .../docs-smoke-test/src/data/navigation.yaml | 2 + 4 files changed, 80 insertions(+) create mode 100644 packages/gatsby-theme-docs/src/components/multi-column-layout.js create mode 100644 websites/docs-smoke-test/src/content/components/multi-column-layout.mdx diff --git a/packages/gatsby-theme-docs/src/components/multi-column-layout.js b/packages/gatsby-theme-docs/src/components/multi-column-layout.js new file mode 100644 index 0000000000..95cbb172ce --- /dev/null +++ b/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.pageNavigationSmall}; + column-gap: ${designSystem.dimensions.spacings.l}; +`; + +const MultiColumnLayout = (props) => {props.children}; + +MultiColumnLayout.propTypes = { + children: PropTypes.any.isRequired, +}; + +export default MultiColumnLayout; diff --git a/packages/gatsby-theme-docs/src/templates/page-content.js b/packages/gatsby-theme-docs/src/templates/page-content.js index da2c770634..cfbe4b7c07 100644 --- a/packages/gatsby-theme-docs/src/templates/page-content.js +++ b/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) => ( @@ -28,6 +29,7 @@ const PageContentTemplate = (props) => ( ...markdownComponents, Cards: ContentCards, ChildSectionsNav, + MultiColumnLayout, }} > diff --git a/websites/docs-smoke-test/src/content/components/multi-column-layout.mdx b/websites/docs-smoke-test/src/content/components/multi-column-layout.mdx new file mode 100644 index 0000000000..462cbb9f21 --- /dev/null +++ b/websites/docs-smoke-test/src/content/components/multi-column-layout.mdx @@ -0,0 +1,50 @@ +--- +title: Multi column layout +--- + +# A list of links + + + + - [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]() + - [Parcel]() + - [Payment]() + - [ProductSelection]() + - [ReturnItem]() + - [Review]() + - [ShippingMethod]() + - [ShoppingList]() + - [StandalonePrice]() + - [Store]() + - [TextLineItem]() on [ShoppingList]() + - [Transaction]() on [Payment]() + + + +# A long text + + + + 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. + + diff --git a/websites/docs-smoke-test/src/data/navigation.yaml b/websites/docs-smoke-test/src/data/navigation.yaml index e091c07b88..5d93485873 100644 --- a/websites/docs-smoke-test/src/data/navigation.yaml +++ b/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 From d625a26cb60bc9accecb1d69436b0263d514bc7e Mon Sep 17 00:00:00 2001 From: Gabriele Antonini Date: Tue, 7 Jun 2022 17:57:04 +0200 Subject: [PATCH 2/3] feat(components): add component for multi column layout --- .../src/components/multi-column-layout.js | 26 ++++++++++ .../src/templates/page-content.js | 2 + .../components/multi-column-layout.mdx | 50 +++++++++++++++++++ .../docs-smoke-test/src/data/navigation.yaml | 2 + 4 files changed, 80 insertions(+) create mode 100644 packages/gatsby-theme-docs/src/components/multi-column-layout.js create mode 100644 websites/docs-smoke-test/src/content/components/multi-column-layout.mdx diff --git a/packages/gatsby-theme-docs/src/components/multi-column-layout.js b/packages/gatsby-theme-docs/src/components/multi-column-layout.js new file mode 100644 index 0000000000..95cbb172ce --- /dev/null +++ b/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.pageNavigationSmall}; + column-gap: ${designSystem.dimensions.spacings.l}; +`; + +const MultiColumnLayout = (props) => {props.children}; + +MultiColumnLayout.propTypes = { + children: PropTypes.any.isRequired, +}; + +export default MultiColumnLayout; diff --git a/packages/gatsby-theme-docs/src/templates/page-content.js b/packages/gatsby-theme-docs/src/templates/page-content.js index da2c770634..cfbe4b7c07 100644 --- a/packages/gatsby-theme-docs/src/templates/page-content.js +++ b/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) => ( @@ -28,6 +29,7 @@ const PageContentTemplate = (props) => ( ...markdownComponents, Cards: ContentCards, ChildSectionsNav, + MultiColumnLayout, }} > diff --git a/websites/docs-smoke-test/src/content/components/multi-column-layout.mdx b/websites/docs-smoke-test/src/content/components/multi-column-layout.mdx new file mode 100644 index 0000000000..462cbb9f21 --- /dev/null +++ b/websites/docs-smoke-test/src/content/components/multi-column-layout.mdx @@ -0,0 +1,50 @@ +--- +title: Multi column layout +--- + +# A list of links + + + + - [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]() + - [Parcel]() + - [Payment]() + - [ProductSelection]() + - [ReturnItem]() + - [Review]() + - [ShippingMethod]() + - [ShoppingList]() + - [StandalonePrice]() + - [Store]() + - [TextLineItem]() on [ShoppingList]() + - [Transaction]() on [Payment]() + + + +# A long text + + + + 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. + + diff --git a/websites/docs-smoke-test/src/data/navigation.yaml b/websites/docs-smoke-test/src/data/navigation.yaml index e091c07b88..5d93485873 100644 --- a/websites/docs-smoke-test/src/data/navigation.yaml +++ b/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 From 9565045a60938ac7ef8bddb58cad6f96b80a0f7f Mon Sep 17 00:00:00 2001 From: Gabriele Antonini Date: Thu, 16 Jun 2022 10:57:53 +0200 Subject: [PATCH 3/3] feat(multi column layout): always display up to 2 columns --- .../gatsby-theme-docs/src/components/multi-column-layout.js | 2 +- packages/ui-kit/src/design-system.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-theme-docs/src/components/multi-column-layout.js b/packages/gatsby-theme-docs/src/components/multi-column-layout.js index 95cbb172ce..10bb8d6a9a 100644 --- a/packages/gatsby-theme-docs/src/components/multi-column-layout.js +++ b/packages/gatsby-theme-docs/src/components/multi-column-layout.js @@ -13,7 +13,7 @@ const Container = styled.div` ${designSystem.dimensions.spacings.m}; border-radius: ${designSystem.tokens.borderRadiusForChildSectionNav} ${designSystem.tokens.borderRadiusForChildSectionNav}; - columns: auto ${designSystem.dimensions.widths.pageNavigationSmall}; + columns: auto ${designSystem.dimensions.widths.multiColumnLayoutColumnWidth}; column-gap: ${designSystem.dimensions.spacings.l}; `; diff --git a/packages/ui-kit/src/design-system.ts b/packages/ui-kit/src/design-system.ts index a097240ba0..0516f27ce9 100644 --- a/packages/ui-kit/src/design-system.ts +++ b/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.