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>
2025-11-02 21:57:56 +00:00 · 2023-10-14 00:04:29 +02:00
parent a35ea5e8f9
commit 258685467b
732 changed files with 1106 additions and 1010 deletions
--- a/front/src/modules/ui/input/button/components/FloatingButton.tsx
+++ b/front/src/modules/ui/input/button/components/FloatingButton.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+export type FloatingButtonSize = 'small' | 'medium';
+export type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+
+export type FloatingButtonProps = {
+  className?: string;
+  Icon?: IconComponent;
+  title?: string;
+  size?: FloatingButtonSize;
+  position?: FloatingButtonPosition;
+  applyShadow?: boolean;
+  applyBlur?: boolean;
+  disabled?: boolean;
+  focus?: boolean;
+};
+
+const StyledButton = styled.button<
+  Pick<
+    FloatingButtonProps,
+    'size' | 'focus' | 'position' | 'applyBlur' | 'applyShadow'
+  >
+>`
+  align-items: center;
+  backdrop-filter: ${({ applyBlur }) => (applyBlur ? 'blur(20px)' : 'none')};
+  background: ${({ theme }) => theme.background.primary};
+
+  border: ${({ focus, theme }) =>
+    focus ? `1px solid ${theme.color.blue}` : 'none'};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  box-shadow: ${({ theme, applyShadow, focus }) =>
+    applyShadow
+      ? `0px 2px 4px 0px ${
+          theme.background.transparent.light
+        }, 0px 0px 4px 0px ${theme.background.transparent.medium}${
+          focus ? `,0 0 0 3px ${theme.color.blue10}` : ''
+        }`
+      : focus
+      ? `0 0 0 3px ${theme.color.blue10}`
+      : 'none'};
+  color: ${({ theme, disabled, focus }) => {
+    return !disabled
+      ? focus
+        ? theme.color.blue
+        : theme.font.color.secondary
+      : theme.font.color.extraLight;
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+
+  flex-direction: row;
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
+  padding: ${({ theme }) => {
+    return `0 ${theme.spacing(2)}`;
+  }};
+  transition: background 0.1s ease;
+
+  white-space: nowrap;
+
+  &:hover {
+    background: ${({ theme, disabled }) =>
+      !disabled ? theme.background.transparent.lighter : 'transparent'};
+  }
+
+  &:active {
+    background: ${({ theme, disabled }) =>
+      !disabled ? theme.background.transparent.medium : 'transparent'};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const FloatingButton = ({
+  className,
+  Icon,
+  title,
+  size = 'small',
+  applyBlur = true,
+  applyShadow = true,
+  disabled = false,
+  focus = false,
+}: FloatingButtonProps) => {
+  const theme = useTheme();
+  return (
+    <StyledButton
+      disabled={disabled}
+      focus={focus && !disabled}
+      size={size}
+      applyBlur={applyBlur}
+      applyShadow={applyShadow}
+      className={className}
+    >
+      {Icon && <Icon size={theme.icon.size.sm} />}
+      {title}
+    </StyledButton>
+  );
+};