feat(components): added calendar component

docs/src/components/Sidebar.js

@@ -56,6 +56,10 @@ const sidebarLinks = [
     name: 'Tabs',
     ref: '/tab',
   },
+  {
+    name: 'Calendar',
+    ref: '/calendar',
+  },
 ];
 
 export const cssNavLink = css`

docs/src/pages/calendar.md

@@ -0,0 +1,21 @@
+# Button
+
+Primitive button component with variants
+
+<Editor>
+
+```jsx
+<Calendar onChange={date => console.log(date)} />
+```
+
+</Editor>
+
+## props
+
+| prop         | type   | desc                                                   |
+| ------------ | ------ | ------------------------------------------------------ |
+| onChange     | func   | Callback fired whenever there is a change in the date. |
+| onClickDay   | func   | callback fired when the day is clicked.                |
+| onClickMonth | func   | callback fired when the month is clicked               |
+| onClickYear  | func   | callback fired when the year is clicked                |
+| variant      | string |

docs/src/theme.js

@@ -245,7 +245,7 @@ export default {
       },
     },
   },
-  
+
   inputGroup: {
     primary: {
       marginTop: '10px',
@@ -259,6 +259,18 @@ export default {
       },
     },
   },
+  calendar: {
+    primary: {
+      wrapper: {
+        color: '#777777',
+        height: '351px',
+        width: '344px',
+        borderRadius: '5px',
+        bg: 'background',
+        boxShadow: '0 0 7px 0 rgba(0, 0, 0, 0.15)',
+      },
+    },
+  },
 
   collapse: {
     primary: {
@@ -298,7 +310,6 @@ export default {
       separater: {
         mx: 3,
       },
-
     },
   },
 };

src/components/calendar/assets.js

@@ -0,0 +1,41 @@
+import React from "react";
+
+const ArrowDown = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    viewBox="0 0 16 6"
+  >
+    <path
+      fill="none"
+      fillRule="evenodd"
+      stroke="#979797"
+      strokeLinecap="round"
+      strokeLinejoin="bevel"
+      strokeWidth="1.5"
+      d="M15.25 1.234L8.125 5 1 1.234"
+    />
+  </svg>
+);
+
+const ArrowUp = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    viewBox="0 0 16 6"
+  >
+    <path
+      fill="none"
+      fillRule="evenodd"
+      stroke="#979797"
+      strokeLinecap="round"
+      strokeLinejoin="bevel"
+      strokeWidth="1.5"
+      d="M1 4.766L8.125 1l7.125 3.766"
+    />
+  </svg>
+);
+
+export { ArrowDown, ArrowUp };

src/components/calendar/component.js

@@ -0,0 +1,138 @@
+import { Box, css, Flex, Text } from 'theme-ui';
+import styled from '@emotion/styled';
+import { applyVariation } from '../../utils/getStyles';
+
+const DatesButton = styled(Text)`
+  ${({ theme, currentMonth = true, active = false }) =>
+    css({
+      textTransform: 'uppercase',
+      fontSize: '14px',
+      color: active ? 'rgba(0, 166, 251,1)' : 'inherit',
+      opacity: currentMonth ? 1 : 0.5,
+      '&:hover': {
+        color: 'rgba(0, 166, 251,0.8)',
+      },
+      cursor: 'pointer',
+    })(theme)}
+  ${({ theme, variant }) =>
+    applyVariation(theme, `${variant}.date`, 'calendar')}
+`;
+
+const Wrapper = styled(Box)(({ theme, variant }) =>
+  applyVariation(theme, `${variant}.wrapper`, 'calendar')
+);
+
+const Line = styled(Box)`
+  ${({ theme }) =>
+    css({
+      width: '10px',
+      height: '2px',
+      bg: '#4a4a4a',
+      mr: 20,
+      ml: 20,
+    })(theme)}
+  ${({ theme, variant }) =>
+    applyVariation(theme, `${variant}.line`, 'calendar')}
+`;
+const DaysTable = styled.table`
+  ${({ theme }) =>
+    css({
+      height: '92%',
+      width: '95%',
+      textAlign: 'center',
+    })(theme)}
+  ${({ theme, variant }) =>
+    applyVariation(theme, `${variant}.daysTable`, 'calendar')}
+`;
+const MonthsTable = styled.table`
+  ${({ theme }) =>
+    css({
+      height: '85%',
+      width: '90%',
+      textAlign: 'center',
+      mt: 10,
+      alignSelf: 'center',
+    })(theme)}
+  ${({ theme, variant }) =>
+    applyVariation(theme, `${variant}.monthsTable`, 'calendar')}
+`;
+const YearsTable = styled.table`
+  ${({ theme }) =>
+    css({
+      height: '85%',
+      width: '90%',
+      textAlign: 'center',
+      alignSelf: 'center',
+    })(theme)}
+  ${({ theme, variant }) =>
+    applyVariation(theme, `${variant}.yearsTable`, 'calendar')}
+`;
+
+const OuterWrapper = styled(Flex)`
+  ${({ theme }) =>
+    css({
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%',
+      p: '20px 0',
+      alignItems: 'center',
+    })(theme)}
+`;
+
+const HeaderText = styled(Text)`
+  ${({ theme }) =>
+    css({
+      color: 'inherit',
+      fontSize: '20px',
+      textTransform: 'uppercase',
+      '&:hover': {
+        color: 'rgba(0, 166, 251,0.8)',
+      },
+      cursor: 'pointer',
+    })(theme)}
+  ${({ theme, variant }) =>
+    applyVariation(theme, `${variant}.headerText`, 'calendar')}
+`;
+
+const HeaderContainer = styled(Flex)`
+  ${({ theme }) =>
+    css({
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    })(theme)}
+`;
+const DaysText = styled.table`
+  ${({ theme }) =>
+    css({
+      textTransform: 'uppercase',
+      color: '#5c5c5c',
+      fontSize: 14,
+    })(theme)}
+  ${({ theme, variant }) =>
+    applyVariation(theme, `${variant}.daysText`, 'calendar')}
+`;
+const ArrowIcon = styled(Box)`
+  ${({ theme }) =>
+    css({
+      cursor: 'pointer',
+      width: 17,
+      height: 27,
+    })(theme)}
+  ${({ theme, variant }) =>
+    applyVariation(theme, `${variant}.arrowIcon`, 'calendar')}
+`;
+
+export {
+  Wrapper,
+  OuterWrapper,
+  DaysTable,
+  MonthsTable,
+  YearsTable,
+  HeaderText,
+  HeaderContainer,
+  Line,
+  DatesButton,
+  DaysText,
+  ArrowIcon,
+};

src/components/calendar/dates.js

@@ -0,0 +1,26 @@
+const months = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
+
+const initialYears = [
+  [2013, 2014, 2015],
+  [2016, 2017, 2018],
+  [2019, 2020, 2021],
+  [2022, 2023, 2024],
+  [2025, 2026, 2027],
+];
+
+export { months, days, initialYears };