Refactor UI folder (#2016)

* Added Overview page

* Revised Getting Started page

* Minor revision

* Edited readme, minor modifications to docs

* Removed sweep.yaml, .devcontainer, .ergomake

* Moved security.md to .github, added contributing.md

* changes as per code review

* updated contributing.md

* fixed broken links & added missing links in doc, improved structure

* fixed link in wsl setup

* fixed server link, added https cloning in yarn-setup

* removed package-lock.json

* added doc card, admonitions

* removed underline from nav buttons

* refactoring modules/ui

* refactoring modules/ui

* Change folder case

* Fix theme location

* Fix case 2

* Fix storybook

---------

Co-authored-by: Nimra Ahmed <nimra1408@gmail.com>
Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>

front/src/modules/ui/layout/table/components/TableSection.tsx

@@ -0,0 +1,71 @@
+import { ReactNode, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconChevronDown, IconChevronUp } from '@/ui/display/icon';
+
+type TableSectionProps = {
+  children: ReactNode;
+  isInitiallyExpanded?: boolean;
+  title: string;
+};
+
+const StyledSectionHeader = styled.div<{ isExpanded: boolean }>`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  color: ${({ theme }) => theme.font.color.light};
+  cursor: pointer;
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  height: ${({ theme }) => theme.spacing(6)};
+  justify-content: space-between;
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+  text-align: left;
+  text-transform: uppercase;
+`;
+
+const StyledSection = styled.div<{ isExpanded: boolean }>`
+  max-height: ${({ isExpanded }) => (isExpanded ? '1000px' : 0)};
+  opacity: ${({ isExpanded }) => (isExpanded ? 1 : 0)};
+  overflow: hidden;
+  transition: max-height ${({ theme }) => theme.animation.duration.normal}s,
+    opacity ${({ theme }) => theme.animation.duration.normal}s;
+`;
+
+const StyledSectionContent = styled.div`
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  padding: ${({ theme }) => theme.spacing(2)} 0;
+`;
+
+export const TableSection = ({
+  children,
+  isInitiallyExpanded = true,
+  title,
+}: TableSectionProps) => {
+  const theme = useTheme();
+  const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded);
+
+  const handleToggleSection = () =>
+    setIsExpanded((previousIsExpanded) => !previousIsExpanded);
+
+  return (
+    <>
+      <StyledSectionHeader
+        isExpanded={isExpanded}
+        onClick={handleToggleSection}
+      >
+        {title}
+        {isExpanded ? (
+          <IconChevronUp size={theme.icon.size.sm} />
+        ) : (
+          <IconChevronDown size={theme.icon.size.sm} />
+        )}
+      </StyledSectionHeader>
+      <StyledSection isExpanded={isExpanded}>
+        <StyledSectionContent>{children}</StyledSectionContent>
+      </StyledSection>
+    </>
+  );
+};