Skip to content

Commit

Permalink
Updated AppBar and Container stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@trevoreyre
trevoreyre committed Jan 8, 2024
1 parent f3602a9 commit 21f8af0
Show file tree
Hide file tree
Showing 4 changed files with 246 additions and 7 deletions.
27 changes: 27 additions & 0 deletions .storybook/preview.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,30 @@ div:has(> .docblock-code-toggle) {
.docblock-code-toggle.docblock-code-toggle:focus {
box-shadow: none;
}

slate-app-nav-content {
padding-block: var(--spacing-sm);
padding-inline: var(--spacing-sm);
flex-direction: row;
align-items: center;
position: relative;
border-inline-end: none;
translate: 0 0;
}

slate-app-nav-content a {
text-decoration: none;
}

.story-box {
padding: var(--spacing-sm);
min-block-size: var(--size-4xl);
inline-size: 100%;
background-color: hsl(var(--color-neutral-700));
}

@media (prefers-color-scheme: light) {
.story-box {
background-color: hsl(var(--color-neutral-200));
}
}
5 changes: 3 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

57 changes: 52 additions & 5 deletions src/components/app-bar/app-bar.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,58 @@ const meta = {
const Basic = {
render: () => html`
<slate-app-bar>
<slate-app-nav>
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</slate-app-nav>
<slate-container size="lg">
<slate-app-nav aria-label="Main" justify="between" wrap>
<slate-app-nav-content gap="md">
<a href="#">
<slate-text transform="uppercase">Home</slate-text>
</a>
<a href="#">
<slate-text transform="uppercase">Projects</slate-text>
</a>
<a href="#">
<slate-text transform="uppercase">Posts</slate-text>
</a>
<a href="#">
<slate-text transform="uppercase">Contact</slate-text>
</a>
</slate-app-nav-content>
<slate-stack class="social-links" gap="sm" direction="row">
<!-- <a
aria-label="Phone"
href="tel:+12086316741"
target="_blank"
rel="noreferrer noopener"
>
<IconPhone aria-hidden="true" />
</a>
<a
aria-label="Email"
href="mailto:trevoreyre@gmail.com"
target="_blank"
rel="noreferrer noopener"
>
<IconEmail aria-hidden="true" />
</a>
<a
aria-label="GitHub"
href="https://github.com/trevoreyre"
target="_blank"
rel="noreferrer noopener"
>
<IconLogoGitHub aria-hidden="true" />
</a>
<a
aria-label="LinkedIn"
href="https://www.linkedin.com/in/trevoreyre"
target="_blank"
rel="noreferrer noopener"
>
<IconLogoLinkedIn aria-hidden="true" />
</a> -->
</slate-stack>
</slate-app-nav>
</slate-container>
</slate-app-bar>
`,
}
Expand Down
164 changes: 164 additions & 0 deletions src/components/container/container.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
import { html } from '../../utils/html'

const meta = {
title: 'Components/Container',
}

const Default = {
render: () => html`
<slate-container>
<div class="story-box">
<slate-text>
But the location suppose for gets when mountains, by which phase
attributing to biases, leather clock pile career from for moving but
nor the rationally and on been happening, of expect, attained
something furnished times, she the textile value and on of gone
background a sitting come like the like.
</slate-text>
</div>
</slate-container>
`,
}

const Size = {
render: () => html`
<slate-stack gap="lg">
<slate-container size="xs">
<div class="story-box">
<slate-stack>
<slate-text size="lg" weight="bold">xs</slate-text>
<slate-text>
But the location suppose for gets when mountains, by which phase
attributing to biases, leather clock pile career from for moving
but nor the rationally and on been happening, of expect, attained
something furnished times, she the textile value and on of gone
background a sitting come like the like.
</slate-text>
</slate-stack>
</div>
</slate-container>
<slate-container size="sm">
<div class="story-box">
<slate-stack>
<slate-text size="lg" weight="bold">sm</slate-text>
<slate-text>
But the location suppose for gets when mountains, by which phase
attributing to biases, leather clock pile career from for moving
but nor the rationally and on been happening, of expect, attained
something furnished times, she the textile value and on of gone
background a sitting come like the like.
</slate-text>
</slate-stack>
</div>
</slate-container>
<slate-container size="md">
<div class="story-box">
<slate-stack>
<slate-text size="lg" weight="bold">md</slate-text>
<slate-text>
But the location suppose for gets when mountains, by which phase
attributing to biases, leather clock pile career from for moving
but nor the rationally and on been happening, of expect, attained
something furnished times, she the textile value and on of gone
background a sitting come like the like.
</slate-text>
</slate-stack>
</div>
</slate-container>
<slate-container size="lg">
<div class="story-box">
<slate-stack>
<slate-text size="lg" weight="bold">lg</slate-text>
<slate-text>
But the location suppose for gets when mountains, by which phase
attributing to biases, leather clock pile career from for moving
but nor the rationally and on been happening, of expect, attained
something furnished times, she the textile value and on of gone
background a sitting come like the like.
</slate-text>
</slate-stack>
</div>
</slate-container>
<slate-container size="xl">
<div class="story-box">
<slate-stack>
<slate-text size="lg" weight="bold">xl</slate-text>
<slate-text>
But the location suppose for gets when mountains, by which phase
attributing to biases, leather clock pile career from for moving
but nor the rationally and on been happening, of expect, attained
something furnished times, she the textile value and on of gone
background a sitting come like the like.
</slate-text>
</slate-stack>
</div>
</slate-container>
<slate-container size="2xl">
<div class="story-box">
<slate-stack>
<slate-text size="lg" weight="bold">2xl</slate-text>
<slate-text>
But the location suppose for gets when mountains, by which phase
attributing to biases, leather clock pile career from for moving
but nor the rationally and on been happening, of expect, attained
something furnished times, she the textile value and on of gone
background a sitting come like the like.
</slate-text>
</slate-stack>
</div>
</slate-container>
</slate-stack>
`,
}

const Align = {
render: () => html`
<slate-stack gap="lg">
<slate-container align="start" size="sm">
<div class="story-box">
<slate-stack>
<slate-text size="lg" weight="bold">start</slate-text>
<slate-text>
But the location suppose for gets when mountains, by which phase
attributing to biases, leather clock pile career from for moving
but nor the rationally and on been happening, of expect, attained
something furnished times, she the textile value and on of gone
background a sitting come like the like.
</slate-text>
</slate-stack>
</div>
</slate-container>
<slate-container align="center" size="sm">
<div class="story-box">
<slate-stack>
<slate-text size="lg" weight="bold">center</slate-text>
<slate-text>
But the location suppose for gets when mountains, by which phase
attributing to biases, leather clock pile career from for moving
but nor the rationally and on been happening, of expect, attained
something furnished times, she the textile value and on of gone
background a sitting come like the like.
</slate-text>
</slate-stack>
</div>
</slate-container>
<slate-container align="end" size="sm">
<div class="story-box">
<slate-stack>
<slate-text size="lg" weight="bold">end</slate-text>
<slate-text>
But the location suppose for gets when mountains, by which phase
attributing to biases, leather clock pile career from for moving
but nor the rationally and on been happening, of expect, attained
something furnished times, she the textile value and on of gone
background a sitting come like the like.
</slate-text>
</slate-stack>
</div>
</slate-container>
</slate-stack>
`,
}

export default meta
export { Default, Size, Align }

0 comments on commit 21f8af0

Please sign in to comment.