@primer/components 29.1.0 → 29.1.1-rc.cea79543

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

@@ -0,0 +1,832 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders consistently 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0:hover {
+  background-color: #f3f4f6;
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c0:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0:active {
+  background-color: hsla(220,14%,94%,1);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+}
+
+.c0:disabled {
+  color: #57606a;
+  background-color: #f6f8fa;
+  border-color: rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+/>
+`;
+
+exports[`Button respects the "disabled" prop 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0:hover {
+  background-color: #f3f4f6;
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c0:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0:active {
+  background-color: hsla(220,14%,94%,1);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+}
+
+.c0:disabled {
+  color: #57606a;
+  background-color: #f6f8fa;
+  border-color: rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+  disabled={true}
+/>
+`;
+
+exports[`ButtonDanger renders consistently 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #cf222e;
+  border: 1px solid rgba(27,31,36,0.15);
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0:hover {
+  color: #ffffff;
+  background-color: #a40e26;
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+}
+
+.c0:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(164,14,38,0.4);
+}
+
+.c0:active {
+  color: #ffffff;
+  background-color: hsla(356,72%,44%,1);
+  box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c0:disabled {
+  color: rgba(207,34,46,0.5);
+  background-color: #f6f8fa;
+}
+
+<button
+  className="c0"
+/>
+`;
+
+exports[`ButtonDanger renders correct disabled styles 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #cf222e;
+  border: 1px solid rgba(27,31,36,0.15);
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0:hover {
+  color: #ffffff;
+  background-color: #a40e26;
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+}
+
+.c0:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(164,14,38,0.4);
+}
+
+.c0:active {
+  color: #ffffff;
+  background-color: hsla(356,72%,44%,1);
+  box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c0:disabled {
+  color: rgba(207,34,46,0.5);
+  background-color: #f6f8fa;
+}
+
+<button
+  className="c0"
+  disabled={true}
+/>
+`;
+
+exports[`ButtonGroup renders consistently 1`] = `
+.c0 {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.c0.c0 > * {
+  position: relative;
+  border-right-width: 0;
+  border-radius: 0;
+}
+
+.c0.c0 > *:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  margin-right: 0;
+}
+
+.c0.c0 > *:not(:first-child) {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c0.c0 > *:last-child {
+  border-right-width: 1px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.c0.c0 > *:focus,
+.c0.c0 > *:active,
+.c0.c0 > *:hover {
+  border-right-width: 1px;
+}
+
+.c0.c0 > *:focus + *,
+.c0.c0 > *:active + *,
+.c0.c0 > *:hover + * {
+  border-left-width: 0;
+}
+
+.c0.c0 > *:focus,
+.c0.c0 > *:active {
+  z-index: 1;
+}
+
+<div
+  className="c0"
+  display="inline-block"
+/>
+`;
+
+exports[`ButtonInvisible renders consistently 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #0969da;
+  border: 1px solid rgba(27,31,36,0.15);
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0:hover {
+  color: #ffffff;
+  background-color: #0969da;
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+}
+
+.c0:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(5,80,174,0.4);
+}
+
+.c0:active {
+  color: #ffffff;
+  background-color: hsla(212,92%,42%,1);
+  box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c0:disabled {
+  color: rgba(9,105,218,0.5);
+  background-color: #f6f8fa;
+  border-color: rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+/>
+`;
+
+exports[`ButtonInvisible renders correct disabled styles 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #0969da;
+  background-color: transparent;
+  border: 0;
+  border-radius: 6px;
+  box-shadow: none;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0:disabled {
+  color: #57606a;
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+<button
+  className="c0"
+  disabled={true}
+/>
+`;
+
+exports[`ButtonOutline renders consistently 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #0969da;
+  border: 1px solid rgba(27,31,36,0.15);
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0:hover {
+  color: #ffffff;
+  background-color: #0969da;
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+}
+
+.c0:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(5,80,174,0.4);
+}
+
+.c0:active {
+  color: #ffffff;
+  background-color: hsla(212,92%,42%,1);
+  box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c0:disabled {
+  color: rgba(9,105,218,0.5);
+  background-color: #f6f8fa;
+  border-color: rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+/>
+`;
+
+exports[`ButtonOutline renders correct disabled styles 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #0969da;
+  border: 1px solid rgba(27,31,36,0.15);
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0:hover {
+  color: #ffffff;
+  background-color: #0969da;
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+}
+
+.c0:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(5,80,174,0.4);
+}
+
+.c0:active {
+  color: #ffffff;
+  background-color: hsla(212,92%,42%,1);
+  box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c0:disabled {
+  color: rgba(9,105,218,0.5);
+  background-color: #f6f8fa;
+  border-color: rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+  disabled={true}
+/>
+`;
+
+exports[`ButtonPrimary renders consistently 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffff;
+  border: 1px solid rgba(27,31,36,0.15);
+  background-color: #2da44e;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0:hover {
+  background-color: #2c974b;
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c0:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(45,164,78,0.4);
+}
+
+.c0:active {
+  background-color: hsla(137,55%,36%,1);
+  box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
+}
+
+.c0:disabled {
+  color: rgba(255,255,255,0.8);
+  background-color: #94d3a2;
+  border-color: rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+/>
+`;
+
+exports[`ButtonPrimary renders correct disabled styles 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffff;
+  border: 1px solid rgba(27,31,36,0.15);
+  background-color: #2da44e;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0:hover {
+  background-color: #2c974b;
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c0:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(45,164,78,0.4);
+}
+
+.c0:active {
+  background-color: hsla(137,55%,36%,1);
+  box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
+}
+
+.c0:disabled {
+  color: rgba(255,255,255,0.8);
+  background-color: #94d3a2;
+  border-color: rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+  disabled={true}
+/>
+`;
+
+exports[`ButtonTableList renders consistently 1`] = `
+.c0 {
+  display: inline-block;
+  padding: 0;
+  font-size: 14px;
+  color: #57606a;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  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;
+}
+
+.c0:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0:disabled,
+.c0:disabled:hover {
+  color: rgba(#57606a,0.5);
+  cursor: default;
+}
+
+.c0:after {
+  display: inline-block;
+  margin-left: 4px;
+  width: 0;
+  height: 0;
+  vertical-align: -2px;
+  content: '';
+  border: 4px solid transparent;
+  border-top-color: currentcolor;
+}
+
+<summary
+  className="c0"
+/>
+`;