-
Notifications
You must be signed in to change notification settings - Fork 179
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8e6ff8d
commit 3eb87a1
Showing
4 changed files
with
406 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,202 @@ | ||
import { Canvas, Meta, Story } from '@storybook/addon-docs'; | ||
import { CvProgress, CvProgressStep } from '.'; | ||
import { Time20 as TimeIcon } from '@carbon/icons-vue'; | ||
// noinspection ES6PreferShortImport | ||
import { sbCompPrefix } from '../../global/storybook-utils'; | ||
import { action } from '@storybook/addon-actions'; | ||
|
||
<Meta title={`${sbCompPrefix}/CvProgress`} component={CvProgress} /> | ||
|
||
export const Template = args => ({ | ||
// Components used in your story `template` are defined in the `components` object | ||
components: { | ||
CvProgress, | ||
CvProgressStep, | ||
TimeIcon, | ||
}, | ||
// The story's `args` need to be mapped into the template through the `setup()` method | ||
setup() { | ||
return { | ||
initialStep: args.initialStep, | ||
steps: args.steps, | ||
vertical: args.vertical, | ||
spaceEqually: args.spaceEqually, | ||
step1: args.step1, | ||
step2: args.step2, | ||
step3: args.step3, | ||
step4: args.step4, | ||
step5: args.step5, | ||
completeIds: args.completeIds, | ||
invalidIds: args.invalidIds, | ||
disabledIds: args.disabledIds, | ||
onStepClicked: action('step-clicked'), | ||
}; | ||
}, | ||
// And then the `args` are bound to your component with `v-bind="args"` | ||
template: args.template, | ||
}); | ||
const defaultTemplate = ` | ||
<cv-progress | ||
:initial-step="initialStep" | ||
:steps="steps" | ||
:vertical="vertical" | ||
:spaceEqually="spaceEqually" | ||
@step-clicked="onStepClicked"> | ||
</cv-progress> | ||
`; | ||
const slotTemplate = ` | ||
<cv-progress | ||
:initial-step="initialStep" | ||
:vertical="vertical" | ||
:spaceEqually="spaceEqually" | ||
> | ||
<cv-progress-step | ||
id="step-1" | ||
:label="step1" | ||
:complete="completeIds.includes('step-1')" | ||
:invalid="invalidIds.includes('step-1')" | ||
:disabled="disabledIds.includes('step-1')" | ||
additionalInfo="with Meg Murry" | ||
description="time icon description" | ||
@step-clicked="onStepClicked" | ||
> | ||
<template v-slot:step-icon> | ||
<time-icon :class="[{['bx--progress__warning']:invalidIds.includes('step-1')}]"/> | ||
</template> | ||
</cv-progress-step> | ||
<cv-progress-step | ||
id="step-2" | ||
:label="step2" | ||
:complete="completeIds.includes('step-2')" | ||
:invalid="invalidIds.includes('step-2')" | ||
:disabled="disabledIds.includes('step-2')" | ||
additionalInfo="save Charles Wallace" | ||
@step-clicked="onStepClicked" | ||
> | ||
</cv-progress-step> | ||
<cv-progress-step | ||
id="step-3" | ||
:label="step3" | ||
:complete="completeIds.includes('step-3')" | ||
:invalid="invalidIds.includes('step-3')" | ||
:disabled="disabledIds.includes('step-3')" | ||
additionalInfo="save the world" | ||
@step-clicked="onStepClicked" | ||
> | ||
</cv-progress-step> | ||
<cv-progress-step | ||
id="step-4" | ||
:label="step4" | ||
:complete="completeIds.includes('step-4')" | ||
:invalid="invalidIds.includes('step-4')" | ||
:disabled="disabledIds.includes('step-4')" | ||
additionalInfo="Twins Dennys and Sandy" | ||
@step-clicked="onStepClicked" | ||
> | ||
</cv-progress-step> | ||
<cv-progress-step | ||
id="step-5" | ||
:label="step5" | ||
:complete="completeIds.includes('step-5')" | ||
:invalid="invalidIds.includes('step-5')" | ||
:disabled="disabledIds.includes('step-5')" | ||
additionalInfo="with Polyhymnia O'Keefe" | ||
@step-clicked="onStepClicked" | ||
> | ||
</cv-progress-step> | ||
</cv-progress> | ||
`; | ||
|
||
# CvProgress | ||
|
||
**Migration notes:** | ||
|
||
- The "current" icon is updated to match Carbon React | ||
- Added the property `spaceEqually` to match Carbon React | ||
- The property name `initialStep` is misleading. It is treated as the Current progress (currentIndex). | ||
- To override the default icons, provide an icon in the `step-icon` slot in the `cv-progress-step` | ||
|
||
<Canvas> | ||
<Story | ||
name="Default" | ||
parameters={{ | ||
controls: { | ||
exclude: ['default', 'template', 'step-clicked'], | ||
}, | ||
docs: { source: { code: defaultTemplate } }, | ||
}} | ||
args={{ | ||
template: defaultTemplate, | ||
steps: [ | ||
'Planet Uriel', | ||
'The Happy Medium', | ||
'The Black Thing', | ||
'Rescue Dr. Murry', | ||
'Rescue Charles Wallace', | ||
'Back to Earth', | ||
], | ||
}} | ||
argTypes={{ | ||
initialStep: { | ||
control: { | ||
type: 'number', | ||
min: -1, | ||
max: 6, | ||
}, | ||
}, | ||
}} | ||
> | ||
{Template.bind({})} | ||
</Story> | ||
</Canvas> | ||
|
||
# Slotted | ||
|
||
Use `cv-progress-step` for more control over the display. | ||
|
||
<Canvas> | ||
<Story | ||
name="slotted" | ||
parameters={{ | ||
controls: { | ||
exclude: ['default', 'template', 'step-clicked', 'steps'], | ||
}, | ||
docs: { source: { code: slotTemplate } }, | ||
}} | ||
args={{ | ||
template: slotTemplate, | ||
step1: 'A Wrinkle in Time', | ||
step2: 'A Wind in the Door', | ||
step3: 'A Swiftly Tilting Planet', | ||
step4: 'Many Waters', | ||
step5: 'An Acceptable Time', | ||
vertical: true, | ||
completeIds: [], | ||
invalidIds: [], | ||
disabledIds: [], | ||
}} | ||
argTypes={{ | ||
initialStep: { | ||
control: { | ||
type: 'number', | ||
min: -1, | ||
max: 6, | ||
}, | ||
}, | ||
disabledIds: { | ||
control: 'multi-select', | ||
options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'], | ||
}, | ||
completeIds: { | ||
control: 'multi-select', | ||
options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'], | ||
}, | ||
invalidIds: { | ||
control: 'multi-select', | ||
options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'], | ||
}, | ||
}} | ||
> | ||
{Template.bind({})} | ||
</Story> | ||
</Canvas> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
<template> | ||
<ul | ||
data-progress | ||
data-progress-current | ||
:class="[ | ||
`cv-progress ${carbonPrefix}--progress`, | ||
{ [`${carbonPrefix}--progress--space-equal`]: isEqual }, | ||
{ [`${carbonPrefix}--progress--vertical`]: vertical }, | ||
]" | ||
> | ||
<slot> | ||
<cv-progress-step | ||
v-for="(step, index) in steps" | ||
:key="`step:${index}`" | ||
:label="step" | ||
:complete="initialStep > index" | ||
@step-clicked="emit('step-clicked', { ...$event, index })" | ||
/> | ||
</slot> | ||
</ul> | ||
</template> | ||
|
||
<script setup> | ||
// noinspection ES6PreferShortImport | ||
import { carbonPrefix } from '../../global/settings'; | ||
import CvProgressStep from './CvProgressStep.vue'; | ||
import { onMounted, provide, ref } from 'vue'; | ||
const props = defineProps({ | ||
/** | ||
* Optionally specify the current step array index | ||
*/ | ||
initialStep: { type: Number, default: 0 }, | ||
/** | ||
* An array of labels for the steps. Use `cv-progress-step` components for more control over the step logic. | ||
*/ | ||
steps: Array, | ||
/** | ||
* Determines whether the ProgressIndicator should be rendered vertically. | ||
*/ | ||
vertical: { type: Boolean, default: false }, | ||
/** | ||
* Specify whether the progress steps should be split equally in size in the div | ||
*/ | ||
spaceEqually: { type: Boolean, default: false }, | ||
}); | ||
const emit = defineEmits(['step-clicked']); | ||
const isEqual = ref(props.spaceEqually && !props.vertical); | ||
provide('progress-space-equally', isEqual); | ||
const completedSteps = ref(new Set()); | ||
provide('progress-completed-steps', completedSteps); | ||
/** | ||
* @typedef ProgressStepData | ||
* @type {string} uid | ||
* @type {string} label | ||
*/ | ||
/** | ||
* @type {Ref<UnwrapRef<Array<ProgressStepData>>>} | ||
*/ | ||
const progressSteps = ref([]); | ||
provide('progress-steps', progressSteps); | ||
const currentStep = ref(''); | ||
provide('progress-current-step', currentStep); | ||
onMounted(() => { | ||
if ( | ||
props.initialStep > -1 && | ||
props.initialStep < progressSteps.value.length | ||
) { | ||
const step = progressSteps.value[props.initialStep]; | ||
currentStep.value = step.uid; | ||
} | ||
}); | ||
</script> |
Oops, something went wrong.