From b53a1e82aed919cd85fa5a23763626fc1e329395 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Thu, 6 May 2021 01:43:43 +0100
Subject: [PATCH] Update box component

---
 src/components/Box/index.tsx | 5 +++++
 src/components/Box/styles.ts | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx
index cb3004c..8d74074 100644
--- a/src/components/Box/index.tsx
+++ b/src/components/Box/index.tsx
@@ -5,6 +5,9 @@ export type BoxProps = {
   className?: string;
   children?: React.ReactNode | JSX.Element | string;
 
+  onClick?: () => void;
+  cursor?: 'pointer' | 'default';
+
   position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
   zIndex?: string;
   top?: string;
@@ -40,6 +43,8 @@ export type BoxProps = {
     | 'flex-end'
     | 'space-between'
     | 'space-around';
+  alignSelf?: 'center' | 'flex-start' | 'flex-end';
+  justifySelf?: 'center' | 'flex-start' | 'flex-end';
 
   boxSizing?: 'content-box' | 'border-box';
   width?: string;
diff --git a/src/components/Box/styles.ts b/src/components/Box/styles.ts
index 87743c6..e42c602 100644
--- a/src/components/Box/styles.ts
+++ b/src/components/Box/styles.ts
@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import { BoxProps } from '.';
 
 export const Wrapper = styled.div<BoxProps>`
+  ${({ cursor }) => cursor && `cursor: ${cursor}`}
+
   ${({ position }) => position && `position: ${position}`};
   ${({ zIndex }) => zIndex && `z-index: ${zIndex}`};
   ${({ top }) => top && `top: ${top}`};
@@ -36,6 +38,8 @@ export const Wrapper = styled.div<BoxProps>`
   ${({ alignItems }) => alignItems && `align-items: ${alignItems}`};
   ${({ justifyContent }) =>
     justifyContent && `justify-content: ${justifyContent}`};
+  ${({ alignSelf }) => alignSelf && `align-self: ${alignSelf}`};
+  ${({ justifySelf }) => justifySelf && `justify-self: ${justifySelf}`};
 
   ${({ boxSizing }) => boxSizing && `box-sizing: ${boxSizing}`};
   ${({ width }) => width && `width: ${width}`};