Add Stack component

docs/src/stories/components/Layout/Stack.stories.js

@@ -0,0 +1,209 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Layout/Stack',
+  excludeStories: ['StackTemplate'],
+  argTypes: {
+
+    // Debug
+
+    _debug: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'Debug'
+      },
+    },
+
+    // Direction
+
+    direction: {
+      options: ['inline', 'block'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    narrow_direction: {
+      options: ['inline', 'block'],
+      control: {
+        type: 'inline-radio',
+      },
+      table: {
+        category: 'Narrow viewport'
+      },
+    },
+
+    // Gap
+
+    gap: {
+      options: ['none', 'condensed', 'normal', 'spacious', 'custom'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    narrow_gap: {
+      options: ['none', 'condensed', 'normal', 'custom'],
+      control: {
+        type: 'inline-radio',
+      },
+      table: {
+        category: 'Narrow viewport'
+      },
+    },
+    gap_custom: {
+      control: {
+        type: 'string'
+      },
+    },
+    narrow_gap_custom: {
+      control: {
+        type: 'string'
+      },
+      table: {
+        category: 'Narrow viewport'
+      },
+    },
+
+    // Align
+
+    align: {
+      options: ['start', 'center', 'end'],
+      control: {
+        type: 'inline-radio'
+      },
+    },
+    narrow_align: {
+      options: ['start', 'center', 'end'],
+      control: {
+        type: 'inline-radio'
+      },
+      table: {
+        category: 'Narrow viewport'
+      },
+    },
+
+    // Wrap
+
+    wrap: {
+      options: ['wrap', 'nowrap'],
+      control: {
+        type: 'inline-radio'
+      },
+    },
+    narrow_wrap: {
+      options: ['wrap', 'nowrap'],
+      control: {
+        type: 'inline-radio'
+      },
+      table: {
+        category: 'Narrow viewport'
+      },
+    },
+
+    // Divider
+
+    divider: {
+      control: {
+        type: 'boolean'
+      },
+    },
+    narrow_divider: {
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        category: 'Narrow viewport'
+      },
+    },
+  },
+};
+
+export const StackTemplate = ({
+  _debug,
+  direction,
+  gap,
+  gap_custom,
+  align,
+  wrap,
+  divider,
+
+  narrow_direction,
+  narrow_gap,
+  narrow_gap_custom,
+  narrow_align,
+  narrow_wrap,
+  narrow_divider
+}) => {
+
+
+
+  return (
+    <>
+      <div className={clsx(
+          'Stack',
+          direction && 'Stack--' + `${direction}`,
+          gap && 'Stack--' + `${gap}`,
+          align && 'Stack--' + `${align}`,
+          wrap && 'Stack--' + `${wrap}`,
+        )}
+      >
+
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        <div>4</div>
+        <div>5</div>
+        <div>6</div>
+      </div>
+
+      {_debug && (
+        <>
+          <style type="text/css">{`
+            .Stack {
+              background: beige;
+            }
+            .Stack > * {
+              padding: 8px;
+              border-radius: 6px;
+            }
+            .Stack :nth-child(1) {
+              background: lightblue;
+              width: 6ch;
+            }
+            .Stack :nth-child(2) {
+              background: coral;
+              width: 9ch;
+            }
+            .Stack :nth-child(3) {
+              background: darkseagreen;
+              width: 8ch;
+            }
+            .Stack :nth-child(4) {
+              background: khaki;
+              width: 7ch;
+            }
+            .Stack :nth-child(5) {
+              background: lightpink;
+              width: 10ch;
+            }
+            .Stack :nth-child(6) {
+              background: lightsalmon;
+              width: 6ch;
+            }
+          `}</style>
+        </>
+      )}
+    </>
+  );
+};
+
+export const Playground = StackTemplate.bind({})
+
+Playground.args = {
+  _debug: true,
+  direction: "block",
+  gap: "normal",
+  align: "start",
+};

src/layout/index.scss

@@ -6,3 +6,4 @@
 @import './grid-offset.scss';
 @import './layout.scss';
 @import './page-layout.scss';
+@import './stack.scss';

src/layout/stack.scss

@@ -0,0 +1,119 @@
+// Stack layout helper
+
+.Stack {
+  --Stack-gap: var(--primer-stack-gap-normal, 16px);
+  --Stack-gap-whenNarrow: var(--Stack-gap);
+
+  display: flex;
+  flex-flow: column;
+  gap: var(--Stack-gap);
+
+  @media ($viewport-narrow) {
+    gap: var(--Stack-gap-whenNarrow);
+  }
+}
+
+/* Direction */
+
+.Stack--inline {
+  flex-flow: row;
+}
+
+.Stack--block {
+  flex-flow: column;
+}
+
+@media ($viewport-narrow) {
+  .Stack--inline-whenNarrow {
+    flex-flow: row;
+  }
+
+  .Stack--block-whenNarrow {
+    flex-flow: column;
+  }
+}
+
+/* Gap */
+
+.Stack--none {
+  --Stack-gap: 0;
+}
+
+.Stack--condensed {
+  --Stack-gap: var(--primer-stack-gap-condensed, 8px);
+}
+
+.Stack--normal {
+  --Stack-gap: var(--primer-stack-gap-normal, 16px);
+}
+
+@media ($viewport-regular) {
+  .Stack--spacious {
+    --Stack-gap: var(--primer-stack-gap-spacious, 24px);
+  }
+}
+
+@media ($viewport-narrow) {
+  .Stack--none-whenNarrow {
+    --Stack-gap-whenNarrow: 0;
+  }
+
+  .Stack--condensed-whenNarrow {
+    --Stack-gap-whenNarrow: var(--primer-stack-gap-condensed, 8px);
+  }
+
+  .Stack--normal-whenNarrow {
+    --Stack-gap-whenNarrow: var(--primer-stack-gap-normal, 16px);
+  }
+}
+
+/* Align */
+
+.Stack--start {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.Stack--center {
+  align-items: center;
+  justify-content: center;
+}
+
+.Stack--end {
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+@media ($viewport-narrow) {
+  .Stack--start-whenNarrow {
+    align-items: flex-start;
+  }
+
+  .Stack--center-whenNarrow {
+    align-items: center;
+  }
+
+  .Stack--end-whenNarrow {
+    align-items: flex-end;
+  }
+}
+
+/* Wrap */
+
+.Stack--wrap {
+  flex-wrap: wrap;
+}
+
+.Stack--nowrap {
+  flex-wrap: nowrap;
+}
+
+@media ($viewport-narrow) {
+  .Stack--wrap-whenNarrow {
+    flex-wrap: wrap;
+  }
+
+  .Stack--nowrap-whenNarrow {
+    flex-wrap: nowrap;
+  }
+}

src/support/variables/layout.scss

@@ -146,6 +146,12 @@ $breakpoints: (
   xl: $width-xl
 ) !default;
 
+// Viewport ranges
+// Soon to be provided by Primer Primitives directly
+// https://github.com/primer/primitives/blob/main/tokens/functional/size/viewport.json
+$viewport-narrow: 'max-width: #{$width-md - 0.02px}' !default;
+$viewport-regular: 'min-width: #{$width-md}' !default;
+
 // This map in the form (breakpoint: variant) is used to iterate over
 // breakpoints and create both responsive and non-responsive classes in one
 // loop: