Skip to content

Commit

Permalink
feat: token v2 demo styled
Browse files Browse the repository at this point in the history
  • Loading branch information
yue4u committed Nov 22, 2024
1 parent cd29d33 commit 4ac12c4
Show file tree
Hide file tree
Showing 5 changed files with 544 additions and 1 deletion.
1 change: 1 addition & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import themeDecorator from './theme-decorator'
import { DocsContainer } from './docs-container'

import './global.css'
import '../packages/react/dist/index.css'

/** @type */
export const parameters = {
Expand Down
327 changes: 327 additions & 0 deletions packages/react/docs/__snapshots__/token-v2.story.storyshot
Original file line number Diff line number Diff line change
@@ -0,0 +1,327 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storybook Tests > react/docs/Token-v2-demo > Styled 1`] = `
.c0 {
-webkit-transition: 0.3s color ease-in-out;
transition: 0.3s color ease-in-out;
display: grid;
gap: 24px;
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;
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;
display: grid;
grid-template-columns: repeat(3,1fr);
gap: calc(var(--charcoal-space-layout-20) * 1px);
list-style: none;
padding: 0;
max-width: 424px;
}

.c9 {
display: grid;
gap: calc(var(--charcoal-space-layout-10) * 1px);
}

.c10 {
width: 100%;
aspect-ratio: 3 / 2;
border-radius: calc(var(--charcoal-radius-m) * 1px);
}

.c11 {
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);
margin: 0;
}

.c12 {
margin: 0;
color: var(--charcoal-color-text-tertiary-default);
font-size: calc(var(--charcoal-text-font-size-caption-s) * 1px);
line-height: calc(var(--charcoal-text-line-height-caption-s) * 1px);
}

<div
data-dark={false}
>
<section
className="c0"
>
<nav>
<div
aria-label="Categories"
role="tablist"
>
<a
aria-controls="panel-Illustration"
aria-selected={true}
className="c1"
id="category-Illustration"
onClick={[Function]}
role="tab"
>
Illustration
</a>
<a
aria-controls="panel-Comic"
aria-selected={false}
className="c1"
id="category-Comic"
onClick={[Function]}
role="tab"
>
Comic
</a>
<a
aria-controls="panel-Novel"
aria-selected={false}
className="c1"
id="category-Novel"
onClick={[Function]}
role="tab"
>
Novel
</a>
<a
aria-controls="panel-3D"
aria-selected={false}
className="c1"
id="category-3D"
onClick={[Function]}
role="tab"
>
3D
</a>
<a
aria-controls="panel-Shopping"
aria-selected={false}
className="c1"
id="category-Shopping"
onClick={[Function]}
role="tab"
>
Shopping
</a>
</div>
</nav>
<h2
className="c2"
>
Works from users you follow
</h2>
<div
aria-labelledby="category-Illustration"
className="c3"
id="panel-Illustration"
role="tabpanel"
>
<div
className="c4"
>
<a
aria-label="UserIcon"
className="c5"
>
<pixiv-icon
name="24/FaceEdit"
/>
</a>
<span
className="c6"
>
UserName
</span>
<button
className="charcoal-button"
data-size="S"
data-variant="Primary"
>
Follow
</button>
</div>
<a
className="c7"
>
Show all
</a>
<ul
className="c8"
>
<li>
<article
className="c9"
>
<img
alt="Title"
className="c10"
src="https://loremflickr.com/150/100/animals?random=0"
/>
<h3
className="c11"
>
Title
</h3>
<p
className="c12"
>
Description
</p>
</article>
</li>
<li>
<article
className="c9"
>
<img
alt="Title"
className="c10"
src="https://loremflickr.com/150/100/animals?random=1"
/>
<h3
className="c11"
>
Title
</h3>
<p
className="c12"
>
Description
</p>
</article>
</li>
<li>
<article
className="c9"
>
<img
alt="Title"
className="c10"
src="https://loremflickr.com/150/100/animals?random=2"
/>
<h3
className="c11"
>
Title
</h3>
<p
className="c12"
>
Description
</p>
</article>
</li>
</ul>
</div>
</section>
</div>
`;
Loading

0 comments on commit 4ac12c4

Please sign in to comment.