Skip to content

Commit

Permalink
(web components) add progress and progress ring examples to show anim…
Browse files Browse the repository at this point in the history
…ated options (microsoft#20114)

* add progress examples

* Change files

* update to separate examples out

* updated to add stories

Co-authored-by: Seth Donohue <[email protected]>
  • Loading branch information
2 people authored and Marion Le Pontois committed Jan 17, 2022
1 parent 9607031 commit c0e68d8
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 9 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "add progress animated examples",
"packageName": "@fluentui/web-components",
"email": "[email protected]",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ export default {
},
};

const ProgressRingTemplate = ({ paused }) => `
<fluent-progress-ring
const ProgressRingTemplate = ({ paused, value }) => `
<fluent-progress-ring
${value ? `value="${value}"` : ''}
${paused ? `paused="${paused}"` : ''}
></fluent-progress-ring>
`;
Expand All @@ -20,15 +21,53 @@ export const ProgressRing = ProgressRingTemplate.bind({});

ProgressRing.args = {
paused: false,
value: 65,
};

const example = `
<fluent-progress-ring min="0" max="100" value="75"></fluent-progress-ring>
const defaultExample = `
<fluent-progress-ring min="0" max="100" value="${ProgressRing.args.value}"></fluent-progress-ring>
`;

ProgressRing.parameters = {
docs: {
source: {
code: example,
code: defaultExample,
},
},
};

export const ProgressRingAnimated = ProgressRingTemplate.bind({});

ProgressRingAnimated.args = {
paused: false,
};

export const ProgressRingPaused = ProgressRingTemplate.bind({});

ProgressRingPaused.args = {
paused: true,
};

const animatedExample = `
<fluent-progress-ring></fluent-progress-ring>
`;

const pausedExample = `
<fluent-progress-ring paused></fluent-progress-ring>
`;

ProgressRingAnimated.parameters = {
docs: {
source: {
code: animatedExample,
},
},
};

ProgressRingPaused.parameters = {
docs: {
source: {
code: pausedExample,
},
},
};
44 changes: 40 additions & 4 deletions packages/web-components/src/progress/progress/progress.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,54 @@ const ProgressTemplate = ({ paused, value }) => `
export const Progress = ProgressTemplate.bind({});

Progress.args = {
value: 50,
paused: false,
value: 50,
};

const example = `
<fluent-progress min="0" max="100" value="75"></fluent-progress>
const defaultExample = `
<fluent-progress min="0" max="100" value="${Progress.args.value}"></fluent-progress>
`;

Progress.parameters = {
docs: {
source: {
code: example,
code: defaultExample,
},
},
};

export const ProgressAnimated = ProgressTemplate.bind({});

ProgressAnimated.args = {
paused: false,
};

export const ProgressPaused = ProgressTemplate.bind({});

ProgressPaused.args = {
paused: true,
};

const animatedExample = `
<fluent-progress></fluent-progress>
`;

const pausedExample = `
<fluent-progress paused></fluent-progress>
`;

ProgressAnimated.parameters = {
docs: {
source: {
code: animatedExample,
},
},
};

ProgressPaused.parameters = {
docs: {
source: {
code: pausedExample,
},
},
};

0 comments on commit c0e68d8

Please sign in to comment.