diff --git a/README.md b/README.md
index 4875516..2f1f3ee 100644
--- a/README.md
+++ b/README.md
@@ -5,12 +5,12 @@
- 
+ 
- 
+
diff --git a/example/react-ts/package.json b/example/react-ts/package.json
index c8e2c13..f7be2da 100644
--- 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
index 3f28588..d368105 100644
--- 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
index acad2c8..f7d42c1 100644
--- 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 ",
"license": "MIT",
diff --git a/packages/components/Accordion/AccordionContext.tsx b/packages/components/Accordion/AccordionContext.tsx
index c250379..f38edab 100644
--- a/packages/components/Accordion/AccordionContext.tsx
+++ b/packages/components/Accordion/AccordionContext.tsx
@@ -6,7 +6,7 @@ export interface AccordionProviderProps {
export interface AccordionContextValue {
values: Array;
- updateValues?: (nextState: boolean) => void;
+ updateValues?: (index: number, nextState: boolean) => void;
}
export const AccordionContext = createContext({
diff --git a/packages/components/Dropdown/Dropdown.stories.tsx b/packages/components/Dropdown/Dropdown.stories.tsx
index d05c9e2..7fa0871 100644
--- a/packages/components/Dropdown/Dropdown.stories.tsx
+++ b/packages/components/Dropdown/Dropdown.stories.tsx
@@ -10,82 +10,145 @@ export default {
component: DropdownButton,
} as ComponentMeta;
-const RowSet = () => {
+export const Defulat = () => {
return (
-
-
-
- Actions
-
-
- {
- alert('asdfv');
- }}
- >
- First Action
-
- Second Action
- Third Acition
-
-
-
+ <>
-
- Actions
-
+ Actions
console.log('sdf')}>
Create a Copy
Download
- Delete
Mark as Draft
Write Something
-
-
-
-
-
- Actions
-
-
{
- alert('sdf');
- }}
+ onAction={() => alert('Delete Something')}
+ color="error"
>
- First Action
+ Delete
- Second Action
- Third Acition
-
-
-
- Actions
-
-
- console.log('sdf')}>
- Create a Copy
-
- Download
- Delete
- Mark as Draft
- Write Something
-
-
-
+
);
};
-export const Defulat = () => {
+
+export const variousLocation = () => {
return (
-
-
-
+
+
+ Actions
+
+ Create a Copy
+ alert('Download Something')}
+ color="primary"
+ >
+ Download
+
+ Mark as Draft
+ Write Something
+ alert('Delete Something')}
+ color="error"
+ >
+ Delete
+
+
+
+
+
+
+ Actions
+
+
+ Create a Copy
+ Download
+ Mark as Draft
+ Write Something
+ alert('Delete Something')}
+ color="error"
+ >
+ Delete
+
+
+
+
+
+
+ Actions
+
+
+ Create a Copy
+ Download
+ alert('Mark as Draft Something')}
+ color="success"
+ >
+ Mark as Draft
+
+ Write Something
+ alert('Delete Something')}
+ color="error"
+ >
+ Delete
+
+
+
+
+
+
+
+
+ Actions
+
+
+ alert('Booooommmm!!!')}
+ color="secondary"
+ >
+ First Action
+
+ Second Action
+ Third Action
+
+
+
+
+
+ Actions
+
+
+ alert('Boooomm!!!')}
+ color="warning"
+ >
+ First Action
+
+ Second Action
+ Third Action
+
+
+
+
+ Actions
+
+ alert('Boooooom!')}
+ color="primary"
+ >
+ First Action
+
+ Second Action
+ Third Action
+
+
+
);
diff --git a/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts b/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts
index 69689cd..221c0f0 100644
--- a/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts
+++ b/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts
@@ -1,7 +1,10 @@
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;
@@ -9,18 +12,23 @@ export const StyledMenuItem = styled.button`
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
index 9d33744..3249c69 100644
--- a/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.tsx
+++ b/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.tsx
@@ -1,4 +1,5 @@
import React, { ButtonHTMLAttributes } from 'react';
+import { NormalColorType } from '../../../theme/types';
import { useDropdownContext } from '../DropdownContext';
import * as S from './DropdownMenuItem.styles';
@@ -6,11 +7,13 @@ export interface DropdownMenuItemProps
extends ButtonHTMLAttributes {
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}
>
- {children}
+ {children}
);
};
diff --git a/packages/theme/types.ts b/packages/theme/types.tsx
similarity index 61%
rename from packages/theme/types.ts
rename to packages/theme/types.tsx
index aeddeec..750e55d 100644
--- a/packages/theme/types.ts
+++ b/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',
},
};