@primer/components 32.1.0 → 33.0.0-rc.b3e4ccee

package/src/__tests__/__snapshots__/Flex.test.tsx.snap

@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Flex renders consistently 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+<div
+  className="c0"
+  display="flex"
+/>
+`;
+
+exports[`Flex respects alignContent 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-content: start;
+  -ms-flex-line-pack: start;
+  align-content: start;
+}
+
+<div
+  className="c0"
+  display="flex"
+/>
+`;
+
+exports[`Flex respects alignItems 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+}
+
+<div
+  className="c0"
+  display="flex"
+/>
+`;
+
+exports[`Flex respects flexDirection 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+<div
+  className="c0"
+  display="flex"
+/>
+`;
+
+exports[`Flex respects flexWrap 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+<div
+  className="c0"
+  display="flex"
+/>
+`;
+
+exports[`Flex respects justifyContent 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: start;
+  -ms-flex-pack: start;
+  justify-content: start;
+}
+
+<div
+  className="c0"
+  display="flex"
+/>
+`;
+
+exports[`Flex respects responsive display 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+@media screen and (min-width:544px) {
+  .c0 {
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+  }
+}
+
+<div
+  className="c0"
+  display={
+    Array [
+      "flex",
+      "inline-flex",
+    ]
+  }
+/>
+`;

package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormGroup renders consistently 1`] = `
+.c0 {
+  margin: 16px 0;
+  font-weight: 400;
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`FormGroup.Label renders consistently 1`] = `
+.c0 {
+  display: block;
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+<label
+  className="c0"
+/>
+`;

package/src/__tests__/__snapshots__/Grid.test.tsx.snap

@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid renders consistently 1`] = `
+.c0 {
+  display: grid;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridArea 1`] = `
+.c0 {
+  display: grid;
+  grid-area: sidebar;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridAutoColumns 1`] = `
+.c0 {
+  display: grid;
+  grid-auto-columns: 1fr;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridAutoFlow 1`] = `
+.c0 {
+  display: grid;
+  grid-auto-flow: row;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridAutoRows 1`] = `
+.c0 {
+  display: grid;
+  grid-auto-rows: 1fr;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridColumn 1`] = `
+.c0 {
+  display: grid;
+  grid-column: 1 / 2;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridColumnGap 1`] = `
+.c0 {
+  display: grid;
+  grid-column-gap: 8px;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridGap 1`] = `
+.c0 {
+  display: grid;
+  grid-gap: 4px;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridRow 1`] = `
+.c0 {
+  display: grid;
+  grid-row: 1 / 2;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridRowGap 1`] = `
+.c0 {
+  display: grid;
+  grid-row-gap: 8px;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridTemplateAreas 1`] = `
+.c0 {
+  display: grid;
+  grid-template-areas: sidebar main;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridTemplateColumns 1`] = `
+.c0 {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridTemplateRows 1`] = `
+.c0 {
+  display: grid;
+  grid-template-rows: 200px 1fr;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects responsive display 1`] = `
+.c0 {
+  display: grid;
+}
+
+@media screen and (min-width:544px) {
+  .c0 {
+    display: inline-grid;
+  }
+}
+
+<div
+  className="c0"
+  display={
+    Array [
+      "grid",
+      "inline-grid",
+    ]
+  }
+/>
+`;

package/src/__tests__/__snapshots__/Header.test.tsx.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header Header.Item renders consistently 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: 16px;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`Header Header.Link renders consistently 1`] = `
+.c0 {
+  font-weight: 600;
+  color: #ffffff;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0:hover,
+.c0:focus {
+  color: rgba(255,255,255,0.7);
+}
+
+<a
+  className="c0"
+/>
+`;
+
+exports[`Header renders consistently 1`] = `
+.c0 {
+  z-index: 32;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(255,255,255,0.7);
+  background-color: #24292f;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+<div
+  className="c0"
+/>
+`;

package/src/__tests__/__snapshots__/Heading.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heading renders consistently 1`] = `
+.c0 {
+  font-weight: 600;
+  font-size: 32px;
+  margin: 0;
+}
+
+<h2
+  className="c0"
+/>
+`;

package/src/__tests__/__snapshots__/Label.test.tsx.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label renders consistently 1`] = `
+.c0 {
+  display: inline-block;
+  font-weight: 500;
+  color: #ffffff;
+  border-radius: 100px;
+  background-color: #6e7781;
+  font-size: 12px;
+  line-height: 20px;
+  padding: 0 8px;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<span
+  className="c0"
+/>
+`;
+
+exports[`Label respects the "outline" prop 1`] = `
+.c0 {
+  display: inline-block;
+  font-weight: 500;
+  color: #ffffff;
+  border-radius: 100px;
+  background-color: #6e7781;
+  font-size: 12px;
+  line-height: 20px;
+  padding: 0 8px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  color: #57606a;
+  border: 1px solid #d0d7de;
+  box-shadow: none;
+  background-color: transparent;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<span
+  className="c0"
+/>
+`;
+
+exports[`Label respects the "variant" prop 1`] = `
+.c0 {
+  display: inline-block;
+  font-weight: 500;
+  color: #ffffff;
+  border-radius: 100px;
+  background-color: #6e7781;
+  font-size: 14px;
+  line-height: 16px;
+  padding: 8px 12px;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<span
+  className="c0"
+/>
+`;

package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LabelGroup renders consistently 1`] = `
+.c0 * {
+  margin-right: 4px;
+}
+
+.c0 *:last-child {
+  margin-right: 0;
+}
+
+<span
+  className="c0"
+/>
+`;

package/src/__tests__/__snapshots__/Link.test.tsx.snap

@@ -0,0 +1,212 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link applies button styles when rendering a button element 1`] = `
+.c0 {
+  color: #0969da;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+<button
+  className="c0"
+/>
+`;
+
+exports[`Link passes href down to link element 1`] = `
+.c0 {
+  color: #0969da;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+<a
+  className="c0"
+  href="https://github.com"
+/>
+`;
+
+exports[`Link renders consistently 1`] = `
+.c0 {
+  color: #0969da;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+<a
+  className="c0"
+/>
+`;
+
+exports[`Link respectes the  "sx" prop when "muted" prop is also passed 1`] = `
+.c0 {
+  color: #57606a;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #ffffff;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #0969da;
+}
+
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+<a
+  className="c0"
+  muted={true}
+/>
+`;
+
+exports[`Link respectes the "muted" prop 1`] = `
+.c0 {
+  color: #57606a;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #0969da;
+}
+
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+<a
+  className="c0"
+  muted={true}
+/>
+`;
+
+exports[`Link respects hoverColor prop 1`] = `
+.c0 {
+  color: #0969da;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  color: #0969da;
+}
+
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+<a
+  className="c0"
+/>
+`;