add role list and add button, non-functional

packages/design-system/molecules/editor-category/EditorCategory.styled.ts

@@ -1,4 +1,6 @@
 import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
 
 export const Head = styled.div`
@@ -34,3 +36,34 @@ export const Section = styled.div<{ big?: boolean }>`
     flex-basis: 100%;
   `)}
 `;
+
+export const RoleContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  & > div {
+    margin: 2.5px;
+  }
+`;
+
+export const AddRoleButton = styled.div`
+  border: 2px solid ${palette.taupe500};
+  color: ${palette.taupe500};
+  border-radius: 24px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all ${transitions.actionable}s ease-in-out;
+  &:hover {
+    background-color: ${palette.taupe100};
+    transform: translateY(-2px);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: none;
+  }
+`;

packages/design-system/molecules/editor-category/EditorCategory.tsx

@@ -1,10 +1,13 @@
+import { Role } from '@roleypoly/design-system/atoms/role';
 import { TextInput } from '@roleypoly/design-system/atoms/text-input';
 import { Toggle } from '@roleypoly/design-system/atoms/toggle';
 import { Text } from '@roleypoly/design-system/atoms/typography';
 import { Category as CategoryT, CategoryType, Role as RoleT } from '@roleypoly/types';
+import { sortBy } from 'lodash';
 import * as React from 'react';
+import { GoPlus } from 'react-icons/go';
 import ReactTooltip from 'react-tooltip';
-import { Box, Section } from './EditorCategory.styled';
+import { AddRoleButton, Box, RoleContainer, Section } from './EditorCategory.styled';
 
 export type CategoryProps = {
   title: string;
@@ -18,6 +21,11 @@ export const EditorCategory = (props: CategoryProps) => {
     props.onChange({ ...props.category, [key]: value });
   };
 
+  const handleRoleDelete = (role: RoleT) => () => {
+    const updatedRoles = props.category.roles.filter((r) => r !== role.id);
+    updateValue('roles', updatedRoles);
+  };
+
   return (
     <Box>
       <Section>
@@ -52,7 +60,28 @@ export const EditorCategory = (props: CategoryProps) => {
         </div>
       </Section>
 
-      <Section big>aa</Section>
+      <Section big>
+        <div>
+          <Text>Roles</Text>
+        </div>
+        <RoleContainer>
+          {sortBy(props.roles, 'position').map((role) => (
+            <Role
+              key={role.id}
+              role={role}
+              selected={false}
+              type="delete"
+              onClick={handleRoleDelete(role)}
+            />
+          ))}
+          <AddRoleButton
+            data-tip="Add a role to the category"
+            data-for={props.category.id}
+          >
+            <GoPlus />
+          </AddRoleButton>
+        </RoleContainer>
+      </Section>
 
       <ReactTooltip id={props.category.id} />
     </Box>