From 8f09db4254767ce410fb37c89ce432357bd18e51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=88=98=20MINSOO=20KIM?= Date: Tue, 20 Dec 2022 01:44:05 +0900 Subject: [PATCH 1/7] feat: add normal colorType to bg, hoverSolid color --- .../components/Dropdown/Dropdown.stories.tsx | 1 + .../DropdownMenuItem.styles.ts | 15 +++++++++---- .../DropdownMenuItem/DropdownMenuItem.tsx | 6 ++++- packages/theme/{types.ts => types.tsx} | 22 ++++++++++++++----- 4 files changed, 33 insertions(+), 11 deletions(-) rename packages/theme/{types.ts => types.tsx} (61%) diff --git a/packages/components/Dropdown/Dropdown.stories.tsx b/packages/components/Dropdown/Dropdown.stories.tsx index d05c9e2..45725d5 100644 --- a/packages/components/Dropdown/Dropdown.stories.tsx +++ b/packages/components/Dropdown/Dropdown.stories.tsx @@ -22,6 +22,7 @@ const RowSet = () => { onAction={() => { alert('asdfv'); }} + color="primary" > First Action diff --git a/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts b/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts index 69689cd..a426f41 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,22 @@ 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].normal}; } `; -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].hover}; `; 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', }, }; From 283430201f46ee91a0626efe1219cca6cef9f350 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=88=98=20MINSOO=20KIM?= Date: Tue, 20 Dec 2022 01:51:26 +0900 Subject: [PATCH 2/7] feat: add dropdown item color (#77) --- packages/components/Dropdown/Dropdown.stories.tsx | 2 +- .../Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/components/Dropdown/Dropdown.stories.tsx b/packages/components/Dropdown/Dropdown.stories.tsx index 45725d5..b089ed8 100644 --- a/packages/components/Dropdown/Dropdown.stories.tsx +++ b/packages/components/Dropdown/Dropdown.stories.tsx @@ -22,7 +22,7 @@ const RowSet = () => { onAction={() => { alert('asdfv'); }} - color="primary" + color="error" > First Action diff --git a/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts b/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts index a426f41..221c0f0 100644 --- a/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts +++ b/packages/components/Dropdown/DropdownMenuItem/DropdownMenuItem.styles.ts @@ -15,8 +15,9 @@ export const StyledMenuItem = styled.button<{ cursor: pointer; &:hover { background-color: ${({ color }) => - color === 'default' ? common.color.gray7 : ButtonColorMap[color].normal}; + color === 'default' ? common.color.gray7 : ButtonColorMap[color].bg}; } + transition: background-color 0.2s; `; export const StyledMenuItemText = styled.span<{ @@ -29,5 +30,5 @@ export const StyledMenuItemText = styled.span<{ height: 36px; border-radius: 14px; color: ${({ color }) => - color === 'default' ? '#fff' : ButtonColorMap[color].hover}; + color === 'default' ? '#fff' : ButtonColorMap[color].hoverSolid}; `; From efdb555c508846eb8816a36d0abc0ecb77403f09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=88=98=20MINSOO=20KIM?= Date: Tue, 20 Dec 2022 02:10:03 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20dropdown=20item=20color=20storybook?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20(#77)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Dropdown/Dropdown.stories.tsx | 178 ++++++++++++------ 1 file changed, 120 insertions(+), 58 deletions(-) diff --git a/packages/components/Dropdown/Dropdown.stories.tsx b/packages/components/Dropdown/Dropdown.stories.tsx index b089ed8..7fa0871 100644 --- a/packages/components/Dropdown/Dropdown.stories.tsx +++ b/packages/components/Dropdown/Dropdown.stories.tsx @@ -10,83 +10,145 @@ export default { component: DropdownButton, } as ComponentMeta; -const RowSet = () => { +export const Defulat = () => { return ( - + <> - - Actions - - - { - alert('asdfv'); - }} - color="error" - > - 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 + + + ); From 0a6dedc112abe7da7b8e510648d444aa3c9887ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=88=98=20MINSOO=20KIM?= Date: Tue, 20 Dec 2022 02:13:32 +0900 Subject: [PATCH 4/7] fix: accordion context updateValues error (#77) --- packages/components/Accordion/AccordionContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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({ From c88d8aa8ce5924eefe0abbc41bfabefc8d16b275 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=88=98=20MINSOO=20KIM?= Date: Tue, 20 Dec 2022 02:13:55 +0900 Subject: [PATCH 5/7] v1.2.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From 055750c29a921c14949e347cf4bca7926b13742e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=88=98=20MINSOO=20KIM?= Date: Tue, 20 Dec 2022 02:25:36 +0900 Subject: [PATCH 6/7] =?UTF-8?q?chore:=20github=20readme=20license=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(#77)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4875516..2f1f3ee 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,12 @@

- License + npm downloads - Github Stars + Github Stars

From 843628a926629a5b80abf00b01f1ee3de30386cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=88=98=20MINSOO=20KIM?= Date: Tue, 20 Dec 2022 02:28:18 +0900 Subject: [PATCH 7/7] fix: upgrade wap-ui version of react-ts example --- example/react-ts/package.json | 2 +- example/react-ts/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) 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"