Finalize FAB: fixed placement and tokens-based styling

package.json

@@ -18,6 +18,7 @@
     "fs": "^0.0.1-security",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
     "react-router": "^7.7.1"
   },
   "devDependencies": {

src/App.tsx

@@ -1,19 +1,15 @@
-
 import './App.css'
 import { Typography } from './core/typography'
 
 function App() {
-
-
   return (
     <>
-     <Typography.Heading3 style={{ margin: '20px' }}>
+      <Typography.Heading3 style={{ margin: '20px' }}>
         Welcome to React Vite Template
       </Typography.Heading3>
       <Typography.BodyBase style={{ margin: '20px' }}>
         This is a simple template to get you started with React and Vite.
       </Typography.BodyBase>
-
     </>
   )
 }

src/components/common/atoms/Fab/Fab.tsx

@@ -1,15 +1,48 @@
-import type { FC } from "react";
-import * as S from "./styled";
+import * as S from './styled'
+import { MdAdd } from 'react-icons/md'
 
-export type FabColor = "primary" | "secondary" | "danger" | "success" | "info";
+export type FabBgColor =
+  | 'primary'
+  | 'secondary'
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'info'
+export type FabTextColor = 'primary' | 'secondary'
+export type Fabsize = 'sm' | 'md' | 'lg'
+export type FabPlacement =
+  | 'bottom-right'
+  | 'bottom-left'
+  | 'top-right'
+  | 'top-left'
 
 type Props = {
-  onClick: () => void;
-  color?: FabColor;
-};
+  onClick: () => void
+  bgColor?: FabBgColor
+  textColor?: FabTextColor
+  size?: Fabsize
+  placement?: FabPlacement
+}
 
-const Fab: FC<Props> = ({ onClick, color = "primary" }) => {
-  return <S.Container onClick={onClick} color={color} />;
-};
+function Fab({
+  onClick,
+  bgColor = 'primary',
+  textColor = 'secondary',
+  size = 'md',
+  placement = 'top-left',
+}: Props) {
+  return (
+    <S.Container
+      onClick={onClick}
+      $bgColor={bgColor}
+      $textColor={textColor}
+      $size={size}
+      $placement={placement}
+      aria-label="Floating Action Button"
+    >
+      <MdAdd />
+    </S.Container>
+  )
+}
 
-export default Fab;
+export default Fab

src/components/common/atoms/Fab/index.ts

@@ -0,0 +1,3 @@
+import Fab from './Fab'
+
+export default Fab

src/components/common/atoms/Fab/styled.ts

@@ -1,17 +1,44 @@
 import styled from '@emotion/styled'
+import type { FabBgColor, Fabsize, FabPlacement } from './Fab'
+import type { FabTextColor } from './Fab'
+import tokens from '../../../../core/tokens'
 
 export const Container = styled.div<{
-    position?: 'absolute' | 'fixed' | 'relative'
-    bottom?: number
-    right?: number
-    top?: number
-    left?: number
-    zIndex?: number
-}>`
-    position: ${({ position }) => position ?? 'fixed'};
-    bottom: ${({ bottom }) => bottom ?? 20}px;
-    right: ${({ right }) => right ?? 20}px;
-    top: ${({ top }) => top ?? 'auto'};
-    left: ${({ left }) => left ?? 'auto'};
-    z-index: ${({ zIndex }) => zIndex ?? 1000};
-`;
+  $bgColor: FabBgColor
+  $textColor: FabTextColor
+  $size: Fabsize
+  $placement: FabPlacement
+}>(({ theme, $bgColor, $textColor, $size, $placement }) => {
+  const pos = $placement || 'bottom-right'
+  return {
+    position: 'fixed',
+    ...(pos.includes('top') ? { top: 16 } : { bottom: 16 }),
+    ...(pos.includes('right') ? { right: 16 } : { left: 16 }),
+
+    backgroundColor: theme.colors[$bgColor],
+    color: theme.colors.text[$textColor],
+    width: tokens.fabSize[$size],
+    height: tokens.fabSize[$size],
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: 'none',
+    borderRadius: tokens.borderRadius.ROUND,
+    cursor: 'pointer',
+    boxShadow: theme.colors.boxShadow,
+    padding: tokens.padding.ZERO,
+    fontWeight: tokens.text.fontWeight.semiBold,
+    lineHeight: 0,
+    zIndex: 1000,
+
+    svg: {
+      width: tokens.size.LARGE,
+      height: tokens.size.LARGE,
+    },
+
+    '&:focus, &:focus-visible': {
+      outline: 'none !important',
+      boxShadow: 'none !important',
+    },
+  }
+})