CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust progress stories

Browse Source
This commit is contained in:
adilallo
2026-02-02 11:41:49 -07:00
parent 9d4a5f4238
commit 6223ac5475
1 changed files with 22 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stories/Progress.stories.js
+22 -38
View File
@@ -39,6 +39,7 @@ export const Default = {
args: { args: {
progress: "3-2", progress: "3-2",
}, },
render: (args) => <Progress {...args} />,
}; };
export const AllStates = { export const AllStates = {
@@ -46,41 +47,51 @@ export const AllStates = {
render: (_args) => ( render: (_args) => (
<div className="space-y-4 w-full max-w-[600px]"> <div className="space-y-4 w-full max-w-[600px]">
<div> <div>
<p className="text-white mb-2">Progress: 1-0 (1 segment)</p> <p className="text-white mb-2">1-0</p>
<Progress {..._args} progress="1-0" /> <Progress {..._args} progress="1-0" />
</div> </div>
<div> <div>
<p className="text-white mb-2">Progress: 1-1 (1 segment + partial)</p> <p className="text-white mb-2">1-1</p>
<Progress {..._args} progress="1-1" /> <Progress {..._args} progress="1-1" />
</div> </div>
<div> <div>
<p className="text-white mb-2"> <p className="text-white mb-2">1-2</p>
Progress: 1-5 (1 segment + full partial) <Progress {..._args} progress="1-2" />
</p> </div>
<div>
<p className="text-white mb-2">1-3</p>
<Progress {..._args} progress="1-3" />
</div>
<div>
<p className="text-white mb-2">1-4</p>
<Progress {..._args} progress="1-4" />
</div>
<div>
<p className="text-white mb-2">1-5</p>
<Progress {..._args} progress="1-5" /> <Progress {..._args} progress="1-5" />
</div> </div>
<div> <div>
<p className="text-white mb-2">Progress: 2-0 (2 segments)</p> <p className="text-white mb-2">2-0</p>
<Progress {..._args} progress="2-0" /> <Progress {..._args} progress="2-0" />
</div> </div>
<div> <div>
<p className="text-white mb-2">Progress: 2-1 (2 segments + partial)</p> <p className="text-white mb-2">2-1</p>
<Progress {..._args} progress="2-1" /> <Progress {..._args} progress="2-1" />
</div> </div>
<div> <div>
<p className="text-white mb-2">Progress: 2-2 (2 segments + partial)</p> <p className="text-white mb-2">2-2</p>
<Progress {..._args} progress="2-2" /> <Progress {..._args} progress="2-2" />
</div> </div>
<div> <div>
<p className="text-white mb-2">Progress: 3-0 (3 segments - complete)</p> <p className="text-white mb-2">3-0</p>
<Progress {..._args} progress="3-0" /> <Progress {..._args} progress="3-0" />
</div> </div>
<div> <div>
<p className="text-white mb-2">Progress: 3-1 (3 segments - complete)</p> <p className="text-white mb-2">3-1</p>
<Progress {..._args} progress="3-1" /> <Progress {..._args} progress="3-1" />
</div> </div>
<div> <div>
<p className="text-white mb-2">Progress: 3-2 (3 segments - complete)</p> <p className="text-white mb-2">3-2</p>
<Progress {..._args} progress="3-2" /> <Progress {..._args} progress="3-2" />
</div> </div>
</div> </div>
@@ -93,30 +104,3 @@ export const AllStates = {
}, },
}, },
}; };
export const ProgressExamples = {
args: {},
render: () => (
<div className="space-y-4 w-full max-w-[600px]">
<div>
<p className="text-white mb-2">Early (1-0)</p>
<Progress progress="1-0" />
</div>
<div>
<p className="text-white mb-2">Middle (2-1)</p>
<Progress progress="2-1" />
</div>
<div>
<p className="text-white mb-2">Complete (3-2)</p>
<Progress progress="3-2" />
</div>
</div>
),
parameters: {
docs: {
description: {
story: "Common progress bar examples.",
},
},
},
};