Refactored code and implemented several enhancements:

- Removed unnecessary CSS for cleaner styling. - Created an Icon component for easier icon usage. - Fixed variations of the Button component to ensure consistent behavior. - Updated boards for icons and buttons to improve organization. - Implemented and refined fixes based on designer's feedback. - Integrated improvements and new utilities from the Wix team, addressing the product options select bug and image sizing in the categories section. - Further removed unused code and replaced non-standard icons with our own where applicable. - Improved the appearance of the user menu trigger button in the navigation for logged-in users.
codux-templates · Jan 14, 2025 · d2c4bb4 · d2c4bb4
1 parent 53e8872
commit d2c4bb4
Show file tree

Hide file tree

Showing 80 changed files with 4,179 additions and 827 deletions.
diff --git a/_codux/boards-global-setup.ts b/_codux/boards-global-setup.ts
@@ -3,3 +3,4 @@ import '~/src/styles/colors.scss';
 import '~/src/styles/typography.scss';
 import '~/src/styles/global.scss';
 import '~/src/styles/utils.scss';
+import 'material-symbols';
diff --git a/_codux/ui-kit/buttons/buttons.board.module.scss b/_codux/ui-kit/buttons/buttons.board.module.scss
@@ -11,11 +11,6 @@
     width: max(45px, 5vw);
 }
 
-.itemsGroup .icon {
-    height: 30px;
-    overflow: hidden;
-}
-
 .demoWidth :global(.button) {
     width: 250px;
 }
@@ -25,7 +20,3 @@
         width: 100%;
     }
 }
-
-.icon.menuIcon {
-    padding-top: 4px;
-}
diff --git a/_codux/ui-kit/buttons/buttons.board.tsx b/_codux/ui-kit/buttons/buttons.board.tsx
@@ -1,16 +1,9 @@
-import { createBoard, Variant } from '@wixc3/react-board';
-import { CartIcon, FacebookIcon, PinterestIcon, WhatsAppIcon } from '~/src/components/icons';
-import { LabelWithArrow } from '~/src/components/label-with-arrow/label-with-arrow';
-import { TrashIcon } from '../../../src/components/icons/trash-icon';
-import { LockIcon } from '../../../src/components/icons/lock-icon';
-import { ErrorIcon } from '../../../src/components/icons/error-icon';
-import { MenuIcon } from '../../../src/components/icons/menu-icon';
-import { ChevronRightIcon } from '../../../src/components/icons/chevron-right-icon';
-import { ArrowRightIcon } from '../../../src/components/icons/arrow-right-icon';
 import { Kit } from '../ui-kit-utils/kit';
 import classNames from 'classnames';
 
 import styles from './buttons.board.module.scss';
