@primer/components 33.1.0-rc.6856bcf5 → 33.1.0

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

@@ -1,840 +0,0 @@
-// 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: #8c959f;
-  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: #8c959f;
-  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: #8c959f;
-}
-
-.c0:focus {
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-}
-
-.c0:hover {
-  background-color: #f3f4f6;
-}
-
-.c0:active {
-  background-color: hsla(220,14%,94%,1);
-}
-
-<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: #8c959f;
-  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"
-/>
-`;