From dbc4da29ef66e2be92602a6271c66255d7cd0099 Mon Sep 17 00:00:00 2001 From: hachiojidev <72719739+hachiojidev@users.noreply.github.com> Date: Mon, 26 Oct 2020 12:48:41 +0900 Subject: [PATCH] feat: Tags (#23) --- src/components/Tag/StyledTag.tsx | 36 +++++++++++++++ src/components/Tag/index.stories.tsx | 67 ++++++++++++++++++++++++++++ src/components/Tag/index.tsx | 17 +++++++ src/components/Tag/theme.ts | 22 +++++++++ src/components/Tag/types.ts | 23 ++++++++++ src/index.ts | 1 + src/styled.d.ts | 2 + src/theme/dark.ts | 2 + src/theme/light.ts | 4 +- 9 files changed, 173 insertions(+), 1 deletion(-) create mode 100644 src/components/Tag/StyledTag.tsx create mode 100644 src/components/Tag/index.stories.tsx create mode 100644 src/components/Tag/index.tsx create mode 100644 src/components/Tag/theme.ts create mode 100644 src/components/Tag/types.ts diff --git a/src/components/Tag/StyledTag.tsx b/src/components/Tag/StyledTag.tsx new file mode 100644 index 000000000..2fcc0d0e8 --- /dev/null +++ b/src/components/Tag/StyledTag.tsx @@ -0,0 +1,36 @@ +import styled, { DefaultTheme } from "styled-components"; +import { TagProps, TagThemeVariant, variants } from "./types"; + +interface ThemedProps extends TagProps { + theme: DefaultTheme; +} + +const InnerIcon = styled.span` + align-items: center; + display: inline-flex; +`; + +export const StartIcon = styled(InnerIcon)` + margin-right: 0.5em; +`; + +export const EndIcon = styled(InnerIcon)` + margin-left: 0.5em; +`; + +const getTagVariantProp = (prop: keyof TagThemeVariant) => ({ theme, variant = variants.PURPLE }: ThemedProps) => { + return theme.tag[variant][prop]; +}; + +export const StyledTag = styled.div` + align-items: center; + background-color: ${getTagVariantProp("background")}; + border-radius: 16px; + color: ${getTagVariantProp("color")}; + display: inline-flex; + font-size: 14px; + font-weight: 400; + height: 28px; + line-height: 1.5; + padding: 0 8px; +`; diff --git a/src/components/Tag/index.stories.tsx b/src/components/Tag/index.stories.tsx new file mode 100644 index 000000000..010d1d7ed --- /dev/null +++ b/src/components/Tag/index.stories.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import styled from "styled-components"; +/* eslint-disable import/no-unresolved */ +import { Meta } from "@storybook/react/types-6-0"; +import Tag from "./index"; + +const Row = styled.div` + display: flex; + margin-bottom: 32px; + + & > div { + margin-right: 16px; + } +`; + +const CommunityIcon = () => ( + + + + + + + + +); + +const CoreIcon = () => ( + + + + + + + + +); + +export default { + title: "Tag", + argTypes: {}, +} as Meta; + +export const Default: React.FC = () => { + return ( + <> + + Core + Community + + + }>Core + } variant="pink"> + Community + + } endIcon={} variant="pink"> + Start & End Icon + + + + ); +}; diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx new file mode 100644 index 000000000..d33f3ea79 --- /dev/null +++ b/src/components/Tag/index.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { TagProps, variants } from "./types"; +import { StyledTag, StartIcon, EndIcon } from "./StyledTag"; + +const Tag: React.FC = ({ startIcon, endIcon, children, ...props }) => ( + + {startIcon && {startIcon}} + {children} + {endIcon && {endIcon}} + +); + +Tag.defaultProps = { + variant: variants.PURPLE, +}; + +export default Tag; diff --git a/src/components/Tag/theme.ts b/src/components/Tag/theme.ts new file mode 100644 index 000000000..e3f0f9159 --- /dev/null +++ b/src/components/Tag/theme.ts @@ -0,0 +1,22 @@ +import { TagTheme } from "./types"; +import { lightColors } from "../../theme/colors"; + +const pinkTheme = { + background: lightColors.failure, + color: "#FFFFFF", +}; + +const purpleTheme = { + background: lightColors.secondary, + color: "#FFFFFF", +}; + +export const light: TagTheme = { + pink: pinkTheme, + purple: purpleTheme, +}; + +export const dark: TagTheme = { + pink: pinkTheme, + purple: purpleTheme, +}; diff --git a/src/components/Tag/types.ts b/src/components/Tag/types.ts new file mode 100644 index 000000000..484ec456c --- /dev/null +++ b/src/components/Tag/types.ts @@ -0,0 +1,23 @@ +import { ReactNode } from "react"; + +export const variants = { + PINK: "pink", + PURPLE: "purple", +} as const; + +export type Variants = typeof variants[keyof typeof variants]; + +export type TagThemeVariant = { + background: string; + color: string; +}; + +export type TagTheme = { + [key in Variants]: TagThemeVariant; +}; + +export interface TagProps { + variant?: Variants; + startIcon?: ReactNode; + endIcon?: ReactNode; +} diff --git a/src/index.ts b/src/index.ts index 479d649c5..7df1f01c7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,6 +5,7 @@ export { default as Card } from "./components/Card"; export { default as Checkbox } from "./components/Checkbox"; export { default as Heading } from "./components/Heading"; export * from "./components/Layouts"; +export { default as Tag } from "./components/Tag"; export { default as Text } from "./components/Text"; export { default as Link } from "./components/Link"; export { default as ResetCSS } from "./ResetCSS"; diff --git a/src/styled.d.ts b/src/styled.d.ts index ab14f1830..7e01248bd 100644 --- a/src/styled.d.ts +++ b/src/styled.d.ts @@ -1,6 +1,7 @@ import "styled-components"; import { ButtonTheme } from "./components/Button/types"; import { CardTheme } from "./components/Card/types"; +import { TagTheme } from "./components/Tag/types"; export type Breakpoints = string[]; @@ -35,6 +36,7 @@ declare module "styled-components" { colors: Colors; button: ButtonTheme; card: CardTheme; + tag: TagTheme; scales: { breakpoints: Breakpoints; mediaQueries: MediaQueries; diff --git a/src/theme/dark.ts b/src/theme/dark.ts index f8d1b0cb1..5b36b45bd 100644 --- a/src/theme/dark.ts +++ b/src/theme/dark.ts @@ -2,6 +2,7 @@ import { DefaultTheme } from "styled-components"; import mediaQueries, { breakpoints } from "./mediaQueries"; import { dark as darkButton } from "../components/Button/theme"; import { dark as darkCard } from "../components/Card/theme"; +import { dark as darkTag } from "../components/Tag/theme"; import { darkColors } from "./colors"; const darkTheme: DefaultTheme = { @@ -16,6 +17,7 @@ const darkTheme: DefaultTheme = { shadows: { level1: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)", }, + tag: darkTag, }; export default darkTheme; diff --git a/src/theme/light.ts b/src/theme/light.ts index 1769ac2da..7dfcd8820 100644 --- a/src/theme/light.ts +++ b/src/theme/light.ts @@ -2,12 +2,13 @@ import { DefaultTheme } from "styled-components"; import mediaQueries, { breakpoints } from "./mediaQueries"; import { light as lightButton } from "../components/Button/theme"; import { light as lightCard } from "../components/Card/theme"; +import { light as lightTag } from "../components/Tag/theme"; import { lightColors } from "./colors"; const lightTheme: DefaultTheme = { isDark: false, - colors: lightColors, button: lightButton, + colors: lightColors, card: lightCard, scales: { breakpoints, @@ -16,6 +17,7 @@ const lightTheme: DefaultTheme = { shadows: { level1: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)", }, + tag: lightTag, }; export default lightTheme;