@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

package/src/misc/theme.ts

@@ -1,186 +0,0 @@
-export const theme = {
-  colors: {
-    primaryBase: '#2d87f3',
-    primaryHover: '#2c74df',
-    primaryActive: '#2b62cd',
-    primaryVisited: '#5e38ba',
-
-    secondaryBase: '#284a75',
-    secondaryDark: '#1b3250',
-
-    accentLight: '#b1ebf8',
-    accentMain: '#00AECD',
-
-    success: '#00b16a',
-    error: '#f71210',
-
-    gray100: '#f2f2f2',
-    gray200: '#d9d9d9',
-    gray300: '#bfbfbf',
-    gray400: '#8c8c8c',
-    gray500: '#737373',
-    gray600: '#595959',
-    gray800: '#262626',
-
-    blue50: '#e3f2ff',
-    blue100: '#bcdeff',
-    blue200: '#91caff',
-    blue300: '#65b5ff',
-    blue400: '#45a4ff',
-    blue500: '#2b94ff',
-    blue600: '#2d87f3',
-    blue700: '#2c74df',
-    blue800: '#2b62cd',
-    blue900: '#2743ad',
-
-    alertWarning: '#fe921d',
-
-    green50: '#e0f8ee',
-    green100: '#b3eed5',
-    green200: '#7ce2b9',
-    green300: '#2ed69e',
-    green400: '#00CB8A',
-    green500: '#00C076',
-    green600: '#00B16A',
-    green700: '#009E5C',
-    green800: '#008C50',
-    green900: '#006C39',
-
-    yellow50: '#fff8e2',
-    yellow100: '#ffecb6',
-    yellow200: '#ffe187',
-    yellow300: '#ffd658',
-    yellow400: '#ffc326',
-    yellow500: '#fe921d',
-    yellow600: '#ffb521',
-    yellow700: '#fea21e',
-    yellow800: '#fe921d',
-    yellow900: '#fc7419',
-
-    red50: '#fae9e8',
-    red100: '#feccbf',
-    red200: '#ff5331',
-    red300: '#f44d2c',
-    red400: '#ff6f4d',
-    red500: '#ff5331',
-    red600: '#f44d2c',
-    red700: '#e64728',
-    red800: '#d84023',
-    red900: '#bf331b',
-
-    neutral50: '#f8f9fc',
-    neutral100: '#e4e8ec',
-    neutral150: '#fafafa',
-    neutral200: '#d2d6dc',
-    neutral300: '#bfc5cc',
-    neutral400: '#adb3bc',
-    neutral500: '#9aa2ac',
-    neutral600: '#87909c',
-    neutral700: '#757f8c',
-    neutral800: '#626d7c',
-
-    teal50: '#e0f7fc',
-    teal100: '#b1ebf8',
-    teal200: '#7ddff3',
-    teal300: '#44d1ec',
-    teal400: '#00c7e6',
-    teal500: '#00bee0',
-    teal600: '#00aecd',
-    teal700: '#0099b2',
-    teal800: '#008599',
-    teal900: '#00626c',
-
-    pink50: '#fff1f6',
-    pink100: '#fec7dc',
-    pink200: '#fec7dc',
-    pink300: '#fec2cf',
-    pink400: '#fe9dc2',
-    pink500: '#fd87b4',
-    pink600: '#fd72a7',
-    pink700: '#fc5d9a',
-    pink800: '#fc488d',
-
-    violet50: '#f5edff',
-    violet100: '#e7d2f7',
-    violet200: '#d8b7f0',
-    violet300: '#ca9ce8',
-    violet400: '#bb82e1',
-    violet500: '#ad67d9',
-    violet600: '#9e4cd1',
-    violet700: '#9031ca',
-    violet800: '#8116c2',
-
-    indigo700: '#35639c',
-    indigo800: '#284a75',
-    indigo900: '#1b3250',
-
-    brown50: '#faecde',
-    brown100: '#ecd8c5',
-    brown200: '#dec5ab',
-    brown300: '#d0b192',
-    brown400: '#c39d79',
-    brown500: '#b5895f',
-    brown600: '#a77646',
-    brown700: '#99622c',
-    brown800: '#8b4e13',
-
-    white: '#fff',
-  },
-
-  mbColors: {
-    pink: '#e85388',
-    cobalt: '#2661ad',
-
-    dark: '#202135',
-    gray: '#3e3f58',
-    midGray: '#9495a0',
-    lightGray: '#f3f3f3',
-
-    lightMint: '#f2fcf8',
-    lightPink: '#ffeaf1',
-    lightOrange: '#fffaeb',
-    lightBlue: '#e0e9fc',
-    mint: '#5ec08f',
-    peach: '#ffaaa9',
-    orange: '#fb8c00',
-    ceruleanBlue: '#b6ceff',
-
-    red: '#eb5757',
-    lightRed: '#fdeeee',
-    yellow: '#ff8a2b',
-    green: '#f2fcf7',
-    blue: '#4096fe',
-
-    toneYellow: '#fff9eb',
-    toneGreen: '#f2fcf7',
-    toneBlue: '#e0e9fb',
-    tonePink: '#ffeaf1',
-  },
-
-  sizes: {
-    fwBold: '700',
-    fwSemiBold: '600',
-    fsCaption2: '13px',
-    fsHeading1: '40px',
-    fsHeading2: '28px',
-    fsHeading4: '24px',
-    fsHeading5: '18px',
-    fsHeading6: '16px',
-    fsParagraph3: '16px',
-    fsParagraph4: '14px',
-    fwRegular: '400',
-  },
-  zIndexes: {
-    belowHeader: '1',
-    zIndex100: '100',
-    onTop: '1000',
-  },
-
-  defaultColor: '',
-}
-
-export type ThemeType = typeof theme
-
-export type ThemeProps = {
-  theme: ThemeType
-}