+import { createBoard, Variant } from '@wixc3/react-board';
+import Icon from '~/src/components/icons/icon';
 
 export default createBoard({
     name: 'Buttons & Icons',
@@ -19,119 +12,85 @@ export default createBoard({
             <Kit.Section title="Buttons" className={styles.demoWidth}>
                 <Kit.Item>
                     <Variant name="Primary Button">
-                        <button className="button primaryButton">Add to Cart</button>
+                        <button className="button">Add to Cart</button>
                     </Variant>
                     <Kit.Description>Primary Button</Kit.Description>
                 </Kit.Item>
                 <Kit.Item>
                     <Variant name="Primary Muted Button">
-                        <button className="button mutedPrimaryButton">Add to Cart</button>
+                        <button className="button muted">Add to Cart</button>
                     </Variant>
                     <Kit.Description>Primary Muted Button</Kit.Description>
                 </Kit.Item>
                 <Kit.Item>
                     <Variant name="Secondary Button">
-                        <button className="button">Add to Cart</button>
+                        <button className="button button-secondary">Add to Cart</button>
                     </Variant>
                     <Kit.Description>Secondary Button</Kit.Description>
                 </Kit.Item>
-                <Kit.Item>
-                    <Variant name="Label With Arrow">
-                        <LabelWithArrow>Shop Now</LabelWithArrow>
-                    </Variant>
-                    <Kit.Description>Label With Arrow</Kit.Description>
-                </Kit.Item>
             </Kit.Section>
 
             <Kit.Section title="Icons">
+                <Kit.Description>You can use any Material Symbols icon from the Material Symbols library.</Kit.Description>
                 <div className={styles.itemsGroup}>
                     <Kit.Item>
                         <div className={styles.icon}>
                             <Variant name="Cart Icon">
-                                <CartIcon count={3} />
+                                <Icon name="shopping_bag" />
                             </Variant>
                         </div>
                         <Kit.Description>Cart</Kit.Description>
                     </Kit.Item>
                     <Kit.Item>
                         <div className={styles.icon}>
                             <Variant name="Trash Icon">
-                                <TrashIcon height={27} />
+                                <Icon name="delete" />
                             </Variant>
                         </div>
                         <Kit.Description>Trash</Kit.Description>
                     </Kit.Item>
                     <Kit.Item>
                         <div className={styles.icon}>
                             <Variant name="Lock Icon">
-                                <LockIcon height={23} />
+                                <Icon name="lock" />
                             </Variant>
                         </div>
                         <Kit.Description>Lock</Kit.Description>
                     </Kit.Item>
                     <Kit.Item>
                         <div className={styles.icon}>
                             <Variant name="Error Icon">
-                                <ErrorIcon height={30} />
+                                <Icon name="error" />
                             </Variant>
                         </div>
                         <Kit.Description>Error</Kit.Description>
                     </Kit.Item>
                     <Kit.Item>
                         <div className={classNames(styles.icon, styles.menuIcon)}>
                             <Variant name="Menu Icon">
-                                <MenuIcon width={24} />
+                                <Icon name="menu" />
                             </Variant>
                         </div>
                         <Kit.Description>Menu</Kit.Description>
                     </Kit.Item>
                     <Kit.Item>
                         <div className={styles.icon}>
                             <Variant name="Chevron Icon">
-                                <ChevronRightIcon width={28} />
+                                <Icon name="chevron_right" />
                             </Variant>
                         </div>
                         <Kit.Description>Chevron</Kit.Description>
                     </Kit.Item>
                     <Kit.Item>
                         <div className={styles.icon}>
                             <Variant name="Arrow Icon">
-                                <ArrowRightIcon height={35} />
+                                <Icon name="arrow_right" />
                             </Variant>
                         </div>
                         <Kit.Description>Arrow</Kit.Description>
                     </Kit.Item>
                 </div>
             </Kit.Section>
-
-            <Kit.Section title="Social">
-                <div className={styles.itemsGroup}>
-                    <Kit.Item>
-                        <div className={styles.icon}>
-                            <Variant name="WhatsApp">
-                                <WhatsAppIcon className="smallIcon" />
-                            </Variant>
-                        </div>
-                        <Kit.Description>WhatsApp</Kit.Description>
-                    </Kit.Item>
-                    <Kit.Item>
-                        <div className={styles.icon}>
-                            <Variant name="Facebook">
-                                <FacebookIcon className="smallIcon" />
-                            </Variant>
-                        </div>
-                        <Kit.Description>Facebook</Kit.Description>
-                    </Kit.Item>
-                    <Kit.Item>
-                        <div className={styles.icon}>
-                            <Variant name="Pinterest">
-                                <PinterestIcon className="smallIcon" />
-                            </Variant>
-                        </div>
-                        <Kit.Description>Pinterest</Kit.Description>
-                    </Kit.Item>
-                </div>
-            </Kit.Section>
         </Kit>
     ),
     environmentProps: {

diff --git a/_codux/ui-kit/components/components.board.module.scss b/_codux/ui-kit/components/components.board.module.scss
@@ -2,10 +2,6 @@
     width: 250px;
 }
 
-.linkCardWrapper :global(.linkCard) {
-    aspect-ratio: 0.75;
-}
-
 @media (max-width: 480px) {
     .demoWidth {
         width: 100%;

diff --git a/_codux/ui-kit/components/components.board.tsx b/_codux/ui-kit/components/components.board.tsx
@@ -3,8 +3,6 @@ import { Accordion } from '~/src/components/accordion/accordion';
 import { ProductCard } from '~/src/components/product-card/product-card';
 import { QuantityInput } from '~/src/components/quantity-input/quantity-input';
 import { Select, SelectItem } from '~/src/components/select/select';
-import classNames from 'classnames';
-import { CategoryLink } from '~/src/components/category-link/category-link';
 import { ColorSelect } from '~/src/components/color-select/color-select';
 import ComponentWrapper from '_codux/board-wrappers/component-wrapper';
 import { Kit } from '../ui-kit-utils/kit';
@@ -164,11 +162,17 @@ export default createBoard({
                                         productOptions: [
                                             {
                                                 name: 'Color',
-                                                choices: ['Green' as products.Choice, 'Blue' as products.Choice],
+                                                choices: [
+                                                    'Green' as products.Choice,
+                                                    'Blue' as products.Choice,
+                                                ],
                                             },
                                             {
                                                 name: 'Size',
-                                                choices: ['Small' as products.Choice, 'Medium' as products.Choice],
+                                                choices: [
+                                                    'Small' as products.Choice,
+                                                    'Medium' as products.Choice,
+                                                ],
                                             },
                                         ],
                                     } satisfies products.Product
@@ -177,25 +181,12 @@ export default createBoard({
                         </Variant>
                         <Kit.Description>Product Card</Kit.Description>
                     </Kit.Item>
-                    <Kit.Item className={classNames(styles.demoWidth, styles.linkCardWrapper)}>
-                        <Variant name="Link Card">
-                            <CategoryLink categorySlug="all-products" className="linkCard">
-                                <img
-                                    className="linkCardBackground"
-                                    src="https://static.wixstatic.com/media/c837a6_c05a03f48fbd49e7b5046d1b18c930eb~mv2.jpg/v1/fill/w_547,h_730,q_90/c837a6_c05a03f48fbd49e7b5046d1b18c930eb~mv2.jpg"
-                                    alt=""
-                                />
-                                <div className="linkCardTitle">All Products</div>
-                            </CategoryLink>
-                        </Variant>
-                        <Kit.Description>Link Card</Kit.Description>
-                    </Kit.Item>
                 </Kit.Section>
             </Kit>
         </ComponentWrapper>
     ),
     environmentProps: {
-        windowWidth: 588,
+        windowWidth: 550,
         windowHeight: 800,
     },
     isSnippet: true,

diff --git a/_codux/ui-kit/sections/sections.board.module.scss b/_codux/ui-kit/sections/sections.board.module.scss
@@ -3,6 +3,3 @@
     padding: 16px var(--pagePaddingHoriz);
 }
 
-.container :global(.heroBanner) {
-    height: 600px;
-}
diff --git a/app/routes/about-us/route.module.scss b/app/routes/about-us/route.module.scss
@@ -39,23 +39,10 @@
     object-fit: cover;
 }
 
-.aboutSection {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
 .title {
     text-transform: uppercase;
 }
 
-.subtitle {
-    font: var(--heading2);
-    font-size: 60px;
-    max-width: 600px;
-    margin-bottom: 6%;
-}
-
 .description {
     font-size: 22px;
     max-width: 80%;
@@ -101,11 +88,6 @@
         margin-bottom: 40px;
     }
 
-    .subtitle {
-        font: var(--heading3);
-        max-width: unset;
-    }
-
     .description {
         font-size: 18px;
     }
@@ -116,11 +98,6 @@
         flex-direction: column;
     }
 
-    .subtitle {
-        font-size: 40px;
-        margin-bottom: 5%;
-    }
-
     .description {
         max-width: unset;
         font-size: 14px;

diff --git a/app/routes/cart/route.module.scss b/app/routes/cart/route.module.scss
@@ -78,14 +78,6 @@
     margin-bottom: 14px;
 }
 
-.secureCheckout {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    font: var(--paragraph3);
-}
-
 /* Fallback for loading, error, and empty cart states */
 .cartFallback {
     min-height: 300px;

diff --git a/app/routes/members-area.my-orders/route.module.scss b/app/routes/members-area.my-orders/route.module.scss
@@ -67,10 +67,6 @@
     border-bottom: 1px solid var(--border);
 }
 
-.orderList {
-    border-top: 1px solid var(--primary5);
-}
-
 .emptyStateContainer {
     display: flex;
     flex-direction: column;

diff --git a/app/routes/members-area/route.module.scss b/app/routes/members-area/route.module.scss
@@ -30,6 +30,3 @@
     width: 100%;
     border-bottom: 1px solid var(--border);
 }
-.div2 {
-    gap: 12px;
-}
diff --git a/app/routes/product-details.$productSlug/route.module.scss b/app/routes/product-details.$productSlug/route.module.scss
@@ -25,13 +25,6 @@
     font: var(--heading3);
 }
 
-.sku {
-    margin-top: 8px;
-    font: var(--paragraph3);
-    line-height: 1;
-    color: var(--primary4);
-}
-
 .price {
     margin-top: 8px;
     font: var(--heading3);

diff --git a/app/routes/product-details.$productSlug/route.tsx b/app/routes/product-details.$productSlug/route.tsx
@@ -34,11 +34,17 @@ export const getStaticRoutes: GetStaticRoutes = async () => {
 
 export default function ProductDetailsPage() {
     const { product } = useLoaderData<typeof loader>();
+    // The `key` ensures the component state, such as selected options or
+    // quantity, resets when navigating between products.
+    return <ProductDetails key={product._id} />;
+}
+
+function ProductDetails() {
+    const { product } = useLoaderData<typeof loader>();
 
     const {
         outOfStock,
         priceData,
-        sku,
         media,
         productOptions,
         quantity,
@@ -62,7 +68,6 @@ export default function ProductDetailsPage() {
 
                 <div className={styles.productInfo}>
                     <h1 className={styles.productName}>{product.name}</h1>
-                    {sku && <p className={styles.sku}>SKU: {sku}</p>}
 
                     {priceData && (
                         <ProductPrice