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

package/src/components/molecules/sidemenu/index.stories.tsx

@@ -0,0 +1,156 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import * as Menu from '../sidemenu'
+import { Props } from './sideMenu'
+import { Test } from './test'
+
+export default {
+  component: Menu,
+  title: 'Molecules/SideMenu',
+}
+
+const SideMenu: Story<Props> = (args) => <Test />
+
+export const WorkingExample = SideMenu.bind({})
+
+const Template: Story = (args: any) => (
+  <Menu.SideMenu {...args}>
+    <Menu.SideHeader
+      isCollapsed={false}
+      onBackClick={() => console.log('Close button pressed 🤠')}
+    />
+    <Menu.UserInfo
+      userName="Dirk Mulder"
+      role="HHG Care"
+      isCollapsed={false}
+      // avatarOnClick={() => undefined}
+      avatar={
+        <img
+          style={{
+            height: '40px',
+            width: '40px',
+          }}
+          src="//unsplash.it/32"
+        />
+      }
+    />
+    <Menu.MenuLink
+      isActive
+      isCollapsed={false}
+      icon={<img src="//unsplash.it/16" />}
+      onLinkClick={() => console.log('clicked!')}
+    >
+      Overview
+    </Menu.MenuLink>
+    <Menu.MenuLink
+      isCollapsed={false}
+      icon={<img src="//unsplash.it/16" />}
+      onLinkClick={() => console.log('clicked!')}
+    >
+      Overview
+    </Menu.MenuLink>
+    <Menu.MenuLink
+      isCollapsed={false}
+      icon={<img src="//unsplash.it/16" />}
+      onLinkClick={() => console.log('clicked!')}
+    >
+      Overview
+    </Menu.MenuLink>
+  </Menu.SideMenu>
+)
+
+export const Full = Template.bind({})
+
+Full.args = {
+  isCollapsed: false,
+}
+
+const CollapsedMenu: Story<Props> = (args) => (
+  <Menu.SideMenu {...args}>
+    <Menu.SideHeader
+      isCollapsed={true}
+      onBackClick={() => console.log('Close button pressed 🤠')}
+    />
+    <Menu.UserInfo
+      userName="Dirk Mulder"
+      role="HHG Care"
+      isCollapsed={true}
+      // avatarOnClick={() => undefined}
+      avatar={
+        <img
+          style={{
+            height: '40px',
+            width: '40px',
+          }}
+          src="//unsplash.it/32"
+        />
+      }
+    />
+    <Menu.MenuLink
+      isActive
+      isCollapsed={true}
+      icon={<img src="//unsplash.it/16" />}
+      onLinkClick={() => console.log('clicked!')}
+    >
+      Overview
+    </Menu.MenuLink>
+    <Menu.MenuLink
+      isCollapsed={true}
+      icon={<img src="//unsplash.it/16" />}
+      onLinkClick={() => console.log('clicked!')}
+    >
+      Overview
+    </Menu.MenuLink>
+    <Menu.MenuLink
+      isCollapsed={true}
+      icon={<img src="//unsplash.it/16" />}
+      onLinkClick={() => console.log('clicked!')}
+    >
+      Overview
+    </Menu.MenuLink>
+  </Menu.SideMenu>
+)
+
+export const Collapsed = CollapsedMenu.bind({})
+
+Collapsed.args = {
+  isCollapsed: true,
+}
+
+const MenuHeader: Story<Props> = (args) => <Menu.SideHeader {...args} />
+
+export const Header = MenuHeader.bind({})
+
+Header.args = {
+  defaultLogo: 'hellobacsi',
+  isCollapsed: false,
+  onBackClick: () =>
+    console.log('You have successfully clicked on the button 🥳'),
+}
+
+const MenuUserInfo: Story<Props> = (args: any) => <Menu.UserInfo {...args} />
+
+export const UserInfo = MenuUserInfo.bind({})
+
+UserInfo.args = {
+  userName: 'Random User',
+  isCollapsed: false,
+  role: 'Hello Health Group',
+  avatar: <img src="//unsplash.it/32" />,
+}
+
+const MenuLink: Story<Props> = (args: any) => (
+  <Menu.MenuLink {...args}>I am a link</Menu.MenuLink>
+)
+
+export const Link = MenuLink.bind({})
+
+Link.args = {
+  isActive: true,
+  isCollapsed: false,
+  icon: <img src="//unsplash.it/16" />,
+  activeIcon: <img src="//unsplash.it/16" />,
+  onLinkClick: () => console.log('Click 😇'),
+}

