Move Subhead styles to PVC (#1594)

Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Jon Rohan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jon Rohan <[email protected]>
primer · Nov 10, 2022 · 55f0d4d · 55f0d4d
1 parent 7042b5f
commit 55f0d4d
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 1 deletion.
diff --git a/.changeset/seven-pumpkins-smoke.md b/.changeset/seven-pumpkins-smoke.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Move `Subhead` styles to PVC
diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss
@@ -11,4 +11,5 @@
 @import "./beta/progress_bar.pcss";
 @import "./beta/truncate.pcss";
 @import "./state_component.pcss";
+@import "./subhead_component.pcss";
 @import "./truncate.pcss";
diff --git a/app/components/primer/subhead_component.pcss b/app/components/primer/subhead_component.pcss
@@ -0,0 +1,49 @@
+/* Subhead */
+
+.Subhead {
+  display: flex;
+  padding-bottom: var(--primer-stack-padding-condensed, 8px);
+  margin-bottom: var(--primer-stack-gap-normal, 16px);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+  flex-flow: row wrap;
+  justify-content: flex-end; /* Keep actions right aligned. */
+}
+
+/* Modifier class to give a lot of breathing room between sections of content. */
+.Subhead--spacious {
+  margin-top: var(--base-size-40, 40px);
+}
+
+/* <h2> sized heading with normal font weight */
+.Subhead-heading {
+  font-size: 24px;
+  font-weight: var(--base-text-weight-normal, 400);
+  flex: 1 1 auto;
+  order: 0;
+}
+
+/* Make the text bold and red for dangerous content */
+.Subhead-heading--danger {
+  font-weight: var(--base-text-weight-semibold, 600);
+  color: var(--color-danger-fg);
+}
+
+/* One-liner of supporting text */
+.Subhead-description {
+  font-size: var(--primer-text-body-size-medium, 14px);
+  color: var(--color-fg-muted);
+  flex: 1 100%;
+  order: 2;
+}
+
+/* Add 1 or 2 buttons to the right of the heading */
+.Subhead-actions {
+  margin: var(--base-size-4, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);
+  align-self: center;
+  justify-content: flex-end;
+  order: 1;
+
+  & + .Subhead-description {
+    margin-top: var(--base-size-4, 4px);
+  }
+}
diff --git a/demo/app/assets/stylesheets/application.css b/demo/app/assets/stylesheets/application.css
@@ -25,7 +25,6 @@
  *= require @primer/css/dist/markdown.css
  *= require @primer/css/dist/popover.css
  *= require @primer/css/dist/select-menu.css
- *= require @primer/css/dist/subhead.css
  *= require @primer/css/dist/timeline.css
  *= require @primer/css/dist/toasts.css
 */