@faststore/core 3.88.6 → 3.89.0

package/src/components/account/orders/MyAccountOrderDetails/MyAccountStatusCard/styles.scss

@@ -6,7 +6,7 @@
   // Default properties
   --fs-order-status-card-gap                     : var(--fs-spacing-1);
   --fs-order-status-card-padding                 : var(--fs-spacing-3) var(--fs-spacing-2);
-  --fs-order-status-card-bkg-color               : var(--fs-color-neutral-1);
+  --fs-order-status-card-bkg-color               : rgb(0 0 0 / 3%);
   --fs-order-status-card-border-radius           : var(--fs-border-radius-medium);
 
   // Step Icon
@@ -17,8 +17,8 @@
   --fs-order-status-step-icon-margin            : var(--fs-spacing-0);
 
   // Step Icon States
-  --fs-order-status-step-icon-completed-color   : #08a822;
-  --fs-order-status-step-icon-failed-color      : #5c5c5c;
+  --fs-order-status-step-icon-completed-color   : var(--fs-color-success-2);
+  --fs-order-status-step-icon-failed-color      : var(--fs-color-neutral-5);
   --fs-order-status-step-icon-canceled-color     : var(--fs-color-neutral-1);
   --fs-order-status-step-icon-loading-color     : var(--fs-color-neutral-4);
   --fs-order-status-step-icon-text-color        : var(--fs-color-neutral-0);
@@ -77,6 +77,10 @@
     width: 100%;
     padding: var(--fs-order-status-card-padding);
 
