NONE) feat: add table styling props (#93)

* feat: add Table header style props * chore: add common td props and add td props for style * chore: update version
corca-ai · Jun 21, 2024 · 484eb37 · 484eb37
1 parent 8370fa7
commit 484eb37
Show file tree

Hide file tree

Showing 4 changed files with 217 additions and 30 deletions.
diff --git a/src/components/Table/Td.tsx b/src/components/Table/Td.tsx
@@ -1,4 +1,4 @@
-import { ElementType, ReactNode, type PropsWithChildren } from 'react';
+import { CSSProperties, ElementType, ReactNode, type PropsWithChildren } from 'react';
 
 import styled from '@emotion/styled';
 
@@ -36,27 +36,48 @@ const TABLE_TEXT_TD_STYLE: Record<TdSizeType, { textComponent: ElementType }> =
   },
 };
 
-const TableDefaultTd = styled.td<{ width?: number; height: number }>`
+const TableDefaultTd = styled.td<{
+  width?: number;
+  height: number;
+  borderLeft?: CSSProperties['borderLeft'];
+  borderRight?: CSSProperties['borderRight'];
+  background?: CSSProperties['background'];
+}>`
   display: table-cell;
   align-items: center;
   flex-shrink: 0;
   width: ${({ width }) => (width ? `${width}px` : 'auto')};
   height: ${({ height }) => height}px;
+  border-left: ${({ borderLeft }) => borderLeft ?? 'none'};
+  border-right: ${({ borderRight }) => borderRight ?? 'none'};
+  background: ${({ background }) => background ?? 'inherit'};
 `;
 
+export interface CommonTdProps {
+  size: TdSizeType;
+  borderLeft?: CSSProperties['borderLeft'];
+  borderRight?: CSSProperties['borderRight'];
+  background?: CSSProperties['background'];
+}
+
+/**
+ * @description when using ellipsis width is must given
+ */
 export const TextTd = ({
   width,
   size,
   children,
   ellipsis,
-}: PropsWithChildren<{
-  width?: number;
-  size: TdSizeType;
-  ellipsis?: boolean;
-}>) => {
+  ...props
+}: PropsWithChildren<
+  {
+    width?: number;
+    ellipsis?: boolean;
+  } & CommonTdProps
+>) => {
   const tdStyle = TABLE_TEXT_TD_STYLE[size];
   return (
-    <TableText ellipsis={ellipsis} width={width} height={TABLE_TD_HEIGHT[size]}>
+    <TableText ellipsis={ellipsis} width={width} height={TABLE_TD_HEIGHT[size]} {...props}>
       <tdStyle.textComponent>{children}</tdStyle.textComponent>
     </TableText>
   );
@@ -87,24 +108,39 @@ const TABLE_IMG_TD_SIZE: Record<TdSizeType, number> = {
   xs: 5,
 };
 
-export const ImgTd = ({ size, src }: { size: TdSizeType; src: string }) => {
+export const ImgTd = ({
+  size,
+  src,
+  ...props
+}: {
+  src: string;
+} & CommonTdProps) => {
   const imgTdSize = TABLE_TD_HEIGHT[size];
   const imgTdPadding = TABLE_IMG_TD_SIZE[size];
   return (
-    <TableDataImage size={imgTdSize} padding={imgTdPadding}>
+    <TableDataImage size={imgTdSize} padding={imgTdPadding} {...props}>
       <TableImg src={src} />
     </TableDataImage>
   );
 };
 
-const TableDataImage = styled.td<{ size: number; padding: number }>`
+const TableDataImage = styled.td<{
+  size: number;
+  padding: number;
+  borderLeft?: CSSProperties['borderLeft'];
+  borderRight?: CSSProperties['borderRight'];
+  background?: CSSProperties['background'];
+}>`
   width: ${({ size }) => size}px;
   height: ${({ size }) => size}px;
   max-width: ${({ size }) => size}px;
   max-height: ${({ size }) => size}px;
   padding: ${({ padding }) => padding}px;
   vertical-align: middle;
   display: flex;
+  border-left: ${({ borderLeft }) => borderLeft ?? 'none'};
+  border-right: ${({ borderRight }) => borderRight ?? 'none'};
+  background: ${({ background }) => background ?? 'inherit'};
 `;
 
 const TableImg = styled.img`
@@ -122,8 +158,18 @@ const TableImg = styled.img`
  * @description
  * @property {ReactNode} children - use CDS Badge component as children
  */
