@liguelead/design-system 0.0.9 → 0.0.11

package/components/Select/Select.types.ts

@@ -1,36 +1,35 @@
-import { FieldValues, UseFormRegisterReturn } from 'react-hook-form'
-export interface SelectProps<TFieldValues extends FieldValues = FieldValues> {
-    className?: string
-    disabled?: boolean
-    error?: TFieldValues
-    label: string
-    options: Array<{ label: string; value: string }>
-    value?: string
-    defaultValue?: string
-    handleLeftIcon?: () => void
-    helperText?: string
-    leftIcon?: React.ReactNode
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-    size?: 'sm' | 'md' | 'lg'
-    register?: UseFormRegisterReturn<string>
-}
-
-export interface StateInterface {
-    input: string
-    label: string
-    helperText: string
-    animation?: string
-}
-
-export interface TextFieldStates {
-    error: StateInterface
-    default: StateInterface
-    disabled: StateInterface
-}
-
-export type TextFieldSize = 'sm' | 'md' | 'lg'
-
-export type TextFieldSizeType = {
-    input: string
-    label: string
-}
+import { FieldValues, UseFormRegisterReturn } from 'react-hook-form'
+export interface SelectProps<TFieldValues extends FieldValues = FieldValues> {
+    className?: string
+    disabled?: boolean
+    error?: TFieldValues
+    label?: string
+    options: Array<{ label: string; value: string }>
+    value?: string
+    defaultValue?: string
+    handleLeftIcon?: () => void
+    helperText?: string
+    leftIcon?: React.ReactNode
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+    size?: 'sm' | 'md' | 'lg'
+    register?: UseFormRegisterReturn<string>
+}
+
+export interface StateInterface {
+    input: string
+    label: string
+    helperText: string
+}
+
+export interface TextFieldStates {
+    error: StateInterface
+    default: StateInterface
+    disabled: StateInterface
+}
+
+export type TextFieldSize = 'sm' | 'md' | 'lg'
+
+export type TextFieldSizeType = {
+    input: string
+    label: string
+}

package/components/Select/index.ts

@@ -1 +1 @@
-export { default } from './Select'
+export { default } from './Select'

package/components/Text/Text.styles.ts

@@ -1,43 +1,46 @@
-import { parseColor } from '../../utils'
-import styled, { css } from 'styled-components'
-import {
-    fontSize,
-    fontWeight,
-    lineHeight,
-    fontFamily
-} from '@liguelead/foundation'
-import { TextProps } from './Text.types'
-
-type BodyProps = Omit<TextProps, 'tag'>
-
-const Body = styled.p.withConfig({
-    shouldForwardProp: prop =>
-        !['color', 'margin', 'isTitle', 'size', 'align', 'weight'].includes(
-            prop
-        )
-})<BodyProps>`
-    position: relative;
-
-    ${({
-        align = 'left',
-        color = 'neutral800',
-        isTitle,
-        theme,
-        size = 'body01'
-    }) => css`
-        text-align: ${align};
-        color: ${parseColor(theme.colors[color] || theme.colors.neutral800)};
-        font-family: '${isTitle
-                ? fontFamily[theme.fonts.headings]
-                : fontFamily[theme.fonts.default]}',
-            sans-serif;
-        font-weight: ${fontWeight[theme.typography[size]?.fontWeight] ||
-        'normal'};
-        font-size: ${fontSize[theme.typography[size]?.fontSize] ||
-        fontSize.fontSize16}px;
-        line-height: ${lineHeight[theme.typography[size]?.lineHeight] ||
-        lineHeight.lineHeight24}px;
-    `}
-`
-
-export { Body }
+import { parseColor } from '../../utils'
+import styled, { css } from 'styled-components'
+import {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    fontFamily
+} from '@liguelead/foundation'
+import { TextProps } from './Text.types'
+
+type BodyProps = Omit<TextProps, 'tag'>
+
+const Body = styled.p.withConfig({
+    shouldForwardProp: prop =>
+        !['color', 'margin', 'isTitle', 'size', 'align', 'weight'].includes(
+            prop
+        )
+})<BodyProps>`
+    position: relative;
+
+    ${({
+        align = 'left',
+        color = 'textMedium',
+        isTitle,
+        theme,
+        size = 'body01',
+        weight
+    }) => css`
+        text-align: ${align};
+        color: ${parseColor(theme.colors[color] || theme.colors.textMedium)};
+        font-family: '${isTitle
+                ? fontFamily[theme.fonts?.headings as keyof typeof fontFamily]
+                : fontFamily[theme.fonts?.default as keyof typeof fontFamily]}',
+            sans-serif;
+        font-weight: ${weight 
+            ? fontWeight[weight as keyof typeof fontWeight]
+            : fontWeight[theme.typography[size]?.fontWeight as keyof typeof fontWeight] ||
+        'normal'};
+        font-size: ${fontSize[theme.typography[size]?.fontSize as keyof typeof fontSize] ||
+        fontSize.fontSize16}px;
+        line-height: ${lineHeight[theme.typography[size]?.lineHeight as keyof typeof lineHeight] ||
+        lineHeight.lineHeight24}px;
+    `}
+`
+
+export { Body }

