diff --git a/.storybook/preview.css b/.storybook/preview.css index f477bfb..cfd7288 100644 --- a/.storybook/preview.css +++ b/.storybook/preview.css @@ -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)); + } +} diff --git a/package-lock.json b/package-lock.json index 19a4bc8..4c89a03 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@slate-ui/core", - "version": "2.0.0", + "version": "2.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@slate-ui/core", - "version": "2.0.0", + "version": "2.0.1", "license": "MIT", "dependencies": { "@stencil/core": "^4.7.0" @@ -31,6 +31,7 @@ "puppeteer": "21.1.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "rimraf": "^3.0.2", "storybook": "^7.6.7" } }, diff --git a/src/components/app-bar/app-bar.stories.ts b/src/components/app-bar/app-bar.stories.ts index 113206d..64066ba 100644 --- a/src/components/app-bar/app-bar.stories.ts +++ b/src/components/app-bar/app-bar.stories.ts @@ -12,11 +12,58 @@ const meta = { const Basic = { render: () => html` - -
Child 1
-
Child 2
-
Child 3
- + + + + + Home + + + Projects + + + Posts + + + Contact + + + + + `, } diff --git a/src/components/container/container.stories.ts b/src/components/container/container.stories.ts new file mode 100644 index 0000000..2ecdf19 --- /dev/null +++ b/src/components/container/container.stories.ts @@ -0,0 +1,164 @@ +import { html } from '../../utils/html' + +const meta = { + title: 'Components/Container', +} + +const Default = { + render: () => html` + +
+ + 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. + +
+ + `, +} + +const Size = { + render: () => html` + + +
+ + xs + + 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. + + +
+ + +
+ + sm + + 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. + + +
+ + +
+ + md + + 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. + + +
+ + +
+ + lg + + 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. + + +
+ + +
+ + xl + + 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. + + +
+ + +
+ + 2xl + + 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. + + +
+ + + `, +} + +const Align = { + render: () => html` + + +
+ + start + + 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. + + +
+ + +
+ + center + + 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. + + +
+ + +
+ + end + + 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. + + +
+ + + `, +} + +export default meta +export { Default, Size, Align }