Add improvements for tabs and box (#105)

* Add Messages

* Add story improvements

* Add index.ts which didn't update

* Update Message.stories.mdx

* Update Message.tsx

* Add icon fix

* Add improvements for Tabs and Box

* No empty interface

Co-authored-by: Elena Kazakova <[email protected]>

Author: jphawk

src/components/box/Box.tsx

@@ -31,7 +31,8 @@ type BoxProps = {
     | "spacing07"
     | "spacing08";
   shadow?: "shadow01" | "shadow02" | "shadow03" | "shadow04";
-
+  onClick?: (e: any) => void;
+  onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
   children?: React.ReactNode;
 };
 

src/components/tabs/Tabs.tsx

@@ -40,7 +40,7 @@ interface ButtonNextProps {
   onClick?: (e: any) => void;
 }
 
-const TabsContent = styled(Box)`
+export const TabsContent = styled(Box)`
   background-color: ${theme.colors.snowwhite};
   border-top: ${theme.borders.grey};
   border-top-left-radius: 0;
@@ -58,7 +58,7 @@ const TabsContent = styled(Box)`
   }
 `;
 
-const TabContainer: any = styled.li<TabProps>`
+export const TabContainer: any = styled.li<TabProps>`
   display: inline-block;
   list-style: none;
   margin-bottom: -1px;
@@ -248,3 +248,10 @@ export const Tabs: FunctionComponent<TabsProps> = ({
     </TabsWrapper>
   );
 };
+
+export const StyledTab: FunctionComponent<ButtonNextProps> = ({
+  onClick,
+  children,
+}) => {
+  return <NextButton onClick={onClick}>{children}</NextButton>;
+};