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.

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

[Feature] Stepper 컴포넌트를 구현해요. #65

Merged
merged 16 commits into from
Jul 5, 2024
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
feature: ProgressBar Label 개발
  • Loading branch information
eugene028 committed Jun 28, 2024
commit 5c9a377564a23484d19677c8f24a4d7497130501
25 changes: 19 additions & 6 deletions packages/wow-ui/src/components/ProgressBar/ProgressBar.stories.tsx
Original file line number Diff line number Diff line change
@@ -14,22 +14,35 @@ const meta = {
description: "프로그래스 바의 현재 스텝을 나타냅니다.",
table: {
type: { summary: "number" },
defaultValue: { summary: "" },
},
control: {
type: "number",
},
},
labels: {
description: "프로그래스 바 하단에 나타낼 라벨의 배열을 나타냅니다.",
table: {
type: { summary: "LabelType[]" },
},
},
eugene028 marked this conversation as resolved.
Show resolved Hide resolved
maxStep: {
description: "프로그래스 바가 가질 수 있는 최대 스텝을 나타냅니다.",
table: {
type: { summary: "number" },
defaultValue: { summary: "" },
},
control: {
type: "number",
},
},
width: {
description: "프로그래스 바의 너비를 지정합니다.",
table: {
type: { summary: "number" },
},
control: {
type: "text",
},
},
},
} satisfies Meta<typeof ProgressBar>;

@@ -48,10 +61,10 @@ export const ProgressBarWithMarkers: Story = {
args: {
step: 1,
maxStep: 3,
markers: [
{ value: 0, label: "Label" },
{ value: 1, label: "Label" },
{ value: 2, label: "Label" },
labels: [
{ value: 1, text: "Label" },
{ value: 2, text: "Label" },
{ value: 3, text: "Label" },
],
},
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { cva } from "@styled-system/css";
import { styled } from "@styled-system/jsx";

import { calcPercent } from "@/utils/calcPercent";

const ProgressBarCircle = ({
maxStep,
circleNumber,
@@ -10,10 +12,6 @@ const ProgressBarCircle = ({
circleNumber: number;
currentStep: number;
}) => {
const calcPercent = (maxValue: number, value: number) => {
return (value / (maxValue - 1)) * 100;
};

const checkCurrentCircleStatus = (
circleNumber: number,
currentStep: number
71 changes: 71 additions & 0 deletions packages/wow-ui/src/components/ProgressBar/ProgressBarLabel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { cva } from "@styled-system/css";
import { styled } from "@styled-system/jsx";

import { calcPercent } from "@/utils/calcPercent";

export type LabelType = {
value: number;
text: string;
};
eugene028 marked this conversation as resolved.
Show resolved Hide resolved
const ProgressBarLabel = ({
label,
maxStep,
currentStep,
}: {
label: LabelType;
maxStep: number;
currentStep: number;
}) => {
const { value, text } = label;

const checkCurrentMarkerStatus = (
markerValue: number,
currentStep: number
) => {
if (currentStep === markerValue) return "currentStep";
else if (currentStep > markerValue) return "checkedStep";
else return "default";
};

return (
<styled.div
key={`${text}-marker`}
marginTop="14px"
pointerEvents="none"
position="absolute"
transform="translateX(-50%)"
style={{
left: `${calcPercent(maxStep, value - 1)}%`,
}}
>
<styled.span
className={progressBarLabelStyle({
status: checkCurrentMarkerStatus(label.value, currentStep),
})}
>
{text}
</styled.span>
</styled.div>
);
};

export default ProgressBarLabel;

const progressBarLabelStyle = cva({
base: {
textStyle: "label2",
},
variants: {
status: {
default: {
color: "sub",
},
checkedStep: {
color: "primary",
},
currentStep: {
color: "textBlack",
},
},
},
});
39 changes: 0 additions & 39 deletions packages/wow-ui/src/components/ProgressBar/ProgressBarMarker.tsx

This file was deleted.

29 changes: 20 additions & 9 deletions packages/wow-ui/src/components/ProgressBar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
import { styled } from "@styled-system/jsx";

import ProgressBarCircle from "@/components/ProgressBar/ProgressBarCircle";
import type { MarkerType } from "@/components/ProgressBar/ProgressBarMarker";
import ProgressBarMarker from "@/components/ProgressBar/ProgressBarMarker";
import type { LabelType } from "@/components/ProgressBar/ProgressBarLabel";
import ProgressBarLabel from "@/components/ProgressBar/ProgressBarLabel";

export interface ProgressBarProps {
step: number;
maxStep?: number;
markers?: MarkerType[];
labels?: LabelType[];
width?: number;
ghdtjgus76 marked this conversation as resolved.
Show resolved Hide resolved
}

const ProgressBar = ({ step, maxStep = 3, markers }: ProgressBarProps) => {
const ProgressBar = ({
step,
maxStep = 3,
labels,
width,
}: ProgressBarProps) => {
const fillProgressBar = (maxValue: number, value: number) => {
const ratio = (value - 1) / (maxValue - 1);
return ratio > 1 ? "100%" : `${ratio * 100}%`;
@@ -21,15 +27,16 @@ const ProgressBar = ({ step, maxStep = 3, markers }: ProgressBarProps) => {
return (
<div
aria-valuemax={maxStep}
aria-valuemin={0}
aria-valuemin={1}
aria-valuetext={String(step)}
role="progressbar"
>
<styled.div
backgroundColor="outline"
height="1.2px"
minWidth="17.375rem"
position="relative"
width="17.375rem"
style={{ width: width && width > 278 ? `${width}px` : "17.375rem" }}
ghdtjgus76 marked this conversation as resolved.
Show resolved Hide resolved
>
<styled.div
backgroundColor="primary"
@@ -45,14 +52,18 @@ const ProgressBar = ({ step, maxStep = 3, markers }: ProgressBarProps) => {
/>
))}
</styled.div>
{markers && (
{labels && (
<styled.div
pointerEvents="none"
position="relative"
userSelect="none"
>
{markers.map((marker) => (
<ProgressBarMarker marker={marker} maxStep={maxStep} />
{labels.map((label) => (
<ProgressBarLabel
currentStep={step}
label={label}
maxStep={maxStep}
/>
))}
</styled.div>
)}
3 changes: 3 additions & 0 deletions packages/wow-ui/src/utils/calcPercent.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const calcPercent = (maxValue: number, value: number) => {
return (value / (maxValue - 1)) * 100;
};
Loading