1909 object edit add icon section (#1995)

* wip

* wip

* wip

* wip

* wip

* remove hardcoded values and use theme values

* add styles to StyledContainer

* fix iconPicker bug

* wip

* refactor IconPicker to include IconButton

* close IconPicker on click outside

* close IconPicker on escape and enter

* refactor to use DropDownMenu

* refactor to use DropDownMenu

* modify default icon

* Refactor to use useIconPicker hook

* fix WithSearch story

* reinitialized searchString state on close

* create and update stories for the iconPicker

* remove comments

* use theme for gap

* remove align-self

* fix typo in icon

* fix type any

* fix merge conflicts

* remove experimental css properties

front/src/modules/settings/assets/ArrowRight.svg

@@ -0,0 +1,3 @@
+<svg width="34" height="16" viewBox="0 0 34 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 7C0.447715 7 0 7.44772 0 8C0 8.55228 0.447715 9 1 9V7ZM33.7071 8.70711C34.0976 8.31658 34.0976 7.68342 33.7071 7.29289L27.3431 0.928932C26.9526 0.538408 26.3195 0.538408 25.9289 0.928932C25.5384 1.31946 25.5384 1.95262 25.9289 2.34315L31.5858 8L25.9289 13.6569C25.5384 14.0474 25.5384 14.6805 25.9289 15.0711C26.3195 15.4616 26.9526 15.4616 27.3431 15.0711L33.7071 8.70711ZM1 9H33V7H1V9Z" fill="#EBEBEB"/>
+</svg>

front/src/modules/settings/components/IconWithLabel.tsx

@@ -0,0 +1,42 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
+type IconWithLabelProps = {
+  Icon: IconComponent;
+  label: string;
+};
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(3)};
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledSubContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+const StyledItemLabel = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.font.size.md};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+`;
+
+export const IconWithLabel = ({ Icon, label }: IconWithLabelProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledContainer>
+      <StyledSubContainer>
+        <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+        <StyledItemLabel>{label}</StyledItemLabel>
+      </StyledSubContainer>
+    </StyledContainer>
+  );
+};

front/src/modules/settings/components/SettingsIconSection.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+import { IconPicker } from '@/ui/input/components/IconPicker';
+import { H2Title } from '@/ui/typography/components/H2Title';
+
+import ArrowRight from '../assets/ArrowRight.svg';
+
+import { IconWithLabel } from './IconWithLabel';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledArrowContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 32px;
+  justify-content: center;
+`;
+
+type SettingsIconSectionProps = {
+  Icon: IconComponent;
+  iconKey: string;
+  setIconPicker: (icon: { Icon: IconComponent; iconKey: string }) => void;
+};
+
+export const SettingsIconSection = ({
+  Icon,
+  iconKey,
+  setIconPicker,
+}: SettingsIconSectionProps) => {
+  return (
+    <section>
+      <H2Title
+        title="Icon"
+        description="The icon that will be displayed in the sidebar."
+      />
+      <StyledContainer>
+        <IconPicker
+          selectedIconKey={iconKey}
+          onChange={(icon) => {
+            setIconPicker({ Icon: icon.Icon, iconKey: icon.iconKey });
+          }}
+        />
+        <StyledArrowContainer>
+          <img src={ArrowRight} alt="Arrow right" width={32} height={16} />
+        </StyledArrowContainer>
+        <IconWithLabel Icon={Icon} label="Workspaces" />
+      </StyledContainer>
+    </section>
+  );
+};