package/src/misc/utils.ts

@@ -1,214 +0,0 @@
-import { css } from 'styled-components'
-const BREAK_POINT = 768
-const BREAK_POINT_TABLET = 1024
-
-const logDeprecate = {
-  spLayout: false,
-  pcLayout: false,
-  tdLayout: false,
-  mbLayout: false,
-}
-
-/**
- * The breakpoint for smartphone devices less than 768.
- * @example
- *  ${(props: ThemeProps) => spLayout()`
- *    color: ${props.theme.colors.neutral100};
- *  `}
- * @example
- *  ${spLayout()`
- *    color: ${(props) => props.theme.colors.neutral100};
- *  `}
- */
-
-export const spLayout = () => {
-  if (!logDeprecate.spLayout) {
-    console.error('spLayout is deprecated. Use `MediaQueries.mbDown` instead.')
-    logDeprecate.spLayout = true
-  }
-  return (style: TemplateStringsArray, ...exps) => css`
-    @media (max-width: ${BREAK_POINT - 1}px) {
-      ${css(style, ...exps)};
-    }
-  `
-}
-
-/**
- * The breakpoint for mobile and tablet devices less than 1024
- * @example
- *  ${(props: ThemeProps) => mbLayout()`
- *    color: ${props.theme.colors.neutral100};
- *  `}
- * @example
- *  ${mbLayout()`
- *    color: ${(props) => props.theme.colors.neutral100};
- *  `}
- */
-export const mbLayout = () => {
-  if (!logDeprecate.mbLayout) {
-    console.error('mbLayout is deprecated. Use `MediaQueries.tdDown` instead.')
-    logDeprecate.mbLayout = true
-  }
-  return (style: TemplateStringsArray, ...exps) => css`
-    @media (max-width: ${BREAK_POINT_TABLET - 1}px) {
-      ${css(style, ...exps)};
-    }
-  `
-}
-
-/**
- * The breakpoint for tablet devices only between 768 and 1024
- * @example
- *  ${(props: ThemeProps) => tdLayout()`
- *    color: ${props.theme.colors.neutral100};
- *  `}
- * @example
- *  ${tdLayout()`
- *    color: ${(props) => props.theme.colors.neutral100};
- *  `}
- */
-export const tdLayout = () => {
-  if (!logDeprecate.tdLayout) {
-    console.error('tdLayout is deprecated. Use `MediaQueries.tdOnly` instead.')
-    logDeprecate.tdLayout = true
-  }
-  return (style: TemplateStringsArray, ...exps) => css`
-    @media (min-width: ${BREAK_POINT}px) and (max-width: ${BREAK_POINT_TABLET - 1}px) {
-      ${css(style, ...exps)};
-    }
-  `
-}
-
-/**
- * The breakpoint for pc/laptop devices greater than or equal 1024.
- * @example
- *  ${(props: ThemeProps) => pcLayout()`
- *    color: ${props.theme.colors.neutral100};
- *  `}
- * @example
- *  ${pcLayout()`
- *    color: ${(props) => props.theme.colors.neutral100};
- *  `}
- */
-export const pcLayout = (useBreakpointMobile?: boolean) => {
-  if (!logDeprecate.pcLayout) {
-    console.error('pcLayout is deprecated. if pcLayout(true) use `MediaQueries.mbUp`. If pcLayout() use `MediaQueries.tdUp`.')
-    logDeprecate.pcLayout = true
-  }
-  return (style: TemplateStringsArray, ...exps) => css`
-    @media (min-width: ${useBreakpointMobile ? BREAK_POINT : BREAK_POINT_TABLET}px) {
-      ${css(style, ...exps)};
-    }
-  `
-}
-
-export const makeParams = (params: Record<string, string>): string => {
-  const paramKeys = Object.keys(params)
-  if (!paramKeys.length) {
-    return ''
-  }
-  return '?' + paramKeys.map((k: string) => `${k}=${params[k]}`).join('&')
-}
-
-export const formatUrlWithPageParam = (
-  path: string,
-  page = 1,
-  queryPageName = 'page',
-) => {
-  const [urlPart, queryPart] = path.split('?')
-  const urlObj = new URLSearchParams(queryPart || '')
-  const params: Record<string, string> = {}
-
-  urlObj.forEach((val, key) => {
-    if (val) {
-      params[key] = val
-    }
-  })
-
-  if (Number(page) > 1) {
-    params[queryPageName] = String(page) // Default is params.page
-  } else {
-    // Do not display "page=1" on the URL
-    delete params[queryPageName] // Default is params.page
-  }
-
-  return urlPart + makeParams(params)
-}
-
-export const toggleNoScroll = (isNoScroll?: boolean) => {
-  if (typeof window !== 'undefined') {
-    document.documentElement.classList.toggle('noscroll', isNoScroll)
-    document.body.classList.toggle('noscroll', isNoScroll)
-  }
-}
-
-export const Breakpoints = {
-  BREAK_POINT_SMALL_MOBILE: 481,
-  BREAK_POINT_MOBILE: 768,
-  BREAK_POINT_TABLET: 1024,
-  BREAK_POINT_PC: 1200,
-}
-
-/**
- * List of mediaQueries to use in StyledComponents
- * New naming convention base around breakpoints
-*
- * Note: smb = small mobile; mb = mobile; td = tablet device; pc = pc/laptop device
- *
- * smbDown: BREAK_POINT_SMALL_MOBILE go down.
- * smbUp: BREAK_POINT_SMALL_MOBILE go up
- *
- * mbDown: REPLACE spLayout. BREAK_POINT_MOBILE go down.
- * mbOnly: from BREAK_POINT_SMALL_MOBILE to BREAK_POINT_MOBILE
- * mbUp: REPLACE pcLayout(true). BREAK_POINT_MOBILE go up
- *
- * tdDown: REPLACE mbLayout. BREAK_POINT_TABLET go down
- * tdOnly: REPLACE tdLayout. from BREAK_POINT_MOBILE to BREAK_POINT_TABLET
- * tdUp: REPLACE pcLayout(). BREAK_POINT_TABLET go up
- *
- * pcDown: BREAK_POINT_PC go down
- * pcOnly: from BREAK_POINT_TABLET to BREAK_POINT_PC
- * pcUp: BREAK_POINT_PC go up
- *
- * @example
- *  ${MediaQueries.mbDown} {
- *    color: ${(props) => props.theme.colors.neutral100 }};
- *  }
- */
-export const MediaQueries = {
-  smbDown: `@media (max-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE - 1}px)`,
-  smbUp: `@media (min-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE}px)`,
-
-  mbDown: `@media (max-width: ${Breakpoints.BREAK_POINT_MOBILE - 1}px)`,
-  mbOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE}px) and (max-width: ${Breakpoints.BREAK_POINT_MOBILE - 1}px)`,
-  mbUp: `@media (min-width: ${Breakpoints.BREAK_POINT_MOBILE}px)`,
-  
-  tdDown: `@media (max-width: ${Breakpoints.BREAK_POINT_TABLET - 1}px)`,
-  tdOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_MOBILE
-    }px) and (max-width: ${Breakpoints.BREAK_POINT_TABLET - 1}px)`,
-  tdUp: `@media (min-width: ${Breakpoints.BREAK_POINT_TABLET}px)`,
-  
-  pcUp: `@media (min-width: ${Breakpoints.BREAK_POINT_PC}px)`,
-  pcOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_TABLET}px) and (max-width: ${Breakpoints.BREAK_POINT_PC - 1}px)`,
-  pcDown: `@media (max-width: ${Breakpoints.BREAK_POINT_PC - 1}px)`,
-}
-
-export const getBoundariesFromMediaQueryKey = (key?: keyof typeof MediaQueries) => {
-  // zero mean not set
-  switch(key) {
-    case 'smbDown': return [0, Breakpoints.BREAK_POINT_SMALL_MOBILE - 1]
-    case 'smbUp': return [Breakpoints.BREAK_POINT_SMALL_MOBILE, 0]
-
-    case 'mbDown': return [0, Breakpoints.BREAK_POINT_MOBILE - 1]
-    case 'mbOnly': return [Breakpoints.BREAK_POINT_SMALL_MOBILE, Breakpoints.BREAK_POINT_MOBILE - 1]
-    case 'mbUp': return [Breakpoints.BREAK_POINT_MOBILE, 0]
-
-    case 'tdDown': return [0, Breakpoints.BREAK_POINT_TABLET - 1]
-    case 'tdOnly': return [Breakpoints.BREAK_POINT_MOBILE, Breakpoints.BREAK_POINT_TABLET - 1]
-    case 'tdUp': return [Breakpoints.BREAK_POINT_TABLET, 0]
-
-    case 'pcUp': return [Breakpoints.BREAK_POINT_PC, 0]
-    case 'pcOnly': return [Breakpoints.BREAK_POINT_TABLET, Breakpoints.BREAK_POINT_PC - 1]
-    case 'pcDown': return [0, Breakpoints.BREAK_POINT_PC - 1]
-  }
-}

package/src/test/testTranslationProvider.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-
-import translations from 'i18n/en-PH.json'
-import { TranslationsContext } from 'i18n/translationsContext'
-
-export function TestTranslationProvider({ children }: { children: any }) {
-  return (
-    <TranslationsContext.Provider
-      value={{ locale: 'en-PH', values: translations }}
-    >
-      {children}
-    </TranslationsContext.Provider>
-  )
-}