@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/__tests__/__snapshots__/Timeline.tsx.snap

@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timeline renders consistently 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`Timeline renders with clipSidebar prop 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c0 .Timeline-Item:first-child {
+  padding-top: 0;
+}
+
+.c0 .Timeline-Item:last-child {
+  padding-bottom: 0;
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`Timeline.Badge renders consistently 1`] = `
+.c0 {
+  position: relative;
+  z-index: 1;
+}
+
+.c1 {
+  margin-right: 8px;
+  margin-left: -15px;
+  color: #57606a;
+  background-color: #eaeef2;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  width: 32px;
+  height: 32px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border-radius: 50%;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #ffffff;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1 TimelineItem-Badge"
+    color="fg.muted"
+    display="flex"
+    height="32px"
+    overflow="hidden"
+    width="32px"
+  />
+</div>
+`;
+
+exports[`Timeline.Item renders consistently 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  padding: 16px 0;
+  margin-left: 16px;
+}
+
+.c0::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  width: 2px;
+  content: '';
+  background-color: hsla(210,18%,87%,1);
+}
+
+<div
+  className="c0 Timeline-Item"
+/>
+`;
+
+exports[`Timeline.Item renders with condensed prop 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  padding: 16px 0;
+  margin-left: 16px;
+  padding-top: 4px;
+  padding-bottom: 0;
+}
+
+.c0::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  width: 2px;
+  content: '';
+  background-color: hsla(210,18%,87%,1);
+}
+
+.c0:last-child {
+  padding-bottom: 16px;
+}
+
+.c0 .TimelineItem-Badge {
+  height: 16px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  color: #57606a;
+  background-color: #ffffff;
+  border: 0;
+}
+
+<div
+  className="c0 Timeline-Item"
+/>
+`;

package/src/__tests__/__snapshots__/Tooltip.tsx.snap

@@ -0,0 +1,227 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip renders consistently 1`] = `
+.c0 {
+  position: relative;
+}
+
+.c0::before {
+  position: absolute;
+  z-index: 1000001;
+  display: none;
+  width: 0px;
+  height: 0px;
+  color: #24292f;
+  pointer-events: none;
+  content: '';
+  border: 6px solid transparent;
+  opacity: 0;
+}
+
+.c0::after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: 0.5em 0.75em;
+  font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: #ffffff;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+  content: attr(aria-label);
+  background: #24292f;
+  border-radius: 3px;
+  opacity: 0;
+}
+
+.c0:hover::before,
+.c0:active::before,
+.c0:focus::before,
+.c0:hover::after,
+.c0:active::after,
+.c0:focus::after {
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-animation-name: tooltip-appear;
+  animation-name: tooltip-appear;
+  -webkit-animation-duration: 0.1s;
+  animation-duration: 0.1s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.c0.tooltipped-no-delay:hover::before,
+.c0.tooltipped-no-delay:active::before,
+.c0.tooltipped-no-delay:focus::before,
+.c0.tooltipped-no-delay:hover::after,
+.c0.tooltipped-no-delay:active::after,
+.c0.tooltipped-no-delay:focus::after {
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+
+.c0.tooltipped-multiline:hover::after,
+.c0.tooltipped-multiline:active::after,
+.c0.tooltipped-multiline:focus::after {
+  display: table-cell;
+}
+
+.c0.tooltipped-s::after,
+.c0.tooltipped-se::after,
+.c0.tooltipped-sw::after {
+  top: 100%;
+  right: 50%;
+  margin-top: 6px;
+}
+
+.c0.tooltipped-s::before,
+.c0.tooltipped-se::before,
+.c0.tooltipped-sw::before {
+  top: auto;
+  right: 50%;
+  bottom: -7px;
+  margin-right: -6px;
+  border-bottom-color: #24292f;
+}
+
+.c0.tooltipped-se::after {
+  right: auto;
+  left: 50%;
+  margin-left: -16px;
+}
+
+.c0.tooltipped-sw::after {
+  margin-right: -16px;
+}
+
+.c0.tooltipped-n::after,
+.c0.tooltipped-ne::after,
+.c0.tooltipped-nw::after {
+  right: 50%;
+  bottom: 100%;
+  margin-bottom: 6px;
+}
+
+.c0.tooltipped-n::before,
+.c0.tooltipped-ne::before,
+.c0.tooltipped-nw::before {
+  top: -7px;
+  right: 50%;
+  bottom: auto;
+  margin-right: -6px;
+  border-top-color: #24292f;
+}
+
+.c0.tooltipped-ne::after {
+  right: auto;
+  left: 50%;
+  margin-left: -16px;
+}
+
+.c0.tooltipped-nw::after {
+  margin-right: -16px;
+}
+
+.c0.tooltipped-s::after,
+.c0.tooltipped-n::after {
+  -webkit-transform: translateX(50%);
+  -ms-transform: translateX(50%);
+  transform: translateX(50%);
+}
+
+.c0.tooltipped-w::after {
+  right: 100%;
+  bottom: 50%;
+  margin-right: 6px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%);
+}
+
+.c0.tooltipped-w::before {
+  top: 50%;
+  bottom: 50%;
+  left: -7px;
+  margin-top: -6px;
+  border-left-color: #24292f;
+}
+
+.c0.tooltipped-e::after {
+  bottom: 50%;
+  left: 100%;
+  margin-left: 6px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%);
+}
+
+.c0.tooltipped-e::before {
+  top: 50%;
+  right: -7px;
+  bottom: 50%;
+  margin-top: -6px;
+  border-right-color: #24292f;
+}
+
+.c0.tooltipped-multiline::after {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 250px;
+  word-wrap: break-word;
+  white-space: pre-line;
+  border-collapse: separate;
+}
+
+.c0.tooltipped-multiline.tooltipped-s::after,
+.c0.tooltipped-multiline.tooltipped-n::after {
+  right: auto;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.c0.tooltipped-multiline.tooltipped-w::after,
+.c0.tooltipped-multiline.tooltipped-e::after {
+  right: 100%;
+}
+
+.c0.tooltipped-align-right-2::after {
+  right: 0;
+  margin-right: 0;
+}
+
+.c0.tooltipped-align-right-2::before {
+  right: 15px;
+}
+
+.c0.tooltipped-align-left-2::after {
+  left: 0;
+  margin-left: 0;
+}
+
+.c0.tooltipped-align-left-2::before {
+  left: 10px;
+}
+
+<span
+  className="c0 tooltipped-n"
+  role="tooltip"
+/>
+`;

