src/js/components/Button/__tests__/__snapshots__/Button-kind-test.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button kind badge should align to button container if specified in theme 1`] = `
.c5 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
background-color: #7D4CDB;
color: #f8f8f8;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
justify-content: center;
border-radius: 24px;
}
.c1 {
position: relative;
}
.c2 {
position: relative;
display: block;
}
.c4 {
position: absolute;
top: 0;
right: 0;
}
.c6 {
font-size: 14px;
line-height: 20px;
color: #FFFFFF;
font-weight: normal;
}
.c3 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c3:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus ::-moz-focus-inner {
border: 0;
}
.c3:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 768px) {
.c5 {
border-radius: 12px;
}
}
<div
class="c0"
>
<div
class="c1"
>
<div
class="c2"
>
<button
aria-label="Button, alert"
class="c3"
type="button"
>
Button
</button>
</div>
<div
class="c4"
style="top: 0px; right: 0px; transform: translate(50%, -50%); transform-origin: 100% 0%;"
>
<div
class="c5 Badge__StyledBadgeContainer-sc-1es4ws1-0"
style="min-height: 24px; min-width: 24px;"
>
<span
class="c6"
>
2
</span>
</div>
</div>
</div>
</div>
`;
exports[`Button kind badge should apply background 1`] = `
.c5 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
background-color: #00C781;
color: #444444;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
justify-content: center;
border-radius: 24px;
}
.c1 {
position: relative;
}
.c2 {
position: relative;
display: block;
}
.c4 {
position: absolute;
top: 0;
right: 0;
}
.c6 {
font-size: 14px;
line-height: 20px;
color: #000000;
font-weight: normal;
}
.c3 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
border-style: solid;
border-width: 2px;
border-color: rgba(0, 0, 0, 0.33);
padding: 2px 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c3:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus ::-moz-focus-inner {
border: 0;
}
.c3:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 768px) {
.c5 {
border-radius: 12px;
}
}
<div
class="c0"
>
<div
class="c1"
>
<div
class="c2"
>
<button
aria-label="Button, 100 unread alerts"
class="c3"
type="button"
>
Button
</button>
</div>
<div
class="c4"
style="top: 0px; right: 0px; transform: translate(50%, -50%); transform-origin: 100% 0%;"
>
<div
class="c5 Badge__StyledBadgeContainer-sc-1es4ws1-0"
style="min-height: 24px; min-width: 24px;"
>
<span
class="c6"
>
9+
</span>
</div>
</div>
</div>
</div>
`;
exports[`Button kind badge should be offset from top-right corner 1`] = `
.c5 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
background-color: #7D4CDB;
color: #f8f8f8;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
justify-content: center;
border-radius: 24px;
}
.c1 {
position: relative;
}
.c2 {
position: relative;
display: block;
}
.c4 {
position: absolute;
top: 0;
right: 0;
}
.c3 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
border-style: solid;
border-width: 2px;
border-color: rgba(0, 0, 0, 0.33);
padding: 2px 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c3:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus ::-moz-focus-inner {
border: 0;
}
.c3:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 768px) {
.c5 {
border-radius: 12px;
}
}
<div
class="c0"
>
<div
class="c1"
>
<div
class="c2"
>
<button
aria-label="Button, alert"
class="c3"
type="button"
>
Button
</button>
</div>
<div
class="c4"
style="top: 0px; right: 0px; transform: translate(25%, -25%); transform-origin: 100% 0%;"
>
<div
class="c5 Badge__StyledBadgeContainer-sc-1es4ws1-0"
style="min-height: 12px; min-width: 12px;"
/>
</div>
</div>
</div>
`;
exports[`Button kind badge should display "+" when number is greater than max 1`] = `
.c5 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
background-color: #7D4CDB;
color: #f8f8f8;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
justify-content: center;
border-radius: 24px;
}
.c1 {
position: relative;
}
.c2 {
position: relative;
display: block;
}
.c4 {
position: absolute;
top: 0;
right: 0;
}
.c6 {
font-size: 14px;
line-height: 20px;
color: #FFFFFF;
font-weight: normal;
}
.c3 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
border-style: solid;
border-width: 2px;
border-color: rgba(0, 0, 0, 0.33);
padding: 2px 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c3:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus ::-moz-focus-inner {
border: 0;
}
.c3:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 768px) {
.c5 {
border-radius: 12px;
}
}
<div
class="c0"
>
<div
class="c1"
>
<div
class="c2"
>
<button
aria-label="Button, 100 unread alerts"
class="c3"
type="button"
>
Button
</button>
</div>
<div
class="c4"
style="top: 0px; right: 0px; transform: translate(50%, -50%); transform-origin: 100% 0%;"
>
<div
class="c5 Badge__StyledBadgeContainer-sc-1es4ws1-0"
style="min-height: 24px; min-width: 24px;"
>
<span
class="c6"
>
9+
</span>
</div>
</div>
</div>
</div>
`;
exports[`Button kind badge should display number content 1`] = `
.c5 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
background-color: #7D4CDB;
color: #f8f8f8;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
justify-content: center;
border-radius: 24px;
}
.c1 {
position: relative;
}
.c2 {
position: relative;
display: block;
}
.c4 {
position: absolute;
top: 0;
right: 0;
}
.c6 {
font-size: 14px;
line-height: 20px;
color: #FFFFFF;
font-weight: normal;
}
.c3 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
border-style: solid;
border-width: 2px;
border-color: rgba(0, 0, 0, 0.33);
padding: 2px 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c3:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus ::-moz-focus-inner {
border: 0;
}
.c3:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 768px) {
.c5 {
border-radius: 12px;
}
}
<div
class="c0"
>
<div
class="c1"
>
<div
class="c2"
>
<button
aria-label="Button, 2 unread alerts"
class="c3"
type="button"
>
Button
</button>
</div>
<div
class="c4"
style="top: 0px; right: 0px; transform: translate(50%, -50%); transform-origin: 100% 0%;"
>
<div
class="c5 Badge__StyledBadgeContainer-sc-1es4ws1-0"
style="min-height: 24px; min-width: 24px;"
>
<span
class="c6"
>
2
</span>
</div>
</div>
</div>
</div>
`;
exports[`Button kind badge should render custom element 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c5 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
}
.c1 {
position: relative;
}
.c2 {
position: relative;
display: block;
}
.c4 {
position: absolute;
top: 0;
right: 0;
}
.c3 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
border-style: solid;
border-width: 2px;
border-color: rgba(0, 0, 0, 0.33);
padding: 2px 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c3:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus ::-moz-focus-inner {
border: 0;
}
.c3:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<div
class="c1"
>
<div
class="c2"
>
<button
aria-label="Button, Add user alert"
class="c3"
type="button"
>
Button
</button>
</div>
<div
class="c4"
style="top: 0px; right: 0px; transform: translate(50%, -50%); transform-origin: 100% 0%;"
>
<div
class="c5"
>
<svg
aria-label="Add"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</div>
</div>
</div>
</div>
`;
exports[`Button kind badge should render relative to contents when button has no
border or background 1`] = `
.c4 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c4 g {
fill: inherit;
stroke: inherit;
}
.c4 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c4 *[stroke*='#'],
.c4 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c4 *[fill-rule],
.c4 *[FILL-RULE],
.c4 *[fill*='#'],
.c4 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c6 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
background-color: #7D4CDB;
color: #f8f8f8;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
justify-content: center;
border-radius: 24px;
}
.c2 {
position: relative;
}
.c3 {
position: relative;
display: block;
}
.c5 {
position: absolute;
top: 0;
right: 0;
}
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 0;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 768px) {
.c6 {
border-radius: 12px;
}
}
<div
class="c0"
>
<button
aria-label="Button, Add user alert"
class="c1"
type="button"
>
<div
class="c2"
>
<div
class="c3"
>
<svg
aria-label="Add"
class="c4"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</div>
<div
class="c5"
style="top: 0px; right: 0px; transform: translate(25%, -25%); transform-origin: 100% 0%;"
>
<div
class="c6 Badge__StyledBadgeContainer-sc-1es4ws1-0"
style="min-height: 12px; min-width: 12px;"
/>
</div>
</div>
</button>
</div>
`;
exports[`Button kind border on default button 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
border-style: solid;
border-width: 2px;
border-color: green;
padding: 2px 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
</div>
`;
exports[`Button kind button icon colors 1`] = `
.c2 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c2 g {
fill: inherit;
stroke: inherit;
}
.c2 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c2 *[stroke*='#'],
.c2 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c2 *[fill-rule],
.c2 *[FILL-RULE],
.c2 *[fill*='#'],
.c2 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 0;
background-color: #000;
border-color: #666666;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
<svg
aria-label="Add"
class="c2"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</div>
`;
exports[`Button kind button with icon and align 1`] = `
.c2 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c2 g {
fill: inherit;
stroke: inherit;
}
.c2 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c2 *[stroke*='#'],
.c2 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c2 *[fill-rule],
.c2 *[FILL-RULE],
.c2 *[fill*='#'],
.c2 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 0;
text-align: start;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
<svg
aria-label="Add"
class="c2"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</div>
`;
exports[`Button kind button with transparent background 1`] = `
<DocumentFragment>
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: flex-start;
background-color: rgba(28, 28, 28, 1);
color: #FFFFFF;
min-width: 0;
min-height: 0;
flex-direction: column;
padding: 48px;
}
.c5 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: flex-start;
min-width: 0;
min-height: 0;
flex-direction: column;
padding: 48px;
}
.c3 {
flex: 0 0 auto;
align-self: stretch;
height: 24px;
}
.c2 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 2em;
padding: 6px 18px;
font-size: 18px;
line-height: 24px;
background-color: #FFFFFF0F;
color: #FFFFFF;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
font-size: 19px;
line-height: 24px;
}
.c2:focus {
outline: none;
box-shadow: 0 0 2px 2px #00E8CF;
}
.c2:focus >circle,
.c2:focus >ellipse,
.c2:focus >line,
.c2:focus >path,
.c2:focus >polygon,
.c2:focus >polyline,
.c2:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #00E8CF;
}
.c2:focus ::-moz-focus-inner {
border: 0;
}
.c2:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c2:focus:not(:focus-visible) >circle,
.c2:focus:not(:focus-visible) >ellipse,
.c2:focus:not(:focus-visible) >line,
.c2:focus:not(:focus-visible) >path,
.c2:focus:not(:focus-visible) >polygon,
.c2:focus:not(:focus-visible) >polyline,
.c2:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c2:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: #FFFFFF0F;
color: #FFFFFF;
border: none;
border-radius: 2em;
padding: 6px 18px;
font-size: 18px;
line-height: 24px;
background-color: #FFFFFF0F;
color: #FFFFFF;
background-color: rgba(255, 255, 255, 0.058823529411764705);
color: #FFFFFF;
color: #FFFFFF;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
font-size: 19px;
line-height: 24px;
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #00E8CF;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #00E8CF;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c6 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 2em;
padding: 6px 18px;
font-size: 18px;
line-height: 24px;
background-color: #0000000A;
color: #333333;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
font-size: 19px;
line-height: 24px;
}
.c6:focus {
outline: none;
box-shadow: 0 0 2px 2px #00E8CF;
}
.c6:focus >circle,
.c6:focus >ellipse,
.c6:focus >line,
.c6:focus >path,
.c6:focus >polygon,
.c6:focus >polyline,
.c6:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #00E8CF;
}
.c6:focus ::-moz-focus-inner {
border: 0;
}
.c6:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c6:focus:not(:focus-visible) >circle,
.c6:focus:not(:focus-visible) >ellipse,
.c6:focus:not(:focus-visible) >line,
.c6:focus:not(:focus-visible) >path,
.c6:focus:not(:focus-visible) >polygon,
.c6:focus:not(:focus-visible) >polyline,
.c6:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c6:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c7 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: #0000000A;
color: #555555;
border: none;
border-radius: 2em;
padding: 6px 18px;
font-size: 18px;
line-height: 24px;
background-color: #0000000A;
color: #333333;
background-color: rgba(0, 0, 0, 0.0392156862745098);
color: #333333;
color: #333333;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
font-size: 19px;
line-height: 24px;
}
.c7:focus {
outline: none;
box-shadow: 0 0 2px 2px #00E8CF;
}
.c7:focus >circle,
.c7:focus >ellipse,
.c7:focus >line,
.c7:focus >path,
.c7:focus >polygon,
.c7:focus >polyline,
.c7:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #00E8CF;
}
.c7:focus ::-moz-focus-inner {
border: 0;
}
.c7:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c7:focus:not(:focus-visible) >circle,
.c7:focus:not(:focus-visible) >ellipse,
.c7:focus:not(:focus-visible) >line,
.c7:focus:not(:focus-visible) >path,
.c7:focus:not(:focus-visible) >polygon,
.c7:focus:not(:focus-visible) >polyline,
.c7:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c7:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-family: 'Metric',Arial,sans-serif;
font-size: 18px;
line-height: 24px;
background-color: #FFFFFF;
color: #555555;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 768px) {
.c1 {
padding: 24px;
}
}
@media only screen and (max-width: 768px) {
.c5 {
padding: 24px;
}
}
@media only screen and (max-width: 768px) {
.c3 {
height: 12px;
}
}
<div
class="c0"
>
<div
class="c1"
>
<button
class="c2"
type="button"
>
Test button
</button>
<div
class="c3"
/>
<button
class="c4"
type="button"
>
Active Test button
</button>
</div>
<div
class="c5"
>
<button
class="c6"
type="button"
>
Test button
</button>
<div
class="c3"
/>
<button
class="c7"
type="button"
>
Active Test button
</button>
</div>
</div>
</DocumentFragment>
`;
exports[`Button kind default button 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 18px;
line-height: 24px;
padding: 6px 12px;
color: #444444;
font-weight: 700;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
/>
</div>
`;
exports[`Button kind disabled with hoverIndicator should not hover 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
opacity: 0.3;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
disabled=""
type="button"
>
Button
</button>
</div>
`;
exports[`Button kind disabled with hoverIndicator should not hover 2`] = `
<div
class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
<button
class="StyledButtonKind-sc-1vhfpnt-0 kYiMTz"
disabled=""
type="button"
>
Button
</button>
</div>
`;
exports[`Button kind extend on default button 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
color: green;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
</div>
`;
exports[`Button kind fill 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c2 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
height: 100%;
}
.c2:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c2:focus >circle,
.c2:focus >ellipse,
.c2:focus >line,
.c2:focus >path,
.c2:focus >polygon,
.c2:focus >polyline,
.c2:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c2:focus ::-moz-focus-inner {
border: 0;
}
.c2:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c2:focus:not(:focus-visible) >circle,
.c2:focus:not(:focus-visible) >ellipse,
.c2:focus:not(:focus-visible) >line,
.c2:focus:not(:focus-visible) >path,
.c2:focus:not(:focus-visible) >polygon,
.c2:focus:not(:focus-visible) >polyline,
.c2:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c2:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c3 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
}
.c3:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus ::-moz-focus-inner {
border: 0;
}
.c3:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
<button
class="c2"
type="button"
>
Test
</button>
<button
class="c3"
type="button"
>
Test
</button>
</div>
`;
exports[`Button kind font on button default 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
line-height: 20px;
font-weight: 700;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
</div>
`;
exports[`Button kind font undefined 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
</div>
`;
exports[`Button kind hover on default button 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
outline: none;
border: none;
padding: 0;
text-align: inherit;
color: inherit;
}
.c1:hover {
background-color: rgba(221, 221, 221, 0.4);
color: #444444;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
</div>
`;
exports[`Button kind hover secondary with color and background 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
background-color: skyblue;
color: #FFFFFF;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:hover {
background-color: orange;
color: green;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Button
</button>
</div>
`;
exports[`Button kind hover secondary with color and background 2`] = `
<div
class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
<button
class="StyledButtonKind-sc-1vhfpnt-0 cbqgVk"
type="button"
>
Button
</button>
</div>
`;
exports[`Button kind hoverIndicator with color and background 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:hover {
background-color: pink;
color: #FFFFFF;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Button
</button>
</div>
`;
exports[`Button kind hoverIndicator with color and background 2`] = `
<div
class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
<button
class="StyledButtonKind-sc-1vhfpnt-0 ebMzsf"
type="button"
>
Button
</button>
</div>
`;
exports[`Button kind icon only pad should apply when icon but no label 1`] = `
<DocumentFragment>
.c2 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c2 g {
fill: inherit;
stroke: inherit;
}
.c2 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c2 *[stroke*='#'],
.c2 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c2 *[fill-rule],
.c2 *[FILL-RULE],
.c2 *[fill*='#'],
.c2 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 5px 5px;
font-size: 14px;
line-height: 0;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c3 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 5px 12px;
font-size: 14px;
line-height: 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c3:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus ::-moz-focus-inner {
border: 0;
}
.c3:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 8px 12px;
font-size: 18px;
line-height: 0;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 8px 18px;
font-size: 18px;
line-height: 24px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c5:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c5:focus >circle,
.c5:focus >ellipse,
.c5:focus >line,
.c5:focus >path,
.c5:focus >polygon,
.c5:focus >polyline,
.c5:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c5:focus ::-moz-focus-inner {
border: 0;
}
.c5:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c5:focus:not(:focus-visible) >circle,
.c5:focus:not(:focus-visible) >ellipse,
.c5:focus:not(:focus-visible) >line,
.c5:focus:not(:focus-visible) >path,
.c5:focus:not(:focus-visible) >polygon,
.c5:focus:not(:focus-visible) >polyline,
.c5:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c5:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c6 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 24px;
padding: 18px 18px;
font-size: 22px;
line-height: 0;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c6 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c6:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c6:focus >circle,
.c6:focus >ellipse,
.c6:focus >line,
.c6:focus >path,
.c6:focus >polygon,
.c6:focus >polyline,
.c6:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c6:focus ::-moz-focus-inner {
border: 0;
}
.c6:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c6:focus:not(:focus-visible) >circle,
.c6:focus:not(:focus-visible) >ellipse,
.c6:focus:not(:focus-visible) >line,
.c6:focus:not(:focus-visible) >path,
.c6:focus:not(:focus-visible) >polygon,
.c6:focus:not(:focus-visible) >polyline,
.c6:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c6:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c7 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 24px;
padding: 18px 24px;
font-size: 22px;
line-height: 28px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c7:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c7:focus >circle,
.c7:focus >ellipse,
.c7:focus >line,
.c7:focus >path,
.c7:focus >polygon,
.c7:focus >polyline,
.c7:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c7:focus ::-moz-focus-inner {
border: 0;
}
.c7:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c7:focus:not(:focus-visible) >circle,
.c7:focus:not(:focus-visible) >ellipse,
.c7:focus:not(:focus-visible) >line,
.c7:focus:not(:focus-visible) >path,
.c7:focus:not(:focus-visible) >polygon,
.c7:focus:not(:focus-visible) >polyline,
.c7:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c7:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
<svg
aria-label="Add"
class="c2"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
<button
class="c3"
type="button"
>
Add
</button>
<button
class="c4"
type="button"
>
<svg
aria-label="Add"
class="c2"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
<button
class="c5"
type="button"
>
Add
</button>
<button
class="c6"
type="button"
>
<svg
aria-label="Add"
class="c2"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
<button
class="c7"
type="button"
>
Add
</button>
</div>
</DocumentFragment>
`;
exports[`Button kind match icon size to size prop when theme.icon.matchSize is true 1`] = `
<DocumentFragment>
.c3 {
display: inline-block;
flex: 0 0 auto;
width: NaNxsmall;
height: NaNxsmall;
fill: #666666;
stroke: #666666;
}
.c3 g {
fill: inherit;
stroke: inherit;
}
.c3 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c3 *[stroke*='#'],
.c3 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c3 *[fill-rule],
.c3 *[FILL-RULE],
.c3 *[fill*='#'],
.c3 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 12px;
height: 12px;
fill: #666666;
stroke: #666666;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c8 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c8 g {
fill: inherit;
stroke: inherit;
}
.c8 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c8 *[stroke*='#'],
.c8 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c8 *[fill-rule],
.c8 *[FILL-RULE],
.c8 *[fill*='#'],
.c8 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c10 {
display: inline-block;
flex: 0 0 auto;
width: 48px;
height: 48px;
fill: #666666;
stroke: #666666;
}
.c10 g {
fill: inherit;
stroke: inherit;
}
.c10 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c10 *[stroke*='#'],
.c10 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c10 *[fill-rule],
.c10 *[FILL-RULE],
.c10 *[fill*='#'],
.c10 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c12 {
display: inline-block;
flex: 0 0 auto;
width: 96px;
height: 96px;
fill: #666666;
stroke: #666666;
}
.c12 g {
fill: inherit;
stroke: inherit;
}
.c12 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c12 *[stroke*='#'],
.c12 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c12 *[fill-rule],
.c12 *[FILL-RULE],
.c12 *[fill*='#'],
.c12 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
justify-content: center;
}
.c4 {
flex: 0 0 auto;
align-self: stretch;
width: 12px;
}
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 12px;
line-height: 18px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 20px;
font-size: 14px;
line-height: 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c5 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c5:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c5:focus >circle,
.c5:focus >ellipse,
.c5:focus >line,
.c5:focus >path,
.c5:focus >polygon,
.c5:focus >polyline,
.c5:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c5:focus ::-moz-focus-inner {
border: 0;
}
.c5:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c5:focus:not(:focus-visible) >circle,
.c5:focus:not(:focus-visible) >ellipse,
.c5:focus:not(:focus-visible) >line,
.c5:focus:not(:focus-visible) >path,
.c5:focus:not(:focus-visible) >polygon,
.c5:focus:not(:focus-visible) >polyline,
.c5:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c5:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c7 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c7 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c7:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c7:focus >circle,
.c7:focus >ellipse,
.c7:focus >line,
.c7:focus >path,
.c7:focus >polygon,
.c7:focus >polyline,
.c7:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c7:focus ::-moz-focus-inner {
border: 0;
}
.c7:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c7:focus:not(:focus-visible) >circle,
.c7:focus:not(:focus-visible) >ellipse,
.c7:focus:not(:focus-visible) >line,
.c7:focus:not(:focus-visible) >path,
.c7:focus:not(:focus-visible) >polygon,
.c7:focus:not(:focus-visible) >polyline,
.c7:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c7:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 24px;
padding: 8px 32px;
font-size: 22px;
line-height: 28px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c9 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c11 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 26px;
line-height: 32px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c11 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c11:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus ::-moz-focus-inner {
border: 0;
}
.c11:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
<div
class="c2"
>
<svg
aria-label="Add"
class="c3"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<div
class="c4"
/>
Label
</div>
</button>
<button
class="c5"
type="button"
>
<div
class="c2"
>
<svg
aria-label="Add"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<div
class="c4"
/>
Label
</div>
</button>
<button
class="c7"
type="button"
>
<div
class="c2"
>
<svg
aria-label="Add"
class="c8"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<div
class="c4"
/>
Label
</div>
</button>
<button
class="c9"
type="button"
>
<div
class="c2"
>
<svg
aria-label="Add"
class="c10"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<div
class="c4"
/>
Label
</div>
</button>
<button
class="c11"
type="button"
>
<div
class="c2"
>
<svg
aria-label="Add"
class="c12"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<div
class="c4"
/>
Label
</div>
</button>
</div>
</DocumentFragment>
`;
exports[`Button kind mouseOver and mouseOut events 1`] = `
.c3 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #f8f8f8;
stroke: #f8f8f8;
}
.c3 g {
fill: inherit;
stroke: inherit;
}
.c3 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c3 *[stroke*='#'],
.c3 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c3 *[fill-rule],
.c3 *[FILL-RULE],
.c3 *[fill*='#'],
.c3 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
justify-content: center;
}
.c4 {
flex: 0 0 auto;
align-self: stretch;
width: 12px;
}
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
background-color: #000;
color: #f8f8f8;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
<div
class="c2"
>
<svg
aria-label="Add"
class="c3"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<div
class="c4"
/>
label
</div>
</button>
</div>
`;
exports[`Button kind mouseOver and mouseOut events 2`] = `
<div
class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
<button
class="StyledButtonKind-sc-1vhfpnt-0 hkuGsg"
type="button"
>
<div
class="StyledBox-sc-13pk1d4-0 jfWJaj"
>
<svg
aria-label="Add"
class="StyledIcon-sc-ofa7kd-0 iaGRUY"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 gLYlhX"
/>
label
</div>
</button>
</div>
`;
exports[`Button kind no border on default button 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
border: none;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
</div>
`;
exports[`Button kind no padding on default button 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
padding: 0px;
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
</div>
`;
exports[`Button kind opacity on default button 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
opacity: 0.4;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
</div>
`;
exports[`Button kind padding on default button 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
padding: 6px 12px;
background-color: green;
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
</div>
`;
exports[`Button kind plain with icon 1`] = `
<DocumentFragment>
.c2 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c2 g {
fill: inherit;
stroke: inherit;
}
.c2 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c2 *[stroke*='#'],
.c2 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c2 *[fill-rule],
.c2 *[FILL-RULE],
.c2 *[fill*='#'],
.c2 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
outline: none;
border: none;
padding: 0;
text-align: inherit;
color: inherit;
line-height: 0;
}
.c1 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
<svg
aria-label="Add"
class="c2"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</div>
</DocumentFragment>
`;
exports[`Button kind primary button 1`] = `
.c2 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c2 g {
fill: inherit;
stroke: inherit;
}
.c2 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c2 *[stroke*='#'],
.c2 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c2 *[fill-rule],
.c2 *[FILL-RULE],
.c2 *[fill*='#'],
.c2 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c4 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: red;
stroke: red;
}
.c4 g {
fill: inherit;
stroke: inherit;
}
.c4 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c4 *[stroke*='#'],
.c4 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c4 *[fill-rule],
.c4 *[FILL-RULE],
.c4 *[fill*='#'],
.c4 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 18px;
line-height: 24px;
padding: 6px 12px;
background-color: green;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c3 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 18px;
line-height: 24px;
padding: 6px 12px;
background-color: green;
color: #000000;
background-color: transparent;
color: #555555;
opacity: 1;
padding: 4px 10px;
border-style: solid;
border-width: 2px;
border-color: #555555;
text-align: center;
opacity: 1;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c3:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus ::-moz-focus-inner {
border: 0;
}
.c3:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
<svg
aria-label="FormNextLink"
class="c2"
viewBox="0 0 24 24"
>
<path
d="M6 12.4h12M12.6 7l5.4 5.4-5.4 5.4"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
<button
class="c3"
disabled=""
type="button"
>
<svg
aria-label="FormNextLink"
class="c4"
viewBox="0 0 24 24"
>
<path
d="M6 12.4h12M12.6 7l5.4 5.4-5.4 5.4"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</div>
`;
exports[`Button kind render of children 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
outline: none;
border: none;
padding: 0;
text-align: inherit;
color: inherit;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
</div>
`;
exports[`Button kind secondary button 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 18px;
line-height: 24px;
padding: 4px 10px;
color: #444444;
border-style: solid;
border-width: 2px;
border-color: green;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:hover {
padding: 3px 9px;
border-style: solid;
border-width: 3px;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
/>
</div>
`;
exports[`Button kind should apply kind direction 1`] = `
<DocumentFragment>
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: column;
justify-content: center;
}
.c3 {
flex: 0 0 auto;
align-self: stretch;
height: 12px;
}
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
font-size: 12px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
<div
class="c2"
>
<svg />
<div
class="c3"
/>
Button
</div>
</button>
</div>
</DocumentFragment>
`;
exports[`Button kind should apply styling according to theme size definitions 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 8px;
font-size: 14px;
line-height: 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c2 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 6px 12px;
font-size: 18px;
line-height: 24px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c2:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c2:focus >circle,
.c2:focus >ellipse,
.c2:focus >line,
.c2:focus >path,
.c2:focus >polygon,
.c2:focus >polyline,
.c2:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c2:focus ::-moz-focus-inner {
border: 0;
}
.c2:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c2:focus:not(:focus-visible) >circle,
.c2:focus:not(:focus-visible) >ellipse,
.c2:focus:not(:focus-visible) >line,
.c2:focus:not(:focus-visible) >path,
.c2:focus:not(:focus-visible) >polygon,
.c2:focus:not(:focus-visible) >polyline,
.c2:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c2:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c3 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 6px;
padding: 6px 16px;
font-size: 22px;
line-height: 28px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c3:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c3:focus ::-moz-focus-inner {
border: 0;
}
.c3:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c3:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Button
</button>
<button
class="c2"
type="button"
>
Button
</button>
<button
class="c2"
type="button"
>
Button
</button>
<button
class="c3"
type="button"
>
Button
</button>
</div>
`;
exports[`Button kind should render pad 1`] = `
<DocumentFragment>
.c3 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c3 g {
fill: inherit;
stroke: inherit;
}
.c3 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c3 *[stroke*='#'],
.c3 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c3 *[fill-rule],
.c3 *[FILL-RULE],
.c3 *[fill*='#'],
.c3 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
justify-content: center;
}
.c4 {
flex: 0 0 auto;
align-self: stretch;
width: 12px;
}
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
padding: 96px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
padding-left: 18px;
padding-right: 18px;
padding-top: 6px;
padding-bottom: 6px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c5 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c5:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c5:focus >circle,
.c5:focus >ellipse,
.c5:focus >line,
.c5:focus >path,
.c5:focus >polygon,
.c5:focus >polyline,
.c5:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c5:focus ::-moz-focus-inner {
border: 0;
}
.c5:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c5:focus:not(:focus-visible) >circle,
.c5:focus:not(:focus-visible) >ellipse,
.c5:focus:not(:focus-visible) >line,
.c5:focus:not(:focus-visible) >path,
.c5:focus:not(:focus-visible) >polygon,
.c5:focus:not(:focus-visible) >polyline,
.c5:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c5:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c6 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
outline: none;
border: none;
padding: 0;
text-align: inherit;
color: inherit;
}
.c6:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c6:focus >circle,
.c6:focus >ellipse,
.c6:focus >line,
.c6:focus >path,
.c6:focus >polygon,
.c6:focus >polyline,
.c6:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c6:focus ::-moz-focus-inner {
border: 0;
}
.c6:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c6:focus:not(:focus-visible) >circle,
.c6:focus:not(:focus-visible) >ellipse,
.c6:focus:not(:focus-visible) >line,
.c6:focus:not(:focus-visible) >path,
.c6:focus:not(:focus-visible) >polygon,
.c6:focus:not(:focus-visible) >polyline,
.c6:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c6:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
data-testid="string-pad"
type="button"
>
<div
class="c2"
>
<svg
aria-label="Add"
class="c3"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<div
class="c4"
/>
String pad
</div>
</button>
<button
class="c5"
data-testid="object-pad"
type="button"
>
<div
class="c2"
>
<svg
aria-label="Add"
class="c3"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<div
class="c4"
/>
Object pad
</div>
</button>
<button
class="c6"
data-testid="child-pad"
type="button"
>
<svg
aria-label="Add"
class="c3"
viewBox="0 0 24 24"
>
<path
d="M12 22V2M2 12h20"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</div>
</DocumentFragment>
`;
exports[`Button kind size of default button 1`] = `
.c1 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 8px;
font-size: 14px;
line-height: 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}
.c1:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c1:focus ::-moz-focus-inner {
border: 0;
}
.c1:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c1:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
<div
class="c0"
>
<button
class="c1"
type="button"
>
Test
</button>
</div>
`;