feat(SASS): add allBetween mixins

packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.module.scss

@@ -5,3 +5,54 @@
     @include fieldsetReset();
   }
 }
+
+.showWhenLarge,
+.showWhenMedium,
+.showWhenSmall {
+  color: grey;
+}
+.showWhenLargeOffset,
+.showWhenMediumOffset,
+.showWhenSmallOffset {
+  color: white;
+}
+
+// 1. Show green when NO offset is given
+.showWhenLarge {
+  @include allAbove(medium) {
+    color: var(--color-success-green);
+  }
+}
+.showWhenMedium {
+  @include allBetween(small, medium) {
+    color: var(--color-success-green);
+  }
+}
+.showWhenSmall {
+  @include allBelow(small) {
+    color: var(--color-success-green);
+  }
+}
+
+// 2. Show red when an offset of 6em matches
+.showWhenLargeOffset {
+  // is grey on 1055
+  // is green on 1056
+  @include allAbove(medium, 6em) {
+    color: var(--color-success-green);
+  }
+}
+.showWhenMediumOffset {
+  // is grey on 735 or 865
+  // is green on 736 and 864
+  @include allBetween(small, medium, 6em, -6em) {
+    color: var(--color-success-green);
+  }
+}
+.showWhenSmallOffset {
+  // is grey on 545
+  // is green on 544
+  @include allBelow(small, -6em) {
+    color: var(--color-success-green);
+  }
+}

packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.tsx

@@ -6,7 +6,16 @@
 import React from 'react'
 import styled from '@emotion/styled'
 import ComponentBox from '../../../shared/tags/ComponentBox'
-import { fieldsetReset } from './Examples.module.scss'
+import {
+  fieldsetReset,
+  showWhenSmall,
+  showWhenMedium,
+  showWhenLarge,
+  showWhenSmallOffset,
+  showWhenMediumOffset,
+  showWhenLargeOffset,
+} from './Examples.module.scss'
+import { Li, Ul } from '@dnb/eufemia/src'
 
 // have a limit because this page is used for screenshot tests
 const Wrapper = styled.div`
@@ -109,3 +118,35 @@ export function FormsetReset() {
     </Wrapper>
   )
 }
+
+export function MediaSizeOffset() {
+  return (
+    <ComponentBox
+      hideCode
+      data-visual-test="helper-media-offset"
+      scope={{
+        showWhenSmall,
+        showWhenMedium,
+        showWhenLarge,
+        showWhenSmallOffset,
+        showWhenMediumOffset,
+        showWhenLargeOffset,
+      }}
+    >
+      <Ul space={0}>
+        <Li className={showWhenSmall}>
+          Show me when "small"{' '}
+          <span className={showWhenSmallOffset}>+ offset is active</span>
+        </Li>
+        <Li className={showWhenMedium}>
+          Show me when "medium"{' '}
+          <span className={showWhenMediumOffset}>+ offset is active</span>
+        </Li>
+        <Li className={showWhenLarge}>
+          Show me when "large"{' '}
+          <span className={showWhenLargeOffset}>+ offset is active</span>
+        </Li>
+      </Ul>
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/helpers/sass.mdx

@@ -86,6 +86,19 @@ Use the `allAbove` or `allBelow` mixins to add media queries to your css.
 }
 ```
 
