Adding tabs

README.md

@@ -50,6 +50,7 @@ NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=xxxxxxx.myshopify.com
 ```
 
 And change the `tsconfig.json` to resolve to the chosen provider:
+
 ```
   "@framework": ["framework/shopify"],
   "@framework/*": ["framework/shopify/*"]
@@ -61,6 +62,11 @@ That's it!
 
 Every provider defines the features that it supports under `framework/{provider}/commerce.config.json`
 
+#### Features Available
+
+- wishlist
+- customCheckout
+
 #### How to turn Features on and off
 
 > NOTE: The selected provider should support the feature that you are toggling. (This means that you can't turn wishlist on if the provider doesn't support this functionality out the box)
@@ -70,7 +76,8 @@ Every provider defines the features that it supports under `framework/{provider}
   ```json
   {
     "features": {
-      "wishlist": false
+      "wishlist": false,
+      "customCheckout": true
     }
   }
   ```

components/icons/ChevronDown.tsx

@@ -0,0 +1,20 @@
+const ChevronDown = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+      {...props}
+    >
+      <path d="M6 9l6 6 6-6" />
+    </svg>
+  )
+}
+
+export default ChevronDown

components/icons/ChevronLeft.tsx

@@ -1,4 +1,4 @@
-const ChevronUp = ({ ...props }) => {
+const ChevronLeft = ({ ...props }) => {
   return (
     <svg
       viewBox="0 0 24 24"
@@ -17,4 +17,4 @@ const ChevronUp = ({ ...props }) => {
   )
 }
 
-export default ChevronUp
+export default ChevronLeft

components/icons/index.ts

@@ -16,5 +16,6 @@ export { default as MapPin } from './MapPin'
 export { default as CreditCard } from './CreditCard'
 export { default as ChevronUp } from './ChevronUp'
 export { default as ChevronLeft } from './ChevronLeft'
+export { default as ChevronDown } from './ChevronDown'
 export { default as ChevronRight } from './ChevronRight'
 export { default as DoubleChevron } from './DoubleChevron'

components/product/ProductView/ProductView.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply relative grid items-start gap-8 grid-cols-1 overflow-x-hidden;
+  @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden;
 
   @screen lg {
     @apply grid-cols-12;
@@ -17,7 +17,7 @@
   @screen lg {
     margin-right: -2rem;
     margin-left: -2rem;
-    @apply mx-0 col-span-6;
+    @apply mx-0 col-span-8;
     min-height: 100%;
     height: 100%;
   }
@@ -56,7 +56,7 @@
   @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;
 
   @screen lg {
-    @apply col-span-6 py-24 justify-between;
+    @apply col-span-4 py-12;
   }
 }
 
@@ -91,6 +91,26 @@
   @apply absolute z-30 top-6 right-0 bg-primary text-primary w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
 
   @screen lg {
-    @apply right-12 text-white bg-violet;
+    @apply right-0 top-0 text-black bg-white w-14 h-14;
   }
 }
+
+.tab {
+  @apply border-b border-accent-2 py-4 px-2 flex flex-col;
+}
+
+.tab .header {
+  @apply flex flex-row items-center;
+}
+
+.tab .header .label {
+  @apply text-sm font-medium;
+}
+
+.tab .icon {
+  @apply mr-3 text-accent-6 transform;
+}
+
+.tab .icon.open {
+  transform: rotate(90deg);
+}

components/product/ProductView/ProductView.tsx

@@ -10,6 +10,7 @@ import usePrice from '@framework/product/use-price'
 import { useAddItem } from '@framework/cart'
 import { getVariant, SelectedOptions } from '../helpers'
 import WishlistButton from '@components/wishlist/WishlistButton'
+import { ChevronDown, ChevronRight } from '@components/icons'
 
 interface Props {
   children?: any
@@ -26,6 +27,7 @@ const ProductView: FC<Props> = ({ product }) => {
   })
   const { openSidebar } = useUI()
   const [loading, setLoading] = useState(false)
+  const [tabId, setTabId] = useState('')
   const [choices, setChoices] = useState<SelectedOptions>({})
 
   useEffect(() => {
@@ -101,6 +103,13 @@ const ProductView: FC<Props> = ({ product }) => {
               ))}
             </ProductSlider>
           </div>
+          {process.env.COMMERCE_WISHLIST_ENABLED && (
+            <WishlistButton
+              className={s.wishlistButton}
+              productId={product.id}
+              variant={product.variants[0]! as any}
+            />
+          )}
         </div>
         <div className={s.sidebar}>
           <section>
@@ -150,14 +159,25 @@ const ProductView: FC<Props> = ({ product }) => {
               Add to Cart
             </Button>
           </div>
-        </div>
+
-        {process.env.COMMERCE_WISHLIST_ENABLED && (
+          <div className="mt-6">
-          <WishlistButton
+            <ul>
-            className={s.wishlistButton}
+              <li className={s.tab}>
-            productId={product.id}
+                <div className={s.header}>
-            variant={product.variants[0]! as any}
+                  <ChevronRight
+                    className={cn(s.icon, { [s.open]: tabId })}
+                    onClick={() => tabId('1')}
                   />
-        )}
+                  <span className={s.label}>Details</span>
+                </div>
+                <div className={s.content}>
+                  This is a limited edition production run. Printing starts when
+                  the drop ends.
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
     </Container>
   )