package/components/Text/Text.tsx

@@ -1,27 +1,27 @@
-import React from 'react'
-import { Body } from './Text.styles'
-import { TextProps } from './Text.types'
-
-const Text: React.FC<TextProps> = ({
-    align,
-    children,
-    color = 'neutral1000',
-    isTitle = false,
-    tag = 'p',
-    size,
-    ...rest
-}) => {
-    return (
-        <Body
-            as={isTitle ? 'h2' : tag}
-            align={align}
-            color={color}
-            size={size}
-            isTitle={isTitle}
-            {...rest}>
-            {children}
-        </Body>
-    )
-}
-
-export default Text
+import React from 'react'
+import { Body } from './Text.styles'
+import { TextProps } from './Text.types'
+
+const Text: React.FC<TextProps> = ({
+    align,
+    children,
+    color = 'textDark',
+    isTitle = false,
+    tag = 'p',
+    size,
+    ...rest
+}) => {
+    return (
+        <Body
+            as={isTitle ? 'h2' : tag}
+            align={align}
+            color={color as string}
+            size={size}
+            isTitle={isTitle}
+            {...rest}>
+            {children}
+        </Body>
+    )
+}
+
+export default Text

package/components/Text/Text.types.ts

@@ -1,42 +1,44 @@
-import { colorType } from 'types'
-import { ReactNode } from 'react'
-
-type AlignType = 'left' | 'center' | 'right' | 'justify'
-
-type SizeType =
-    | 'span01'
-    | 'body01'
-    | 'body02'
-    | 'heading01'
-    | 'heading02'
-    | 'heading03'
-    | 'heading04'
-
-type TagType =
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'p'
-    | 'span'
-    | 'label'
-    | 'small'
-    | 'b'
-    | 'i'
-    | 'em'
-    | 'td'
-    | 'div'
-    | 'a'
-
-export interface TextProps {
-    align?: AlignType
-    children?: ReactNode
-    color?: colorType
-    isTitle?: boolean
-    tag?: TagType
-    size?: SizeType
-    weight?: string
-    className?: string
-}
+import { colorType } from 'types'
+import { ReactNode } from 'react'
+
+type AlignType = 'left' | 'center' | 'right' | 'justify'
+
+type SizeType =
+    | 'span01'
+    | 'body01'
+    | 'body02'
+    | 'heading01'
+    | 'heading02'
+    | 'heading03'
+    | 'heading04'
+
+type TagType =
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'p'
+    | 'span'
+    | 'label'
+    | 'small'
+    | 'b'
+    | 'i'
+    | 'em'
+    | 'td'
+    | 'div'
+    | 'a'
+
+type WeightType = 'fontWeight400' | 'fontWeight500' | 'fontWeight600' | 'fontWeight700'
+
+export interface TextProps {
+    align?: AlignType
+    children?: ReactNode
+    color?: colorType
+    isTitle?: boolean
+    tag?: TagType
+    size?: SizeType
+    weight?: WeightType
+    className?: string
+}

package/components/Text/index.ts

@@ -1 +1 @@
-export { default } from './Text'
+export { default } from './Text'

package/components/TextField/TextField.sizes.ts

