Fixes & Updates (#704)

* Adding Dropdown Component

* Styling Issues

* Wishlist Fix

* Fixes for Wishlist View

* Hearts now work again

* Rollback ts

* Removing extra config to disable BigCommerce

* Fixes for Wishlist View

* Remove transition/animation for mobile

* New Updates.

* New Updates.

* Dropdown fix

* Polish

* export

* export

* revert tsconfig

Co-authored-by: Luis Alvarez D. <luis@vercel.com>

Co-authored-by: Dom Sip <dom@vercel.com>
Co-authored-by: Luis Alvarez D. <luis@vercel.com>

site/components/ui/Container/Container.tsx

@@ -12,10 +12,10 @@ const Container: FC<ContainerProps> = ({
   children,
   className,
   el = 'div',
-  clean,
+  clean = false, // Full Width Screen
 }) => {
   const rootClassName = cn(className, {
-    'mx-auto max-w-8xl px-6': !clean,
+    'mx-auto max-w-7xl px-6 w-full': !clean,
   })
 
   let Component: React.ComponentType<React.HTMLAttributes<HTMLDivElement>> =

site/components/ui/Dropdown/Dropdown.module.css

@@ -0,0 +1,32 @@
+.root {
+  @apply bg-accent-0;
+  animation: none;
+  transition: none;
+  min-width: 100%;
+}
+
+@media screen(lg) {
+  .root {
+    @apply bg-accent-0;
+    box-shadow: hsl(206 22% 7% / 45%) 0px 10px 38px -10px,
+      hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+    min-width: 14rem;
+    will-change: transform, opacity;
+    animation-duration: 600ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    animation-fill-mode: forwards;
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+    animation-name: slideIn;
+  }
+}
+
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}

site/components/ui/Dropdown/Dropdown.tsx

@@ -0,0 +1,22 @@
+import cn from 'clsx'
+import React from 'react'
+import s from './Dropdown.module.css'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
+export const Dropdown = DropdownMenu.Root
+export const DropdownMenuItem = DropdownMenu.Item
+export const DropdownTrigger = DropdownMenu.Trigger
+export const DropdownMenuLabel = DropdownMenu.Label
+export const DropdownMenuGroup = DropdownMenu.Group
+
+export const DropdownContent = React.forwardRef<
+  HTMLDivElement,
+  { children: React.ReactNode } & DropdownMenu.DropdownMenuContentProps &
+    React.RefAttributes<HTMLDivElement>
+>(function DropdownContent({ children, className, ...props }, forwardedRef) {
+  return (
+    <DropdownMenu.Content ref={forwardedRef} sideOffset={8} {...props}>
+      <div className={cn(s.root, className)}>{children}</div>
+    </DropdownMenu.Content>
+  )
+})

site/components/ui/Sidebar/Sidebar.tsx

@@ -1,14 +1,13 @@
-import { FC, useEffect, useRef } from 'react'
-import s from './Sidebar.module.css'
 import cn from 'clsx'
+import s from './Sidebar.module.css'
+import { useEffect, useRef } from 'react'
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
-
 interface SidebarProps {
   children: any
   onClose: () => void
 }
 
-const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
+const Sidebar: React.FC<SidebarProps> = ({ children, onClose }) => {
   const sidebarRef = useRef() as React.MutableRefObject<HTMLDivElement>
   const contentRef = useRef() as React.MutableRefObject<HTMLDivElement>
 

site/components/ui/index.ts

@@ -13,4 +13,5 @@ export { default as Input } from './Input'
 export { default as Collapse } from './Collapse'
 export { default as Quantity } from './Quantity'
 export { default as Rating } from './Rating'
+export * from './Dropdown/Dropdown'
 export { useUI } from './context'