package/src/__tests__/__snapshots__/Truncate.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Truncate renders consistently 1`] = `
+.c0 {
+  display: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: initial;
+  white-space: nowrap;
+  max-width: 125px;
+}
+
+<div
+  className="c0"
+  title="a-long-branch-name"
+/>
+`;

package/src/__tests__/__snapshots__/UnderlineNav.tsx.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnderlineNav renders consistently 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  border-bottom: 1px solid hsla(210,18%,87%,1);
+}
+
+.c0.UnderlineNav--right {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c0.UnderlineNav--right .UnderlineNav-item {
+  margin-right: 0;
+  margin-left: 16px;
+}
+
+.c0.UnderlineNav--right .UnderlineNav-actions {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c0.UnderlineNav--full {
+  display: block;
+}
+
+.c0 .UnderlineNav-body {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: -1px;
+}
+
+.c0 .UnderlineNav-actions {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
+<nav
+  className="c0 UnderlineNav"
+>
+  <div
+    className="UnderlineNav-body"
+  />
+</nav>
+`;

package/src/__tests__/__snapshots__/UnderlineNavLink.tsx.snap

@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" prop 1`] = `
+.c0 {
+  padding: 16px 8px;
+  margin-right: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #24292f;
+  text-align: center;
+  border-bottom: 2px solid transparent;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover,
+.c0:focus {
+  color: #24292f;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-bottom-color: rgba(175,184,193,0.2);
+  -webkit-transition: 0.2s ease;
+  transition: 0.2s ease;
+}
+
+.c0:hover .UnderlineNav-octicon,
+.c0:focus .UnderlineNav-octicon {
+  color: #57606a;
+}
+
+.c0.selected {
+  color: #24292f;
+  border-bottom-color: #FD8C73;
+}
+
+.c0.selected .UnderlineNav-octicon {
+  color: #24292f;
+}
+
+<div
+  activeClassName="selected"
+  className="c0 UnderlineNav-item"
+  to="#"
+/>
+`;
+
+exports[`UnderlineNav.Link renders consistently 1`] = `
+.c0 {
+  padding: 16px 8px;
+  margin-right: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #24292f;
+  text-align: center;
+  border-bottom: 2px solid transparent;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover,
+.c0:focus {
+  color: #24292f;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-bottom-color: rgba(175,184,193,0.2);
+  -webkit-transition: 0.2s ease;
+  transition: 0.2s ease;
+}
+
+.c0:hover .UnderlineNav-octicon,
+.c0:focus .UnderlineNav-octicon {
+  color: #57606a;
+}
+
+.c0.selected {
+  color: #24292f;
+  border-bottom-color: #FD8C73;
+}
+
+.c0.selected .UnderlineNav-octicon {
+  color: #24292f;
+}
+
+<a
+  className="c0 UnderlineNav-item"
+/>
+`;
+
+exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
+.c0 {
+  padding: 16px 8px;
+  margin-right: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #24292f;
+  text-align: center;
+  border-bottom: 2px solid transparent;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover,
+.c0:focus {
+  color: #24292f;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-bottom-color: rgba(175,184,193,0.2);
+  -webkit-transition: 0.2s ease;
+  transition: 0.2s ease;
+}
+
+.c0:hover .UnderlineNav-octicon,
+.c0:focus .UnderlineNav-octicon {
+  color: #57606a;
+}
+
+.c0.selected {
+  color: #24292f;
+  border-bottom-color: #FD8C73;
+}
+
+.c0.selected .UnderlineNav-octicon {
+  color: #24292f;
+}
+
+<a
+  className="c0 UnderlineNav-item selected"
+  selected={true}
+/>
+`;