style: minor fixes to components

package.json

@@ -38,13 +38,16 @@
     "react-dropzone": "^14.2.3",
     "react-number-format": "^4.6.4",
     "react-select": "^4.3.1",
+    "react-spring": "^9.5.5",
     "react-table": "^7.7.0",
     "styled-components": "^5.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
+    "@mdx-js/react": "^2.1.5",
     "@semantic-release/git": "^9.0.0",
     "@storybook/addon-actions": "^6.4.17",
+    "@storybook/addon-docs": "^6.5.13",
     "@storybook/addon-essentials": "^6.4.17",
     "@storybook/addon-links": "^6.4.17",
     "@storybook/builder-webpack5": "^6.4.17",

src/components/Button/Button.stories.tsx

@@ -59,3 +59,20 @@ WithIcon.args = {
   children: 'With icon',
   icon: polyIcons.DeleteOutline,
 };
+
+export const WithColoredIcon = Template.bind({});
+WithColoredIcon.args = {
+  variant: 'primary',
+  children: 'With icon',
+  fillIcon: false,
+  icon: polyIcons.GoogleColor,
+};
+
+export const WithCustomWidth = Template.bind({});
+WithCustomWidth.args = {
+  variant: 'primary',
+  children: 'With icon',
+  fillIcon: false,
+  icon: polyIcons.GoogleColor,
+  width: '300px'
+};

src/components/Button/Button.tsx

