Skip to content
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

Jump to bottom

docs: enhance storybook samples #7454

Merged
merged 3 commits into from
Sep 14, 2023
Merged

docs: enhance storybook samples #7454

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
758e6a3
docs: enhance storybook samples
hinzzx Aug 16, 2023
9cf99fe
docs: apply code review comments
hinzzx Aug 30, 2023
fb829d5
docs: address code review changes
hinzzx Sep 14, 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
16 changes: 3 additions & 13 deletions packages/fiori/src/Bar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,16 +71,6 @@ class Bar extends UI5Element {
/**
* Defines the component's design.
*
* <br><br>
* <b>Note:</b>
* Available options are:
* <ul>
* <li><code>Header</code></li>
* <li><code>Subheader</code></li>
* <li><code>Footer</code></li>
* <li><code>FloatingFooter</code></li>
* </ul>
*
* @type {sap.ui.webc.fiori.types.BarDesign}
* @name sap.ui.webc.fiori.Bar.prototype.design
* @defaultvalue "Header"
Expand All @@ -90,7 +80,7 @@ class Bar extends UI5Element {
design!: `${BarDesign}`

/**
* Defines the content at the start of the bar
* Defines the content at the start of the bar.
* @type {HTMLElement[]}
* @name sap.ui.webc.fiori.Bar.prototype.startContent
* @slot
Expand All @@ -100,7 +90,7 @@ class Bar extends UI5Element {
startContent!: Array<HTMLElement>;

/**
* Defines the content in the middle of the bar
* Defines the content in the middle of the bar.
* @type {HTMLElement[]}
* @name sap.ui.webc.fiori.Bar.prototype.default
* @slot middleContent
Expand All @@ -110,7 +100,7 @@ class Bar extends UI5Element {
middleContent!: Array<HTMLElement>

/**
* Defines the content at the end of the bar
* Defines the content at the end of the bar.
* @type {HTMLElement[]}
* @name sap.ui.webc.fiori.Bar.prototype.endContent
* @slot
Expand Down
21 changes: 0 additions & 21 deletions packages/main/src/Button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,18 +105,6 @@ class Button extends UI5Element implements IFormElement {
/**
* Defines the component design.
*
* <br><br>
* <b>The available values are:</b>
*
* <ul>
* <li><code>Default</code></li>
* <li><code>Emphasized</code></li>
* <li><code>Positive</code></li>
* <li><code>Negative</code></li>
* <li><code>Transparent</code></li>
* <li><code>Attention</code></li>
* </ul>
*
* @type {sap.ui.webc.main.types.ButtonDesign}
* @name sap.ui.webc.main.Button.prototype.design
* @defaultvalue "Default"
Expand Down Expand Up @@ -254,15 +242,6 @@ class Button extends UI5Element implements IFormElement {
* Defines whether the button has special form-related functionality.
*
* <br><br>
* <b>The available values are:</b>
*
* <ul>
* <li><code>Button</code></li>
* <li><code>Submit</code></li>
* <li><code>Reset</code></li>
* </ul>
*
* <br><br>
* <b>Note:</b> For the <code>type</code> property to have effect, you must add the following import to your project:
* <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
*
Expand Down
9 changes: 0 additions & 9 deletions packages/main/src/DatePicker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,15 +226,6 @@ class DatePicker extends DateComponentBase implements IFormElement {

/**
* Defines the value state of the component.
* <br><br>
* Available options are:
* <ul>
* <li><code>None</code></li>
* <li><code>Error</code></li>
* <li><code>Warning</code></li>
* <li><code>Success</code></li>
* <li><code>Information</code></li>
* </ul>
*
* @type {sap.ui.webc.base.types.ValueState}
* @name sap.ui.webc.main.DatePicker.prototype.valueState
Expand Down
10 changes: 0 additions & 10 deletions packages/main/src/FileUploader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,16 +183,6 @@ class FileUploader extends UI5Element implements IFormElement {

/**
* Defines the value state of the component.
* <br><br>
* Available options are:
* <ul>
* <li><code>None</code></li>
* <li><code>Error</code></li>
* <li><code>Warning</code></li>
* <li><code>Success</code></li>
* <li><code>Information</code></li>
* </ul>
*
* @type {sap.ui.webc.base.types.ValueState}
* @name sap.ui.webc.main.FileUploader.prototype.valueState
* @defaultvalue "None"
Expand Down
12 changes: 0 additions & 12 deletions packages/main/src/SplitButton.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,18 +135,6 @@ class SplitButton extends UI5Element {
/**
* Defines the component design.
*
* <br><br>
* <b>The available values are:</b>
*
* <ul>
* <li><code>Default</code></li>
* <li><code>Emphasized</code></li>
* <li><code>Positive</code></li>
* <li><code>Negative</code></li>
* <li><code>Transparent</code></li>
* <li><code>Attention</code></li>
* </ul>
*
* @type {sap.ui.webc.main.types.ButtonDesign}
* @name sap.ui.webc.main.SplitButton.prototype.design
* @defaultvalue "Default"
Expand Down
9 changes: 0 additions & 9 deletions packages/main/src/StepInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,15 +155,6 @@ class StepInput extends UI5Element implements IFormElement {

/**
* Defines the value state of the component.
* <br><br>
* Available options are:
* <ul>
* <li><code>None</code></li>
* <li><code>Error</code></li>
* <li><code>Warning</code></li>
* <li><code>Success</code></li>
* <li><code>Information</code></li>
* </ul>
*
* @name sap.ui.webc.main.StepInput.prototype.valueState
* @type {sap.ui.webc.base.types.ValueState}
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/_stories/fiori/Bar/Bar.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const Template: UI5StoryArgs<Bar, StoryArgsSlots> = (args) => html`<ui5-bar
</ui5-bar>`;

export const Basic = Template.bind({});
Basic.storyName = "With Content and Design";
Basic.storyName = "Basic";
Basic.args = {
design: BarDesign.Header,
startContent: `<ui5-button icon="home" tooltip="Go home" design="Transparent" slot="startContent"></ui5-button>`,
Expand Down
38 changes: 19 additions & 19 deletions packages/playground/_stories/fiori/DynamicSideContent/DynamicSideContent.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,20 @@ export default {
argTypes,
} as Meta<DynamicSideContent>;

const Template: UI5StoryArgs<DynamicSideContent, StoryArgsSlots> = (args) => html`<ui5-dynamic-side-content
const Template: UI5StoryArgs<DynamicSideContent, StoryArgsSlots> = (args) => html`
<style>
.text {
display: inline-block;
font-size: var(--sapFontSize);
font-family: var(--sapFontFamily);
color: var(--sapTextColor);
line-height: normal;
white-space: pre-line;
word-wrap: break-word;
cursor: text;
}
</style>
<ui5-dynamic-side-content
?equal-split="${ifDefined(args.equalSplit)}"
?hide-main-content="${ifDefined(args.hideMainContent)}"
?hide-side-content="${ifDefined(args.hideSideContent)}"
Expand All @@ -42,25 +55,12 @@ const Template: UI5StoryArgs<DynamicSideContent, StoryArgsSlots> = (args) => htm
export const Basic = Template.bind({});
Basic.args = {
default: `<div>
<h1>Main Content</h1>
<p>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.</p>
<ui5-title level="h1">Main Content</ui5-title>
<p class="text">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.</p>
</div>`,
sideContent: `<div slot="sideContent">
<h1>Side Content</h1>
<p>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.</p>
<ui5-title level="h1">Side Content</ui5-title>
<p class="text">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.</p>
</div>`,
sideContentVisibility: SideContentVisibility.AlwaysShow,
};

export const Position = Template.bind({});
Position.storyName = "Side Content Position";
Position.args = {
sideContentPosition: SideContentPosition.Start,
default: `<div>
<h1>Main Content</h1>
<p>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.</p>
</div>`,
sideContent: `<div slot="sideContent">
<h1>Side Content</h1>
<p>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.</p>
</div>`,
};
52 changes: 18 additions & 34 deletions packages/playground/_stories/main/Button/Button.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,39 +40,23 @@ const Template: UI5StoryArgs<Button, StoryArgsSlots> = (args) => html`<ui5-butto

export const Basic = Template.bind({});
Basic.args = {
default: "Button",
default: "Button Text",
accessibleName: "Button with Accessible Name",
};

export const Disabled = Template.bind({});
Disabled.args = {
default: "Disabled",
disabled: true,
};

export const WithIconAndDesign = Template.bind({});
WithIconAndDesign.args = {
default: "Warning",
design: ButtonDesign.Attention,
icon: "message-warning",
};

export const WithEndIcon = Template.bind({});
WithEndIcon.args = {
default: "Download",
icon: "download",
iconEnd: true,
};

export const IconOnly = Template.bind({});
IconOnly.storyName = "Icon-only Button";
IconOnly.args = {
design: ButtonDesign.Negative,
icon: "cancel",
accessibleName: "Cancel",
accessibleNameRef: "lblCancel",
tooltip: "Cancel",
};
IconOnly.decorators = [
(story) => html`<ui5-label style="display:none;" id="lblCancel" aria-hidden="true">Cancel</ui5-label>
${story()}`,
];
export const DifferentDesigns: StoryFn = () => html`
<ui5-button design="${ButtonDesign.Emphasized}"> Emphasized </ui5-button>
<ui5-button design="${ButtonDesign.Attention}"> Attention </ui5-button>
<ui5-button design="${ButtonDesign.Positive}"> Positive </ui5-button>
<ui5-button design="${ButtonDesign.Negative}"> Negative </ui5-button>
<ui5-button design="${ButtonDesign.Transparent}"> Transparent </ui5-button>
`;

export const IconOnlyButtons: StoryFn = () => html`
<ui5-button design="${ButtonDesign.Emphasized}" icon="business-suite/icon-target"></ui5-button>
<ui5-button design="${ButtonDesign.Attention}" icon="message-warning" tooltip="Warning Button"></ui5-button>
<ui5-button design="${ButtonDesign.Positive}" icon="business-suite/icon-completed" tooltip="Positive Button"></ui5-button>
<ui5-button design="${ButtonDesign.Negative}" icon="cancel" tooltip="Negative Button"></ui5-button>
<ui5-button design="${ButtonDesign.Transparent}" icon="account" tooltip="Transparent Button"></ui5-button>
`;
IconOnlyButtons.storyName = "Icon-Only Buttons";
16 changes: 8 additions & 8 deletions packages/playground/_stories/main/FileUploader/FileUploader.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,6 @@ Basic.decorators = [
${story()}`,
];

export const Custom = Template.bind({});
Custom.storyName = "With Custom Design ";
Custom.args = {
hideInput: true,
default: `<ui5-badge>Upload File</ui5-badge>`,
};

export const Advanced = Template.bind({});
Advanced.storyName = "Image Uploader";
Advanced.args = {
Expand All @@ -69,7 +62,7 @@ Advanced.decorators = [
<div id="result"></div>
<script>
var fileUploader = document.querySelector("#fileuploader"),
resultDiv = document.querySelector("#result");
resultDiv = document.querySelector("#result");
fileUploader.addEventListener("change", function(event) {
var files = event.target.files;
if (!files.length) {
Expand Down Expand Up @@ -97,4 +90,11 @@ Advanced.parameters = {
inline: false,
},
}
};

export const Custom = Template.bind({});
hinzzx marked this conversation as resolved.
Show resolved Hide resolved
Custom.storyName = "Custom Design ";
Custom.args = {
hideInput: true,
default: `<ui5-badge>Upload File</ui5-badge>`,
};
4 changes: 2 additions & 2 deletions packages/playground/_stories/main/Menu/Menu.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default {
} as Meta<Menu>;

const Template: UI5StoryArgs<Menu, StoryArgsSlots> = (args) => html`<ui5-menu
headerText="${ifDefined(args.headerText)}"
header-text="${ifDefined(args.headerText)}"
opener="${ifDefined(args.opener)}"
?open="${ifDefined(args.open)}"
id="${ifDefined(args.id)}"
Expand All @@ -35,7 +35,7 @@ const Template: UI5StoryArgs<Menu, StoryArgsSlots> = (args) => html`<ui5-menu
</ui5-menu>`;

export const Basic = Template.bind({});
Basic.storyName = "Basic Menu with Header Text";
Basic.storyName = "Basic";
Basic.args = {
id: "menuBasic",
headerText: "Basic Menu with Items",
Expand Down
45 changes: 14 additions & 31 deletions packages/playground/_stories/main/SplitButton/SplitButton.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,20 @@ const Template: UI5StoryArgs<SplitButton, StoryArgsSlots> = (args) => html`<ui5-
export const Basic = Template.bind({});
Basic.args = {
default: "Default",
accessibleName: "Split Button with Accessible Name",
};

export const SplitButtonWithMenu = Template.bind(this);
SplitButtonWithMenu.args = {
export const OpeningMenu = Template.bind(this);
OpeningMenu.args = {
default: "Open Menu",
};
SplitButtonWithMenu.decorators = [
OpeningMenu.decorators = [
(story) => {
return html`
<ui5-menu id="menuInSplitBtnDefaultAction">
<ui5-menu-item text="Edit" icon="add"></ui5-menu-item>
<ui5-menu-item text="Save" icon="save"></ui5-menu-item>
<ui5-menu-item text="Delete" icon="delete"></ui5-menu-item>
<ui5-menu-item text="Edit" icon="add"></ui5-menu-item>
<ui5-menu-item text="Save" icon="save"></ui5-menu-item>
<ui5-menu-item text="Delete" icon="delete"></ui5-menu-item>
</ui5-menu>
${story()}
<script>
Expand All @@ -62,28 +63,10 @@ SplitButtonWithMenu.decorators = [
</script>`;}
];

export const Disabled = Template.bind({});
Disabled.storyName = "Disabled SplitButton";
Disabled.args = {
default: "Disabled",
disabled: true,
};

export const Design = Template.bind({});
Design.args = {
default: "Attention",
design: ButtonDesign.Attention,
};

export const WithIcon = Template.bind({});
WithIcon.args = {
default: "Icon",
icon: "add",
};

export const WithActiveIcon = Template.bind({});
WithActiveIcon.args = {
default: "Press Me",
icon: "add",
activeIcon: "accept",
};
export const DifferentDesigns: StoryFn = () => html`
<ui5-split-button design="${ButtonDesign.Emphasized}"> Emphasized </ui5-split-button>
<ui5-split-button design="${ButtonDesign.Attention}"> Attention </ui5-split-button>
<ui5-split-button design="${ButtonDesign.Positive}"> Positive </ui5-split-button>
<ui5-split-button design="${ButtonDesign.Negative}"> Negative </ui5-split-button>
<ui5-split-button design="${ButtonDesign.Transparent}"> Transparent </ui5-split-button>
`;
Loading