add short editor item and data model for categories

packages/design-system/molecules/editor-category-short/EditorCategoryShort.spec.tsx

@@ -0,0 +1,12 @@
+import { mockCategory } from '@roleypoly/design-system/fixtures/storyData';
+import { render } from '@testing-library/react';
+import { EditorCategoryShort } from './EditorCategoryShort';
+
+it('triggers onOpen when clicked', async () => {
+  const onOpen = jest.fn();
+  const view = render(<EditorCategoryShort category={mockCategory} onOpen={onOpen} />);
+
+  view.getByRole('menuitem')?.click();
+
+  expect(onOpen).toHaveBeenCalled();
+});

packages/design-system/molecules/editor-category-short/EditorCategoryShort.stories.tsx

@@ -0,0 +1,30 @@
+import { mockCategory } from '@roleypoly/design-system/fixtures/storyData';
+import ReactTooltip from 'react-tooltip';
+import styled from 'styled-components';
+import { EditorCategoryShort } from './EditorCategoryShort';
+
+const decorator = (story) => (
+  <Wrapper>
+    {story()}
+    <ReactTooltip />
+  </Wrapper>
+);
+
+export default {
+  title: 'Molecules/Short Category',
+  component: EditorCategoryShort,
+  args: {
+    category: mockCategory,
+  },
+  decorators: [decorator],
+};
+
+const Wrapper = styled.div`
+  box-shadow: 0 0 10px #000;
+`;
+
+export const shortEditor = (args) => <EditorCategoryShort {...args} />;
+export const shortEditorHidden = (args) => <EditorCategoryShort {...args} />;
+shortEditorHidden.args = {
+  category: { ...mockCategory, hidden: true },
+};

packages/design-system/molecules/editor-category-short/EditorCategoryShort.styled.ts

@@ -0,0 +1,60 @@
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import styled from 'styled-components';
+
+export const GrabberBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 1em;
+  flex: 0;
+  cursor: grab;
+  position: relative;
+
+  ::before {
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: -8px;
+    width: 32px;
+    height: 32px;
+    background-color: rgba(0, 0, 0, 0.25);
+    opacity: 0;
+    border-radius: 50%;
+    transition: opacity ${transitions.actionable}s ease-in-out;
+  }
+
+  &:hover {
+    ::before {
+      opacity: 1;
+    }
+  }
+`;
+
+export const Opener = styled.div`
+  opacity: 0;
+  transition: opacity ${transitions.actionable}s ease-in-out;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  padding: 1em;
+  cursor: pointer;
+
+  &:hover {
+    ${Opener} {
+      opacity: 1;
+    }
+  }
+`;
+
+export const Name = styled.div`
+  position: relative;
+  top: -2px;
+  margin-right: 1em;
+`;
+
+export const Flags = styled.div``;
+
+export const Void = styled.div`
+  flex: 1;
+`;

packages/design-system/molecules/editor-category-short/EditorCategoryShort.tsx

@@ -0,0 +1,31 @@
+import { Category } from '@roleypoly/types';
+import { DragEventHandler, MouseEventHandler } from 'react';
+import { GoEyeClosed, GoGrabber, GoKebabHorizontal } from 'react-icons/go';
+import {
+  Container,
+  Flags,
+  GrabberBox,
+  Name,
+  Opener,
+  Void,
+} from './EditorCategoryShort.styled';
+
+type ShortProps = {
+  category: Category;
+  onDrag?: DragEventHandler;
+  onOpen?: MouseEventHandler;
+};
+
+export const EditorCategoryShort = (props: ShortProps) => (
+  <Container onClick={props.onOpen} role="menuitem">
+    <GrabberBox onDrag={props.onDrag} role="button">
+      <GoGrabber />
+    </GrabberBox>
+    <Name>{props.category.name}</Name>
+    <Flags>{props.category.hidden && <GoEyeClosed data-tip="Hidden to Members" />}</Flags>
+    <Void />
+    <Opener role="button">
+      <GoKebabHorizontal />
+    </Opener>
+  </Container>
+);