feat: token v2 demo styled #1988
Annotations
2 errors and 1 warning
|
Test:
.storybook/storybook.test.ts#L98
Error: expect(received).toMatchSnapshot()
Snapshot name: `Storybook Tests > react/docs/Token-v2-demo > Styled 1`
- Snapshot - 2
+ Received + 3
@@ -1,22 +1,23 @@
.c0 {
-webkit-transition: 0.3s color ease-in-out;
transition: 0.3s color ease-in-out;
display: grid;
gap: 24px;
- max-width: 424px;
+ max-width: -webkit-fit-content;
+ max-width: -moz-fit-content;
+ max-width: fit-content;
}
.c2 {
color: var(--charcoal-color-text-secondary-default);
font-size: calc(var(--charcoal-text-font-size-heading-xs) * 1px);
line-height: calc(var(--charcoal-text-line-height-heading-xs) * 1px);
}
.c1 {
cursor: pointer;
- height: 46px;
font-weight: bold;
font-size: calc(var(--charcoal-text-font-size-body) * 1px);
line-height: calc(var(--charcoal-text-line-height-body) * 1px);
padding: 13px calc(var(--charcoal-space-layout-30) * 1px);
border-top: 2px transparent;
- Expected
+ Received
.c0 {
-webkit-transition: 0.3s color ease-in-out;
transition: 0.3s color ease-in-out;
display: grid;
gap: 24px;
- max-width: 424px;
+ max-width: -webkit-fit-content;
+ max-width: -moz-fit-content;
+ max-width: fit-content;
}
.c2 {
color: var(--charcoal-color-text-secondary-default);
font-size: calc(var(--charcoal-text-font-size-heading-xs) * 1px);
line-height: calc(var(--charcoal-text-line-height-heading-xs) * 1px);
}
.c1 {
cursor: pointer;
- height: 46px;
font-weight: bold;
font-size: calc(var(--charcoal-text-font-size-body) * 1px);
line-height: calc(var(--charcoal-text-line-height-body) * 1px);
padding: 13px calc(var(--charcoal-space-layout-30) * 1px);
border-top: 2px transparent;
color: var(--charcoal-color-text-tertiary-default);
}
.c1:hover {
color: var(--charcoal-color-text-tertiary-hover);
}
.c1:active {
color: var(--charcoal-color-text-tertiary-press);
}
.c1[aria-selected='true'] {
color: var(--charcoal-color-text-default);
border-top: 2px solid var(--charcoal-color-border-selected);
}
.c1[aria-selected='true']:hover {
color: var(--charcoal-color-text-hover);
}
.c1[aria-selected='true']:active {
color: var(--charcoal-color-text-press);
}
.c3 {
display: grid;
grid-template-areas: 'UserInfo . ShowAll' 'ArtworkList ArtworkList ArtworkList';
}
.c4 {
grid-area: UserInfo;
display: grid;
grid-auto-flow: column;
-webkit-box-pack: left;
-webkit-justify-content: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: calc(var(--charcoal-space-layout-20) * 1px);
}
.c5 {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: calc(var(--charcoal-radius-oval) * 1px);
cursor: pointer;
color: var(--charcoal-color-icon-default);
background-color: var(--charcoal-color-container-secondary-default);
}
.c5:hover {
color: var(--charcoal-color-icon-hover);
background-color: var(--charcoal-color-container-secondary-hover);
}
.c5:active {
color: var(--charcoal-color-icon-press);
background-color: var(--charcoal-color-container-secondary-press);
}
.c6 {
color: var(--charcoal-color-text-default);
font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
font-weight: bold;
}
.c7 {
grid-area: ShowAll;
cursor: pointer;
color: var(--charcoal-color-text-tertiary-default);
text-align: right;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
}
.c7:hover {
color: var(--charcoal-color-text-tertiary-hover);
}
.c7:active {
color: var(--charcoal-color-text-tertiary-press);
}
.c8 {
grid-area: ArtworkList
|
|
Test
Process completed with exit code 1.
|
|
The following actions use a deprecated Node.js version and will be forced to run on node20: actions/checkout@v3, actions/setup-node@v3. For more info: https://github.blog/changelog/2024-03-07-github-actions-all-actions-will-run-on-node20-instead-of-node16-by-default/
|
Loading