package/src/components/molecules/sidemenu/index.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+import { render, cleanup } from '@testing-library/react'
+import 'jest-styled-components'
+
+import MockTheme from '../../../misc/mockTheme'
+import * as Menu from '../sidemenu'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const menu = render(
+    <MockTheme>
+      <Menu.SideMenu isCollapsed>
+        <Menu.SideHeader
+          isCollapsed={true}
+          onBackClick={() => console.log('Close button pressed 🤠')}
+        />
+        <Menu.UserInfo
+          userName="Dirk Mulder"
+          role="HHG Care"
+          isCollapsed={true}
+          avatar={<img src="//unsplash.it/32" />}
+        />
+        <Menu.MenuLink
+          isActive
+          isCollapsed={true}
+          icon={<img src="//unsplash.it/16" />}
+          onLinkClick={() => console.log('clicked!')}
+        >
+          Overview
+        </Menu.MenuLink>
+        <Menu.MenuLink
+          isCollapsed={true}
+          icon={<img src="//unsplash.it/16" />}
+          onLinkClick={() => console.log('clicked!')}
+        >
+          Overview
+        </Menu.MenuLink>
+        <Menu.MenuLink
+          isCollapsed={true}
+          icon={<img src="//unsplash.it/16" />}
+          onLinkClick={() => console.log('clicked!')}
+        >
+          Overview
+        </Menu.MenuLink>
+      </Menu.SideMenu>
+    </MockTheme>,
+  )
+
+  const self = menu.container.firstChild
+
+  expect(self).toMatchSnapshot()
+
+  expect(self).toHaveAttribute('data-is-collapsed', 'true')
+})

package/src/components/molecules/sidemenu/index.tsx

@@ -0,0 +1,4 @@
+export { SideMenu } from './sideMenu'
+export { SideHeader } from './sideHeader'
+export { UserInfo } from './userInfo'
+export { MenuLink } from './menuLink'

package/src/components/molecules/sidemenu/menuLink.tsx

@@ -0,0 +1,78 @@
+import React, { ReactNode } from 'react'
+
+import { Text, TextSize, TextType } from 'components/atoms'
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+const StyledMenuLink = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 9px 21px;
+  margin-bottom: 4px;
+  border-radius: 6px;
+
+  &:not([data-is-link-active]) {
+    cursor: pointer;
+  }
+
+  p {
+    margin-left: 12px;
+  }
+
+  &[data-is-link-active] {
+    background: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  }
+
+  &[data-is-link-collapsed] {
+    justify-content: center;
+    margin-right: -14px;
+    margin-left: -14px;
+  }
+`
+
+type Props = {
+  icon: JSX.Element
+  children: ReactNode
+  isCollapsed: boolean
+  onLinkClick: () => void
+  activeIcon?: JSX.Element
+  isActive?: boolean
+  textSize?: TextSize
+  textType?: TextType
+  textColorActive?: string
+  textColor?: string
+}
+
+const MenuLink = ({
+  icon,
+  isActive,
+  children,
+  isCollapsed,
+  activeIcon,
+  onLinkClick,
+  textSize = 'base',
+  textType = 'bold',
+  textColorActive = '#fff',
+  textColor = '#595959',
+}: Props) => {
+  return (
+    <StyledMenuLink
+      data-is-link-active={isActive || undefined}
+      onClick={onLinkClick}
+      data-is-link-collapsed={isCollapsed || undefined}
+    >
+      {!(isActive && activeIcon) ? icon : activeIcon}
+      {!isCollapsed && (
+        <Text
+          size={textSize}
+          type={textType}
+          color={isActive ? textColorActive : textColor}
+        >
+          {children}
+        </Text>
+      )}
+    </StyledMenuLink>
+  )
+}
+
+export { MenuLink }

package/src/components/molecules/sidemenu/sideHeader.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+
+import { Logo } from 'components/atoms'
+import styled from 'styled-components'
+
+const StyledSideHeader = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+
+  svg {
+    transition: 0.4s ease-in-out;
+  }
+`
+
+const StyledArrow = styled.div`
+  cursor: pointer;
+  &[data-is-collapsed] {
+    transform: rotate(180deg);
+  }
+`
+
+type Props = {
+  isCollapsed: boolean
+  defaultLogo?:
+    | 'hellobacsi'
+    | 'hellosehat'
+    | 'hellohealth'
+    | 'hellotogether'
+    | 'hellocare'
+    | 'logomark'
+  onBackClick?: () => void
+  customIcon?: JSX.Element
+}
+
+const SideHeader = ({
+  isCollapsed,
+  defaultLogo,
+  onBackClick,
+  customIcon,
+}: Props) => {
+  return (
+    <StyledSideHeader>
+      <Logo
+        type={isCollapsed ? 'logomark' : defaultLogo || 'hellocare'}
+        height="24px"
+        width={isCollapsed ? '24px' : '77px'}
+      />
+      <StyledArrow
+        data-is-collapsed={isCollapsed || undefined}
+        onClick={onBackClick}
+      >
+        {customIcon ? (
+          customIcon
+        ) : (
+          <svg
+            data-name="Layer 1"
+            viewBox="0 0 20 20"
+            width="20px"
+            height="20px"
+          >
+            <path
+              d="M10 .75A9.25 9.25 0 1019.25 10 9.25 9.25 0 0010 .75z"
+              fill="none"
+              stroke="#d2d6dc"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+            <path
+              d="M11.44 6.53L8 10l3.48 3.47"
+              fill="none"
+              stroke="#737373"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+          </svg>
+        )}
+      </StyledArrow>
+    </StyledSideHeader>
+  )
+}
+
+export { SideHeader }