+    &:first-child [data-fs-shipping-connector] {
+      display: none;
+    }
+
     &[data-fs-shipping-status="loading"] {
       z-index: -1;
       background-color: var(--fs-order-status-card-bkg-color);
@@ -104,6 +108,7 @@
       width: var(--fs-order-status-step-icon-size);
       height: var(--fs-order-status-step-icon-size);
       margin: var(--fs-order-status-step-icon-margin);
+      border-radius: var(--fs-order-status-step-icon-border-radius);
 
       [data-fs-icon] {
         color: var(--fs-color-neutral-0);
@@ -111,7 +116,6 @@
 
       &[data-fs-shipping-step-completed] {
         background-color: var(--fs-order-status-step-icon-completed-color);
-        border-radius: var(--fs-order-status-step-icon-border-radius);
 
         [class*="icon"] {
           color: var(--fs-order-status-step-icon-text-color);
@@ -120,7 +124,6 @@
 
       &[data-fs-shipping-step-failed] {
         background-color: var(--fs-order-status-step-icon-failed-color);
-        border-radius: var(--fs-order-status-step-icon-border-radius);
 
         [class*="icon"] {
           color: var(--fs-order-status-step-icon-text-color);
@@ -133,17 +136,11 @@
 
       &[data-fs-shipping-step-loading] {
         background-color: var(--fs-order-status-step-icon-loading-color);
-        border-radius: var(--fs-order-status-step-icon-border-radius);
 
         [class*="icon"] {
           color: var(--fs-order-status-step-icon-text-color);
         }
       }
-
-      &:not([data-fs-shipping-step-completed]):not([data-fs-shipping-step-loading]) {
-        border: var(--fs-order-status-step-icon-border);
-        border-radius: var(--fs-order-status-step-icon-border-radius);
-      }
     }
 
     [data-fs-shipping-step-content] {
@@ -193,8 +190,19 @@
 
     [data-fs-shipping-connector] {
       position: absolute;
+      bottom: calc(50% + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-connector-spacing));
+      left: calc(var(--fs-spacing-2) + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-step-icon-margin));
       background-color: var(--fs-order-status-connector-color);
 
+      @include media(">=notebook") {
+        top: calc(1rem + var(--fs-order-status-step-icon-margin) + var(--fs-order-status-step-icon-half-size));
+        right: calc(50% + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-card-gap));
+        bottom: auto;
+        left: auto;
+        width: 100%;
+        height: var(--fs-border-width);
+      }
+
       &[data-fs-shipping-connector-status="completed"] {
         background-color: var(--fs-order-status-connector-completed-color);
       }
@@ -213,7 +221,15 @@
     }
   }
 
+  [data-fs-shipping-status="completed"] + [data-fs-shipping-step]:not([data-fs-shipping-status="completed"]) {
+    [data-fs-shipping-connector] { background-color: var(--fs-color-neutral-4); }
+  }
+
   [data-fs-shipping-status="not-started"] {
+    [data-fs-shipping-step-icon]:not([data-fs-shipping-step-canceled]) {
+      border: var(--fs-order-status-step-icon-border);
+    }
+
     [data-fs-shipping-step-label] {
       color: var(--fs-order-status-step-not-started-color);
     }

package/src/components/account/orders/MyAccountOrderDetails/MyAccountStatusCard/useConnectorPositioning.ts

@@ -45,19 +45,11 @@ export function useConnectorPositioning(
       if (isDesktop) {
         const containerGap = calculateContainerGap()
         connectors.forEach((connector) => {
-          connector.style.top =
-            'calc(1rem + var(--fs-order-status-step-icon-margin) + var(--fs-order-status-step-icon-half-size))'
-          connector.style.left =
-            'calc(50% + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-card-gap))'
           connector.style.width = `calc(((50% - var(--fs-order-status-step-icon-half-size) - var(--fs-order-status-card-gap)) * 2) + ${containerGap}px)`
           connector.style.height = 'var(--fs-border-width)'
         })
       } else {
         connectors.forEach((connector) => {
-          connector.style.top =
-            'calc(50% + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-connector-spacing))'
-          connector.style.left =
-            'calc(var(--fs-spacing-2) + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-step-icon-margin))'
           connector.style.width = 'var(--fs-border-width)'
           connector.style.height =
             'calc((50% - var(--fs-order-status-step-icon-half-size)) + var(--fs-order-status-card-gap) + (50% - var(--fs-order-status-step-icon-half-size)) - (var(--fs-order-status-connector-spacing) * 2))'

package/src/components/account/orders/MyAccountOrderDetails/section.module.scss

@@ -40,8 +40,6 @@
   // Structural Styles
   // --------------------------------------------------------
 
-  padding: var(--fs-order-details-padding);
-
   @include media (">=notebook") {
     --fs-order-details-padding                      : 0;
   }
@@ -73,6 +71,7 @@
       [data-fs-order-details-header-back-button] {
         flex-shrink: 0;
         margin-top: calc(var(--fs-spacing-2) * -1); // Align the back button with the title
+        margin-left: calc(var(--fs-spacing-2) * -1); // Align the back button with the content
 
         @include media(">=notebook") {
           margin-top: calc(var(--fs-spacing-1) * -1); // Align the back button with the title
@@ -96,7 +95,7 @@
         font-weight: var(--fs-order-details-header-weight);
         line-height: var(--fs-order-details-header-line-height);
 
-        @include truncate-title(1);
+        @include truncate-title(2);
       }
     }
   }

package/src/components/account/profile/profile.module.scss

@@ -1,89 +1,5 @@
 @layer components {
   .section {
-    [data-fs-account-profile-header] {
-      padding-block: var(--fs-spacing-6);
-      padding-inline: var(--fs-spacing-11);
-    }
-
-    [data-fs-account-profile-body] {
-      padding-inline: var(--fs-spacing-11);
-    }
-
-    [data-fs-account-profile-title] {
-      font-family: var(--fs-text-face-title);
-      font-size: var(--fs-text-size-4);
-      font-weight: var(--fs-text-weight-semibold);
-    }
-
-    [data-fs-account-profile-table] {
-      display: grid;
-      grid-template-columns: minmax(11.25rem, auto) 1fr;
-      width: 100%;
-      border-spacing: 0;
-      border-collapse: collapse;
-    }
-
-    [data-fs-account-profile-table-body] {
-      display: contents;
-      gap: var(--fs-spacing-1);
-    }
-
-    [data-fs-account-profile-table-row] {
-      display: contents;
-
-      &:last-child {
-        > [data-fs-account-profile-table-heading] {
-          border-bottom: none;
-        }
-
-        > [data-fs-account-profile-table-data] {
-          border-bottom: none;
-        }
-      }
-    }
-
-    [data-fs-account-profile-table-heading] {
-      padding-block: var(--fs-spacing-4);
-      font-family: var(--fs-text-face-body);
-      font-size: var(--fs-text-size-2);
-      font-weight: var(--fs-text-weight-regular);
-      color: var(--fs-color-text-light);
-      text-align: left;
-      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
-    }
-
-    [data-fs-account-profile-table-data] {
-      padding-block: var(--fs-spacing-4);
-      padding-inline: var(--fs-spacing-1);
-      font-family: var(--fs-text-face-body);
-      font-size: var(--fs-text-size-2);
-      font-weight: var(--fs-text-weight-regular);
-      color: var(--fs-color-text);
-      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
-    }
-
-    @include media("<notebook") {
-      [data-fs-account-profile-header] {
-        padding-inline: var(--fs-spacing-4);
-      }
-
-      [data-fs-account-profile-body] {
-        padding-inline: var(--fs-spacing-4);
-      }
-
-      [data-fs-account-profile-table] {
-        grid-template-columns: 1fr;
-      }
-
-      [data-fs-account-profile-table-heading] {
-        padding-block: var(--fs-spacing-4) 0;
-        border-bottom: none;
-      }
-
-      [data-fs-account-profile-table-data] {
-        padding-block: var(--fs-spacing-1) var(--fs-spacing-4);
-        padding-inline: 0;
-      }
-    }
+    @import "../components/MyAccountTable/styles.scss";
   }
 }

package/src/components/account/profile/profile.tsx

@@ -1,3 +1,6 @@
+import { Link } from '@faststore/ui'
+import AccountTable from '../components/MyAccountTable'
+import AccountHeader from '../components/MyAccountHeader'
 import { strings } from './i18n'
 import styles from './profile.module.scss'
 import { useDateFormatter } from './use-date-formatter'
@@ -25,38 +28,28 @@ export function ProfileSection({
 
   return (
     <div data-fs-account-profile-section className={styles.section}>
-      <header data-fs-account-profile-header>
-        <h1 data-fs-account-profile-title>{strings.profile}</h1>
-      </header>
+      <AccountHeader pageTitle={strings.profile} />
       <section data-fs-account-profile-body>
-        <table data-fs-account-profile-table>
-          <tbody data-fs-account-profile-table-body>
-            <tr data-fs-account-profile-table-row>
-              <th data-fs-account-profile-table-heading>{strings.name}</th>
-              <td data-fs-account-profile-table-data>{profile?.name}</td>
-            </tr>
-            <tr data-fs-account-profile-table-row>
-              <th data-fs-account-profile-table-heading>{strings.email}</th>
-              <td data-fs-account-profile-table-data>
-                <a href={`mailto:${profile?.email}`}>{profile?.email}</a>
-              </td>
-            </tr>
-            <tr data-fs-account-profile-table-row>
-              <th data-fs-account-profile-table-heading>{strings.id}</th>
-              <td data-fs-account-profile-table-data>{profile?.id}</td>
-            </tr>
-            {profile.createdDate && (
-              <tr data-fs-account-profile-table-row>
-                <th data-fs-account-profile-table-heading>
-                  {strings.createdDate}
-                </th>
-                <td data-fs-account-profile-table-data>
-                  {formatStringDate(profile.createdDate)}
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
+        <AccountTable
+          rows={[
+            { heading: strings.name, data: profile?.name },
+            {
+              heading: strings.email,
+              data: (
+                <Link href={`mailto:${profile?.email}`}>{profile?.email}</Link>
+              ),
+            },
+            { heading: strings.id, data: profile?.id },
+            ...(profile?.createdDate
+              ? [
+                  {
+                    heading: strings.createdDate,
+                    data: formatStringDate(profile.createdDate),
+                  },
+                ]
+              : []),
+          ]}
+        />
       </section>
     </div>
   )

package/src/components/account/security/SecurityDrawer.tsx

@@ -133,100 +133,98 @@ export const SecurityDrawer = ({
       </SlideOverHeader>
 
       <div data-fs-security-drawer-body>
-        <div data-fs-security-drawer-body-form>
-          <div data-fs-security-drawer-body-current-password>
-            <Input
-              data-fs-security-drawer-input
-              id="security-drawer-input-current-password"
-              type={showCurrentPassword ? 'text' : 'password'}
-              placeholder="Current Password"
-              inputMode="text"
-              value={currentPassword}
-              onChange={(e) => {
-                setFormError(null)
-                setCurrentPassword(e.target.value)
-              }}
-            />
-            <IconButton
-              data-fs-security-drawer-input-password-toggle
-              size="small"
-              aria-label="Show Password"
-              onClick={() => setShowCurrentPassword((prev) => !prev)}
-              icon={
-                showCurrentPassword ? (
-                  <Icon name="EyeSlash" />
-                ) : (
-                  <Icon name="Eye" />
-                )
-              }
-            />
-          </div>
+        <div data-fs-security-drawer-body-password>
+          <Input
+            data-fs-security-drawer-input
+            id="security-drawer-input-current-password"
+            type={showCurrentPassword ? 'text' : 'password'}
+            placeholder="Current Password"
+            inputMode="text"
+            value={currentPassword}
+            onChange={(e) => {
+              setFormError(null)
+              setCurrentPassword(e.target.value)
+            }}
+          />
+          <IconButton
+            data-fs-security-drawer-input-password-toggle
+            size="small"
+            aria-label="Show Password"
+            onClick={() => setShowCurrentPassword((prev) => !prev)}
+            icon={
+              showCurrentPassword ? (
+                <Icon name="EyeSlash" />
+              ) : (
+                <Icon name="Eye" />
+              )
+            }
+          />
+        </div>
 
-          <div data-fs-security-drawer-body-new-password>
-            <Input
-              data-fs-security-drawer-input
-              id="security-drawer-input-new-password"
-              type={showNewPassword ? 'text' : 'password'}
-              placeholder="New Password"
-              inputMode="text"
-              value={newPassword}
-              onChange={(e) => {
-                setFormError(null)
-                setNewPassword(e.target.value)
-              }}
-            />
-            <IconButton
-              data-fs-security-drawer-input-password-toggle
-              size="small"
-              aria-label="Show Password"
-              onClick={() => setShowNewPassword((prev) => !prev)}
-              icon={
-                showNewPassword ? <Icon name="EyeSlash" /> : <Icon name="Eye" />
-              }
+        <div data-fs-security-drawer-body-password>
+          <Input
+            data-fs-security-drawer-input
+            id="security-drawer-input-new-password"
+            type={showNewPassword ? 'text' : 'password'}
+            placeholder="New Password"
+            inputMode="text"
+            value={newPassword}
+            onChange={(e) => {
+              setFormError(null)
+              setNewPassword(e.target.value)
+            }}
+          />
+          <IconButton
+            data-fs-security-drawer-input-password-toggle
+            size="small"
+            aria-label="Show Password"
+            onClick={() => setShowNewPassword((prev) => !prev)}
+            icon={
+              showNewPassword ? <Icon name="EyeSlash" /> : <Icon name="Eye" />
+            }
+          />
+        </div>
+
+        {formError && (
+          <div data-fs-security-drawer-error>
+            <Icon
+              width={20}
+              height={20}
+              name="CircleWavyWarning"
+              data-fs-security-drawer-error-icon
             />
+            <span>{formError}</span>
           </div>
-
-          {formError && (
-            <div data-fs-security-drawer-error>
-              <Icon
-                width={20}
-                height={20}
-                name="CircleWavyWarning"
-                data-fs-security-drawer-error-icon
-              />
-              <span>{formError}</span>
-            </div>
-          )}
-
-          {newPassword.length > 0 && (
-            <div data-fs-security-drawer-input-password-rules-container>
-              <p data-fs-security-drawer-input-password-rules-title>
-                Your password must have at least:
-              </p>
-
-              <ul data-fs-security-drawer-input-password-rules-list>
-                {newPasswordValidations.map((rule, index) => (
-                  <li
-                    key={index}
-                    data-fs-security-drawer-input-password-rule-item
-                    data-status={rule.isValid ? 'success' : 'error'}
-                  >
-                    <Icon
-                      name={rule.isValid ? 'CheckCircle' : 'XCircle'}
-                      width={20}
-                      height={20}
-                    />
-                    {rule.label}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
+        )}
+
+        {newPassword.length > 0 && (
+          <div data-fs-security-drawer-password-rules-container>
+            <p data-fs-security-drawer-password-rules-title>
+              Your password must have at least:
+            </p>
+
+            <ul data-fs-security-drawer-password-rules-list>
+              {newPasswordValidations.map((rule, index) => (
+                <li
+                  key={index}
+                  data-fs-security-drawer-password-rule-item
+                  data-status={rule.isValid ? 'success' : 'error'}
+                >
+                  <Icon
+                    name={rule.isValid ? 'CheckCircle' : 'XCircle'}
+                    width={20}
+                    height={20}
+                  />
+                  {rule.label}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
       </div>
 
       <footer data-fs-security-drawer-footer>
-        <Button variant="tertiary" onClick={handleClose}>
+        <Button variant="secondary" onClick={handleClose}>
           Cancel
         </Button>
 

package/src/components/account/security/SecuritySection.tsx

@@ -1,6 +1,9 @@
 import { useState } from 'react'
 import { Button } from '@faststore/ui'
 
+import AccountTable from '../components/MyAccountTable'
+import AccountHeader from '../components/MyAccountHeader'
+
 import { SecurityDrawer } from './SecurityDrawer'
 import styles from './styles.module.scss'
 
@@ -23,28 +26,28 @@ export const SecuritySection = ({
       )}
 
       <section data-fs-securiry-section className={styles.section}>
-        <header data-fs-security-header>
-          <h1 data-fs-security-title>Security</h1>
-        </header>
+        <AccountHeader pageTitle="Security" />
 
         <div data-fs-security-container>
-          <table data-fs-security-table>
-            <tbody data-fs-security-table-body>
-              <tr data-fs-security-table-row>
-                <th data-fs-security-table-heading>Password</th>
-                <td data-fs-security-table-data>
-                  <span data-fs-security-table-data-text>••••••••••</span>
-                  <Button
-                    variant="tertiary"
-                    data-fs-security-table-action-button
-                    onClick={() => setIsDrawerOpen(true)}
-                  >
-                    Reset password
-                  </Button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <AccountTable
+            rows={[
+              {
+                heading: 'Password',
+                data: (
+                  <>
+                    <span data-fs-security-table-data-text>••••••••••</span>
+                    <Button
+                      variant="tertiary"
+                      data-fs-security-table-action-button
+                      onClick={() => setIsDrawerOpen(true)}
+                    >
+                      Reset password
+                    </Button>
+                  </>
+                ),
+              },
+            ]}
+          />
         </div>
       </section>
     </>