Create first workable system

React components, templates, layouts and pages added

Author: anitsh

src/@types/gatsby-plugin-google-analytics.d.ts

@@ -0,0 +1,4 @@
+declare module 'gatsby-plugin-google-analytics' {
+  let OutboundLink: (props: any) => JSX.Element;
+  export { OutboundLink };
+}

src/@types/mdx.d.ts

@@ -0,0 +1,4 @@
+declare module '@mdx-js/react' {
+  let MDXProvider: (props: any) => JSX.Element;
+  export { MDXProvider };
+}

src/@types/react-anchor-link-smooth-scroll.d.ts

@@ -0,0 +1,4 @@
+declare module 'react-anchor-link-smooth-scroll' {
+  let AnchorLink: (props: any) => JSX.Element;
+  export default AnchorLink;
+}

src/@types/react-typist.d.ts

@@ -0,0 +1 @@
+declare module 'react-typist';

src/components/Button/Button.tsx

@@ -0,0 +1,168 @@
+import { ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import styled from '../../utils/styled';
+import React from 'react';
+interface ButtonProps {
+  primary?: boolean;
+  secondary?: boolean;
+  tertiary?: boolean;
+  white?: boolean;
+  danger?: boolean;
+  disabled?: boolean;
+  children: ReactNode;
+  onClick?: () => any;
+}
+
+const StyledButton = styled(motion.button)<ButtonProps>`
+  height: 48px;
+  margin: 0;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  font-weight: 600;
+  outline: none;
+  padding: 0 30px;
+  border-radius: 4px;
+
+  ${(p) =>
+    p.primary
+      ? `
+      background-color: ${p.theme.colors.blue};
+      color: ${p.theme.colors.white};
+      min-width: 150px;
+
+  ${
+    p.danger
+      ? `
+        background-color: ${p.theme.colors.red};
+            `
+      : ''
+  }
+
+  ${
+    p.disabled
+      ? `
+      cursor: not-allowed;
+      opacity: 0.5;
+      background-color: ${p.theme.colors.gray};
+      color: #000000;
+      &:hover {
+        transform: none;
+      }
+        `
+      : ''
+  }
+  
+      `
+      : ''};
+
+  ${(p) =>
+    p.secondary
+      ? `
+      background-color: transparent;
+      color: ${p.theme.colors.blue};
+      border: 2px solid ${p.theme.colors.blue};
+      min-width: 150px;
+
+  ${
+    p.danger
+      ? `
+          color: ${p.theme.colors.red};
+          border-color: ${p.theme.colors.red};
+        `
+      : ''
+  }
+
+  ${
+    p.disabled
+      ? `
+      cursor: not-allowed;
+      opacity: 0.5;
+      color: ${p.theme.colors.gray};
+      border-color: ${p.theme.colors.gray};
+      &:hover {
+        transform: none;
+      }
+        `
+      : ''
+  }
+
+      `
+      : ''};
+
+  ${(p) =>
+    p.tertiary
+      ? `
+      background-color: transparent;
+      color: ${p.theme.colors.blue};
+      min-width: inherited;
+      padding: 0px;
+
+      ::after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 96%;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: ${p.theme.colors.blue};
+        transform: scaleX(0);
+        transition: transform 0.25s ease-in;
+        transform-origin: right center;
+        text-decoration: none;
+      }
+    
+      &:hover::after {
+        transform: scale(1);
+        transform-origin: left center;
+      }
+
+      ${
+        p.danger
+          ? `
+              color: ${p.theme.colors.red};
+              ::after { 
+                background-color: ${p.theme.colors.red};
+              }
+            `
+          : ''
+      }
+
+      ${
+        p.disabled
+          ? `
+              opacity: 0.5;
+              cursor: not-allowed;
+              color: ${p.theme.colors.gray};
+              ::after { 
+                background-color: ${p.theme.colors.gray};
+              }
+            `
+          : ''
+      }
+          `
+      : ''};
+`;
+
+const Button = React.forwardRef(
+  ({ children, ...props }: ButtonProps, ref: React.Ref<HTMLButtonElement>) => {
+    return (
+      <StyledButton
+        whileHover={props.tertiary ? {} : { scale: 0.85 }}
+        transition={{ duration: 0.1 }}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </StyledButton>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button };

src/components/Button/LinkButton.tsx

@@ -0,0 +1,24 @@
+import styled from '../../utils/styled';
+
+const LinkButton = styled('button')`
+  border-radius: 4px;
+  padding: 4px 10px;
+  width: 100%;
+  height: 40px;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  transition: 0.4s;
+
+  > * {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &:hover {
+    background-color: ${(p) => p.theme.foregroundColor};
+  }
+`;
+
+export { LinkButton };

src/components/Button/__tests__/Button.spec.tsx

@@ -0,0 +1,37 @@
+import { cleanup, render } from '@testing-library/react';
+import { ThemeProvider } from 'emotion-theming';
+import 'jest-dom/extend-expect';
+import React from 'react';
+import Button from '../';
+import theme from '../../../theme';
+
+describe('Button', () => {
+  beforeEach(cleanup);
+
+  it('renders the primary button', () => {
+    const component = render(
+      <ThemeProvider theme={theme.light}>
+        <Button primary={true}>Test</Button>
+      </ThemeProvider>
+    );
+    expect(component.baseElement).toMatchSnapshot();
+  });
+
+  it('renders the secondary button', () => {
+    const component = render(
+      <ThemeProvider theme={theme.light}>
+        <Button secondary={true}>Test</Button>
+      </ThemeProvider>
+    );
+    expect(component.baseElement).toMatchSnapshot();
+  });
+
+  it('renders the tertiary button', () => {
+    const component = render(
+      <ThemeProvider theme={theme.light}>
+        <Button tertiary={true}>Test</Button>
+      </ThemeProvider>
+    );
+    expect(component.baseElement).toMatchSnapshot();
+  });
+});