package/src/components/molecules/sidemenu/sideMenu.tsx

@@ -0,0 +1,39 @@
+import React, { CSSProperties, ReactNode } from 'react'
+
+import styled from 'styled-components'
+
+const StyledSideMenu = styled.div`
+  --menu-width: 240px;
+  --menu-spacing: 28px 16px;
+  width: var(--menu-width);
+  height: 100vh;
+  padding: var(--menu-spacing);
+  background-color: ${(props) => props.theme.colors.neutral50};
+  transition: ease-in-out 0.5s;
+
+  &[data-is-collapsed] {
+    --menu-width: 64px;
+    --menu-spacing: 28px 8px;
+  }
+`
+
+export type Props = {
+  isCollapsed: boolean
+  className?: string
+  style?: CSSProperties
+  children?: ReactNode
+}
+
+const SideMenu = ({ isCollapsed, className, style, children }: Props) => {
+  return (
+    <StyledSideMenu
+      style={style}
+      className={className}
+      data-is-collapsed={isCollapsed || undefined}
+    >
+      {children}
+    </StyledSideMenu>
+  )
+}
+
+export { SideMenu }

package/src/components/molecules/sidemenu/test.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+
+import * as Menu from '../sidemenu'
+
+const Test = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  return (
+    <Menu.SideMenu isCollapsed={isMenuOpen}>
+      <Menu.SideHeader
+        isCollapsed={isMenuOpen}
+        onBackClick={() => setIsMenuOpen(!isMenuOpen)}
+      />
+      <Menu.UserInfo
+        userName="Dirk Mulder"
+        role="HHG Care"
+        isCollapsed={isMenuOpen}
+        // avatarOnClick={() => console.log('click')}
+        avatar={
+          <img
+            style={{
+              height: '40px',
+              width: '40px',
+            }}
+            src="//unsplash.it/32"
+          />
+        }
+      />
+      <Menu.MenuLink
+        icon={
+          <img
+            style={{
+              height: '20px',
+              width: '20px',
+            }}
+            src="//unsplash.it/26"
+          />
+        }
+        isActive
+        isCollapsed={isMenuOpen}
+        onLinkClick={() => console.log('click')}
+      >
+        Overview
+      </Menu.MenuLink>
+      <Menu.MenuLink
+        icon={
+          <img
+            style={{
+              height: '20px',
+              width: '20px',
+            }}
+            src="//unsplash.it/26"
+          />
+        }
+        isCollapsed={isMenuOpen}
+        onLinkClick={() => console.log('click')}
+      >
+        Overview
+      </Menu.MenuLink>
+      <Menu.MenuLink
+        icon={
+          <img
+            style={{
+              height: '20px',
+              width: '20px',
+            }}
+            src="//unsplash.it/26"
+          />
+        }
+        isCollapsed={isMenuOpen}
+        onLinkClick={() => console.log('click')}
+      >
+        Overview
+      </Menu.MenuLink>
+      <Menu.MenuLink
+        icon={
+          <img
+            style={{
+              height: '20px',
+              width: '20px',
+            }}
+            src="//unsplash.it/26"
+          />
+        }
+        isCollapsed={isMenuOpen}
+        onLinkClick={() => console.log('click')}
+      >
+        Overview
+      </Menu.MenuLink>
+    </Menu.SideMenu>
+  )
+}
+
+export { Test }

