Merge pull request #62 from kleros/feat/dropdown-bubble

feat: dropdown-cascader-number-bubble

Author: alcercu

src/App.tsx

@@ -32,6 +32,7 @@ const StyledDiv = styled.div`
   align-items: center;
   flex-wrap: wrap;
   padding: 36px 36px;
+  overflow: scroll;
   background: ${(props) => props.theme.klerosUIComponentsLightBackground};
   transition: background ease
     ${(props) => props.theme.klerosUIComponentsTransitionSpeed};

src/lib/dropdown/base-item.tsx

@@ -51,13 +51,27 @@ const StyledDot = styled(Dot)`
   margin-right: 8px;
 `;
 
+const CountDisplay = styled.label`
+  width: 24px;
+  height: 24px;
+  border: 1px solid ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};
+  border-radius: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 12px;
+  color: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};
+`;
 export interface IBaseItem
   extends IItem,
     Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
   text: string;
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
   icon?: React.ReactNode;
   dot?: string;
+  childrenCount?: number;
   onClick?: () => void;
 }
 
@@ -67,6 +81,7 @@ const BaseItem: React.FC<IBaseItem> = ({
   icon,
   dot,
   onClick,
+  childrenCount,
   ...props
 }) => (
   <Item
@@ -76,6 +91,11 @@ const BaseItem: React.FC<IBaseItem> = ({
     {icon ?? (Icon && <Icon className="item-icon" />)}
     {dot && <StyledDot color={dot} />}
     <StyledText>{text}</StyledText>
+    {childrenCount !== undefined ? (
+      <CountDisplay className="count-display">
+        <span>{childrenCount}</span>
+      </CountDisplay>
+    ) : null}
   </Item>
 );
 

src/lib/dropdown/cascader/item-container.tsx

@@ -16,6 +16,19 @@ export const StyledBaseItem = styled(BaseItem)`
         ? theme.klerosUIComponentsPrimaryBlue
         : theme.klerosUIComponentsStroke};
   }
+
+  .count-display {
+    position: absolute;
+    right: 32px;
+    border-color: ${({ selected, theme }) =>
+      selected
+        ? theme.klerosUIComponentsPrimaryBlue
+        : theme.klerosUIComponentsStroke};
+    color: ${({ selected, theme }) =>
+      selected
+        ? theme.klerosUIComponentsPrimaryBlue
+        : theme.klerosUIComponentsStroke};
+  }
 `;
 
 export interface IItem {
@@ -42,6 +55,7 @@ const ItemContainer: React.FC<IItemContainer> = ({
         text={item.label}
         Icon={item.children && LightArrow}
         onClick={() => onChange(item)}
+        childrenCount={item.children?.length}
         selected={item.value === layer.selected}
       />
     ))}