@@ -24,8 +24,10 @@ export type ButtonProps = PropsWithChildren<{
   size?: 's' | 'm' | 'l';
   disabled?: boolean;
   icon?: ComponentType;
+  fillIcon?: boolean,
   iconPosition?: 'left' | 'right';
   onClick?: () => void;
+  width?: string;
 }>;
 
 const sizeMap: Record<string, Record<string, string>> = {
@@ -41,11 +43,12 @@ const sizeMap: Record<string, Record<string, string>> = {
 };
 
 const Component = styled.button<ButtonProps>(
-  ({ theme, variant, margin, size }) => {
+  ({ theme, variant, margin, size, width }) => {
     return {
       ...(theme.BUTTON[variant] || {}),
       ...(size ? sizeMap[size] : {}),
       margin: getMargin({ theme, margin }),
+      ...(width && {width: width})
     };
   },
 );
@@ -58,28 +61,32 @@ const IconContainer = styled.span<any>(({ iconPosition }) => ({
   fontSize: '19px',
 }));
 
-const StyledIcon = styled(Icon)<any>(({ theme, themeVariant }) => {
+const StyledIcon = styled(Icon)<any>(({ theme, themeVariant, fillIcon }) => {
   return {
     color: theme.BUTTON[themeVariant].color,
-    svg: {
-      path: {
-        fill: theme.BUTTON[themeVariant].color,
-      },
-    },
+    ...(fillIcon && {
+      svg: {
+        path: {
+          fill: theme.BUTTON[themeVariant].color,
+        },
+      }
+    }),
   };
 });
 
 const renderIconContainer = (
   icon: ComponentType,
   variant: ButtonVariant,
   iconPosition: string = IconPosition.Left,
+  fillIcon: boolean
 ) => (
   <IconContainer iconPosition={iconPosition}>
     <StyledIcon
       themeVariant={variant}
       icon={icon}
       variant="basic"
       size="14px"
+      fillIcon={fillIcon}
     />
   </IconContainer>
 );
@@ -90,6 +97,7 @@ export function Button(buttonProps: ButtonProps) {
     size = 'm',
     icon,
     iconPosition,
+    fillIcon = true,
     children,
     variant,
     ...props
@@ -99,11 +107,11 @@ export function Button(buttonProps: ButtonProps) {
     <Component size={size} type={type} variant={variant} {...props}>
       {icon &&
         (!iconPosition || iconPosition === IconPosition.Left) &&
-        renderIconContainer(icon, variant, iconPosition)}
+        renderIconContainer(icon, variant, iconPosition, fillIcon)}
       {children}
       {icon &&
         iconPosition === IconPosition.Right &&
-        renderIconContainer(icon, variant, iconPosition)}
+        renderIconContainer(icon, variant, iconPosition, fillIcon)}
     </Component>
   );
 }

src/components/Icon/Icon.tsx

@@ -17,12 +17,13 @@ export type IconProps = {
   margin?: string;
   color?: string;
   bg?: string;
+  fillIcon?: boolean;
   scale?: number;
   rotate?: string;
 };
 
 const Component = styled.span<Omit<IconProps, 'icon'>>(
-  ({ variant, margin, size, bg, scale, rotate, color, theme }) => ({
+  ({ variant, margin, size, bg, scale, rotate, color, fillIcon, theme }) => ({
     ...(theme.ICON[variant] || {}),
     display: 'inline-block',
     margin: getMargin({ theme, margin }),
@@ -37,12 +38,14 @@ const Component = styled.span<Omit<IconProps, 'icon'>>(
       ...(scale ? { padding: `${(1 - scale) * 100}%` } : {}),
       ...(rotate ? { transform: `rotateZ(${rotate})` } : {}),
     },
-    'svg > *': {
-      ...theme.ICON[variant]['svg > *'],
-      ...(color || theme.ICON[variant].fill
-        ? { fill: color ? theme.COLOR[color] : theme.ICON[variant].fill }
-        : {}),
-    },
+    ...(fillIcon && {
+      'svg > *': {
+        ...theme.ICON[variant]['svg > *'],
+        ...(color || theme.ICON[variant].fill
+          ? { fill: color ? theme.COLOR[color] : theme.ICON[variant].fill }
+          : {}),
+      }
+    })
   }),
 );
 

src/components/Input/Input.stories.tsx

@@ -69,3 +69,12 @@ ReadOnly.args = {
   placeholder: "Can't type here",
   readOnly: true,
 };
+
+export const CustomWidth = Template.bind({});
+CustomWidth.args = {
+  variant: 'basic',
+  label: 'Texbox with a label',
+  tooltip: 'Some helpful imformation about this feild.',
+  placeholder: 'Input some text',
+  width: '300px'
+};

src/components/Input/Input.tsx

@@ -23,6 +23,7 @@ export enum LablePosition {
 export type InputProps = {
   variant: InputVariant;
   margin?: string;
+  width?: string;
   id?: string;
   name?: string;
   type?: 'text' | 'password' | 'email';
@@ -105,6 +106,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     const {
       variant,
       margin,
+      width,
       type,
       label,
       labelPosition = LablePosition.Top,
@@ -116,6 +118,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       disabled,
       readOnly,
       iconPosition,
+      inputRef,
       ...props
     } = inputProps;
 
@@ -155,7 +158,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <Flex
-        width="fit-content"
+        width={width ? width : "fit-content"}
         variant="basic"
         align={labelPosition === LablePosition.Left ? 'center' : 'start'}
         dir={labelPosition === LablePosition.Left ? 'row' : 'column'}
@@ -185,6 +188,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           )}
         </Box>
         <InputWrapper
+          width="100%"
           variant="raw"
           align="center"
           cols={`${icon ? 'auto ' : ''}1fr${unit ? ' auto' : ''}`}
@@ -196,7 +200,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             (!iconPosition || iconPosition === IconPosition.Left) &&
             renderIcon(icon, iconPosition, disabled)}
           <InputComponent
-            ref={ref}
+            {...(inputRef ? inputRef : {ref})}
             as={isAmount ? NumberInput : 'input'}
             {...componentProps}
           />

src/components/SidePanel/SidePanel.stories.tsx

@@ -0,0 +1,69 @@
+import { ComponentProps } from 'react';
+import { Story } from '@storybook/react';
+import { polyIcons } from '../../theme'
+
+import { SidePanel } from './SidePanel';
+
+export default {
+  title: 'Polyblocks/SidePanel',
+  component: SidePanel,
+};
+
+const Template: Story<ComponentProps<typeof SidePanel>> = (props: any) => (
+  <SidePanel {...props} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  items: [
+    {
+      icon: polyIcons.OfficeBuilding,
+      text: 'My Companies',
+      isActive: true,
+      onClick: () => {}
+    },
+    {
+      icon: polyIcons.PdfBox,
+      text: 'Dashboard',
+      onClick: () => {}
+    },
+    {
+      icon: polyIcons.Rocket,
+      text: 'My offerings',
+      onClick: () => {}
+    },
+    {
+      icon: polyIcons.FileDocumentOutline,
+      text: 'Cap table',
+      onClick: () => {}
+    }
+  ]
+};
+
+export const Expanded = Template.bind({});
+Expanded.args = {
+  items: [
+    {
+      icon: polyIcons.OfficeBuilding,
+      text: 'My Companies',
+      isActive: true,
+      onClick: () => {}
+    },
+    {
+      icon: polyIcons.PdfBox,
+      text: 'Dashboard',
+      onClick: () => {}
+    },
+    {
+      icon: polyIcons.Rocket,
+      text: 'My offerings',
+      onClick: () => {}
+    },
+    {
+      icon: polyIcons.FileDocumentOutline,
+      text: 'Cap table',
+      onClick: () => {}
+    }
+  ],
+  isExpanded: true
+};

src/components/SidePanel/SidePanel.tsx

@@ -0,0 +1,67 @@
+import { ComponentType, PropsWithChildren } from 'react';
+import styled from 'styled-components';
+import { Flex } from '../Flex';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+
+export type SidePanelVariant = 'default';
+
+export type SidePanelItem = {
+  text: string;
+  icon: ComponentType;
+  onClick: (event: React.MouseEvent<HTMLElement>) => void;
+  isActive?: boolean;
+}
+
+export type SidePanelProps = PropsWithChildren<{
+  items: SidePanelItem[],
+  isExpanded?: boolean;
+}>;
+
+const Component = styled(Flex)<any>(({ theme, isExpanded }) => ({
+  ...(theme.SIDE_PANEL.parent || {}),
+  ...(isExpanded && { width: '240px' })
+}));
+
+const StyledFlex = styled(Flex)<any>(({ theme, isActive, isExpanded }) => ({
+  ...(theme.SIDE_PANEL.item || {}),
+  ...(isActive && {
+    background: theme.COLOR.brandLightest,
+    svg: {
+      minWidth: '18px',
+      path: {
+        fill: theme.COLOR.brandMain
+      }
+    }
+  }),
+  '.item-text': {
+    ...theme.SIDE_PANEL.item['.item-text'],
+    ...(isActive && { p: { color: theme.COLOR.brandMain } }),
+    ...(isExpanded && { width: 'fit-content' })
+  }
+}));
+
+
+const Item = ({ item, isExpanded }: {item: SidePanelItem, isExpanded?: boolean }) => {
+  return (
+    <StyledFlex isExpanded={isExpanded} onClick={(e: React.MouseEvent<HTMLElement>) => item.onClick(e)} isActive={item.isActive} variant="raw" >
+      <Icon size="18px" variant="basic" icon={item.icon} />
+      <div className="item-text" >
+        <Text as="p" margin='0 0 0 19px' variant="b1m">{item.text}</Text>
+      </div>
+    </StyledFlex>
+  );
+}
+
+
+export function SidePanel(sidePanelProps: SidePanelProps) {
+  const { items, isExpanded } = sidePanelProps;
+
+  return (
+    <Component isExpanded={isExpanded} dir="column" >
+      {
+        items.map(item => <Item isExpanded={isExpanded} item={item} />)
+      }
+    </Component>
+  );
+}

src/components/SidePanel/index.ts

@@ -0,0 +1 @@
+export * from './SidePanel';

src/index.ts

@@ -58,3 +58,5 @@ export * from './components/TabBar';
 export * from './components/Table';
 export * from './components/ProfilePicture';
 export * from './components/SelectCard';
+export * from './components/SidePanel';
+export * from './components/Notification';

src/theme/definitions/launchpad.ts

@@ -246,6 +246,7 @@ export const BUTTON: Record<ButtonVariant, CSSPropertiesExtended> = {
   primary: {
     ...TYPOGRAPHY.btn,
     display: 'flex',
+    justifyContent: 'center',
     fontFamily: "'Poppins', sans-serif",
     lineHeight: '24px',
     color: COLOR.light,
@@ -275,6 +276,7 @@ export const BUTTON: Record<ButtonVariant, CSSPropertiesExtended> = {
   secondary: {
     ...TYPOGRAPHY.btn,
     display: 'flex',
+    justifyContent: 'center',
     fontFamily: "'Poppins', sans-serif",
     lineHeight: '24px',
     color: COLOR.brandMain,
@@ -307,6 +309,7 @@ export const BUTTON: Record<ButtonVariant, CSSPropertiesExtended> = {
   tertiary: {
     ...TYPOGRAPHY.btn,
     display: 'flex',
+    justifyContent: 'center',
     fontFamily: "'Poppins', sans-serif",
     lineHeight: '24px',
     color: COLOR.brandMain,
@@ -349,6 +352,7 @@ export const BUTTON: Record<ButtonVariant, CSSPropertiesExtended> = {
   special: {
     ...TYPOGRAPHY.btn,
     display: 'flex',
+    justifyContent: 'center',
     lineHeight: '22px',
     fontFamily: "'Poppins', sans-serif",
     fontSize: '14px',
@@ -381,17 +385,14 @@ export const BUTTON: Record<ButtonVariant, CSSPropertiesExtended> = {
 export const BOX: Record<BoxVariant, CSSPropertiesExtended> = {
   raw: {},
   basic: {
-    padding: GAP.m,
     backgroundColor: COLOR.light,
   },
   border: {
-    padding: GAP.m,
     backgroundColor: COLOR.light,
     border: `1px solid ${COLOR.gray3}`,
     borderRadius: RADIUS.m,
   },
   shadow: {
-    padding: GAP.m,
     backgroundColor: COLOR.light,
     borderRadius: RADIUS.m,
     boxShadow: SHADOW.s,
@@ -860,6 +861,39 @@ export const SELECT_CARD: CSSPropertiesExtended = {
   },
 };
 
+export const SIDE_PANEL: CSSPropertiesExtended = {
+  parent: {
+    width: '56px',
+    alignItems: 'center',
+    transition: 'all 0.2s ease-in-out',
+    '&:hover': {
+      width: '240px',
+      '.item-text': {
+        width: 'fit-content'
+      },
+    }
+  },
+  item: {
+    alignItems: 'center',
+    height: '48px',
+    width: '100%',
+    padding: '15px 19px',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+      background: COLOR.brandLightest
+    },
+    '.item-text': {
+      width: '0px',
+      overflow: 'hidden',
+    },
+    svg: {
+      minWidth: '18px'
+    }
+  }
+};
+
 export const CHIPS: Record<ChipsVariant, CSSPropertiesExtended> = {
   default: {
     ...TYPOGRAPHY.b2m,