Merge branch 'master' into arzafran/ui-tweaks

components/ui/Button/Button.module.css

@@ -24,3 +24,12 @@
 .slim {
   @apply py-2 transform-none normal-case;
 }
+
+.disabled,
+.disabled:hover {
+  @apply text-accents-4 border-accents-2 bg-accents-1 cursor-not-allowed;
+  filter: grayscale(1);
+  -webkit-transform: translateZ(0);
+  -webkit-perspective: 1000;
+  -webkit-backface-visibility: hidden;
+}

components/ui/Button/Button.tsx

@@ -19,6 +19,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   Component?: string | JSXElementConstructor<any>
   width?: string | number
   loading?: boolean
+  disabled?: boolean
 }
 
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
@@ -28,10 +29,10 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     children,
     active,
     onClick,
-    disabled,
     width,
     Component = 'button',
     loading = false,
+    disabled = false,
     style = {},
     ...rest
   } = props
@@ -52,6 +53,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     {
       [s.slim]: variant === 'slim',
       [s.loading]: loading,
+      [s.disabled]: disabled,
     },
     className
   )
@@ -64,6 +66,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
       {...buttonProps}
       data-active={isPressed ? '' : undefined}
       className={rootClassName}
+      disabled={disabled}
       style={{
         width,
         ...style,

components/ui/Hero/Hero.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react'
 import { Container } from '@components/ui'
-import { RightArrow } from '@components/icon'
+import { RightArrow } from '@components/icons'
 import s from './Hero.module.css'
-
+import Link from 'next/link'
 interface Props {
   className?: string
   headline: string
@@ -21,10 +21,12 @@ const Hero: FC<Props> = ({ headline, description }) => {
             <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
               {description}
             </p>
-            <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
-              <span>Read it here</span>
-              <RightArrow width="20" heigh="20" className="ml-1" />
-            </a>
+            <Link href="/blog">
+              <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+                Read it here
+                <RightArrow width="20" heigh="20" className="ml-1" />
+              </a>
+            </Link>
           </div>
         </div>
       </Container>

components/ui/Input/Input.module.css

@@ -0,0 +1,5 @@
+.root {
+  @apply focus:outline-none bg-primary focus:shadow-outline-gray py-2 
+  px-6 w-full appearance-none transition duration-150 ease-in-out 
+  placeholder-accents-5 pr-10 border border-accents-3 text-accents-6;
+}

components/ui/Input/Input.tsx

@@ -0,0 +1,35 @@
+import cn from 'classnames'
+import s from './Input.module.css'
+import React, { InputHTMLAttributes } from 'react'
+
+export interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  className?: string
+  onChange?: (...args: any[]) => any
+}
+
+const Input: React.FC<Props> = (props) => {
+  const { className, children, onChange, ...rest } = props
+
+  const rootClassName = cn(s.root, {}, className)
+
+  const handleOnChange = (e: any) => {
+    if (onChange) {
+      onChange(e.target.value)
+    }
+    return null
+  }
+
+  return (
+    <input
+      className={rootClassName}
+      onChange={handleOnChange}
+      autoComplete="off"
+      autoCorrect="off"
+      autoCapitalize="off"
+      spellCheck="false"
+      {...rest}
+    />
+  )
+}
+
+export default Input

components/ui/Input/index.ts

@@ -0,0 +1 @@
+export { default } from './Input'

components/ui/Marquee/Marquee.tsx

@@ -19,16 +19,6 @@ const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
     className
   )
 
-  // return (
-  //   <div className={rootClassName}>
-  //     <div className={s.container}>
-  //       {items.map((p: any) => (
-  //         <Component {...p} />
-  //       ))}
-  //     </div>
-  //   </div>
-  // )
-
   return (
     <div className={rootClassName}>
       <Ticker offset={80}>

components/ui/Modal/Modal.module.css

@@ -6,3 +6,7 @@
 .modal {
   @apply bg-primary p-12 border border-accents-2;
 }
+
+.modal:focus {
+  @apply outline-none;
+}

components/ui/Modal/Modal.tsx

@@ -2,43 +2,75 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
 import { useDialog } from '@react-aria/dialog'
-import { useOverlay, useModal } from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
-
+import { Transition } from '@headlessui/react'
+import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
+import { Cross } from '@components/icons'
 interface Props {
   className?: string
   children?: any
-  show?: boolean
-  close: () => void
+  open?: boolean
+  onClose: () => void
 }
 
 const Modal: FC<Props> = ({
   className,
   children,
-  show = true,
-  close,
+  open = false,
+  onClose,
   ...props
 }) => {
   const rootClassName = cn(s.root, className)
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
   let { modalProps } = useModal()
-  let { overlayProps } = useOverlay(props, ref)
-  let { dialogProps } = useDialog(props, ref)
+  let { dialogProps } = useDialog({}, ref)
+  let { overlayProps } = useOverlay(
+    {
+      isOpen: open,
+      isDismissable: false,
+      onClose: onClose,
+      ...props,
+    },
+    ref
+  )
 
   return (
-    <div className={rootClassName}>
-      <FocusScope contain restoreFocus autoFocus>
-        <div
-          {...overlayProps}
-          {...dialogProps}
-          {...modalProps}
-          ref={ref}
-          className={s.modal}
-        >
-          {children}
-        </div>
-      </FocusScope>
-    </div>
+    <Transition show={open}>
+      <OverlayContainer>
+        <FocusScope contain restoreFocus autoFocus>
+          <div className={rootClassName}>
+            <Transition.Child
+              enter="transition-opacity ease-linear duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="transition-opacity ease-linear duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div
+                className={s.modal}
+                {...overlayProps}
+                {...dialogProps}
+                {...modalProps}
+                ref={ref}
+              >
+                <div className="h-7 flex items-center justify-end w-full">
+                  <button
+                    onClick={() => onClose()}
+                    aria-label="Close panel"
+                    className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none"
+                  >
+                    <Cross className="h-6 w-6" />
+                  </button>
+                </div>
+
+                {children}
+              </div>
+            </Transition.Child>
+          </div>
+        </FocusScope>
+      </OverlayContainer>
+    </Transition>
   )
 }
 

components/ui/Text/Text.module.css

@@ -0,0 +1,15 @@
+.body {
+  @apply text-lg leading-7 font-medium max-w-6xl mx-auto;
+}
+
+.heading {
+  @apply text-5xl mb-12;
+}
+
+.pageHeading {
+  @apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
+}
+
+.sectionHeading {
+  @apply pt-1 pb-2 text-base font-semibold leading-7 text-base tracking-wider uppercase border-b border-accents-2 mb-3;
+}

components/ui/Text/Text.tsx

@@ -0,0 +1,58 @@
+import React, {
+  FunctionComponent,
+  JSXElementConstructor,
+  CSSProperties,
+} from 'react'
+import cn from 'classnames'
+import s from './Text.module.css'
+
+interface Props {
+  variant?: Variant
+  className?: string
+  style?: CSSProperties
+  children: React.ReactNode | any
+}
+
+type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading'
+
+const Text: FunctionComponent<Props> = ({
+  style,
+  className = '',
+  variant = 'body',
+  children,
+}) => {
+  const componentsMap: {
+    [P in Variant]: React.ComponentType<any> | string
+  } = {
+    body: 'p',
+    heading: 'h1',
+    pageHeading: 'h1',
+    sectionHeading: 'h2',
+  }
+
+  const Component:
+    | JSXElementConstructor<any>
+    | React.ReactElement<any>
+    | React.ComponentType<any>
+    | string = componentsMap![variant!]
+
+  return (
+    <Component
+      className={cn(
+        s.root,
+        {
+          [s.body]: variant === 'body',
+          [s.heading]: variant === 'heading',
+          [s.pageHeading]: variant === 'pageHeading',
+          [s.sectionHeading]: variant === 'sectionHeading',
+        },
+        className
+      )}
+      style={style}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export default Text

components/ui/Text/index.ts

@@ -0,0 +1 @@
+export { default } from './Text'

components/ui/Toast/Toast.module.css

@@ -0,0 +1,9 @@
+.root {
+}
+
+.toast {
+  @apply absolute bg-primary text-primary flex items-center border border-accents-1
+   rounded-md z-50 shadow-2xl top-0 right-0 p-6 my-6 mx-3;
+  width: 420px;
+  z-index: 20000;
+}

components/ui/Toast/Toast.tsx

@@ -0,0 +1,73 @@
+import cn from 'classnames'
+import { FC, useRef, useEffect, useCallback } from 'react'
+import s from './Toast.module.css'
+import { useDialog } from '@react-aria/dialog'
+import { FocusScope } from '@react-aria/focus'
+import { Transition } from '@headlessui/react'
+import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
+
+interface Props {
+  className?: string
+  children?: any
+  open?: boolean
+  onClose: () => void
+}
+
+const Toast: FC<Props> = ({
+  className,
+  children,
+  open = false,
+  onClose,
+  ...props
+}) => {
+  const rootClassName = cn(s.root, className)
+  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  let { modalProps } = useModal()
+  let { dialogProps } = useDialog({}, ref)
+  let { overlayProps } = useOverlay(
+    {
+      isOpen: open,
+      isDismissable: true,
+      onClose: onClose,
+      ...props,
+    },
+    ref
+  )
+
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     useCallback(onClose, [])
+  //   }, 400)
+  // })
+
+  return (
+    <Transition show={open}>
+      <OverlayContainer>
+        <FocusScope contain restoreFocus autoFocus>
+          <div className={rootClassName}>
+            <Transition.Child
+              enter="transition-opacity ease-linear duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="transition-opacity ease-linear duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div
+                className={s.toast}
+                {...overlayProps}
+                {...dialogProps}
+                {...modalProps}
+                ref={ref}
+              >
+                {children}
+              </div>
+            </Transition.Child>
+          </div>
+        </FocusScope>
+      </OverlayContainer>
+    </Transition>
+  )
+}
+
+export default Toast

components/ui/Toast/index.ts

@@ -0,0 +1 @@
+export { default } from './Toast'

components/ui/context.tsx

@@ -5,11 +5,19 @@ import { SSRProvider, OverlayProvider } from 'react-aria'
 export interface State {
   displaySidebar: boolean
   displayDropdown: boolean
+  displayModal: boolean
+  displayToast: boolean
+  modalView: string
+  toastText: string
 }
 
 const initialState = {
   displaySidebar: false,
   displayDropdown: false,
+  displayModal: false,
+  modalView: 'LOGIN_VIEW',
+  displayToast: false,
+  toastText: '',
 }
 
 type Action =
@@ -19,12 +27,39 @@ type Action =
   | {
       type: 'CLOSE_SIDEBAR'
     }
+  | {
+      type: 'OPEN_TOAST'
+    }
+  | {
+      type: 'CLOSE_TOAST'
+    }
+  | {
+      type: 'SET_TOAST_TEXT'
+      text: ToastText
+    }
   | {
       type: 'OPEN_DROPDOWN'
     }
   | {
       type: 'CLOSE_DROPDOWN'
     }
+  | {
+      type: 'OPEN_MODAL'
+    }
+  | {
+      type: 'CLOSE_MODAL'
+    }
+  | {
+      type: 'SET_MODAL_VIEW'
+      view: 'LOGIN_VIEW'
+    }
+  | {
+      type: 'SET_MODAL_VIEW'
+      view: 'SIGNUP_VIEW'
+    }
+
+type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
+type ToastText = string
 
 export const UIContext = React.createContext<State | any>(initialState)
 
@@ -56,6 +91,42 @@ function uiReducer(state: State, action: Action) {
         displayDropdown: false,
       }
     }
+    case 'OPEN_MODAL': {
+      return {
+        ...state,
+        displayModal: true,
+      }
+    }
+    case 'CLOSE_MODAL': {
+      return {
+        ...state,
+        displayModal: false,
+      }
+    }
+    case 'OPEN_TOAST': {
+      return {
+        ...state,
+        displayToast: true,
+      }
+    }
+    case 'CLOSE_TOAST': {
+      return {
+        ...state,
+        displayToast: false,
+      }
+    }
+    case 'SET_MODAL_VIEW': {
+      return {
+        ...state,
+        modalView: action.view,
+      }
+    }
+    case 'SET_TOAST_TEXT': {
+      return {
+        ...state,
+        toastText: action.text,
+      }
+    }
   }
 }
 
@@ -68,14 +139,32 @@ export const UIProvider: FC = (props) => {
   const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
   const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
 
+  const openModal = () => dispatch({ type: 'OPEN_MODAL' })
+  const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
+
+  const openToast = () => dispatch({ type: 'OPEN_TOAST' })
+  const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
+
+  const setModalView = (view: MODAL_VIEWS) =>
+    dispatch({ type: 'SET_MODAL_VIEW', view })
+
   const value = {
     ...state,
     openSidebar,
     closeSidebar,
     openDropdown,
     closeDropdown,
+    openModal,
+    closeModal,
+    setModalView,
+    openToast,
+    closeToast,
   }
 
+  setTimeout(() => {
+    openToast()
+  }, 200)
+
   return <UIContext.Provider value={value} {...props} />
 }
 

components/ui/index.ts

@@ -8,3 +8,6 @@ export { default as Container } from './Container'
 export { default as LoadingDots } from './LoadingDots'
 export { default as Skeleton } from './Skeleton'
 export { default as Modal } from './Modal'
+export { default as Text } from './Text'
+export { default as Input } from './Input'
+export { default as Toast } from './Toast'

components/ui/types.ts

@@ -1 +0,0 @@
-export type Colors = 'violet' | 'black' | 'pink' | 'white'