-export const BadgeTd = ({ size, children }: { size: TdSizeType; children: ReactNode }) => {
-  return <TableBadge height={TABLE_TD_HEIGHT[size]}>{children}</TableBadge>;
+export const BadgeTd = ({
+  size,
+  children,
+  ...props
+}: {
+  children: ReactNode;
+} & CommonTdProps) => {
+  return (
+    <TableBadge height={TABLE_TD_HEIGHT[size]} {...props}>
+      {children}
+    </TableBadge>
+  );
 };
 
 const TableBadge = styled(TableDefaultTd)`
@@ -141,13 +187,13 @@ export const SwitchTd = ({
   size,
   children,
   direction = 'left',
+  ...props
 }: {
-  size: TdSizeType;
   children: ReactNode;
   direction?: SwitchTdDirection;
-}) => {
+} & CommonTdProps) => {
   return (
-    <TableSwitch height={TABLE_TD_HEIGHT[size]} direction={direction}>
+    <TableSwitch height={TABLE_TD_HEIGHT[size]} direction={direction} {...props}>
       {children}
     </TableSwitch>
   );
@@ -163,8 +209,18 @@ const TableSwitch = styled(TableDefaultTd)<{ direction: SwitchTdDirection }>`
  * @description
  * @property {ReactNode} children - use CDS Select component as children
  */
-export const SelectTd = ({ size, children }: { size: TdSizeType; children: ReactNode }) => {
-  return <TableSelect height={TABLE_TD_HEIGHT[size]}>{children}</TableSelect>;
+export const SelectTd = ({
+  size,
+  children,
+  ...props
+}: {
+  children: ReactNode;
+} & CommonTdProps) => {
+  return (
+    <TableSelect height={TABLE_TD_HEIGHT[size]} {...props}>
+      {children}
+    </TableSelect>
+  );
 };
 
 const TableSelect = styled(TableDefaultTd)`
@@ -176,8 +232,18 @@ const TableSelect = styled(TableDefaultTd)`
  * @description
  * @property {ReactNode} children - use CDS Checkbox component as children
  */
-export const CheckboxTd = ({ size, children }: { size: TdSizeType; children: ReactNode }) => {
-  return <TableCheckbox height={TABLE_TD_HEIGHT[size]}>{children}</TableCheckbox>;
+export const CheckboxTd = ({
+  size,
+  children,
+  ...props
+}: {
+  children: ReactNode;
+} & CommonTdProps) => {
+  return (
+    <TableCheckbox height={TABLE_TD_HEIGHT[size]} {...props}>
+      {children}
+    </TableCheckbox>
+  );
 };
 
 const TableCheckbox = styled(TableDefaultTd)`
@@ -190,8 +256,18 @@ const TableCheckbox = styled(TableDefaultTd)`
  * @description
  * @property {ReactNode} children - use CDS Radio component as children
  */
-export const RadioTd = ({ size, children }: { size: TdSizeType; children: ReactNode }) => {
-  return <TableRadio height={TABLE_TD_HEIGHT[size]}>{children}</TableRadio>;
+export const RadioTd = ({
+  size,
+  children,
+  ...props
+}: {
+  children: ReactNode;
+} & CommonTdProps) => {
+  return (
+    <TableRadio height={TABLE_TD_HEIGHT[size]} {...props}>
+      {children}
+    </TableRadio>
+  );
 };
 
 const TableRadio = styled(TableDefaultTd)`
@@ -211,9 +287,20 @@ const TABLE_KEBAB_TD_WIDTH: Record<TdSizeType, number> = {
  * @description
  * @property {ReactNode} children - use CDS Kebab component as children
  */
-export const IconTd = ({ size, children }: { size: TdSizeType; children: ReactNode }) => {
+export const IconTd = ({
+  size,
+  children,
+  ...props
+}: {
+  children: ReactNode;
+} & CommonTdProps) => {
   return (
-    <TableIcon valign="middle" height={TABLE_TD_HEIGHT[size]} width={TABLE_KEBAB_TD_WIDTH[size]}>
+    <TableIcon
+      valign="middle"
+      height={TABLE_TD_HEIGHT[size]}
+      width={TABLE_KEBAB_TD_WIDTH[size]}
+      {...props}
+    >
       {children}
     </TableIcon>
   );

diff --git a/src/components/Table/Th.tsx b/src/components/Table/Th.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, cloneElement } from 'react';
+import { CSSProperties, ReactElement, ReactNode, cloneElement } from 'react';
 
 import styled from '@emotion/styled';
 
@@ -66,12 +66,15 @@ export interface DefaultThProps {
   icon?: ReactNode;
   width?: string;
   size: ThSizeType;
+  borderLeft?: CSSProperties['borderLeft'];
+  borderRight?: CSSProperties['borderRight'];
+  background?: CSSProperties['background'];
 }
 
-export const DefaultTh = ({ text, icon, size, width = 'auto' }: DefaultThProps) => {
+export const DefaultTh = ({ text, icon, size, width = 'auto', ...props }: DefaultThProps) => {
   const thStyle = TABLE_TH_STYLE[size];
   return (
-    <TableDefaultHeader width={width} height={thStyle.height}>
+    <TableDefaultHeader width={width} height={thStyle.height} {...props}>
       <ThContents>
         <thStyle.textComponent>{text}</thStyle.textComponent>
         {icon &&
@@ -86,12 +89,16 @@ export const DefaultTh = ({ text, icon, size, width = 'auto' }: DefaultThProps)
 export interface CheckboxThProps {
   size: ThSizeType;
   checkboxType: CheckboxProps;
+  borderLeft?: CSSProperties['borderLeft'];
+  borderRight?: CSSProperties['borderRight'];
+  background?: CSSProperties['background'];
 }
 
-export const CheckboxTh = ({ size, checkboxType }: CheckboxThProps) => {
+export const CheckboxTh = ({ size, checkboxType, ...props }: CheckboxThProps) => {
   const thStyle = TABLE_TH_STYLE[size];
   return (
     <CheckboxTableHeader
+      {...props}
       width={FIXED_TH_WIDTH[FixedCellType.CHECKBOX][size]}
       height={thStyle.height}
     >
@@ -115,11 +122,20 @@ const ThContents = styled.div`
   gap: 2px;
 `;
 
-const TableHeader = styled.th<{ width: string; height: number }>`
+const TableHeader = styled.th<{
+  width: string;
+  height: number;
+  borderLeft?: CSSProperties['borderLeft'];
+  borderRight?: CSSProperties['borderRight'];
+  background?: CSSProperties['background'];
+}>`
   width: ${({ width }) => width};
   height: ${({ height }) => height}px;
   vertical-align: middle;
   text-wrap: nowrap;
+  border-left: ${({ borderLeft }) => borderLeft ?? 'none'};
+  border-right: ${({ borderRight }) => borderRight ?? 'none'};
+  background: ${({ background }) => background ?? 'inherit'};
 `;
 
 const TableDefaultHeader = styled(TableHeader)`

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -1,6 +1,6 @@
 import { TableContainer } from './TableContainer';
 import { Tbody } from './Tbody';
-import Td, { FixedCellType, TdSizeType } from './Td';
+import Td, { FixedCellType, TdSizeType, CommonTdProps } from './Td';
 import Th, {
   FIXED_TH_WIDTH,
   TABLE_TH_STYLE,
@@ -26,4 +26,5 @@ export type {
   TableThStyleType,
   DefaultThProps,
   CheckboxThProps,
+  CommonTdProps,
 };
diff --git a/src/stories/Table.stories.tsx b/src/stories/Table.stories.tsx
@@ -569,6 +569,89 @@ export function WithEllipsis() {
   );
 }
 
+export const CustomStyle = () => {
+  const size = 'm';
+
+  return (
+    <Table.Container>
+      <Table.Thead>
+        <Table.Tr readOnly>
+          <Table.Th.Default width={FIXED_TH_WIDTH.IMAGE[size]} text="" size={size} />
+          <Table.Th.Default width="100px" text="Label" size={size} />
+          <Table.Th.Default
+            width="100px"
+            text="Label"
+            size={size}
+            background={'#f0f0f0'}
+            borderLeft={'1px solid #000'}
+            borderRight={'1px solid #000'}
+          />
+          <Table.Th.Default width="100px" text="Label" size={size} />
+          <Table.Th.Default width="100px" text="Label" size={size} />
+          <Table.Th.Default width="100px" text="Label" size={size} />
+          <Table.Th.Default width="100px" text="Badge" size={size} />
+          <Table.Th.Default width="120px" text="Select" size={size} />
+          <Table.Th.Default width="50px" text="Switch" size={size} />
+          <Table.Th.Default width={FIXED_TH_WIDTH.RADIO_ITEM[size]} text=" " size={size} />
+          <Table.Th.Default width={FIXED_TH_WIDTH.KEBAB_MENU[size]} text=" " size={size} />
+          <Table.Th.Checkbox
+            checkboxType={{
+              selected: true,
+              onSelect: () => {},
+            }}
+            size={size}
+          />
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {MOCK_DATA.map((d, index) => (
+          <Table.Tr readOnly key={index.toString() + 'Items'} onClick={() => {}}>
+            <Table.Td.Img src={d.img} size={size} />
+            <Table.Td.Text size={size}>{d.Label1}</Table.Td.Text>
+            <Table.Td.Text
+              size={size}
+              background={'#f0f0f0'}
+              borderLeft={'1px solid #000'}
+              borderRight={'1px solid #000'}
+            >
+              {d.Label1}
+            </Table.Td.Text>
+            <Table.Td.Text size={size}>{d.Label1}</Table.Td.Text>
+            <Table.Td.Text size={size}>{d.Label1}</Table.Td.Text>
+            <Table.Td.Text size={size}>{d.Label1}</Table.Td.Text>
+            <Table.Td.Badge size={size}>
+              <Badge dotted variant="green" label={d.Label1} />
+            </Table.Td.Badge>
+            <Table.Td.Select size={size}>
+              <Select
+                selectedValue="1"
+                onSelect={() => {}}
+                options={[
+                  { label: 'Option 1', value: '1' },
+                  { label: 'Option 2', value: '2' },
+                  { label: 'Option 3', value: '3' },
+                ]}
+              />
+            </Table.Td.Select>
+            <Table.Td.Switch size={size}>
+              <Switch checked onChange={() => {}} />
+            </Table.Td.Switch>
+            <Table.Td.Radio size={size}>
+              <Radio.Item value={index} selected onSelect={() => {}} />
+            </Table.Td.Radio>
+            <Table.Td.Icon size={size}>
+              <Icon.DotsHori />
+            </Table.Td.Icon>
+            <Table.Td.Checkbox size={size}>
+              <Checkbox selected onSelect={() => {}} />
+            </Table.Td.Checkbox>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table.Container>
+  );
+};
+
 const Container = styled.div`
   display: flex;
   align-items: center;