Skip to content

docs: storybook color props #500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 24, 2023
Merged

docs: storybook color props #500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
11c75a5
docs(storybook): change to StoryObj format to automap properties
iOvergaard May 24, 2023
0c18bdc
fix: change jsdoc to allow the web-component-analyzer to output corre…
iOvergaard May 24, 2023
c6b6111
docs(storybook): map .value correctly for uui-color-swatches
iOvergaard May 24, 2023
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
22 changes: 10 additions & 12 deletions packages/uui-color-area/lib/uui-color-area.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import '.';

import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { UUIColorAreaElement } from './uui-color-area.element';
import type { Meta, StoryObj } from '@storybook/web-components';
import type { UUIColorAreaElement } from './uui-color-area.element';
import readme from '../README.md?raw';

export default {
import './uui-color-area.element';

const meta: Meta<UUIColorAreaElement> = {
id: 'uui-color-area',
title: 'Inputs/Color/Color Area',
component: 'uui-color-area',
Expand All @@ -25,11 +24,10 @@ export default {
handles: ['change'],
},
},
} as Meta<UUIColorAreaElement>;
};

export default meta;

const Template: Story<UUIColorAreaElement> = props =>
html`<uui-color-area
.value=${props.value}
.disabled=${props.disabled}></uui-color-area>`;
type Story = StoryObj<UUIColorAreaElement>;

export const Overview = Template.bind({});
export const Overview: Story = {};
105 changes: 50 additions & 55 deletions packages/uui-color-picker/lib/uui-color-picker.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,11 @@ import '@umbraco-ui/uui-button-group/lib';
import '@umbraco-ui/uui-icon/lib';
import '@umbraco-ui/uui-popover/lib';

import '.';

import { Meta, StoryFn } from '@storybook/web-components';
import { html } from 'lit-html';
import { UUIColorPickerElement } from './uui-color-picker.element';
import type { Meta, StoryObj } from '@storybook/web-components';
import type { UUIColorPickerElement } from './uui-color-picker.element';
import './uui-color-picker.element';
import readme from '../README.md?raw';
import { html } from 'lit';

const defaultSwatches = [
'#d0021b',
Expand All @@ -34,7 +33,7 @@ const defaultSwatches = [
'#fff',
];

export default {
const meta: Meta<UUIColorPickerElement> = {
id: 'uui-color-picker',
title: 'Inputs/Color/Color Picker',
component: 'uui-color-picker',
Expand All @@ -51,69 +50,65 @@ export default {
handles: ['change'],
},
},
} as Meta<UUIColorPickerElement>;
};

const Template: StoryFn<UUIColorPickerElement> = props => html`
<uui-color-picker
.inline=${props.inline}
.value=${props.value}
.format=${props.format}
.disabled=${props.disabled}
.swatches=${props.swatches}
.size=${props.size}
.opacity=${props.opacity}
.uppercase=${props.uppercase}
.name=${props.name}
.noFormatToggle=${props.noFormatToggle}>
</uui-color-picker>
`;
export default meta;

export const AAAOverview = Template.bind({});
AAAOverview.storyName = 'Overview';
type Story = StoryObj<UUIColorPickerElement>;

