Skip to content

Commit

Permalink
feature. Add contentDirection prop to StepBoxItem
Browse files Browse the repository at this point in the history
  • Loading branch information
@kkusaeng
kkusaeng committed Apr 16, 2024
1 parent 7fc6133 commit cf6a5aa
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 53 deletions.
5 changes: 5 additions & 0 deletions src/components/data-container/step-box/TStepBox.interface.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {ReactElement} from 'react';
import {TBaseProps} from '@/common/base/TBase.interface';
import {contentDirection} from '@/components';

export type TStepBoxValue = number;

Expand All @@ -17,8 +18,12 @@ export interface TStepBoxHeaderProps extends TBaseProps {
content: {stepNumber: number, label: string | ReactElement}[],
}


type ContentDirection = typeof contentDirection[keyof typeof contentDirection];

export interface TStepBoxItemProps extends TBaseProps {
children?: any,
contentDirection?: ContentDirection,
prevButtonLabel?: string,
nextButtonLabel?: string,
nextButtonDisabled?: boolean,
Expand Down
13 changes: 12 additions & 1 deletion src/components/data-container/step-box/TStepBoxItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ const TStepBoxItem = (props: TStepBoxItemProps) => {
return {};
}, [props.style]);

const contentClass = useMemo(() : string => {

return `t-step-box-item__content--direction-${props.contentDirection}`;

}, [props.contentDirection]);

// endregion


