feat: Navbar (#40)

.storybook/preview.js

@@ -3,12 +3,13 @@ import { withThemesProvider } from "themeprovider-storybook";
 import light from "../src/theme/light";
 import dark from "../src/theme/dark";
 import ResetCSS from "../src/ResetCSS";
+import { ModalProvider } from "../src/widgets/Modal";
 
 const globalDecorator = (StoryFn) => (
-  <>
+  <ModalProvider>
     <ResetCSS />
     <StoryFn />
-  </>
+  </ModalProvider>
 );
 
 export const parameters = {

src/components/Button/StyledButton.tsx

@@ -39,6 +39,7 @@ const StyledButton = styled.button<ButtonProps>`
   justify-content: center;
   outline: 0;
   padding: ${({ size }) => (size === "sm" ? "0 16px" : "0 24px")};
+  transition: background-color 0.2s;
 
   &:hover:not(:disabled):not(:active) {
     background-color: ${getButtonVariantProp("backgroundHover")};

src/components/Card/index.tsx

@@ -33,6 +33,7 @@ const Card = styled.div<CardProps>`
   box-shadow: ${getBoxShadow};
   color: ${({ theme }) => theme.colors.text};
   padding: 24px;
+  margin: 2px;
 `;
 
 Card.defaultProps = {

src/components/Flex/index.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Flex from "./index";
+import Text from "../Text";
+import Link from "../Link";
+
+export default {
+  title: "Flex",
+  component: Flex,
+  argTypes: {},
+};
+
+export const Default: React.FC = () => {
+  return (
+    <div>
+      <Text>You can apply any flexbox properties on the Flex component.</Text>
+      <Link href="https://styled-system.com/api#flexbox" target="_blank">
+        List of applicable props
+      </Link>
+      <Flex justifyContent="space-between" mt="40px">
+        <span>Left</span>
+        <span>right</span>
+      </Flex>
+      <Flex justifyContent="center" mt="8px">
+        <span>center</span>
+      </Flex>
+    </div>
+  );
+};

src/components/Flex/index.tsx

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { flexbox, space, FlexboxProps, SpaceProps } from "styled-system";
+
+export interface Props extends FlexboxProps, SpaceProps {}
+
+const Flex = styled.div<Props>`
+  display: flex;
+  ${flexbox}
+  ${space}
+`;
+
+export default Flex;

src/components/Heading/index.tsx

@@ -19,6 +19,7 @@ const style = {
 
 const Heading = styled(Text).attrs({ bold: true })<Props>`
   ${({ size }) => style[size || sizes.MD]}
+  font-weight:600;
   line-height: 1.1;
 `;
 

src/components/Link/index.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { PancakesIcon } from "../Svg";
 import Link from "./index";
 
 export default {
@@ -21,7 +22,15 @@ export default {
 export const Default: React.FC = () => {
   return (
     <div>
-      <Link href="/">Default</Link>
+      <div>
+        <Link href="/">Default</Link>
+      </div>
+      <div>
+        <Link href="/">
+          With icon
+          <PancakesIcon />
+        </Link>
+      </div>
     </div>
   );
 };

src/components/Link/index.tsx

@@ -1,13 +1,12 @@
 import styled from "styled-components";
+import { AnchorHTMLAttributes } from "react";
 import Text from "../Text";
 
-export interface Props {
-  fontSize?: string;
-  href: string;
-}
-
-const Link = styled(Text).attrs({ as: "a", bold: true })<Props>`
+const Link = styled(Text).attrs({ as: "a", bold: true })<AnchorHTMLAttributes<HTMLAnchorElement>>`
+  display: flex;
+  align-items: center;
   color: ${({ theme }) => theme.colors.primary};
+  width: fit-content;
   &:hover {
     text-decoration: underline;
   }

src/components/Overlay/index.tsx

@@ -10,8 +10,13 @@ const Overlay = styled.div.attrs({ role: "presentation" })<OverlayProps>`
   background-color: #452a7a;
   transition: opacity 0.4s;
   opacity: ${({ show }) => (show ? 0.6 : 0)};
-  z-index: 11;
+  z-index: ${({ zIndex }) => zIndex};
   pointer-events: ${({ show }) => (show ? "initial" : "none")};
 `;
 
+Overlay.defaultProps = {
+  show: false,
+  zIndex: 10,
+};
+
 export default Overlay;

src/components/Overlay/types.ts

@@ -1,3 +1,4 @@
 export type OverlayProps = {
   show: boolean;
+  zIndex?: number;
 };

src/components/Svg/Icons/Block.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Svg from "../Svg";
+import SvgProps from "../types";
 
-const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+const Icon: React.FC<SvgProps> = (props) => {
   return (
     <Svg viewBox="0 0 20 20" {...props}>
       <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM2 10C2 5.58 5.58 2 10 2C11.85 2 13.55 2.63 14.9 3.69L3.69 14.9C2.63 13.55 2 11.85 2 10ZM10 18C8.15 18 6.45 17.37 5.1 16.31L16.31 5.1C17.37 6.45 18 8.15 18 10C18 14.42 14.42 18 10 18Z" />

src/components/Svg/Icons/Checkmark.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Svg from "../Svg";
+import SvgProps from "../types";
 
-const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+const Icon: React.FC<SvgProps> = (props) => {
   return (
     <Svg viewBox="0 0 18 13" {...props}>
       <path d="M6 10.2001L2.5 6.70007C2.11 6.31007 1.49 6.31007 1.1 6.70007C0.709995 7.09007 0.709995 7.71007 1.1 8.10007L5.29 12.2901C5.68 12.6801 6.31 12.6801 6.7 12.2901L17.3 1.70007C17.69 1.31007 17.69 0.690068 17.3 0.300068C16.91 -0.0899316 16.29 -0.0899316 15.9 0.300068L6 10.2001Z" />

src/components/Svg/Icons/Close.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Svg from "../Svg";
+import SvgProps from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.10997 5.69997C6.71997 5.30997 6.08997 5.30997 5.69997 5.69997C5.30997 6.08997 5.30997 6.71997 5.69997 7.10997L10.59 12L5.69997 16.89C5.30997 17.28 5.30997 17.91 5.69997 18.3C6.08997 18.69 6.71997 18.69 7.10997 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z" />
+    </Svg>
+  );
+};
+
+export default Icon;

src/components/Svg/Icons/Error.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Svg from "../Svg";
+import SvgProps from "../types";
 
-const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+const Icon: React.FC<SvgProps> = (props) => {
   return (
     <Svg viewBox="0 0 20 20" {...props}>
       <path d="M10 5C10.55 5 11 5.45 11 6V10C11 10.55 10.55 11 10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5ZM9.99 0C4.47 0 0 4.48 0 10C0 15.52 4.47 20 9.99 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 9.99 0ZM10 18C5.58 18 2 14.42 2 10C2 5.58 5.58 2 10 2C14.42 2 18 5.58 18 10C18 14.42 14.42 18 10 18ZM11 15H9V13H11V15Z" />

src/components/Svg/Icons/Hamburger.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Svg from "../Svg";
+import SvgProps from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path d="M4 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H4C3.45 6 3 6.45 3 7Z" />
+    </Svg>
+  );
+};
+
+export default Icon;

src/components/Svg/Icons/Help.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Svg from "../Svg";
+import SvgProps from "../types";
 
-const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+const Icon: React.FC<SvgProps> = (props) => {
   return (
     <Svg viewBox="0 0 20 20" {...props}>
       <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM9 14H11V16H9V14ZM10.61 4.04C8.55 3.74 6.73 5.01 6.18 6.83C6 7.41 6.44 8 7.05 8H7.25C7.66 8 7.99 7.71 8.13 7.33C8.45 6.44 9.4 5.83 10.43 6.05C11.38 6.25 12.08 7.18 12 8.15C11.9 9.49 10.38 9.78 9.55 11.03C9.55 11.04 9.54 11.04 9.54 11.05C9.53 11.07 9.52 11.08 9.51 11.1C9.42 11.25 9.33 11.42 9.26 11.6C9.25 11.63 9.23 11.65 9.22 11.68C9.21 11.7 9.21 11.72 9.2 11.75C9.08 12.09 9 12.5 9 13H11C11 12.58 11.11 12.23 11.28 11.93C11.3 11.9 11.31 11.87 11.33 11.84C11.41 11.7 11.51 11.57 11.61 11.45C11.62 11.44 11.63 11.42 11.64 11.41C11.74 11.29 11.85 11.18 11.97 11.07C12.93 10.16 14.23 9.42 13.96 7.51C13.72 5.77 12.35 4.3 10.61 4.04Z" />

src/components/Svg/Icons/Logo.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Svg from "../Svg";
+import SvgProps from "../types";
 
-const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+const Icon: React.FC<SvgProps> = (props) => {
   return (
     <Svg viewBox="0 0 25 26" {...props}>
       <path

src/components/Svg/Icons/OpenNew.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Svg from "../Svg";
+import SvgProps from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path d="M18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H11C11.55 5 12 4.55 12 4C12 3.45 11.55 3 11 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V13C21 12.45 20.55 12 20 12C19.45 12 19 12.45 19 13V18C19 18.55 18.55 19 18 19ZM14 4C14 4.55 14.45 5 15 5H17.59L8.46 14.13C8.07 14.52 8.07 15.15 8.46 15.54C8.85 15.93 9.48 15.93 9.87 15.54L19 6.41V9C19 9.55 19.45 10 20 10C20.55 10 21 9.55 21 9V4C21 3.45 20.55 3 20 3H15C14.45 3 14 3.45 14 4Z" />
+    </Svg>
+  );
+};
+
+export default Icon;

src/components/Svg/Icons/Pancakes.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Svg from "../Svg";
+import SvgProps from "../types";
 
-const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+const Icon: React.FC<SvgProps> = (props) => {
   return (
     <Svg viewBox="0 0 64 64" {...props}>
       <path

src/components/Svg/Icons/Remove.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Svg from "../Svg";
+import SvgProps from "../types";
 
-const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+const Icon: React.FC<SvgProps> = (props) => {
   return (
     <Svg viewBox="0 0 20 20" {...props}>
       <path d="M5 10C5 10.55 5.45 11 6 11H14C14.55 11 15 10.55 15 10C15 9.45 14.55 9 14 9H6C5.45 9 5 9.45 5 10ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" />

src/components/Svg/Svg.tsx

@@ -1,13 +1,9 @@
-import { SVGAttributes } from "react";
-import styled, { DefaultTheme } from "styled-components";
-import { space, SpaceProps } from "styled-system";
+import styled from "styled-components";
+import { space } from "styled-system";
 import getThemeValue from "../../util/getThemeValue";
+import SvgProps from "./types";
 
-export interface Props extends SVGAttributes<HTMLOrSVGElement>, SpaceProps {
-  theme: DefaultTheme;
-}
-
-const Svg = styled.svg.attrs({ xmlns: "http://www.w3.org/2000/svg" })<Props>`
+const Svg = styled.svg.attrs({ xmlns: "http://www.w3.org/2000/svg" })<SvgProps>`
   fill: ${({ theme, color }) => getThemeValue(`colors.${color}`, color)(theme)};
   ${space}
 `;

src/components/Svg/index.tsx

@@ -1,8 +1,11 @@
 export { default as BlockIcon } from "./Icons/Block";
 export { default as CheckmarkIcon } from "./Icons/Checkmark";
+export { default as CloseIcon } from "./Icons/Close";
 export { default as ErrorIcon } from "./Icons/Error";
+export { default as HamburgerIcon } from "./Icons/Hamburger";
 export { default as HelpIcon } from "./Icons/Help";
 export { default as LogoIcon } from "./Icons/Logo";
+export { default as OpenNewIcon } from "./Icons/OpenNew";
 export { default as PancakesIcon } from "./Icons/Pancakes";
 export { default as RemoveIcon } from "./Icons/Remove";
 

src/components/Svg/types.ts

@@ -0,0 +1,7 @@
+import { SVGAttributes } from "react";
+import { DefaultTheme } from "styled-components";
+import { SpaceProps } from "styled-system";
+
+export default interface SvgProps extends SVGAttributes<HTMLOrSVGElement>, SpaceProps {
+  theme?: DefaultTheme;
+}

src/index.ts

@@ -13,4 +13,7 @@ export { default as ColorBox } from "./components/ColorBox";
 export { default as Toggle } from "./components/Toggle";
 export { default as ResetCSS } from "./ResetCSS";
 
+export * from "./widgets/Modal";
+export { default as Nav } from "./widgets/Nav";
+
 export * from "./theme";

src/theme/dark.ts

@@ -3,6 +3,7 @@ import { dark as darkButton } from "../components/Button/theme";
 import { dark as darkCard } from "../components/Card/theme";
 import { dark as darkTag } from "../components/Tag/theme";
 import { dark as darkToggle } from "../components/Toggle/theme";
+import { dark as darkNav } from "../widgets/Nav/theme";
 import base from "./base";
 import { darkColors } from "./colors";
 
@@ -14,6 +15,7 @@ const darkTheme: DefaultTheme = {
   card: darkCard,
   tag: darkTag,
   toggle: darkToggle,
+  nav: darkNav,
 };
 
 export default darkTheme;

src/theme/light.ts

@@ -3,6 +3,7 @@ import { light as lightButton } from "../components/Button/theme";
 import { light as lightCard } from "../components/Card/theme";
 import { light as lightTag } from "../components/Tag/theme";
 import { light as lightToggle } from "../components/Toggle/theme";
+import { light as lightNav } from "../widgets/Nav/theme";
 import base from "./base";
 import { lightColors } from "./colors";
 
@@ -14,6 +15,7 @@ const lightTheme: DefaultTheme = {
   card: lightCard,
   tag: lightTag,
   toggle: lightToggle,
+  nav: lightNav,
 };
 
 export default lightTheme;

src/theme/types.ts

@@ -2,6 +2,7 @@ import { ButtonTheme } from "../components/Button/types";
 import { CardTheme } from "../components/Card/types";
 import { TagTheme } from "../components/Tag/types";
 import { ToggleTheme } from "../components/Toggle/types";
+import { NavTheme } from "../widgets/Nav/types";
 
 export type Breakpoints = string[];
 
@@ -54,6 +55,7 @@ export interface PancakeTheme {
   button: ButtonTheme;
   card: CardTheme;
   tag: TagTheme;
+  nav: NavTheme;
   toggle: ToggleTheme;
   breakpoints: Breakpoints;
   mediaQueries: MediaQueries;