@@ -1,58 +1,52 @@
-import { fontSize, lineHeight, spacing } from '@liguelead/foundation'
-
-export type TextFieldSize = 'sm' | 'md' | 'lg'
-
-export type TextFieldSizeType = {
-  input: string
-  label: string
-}
-
-export const textFieldSizes = (size: TextFieldSize, leftIcon: boolean, rightIcon: boolean) => {
-  const withIconMargin = Number(spacing.spacing8) + 20
-  const withIconPadding = {
-    sm: Number(spacing.spacing12) + Number(withIconMargin),
-    md: Number(spacing.spacing16) + Number(withIconMargin),
-    lg: Number(spacing.spacing16) + Number(withIconMargin)
-  }
-
-  const sizes = {
-    sm: {
-      input: `
-        font-size: ${fontSize.fontSize14}px;    
-        line-height: ${lineHeight.lineHeight22}px;    
-        padding: ${spacing.spacing8}px ${spacing.spacing12}px;
-        padding-left: ${leftIcon ? withIconPadding.sm : spacing.spacing12}px;
-        padding-right: ${rightIcon ? withIconPadding.sm : spacing.spacing12}px;
-      `,
-      label: `font-size: ${fontSize.fontSize14}px;
-              margin-left: ${leftIcon ? withIconMargin : 0}px;
-              margin-right: ${rightIcon ? withIconMargin : 0}px;`
-    },
-    md: {
-      input: `
-      font-size: ${fontSize.fontSize14}px;
-      line-height: ${lineHeight.lineHeight20}px;
-      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
-      padding-left: ${leftIcon ? withIconPadding.md : spacing.spacing16}px;
-      padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
-    `,
-      label: `font-size: ${fontSize.fontSize14}px;
-            margin-left: ${leftIcon ? withIconMargin : 0}px;
-            margin-right: ${rightIcon ? withIconMargin : 0}px;`
-    },
-    lg: {
-      input: `
-      font-size: ${fontSize.fontSize16}px;
-      line-height: ${lineHeight.lineHeight24}px;
-      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
-      padding-left: ${leftIcon ? withIconPadding.lg : spacing.spacing16}px;
-      padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
-    `,
-      label: `font-size: ${fontSize.fontSize16}px;
-            margin-left: ${leftIcon ? withIconMargin : 0}px;
-            margin-right: ${rightIcon ? withIconMargin : 0}px;`
-    }
-  }
-
-  return sizes[size]
-}
+import { fontSize, lineHeight, spacing } from '@liguelead/foundation'
+
+export type TextFieldSize = 'sm' | 'md' | 'lg'
+
+export type TextFieldSizeType = {
+  input: string
+  label: string
+}
+
+export const textFieldSizes = (size: TextFieldSize, leftIcon: boolean, rightIcon: boolean) => {
+  const withIconMargin = Number(spacing.spacing8) + 20
+  const withIconPadding = {
+    sm: Number(spacing.spacing12) + Number(withIconMargin),
+    md: Number(spacing.spacing16) + Number(withIconMargin),
+    lg: Number(spacing.spacing16) + Number(withIconMargin)
+  }
+
+  const sizes = {
+    sm: {
+      input: `
+        font-size: ${fontSize.fontSize14}px;    
+        line-height: ${lineHeight.lineHeight22}px;    
+        padding: ${spacing.spacing8}px ${spacing.spacing12}px;
+        padding-left: ${leftIcon ? withIconPadding.sm : spacing.spacing12}px;
+        padding-right: ${rightIcon ? withIconPadding.sm : spacing.spacing12}px;
+      `,
+      label: `font-size: ${fontSize.fontSize14}px;`
+    },
+    md: {
+      input: `
+      font-size: ${fontSize.fontSize14}px;
+      line-height: ${lineHeight.lineHeight20}px;
+      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      padding-left: ${leftIcon ? withIconPadding.md : spacing.spacing16}px;
+      padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
+    `,
+      label: `font-size: ${fontSize.fontSize14}px;`
+    },
+    lg: {
+      input: `
+      font-size: ${fontSize.fontSize16}px;
+      line-height: ${lineHeight.lineHeight24}px;
+      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      padding-left: ${leftIcon ? withIconPadding.lg : spacing.spacing16}px;
+      padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
+    `,
+      label: `font-size: ${fontSize.fontSize16}px;`
+    }
+  }
+
+  return sizes[size]
+}

package/components/TextField/TextField.states.tsx

