= (args) => htm
export const Basic = Template.bind({});
Basic.args = {
default: `
-
Main Content
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.
+
Main Content
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.
-
Side Content
-
Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.
+
Side Content
+
Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.
-
Main Content
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.
-
-
Side Content
-
Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.
-
+
+ ${unsafeHTML(args.valueStateMessage)}
+
+
`;
export const Basic = Template.bind({});
Basic.args = {
value: 5,
};
-export const Readonly = Template.bind({});
-Readonly.args = {
- value: 5,
- readonly: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
- value: 5,
- disabled: true,
-};
-
-export const Design = Template.bind({});
-Design.storyName = "Value State";
-Design.args = {
- value: 5,
- valueState: ValueState.Success,
-};
+export const DifferentValueStates: StoryFn = () => html`
+
+
+
+
+`;
export const MinMax = Template.bind({});
MinMax.storyName = "Min/Max and Step Values";
MinMax.args = {
value: 0,
- min: -100,
- max: 100,
+ min: -50,
+ max: 50,
step: 10,
};
@@ -88,7 +78,7 @@ ValuePrecision.args = {
};
export const Label = Template.bind({});
-Label.storyName = "With Label and Alignment";
+Label.storyName = "With Text Alignment";
Label.args = {
id: "myStepInput",
style: "text-align: left",
@@ -96,6 +86,6 @@ Label.args = {
required: true,
};
Label.decorators = [
- (story) => html`Number
+ (story) => html`Number is left-aligned
${story()}`,
]
\ No newline at end of file
diff --git a/packages/playground/_stories/main/Switch/Switch.stories.ts b/packages/playground/_stories/main/Switch/Switch.stories.ts
index f1c73a8b0890..f5bd859e8371 100644
--- a/packages/playground/_stories/main/Switch/Switch.stories.ts
+++ b/packages/playground/_stories/main/Switch/Switch.stories.ts
@@ -38,30 +38,8 @@ const Template: UI5StoryArgs = (args) => html``;
export const Basic = Template.bind({});
-
-export const WithText = Template.bind({});
-WithText.args = {
- textOn: "On",
- textOff: "Off",
-};
-
-export const Checked = Template.bind({});
-Checked.args = {
- textOn: "Yes",
- textOff: "No",
- checked: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
- disabled: true,
- checked: true,
-};
-
-export const Design = Template.bind({});
-Design.args = {
- design: SwitchDesign.Graphical,
- accessibleName: "graphical",
+Basic.args = {
+ accessibleName: "Switch with Accessible Name",
};
export const RequiredInForm = Template.bind({});
@@ -85,13 +63,13 @@ RequiredInForm.decorators = [
}