mysilio-co · ianconsolata · Sep 27, 2021 · Sep 22, 2021 · Sep 22, 2021 · Sep 22, 2021
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -6,6 +6,19 @@ import { HTML5Backend } from 'react-dnd-html5-backend'
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  backgrounds: {
+    default: 'light',
+    values: [
+      {
+        name: 'light',
+        value: '#f9fafb',
+      },
+      {
+        name: 'dark',
+        value: '#0e90a3',
+      },
+    ],
+  },
 }
 
 export const decorators = [

diff --git a/.zeplin/components.json b/.zeplin/components.json
@@ -0,0 +1,35 @@
+{
+    "projects": [
+        "61327f6d0e26559ad2dce006"
+    ],
+    "styleguides": [],
+    "components": [
+        {
+            "path": "components/buttons.jsx",
+            "zeplinIds": [
+                "614815f11739e023de68afae",
+                "614815f025df846adc8b71c1",
+                "614815f1cdbfc5219d246333",
+                "614815f1c6dc54350825acc5",
+                "614815f0f55c3967e7f94e17",
+                "614815f153567e6a1ea41acb",
+                "614815f3d6ef3222ad43ba60",
+                "614815f481ff696858444bc5",
+                "614815f2d430182f131cf908",
+                "614815f6effc0926984b7244",
+                "614815f2f6582a6ab3b062c5",
+                "614815f2effc0926984b7234",
+                "614815f287bf1624ff72fa3b"
+            ]
+        }
+    ],
+    "plugins": [
+        {
+            "name": "@zeplin/cli-connect-storybook-plugin",
+            "config": {
+                "url": "http://localhost:6006",
+                "startScript": "storybook"
+            }
+        }
+    ]
+}
diff --git a/components/Avatar.jsx b/components/Avatar.jsx
@@ -0,0 +1,5 @@
+export default function Avatar({ src, className }) {
+  return (
+    <img src={src} className={`w-12 h-12 rounded-full border-2 border-white ${className}`} />
+  )
+}
diff --git a/components/Dropdown.jsx b/components/Dropdown.jsx
@@ -0,0 +1,30 @@
+import { Fragment } from 'react'
+import { Menu, Transition } from '@headlessui/react'
+import { AddCircle as AddCircleIcon } from './icons'
+
+export default function Dropdown({children, label, className}) {
+  return (
+    <Menu as="div" className={`relative inline-block text-left ${className}`}>
+      <div>
+        <Menu.Button className="inline-flex justify-center items-center w-full rounded-full h-10 px-4 py-2 bg-white bg-opacity-10 text-sm font-medium text-white hover:bg-opacity-20 hover:shadow-btn focus:outline-none">
+          <span>{label}</span>
+          <AddCircleIcon className="-mr-1 ml-2 h-4 w-4" aria-hidden="true" />
+        </Menu.Button>
+      </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        {children}
+      </Transition>
+    </Menu>
+  )
+}
+
+Dropdown.Items = Menu.Items
+Dropdown.Item = Menu.Item
diff --git a/components/Header.jsx b/components/Header.jsx
@@ -0,0 +1,50 @@
+import { Formik } from 'formik';
+import { Search as SearchIcon } from './icons';
+import { IconInput } from './inputs';
+import { Logo } from './logo';
+import Avatar from './Avatar';
+import Dropdown from '../components/Dropdown';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Header({ avatarImgSrc }) {
+  return (
+    <nav className="bg-my-green rounded-b-2xl flex flex-row justify-between h-18 items-center">
+      <div className="flex flex-row items-center">
+        <div className="w-18 flex flex-col justify-center items-center">
+          <Logo className='w-7 transform scale-105' />
+        </div>
+        <Formik>
+          <IconInput type="search" name="search" placeholder="Search"
+            icon={<SearchIcon className="ipt-header-search-icon" />}
+            inputClassName="ipt-header-search" />
+        </Formik>
+      </div>
+      <div className="flex flex-row items-center">
+        <Dropdown label="New" >
+          <Dropdown.Items className="origin-top-left absolute right-0 mt-2 w-52 rounded-lg shadow-menu text-xs bg-white focus:outline-none">
+            <div className="uppercase text-gray-300 text-xs mt-2.5 px-4">
+              Create New
+            </div>
+            <Dropdown.Item>
+              {({ active }) => (
+                <a
+                  href="#"
+                  className={classNames(
+                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                    'block px-4 py-2 text-sm'
+                  )}
+                >
+                  Note
+                </a>
+              )}
+            </Dropdown.Item>
+          </Dropdown.Items>
+        </Dropdown>
+        <Avatar src={avatarImgSrc} className="mx-12" />
+      </div>
+    </nav>
+  )
+}
diff --git a/components/buttons.jsx b/components/buttons.jsx
@@ -0,0 +1,2 @@
+export const Button = (props) =>
+  <button {...props}/>
diff --git a/components/icons.jsx b/components/icons.jsx
@@ -1,7 +1,7 @@
-const iconFromPath = (path) => ({className, ...props}) => (
+const iconFromPath = (path) => ({ className, ...props }) => (
   <svg xmlns="http://www.w3.org/2000/svg"
-       viewBox="0 0 20 20" fill="currentColor"
-       className={`h-5 w-5 ${className || ''}`} {...props}>
+    viewBox="0 0 20 20" fill="currentColor"
+    className={`h-5 w-5 ${className || ''}`} {...props}>
     {path}
   </svg>
 )
@@ -27,15 +27,15 @@ export const LinkIcon = iconFromPath(
 )
 
 export const HomeIcon = iconFromPath(
-    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+  <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
 )
 
 export const CoverImageIcon = iconFromPath(
-    <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
+  <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
 )
 
 export const ProfileImageIcon = iconFromPath(
-    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z" clipRule="evenodd" />
+  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z" clipRule="evenodd" />
 )
 
 export const MailIcon = iconFromPath(
@@ -56,26 +56,54 @@ export const ExternalLinkIcon = iconFromPath(
   </>
 )
 
-export const FormatBold = ({className, ...props}) => (
+export const FormatBold = ({ className, ...props }) => (
   <div className={`w-5 h-5 leading-tight font-bold ${className || ''}`} {...props}>
     b
   </div>
 )
 
-export const FormatItalic = ({className, ...props}) => (
+export const FormatItalic = ({ className, ...props }) => (
   <div className={`w-5 h-5 leading-tight italic ${className || ''}`} {...props}>
     i
   </div>
 )
 
-export const FormatUnderlined = ({className, ...props}) => (
+export const FormatUnderlined = ({ className, ...props }) => (
   <div className={`w-5 h-5 leading-none underline ${className || ''}`} {...props}>
     u
   </div>
 )
 
-export const ConceptIcon = ({className, ...props}) => (
+export const ConceptIcon = ({ className, ...props }) => (
   <div className={`w-5 h-5 leading-none ${className || ''}`} {...props}>
     [[
   </div>
+)
+
+export const Eyeslash = ({ className="" }) => (
+  <svg className={`w-5 h-5 ${className}`} viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.736 7.64a.37.37 0 0 1-.265-.11 2.166 2.166 0 0 1 3.06-3.06.375.375 0 0 1 0 .53L5 7.53a.37.37 0 0 1-.265.11zM6 4.585A1.417 1.417 0 0 0 4.77 6.7L6.7 4.77c-.21-.12-.45-.185-.7-.185z" fill="#6B7280" />
+    <path d="M2.8 9.255a.38.38 0 0 1-.245-.09A7.257 7.257 0 0 1 1.13 7.5c-.53-.825-.53-2.17 0-3C2.35 2.59 4.125 1.49 6 1.49c1.1 0 2.185.38 3.135 1.095a.375.375 0 0 1-.45.6c-.82-.62-1.75-.945-2.685-.945-1.615 0-3.16.97-4.24 2.665-.375.585-.375 1.605 0 2.19s.805 1.09 1.28 1.5c.155.135.175.37.04.53a.363.363 0 0 1-.28.13zM6 10.51a4.937 4.937 0 0 1-1.94-.4.375.375 0 0 1 .29-.69c.53.225 1.084.34 1.644.34 1.615 0 3.16-.97 4.24-2.665.375-.585.375-1.605 0-2.19a7.122 7.122 0 0 0-.505-.7.38.38 0 0 1 .055-.53c.16-.13.395-.11.53.055.195.24.385.5.555.77.53.825.53 2.17 0 3C9.65 9.41 7.874 10.51 6 10.51z" fill="#6B7280" />
+    <path d="M6.346 8.135a.379.379 0 0 1-.37-.305.368.368 0 0 1 .3-.435c.55-.1 1.01-.56 1.11-1.11a.38.38 0 0 1 .44-.3c.205.04.34.235.3.44-.16.865-.85 1.55-1.71 1.71-.025-.005-.045 0-.07 0zM1 11.375a.37.37 0 0 1-.264-.11.377.377 0 0 1 0-.53L4.47 7A.377.377 0 0 1 5 7a.377.377 0 0 1 0 .53l-3.735 3.735a.37.37 0 0 1-.265.11zM7.264 5.11A.37.37 0 0 1 7 5a.377.377 0 0 1 0-.53L10.734.735a.377.377 0 0 1 .53 0 .377.377 0 0 1 0 .53L7.53 5a.37.37 0 0 1-.265.11z" fill="#6B7280" />
+  </svg>
+)
+
+export const Close = ({ className="" }) => (
+  <svg className={`${className}`} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="m12 13.275 4.463 4.464a.908.908 0 0 0 1.276 0 .908.908 0 0 0 0-1.276L13.275 12l4.464-4.463a.908.908 0 0 0 0-1.276.908.908 0 0 0-1.276 0L12 10.725 7.537 6.26a.908.908 0 0 0-1.276 0 .908.908 0 0 0 0 1.276L10.725 12 6.26 16.463a.908.908 0 0 0 0 1.276.908.908 0 0 0 1.276 0L12 13.275z" />
+  </svg>
+)
+
+export const Search = ({ className="" }) => (
+  <svg className={`${className}`} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M11.5 21.75c-5.65 0-10.25-4.6-10.25-10.25S5.85 1.25 11.5 1.25s10.25 4.6 10.25 10.25-4.6 10.25-10.25 10.25zm0-19c-4.83 0-8.75 3.93-8.75 8.75s3.92 8.75 8.75 8.75 8.75-3.93 8.75-8.75-3.92-8.75-8.75-8.75zM22 22.75c-.19 0-.38-.07-.53-.22l-2-2a.754.754 0 0 1 0-1.06c.29-.29.77-.29 1.06 0l2 2c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22z" />
+  </svg>
+)
+
+export const AddCircle = ({className=""}) => (
+  <svg className={`${className}`} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12S6.07 1.25 12 1.25 22.75 6.07 22.75 12 17.93 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" fill="currentColor"/>
+    <path d="M16 12.75H8c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h8c.41 0 .75.34.75.75s-.34.75-.75.75z" fill="currentColor"/>
+    <path d="M12 16.75c-.41 0-.75-.34-.75-.75V8c0-.41.34-.75.75-.75s.75.34.75.75v8c0 .41-.34.75-.75.75z" fill="currentColor"/>
+</svg>
 )
diff --git a/components/inputs.jsx b/components/inputs.jsx
@@ -0,0 +1,25 @@
+import { useField, Form, FormikProps, Formik } from 'formik';
+
+
+export function Input({ className = '', inputClassName = '', ...props }) {
+  const [field, meta, helpers] = useField(props);
+
+  const validationClassName = meta.touched ? (meta.error ? 'error' : 'success') : ('')
+  return (
+    <div className={`flex flex-col ${className}`}>
+      <input className={`ipt ${validationClassName} ${inputClassName}`} {...props} />
+      {meta.error && (<span className="text-2xs uppercase text-ember pl-4">{meta.error.toString()}</span>)}
+    </div>
+  )
+}
+
+export function IconInput({ icon, className = '', inputClassName = '', ...props }) {
+  return (
+    <div className={`relative ${className}`}>
+      <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+        {icon}
+      </div>
+      <Input inputClassName={`pl-12 ${inputClassName}`} {...props} />
+    </div>
+  )
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const Button = (props) =>
		<button {...props}/>