Merge pull request #78 from pknu-wap/feature/#77/add-dropdown-item-color

Feature/#77/add dropdown item color
pknu-wap · Dec 19, 2022 · 90c42d6 · 90c42d6
2 parents 77c8ff9 + 843628a
commit 90c42d6
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -5,12 +5,12 @@
 
 <p align="center">
   <a href="https://github.com/pknu-wap/2022_2_WAP_WEB_TEAM1/blob/main/LICENSE">
-    <img src="https://img.shields.io/apm/l/atomic-design-ui.svg?style=flat" alt="License">
+    <img src="https://badgen.net/github/license/pknu-wap/2022_2_WAP_WEB_TEAM1">
   </a>
   <a href="https://www.npmjs.com/package/wap-ui">
     <img src="https://img.shields.io/npm/dm/wap-ui.svg?style=flat-round" alt="npm downloads">
   </a>
-   <img alt="Github Stars" src="https://badgen.net/github/stars/pknu-wap/2022_2_WAP_WEB_TEAM1" />
+  <img alt="Github Stars" src="https://badgen.net/github/stars/pknu-wap/2022_2_WAP_WEB_TEAM1" />
   <img src="https://badgen.net/github/release/pknu-wap/2022_2_WAP_WEB_TEAM1">
 
 </p>

diff --git a/example/react-ts/package.json b/example/react-ts/package.json
@@ -14,7 +14,7 @@
     "framer-motion": "^7.6.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "wap-ui": "^1.0.0-beta.29"
+    "wap-ui": "^1.2.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.24",

diff --git a/example/react-ts/yarn.lock b/example/react-ts/yarn.lock
@@ -1092,10 +1092,10 @@ vite@^3.2.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-wap-ui@^1.0.0-beta.29:
-  version "1.0.0-beta.29"
-  resolved "https://registry.yarnpkg.com/wap-ui/-/wap-ui-1.0.0-beta.29.tgz#e74d8b3afde3ba684f73841705bb120a44ec4150"
-  integrity sha512-Up4SQZmYCs9maNyN12N6oJZkYf6EthhsqOo0a8ZhDB5d5OdQ2s+TTIOL9lhicSujVEz31kGOoakXpn22sIHLaw==
+wap-ui@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/wap-ui/-/wap-ui-1.2.2.tgz#c8595bd56749d825c993129b6ab58fadda7b6c17"
+  integrity sha512-5J0ToqRLMtBOh/zPQDNuQass2hcscgPWml/xWrEVQtGN1z0lohNJk/Enslsgd6qonpRNMjNe5mC5e86jLrxBDQ==
 
 yaml@^1.10.0:
   version "1.10.2"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wap-ui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "repository": "https://github.com/pknu-wap/2022_2_WAP_WEB_TEAM1.git",
   "author": "neko113 <[email protected]>",
   "license": "MIT",

