Column: Add support for hide above/below breakpoint

.changeset/fast-kangaroos-switch.md

@@ -0,0 +1,29 @@
+---
+'braid-design-system': minor
+---
+
+---
+new:
+  - Column
+---
+
+**Column:** Add support for hide above/below breakpoint
+
+Introduce new `hideAbove` and `hideBelow` props on column for responsively hiding columns across breakpoint.
+
+These props can be used either separately or in combination to optimise content display across different screen sizes.
+
+**EXAMPLE USAGE:**
+```jsx
+<Columns space="small">
+  <Column>
+    <Placeholder height={60} label="Always visible" />
+  </Column>
+  <Column hideBelow="tablet">
+    <Placeholder height={60} label="Tablet and above" />
+  </Column>
+  <Column hideAbove="mobile">
+    <Placeholder height={60} label="Mobile Only" />
+  </Column>
+</Columns>
+```

packages/braid-design-system/src/lib/components/Column/Column.screenshots.tsx

@@ -10,7 +10,7 @@ const widths = [
 ] as const;
 
 export const screenshots: ComponentScreenshot = {
-  screenshotWidths: [320],
+  screenshotWidths: [320, 768, 1200],
   screenshotOnlyInWireframe: true,
   examples: [
     {
@@ -166,5 +166,72 @@ export const screenshots: ComponentScreenshot = {
         </Stack>
       ),
     },
+    {
+      label: 'Hide second column below desktop',
+      Example: () => (
+        <Columns space="small">
+          <Column>
+            <Placeholder height={60} label="Visible 1" />
+          </Column>
+          <Column hideBelow="desktop">
+            <Placeholder height={60} label="Visible Desktop & above" />
+          </Column>
+          <Column>
+            <Placeholder height={60} label="Visible 3" />
+          </Column>
+        </Columns>
+      ),
+    },
+    {
+      label: 'Hide second column above tablet',
+      Example: () => (
+        <Columns space="small">
+          <Column>
+            <Placeholder height={60} label="Visible 1" />
+          </Column>
+          <Column hideAbove="tablet">
+            <Placeholder height={60} label="Visible Mobile & Tablet" />
+          </Column>
+          <Column>
+            <Placeholder height={60} label="Visible 3" />
+          </Column>
+        </Columns>
+      ),
+    },
+    {
+      label: 'Hide second column below tablet when collapsed',
+      Example: () => (
+        <Columns space="small" collapseBelow="tablet">
+          <Column>
+            <Placeholder height={60} label="Visible 1" />
+          </Column>
+          <Column hideBelow="tablet">
+            <Placeholder
+              height={60}
+              label="Visible Tablet & above (collapsed below tablet)"
+            />
+          </Column>
+          <Column>
+            <Placeholder height={60} label="Visible 3" />
+          </Column>
+        </Columns>
+      ),
+    },
+    {
+      label: 'Hide second column below desktop and above mobile',
+      Example: () => (
+        <Columns space="small">
+          <Column>
+            <Placeholder height={60} label="Visible 1" />
+          </Column>
+          <Column hideBelow="desktop" hideAbove="mobile">
+            <Placeholder height={60} label="Hidden Tablet Only" />
+          </Column>
+          <Column>
+            <Placeholder height={60} label="Visible 3" />
+          </Column>
+        </Columns>
+      ),
+    },
   ],
 };

packages/braid-design-system/src/lib/components/Column/Column.tsx

@@ -5,18 +5,26 @@ import { ColumnsContext } from '../Columns/ColumnsContext';
 import buildDataAttributes, {
   type DataAttributeMap,
 } from '../private/buildDataAttributes';
