`,
- ],
- parameters: {
- readme: {
- markdown: readme,
- },
- },
-};
+import '@umbraco-ui/uui-tag/lib/index';
+import '@umbraco-ui/uui-button/lib/index';
+import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { spread, renderSlots } from '../../../storyhelpers';
/* TODO: we should make some kind of component for this data layout */
-const cardContent = html`
-
-
-
-
- `,
- },
- },
+const fakeApi = (search: string) => {
+ if (search === '') return [];
+
+ return new Promise(resolve =>
+ setTimeout(() => {
+ const filteredData = fruits.filter(item =>
+ item.toLowerCase().includes(search.toLowerCase()),
+ );
+ resolve(filteredData);
+ }, 500),
+ );
};
-CountrySelect.parameters = {
- docs: {
- source: {
- code: `
-
-
-
- Africa
-
-
-
- Algeria
-
-
-
- Egypt
-
-
-
- Libya
-
- ...
-
-
- `,
+export const Async: Story = {
+ args: {
+ async: true,
+ options: [],
+ filter: async (_options: any, search: string) => {
+ return await fakeApi(search);
},
},
};
-
-CountrySelect.args = {
- search: '',
- selected: 'DK',
- regions: RegionsAndCountries,
-};
diff --git a/packages/uui-css/lib/custom-properties.story.ts b/packages/uui-css/lib/custom-properties.story.ts
index 5b5d66891..0e51d5d48 100644
--- a/packages/uui-css/lib/custom-properties.story.ts
+++ b/packages/uui-css/lib/custom-properties.story.ts
@@ -4,8 +4,7 @@ import '@umbraco-ui/uui-table/lib';
import readme from '../README.md?raw';
// @ts-ignore-start
-// eslint-disable-next-line -- // @typescript-eslint/ban-ts-comment // @ts-ignore
-import customProperties from '../custom-properties.module.js'; // eslint-disable-line
+import customProperties from '../custom-properties.module.js';
// @ts-ignore-end
const properties = Object.keys(customProperties.customProperties).map(
// @ts-ignore
diff --git a/packages/uui-css/lib/uui-css.mdx b/packages/uui-css/lib/uui-css.mdx
new file mode 100644
index 000000000..0dad26d4c
--- /dev/null
+++ b/packages/uui-css/lib/uui-css.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/blocks';
+
+
+
+# CSS
+
+UUI-CSS package contains css files which can be included in your project or components if needed.
+
+- **custom-properties.css** — use this if you like to include our custom properties in your project.
+- **uui-font.css** — use the `.uui-font` class if you like to declare the Umbraco typography, this is needed for getting the Umbraco typography.
+- **uui-text.css** — use the `.uui-text` class if you like to declare styles for typography, must be used together with `.uui-font`. This is needed for having proper styling for H1, H2, P, etc.
+- **uui-css.css** — This stylesheet includes all of the above stylesheets.
+
+## Usage
+
+```html
+
+
Hello uui-css!
+
+ This component will now use the styling from uui-text because the root of
+ the component has the uui-text class.
+
+
+ this paragraph uses a custom property from the uui custom properties to set
+ its background color.
+
+
+```
+
+
+
Hello uui-css!
+
+ This component will now use the styling from uui-text because the root of
+ the component has the uui-text class.
+
+
+ this paragraph uses a custom property from the uui custom properties to set
+ its background color.
+
+
diff --git a/packages/uui-css/lib/uui-css.story.ts b/packages/uui-css/lib/uui-css.story.ts
deleted file mode 100644
index c94fe14b7..000000000
--- a/packages/uui-css/lib/uui-css.story.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Story } from '@storybook/web-components';
-import { html } from 'lit';
-import readme from '../README.md?raw';
-
-export default {
- id: 'uui-css',
- title: 'Design/Css',
- component: 'uui-css',
- parameters: {
- readme: {
- markdown: readme,
- },
- docs: {
- source: {
- code: `
-// Include each of the following:
-import '@umbraco-ui/uui-css/dist/custom-properties.css';
-import '@umbraco-ui/uui-css/dist/uui-font.css';
-import '@umbraco-ui/uui-css/dist/uui-text.css';
-
-// Alternatively include the compiled bundle
-import '@umbraco-ui/uui-css/dist/uui-css.css';
- `,
- },
- },
- },
-};
-
-export const Overview: Story = () =>
- html`
-
CSS
-
- UUI-CSS package contains css files which can be included in your project
- or components if needed.
-
-
-
- custom-properties.css — use this if you like to include our
- custom properties in your project.
-
-
- uui-font.css — use the .uui-font class if you like to declare the
- Umbraco typography, this is needed for getting the Umbraco typography.
-
-
- uui-text.css — use the .uui-text class if you like to declare
- styles for typography, must be used together with .uui-font. This is
- needed for having proper styling for H1, H2, P etc.
-
-
- uui-css.css
- This stylesheet includes all of the above stylesheets.
-
-
- `;
-
-export const Usage: Story = () => html`
-
-
Hello uui-css!
-
- This component will now use the styling from uui-text because the root of
- the component has the uui-text class.
-
-
- this paragraph uses a custom property from the uui custom properties to
- set its background color.
-
The dialog layout component provides a default layout to the dialog
component. This is used as a direct child of the dialog element component.
Please view Dialog stories for examples.
-
- Cancel
- Action
- `;
+ `,
+ 'actions slot': html`Cancel
+ Action`,
+ },
+};
+
+export const HeadlineSlot: Story = {
+ args: {
+ ...Default.args,
+ headline: '',
+ 'headline slot': html`My custom headline `,
+ },
+};
diff --git a/packages/uui-dialog/lib/uui-dialog.story.ts b/packages/uui-dialog/lib/uui-dialog.story.ts
index 1e3f7e692..ca3314ba6 100644
--- a/packages/uui-dialog/lib/uui-dialog.story.ts
+++ b/packages/uui-dialog/lib/uui-dialog.story.ts
@@ -1,15 +1,18 @@
import '.';
-import '@umbraco-ui/uui-button/lib';
-import '@umbraco-ui/uui-icon-registry-essential/lib';
-
-import { Story } from '@storybook/web-components';
-import { html } from 'lit';
import readme from '../README.md?raw';
+import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { renderSlots, spread } from '../../../storyhelpers';
-export default {
+/**
+ * All-round dialog, often used with the [uui-dialog-layout](/docs/uui-dialog-layout--docs) component
+ */
+const meta: Meta = {
id: 'uui-dialog',
- title: 'Displays/Dialog/Dialog',
component: 'uui-dialog',
+ title: 'Displays/Dialog/Dialog',
+ render: args =>
+ html`${renderSlots(args)}`,
parameters: {
readme: {
markdown: readme,
@@ -17,65 +20,11 @@ export default {
},
};
-const Template: Story = () => html`
-
-
-
- Make a short description and highlight the affected data.
- Keep actions concrete, if asking a question in headline make sure to
- have actions that answers it.
-
`,
+ },
+};
diff --git a/packages/uui-file-dropzone/lib/uui-file-dropzone.story.ts b/packages/uui-file-dropzone/lib/uui-file-dropzone.story.ts
index 3fe4328b5..086a11914 100644
--- a/packages/uui-file-dropzone/lib/uui-file-dropzone.story.ts
+++ b/packages/uui-file-dropzone/lib/uui-file-dropzone.story.ts
@@ -1,19 +1,21 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-import { action } from '@storybook/addon-actions';
+import '.';
+import readme from '../README.md?raw';
import { html } from 'lit';
-import { UUIFileDropzoneEvent } from './UUIFileDropzoneEvent';
-import type { UUIFileDropzoneElement } from './uui-file-dropzone.element';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { renderSlots, spread } from '../../../storyhelpers';
+import { action } from '@storybook/addon-actions';
+import { UUIFileDropzoneElement, UUIFileDropzoneEvent } from '.';
import '@umbraco-ui/uui-button/lib';
-import '@umbraco-ui/uui-symbol-file-dropzone/lib';
-import './uui-file-dropzone.element';
-import readme from '../README.md?raw';
-
-const meta: Meta = {
+const meta: Meta = {
id: 'uui-file-dropzone',
- title: 'Inputs/Files/File Dropzone',
component: 'uui-file-dropzone',
+ title: 'Inputs/Files/File Dropzone',
+ render: args =>
+ html`${renderSlots(args)}`,
decorators: [
Story =>
html`
@@ -30,8 +32,7 @@ const meta: Meta = {
};
export default meta;
-
-type Story = StoryObj;
+type Story = StoryObj;
const handleFileChange = (e: Event) => {
if (!(e instanceof UUIFileDropzoneEvent)) {
@@ -44,52 +45,38 @@ const handleFileChange = (e: Event) => {
// Attach event listener to the story to log the event
document.addEventListener('change', handleFileChange);
-export const AAAOverview: Story = {
- name: 'Overview',
-};
+export const Default: Story = {};
+/**
+ * When the multiple attribute is specified, the file input allows the user to select more than one file.
+ */
export const Multiple: Story = {
args: {
multiple: true,
},
- parameters: {
- docs: {
- description: {
- story:
- 'When the multiple attribute is specified, the file input allows the user to select more than one file.',
- },
- },
- },
};
+/**
+ * The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more information.
+ */
export const Accept: Story = {
args: {
accept: 'image/*',
},
- parameters: {
- docs: {
- description: {
- story:
- 'The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more information.',
- },
- },
- },
};
+/**
+ * The disallow-folder-upload attribute prevents the user from uploading folders.
+ */
export const DisallowFolderUpload: Story = {
args: {
disallowFolderUpload: true,
},
- parameters: {
- docs: {
- description: {
- story:
- 'The disallow-folder-upload attribute prevents the user from uploading folders.',
- },
- },
- },
};
+/**
+ * The browse method allows the user to select a file from their computer.
+ */
export const BrowseFiles: Story = {
render: props => {
const handleBrowse = () => {
@@ -118,11 +105,8 @@ export const BrowseFiles: Story = {
},
parameters: {
docs: {
- description: {
- story:
- 'The browse method allows the user to select a file from their computer.',
- },
source: {
+ format: false,
code: `
const handleBrowse = () => {
const dropzone = document.getElementById('browse-dropzone');
diff --git a/packages/uui-file-preview/lib/uui-file-preview.story.ts b/packages/uui-file-preview/lib/uui-file-preview.story.ts
index b08023633..afd98bcaa 100644
--- a/packages/uui-file-preview/lib/uui-file-preview.story.ts
+++ b/packages/uui-file-preview/lib/uui-file-preview.story.ts
@@ -1,21 +1,25 @@
import '.';
+import readme from '../README.md?raw';
+import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { renderSlots, spread } from '../../../storyhelpers';
+
import '@umbraco-ui/uui-action-bar/lib';
import '@umbraco-ui/uui-button/lib';
-import '@umbraco-ui/uui-icon-registry-essential/lib';
-import '@umbraco-ui/uui-icon/lib';
import '@umbraco-ui/uui-symbol-file-thumbnail/lib';
import '@umbraco-ui/uui-symbol-folder/lib';
import '@umbraco-ui/uui-symbol-file/lib';
-import { StoryFn } from '@storybook/web-components';
-import { html } from 'lit';
-import { UUIFilePreviewElement } from './uui-file-preview.element';
-import readme from '../README.md?raw';
+import { UUIFilePreviewElement } from '.';
-export default {
+const meta: Meta = {
id: 'uui-file-preview',
- title: 'Displays/File Preview',
component: 'uui-file-preview',
+ title: 'Displays/File Preview',
+ render: args =>
+ html`${renderSlots(args)}`,
parameters: {
readme: {
markdown: readme,
@@ -23,17 +27,20 @@ export default {
},
};
-export const AAAOverview: StoryFn = () => {
- setTimeout(() => {
- const file = new File(['file'], 'File 1.txt', { type: 'text/plain' });
- const filePreview = document.getElementById(
- 'filePreview',
- ) as UUIFilePreviewElement;
- filePreview.file = file;
- });
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: () => {
+ setTimeout(() => {
+ const file = new File(['file'], 'File 1.txt', { type: 'text/plain' });
+ const filePreview = document.getElementById(
+ 'filePreview',
+ ) as UUIFilePreviewElement;
+ filePreview.file = file;
+ });
- return html`
-
+ return html`
@@ -41,53 +48,54 @@ export const AAAOverview: StoryFn = () => {
-
- `;
-};
-AAAOverview.storyName = 'Overview';
-
-AAAOverview.parameters = {
- docs: {
- source: {
- code: `
+ `;
+ },
+ parameters: {
+ docs: {
+ source: {
+ format: false,
+ code: `
const file = new File(["file"], "File 1.txt", { type: "text/plain" });
const filePreview = document.getElementById('filePreview') as UUIFilePreviewElement;
filePreview.file = file;
-
-
-
-
-
-
-
-
-
- `,
+
+
+
+
+
+
+
+ `,
+ },
},
},
};
-export const Image: StoryFn = () => {
- const init = async () => {
- const imageUrl =
- 'https://images.unsplash.com/photo-1650346910623-3a0d9ee1f2ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2371&q=80';
+export const Image: Story = {
+ loaders: [
+ async () => {
+ const imageUrl =
+ 'https://images.unsplash.com/photo-1650346910623-3a0d9ee1f2ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2371&q=80';
- const response = await fetch(imageUrl);
- const imageBlob = await response.blob();
- const file = new File([imageBlob], 'File 1', { type: 'image/jpeg' });
+ const response = await fetch(imageUrl);
+ const imageBlob = await response.blob();
- const imagePreview = document.getElementById(
- 'imagePreview',
- ) as UUIFilePreviewElement;
- imagePreview.file = file;
- };
-
- init();
-
- return html`
-
+ return {
+ file: new File([imageBlob], 'File 1', { type: 'image/jpeg' }),
+ };
+ },
+ ],
+ render: (args, { loaded: { file } }) => {
+ setTimeout(() => {
+ const imagePreview = document.getElementById(
+ 'imagePreview',
+ ) as UUIFilePreviewElement;
+ imagePreview.file = file;
+ });
+
+ return html`
@@ -95,14 +103,13 @@ export const Image: StoryFn = () => {
-
- `;
-};
-
-Image.parameters = {
- docs: {
- source: {
- code: `
+ `;
+ },
+ parameters: {
+ docs: {
+ source: {
+ format: false,
+ code: `
const init = async () => {
const imageUrl =
'https://images.unsplash.com/photo-1650346910623-3a0d9ee1f2ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2371&q=80';
@@ -127,7 +134,8 @@ init();
- `,
+ `,
+ },
},
},
};
diff --git a/packages/uui-form-layout-item/lib/uui-form-layout-item.story.ts b/packages/uui-form-layout-item/lib/uui-form-layout-item.story.ts
index 73fefd128..3a9673737 100644
--- a/packages/uui-form-layout-item/lib/uui-form-layout-item.story.ts
+++ b/packages/uui-form-layout-item/lib/uui-form-layout-item.story.ts
@@ -1,17 +1,26 @@
import '.';
-
-import { Story } from '@storybook/web-components';
+import readme from '../README.md?raw';
import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { renderSlots, spread } from '../../../storyhelpers';
+
import '@umbraco-ui/uui-button/lib';
import '@umbraco-ui/uui-checkbox/lib';
import '@umbraco-ui/uui-form/lib';
import '@umbraco-ui/uui-label/lib';
-import readme from '../README.md?raw';
+import '@umbraco-ui/uui-input/lib';
+
+// TODO: Figure out why we now need to import everything that every component uses
+import '@umbraco-ui/uui-form-validation-message/lib';
-export default {
+const meta: Meta = {
id: 'uui-form-layout-item',
- title: 'Inputs/Form/Form Layout Item',
component: 'uui-form-layout-item',
+ title: 'Inputs/Form/Form Layout Item',
+ render: args =>
+ html`${renderSlots(args)}`,
parameters: {
readme: {
markdown: readme,
@@ -19,79 +28,44 @@ export default {
},
};
-export const AAAOverview: Story = () => html`
-
- Form layout item is a layout component, use the properties and slots to
- append content/components of interest. See the following stories for
- examples.
-
-`;
-AAAOverview.storyName = 'Overview';
+export default meta;
+type Story = StoryObj;
-export const Example: Story = () =>
- html`
-
- `;
+export const Example: Story = {
+ args: {
+ 'label slot': html`
+ Phone number
+ `,
+ 'description slot': html`
+ Form item accepts a description, keep it short.
+ `,
+ slot: html`
+
+
+
+
+
+
+ `,
+ },
+};
diff --git a/packages/uui-form-validation-message/lib/uui-form-validation-message.story.ts b/packages/uui-form-validation-message/lib/uui-form-validation-message.story.ts
index 92ffae3b2..85e84bf7f 100644
--- a/packages/uui-form-validation-message/lib/uui-form-validation-message.story.ts
+++ b/packages/uui-form-validation-message/lib/uui-form-validation-message.story.ts
@@ -1,13 +1,12 @@
import '.';
-
-import { Story } from '@storybook/web-components';
-import { html } from 'lit';
import readme from '../README.md?raw';
+import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components';
-export default {
+const meta: Meta = {
id: 'uui-form-validation-message',
- title: 'Inputs/Form/Form Validation Message',
component: 'uui-form-validation-message',
+ title: 'Inputs/Form/Form Validation Message',
parameters: {
readme: {
markdown: readme,
@@ -15,34 +14,12 @@ export default {
},
};
-export const AAAOverview: Story = () =>
- html`
-
-
-
-
- `;
-AAAOverview.storyName = 'Overview';
+export default meta;
+type Story = StoryObj;
-export const ForAnotherElement: Story = () =>
- html`
- The Form Validation Message element can also display validation messages
- from another scope than it self. This is done by setting the 'for'
- attribute.
-
-
+export const Default: Story = {
+ render: () =>
+ html`
required
required-message="You must enter a phone number">
-
-
-
+ The Form Validation Message element can also display validation
+ messages from another scope than it self. This is done by setting the
+ 'for' attribute.
+
+ ${story()}`,
+ ],
};
diff --git a/packages/uui-form/lib/uui-form.story.ts b/packages/uui-form/lib/uui-form.story.ts
index 0b0853657..823f0b70d 100644
--- a/packages/uui-form/lib/uui-form.story.ts
+++ b/packages/uui-form/lib/uui-form.story.ts
@@ -1,6 +1,8 @@
-import { Story } from '@storybook/web-components';
+import '.';
+import readme from '../README.md?raw';
import { html } from 'lit';
-import '@umbraco-ui/uui-form/lib';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
import '@umbraco-ui/uui-form-layout-item/lib';
import '@umbraco-ui/uui-label/lib';
import '@umbraco-ui/uui-checkbox/lib';
@@ -14,13 +16,22 @@ import '@umbraco-ui/uui-combobox/lib';
import '@umbraco-ui/uui-combobox-list/lib';
import '@umbraco-ui/uui-textarea/lib';
import '@umbraco-ui/uui-select/lib';
-import { UUIRadioGroupEvent } from '@umbraco-ui/uui-radio/lib/UUIRadioGroupEvent';
-import readme from '../README.md?raw';
-export default {
+// TODO: Figure out why we now need to import everything that every component uses
+
+//For combobox:
+import '@umbraco-ui/uui-popover-container/lib';
+import '@umbraco-ui/uui-symbol-expand/lib';
+import '@umbraco-ui/uui-scroll-container/lib';
+//For UUI-FORM-LAYOUT-ITEM
+import '@umbraco-ui/uui-form-validation-message/lib';
+
+import { UUIRadioGroupEvent } from '@umbraco-ui/uui-radio/lib';
+
+const meta: Meta = {
id: 'uui-form',
- title: 'Inputs/Form/Form',
component: 'uui-form',
+ title: 'Inputs/Form/Form',
parameters: {
readme: {
markdown: readme,
@@ -28,6 +39,9 @@ export default {
},
};
+export default meta;
+type Story = StoryObj;
+
const _onRadioGroupChanged = (e: UUIRadioGroupEvent) => {
e.target.error = e.target.value !== 'radio2';
};
@@ -59,9 +73,8 @@ const options: Array
- clumsy, ok thank you for waiting
- Let's see if we can get this up and running
- umm we gotta a lot to cover over the next one and a half hour
- so errr, Say cheese, ahh awesome, what a wonderful day
-
-
- Thank you very much for coming errr
- welcome to the biggest Codegarden ever
- without a doubt our biggest ever
- the biggest err ever Codegarden
- we are more than 380 people err today, which is err about a
- little more than twenty times the people at the first Codegarden
- err this year there is more than 700 people, which makes it
- more than 30 times bigger than the very first one
- err so awesome to be back at the err the err Umbraco festival
-
-
- Hey, before we start I just want to be the first one to use the
- 'hi-five I suck' tag
- the only thing that makes this very different from my normal
- Christmas Eve
- is that I don't get sweaters like these from my inlaws which makes
- it even better...
- so the book will be a little delayed, and that's my fault
-
-
- ahhh it's amazing to be back
- umm I've really been looking forward to this
- I love Codegarden is because we're all together
- all the people you talk to on the forums, maillist people suddenly
- you see them in real life
- this is fantastic
- but we just have so much to share
-
-
- You should try to be up here
- it's scary and awesome at the same time
-
-
- so let's err let's start
- perhaps always people say
- Doug has this weird thing on my machine, I can't see anything
- aha he has notes, he's been preparing
- which I have of course...
-
-
- You should try to be up here
- I was here I think as the slide says quite a number of years ago
- We have slides and we have demos and there is so much that can go
- wrong
- err which is awesome
-
-
- So back in the day Per and I did demos and they failed
- and then we were told you can't fail in a keynote
- so then we made boring slideshow demos
- and pre-recorded videos
- and almost no dangerous demos
- and we are so bored
- we need stress
- we need panic
- we need to smell bad afterwards
- and then Pete Duncanson isn't here
- so we are going to have a buffet of Yellow Screens of Death
-
-
You should try to be up here
-
- umm
- those hats are still in use, err at the HQ you have to wear the hat
-
- if you forgot to log out of the computer
- and someone gets to post in Slack that you are giving out free beer,
-
- you have to wear the hat.
-
-
- I am really excited that so many people have come here
- it's pretty wild to just stand up here
- one of the reasons I love Codegarden is because we're all
- together
- all the people you talk to on the forums, maillist people
- suddenly you see them in real life and for me, that's kinda like
- Christmas Eve
-
-
- just think about it for a second
- people gathered here
- all passionate about Umbraco
- travelled across the world to share our ideas, our thoughts and
- maybe even umm... some code
- I really think it's crazy
-
-
- you should try to be up here
- it's the most awesome sight ever
-
-
Are you ready?
-
I don't know if you can see the slides now?
-
- Community and Infinity
- Are you ready?
- don't worry it's not as abstract as it sounds
-
+ clumsy, ok thank you for waiting
+ Let's see if we can get this up and running
+ umm we gotta a lot to cover over the next one and a half hour
+ so errr, Say cheese, ahh awesome, what a wonderful day
+
+
+ Thank you very much for coming errr
+ welcome to the biggest Codegarden ever
+ without a doubt our biggest ever
+ the biggest err ever Codegarden
+ we are more than 380 people err today, which is err about a
+ little more than twenty times the people at the first
+ Codegarden
+ err this year there is more than 700 people, which makes it
+ more than 30 times bigger than the very first one
+ err so awesome to be back at the err the err Umbraco festival
+
+
+ Hey, before we start I just want to be the first one to use the
+ 'hi-five I suck' tag
+ the only thing that makes this very different from my normal
+ Christmas Eve
+ is that I don't get sweaters like these from my inlaws which makes
+ it even better...
+ so the book will be a little delayed, and that's my fault
+
+
+ ahhh it's amazing to be back
+ umm I've really been looking forward to this
+ I love Codegarden is because we're all together
+ all the people you talk to on the forums, maillist people suddenly
+ you see them in real life
+ this is fantastic
+ but we just have so much to share
+
+
+ You should try to be up here
+ it's scary and awesome at the same time
+
+
+ so let's err let's start
+ perhaps always people say
+ Doug has this weird thing on my machine, I can't see anything
+ aha he has notes, he's been preparing
+ which I have of course...
+
+
+ You should try to be up here
+ I was here I think as the slide says quite a number of years
+ ago
+ We have slides and we have demos and there is so much that can go
+ wrong
+ err which is awesome
+
+
+ So back in the day Per and I did demos and they failed
+ and then we were told you can't fail in a keynote
+ so then we made boring slideshow demos
+ and pre-recorded videos
+ and almost no dangerous demos
+ and we are so bored
+ we need stress
+ we need panic
+ we need to smell bad afterwards
+ and then Pete Duncanson isn't here
+ so we are going to have a buffet of Yellow Screens of Death
+
+
You should try to be up here
+
+ umm
+ those hats are still in use, err at the HQ you have to wear the
+ hat
+
+ if you forgot to log out of the computer
+ and someone gets to post in Slack that you are giving out free
+ beer,
+
+ you have to wear the hat.
+
+
+ I am really excited that so many people have come here
+ it's pretty wild to just stand up here
+ one of the reasons I love Codegarden is because we're all
+ together
+ all the people you talk to on the forums, maillist people
+ suddenly you see them in real life and for me, that's kinda like
+ Christmas Eve
+
+
+ just think about it for a second
+ people gathered here
+ all passionate about Umbraco
+ travelled across the world to share our ideas, our thoughts and
+ maybe even umm... some code
+ I really think it's crazy
+
+
+ you should try to be up here
+ it's the most awesome sight ever
+
+
Are you ready?
+
I don't know if you can see the slides now?
+
+ Community and Infinity
+ Are you ready?
+ don't worry it's not as abstract as it sounds
+
+
there is a long break after this one so err
+
and now I have transitions
`}
+
+ `,
};
-export const VeryWideContent: Story = props => html`
-
- ${props.slot}
-
-`;
-
-VeryWideContent.args = {
- slot: html` line is way toooo long
- WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY `,
+export const NotEnoughContent: Story = {
+ ...Default,
+ args: {
+ slot: 'Very little text, no scrollbar appearing',
+ },
};
-export const EnforceScroll: Story = props => html`
-
- ${props.slot}
-
-`;
+export const VeryWideContent: Story = {
+ ...Default,
+ args: {
+ slot: 'line is way toooo long WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY',
+ },
+};
-EnforceScroll.args = {
- slot: 'Very little text, but has the enforce-scroll property\n(See with a dark background)',
+export const EnforceScroll: Story = {
+ ...Default,
+ args: {
+ slot: 'Very little text, but has the enforce-scroll property\n(See with a dark background)',
+ },
};
diff --git a/packages/uui-select/lib/uui-select.story.ts b/packages/uui-select/lib/uui-select.story.ts
index 5eea55383..68d97457b 100644
--- a/packages/uui-select/lib/uui-select.story.ts
+++ b/packages/uui-select/lib/uui-select.story.ts
@@ -1,48 +1,31 @@
import '.';
-
-import { Story } from '@storybook/web-components';
-import { html } from 'lit';
import readme from '../README.md?raw';
+import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { spread } from '../../../storyhelpers';
-const options: Array
- 
- Algeria
- 
- Egypt
- 
- Libya
-