Introduce the Stack and StackItem components (#3126)

Co-authored-by: Cameron Dutro <camertron@gmail.com>
primer · Oct 4, 2024 · 89052ca · 89052ca
1 parent 8d6ac66
commit 89052ca
Show file tree

Hide file tree

Showing 17 changed files with 1,002 additions and 6 deletions.
diff --git a/.changeset/shy-schools-grow.md b/.changeset/shy-schools-grow.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Introduce the Stack and StackItem components.
diff --git a/app/components/primer/alpha/stack.html.erb b/app/components/primer/alpha/stack.html.erb
@@ -0,0 +1,3 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= content %>
+<% end %>
diff --git a/app/components/primer/alpha/stack.pcss b/app/components/primer/alpha/stack.pcss
@@ -0,0 +1,297 @@
+.Stack {
+  display: flex;
+  flex-flow: column;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: var(--stack-gap, var(--stack-gap-normal, 1rem));
+
+  /* non-responsive values */
+
+  &[data-padding='none'],
+  &[data-padding-narrow='none'] {
+    padding: 0;
+  }
+
+  &[data-padding='condensed'],
+  &[data-padding-narrow='condensed'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-condensed, 8px);
+  }
+
+  &[data-padding='normal'],
+  &[data-padding-narrow='normal'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-normal, 16px);
+  }
+
+  &[data-padding='spacious'],
+  &[data-padding-narrow='spacious'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-spacious, 24px);
+  }
+
+  &[data-direction='horizontal'],
+  &[data-direction-narrow='horizontal'] {
+    flex-flow: row;
+  }
+
+  &[data-direction='vertical'],
+  &[data-direction-narrow='vertical'] {
+    flex-flow: column;
+  }
+
+  &[data-gap='none'],
+  &[data-gap-narrow='none'] {
+    --stack-gap: var(--stack-gap-none, 0);
+  }
+
+  &[data-gap='condensed'],
+  &[data-gap-narrow='condensed'] {
+    --stack-gap: var(--stack-gap-condensed, 0.5rem);
+  }
+
+  &[data-gap='normal'],
+  &[data-gap-narrow='normal'] {
+    --stack-gap: var(--stack-gap-normal, 1rem);
+  }
+
+  &[data-gap='spacious'],
+  &[data-gap-narrow='spacious'] {
+    --stack-gap: var(--stack-gap-spacious, 1.5rem);
+  }
+
+  &[data-align='start'],
+  &[data-align-narrow='start'] {
+    align-items: flex-start;
+  }
+
+  &[data-align='center'],
+  &[data-align-narrow='center'] {
+    align-items: center;
+  }
+
+  &[data-align='end'],
+  &[data-align-narrow='end'] {
+    align-items: flex-end;
+  }
+
+  &[data-align='baseline'],
+  &[data-align-narrow='baseline'] {
+    align-items: baseline;
+  }
+
+  &[data-justify='start'],
+  &[data-justify-narrow='start'] {
+    justify-content: flex-start;
+  }
+
+  &[data-justify='center'],
+  &[data-justify-narrow='center'] {
+    justify-content: center;
+  }
+
+  &[data-justify='end'],
+  &[data-justify-narrow='end'] {
+    justify-content: flex-end;
+  }
+
+  &[data-justify='space-between'],
+  &[data-justify-narrow='space-between'] {
+    justify-content: space-between;
+  }
+
+  &[data-justify='space-evenly'],
+  &[data-justify-narrow='space-evenly'] {
+    justify-content: space-evenly;
+  }
+
+  &[data-wrap='wrap'],
+  &[data-wrap-narrow='wrap'] {
+    flex-wrap: wrap;
+  }
+
+  &[data-wrap='nowrap'],
+  &[data-wrap-narrow='nowrap'] {
+    flex-wrap: nowrap;
+  }
+
+  /* @custom-media --veiwportRange-regular */
+  @media (min-width: 48rem) {
+    &[data-padding-regular='none'] {
+      padding: 0;
+    }
+
+    &[data-padding-regular='condensed'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-condensed, 8px);
+    }
+
+    &[data-padding-regular='normal'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-normal, 16px);
+    }
+
+    &[data-padding-regular='spacious'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-spacious, 24px);
+    }
+
+    &[data-direction-regular='horizontal'] {
+      flex-flow: row;
+    }
+
+    &[data-direction-regular='vertical'] {
+      flex-flow: column;
+    }
+
+    &[data-gap-regular='none'] {
+      --stack-gap: var(--stack-gap-none, 0);
+    }
+
+    &[data-gap-regular='condensed'] {
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
+    }
+
+    &[data-gap-regular='normal'] {
+      --stack-gap: var(--stack-gap-normal, 1rem);
+    }
+
+    &[data-gap-regular='spacious'] {
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
+    }
+
+    &[data-align-regular='start'] {
+      align-items: flex-start;
+    }
+
+    &[data-align-regular='center'] {
+      align-items: center;
+    }
+
+    &[data-align-regular='end'] {
+      align-items: flex-end;
+    }
+
+    &[data-align-regular='baseline'] {
+      align-items: baseline;
+    }
+
+    &[data-justify-regular='start'] {
+      justify-content: flex-start;
+    }
+
+    &[data-justify-regular='center'] {
+      justify-content: center;
+    }
+
+    &[data-justify-regular='end'] {
+      justify-content: flex-end;
+    }
+
+    &[data-justify-regular='space-between'] {
+      justify-content: space-between;
+    }
+
+    &[data-justify-regular='space-evenly'] {
+      justify-content: space-evenly;
+    }
+
+    &[data-wrap-regular='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    &[data-wrap-regular='nowrap'] {
+      flex-wrap: nowrap;
+    }
+  }
+
+  /* @custom-media --viewportRange-wide */
+  @media (min-width: 87.5rem) {
+    &[data-padding-wide='none'] {
+      padding: 0;
+    }
+
+    &[data-padding-wide='condensed'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-condensed, 8px);
+    }
+
+    &[data-padding-wide='normal'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-normal, 16px);
+    }
+
+    &[data-padding-wide='spacious'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-spacious, 24px);
+    }
+
+    &[data-direction-wide='horizontal'] {
+      flex-flow: row;
+    }
+
+    &[data-direction-wide='vertical'] {
+      flex-flow: column;
+    }
+
+    &[data-gap-wide='none'] {
+      --stack-gap: var(--stack-gap-none, 0);
+    }
+
+    &[data-gap-wide='condensed'] {
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
+    }
+
+    &[data-gap-wide='normal'] {
+      --stack-gap: var(--stack-gap-normal, 1rem);
+    }
+
+    &[data-gap-wide='spacious'] {
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
+    }
+
+    &[data-align-wide='start'] {
+      align-items: flex-start;
+    }
+
+    &[data-align-wide='center'] {
+      align-items: center;
+    }
+
+    &[data-align-wide='end'] {
+      align-items: flex-end;
+    }
+
+    &[data-align-wide='baseline'] {
+      align-items: baseline;
+    }
+
+    &[data-justify-wide='start'] {
+      justify-content: flex-start;
+    }
+
+    &[data-justify-wide='center'] {
+      justify-content: center;
+    }
+
+    &[data-justify-wide='end'] {
+      justify-content: flex-end;
+    }
+
+    &[data-justify-wide='space-between'] {
+      justify-content: space-between;
+    }
+
+    &[data-justify-wide='space-evenly'] {
+      justify-content: space-evenly;
+    }
+
+    &[data-wrap-wide='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    &[data-wrap-wide='nowrap'] {
+      flex-wrap: nowrap;
+    }
+  }
+}