+import {
+  resolveResponsiveRangeProps,
+  type ResponsiveRangeProps,
+} from '../../utils/resolveResponsiveRangeProps';
 import * as styles from './Column.css';
 
 export interface ColumnProps {
   children: ReactNode;
   width?: keyof typeof styles.width | 'content';
+  hideBelow?: ResponsiveRangeProps['below'];
+  hideAbove?: ResponsiveRangeProps['above'];
   data?: DataAttributeMap;
 }
 
 export const Column = ({
   children,
   data,
   width,
+  hideBelow,
+  hideAbove,
   ...restProps
 }: ColumnProps) => {
   const {
@@ -30,11 +38,21 @@ export const Column = ({
     collapsibleAlignmentChildProps,
     component,
   } = useContext(ColumnsContext);
+  const [hideOnMobile, hideOnTablet, hideOnDesktop, hideOnWide] =
+    resolveResponsiveRangeProps({
+      below: hideBelow,
+      above: hideAbove,
+    });
 
   return (
     <Box
       component={component}
-      display={component === 'span' ? 'block' : undefined}
+      display={optimizeResponsiveArray([
+        hideOnMobile ? 'none' : 'block',
+        hideOnTablet ? 'none' : 'block',
+        hideOnDesktop ? 'none' : 'block',
+        hideOnWide ? 'none' : 'block',
+      ])}
       minWidth={0}
       width={width !== 'content' ? 'full' : undefined}
       flexShrink={width === 'content' ? 0 : undefined}

packages/braid-design-system/src/lib/components/Columns/Columns.docs.tsx

@@ -270,6 +270,80 @@ const docs: ComponentDocs = {
           </Stack>,
         ),
     },
+    {
+      label: 'Column visibility',
+      description: (
+        <>
+          <Text>
+            Columns can be hidden responsively using the{' '}
+            <Strong>hideBelow</Strong> and/or <Strong>hideAbove</Strong> prop,
+            by specifying the name of the breakpoint, e.g.{' '}
+            <Strong>hideBelow=&ldquo;tablet&rdquo;</Strong>.
+          </Text>
+          <Text>
+            Consider the three column layout below, applying{' '}
+            <Strong>hideBelow=&ldquo;tablet&rdquo;</Strong> to the second
+            column. Three columns will be shown from the <Strong>tablet</Strong>{' '}
+            breakpoint upwards, and the second column will be hidden on{' '}
+            <Strong>mobile</Strong>.
+          </Text>
+        </>
+      ),
+      Example: () => {
+        const { value: visual } = source(
+          <Tiles space="xlarge" columns={[1, 2]}>
+            <Stack space="small">
+              <Text tone="secondary" size="small">
+                On “tablet” and above
+              </Text>
+              <Columns space="small">
+                <Column>
+                  <Placeholder height={60} label="One" />
+                </Column>
+                <Column>
+                  <Placeholder height={60} label="Two" />
+                </Column>
+                <Column>
+                  <Placeholder height={60} label="Three" />
+                </Column>
+              </Columns>
+            </Stack>
+            <Stack space="small">
+              <Text tone="secondary" size="small">
+                Below “tablet”
+              </Text>
+              <Columns space="small">
+                <Column>
+                  <Placeholder height={60} label="One" />
+                </Column>
+                <Column>
+                  <Placeholder height={60} label="Three" />
+                </Column>
+              </Columns>
+            </Stack>
+          </Tiles>,
+        );
+
+        const { code: codeDemo } = source(
+          <Columns space="small">
+            <Column>
+              <Placeholder height={60} label="One" />
+            </Column>
+            <Column hideBelow="tablet">
+              <Placeholder height={60} label="Two" />
+            </Column>
+            <Column>
+              <Placeholder height={60} label="Three" />
+            </Column>
+          </Columns>,
+        );
+
+        return {
+          code: codeDemo,
+          value: visual,
+        };
+      },
+    },
     {
       label: 'Collapsing across breakpoints',
       description: (
@@ -287,9 +361,8 @@ const docs: ComponentDocs = {
           </Text>
         </>
       ),
-      code: false,
-      Example: () =>
-        source(
+      Example: () => {
+        const { value: visual } = source(
           <Tiles space="xlarge" columns={[1, 2]}>
             <Stack space="small">
               <Text tone="secondary" size="small">
@@ -318,7 +391,27 @@ const docs: ComponentDocs = {
               </Stack>
             </Stack>
           </Tiles>,
-        ),
+        );
+
+        const { code: codeDemo } = source(
+          <Columns space="small" collapseBelow="tablet">
+            <Column>
+              <Placeholder height={60} />
+            </Column>
+            <Column>
+              <Placeholder height={60} />
+            </Column>
+            <Column>
+              <Placeholder height={60} />
+            </Column>
+          </Columns>,
+        );
+
+        return {
+          code: codeDemo,
+          value: visual,
+        };
+      },
     },
     {
       label: 'Reversing the column order',

packages/braid-design-system/src/lib/components/Inline/Inline.docs.tsx

@@ -158,9 +158,8 @@ const docs: ComponentDocs = {
           </Text>
         </>
       ),
-      code: false,
-      Example: () =>
-        source(
+      Example: () => {
+        const { value: visual } = source(
           <Tiles space="xlarge" columns={[1, 2]}>
             <Stack space="small">
               <Text tone="secondary" size="small">
@@ -183,7 +182,21 @@ const docs: ComponentDocs = {
               </Stack>
             </Stack>
           </Tiles>,
-        ),
+        );
+
+        const { code: codeDemo } = source(
+          <Inline space="small" collapseBelow="tablet">
+            <Placeholder width={48} height={48} />
+            <Placeholder width={48} height={48} />
+            <Placeholder width={48} height={48} />
+          </Inline>,
+        );
+
+        return {
+          code: codeDemo,
+          value: visual,
+        };
+      },
     },
   ],
 };

packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap

@@ -2788,6 +2788,14 @@ exports[`Column 1`] = `
   props: {
     children: ReactNode
     data?: DataAttributeMap
+    hideAbove?: 
+        | "desktop"
+        | "mobile"
+        | "tablet"
+    hideBelow?: 
+        | "desktop"
+        | "tablet"
+        | "wide"
     width?: 
         | "1/2"
         | "1/3"