Adding Collapse

commerce.config.json

@@ -1 +1,5 @@
-{}
+{
+  "features": {
+    "customCheckout": true
+  }
+}

components/product/ProductView/ProductView.module.css

@@ -94,23 +94,3 @@
     @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,7 +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'
+import Collapse from '@components/ui/Collapse'
 
 interface Props {
   children?: any
@@ -27,7 +27,6 @@ const ProductView: FC<Props> = ({ product }) => {
   })
   const { openSidebar } = useUI()
   const [loading, setLoading] = useState(false)
-  const [tabId, setTabId] = useState('')
   const [choices, setChoices] = useState<SelectedOptions>({})
 
   useEffect(() => {
@@ -161,21 +160,14 @@ const ProductView: FC<Props> = ({ product }) => {
           </div>
 
           <div className="mt-6">
-            <ul>
+            <Collapse title="Details">
-              <li className={s.tab}>
+              This is a limited edition production run. Printing starts when the
-                <div className={s.header}>
+              drop ends.
-                  <ChevronRight
+            </Collapse>
-                    className={cn(s.icon, { [s.open]: tabId })}
+            <Collapse title="Care">
-                    onClick={() => tabId('1')}
+              This is a limited edition production run. Printing starts when the
-                  />
+              drop ends.
-                  <span className={s.label}>Details</span>
+            </Collapse>
-                </div>
-                <div className={s.content}>
-                  This is a limited edition production run. Printing starts when
-                  the drop ends.
-                </div>
-              </li>
-            </ul>
           </div>
         </div>
       </div>

components/product/Swatch/Swatch.module.css

@@ -35,7 +35,7 @@
 }
 
 .active {
-  @apply border-accents-9 border-2;
+  @apply border-accent-9 border-2;
   padding-right: 1px;
   padding-left: 1px;
 }
@@ -46,7 +46,7 @@
 }
 
 .active.textLabel {
-  @apply border-accents-9 border-2;
+  @apply border-accent-9 border-2;
   padding-right: calc(1rem - 1px);
   padding-left: calc(1rem - 1px);
 }

components/ui/Button/Button.module.css

@@ -1,8 +1,9 @@
 .root {
   @apply bg-secondary text-accent-1 cursor-pointer inline-flex
   px-10 rounded-sm leading-6  transition ease-in-out duration-150
-  shadow-sm font-semibold text-center justify-center uppercase
+  shadow-sm text-center justify-center uppercase
-  py-4 border border-transparent items-center;
+  py-4 border border-transparent items-center text-sm font-semibold
+  tracking-wide;
 }
 
 .root:hover {

components/ui/Collapse/Collapse.module.css

@@ -0,0 +1,24 @@
+.root {
+  @apply border-b border-accent-2 py-4 px-2 flex flex-col;
+}
+
+.header {
+  @apply flex flex-row items-center;
+}
+
+.header .label {
+  @apply text-sm font-medium;
+}
+
+.content {
+  @apply pt-3 overflow-hidden pl-9;
+}
+
+.icon {
+  @apply mr-3 text-accent-6;
+  transition: transform 0.2s ease;
+}
+
+.icon.open {
+  transform: rotate(90deg);
+}

components/ui/Collapse/Collapse.tsx

@@ -0,0 +1,46 @@
+import cn from 'classnames'
+import React, { FC, ReactNode, useState } from 'react'
+import s from './Collapse.module.css'
+import { ChevronRight } from '@components/icons'
+import { useSpring, a } from '@react-spring/web'
+import useMeasure from 'react-use-measure'
+
+export interface CollapseProps {
+  title: string
+  children: ReactNode
+}
+
+const Collapse: FC<CollapseProps> = ({ title, children }) => {
+  const [isActive, setActive] = useState(false)
+  const [ref, { height: viewHeight }] = useMeasure()
+
+  const animProps = useSpring({
+    height: isActive ? viewHeight : 0,
+    config: { tension: 250, friction: 32, clamp: true, duration: 150 },
+    opacity: isActive ? 1 : 0,
+  })
+
+  const toggle = () => setActive((x) => !x)
+
+  return (
+    <div
+      className={s.root}
+      role="button"
+      tabIndex={0}
+      aria-expanded={isActive}
+      onClick={toggle}
+    >
+      <div className={s.header}>
+        <ChevronRight className={cn(s.icon, { [s.open]: isActive })} />
+        <span className={s.label}>{title}</span>
+      </div>
+      <a.div style={{ overflow: 'hidden', ...animProps }}>
+        <div ref={ref} className={s.content}>
+          {children}
+        </div>
+      </a.div>
+    </div>
+  )
+}
+
+export default Collapse

components/ui/Collapse/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Collapse'
+export * from './Collapse'

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@reach/portal": "^0.11.2",
+    "@react-spring/web": "^9.2.1",
     "@vercel/fetch": "^6.1.0",
     "autoprefixer": "^10.2.4",
     "body-scroll-lock": "^3.1.5",
@@ -41,7 +42,9 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-merge-refs": "^1.1.0",
+    "react-spring": "^9.2.1",
     "react-ticker": "^1.2.2",
+    "react-use-measure": "^2.0.4",
     "shopify-buy": "^2.11.0",
     "swell-js": "^4.0.0-next.0",
     "swr": "^0.4.0",

tsconfig.json

@@ -22,8 +22,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["framework/commerce"],
       "@commerce/*": ["framework/commerce/*"],
-      "@framework": ["framework/shopify"],
+      "@framework": ["framework/bigcommerce"],
-      "@framework/*": ["framework/shopify/*"]
+      "@framework/*": ["framework/bigcommerce/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],

yarn.lock

@@ -963,6 +963,86 @@
     tslib "^2.0.0"
     warning "^4.0.3"
 
+"@react-spring/animated@~9.2.0":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.2.1.tgz#545cc03614f3f8a156fb722c644b3b59ea676a17"
+  integrity sha512-UAa74fsxWWQ6+3U1xdPBHVOBvvRYpSFs8Eo/I0msq7GxO4r7/muU/9loihKj5SfT3OW7hG9rnLEKQFImD7XUNw==
+  dependencies:
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/core@~9.2.0":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.2.1.tgz#df0e6cc29a7866cb248f5a915f3a69241af1da48"
+  integrity sha512-c4cu77//wZGO3URAob3+NynINDFos57wgVYcQHQYGOCLYwPzg6NVFf8ERfqzuFMeMgrvCkns7HZOxshPC/wzag==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/konva@~9.2.0":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.2.1.tgz#7ba9ad5d615961a7bfc60761333ee666c00b2ce5"
+  integrity sha512-GnvEXElYerpD7313hwqIEbsHXz18HgHAUGWe4XV6Sf+KHhCQvw/z97PJLD5KD6XU5MawaQTYkwvqvJ6eTLV0Nw==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/native@~9.2.0":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.2.1.tgz#be1aa591c90d25dac6b68a678b50d1cbb0e4e70a"
+  integrity sha512-sWum3JgFpmnpdVZKThpihl1X15oQF/zBiVTQ+csOJDBnB9jhW42WYu9r6ib9M2yxAelS17u7FnDCIfLZf7V1bg==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/shared@~9.2.0":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.2.1.tgz#90ccd02b8d0ad126e0614a3cddff90664f255192"
+  integrity sha512-N1EWfOl/viy6ylj+r/YH/CmVNA4z9W1dB/3MgUrLXYVgOBc2uML4ljWOSlr2YqbyWuc9Eae6J6nuxQ+iarWQsQ==
+  dependencies:
+    "@react-spring/types" "~9.2.0"
+    rafz "^0.1.13"
+
+"@react-spring/three@~9.2.0":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.2.1.tgz#d8df125de9e8325b51ff308c58561a8683523c80"
+  integrity sha512-0gRz2y8G5szbtywvTDbaT3B+1Xseq5Yu2X02Ey8k18IksAncMZ/KFcRJIYFQn+7OlLVaoxPzXibSUNT4notWMg==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/types@~9.2.0":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.2.1.tgz#734bbc12b4db57ca55680fd4cb197bd6e0f6a8a9"
+  integrity sha512-UMXLNW1l/iJCRRAsTpeqgQYjims9j8QSSMbkgi1mFZytDuaQ6r6f9ngfLgx9uDW2VSdvoNdEqGM9abVDGc4E1g==
+
+"@react-spring/web@^9.2.1", "@react-spring/web@~9.2.0":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.2.1.tgz#aeb2427545e631e29d70f3ad38afa35da560f1c5"
+  integrity sha512-7YimWKLuHhUZhuDchfn4Yo631KqULWCgrDLOZBu0o4AZwVMFvguVY1g0Tpm5K+68Z7kJaS0n5pf8wlwtGIOs+w==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/zdog@~9.2.0":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.2.1.tgz#93a7c7ba15d215608cf7d222c7e50352a2a66b17"
+  integrity sha512-OjXoSo3/Lp8OKK0V3spyB8FWw0ttfwEdMlJyS1Ed8edLwbVv+60G6EqQT4S7M433R8W1M6Ck5f9fw0EedWsmhQ==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301"
@@ -5522,6 +5602,11 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
+rafz@^0.1.13:
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/rafz/-/rafz-0.1.14.tgz#164f01cf7cc6094e08467247ef351ef5c8d278fe"
+  integrity sha512-YiQkedSt1urYtYbvHhTQR3l67M8SZbUvga5eJFM/v4vx/GmDdtXlE2hjJIyRjhhO/PjcdGC+CXCYOUA4onit8w==
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -5581,11 +5666,30 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-spring@^9.2.1:
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.1.tgz#999ff52142fbf85180b79b3b7b9266e0d3539f8d"
+  integrity sha512-HLkEbuRvRtvAwkeqqwZXIEaKPPc17ViI5DYPtYTpgu2H9jmndm/kp1BfxRwpu5+m4ecGzUUX7RRNWEfwWY6oWA==
+  dependencies:
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/konva" "~9.2.0"
+    "@react-spring/native" "~9.2.0"
+    "@react-spring/three" "~9.2.0"
+    "@react-spring/web" "~9.2.0"
+    "@react-spring/zdog" "~9.2.0"
+
 react-ticker@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24"
   integrity sha512-PXUujoPJvajxwOfosuuujlrBUrjgGp4FB4haWFOI25ujhMppW4SuLkiOdQ9AylrWN3yTHWdk2kbQWe3n9SjFGA==
 
+react-use-measure@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.0.4.tgz#cb675b36eaeaf3681b94d5f5e08b2a1e081fedc9"
+  integrity sha512-7K2HIGaPMl3Q9ZQiEVjen3tRXl4UDda8LiTPy/QxP8dP2rl5gPBhf7mMH6MVjjRNv3loU7sNzey/ycPNnHVTxQ==
+  dependencies:
+    debounce "^1.2.0"
+
 react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"