+In some cases you may need a more narrowed variant: `isSmall`, `isMedium` or `isLarge` to target screen sizes.
+
+```scss
+@import '@dnb/eufemia/style/core/utilities.scss';
+
+@include isSmall() {
+}
+@include isMedium() {
+}
+@include isLarge() {
+}
+```
+
 `$breakpoints` is a key-value map containing all the available sizes for media queries
 
 ```scss

packages/dnb-design-system-portal/src/docs/uilib/helpers/visual-tests/scss-sizes.mdx

@@ -0,0 +1,7 @@
+---
+fullscreen: true
+---
+
+import * as Examples from '../Examples'
+
+<Examples.MediaSizeOffset />

packages/dnb-design-system-portal/src/docs/uilib/layout/grid/info.mdx

@@ -26,3 +26,5 @@ You find more related information in the [Layout](/uilib/layout) pages.
 ## Columns
 
 UX designers are using a 12 column system, along with a 4 and 6 column system, during their design processes.
+
+Here is an [example](/uilib/layout/grid/visual-tests/page-layout/) of how to use this Grid component for a page layout.

packages/dnb-design-system-portal/src/docs/uilib/layout/grid/visual-tests/Examples.tsx

@@ -0,0 +1,205 @@
+import React from 'react'
+import { Global, css } from '@emotion/react'
+import { useMedia } from '@dnb/eufemia/src/shared'
+import { Button, Grid } from '@dnb/eufemia/src'
+import ComponentBox from '../../../../../shared/tags/ComponentBox'
+import styled from '@emotion/styled'
+
+/**
+ * NB: We want a total with of 272+24+1136=1432
+ * Ideally all 15 columns should have 80px in max-width.
+ * But that requres much more code to achieve.
+ * This solution makes a compormize on that.
+ *
+ * The reason is that;
+ * when we use a gap of 24 between the sidebar and the page content,
+ * we can't distribute the widths evenly anymore.
+ * The sidebar columns are a little bit smaller,
+ * than the page content columns.
+ */
+
+export function PageLayoutExample() {
+  return (
+    <>
+      <Global
+        styles={css`
+          /** Reset global styles */
+          #dnb-app-content,
+          .dnb-app-content.fullscreen-page {
+            padding: 0;
+          }
+          .example-box {
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+          }
+        `}
+      />
+
+      <ComponentBox hideCode scope={{ useMedia }}>
+        {() => {
+          const Wrapper = styled.div`
+            .pageContainer {
+              --sidebar-width: 17rem;
+              --page-container-gap: 1.5rem;
+              --page-width: var(--layout-large);
+
+              max-width: calc(
+                var(--sidebar-width) + var(--page-container-gap) +
+                  var(--page-width)
+              );
+
+              margin: auto;
+
+              background-color: var(--color-lavender);
+              box-shadow: 0 0 0 1px black;
+            }
+
+            .sidebarContent {
+              background-color: var(--color-sand-yellow);
+            }
+
+            .pageContent {
+            }
+
+            .columnItem {
+              display: grid;
+              place-content: center;
+
+              html:not([data-visual-test]) & {
+                min-height: 70vh;
+              }
+
+              text-align: center;
+            }
+          `
+
+          function PageLayout() {
+            const { isSmall, isMedium, isLarge } = useMedia()
+
+            const { minimizedSidebar, Toggle } = useMinimizeSidebar()
+            const showSidebar = !isMedium
+            const sidebarColumns = isSmall ? 0 : minimizedSidebar ? 1 : 3
+            const pageColumns = isSmall
+              ? 4
+              : isMedium
+              ? 6
+              : isLarge
+              ? 12
+              : 0
+
+            return (
+              <Wrapper>
+                <Grid.Container
+                  className="pageContainer"
+                  columns={pageColumns + sidebarColumns}
+                  columnGap="medium"
+                >
+                  {showSidebar && (
+                    <Grid.Item span={[1, sidebarColumns]}>
+                      <SidebarContent
+                        columns={sidebarColumns}
+                        Toggle={Toggle}
+                      />
+                    </Grid.Item>
+                  )}
+
+                  <Grid.Item
+                    span={[showSidebar ? sidebarColumns + 1 : 1, 'end']}
+                  >
+                    <PageContent columns={pageColumns} />
+                  </Grid.Item>
+                </Grid.Container>
+              </Wrapper>
+            )
+          }
+
+          function useColumns({ columns, color }) {
+            const content = [...Array(columns)].map((_, i) => {
+              const nr = i + 1
+              return (
+                <Grid.Item
+                  className="columnItem"
+                  key={i}
+                  span={[nr, nr]}
+                  style={color}
+                >
+                  {nr}
+                </Grid.Item>
+              )
+            })
+
+            return content
+          }
+
+          function useMinimizeSidebar() {
+            const [minimizedSidebar, setMinimize] = React.useState(false)
+            const clickHandler = () => {
+              setMinimize((s) => !s)
+            }
+
+            return {
+              minimizedSidebar,
+              Toggle: () => (
+                <Button
+                  icon={minimizedSidebar ? 'arrow_right' : 'arrow_left'}
+                  space="x-small"
+                  variant="secondary"
+                  on_click={clickHandler}
+                />
+              ),
+            }
+          }
+
+          function SidebarContent({ columns, Toggle }) {
+            const content = useColumns({ columns, color: colors[1] })
+
+            return (
+              columns > 0 && (
+                <Grid.Container
+                  className="sidebarContent"
+                  columnGap
+                  columns={columns}
+                >
+                  {content}
+
+                  <Grid.Item
+                    span="full"
+                    style={{
+                      display: 'grid',
+                      placeContent: 'center',
+                    }}
+                  >
+                    <Toggle />
+                  </Grid.Item>
+                </Grid.Container>
+              )
+            )
+          }
+
+          function PageContent({ columns }) {
+            const content = useColumns({
+              columns,
+              color: colors[0],
+            })
+            return (
+              <Grid.Container
+                className="pageContent"
+                columns={columns}
+                columnGap
+              >
+                {content}
+              </Grid.Container>
+            )
+          }
+
+          const colors = [
+            { background: 'var(--color-sea-green-30)' },
+            { background: 'var(--color-mint-green-50)' },
+          ]
+
+          return <PageLayout />
+        }}
+      </ComponentBox>
+    </>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/layout/grid/visual-tests/page-layout.mdx

@@ -0,0 +1,9 @@
+---
+fullscreen: true
+---
+
+import * as Examples from './Examples'
+
+This is a demo of how to use the Grid component for a page layout. It visualizes each column, instead of actual content.
+
+<Examples.PageLayoutExample />

packages/dnb-design-system-portal/src/docs/uilib/layout/info.mdx

@@ -10,7 +10,7 @@ To make it easier to build application layout and [form](/uilib/extensions/forms
 
 - **[Spacing](/uilib/layout/spacing)** table and information.
 
-- **[Media Queries](/uilib/layout/media-queries)** table and information.
+- **[Media Queries](/uilib/layout/media-queries)** and breakpoints table and information.
 
 - **[Flex](/uilib/layout/flex)** is a building block for CSS flexbox based layout of contents, components and [forms](/uilib/extensions/forms).