export const Inline = Template.bind({});
Inline.args = {
inline: true,
};
Inline.parameters = {
docs: {
source: {
code: `<uui-color-picker inline="true"></uui-color-picker>`,
export const Overview: Story = {};

export const Inline: Story = {
args: {
inline: true,
},
parameters: {
docs: {
source: {
code: `<uui-color-picker inline="true"></uui-color-picker>`,
},
},
},
};

export const WithOpacity = Template.bind({});
WithOpacity.args = {
opacity: true,
};
WithOpacity.parameters = {
docs: {
source: {
code: `<uui-color-picker opacity></uui-color-picker>`,
export const WithOpacity: Story = {
args: {
opacity: true,
},
parameters: {
docs: {
source: {
code: `<uui-color-picker opacity></uui-color-picker>`,
},
},
},
};

const formats = ['hex', 'rgb', 'hsl'];

export const Formats: StoryFn = () => html`
<h4>Formats</h4>
${formats.map(
format =>
html`
<h5>${format}</h5>
<uui-color-picker .format=${format as any} value="blue">
</uui-color-picker>
`
)}
`;
Formats.args = { format: 'hex' };
Formats.parameters = {
docs: {
source: {
code: `
export const Formats: Story = {
args: {
format: 'hex',
value: 'blue',
},
decorators: [
(story, props) => html`<div style="display: flex; flex-direction: column;">
<h5>${props.args.format}</h5>
${story()}
</div> `,
],
argTypes: {
format: {
options: formats,
control: { type: 'select' },
},
},
parameters: {
docs: {
source: {
code: `
<uui-color-picker format="hex"></uui-color-picker>`,
},
},
},
};
78 changes: 35 additions & 43 deletions packages/uui-color-slider/lib/uui-color-slider.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import '.';

import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { UUIColorSliderElement } from './uui-color-slider.element';
import type { Meta, StoryObj } from '@storybook/web-components';
import type { UUIColorSliderElement } from './uui-color-slider.element';
import readme from '../README.md?raw';

export default {
import './uui-color-slider.element';

const meta: Meta<UUIColorSliderElement> = {
id: 'uui-color-slider',
title: 'Inputs/Color/Color Slider',
component: 'uui-color-slider',
Expand All @@ -30,52 +29,45 @@ export default {
},
},
},
} as Meta<UUIColorSliderElement>;
};

const Template: Story<UUIColorSliderElement> = props => html`
<uui-color-slider
.vertical=${props.vertical}
.min=${props.min}
.max=${props.max}
.precision=${props.precision}
.label=${props.label}
.disabled=${props.disabled}
.value=${props.value}
.type=${props.type}
.color=${props.color}>
</uui-color-slider>
`;
export default meta;

export const AAAOverview = Template.bind({});
AAAOverview.storyName = 'Overview';
type Story = StoryObj<UUIColorSliderElement>;

export const Disabled = Template.bind({});
Disabled.args = {
disabled: true,
value: 50,
};
Disabled.parameters = {
docs: {
source: {
code: `<uui-color-slider label="Slider label" disabled="true"></uui-color-slider>`,
export const Overview: Story = {};

export const Disabled: Story = {
args: {
disabled: true,
value: 50,
},
parameters: {
docs: {
source: {
code: `<uui-color-slider label="Slider label" disabled="true"></uui-color-slider>`,
},
},
},
};

export const Opacity = Template.bind({});
Opacity.args = {
type: 'opacity',
color: '#417505',
export const Opacity: Story = {
args: {
type: 'opacity',
color: '#417505',
},
};

export const Vertical = Template.bind({});
Vertical.args = {
vertical: true,
export const Vertical: Story = {
args: {
vertical: true,
},
};

export const VerticalOpacity = Template.bind({});
VerticalOpacity.args = {
type: 'opacity',
vertical: true,
color: '#417505',
export const VerticalOpacity: Story = {
args: {
type: 'opacity',
vertical: true,
color: '#417505',
},
};
11 changes: 5 additions & 6 deletions packages/uui-color-swatch/lib/uui-color-swatch.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,13 +191,13 @@ export class UUIColorSwatchElement extends LabelMixin(
];

private _value: string | undefined = '';

/**
* Value of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.
* @type { string }
*
* @attr
* @default ""
*/
@property({ type: String })
@property()
get value(): string {
return this._value ? this._value : this.textContent?.trim() || '';
}
Expand All @@ -210,24 +210,23 @@ export class UUIColorSwatchElement extends LabelMixin(

/**
* Determines if the options is disabled. If true the option can't be selected
* @type { boolean }
*
* @attr
* @default false
*/
@property({ type: Boolean, reflect: true })
disabled = false;

/**
* When true shows element label below the color checkbox
*
* @attr
* @memberof UUIColorSwatchElement
*/
@property({ type: Boolean, attribute: 'show-label' })
showLabel = false;
/**
* Colord object instance based on the value provided to the element. If the value is not a valid color, it falls back to black (like Amy Winehouse). For more information about Colord, see [Colord](https://omgovich.github.io/colord/)
*
* @type {(Colord | null)}
* @memberof UUIColorSwatchElement
*/
get color(): Colord | null {
Expand Down
Loading