feat: improve attributes for Footer

src/components/Footer/Footer.tsx

@@ -1,20 +1,38 @@
-import React, { ReactNode, VFC } from 'react'
+import React, { HTMLAttributes, ReactNode, VFC } from 'react'
 import styled, { css } from 'styled-components'
 import { Theme, useTheme } from '../../hooks/useTheme'
+import { useClassNames } from './useClassNames'
 
-export const Footer: VFC = () => {
+type ElementProps = HTMLAttributes<HTMLElement>
+
+export const Footer: VFC<ElementProps> = ({ className = '', ...props }) => {
   const theme = useTheme()
+  const { wrapper, list, listItem } = useClassNames()
 
   return (
-    <Wrapper themes={theme}>
-      <List themes={theme}>
-        <Item href="https://smarthr.jp/help">ヘルプ</Item>
-        <Item href="https://smarthr.jp/info">お知らせ</Item>
-        <Item href="https://smarthr.jp/terms">利用規約</Item>
-        <Item href="https://smarthr.jp/policy">プライバシーポリシー</Item>
-        <Item href="https://smarthr.jp/law">特定商取引法に基づく表記</Item>
-        <Item href="https://smarthr.co.jp">運営会社</Item>
-        <Item href="https://developer.smarthr.jp">開発者向けAPI </Item>
+    <Wrapper themes={theme} className={`${wrapper} ${className}`} {...props}>
+      <List themes={theme} className={list}>
+        <Item href="https://smarthr.jp/help" className={listItem}>
+          ヘルプ
+        </Item>
+        <Item href="https://smarthr.jp/info" className={listItem}>
+          お知らせ
+        </Item>
+        <Item href="https://smarthr.jp/terms" className={listItem}>
+          利用規約
+        </Item>
+        <Item href="https://smarthr.jp/policy" className={listItem}>
+          プライバシーポリシー
+        </Item>
+        <Item href="https://smarthr.jp/law" className={listItem}>
+          特定商取引法に基づく表記
+        </Item>
+        <Item href="https://smarthr.co.jp" className={listItem}>
+          運営会社
+        </Item>
+        <Item href="https://developer.smarthr.jp" className={listItem}>
+          開発者向けAPI{' '}
+        </Item>
       </List>
       <Copy themes={theme}>&copy; SmartHR, Inc.</Copy>
     </Wrapper>
@@ -52,14 +70,17 @@ const List = styled.ul<{ themes: Theme }>`
 type ItemProp = {
   children: ReactNode
   href: string
+  className?: string
 }
-const Item: VFC<ItemProp> = ({ children, href }) => (
-  <li>
+
+const Item: VFC<ItemProp> = ({ children, href, className = '' }) => (
+  <li className={className}>
     <ItemPart target="_blank" rel="noopener noreferrer" href={href}>
       {children}
     </ItemPart>
   </li>
 )
+
 const ItemPart = styled.a`
   color: #fff;
   text-decoration: none;

src/components/Footer/useClassNames.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react'
+import { useClassNameGenerator } from '../../hooks/useClassNameGenerator'
+import { Footer } from './Footer'
+
+export function useClassNames() {
+  const generate = useClassNameGenerator(Footer.displayName || 'Footer')
+  return useMemo(
+    () => ({
+      wrapper: generate(),
+      list: generate('list'),
+      listItem: generate('listItem'),
+    }),
+    [generate],
+  )
+}