@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-6

package/raw/care/components/organisms/bookingSearchBar/index.stories.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { Story } from '@storybook/react/types-6-0'
+
+import { TranslationsProvider } from '../../../../i18n/translationsProvider'
+import { theme } from '../../../../misc/theme'
+import { BookingSearchBar, Props } from './index'
+
+export default {
+  component: BookingSearchBar,
+  title: 'Projects/Care/Organisms/BookingSearchBar',
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+const mobileViewport = {
+  viewports: INITIAL_VIEWPORTS,
+  defaultViewport: 'iphone6',
+}
+
+const Template: Story<Props> = (args, { globals: { locale } }) => (
+  <div
+    style={{
+      minWidth: '100vw',
+      minHeight: '100vh',
+      backgroundColor: theme.colors.neutral200,
+    }}
+  >
+    <TranslationsProvider locale={locale || 'en-PH'}>
+      <BookingSearchBar {...args} />
+    </TranslationsProvider>
+  </div>
+)
+
+const baseProps: Partial<Props> = {
+  isMobile: false,
+  careApiDomain: 'https://service-health-care.hellohealthgroup.com/',
+  routerPush: (url) => alert(`router navigate to ${url}`),
+  isDebug: true,
+  gaTrackingSearchBar: {
+    dataEventAction: 'click',
+    dataEventCategory: 'search',
+    dataEventLabel: 'search',
+  },
+}
+
+export const DesktopGeolocUnset = Template.bind({})
+DesktopGeolocUnset.args = {
+  ...baseProps,
+  geoLocationPermission: 'unset',
+}
+
+export const DesktopGeolocGranted = Template.bind({})
+DesktopGeolocGranted.args = {
+  ...baseProps,
+  geoLocationPermission: 'granted',
+  geoLocationCoordinates: {
+    lat: '21.026960632580476',
+    lng: '105.83364617370094',
+  },
+}
+
+export const DesktopGeolocDenied = Template.bind({})
+DesktopGeolocDenied.args = {
+  ...baseProps,
+  geoLocationPermission: 'denied',
+}
+
+export const DesktopGeolocAuto = Template.bind({})
+DesktopGeolocAuto.args = {
+  ...baseProps,
+}
+
+export const DesktopSelectedCity = Template.bind({})
+DesktopSelectedCity.args = {
+  ...baseProps,
+  geoLocationPermission: 'denied',
+  initialSelectedCity: {
+    id: 15,
+    name: 'Đà Nẵng',
+    slug: 'da-nang',
+  },
+}
+
+export const MobileGeolocAuto = Template.bind({})
+MobileGeolocAuto.args = {
+  ...baseProps,
+  isMobile: true,
+}
+
+MobileGeolocAuto.parameters = {
+  viewport: mobileViewport,
+}
+
+export const AutoCompleteDisabled = Template.bind({})
+AutoCompleteDisabled.args = {
+  ...baseProps,
+  autoCompleteDisabled: true,
+  onSearch: (d) => console.log({ d }),
+}
+
+export const AutoCompleteDisabledMobile = Template.bind({})
+
+AutoCompleteDisabledMobile.parameters = {
+  viewport: mobileViewport,
+}
+
+AutoCompleteDisabledMobile.args = {
+  ...baseProps,
+  autoCompleteDisabled: true,
+  isMobile: true,
+  onSearch: (d) => console.log({ d }),
+}
+
+export const WithCustomSeachPlaceholder = Template.bind({})
+WithCustomSeachPlaceholder.args = {
+  ...baseProps,
+  inputSearchPlaceholder: 'Hello',
+}
+
+export const WithSearchValue = Template.bind({})
+WithSearchValue.args = {
+  ...baseProps,
+  initialSearchValue: 'Nguyen',
+}

package/raw/care/components/organisms/bookingSearchBar/index.styled.ts

@@ -0,0 +1,51 @@
+import { Input } from 'components/atoms'
+import styled, { createGlobalStyle } from 'styled-components'
+
+export const StyledSearchBarWrapper = styled.div``
+
+export const StyledSearchBarMobileWrapper = styled.div`
+  --searchbar-z-index: 305;
+  &[data-is-modal='true'] {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: var(--mobile-care-searchbar-height, 100%);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    background-color: white;
+    z-index: var(--searchbar-z-index);
+  }
+`
+
+export const StyledSearchBarMobileModalHeader = styled.section``
+
+export const StyledHiddenInputMobile = styled.input`
+  position: fixed;
+  left: -100%;
+  top: -100%;
+`
+
+export const StyledInput = styled(Input)`
+  #booking-search-bar & {
+    input {
+      font-size: 16px;
+    }
+  }
+`
+
+export const CareSearchGlobalStyles = createGlobalStyle`
+  .care-popup-open {
+    overflow: hidden;
+    position: fixed;
+    &::before {
+      content: '';
+      inset: 0;
+      position: absolute;
+      background-color: white;
+      min-height: 100vh;
+      min-width: 100vw;
+      z-index: 2;
+    }
+  }
+`