package/src/components/molecules/sidemenu/userInfo.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import { DoctorInfo } from 'components/molecules/doctorInfo'
+import styled from 'styled-components'
+
+const StyledUserInfo = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 24px;
+  margin-bottom: 36px;
+
+  figcaption {
+    white-space: nowrap;
+  }
+
+  &[data-is-collapsed='true'] {
+    img {
+      max-width: 2rem;
+      max-height: 2rem;
+    }
+  }
+`
+
+type Props = {
+  isCollapsed: boolean
+  userName: string
+  role: string
+  avatar: JSX.Element
+}
+
+const UserInfo = ({ isCollapsed, userName, role, avatar }: Props) => {
+  return (
+    <StyledUserInfo data-is-collapsed={isCollapsed || undefined}>
+      <DoctorInfo
+        image={avatar}
+        name={userName}
+        description={role}
+        isDescriptionHidden={isCollapsed}
+      />
+    </StyledUserInfo>
+  )
+}
+
+export { UserInfo }

package/src/components/molecules/starsRatingBox/index.stories.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { StarsRatingBox, Props } from './index'
+
+export default {
+  title: 'Molecules/StarsRatingBox',
+  component: StarsRatingBox,
+}
+
+const Template: Story<Props> = (args) => <StarsRatingBox {...args} />
+
+const SharedParameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/oC0v0apXhnjTuqI2FrL2ic/E-Shopping?node-id=2982%3A383525',
+  },
+  docs: {
+    description: {
+      component: 'Five (multiple) Star Rating block used for rating.',
+    },
+  },
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  rates: [
+    {
+      star: 1,
+      label: '1 stars',
+      percent: 20,
+    },
+    {
+      star: 2,
+      label: '2 stars',
+      percent: 40,
+    },
+    {
+      star: 3,
+      label: '3 stars',
+      percent: 20,
+    },
+    {
+      star: 4,
+      label: '4 stars',
+      percent: 60,
+    },
+    {
+      star: 5,
+      label: '5 stars',
+      percent: 100,
+    },
+  ],
+  style: {
+    maxWidth: 500,
+    margin: 24,
+  },
+}
+Default.parameters = SharedParameters
+
+export const EventTenStar = Template.bind({})
+EventTenStar.args = {
+  rates: [
+    {
+      star: 1,
+      label: 1,
+      percent: 20,
+    },
+    {
+      star: 2,
+      label: 2,
+      percent: 40,
+    },
+    {
+      star: 3,
+      label: 3,
+      percent: 20,
+    },
+    {
+      star: 4,
+      label: 4,
+      percent: 60,
+    },
+    {
+      star: 5,
+      label: 5,
+      percent: 70,
+    },
+    {
+      star: 6,
+      label: 6,
+      percent: 80,
+    },
+    {
+      star: 7,
+      label: 7,
+      percent: 30,
+    },
+    {
+      star: 8,
+      label: 8,
+      percent: 90,
+    },
+    {
+      star: 9,
+      label: 9,
+      percent: 95,
+    },
+    {
+      star: 10,
+      label: 10,
+      percent: 100,
+    },
+  ],
+  style: {
+    maxWidth: 500,
+    margin: 24,
+  },
+}
+EventTenStar.parameters = SharedParameters

package/src/components/molecules/starsRatingBox/index.styled.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+// Use `table` in order to align label and progress in all layouts with different labels' length
+export const StyledStarsRatingTable = styled.table`
+  width: 100%;
+  table-layout: auto;
+`
+
+export const StyledSingleRatingWrapper = styled.tr`
+  width: 100%;
+  height: 34px;
+`
+
+export const StyledSingleRatingLabel = styled.td`
+  white-space: nowrap;
+  padding-right: 12px;
+  vertical-align: middle;
+`
+
+export const StyledSingleRatingProgressWrapper = styled.td`
+  width: 100%;
+  vertical-align: middle;
+`