Skip to content
This repository was archived by the owner on Feb 10, 2026. It is now read-only.

Continued work on poc, button example and Storybook integration #500

Open
solve-selander wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Continued work on poc, button example and Storybook integration #500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
886cfdb
some work on button, and testing out storybook integration with the poc
solve-selander Dec 4, 2025
4239ad2
Merge branch 'main' into components-poc-work
solve-selander Dec 4, 2025
9273b2e
format fix
solve-selander Dec 4, 2025
b1df504
some more biome related fixes
solve-selander Dec 4, 2025
d0cd87d
more work on storybook
solve-selander Dec 9, 2025
64288eb
biome format
solve-selander Dec 9, 2025
17b5022
implemented svelte version of the new button
solve-selander Dec 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 40 additions & 31 deletions apps/storybook-web-components/.storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,40 @@
/** @type { import('@storybook/web-components-vite').StorybookConfig } */
const config = {
stories: [
"../../../packages/kobber-components/src/**/introduction.@(mdx)",
"../../../packages/kobber-components/src/**/*.@(mdx)",
"../../../packages/kobber-components/src/**/*.stories.@(js|mjs|ts)",

"../../../packages/kobber-components-poc/src/**/*.@(mdx)",
"../../../packages/kobber-components-poc/src/**/*.stories.@(js|mjs|ts|tsx)",

"../../../packages/kobber-icons/src/**/*.@(mdx)",
"../../../packages/kobber-icons/src/**/*.stories.@(js|mjs|ts)",
],
addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
framework: {
name: "@storybook/web-components-vite",
options: {},
},
typescript: {
check: false, // speed up build times
reactDocgen: false,
},
core: {
disableTelemetry: true, // 👈 Disables telemetry
disableWhatsNewNotifications: true, // 👈 Disables what's new notifications
builder: "@storybook/builder-vite",
},
staticDirs: ["../public"], //👈 Configures the static asset folder in Storybook
};

export default config;
/** @type { import('@storybook/web-components-vite').StorybookConfig } */
import { mergeConfig } from "vite";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
const config = {
stories: [
"../../../packages/kobber-components/src/**/introduction.@(mdx)",
"../../../packages/kobber-components/src/**/*.@(mdx)",
"../../../packages/kobber-components/src/**/*.stories.@(js|mjs|ts)",

"../../../packages/kobber-components-poc/src/**/*.@(mdx)",
"../../../packages/kobber-components-poc/src/**/*.stories.@(js|mjs|ts|tsx)",

"../../../packages/kobber-icons/src/**/*.@(mdx)",
"../../../packages/kobber-icons/src/**/*.stories.@(js|mjs|ts)",
],
addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
framework: {
name: "@storybook/web-components-vite",
options: {},
},
typescript: {
check: false, // speed up build times
reactDocgen: false,
},
core: {
disableTelemetry: true, // 👈 Disables telemetry
disableWhatsNewNotifications: true, // 👈 Disables what's new notifications
builder: "@storybook/builder-vite",
},
staticDirs: ["../public"], //👈 Configures the static asset folder in Storybook

// NOTE(sølve): Handles the use of vanilla extract
async viteFinal(config) {
return mergeConfig(config, {
plugins: [vanillaExtractPlugin()],
});
},
};

export default config;
163 changes: 150 additions & 13 deletions internal/consumer-tests/src/apps/AppReact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,159 @@ export function AppReact() {
<br />
<br />

{/*
brand
secondary
tone-b
<div
style={{
display: "flex",
gap: "0.5em",
width: "420px",
flexWrap: "wrap",
}}
>
{/* ERROR */}
<Button
purpose="informative"
collection="neutral"
level="secondary"
tone="tone-a"
>
<ButtonIcon icon="kobber-video_file_add">
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>ERROR</ButtonText>
</Button>

*/}
{/* BRAND */}
<Button
//disabled={true}
collection="brand"
level="primary"
tone="tone-a"
>
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Brand</ButtonText>
</Button>
<Button collection="brand" level="secondary" tone="tone-a">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Brand</ButtonText>
</Button>
<Button collection="brand" level="secondary" tone="tone-b">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Brand</ButtonText>
</Button>
<Button collection="brand" level="tertiary" tone="tone-a">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Brand</ButtonText>
</Button>
<Button collection="brand" level="tertiary" tone="tone-b">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Brand</ButtonText>
</Button>

<Button collection="brand" level="primary" tone="tone-a">
<ButtonIcon>
{/* NOTE(sølve): size of icon should be set outside of the specific icon */}
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Button</ButtonText>
</Button>
{/* RETTSDATA */}
<Button collection="rettsdata" level="primary" tone="tone-a">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Rettsdata</ButtonText>
</Button>
<Button collection="rettsdata" level="secondary" tone="tone-a">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Rettsdata</ButtonText>
</Button>
<Button collection="rettsdata" level="secondary" tone="tone-b">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Rettsdata</ButtonText>
</Button>
<Button collection="rettsdata" level="tertiary" tone="tone-a">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Rettsdata</ButtonText>
</Button>
<Button collection="rettsdata" level="tertiary" tone="tone-b">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Rettsdata</ButtonText>
</Button>

