chore(): add className to root components in design system, disable t…

tslint.json

@@ -15,7 +15,8 @@
     "only-arrow-functions": false,
     "prettier": true,
     "react-hooks-nesting": "error",
-    "import-name": false
+    "import-name": false,
+    "jsx-no-lambda:": false
   },
   "rulesDirectory": ["tslint-plugin-prettier"]
 }

ui/design/src/components/Cards/apps-widget-card.tsx

@@ -6,6 +6,7 @@ import { SubtitleTextIcon, TextIcon } from '../TextIcon/index';
 import { BasicCardBox } from './index';
 
 export interface IAppsWidgetCardProps {
+  className?: string;
   onClick: React.EventHandler<React.SyntheticEvent>;
   margin?: MarginInterface;
   label: string;
@@ -22,10 +23,10 @@ export interface IAppsData {
 }
 
 const AppsWidgetCard: React.FC<IAppsWidgetCardProps> = props => {
-  const { onClick, margin, iconType, label, labelColor, dataSource } = props;
+  const { className, onClick, margin, iconType, label, labelColor, dataSource } = props;
 
   return (
-    <BasicCardBox>
+    <BasicCardBox className={className}>
       <Box pad="medium" gap="medium">
         <TextIcon
           iconType={iconType}

ui/design/src/components/Cards/entry-card.tsx

@@ -4,6 +4,7 @@ import { IEntryData } from './entry-box';
 import { BasicCardBox, EntryBox } from './index';
 
 export interface IEntryCardProps {
+  className?: string;
   entryData: IEntryData;
   onClickAvatar: React.EventHandler<React.SyntheticEvent>;
   onClickUpvote: React.EventHandler<React.SyntheticEvent>;
@@ -26,6 +27,7 @@ export interface IEntryCardProps {
 
 const EntryCard: React.FC<IEntryCardProps> = props => {
   const {
+    className,
     entryData,
     onClickAvatar,
     onClickDownvote,
@@ -47,7 +49,7 @@ const EntryCard: React.FC<IEntryCardProps> = props => {
   } = props;
 
   return (
-    <BasicCardBox>
+    <BasicCardBox className={className}>
       <EntryBox
         entryData={entryData}
         onClickAvatar={onClickAvatar}

ui/design/src/components/Cards/profile-card.tsx

@@ -30,6 +30,7 @@ export interface IProfileData {
 }
 
 export interface IProfileCardProps {
+  className?: string;
   onClickApps: React.EventHandler<React.SyntheticEvent>;
   onClickFollowing: React.EventHandler<React.SyntheticEvent>;
   margin?: MarginInterface;
@@ -45,6 +46,7 @@ export interface IProfileCardProps {
 
 const ProfileCard: React.FC<IProfileCardProps> = props => {
   const {
+    className,
     onClickFollowing,
     onClickApps,
     profileData,
@@ -63,7 +65,7 @@ const ProfileCard: React.FC<IProfileCardProps> = props => {
   const rightSubtitle = profileData.profileType === 'dapp' ? actionsTitle : appsTitle;
 
   return (
-    <BasicCardBox>
+    <BasicCardBox className={className}>
       <Box
         height="144px"
         background={profileData.coverImage}

ui/design/src/components/IconButton/icon-button.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import StyledIconButton from './styled-icon-button';
 interface IIconButtonProps {
+  className?: string;
   icon: React.ReactElement;
   label: string;
   onClick?: () => void;
@@ -9,7 +10,7 @@ interface IIconButtonProps {
 }
 
 const IconButton = (props: IIconButtonProps) => {
-  return <StyledIconButton {...props} />;
+  return <StyledIconButton className={props.className} {...props} />;
 };
 
 export default IconButton;

ui/design/src/components/IconButton/icon-link.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import StyledIconLink from './styled-icon-link';
 
 interface LinkIconButtonProps {
+  className?: string;
   onClick: React.EventHandler<React.SyntheticEvent>;
   iconPosition?: 'start' | 'end';
   icon: React.ReactElement;
@@ -11,7 +12,7 @@ interface LinkIconButtonProps {
 const LinkIconButton = (props: LinkIconButtonProps) => {
   const { iconPosition = 'start', ...other } = props;
   const reversed = iconPosition && iconPosition === 'end';
-  return <StyledIconLink reverse={reversed} {...other} />;
+  return <StyledIconLink className={props.className} reverse={reversed} {...other} />;
 };
 
 export default LinkIconButton;

ui/design/src/components/IconButton/vote-icon-button.tsx

@@ -4,6 +4,7 @@ import { Icon } from '../Icon';
 import StyledIconButton from './styled-icon-button';
 
 interface IVoteIconProps {
+  className?: string;
   voteType: 'upvote' | 'downvote';
   voteCount: number | string;
   onClick: any;
@@ -14,11 +15,12 @@ const StyledVoteIconButton = styled(StyledIconButton)`
   box-sizing: border-box;
 `;
 const VoteIconButton = (props: IVoteIconProps) => {
-  const { voteType, voteCount, onClick, voted } = props;
+  const { className, voteType, voteCount, onClick, voted } = props;
   const iconType = voteType === 'upvote' ? 'thumbsUpWhite' : 'thumbsDownWhite';
 
   return (
     <StyledVoteIconButton
+      className={className}
       reverse={true}
       label={`${voteCount}`}
       icon={<Icon type={iconType} />}

ui/design/src/components/Input/comment-input.tsx

@@ -6,6 +6,7 @@ import { Avatar } from '../Avatar/index';
 import { Icon } from '../Icon/index';
 
 interface ICommentInput {
+  className?: string;
   avatarImg: any;
   placeholderTitle: string;
   publishTitle: string;
@@ -23,7 +24,7 @@ const StyledDiv = styled.div`
 `;
 
 const CommentInput: React.FC<ICommentInput> = props => {
-  const { avatarImg, placeholderTitle, onPublish, publishTitle } = props;
+  const { avatarImg, className, placeholderTitle, onPublish, publishTitle } = props;
   const [inputValue, setInputValue] = useState('');
   const [textAreaOpen, setTextAreaOpen] = useState(false);
 
@@ -109,7 +110,7 @@ const CommentInput: React.FC<ICommentInput> = props => {
   };
 
   return (
-    <Box direction="row" gap="xsmall" fill="horizontal" pad="none">
+    <Box direction="row" gap="xsmall" fill="horizontal" pad="none" className={className}>
       <div>
         <Avatar src={avatarImg} size="md" roundedCorners={true} />
       </div>

ui/design/src/components/Input/search-input.tsx

@@ -4,6 +4,7 @@ import { Icon } from '../Icon/index';
 import { StyledDrop, StyledSelectBox } from './styled-search-input';
 
 interface ICustomSearchInput {
+  className?: string;
   getData: () => void;
   dataSource: any;
   placeholder: string;
@@ -13,7 +14,7 @@ interface ICustomSearchInput {
 }
 
 const SearchInput: React.FC<ICustomSearchInput> = props => {
-  const { dataSource, placeholder, usersTitle, tagsTitle, appsTitle, getData } = props;
+  const { className, dataSource, placeholder, usersTitle, tagsTitle, appsTitle, getData } = props;
   const [inputValue, setInputValue] = useState('');
   const [dropOpen, setDropOpen] = useState(false);
   const [suggestions, setSuggestions] = useState<any>({ users: [], tags: [], apps: [] });
@@ -172,6 +173,7 @@ const SearchInput: React.FC<ICustomSearchInput> = props => {
         side: 'all',
         color: 'border',
       }}
+      className={className}
     >
       <Icon type="search" />
       <TextInput

ui/design/src/components/Popovers/basic-popover.tsx

@@ -2,14 +2,15 @@ import * as React from 'react';
 import { StyledDrop } from './styled-drop';
 
 interface IBasicPopover {
+  className?: string;
   children: any;
   closePopover: () => {};
   target: React.RefObject<any>;
   gap?: string;
 }
 
 const BasicPopover: React.FC<IBasicPopover> = ({ children, ...props }) => {
-  const { target, closePopover, gap } = props;
+  const { className, target, closePopover, gap } = props;
   return (
     <StyledDrop
       overflow="hidden"
@@ -18,6 +19,7 @@ const BasicPopover: React.FC<IBasicPopover> = ({ children, ...props }) => {
       align={{ top: 'bottom', right: 'left' }}
       onClickOutside={closePopover}
       onEsc={closePopover}
+      className={className}
     >
       {children}
     </StyledDrop>

ui/design/src/components/Popovers/notifications-popover.tsx

@@ -5,6 +5,7 @@ import BasicPopover from './basic-popover';
 import { StyledListContainer, StyledListElem } from './styled-drop';
 
 interface INotificationsPopover {
+  className?: string;
   onClickNotification: () => void;
   dataSource: INotification[];
   target: React.RefObject<any>;
@@ -19,9 +20,9 @@ interface INotification {
 }
 
 const NotificationsPopover: React.FC<INotificationsPopover> = props => {
-  const { closePopover, dataSource, onClickNotification, target } = props;
+  const { className, closePopover, dataSource, onClickNotification, target } = props;
   return (
-    <BasicPopover closePopover={closePopover} target={target} gap={'-5px'}>
+    <BasicPopover closePopover={closePopover} target={target} gap={'-5px'} className={className}>
       <StyledListContainer pad={{ vertical: 'small', horizontal: 'xxsmall' }} overflow="scroll">
         {dataSource &&
           dataSource.map((notification, index) => (

ui/design/src/components/TextIcon/subtitle-text-icon.tsx

@@ -5,6 +5,7 @@ import { IconType } from '../Icon/icon';
 import { IconDiv, StyledBox } from './styled-subtitle-text-icon';
 
 interface ISubtitleTextIcon {
+  className?: string;
   iconType?: IconType;
   iconSize?: string;
   label: string;
@@ -18,6 +19,7 @@ interface ISubtitleTextIcon {
 
 const SubtitleTextIcon: React.FC<ISubtitleTextIcon> = props => {
   const {
+    className,
     iconType,
     iconSize,
     label,
@@ -30,7 +32,7 @@ const SubtitleTextIcon: React.FC<ISubtitleTextIcon> = props => {
   } = props;
 
   return (
-    <StyledBox direction="row" justify="center" onClick={onClick}>
+    <StyledBox direction="row" justify="center" onClick={onClick} className={className}>
       {iconType ? (
         <IconDiv iconSize={iconSize}>
           <Icon type={iconType} />

ui/design/src/components/TextIcon/text-icon.tsx

@@ -5,6 +5,7 @@ import { IconType } from '../Icon/icon';
 import { StyledText, StyledTextIcon } from './styled-text-icon';
 
 export interface ITextIconProps {
+  className?: string;
   onClick?: React.EventHandler<React.SyntheticEvent>;
   margin?: MarginInterface;
   backgroundColor?: string;
@@ -35,6 +36,7 @@ const actionTypeIcons: {
 
 const TextIcon: React.FC<ITextIconProps> = props => {
   const {
+    className,
     onClick,
     margin,
     backgroundColor,
@@ -58,6 +60,7 @@ const TextIcon: React.FC<ITextIconProps> = props => {
         iconType={iconType}
         spacing={spacing}
         clickable={clickable}
+        className={className}
       >
         <Icon type={actionTypeIcons[actionType]} color={color} />
         <StyledText bold={bold}>{actionType}</StyledText>

ui/design/src/components/Topbar/topbar.tsx

@@ -13,6 +13,7 @@ const AvatarButton = styled(ProfileAvatarButton)`
 `;
 
 interface ITopbarProps {
+  className?: string;
   avatarImage: string;
   userName: string;
   brandLabel: string | React.ReactElement;
@@ -27,6 +28,7 @@ const Topbar = (props: ITopbarProps) => {
   const {
     avatarImage,
     brandLabel,
+    className,
     userName,
     unreadNotifications,
     notificationsData,
@@ -35,16 +37,37 @@ const Topbar = (props: ITopbarProps) => {
   } = props;
   const notificationIconRef: React.Ref<any> = React.useRef();
   const walletIconRef: React.Ref<any> = React.useRef();
+
   const [notificationsOpen, setNotificationsOpen] = React.useState(false);
   const [walletOpen, setWalletOpen] = React.useState(false);
+
   const handleNavigation = (path: string) => (ev: React.SyntheticEvent) => {
     if (onNavigation) {
       onNavigation(path);
     }
   };
 
+  const handleNotifClick = () => {
+    setNotificationsOpen(!notificationsOpen);
+  };
+
+  const handleWalletClick = () => {
+    setWalletOpen(!walletOpen);
+  };
+
+  const closePopover = () => {
+    setNotificationsOpen(false);
+  };
+
   return (
-    <Box direction="row" pad="small" justify="between" align="center" fill={true}>
+    <Box
+      direction="row"
+      pad="small"
+      justify="between"
+      align="center"
+      fill={true}
+      className={className}
+    >
       <Box direction="row">{brandLabel}</Box>
       <Box direction="row">
         <Box
@@ -53,24 +76,19 @@ const Topbar = (props: ITopbarProps) => {
           justify="center"
           margin={{ horizontal: 'xsmall' }}
         >
-          <Icon
-            type="notifications"
-            onClick={() => setNotificationsOpen(!notificationsOpen)}
-            clickable={true}
-            default={true}
-          />
+          <Icon type="notifications" onClick={handleNotifClick} clickable={true} default={true} />
         </Box>
 
         {notificationIconRef.current && notificationsOpen && notificationsData && (
           <NotificationsPopover
             target={notificationIconRef.current}
             dataSource={notificationsData}
             onClickNotification={onNotificationClick}
-            closePopover={() => setNotificationsOpen(false)}
+            closePopover={closePopover}
           />
         )}
         <Box ref={walletIconRef} align="center" justify="center" margin="xsmall">
-          <Icon type="wallet" onClick={() => setWalletOpen(!walletOpen)} clickable={true} />
+          <Icon type="wallet" onClick={handleWalletClick} clickable={true} />
         </Box>
 
         <Box pad={{ left: 'xsmall' }}>