Expand All @@ -36,7 +42,9 @@ const TStepBoxItem = (props: TStepBoxItemProps) => {
style={rootStyle}
data-testid={'step-box-item-root'}
>
{props.children ?? props.children}
<div className={`t-step-box-item__content ${contentClass}`}>
{props.children ?? props.children}
</div>

<TStepBoxFooter prevButtonLabel={props.prevButtonLabel ?? stepBoxContext.prevButtonLabel}
nextButtonLabel={props.nextButtonLabel ?? stepBoxContext.nextButtonLabel}
Expand All @@ -53,6 +61,9 @@ const TStepBoxItem = (props: TStepBoxItemProps) => {
};

TStepBoxItem.displayName = 'TStepBoxItem';
TStepBoxItem.defaultProps = {
contentDirection: 'top-bottom',
};


export default TStepBoxItem;
104 changes: 59 additions & 45 deletions src/styles/component/data-container/step-box/TStepBox.scss
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,80 @@

.t-step-box-header {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 40px 0;
margin-bottom: calc($t-spacing-40);

.t-step-box-header__connector {
height: 2px;
flex: 0 1 140px;
background: $t-blue-gray-color-3;


&.t-step-box-header__connector--prev, &.t-step-box-header__connector--current {
background: $t-primary-color;
}
}
.t-step-box {

.t-step-box-header__step {
.t-step-box-header {
display: flex;
align-items: center;
gap: $t-spacing-16;
position: relative;
justify-content: center;
height: 48px;
padding: 40px 0;
margin-bottom: calc($t-spacing-40);

.t-step-box-header__connector {
height: 2px;
flex: 0 1 140px;
background: $t-blue-gray-color-3;


.t-step-box-header__step__number {
border-radius: 50%;
width: 32px;
height: 32px;
&.t-step-box-header__connector--prev, &.t-step-box-header__connector--current {
background: $t-primary-color;
}
}

.t-step-box-header__step {
display: flex;
align-items: center;
justify-content: center;
gap: $t-spacing-16;
position: relative;
@include typo-element-1;

.t-step-box-header__step__label {
position: absolute;
top: calc($t-spacing-32 + $t-spacing-12);
@include typo-subtitle-1;
width: max-content;

.t-step-box-header__step__number {
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
@include typo-element-1;

.t-step-box-header__step__label {
position: absolute;
top: calc($t-spacing-32 + $t-spacing-12);
@include typo-subtitle-1;
width: max-content;
}

&.t-step-box-header__step__number--prev {background: $t-primary-color;}
&.t-step-box-header__step__number--current {outline: 2px solid $t-primary-color;color: $t-primary-color;}
&.t-step-box-header__step__number--next {outline: 2px solid $t-blue-gray-color-3;color: $t-gray-color-4;}
}

&.t-step-box-header__step__number--prev {background: $t-primary-color;}
&.t-step-box-header__step__number--current {outline: 2px solid $t-primary-color;color: $t-primary-color;}
&.t-step-box-header__step__number--next {outline: 2px solid $t-blue-gray-color-3;color: $t-gray-color-4;}
}

}

}
.t-step-box-item {

.t-step-box-footer {
height: 48px;
display: flex;
align-items: center;
margin-top: $t-spacing-20;
.t-step-box-item__content {
display: flex;
gap: $t-spacing-20;

.t-step-box-footer__left-action {
flex: 1 0 auto;
&.t-step-box-item__content--direction-top-bottom { flex-direction: column; }
&.t-step-box-item__content--direction-left-right { flex-direction: row; }
}
}
.t-step-box-footer__right-action {
flex: 0 1 auto;

.t-step-box-footer {
height: 48px;
display: flex;
align-items: center;
margin-top: $t-spacing-20;

.t-step-box-footer__left-action {
flex: 1 0 auto;
}
.t-step-box-footer__right-action {
flex: 0 1 auto;
}
}
}
63 changes: 56 additions & 7 deletions stories/components/data-container/step-box/TStepBox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,62 @@ const Template = (args) => {
stepLabels={['설치환경 선택', '스택 템플릿 선택', '속성 입력', '정책 템플릿 선택', '정책 선택', '확인 및 생성']}
{...args}
>
<TStepBoxItem><div>Step 1 Content</div></TStepBoxItem>
<TStepBoxItem><div>Step 2 Content</div></TStepBoxItem>
<TStepBoxItem><div>Step 3 Content</div></TStepBoxItem>
<TStepBoxItem><div>Step 4 Content</div></TStepBoxItem>
<TStepBoxItem><div>Step 5 Content</div></TStepBoxItem>
<TStepBoxItem><div>Step 6 Content</div></TStepBoxItem>

<TStepBoxItem contentDirection={'top-bottom'}>
<div>Step 1-1 Content</div>
<div>Step 1-2 Content</div>
</TStepBoxItem>
<TStepBoxItem contentDirection={'top-bottom'}>
<div>Step 2-1 Content</div>
<div>Step 2-2 Content</div>
</TStepBoxItem>
<TStepBoxItem contentDirection={'top-bottom'}>
<div>Step 3-1 Content</div>
<div>Step 3-2 Content</div>
</TStepBoxItem>
<TStepBoxItem contentDirection={'top-bottom'}>
<div>Step 4-1 Content</div>
<div>Step 4-2 Content</div>
</TStepBoxItem>
<TStepBoxItem contentDirection={'top-bottom'}>
<div>Step 5-1 Content</div>
<div>Step 5-2 Content</div>
</TStepBoxItem>
<TStepBoxItem contentDirection={'top-bottom'}>
<div>Step 6-1 Content</div>
<div>Step 6-2 Content</div>
</TStepBoxItem>
</TStepBox>
<br/>
<TStepBox
value={stepNumber}
onChange={setStepNumber}
stepLabels={['설치환경 선택', '스택 템플릿 선택', '속성 입력', '정책 템플릿 선택', '정책 선택', '확인 및 생성']}
{...args}
>
<TStepBoxItem contentDirection={'left-right'}>
<div>Step 1-1 Content</div>
<div>Step 1-2 Content</div>
</TStepBoxItem>
<TStepBoxItem contentDirection={'left-right'}>
<div>Step 2-1 Content</div>
<div>Step 2-2 Content</div>
</TStepBoxItem>
<TStepBoxItem contentDirection={'left-right'}>
<div>Step 3-1 Content</div>
<div>Step 3-2 Content</div>
</TStepBoxItem>
<TStepBoxItem contentDirection={'left-right'}>
<div>Step 4-1 Content</div>
<div>Step 4-2 Content</div>
</TStepBoxItem>
<TStepBoxItem contentDirection={'left-right'}>
<div>Step 5-1 Content</div>
<div>Step 5-2 Content</div>
</TStepBoxItem>
<TStepBoxItem contentDirection={'left-right'}>
<div>Step 6-1 Content</div>
<div>Step 6-2 Content</div>
</TStepBoxItem>
</TStepBox>
</>);
};
Expand Down

0 comments on commit cf6a5aa

Please sign in to comment.