@@ -1,76 +1,53 @@
-import {parseColor} from '../../utils'
-import {useTheme} from 'styled-components'
-import {fontWeight, fontSize} from '@liguelead/foundation'
-
-export interface StateInterface {
-    input: string
-    label: string
-    helperText: string
-    animation?: string
-}
-
-interface TextFieldStates {
-    error: StateInterface
-    default: StateInterface
-    disabled: StateInterface
-}
-
-export const TextFieldStates = (state: keyof TextFieldStates) => {
-    const theme = useTheme()
-    const states: TextFieldStates = {
-        error: {
-            input: `
-                border: 1px solid ${parseColor(theme.colors.danger100)};
-                color: ${parseColor(theme.colors.neutral1000)};
-                &:focus {
-                    border-color: ${parseColor(theme.colors.danger100)};
-                }
-                &:focus + label {
-                    color: ${parseColor(theme.colors.danger100)};
-                }
-            `,
-            label: `color: ${parseColor(theme.colors.danger100)};`,
-            helperText: `color: ${parseColor(theme.colors.danger100)};`,
-            animation: `
-                &:focus + label,
-                &:not(:placeholder-shown) + label {
-                    top: 0px;
-                    left: 12px;
-                    font-size: ${fontSize.fontSize12}px;
-                }`
-        },
-        default: {
-            input: `
-                border: 1px solid ${parseColor(theme.colors.neutral700)};
-                color: ${parseColor(theme.colors.neutral1000)};
-                &:focus {
-                    border-color: ${parseColor(theme.colors.primary)};
-                }
-                &:focus + label {
-                    color: ${parseColor(theme.colors.primary)};
-                    font-weight: ${fontWeight.fontWeight600};
-                }
-            `,
-            label: `color: ${parseColor(theme.colors.neutral800)};`,
-            helperText: `color: ${parseColor(theme.colors.neutral700)};`,
-            animation: `
-                &:focus + label,
-                &:not(:placeholder-shown) + label {
-                    top: 0px;
-                    left: 12px;
-                    font-size: ${fontSize.fontSize12}px;
-                }`
-        },
-        disabled: {
-            input: `
-                border: 1px solid ${parseColor(theme.colors.neutral500)};
-                color: ${parseColor(theme.colors.neutral600)};
-            `,
-            label: `color: ${parseColor(theme.colors.neutral500)};
-                    background: transparent;`,
-            helperText: `color: ${parseColor(theme.colors.neutral500)};`,
-            animation: ``
-        }
-    }
-    return states[state]
-}
+import { parseColor } from '../../utils'
+import { useTheme } from 'styled-components'
+import { shadow } from '@liguelead/foundation'
+export interface StateInterface {
+    input: string
+    label?: string
+    helperText: string
+}
+
+interface TextFieldStates {
+    error: StateInterface
+    default: StateInterface
+    disabled: StateInterface
+}
+
+export const TextFieldStates = (state: keyof TextFieldStates) => {
+    const theme = useTheme()
+    const states: TextFieldStates = {
+        error: {
+            input: `
+                border: 1px solid ${parseColor(theme.colors.danger200)};
+                color: ${parseColor(theme.colors.textDark)};
+                &:focus {
+                    border-color: ${parseColor(theme.colors.danger200)};
+                    box-shadow: ${shadow.errorShadow};
+                }
+            `,
+            label: `color: ${parseColor(theme.colors.danger100)};`,
+            helperText: `color: ${parseColor(theme.colors.danger100)};`,
+        },
+        default: {
+            input: `
+                border: 1px solid ${parseColor(theme.colors.neutral400)};
+                color: ${parseColor(theme.colors.textDark)};
+                &:focus {
+                    border-color: ${parseColor(theme.colors.neutral700)};
+                    box-shadow: ${shadow.focusShadow};
+                }
+            `,
+            label: `color: ${parseColor(theme.colors.textDark)};`,
+            helperText: `color: ${parseColor(theme.colors.textMedium)};`,
+        },
+        disabled: {
+            input: `
+                color: ${parseColor(theme.colors.textDark)};
+                box-shadow: 0 1px 2px 0 #0000000D;
+                opacity: 0.5;
+            `,
+            helperText: `color: ${parseColor(theme.colors.neutral500)};`,
+        }
+    }
+    return states[state]
+}