Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 5378518

Browse files
AljulluAljullu
authored
Update Checkout step progress indicator design (#2649)
1 parent 8bcfde9 commit 5378518

File tree

4 files changed

+88
-41
lines changed

4 files changed

+88
-41
lines changed

‎assets/js/base/components/cart-checkout/form-step/index.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,16 @@ const FormStep = ( {
4848
title={ title }
4949
stepHeadingContent={ stepHeadingContent() }
5050
/>
51-
{ !! description && (
52-
<p className="wc-block-checkout-step__description">
53-
{ description }
54-
</p>
55-
) }
56-
<div className="wc-block-checkout-step__content">{ children }</div>
51+
<div className="wc-block-checkout-step__container">
52+
{ !! description && (
53+
<p className="wc-block-checkout-step__description">
54+
{ description }
55+
</p>
56+
) }
57+
<div className="wc-block-checkout-step__content">
58+
{ children }
59+
</div>
60+
</div>
5761
</fieldset>
5862
);
5963
};

‎assets/js/base/components/cart-checkout/form-step/style.scss‎

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
$circle-size: 24px;
2-
$line-offset-from-circle-size: 8px;
3-
41
.wc-block-checkout-form {
52
counter-reset: checkout-step;
63
}
74

85
.wc-block-checkout-form fieldset.wc-block-checkout-step {
96
position: relative;
107
border: none;
11-
padding: 0 0 $gap-larger $gap-larger;
8+
padding: 0 0 0 $gap-larger;
129
background: none;
1310
margin: 0;
1411

@@ -17,6 +14,14 @@ $line-offset-from-circle-size: 8px;
1714
}
1815
}
1916

17+
.wc-block-checkout-step__container {
18+
position: relative;
19+
}
20+
21+
.wc-block-checkout-step__content {
22+
padding-bottom: $gap-larger;
23+
}
24+
2025
.wc-block-checkout-form fieldset.wc-block-checkout-step:disabled {
2126
opacity: 0.6;
2227
}
@@ -28,11 +33,11 @@ $line-offset-from-circle-size: 8px;
2833
flex-wrap: wrap;
2934
margin-bottom: $gap-smaller;
3035
position: relative;
36+
}
3137

32-
.wc-block-checkout-step__title {
33-
line-height: 1.5;
34-
margin: 0 $gap-small 0 0;
35-
}
38+
.wc-block-checkout-step__title {
39+
line-height: 1.5;
40+
margin: 0 $gap-small 0 0;
3641
}
3742

3843
.wc-block-checkout-step__heading-content {
@@ -54,37 +59,29 @@ $line-offset-from-circle-size: 8px;
5459
margin-bottom: $gap;
5560
}
5661

57-
.wc-block-checkout-step::before {
58-
@include font-size(small);
62+
.wc-block-checkout-step__title::before {
63+
@include reset-box();
64+
background: transparent;
5965
counter-increment: checkout-step;
60-
content: counter(checkout-step);
61-
content: counter(checkout-step) / "";
66+
content: "\00a0" counter(checkout-step) ".";
67+
content: "\00a0" counter(checkout-step) "." / "";
6268
position: absolute;
63-
width: $circle-size;
64-
height: $circle-size;
65-
left: 0;
69+
width: $gap-larger;
70+
left: -$gap-larger/2;
6671
top: 0;
67-
background: $gray-20;
68-
color: $white;
69-
line-height: $circle-size;
7072
text-align: center;
71-
border-radius: $circle-size / 2;
72-
box-sizing: content-box;
73+
transform: translateX(-50%);
7374
}
7475

75-
// because themes can register different background colors, we can't always
76-
// relay on using white border to offest the step left line,
77-
.wc-block-checkout-step::after {
76+
.wc-block-checkout-step__container::after {
7877
content: "";
79-
// 1 Circle size + offset of the first circle and next circle.
80-
height: calc(100% - #{$circle-size + $line-offset-from-circle-size * 2});
81-
width: 1px;
82-
background-color: $gray-10;
78+
height: calc(100% - #{$gap-smaller});
79+
border-left: 1px solid;
8380
position: absolute;
84-
left: $circle-size/2;
85-
top: $circle-size + $line-offset-from-circle-size;
81+
left: -$gap-larger/2;
82+
top: 0;
8683
}
8784

88-
.wc-block-checkout-step:last-child::after {
85+
.wc-block-checkout-step:last-child .wc-block-checkout-step__container::after {
8986
content: none;
9087
}

‎assets/js/blocks/cart-checkout/checkout/style.scss‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,25 @@
9090
width: 150px;
9191
}
9292
.wc-block-checkout-form {
93-
fieldset span {
93+
.wc-block-checkout-step__title {
94+
@include placeholder();
95+
@include force-content();
96+
display: block;
97+
width: 10em;
98+
99+
&::before {
100+
@include placeholder();
101+
@include force-content();
102+
border-radius: 50%;
103+
display: block;
104+
height: 100%;
105+
width: 1.5em;
106+
}
107+
}
108+
.wc-block-checkout-step__container::after {
109+
@include placeholder();
110+
}
111+
.wc-block-checkout-step__content > span {
94112
@include placeholder();
95113
@include force-content();
96114
display: block;

‎src/BlockTypes/Checkout.php‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -176,16 +176,44 @@ protected function get_skeleton() {
176176
<div class="wc-block-components-express-checkout-continue-rule"><span></span></div>
177177
<form class="wc-block-checkout-form">
178178
<fieldset class="wc-block-checkout__contact-fields wc-block-checkout-step">
179-
<span></span>
179+
<div class="wc-block-checkout-step__heading">
180+
<div class="wc-block-checkout-step__title"></div>
181+
</div>
182+
<div class="wc-block-checkout-step__container">
183+
<div class="wc-block-checkout-step__content">
184+
<span></span>
185+
</div>
186+
</div>
180187
</fieldset>
181188
<fieldset class="wc-block-checkout__contact-fields wc-block-checkout-step">
182-
<span></span>
189+
<div class="wc-block-checkout-step__heading">
190+
<div class="wc-block-checkout-step__title"></div>
191+
</div>
192+
<div class="wc-block-checkout-step__container">
193+
<div class="wc-block-checkout-step__content">
194+
<span></span>
195+
</div>
196+
</div>
183197
</fieldset>
184198
<fieldset class="wc-block-checkout__contact-fields wc-block-checkout-step">
185-
<span></span>
199+
<div class="wc-block-checkout-step__heading">
200+
<div class="wc-block-checkout-step__title"></div>
201+
</div>
202+
<div class="wc-block-checkout-step__container">
203+
<div class="wc-block-checkout-step__content">
204+
<span></span>
205+
</div>
206+
</div>
186207
</fieldset>
187208
<fieldset class="wc-block-checkout__contact-fields wc-block-checkout-step">
188-
<span></span>
209+
<div class="wc-block-checkout-step__heading">
210+
<div class="wc-block-checkout-step__title"></div>
211+
</div>
212+
<div class="wc-block-checkout-step__container">
213+
<div class="wc-block-checkout-step__content">
214+
<span></span>
215+
</div>
216+
</div>
189217
</fieldset>
190218
</form>
191219
</div>

0 commit comments

Comments
 (0)