Storybook/#8 set up #32

Merged
Ninosaurier merged 3 commits from storybook/#8-set-up into dev 2026-09-01 14:14:00 +00:00
5 changed files with 0 additions and 128 deletions
Showing only changes of commit b549bb4e85 - Show all commits
@@ -1,37 +0,0 @@
import { render, h, describe, it, expect } from '@stencil/vitest';
import { runA11yChecks } from '../../testing/a11y';
describe('my-component', () => {
it('renders', async () => {
const { root } = await render(<my-component></my-component>);
await expect(root).toEqualHtml(`
<my-component class="hydrated">
<mock:shadow-root>
<div>
Hello, World! I'm
</div>
</mock:shadow-root>
</my-component>
`);
});
it('has no accessibility violations', async () => {
const { root } = await render(<my-component></my-component>);
const results = await runA11yChecks(root);
expect(results).toHaveNoA11yViolations();
});
it('renders with values', async () => {
const { root } = await render(<my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>);
await expect(root).toEqualHtml(`
<my-component class="hydrated">
<mock:shadow-root>
<div>
Hello, World! I'm Stencil 'Don't call me a framework' JS
</div>
</mock:shadow-root>
</my-component>
`);
});
});
@@ -1,3 +0,0 @@
:host {
display: block;
}
@@ -1,41 +0,0 @@
import type { Meta, StoryObj } from '@stencil/storybook-plugin';
import { h } from '@stencil/core';
import { MyComponent } from './my-component';
const meta: Meta<MyComponent> = {
title: 'MyComponent',
component: MyComponent,
parameters: {
layout: 'centered',
},
argTypes: {
first: { control: 'text' },
last: { control: 'text' },
middle: { control: 'text' },
},
args: { first: 'John', last: 'Doe', middle: 'Michael' },
};
export default meta;
type Story = StoryObj<MyComponent>;
export const Primary: Story = {
args: {
first: 'John',
last: 'Doe',
middle: 'Michael',
},
render: props => <my-component {...props} />,
};
/**
* Storybook story without custom render function
*/
export const Secondary: Story = {
args: {
first: 'Jane',
last: 'Smith',
middle: 'Marie',
},
};
@@ -1,32 +0,0 @@
import { Component, Prop, h } from '@stencil/core';
import { format } from '../../utils/utils';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true,
})
export class MyComponent {
/**
* The first name
*/
@Prop() first?: string;
/**
* The middle name
*/
@Prop() middle?: string;
/**
* The last name
*/
@Prop() last?: string;
private getText(): string {
return format(this.first, this.middle, this.last);
}
render() {
return <div>Hello, World! I'm {this.getText()}</div>;
}
}
@@ -1,15 +0,0 @@
# my-component
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | --------------- | --------------------- | ----------- |
| `first` | `first` | The first name | `string \| undefined` | `undefined` |
| `last` | `last` | The last name | `string \| undefined` | `undefined` |
| `middle` | `middle` | The middle name | `string \| undefined` | `undefined` |
---
_Built with [StencilJS](https://stenciljs.com/)_