{/* NEUTRAL */}
<Button collection="neutral" level="primary" tone="tone-a">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Neutral</ButtonText>
</Button>
<Button collection="neutral" level="secondary" tone="tone-b">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Neutral</ButtonText>
</Button>
<Button collection="neutral" level="tertiary" tone="tone-b">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Neutral</ButtonText>
</Button>

{/* SUCCESS */}
<Button purpose="success" tone="tone-a">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Success</ButtonText>
</Button>
<Button purpose="success" tone="tone-b">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Success</ButtonText>
</Button>

{/* INFORMATIVE */}
<Button purpose="informative" tone="tone-a">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Informative</ButtonText>
</Button>
<Button purpose="informative" tone="tone-b">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Informative</ButtonText>
</Button>

{/* WARNING */}
<Button purpose="warning" tone="tone-a">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Warning</ButtonText>
</Button>
<Button purpose="warning" tone="tone-b">
<ButtonIcon>
<ArrowRight size="large" />
</ButtonIcon>
<ButtonText>Warning</ButtonText>
</Button>
</div>

<br />
<br />

<Card
Expand Down
10 changes: 9 additions & 1 deletion internal/consumer-tests/src/apps/AppSvelte.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,22 @@ import {
} from "@gyldendal/kobber-components-poc/svelte/card";
import { Paper } from "@gyldendal/kobber-components-poc/svelte/paper";
import { ToggleButton } from "@gyldendal/kobber-components-poc/svelte/ToggleButton";
import {Button, ButtonIcon, ButtonText} from "@gyldendal/kobber-components-poc/svelte/Button";
</script>

<ToggleButton>Custom machine</ToggleButton>

<br />
<br />


<Button
collection="brand"
level="primary"
tone="tone-a"
>
<ButtonIcon icon="kobber-arrow_right"/>
<ButtonText>Brand</ButtonText>
</Button>

<br/>
<br/>
Expand Down
2 changes: 1 addition & 1 deletion internal/consumer-tests/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
background: #3aa4cf;
background: linear-gradient(
144deg,
#fbeaea 0%,
#884d5d 0%,
#fbeaea 60%,
#884d5d 100%
);
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@storybook/builder-vite": "^10.0.3",
"@storybook/web-components-vite": "^10.0.3",
"@types/node": "^24.3.0",
"@vanilla-extract/vite-plugin": "^5.1.3",
"storybook": "^10.0.3",
"stylelint": "^16.25.0",
"stylelint-config-standard": "^39.0.1",
Expand Down
6 changes: 3 additions & 3 deletions packages/kobber-components-poc/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"type": "module",
"scripts": {
"build": "tsup --env.NODE_ENV production",
"dev": "tsup --watch",
"dev": "node tsup-dev.js",
"check": "tsc --noEmit",
"create-ts-refs": "create-ts-refs --sourceMap=entries.ts --out=.references.mts"
},
Expand All @@ -27,8 +27,8 @@
"dependencies": {
"@ark-ui/react": "^5.27.1",
"@ark-ui/svelte": "^5.12.1",
"@gyldendal/kobber-base": "0.6.13",
"@gyldendal/kobber-icons": "0.6.13",
"@gyldendal/kobber-base": "0.7.2",
"@gyldendal/kobber-icons": "0.7.2",
"@lit-labs/signals": "0.1.3",
"@open-wc/lit-helpers": "^0.7.0",
"@vanilla-extract/esbuild-plugin": "^2.3.18",
Expand Down
79 changes: 79 additions & 0 deletions packages/kobber-components-poc/src/components/button/Button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
import * as ButtonStories from "./Button.stories";
import { Button, ButtonIcon, ButtonText } from "./index.react";

<Meta of={ButtonStories} />

# Button

The most basic of buttons, made for text and icons, by themselves and together. This button extends the browsers native button in its respective format. Use it like you would use any other button.

<Canvas sourceState="none" of={ButtonStories.ButtonCombos} />

## Usage

Here is an example of the most general usage of the button, with text and an icon.

```tsx
<Button
collection="brand"
level="primary"
tone="tone-a"
>
<ButtonIcon icon="kobber-arrow_right" />
<ButtonText>Kobber</ButtonText>
</Button>
```

If you want to change where the icon is placed, simply do so in the html. The orientation is left to right going downwards.

```tsx
<Button
collection="brand"
level="primary"
tone="tone-a"
>
<ButtonText>Kobber</ButtonText>
<ButtonIcon icon="kobber-arrow_right" />
</Button>
```

Buttons can also take in external icons, by wrapping them in the button component, and forgoing the `icon` prop.

```tsx
<Button
collection="brand"
level="primary"
tone="tone-a"
>
<ButtonText>Kobber</ButtonText>
<ButtonIcon>
{/* Your icon goes here */}
</ButtonIcon>
</Button>
```

If you are using a button without text, remember to use an `aria-label` for accessibility purposes.

```tsx
<Button
collection="brand"
level="primary"
tone="tone-a"
aria-label="Next slide"
>
<ButtonIcon icon="kobber-arrow_right" />
</Button>
```

You can also forgo the icon all together, and use the button with text only.

```tsx
<Button
collection="brand"
level="primary"
tone="tone-a"
>
<ButtonText>Kobber</ButtonText>
</Button>
```
Loading
Loading