diff --git a/packages/components/Accordion/AccordionContext.tsx b/packages/components/Accordion/AccordionContext.tsx
@@ -6,7 +6,7 @@ export interface AccordionProviderProps {
 
 export interface AccordionContextValue {
   values: Array<number>;
-  updateValues?: (nextState: boolean) => void;
+  updateValues?: (index: number, nextState: boolean) => void;
 }
 
 export const AccordionContext = createContext<AccordionContextValue>({

diff --git a/packages/components/Dropdown/Dropdown.stories.tsx b/packages/components/Dropdown/Dropdown.stories.tsx
@@ -10,82 +10,145 @@ export default {
   component: DropdownButton,
 } as ComponentMeta<typeof DropdownButton>;
 
-const RowSet = () => {
+export const Defulat = () => {
   return (
-    <FlexRow>
-      <Dropdown>
-        <Dropdown.Button shadow color="primary">
-          Actions
-        </Dropdown.Button>
-        <Dropdown.Menu>
-          <Dropdown.MenuItem
-            onAction={() => {
-              alert('asdfv');
-            }}
-          >
-            First Action
-          </Dropdown.MenuItem>
-          <Dropdown.MenuItem>Second Action</Dropdown.MenuItem>
-          <Dropdown.MenuItem>Third Acition</Dropdown.MenuItem>
-        </Dropdown.Menu>
-      </Dropdown>
-      <Spacer x={10} />
+    <>
       <Dropdown>
-        <Dropdown.Button shadow color="warning">
-          Actions
-        </Dropdown.Button>
+        <Dropdown.Button shadow>Actions</Dropdown.Button>
         <Dropdown.Menu>
           <Dropdown.MenuItem onAction={() => console.log('sdf')}>
             Create a Copy
           </Dropdown.MenuItem>
           <Dropdown.MenuItem>Download</Dropdown.MenuItem>
-          <Dropdown.MenuItem>Delete</Dropdown.MenuItem>
           <Dropdown.MenuItem>Mark as Draft</Dropdown.MenuItem>
           <Dropdown.MenuItem>Write Something</Dropdown.MenuItem>
-        </Dropdown.Menu>
-      </Dropdown>
-      <Spacer x={10} />
-      <Dropdown>
-        <Dropdown.Button shadow color="error">
-          Actions
-        </Dropdown.Button>
-        <Dropdown.Menu>
           <Dropdown.MenuItem
-            onAction={() => {
-              alert('sdf');
-            }}
+            onAction={() => alert('Delete Something')}
+            color="error"
           >
-            First Action
+            Delete
           </Dropdown.MenuItem>
-          <Dropdown.MenuItem>Second Action</Dropdown.MenuItem>
-          <Dropdown.MenuItem>Third Acition</Dropdown.MenuItem>
         </Dropdown.Menu>
       </Dropdown>
-      <Spacer x={10} />
-      <Dropdown>
-        <Dropdown.Button shadow color="secondary">
-          Actions
-        </Dropdown.Button>
-        <Dropdown.Menu>
-          <Dropdown.MenuItem onAction={() => console.log('sdf')}>
-            Create a Copy
-          </Dropdown.MenuItem>
-          <Dropdown.MenuItem>Download</Dropdown.MenuItem>
-          <Dropdown.MenuItem>Delete</Dropdown.MenuItem>
-          <Dropdown.MenuItem>Mark as Draft</Dropdown.MenuItem>
-          <Dropdown.MenuItem>Write Something</Dropdown.MenuItem>
-        </Dropdown.Menu>
-      </Dropdown>
-    </FlexRow>
+    </>
   );
 };
-export const Defulat = () => {
+
+export const variousLocation = () => {
   return (
     <Container>
       <FlexColumn>
-        <RowSet />
-        <Spacer y={10} />
-        <RowSet />
+        <FlexRow>
+          <Dropdown>
+            <Dropdown.Button shadow>Actions</Dropdown.Button>
+            <Dropdown.Menu>
+              <Dropdown.MenuItem>Create a Copy</Dropdown.MenuItem>
+              <Dropdown.MenuItem
+                onAction={() => alert('Download Something')}
+                color="primary"
+              >
+                Download
+              </Dropdown.MenuItem>
+              <Dropdown.MenuItem>Mark as Draft</Dropdown.MenuItem>
+              <Dropdown.MenuItem>Write Something</Dropdown.MenuItem>
+              <Dropdown.MenuItem
+                onAction={() => alert('Delete Something')}
+                color="error"
+              >
+                Delete
+              </Dropdown.MenuItem>
+            </Dropdown.Menu>
+          </Dropdown>
+          <Spacer x={10} />
+          <Dropdown>
+            <Dropdown.Button shadow color="error">
+              Actions
+            </Dropdown.Button>
+            <Dropdown.Menu>
+              <Dropdown.MenuItem>Create a Copy</Dropdown.MenuItem>
+              <Dropdown.MenuItem>Download</Dropdown.MenuItem>
+              <Dropdown.MenuItem>Mark as Draft</Dropdown.MenuItem>
+              <Dropdown.MenuItem>Write Something</Dropdown.MenuItem>
+              <Dropdown.MenuItem
+                onAction={() => alert('Delete Something')}
+                color="error"
+              >
+                Delete
+              </Dropdown.MenuItem>
+            </Dropdown.Menu>
+          </Dropdown>
+          <Spacer x={10} />
+          <Dropdown>
+            <Dropdown.Button shadow color="success">
+              Actions
+            </Dropdown.Button>
+            <Dropdown.Menu>
+              <Dropdown.MenuItem>Create a Copy</Dropdown.MenuItem>
+              <Dropdown.MenuItem>Download</Dropdown.MenuItem>
+              <Dropdown.MenuItem
+                onAction={() => alert('Mark as Draft Something')}
+                color="success"
+              >
+                Mark as Draft
+              </Dropdown.MenuItem>
+              <Dropdown.MenuItem>Write Something</Dropdown.MenuItem>
+              <Dropdown.MenuItem
+                onAction={() => alert('Delete Something')}
+                color="error"
+              >
+                Delete
+              </Dropdown.MenuItem>
+            </Dropdown.Menu>
+          </Dropdown>
+        </FlexRow>
+        <Spacer y={16} />
+        <FlexRow>
+          <Dropdown>
+            <Dropdown.Button shadow color="secondary">
+              Actions
+            </Dropdown.Button>
+            <Dropdown.Menu>
+              <Dropdown.MenuItem
+                onAction={() => alert('Booooommmm!!!')}
+                color="secondary"
+              >
+                First Action
+              </Dropdown.MenuItem>
+              <Dropdown.MenuItem>Second Action</Dropdown.MenuItem>
+              <Dropdown.MenuItem>Third Action</Dropdown.MenuItem>
+            </Dropdown.Menu>
+          </Dropdown>
+          <Spacer x={10} />
+          <Dropdown>
+            <Dropdown.Button shadow color="warning">
+              Actions
+            </Dropdown.Button>
+            <Dropdown.Menu>
+              <Dropdown.MenuItem
+                onAction={() => alert('Boooomm!!!')}
+                color="warning"
+              >
+                First Action
+              </Dropdown.MenuItem>
+              <Dropdown.MenuItem>Second Action</Dropdown.MenuItem>
+              <Dropdown.MenuItem>Third Action</Dropdown.MenuItem>
+            </Dropdown.Menu>
+          </Dropdown>
+          <Spacer x={10} />
+          <Dropdown>
+            <Dropdown.Button shadow>Actions</Dropdown.Button>
+            <Dropdown.Menu>
+              <Dropdown.MenuItem
+                onAction={() => alert('Boooooom!')}
+                color="primary"
+              >
+                First Action
+              </Dropdown.MenuItem>
+              <Dropdown.MenuItem>Second Action</Dropdown.MenuItem>
+              <Dropdown.MenuItem>Third Action</Dropdown.MenuItem>
+            </Dropdown.Menu>
+          </Dropdown>
+        </FlexRow>
       </FlexColumn>
     </Container>
   );

diff --git a/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts b/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts
@@ -1,26 +1,34 @@
 import styled from '@emotion/styled';
 import { common } from '../../../theme/common';
+import { ButtonColorMap, NormalColorType } from '../../../theme/types';
 
-export const StyledMenuItem = styled.button`
+export const StyledMenuItem = styled.button<{
+  color: NormalColorType | 'default';
+}>`
   display: flex;
   flex-direction: column;
   min-width: 200px;
   height: 36px;
   padding: 0 12px;
   justify-content: center;
   border-radius: 9px;
-  color: #fff;
   cursor: pointer;
   &:hover {
-    background-color: ${common.color.gray7};
+    background-color: ${({ color }) =>
+      color === 'default' ? common.color.gray7 : ButtonColorMap[color].bg};
   }
+  transition: background-color 0.2s;
 `;
 
-export const StyledMenuItemText = styled.span`
+export const StyledMenuItemText = styled.span<{
+  color: NormalColorType | 'default';
+}>`
   flex: 1 1 0%;
   font-size: 16px;
   text-align: left;
   line-height: 36px;
   height: 36px;
   border-radius: 14px;
+  color: ${({ color }) =>
+    color === 'default' ? '#fff' : ButtonColorMap[color].hoverSolid};
 `;
diff --git a/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.tsx b/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.tsx
@@ -1,16 +1,19 @@
 import React, { ButtonHTMLAttributes } from 'react';
+import { NormalColorType } from '../../../theme/types';
 import { useDropdownContext } from '../DropdownContext';
 import * as S from './DropdownMenuItem.styles';
 
 export interface DropdownMenuItemProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   onAction?: () => void;
+  color?: NormalColorType | 'default';
 }
 
 export const DropdownMenuItem = ({
   children,
   onAction,
+  color = 'default',
 }: DropdownMenuItemProps) => {
   const { updateState } = useDropdownContext();
   return (
@@ -19,8 +22,9 @@ export const DropdownMenuItem = ({
         onAction?.();
         updateState?.(false);
       }}
+      color={color}
     >
-      <S.StyledMenuItemText>{children}</S.StyledMenuItemText>
+      <S.StyledMenuItemText color={color}>{children}</S.StyledMenuItemText>
     </S.StyledMenuItem>
   );
 };
diff --git a/packages/theme/types.ts → packages/theme/types.tsx b/packages/theme/types.ts → packages/theme/types.tsx
@@ -7,26 +7,36 @@ export type NormalColorType =
 
 export const ButtonColorMap: Record<
   NormalColorType,
-  { normal: string; hover: string }
+  { normal: string; hover: string; bg: string; hoverSolid: string }
 > = {
   primary: {
-    normal: '#0072F5',
+    bg: '#10253E',
     hover: '#0b63c8',
+    normal: '#0072F5',
+    hoverSolid: '#3694FF',
   },
   success: {
-    normal: '#17C964',
+    bg: '#042F14',
     hover: '#12b759',
+    normal: '#17C964',
+    hoverSolid: '#41EC8B',
   },
   secondary: {
-    normal: '#7828C8',
+    bg: '#1F0A33',
     hover: '#6220a3',
+    normal: '#7828C8',
+    hoverSolid: '#9750DD',
   },
   warning: {
-    normal: '#F5A524',
+    bg: '#3A2503',
     hover: '#d89220',
+    normal: '#F5A524',
+    hoverSolid: '#F6AD37',
   },
   error: {
-    normal: '#F31260',
+    bg: '#300313',
     hover: '#bb2157',
+    normal: '#F31260',
+    hoverSolid: '#F4256D',
   },
 };