@edvisor/product-language 0.9.0 → 0.10.2

package/src/lib/components/thumbnail/thumbnail.tsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+import { FC, If, isNil, Nothing } from '@helpers'
+import { Borders } from '@foundations'
+import { SpaceAround } from '../layout/'
+import { ThumbnailSizeProps, getValuesBySize } from './thumbnail-size-flags'
+
+const Box = styled(SpaceAround)<{ size: string }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  border-radius: 6px;
+  border: 1px solid ${Borders.Default.Subdued};
+  box-sizing: border-box;
+`
+
+const Image = styled.img`
+  width: 100%;
+  object-fit: contain;
+`
+
+interface IThumbnailProps {
+  imageUrl?: string;
+  imageLabel?: string;
+  className?: string;
+}
+type IProps = IThumbnailProps & ThumbnailSizeProps
+
+export const Thumbnail: FC<IProps> = (props) => {
+  const { imageUrl, imageLabel = imageUrl, className = '' } = props
+  const size = getValuesBySize(props)
+
+  if (isNil(imageUrl)) {
+    return <Nothing/>
+  }
+
+  return (
+    <Box
+      size={size}
+      data-testid="thumbnail-test"
+      className={className}
+    >
+      <If is={imageUrl}><Image src={imageUrl} alt={imageLabel}/></If>
+    </Box>
+  )
+}

package/src/lib/components/tooltip/index.tsx

@@ -0,0 +1 @@
+export * from './tooltip'

package/src/lib/components/tooltip/stories/components.tsx

@@ -0,0 +1,224 @@
+/* eslint-disable no-restricted-syntax */
+import { Flex, Center } from 'components/layout'
+import { Playground } from 'storybook-addon-jarle-monaco'
+import styled from 'styled-components'
+import { Label } from 'components/typography'
+import { Padding } from '@foundations'
+import { Checkbox } from 'components/checkbox'
+import { Tooltip, TooltipPosition } from '../tooltip'
+import { Flag } from 'components/flag'
+import { Select } from 'components/select'
+import { CountryCodes } from 'components/flag/flag.list'
+
+const FlagContainer = styled(Center)`
+  width: 32px;
+  height: 32px;
+`
+
+const tt = () => {
+  return(
+    <Tooltip content="consectetur adipiscing elit" >
+      Lorem ipsum dolor sit amet
+    </Tooltip>
+  )
+}
+
+const Wrapper = styled(Flex)`
+  gap: 32px;
+  height: 230px;
+  padding-top: 40px;
+  & > div {
+    width: 100%;
+  }
+`
+
+const FlagListContainer = styled(Center)`
+  gap: 12px;
+  padding: 40px 0;
+`
+
+const LeftMenu = styled(Flex)`
+  text-align: left;
+`
+
+const CheckBoxWraper = styled.div`
+  display: flex;
+  gap: 6px;
+  padding: ${Padding.xs};
+  align-self: flex-start;
+  flex-direction: row-reverse;
+  float: left;
+  width: 250px;
+  div:last-of-type {
+    margin-right: auto;
+  }
+`
+
+const StyledSelect = styled(Select)`
+  width: 250px ! important;
+  margin-left: auto;
+  margin-right: auto;
+`
+
+const options = [
+  {
+    label: 'Top',
+    value: TooltipPosition.TOP 
+  },
+  {
+    label: 'Bottom',
+    value: TooltipPosition.BOTTOM 
+  },
+  {
+    label: 'Right',
+    value: TooltipPosition.RIGHT
+  },
+  {
+    label: 'Left',
+    value: TooltipPosition.LEFT 
+  }
+]
+
+export const PlayGroundTooltip = () => (
+  <Playground
+    // eslint-disable-next-line no-restricted-syntax
+    code={`
+
+    const [value, setValue] = useState<TooltipPosition>(TooltipPosition.TOP);
+      
+    <Wrapper>
+      <LeftMenu column>
+        <StyledSelect
+          value={value}
+          options={options}
+          onChange={setValue}
+        />    
+      </LeftMenu>
+      <div>
+        <Tooltip content="consectetur adipiscing elit" position={value} >
+          Lorem ipsum dolor sit amet
+        </Tooltip>
+      </div>
+    </Wrapper>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Label,
+        Wrapper,
+        Checkbox,
+        LeftMenu,
+        StyledSelect,
+        options,
+        Tooltip,
+        TooltipPosition,
+        CheckBoxWraper
+      },
+    }}
+  />
+)
+
+
+export const UseJSXElement = () => (
+  <Playground
+    // eslint-disable-next-line no-restricted-syntax
+    code={`
+      
+    const flagBox = (code: CountryCodes) => {
+      return (
+        <FlagContainer>
+          <Flag large code={code}/>
+        </FlagContainer>
+      )
+    }
+
+    <FlagListContainer>
+      <div style={{display: 'flex', gap: '12px'}}>
+        <div>
+          <Tooltip content={flagBox('BR')} >
+            <Label>Brazil</Label>
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content={flagBox('CA')} >
+            <Label>Canada</Label>
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content={flagBox('MX')} >
+            <Label>Mexico</Label>
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content={flagBox('US')} >
+            <Label>United States</Label>
+          </Tooltip>
+        </div>
+      </div> 
+    </FlagListContainer>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Label,
+        Tooltip,
+        Wrapper,
+        Flag,
+        FlagContainer,
+        FlagListContainer,
+      },
+    }}
+  />
+)
+
+export const WrapJSXElement = () => (
+  <Playground
+    // eslint-disable-next-line no-restricted-syntax
+    code={`
+      
+    const flagBox = (code: CountryCodes) => {
+      return (
+        <FlagContainer>
+          <Flag large code={code}/>
+        </FlagContainer>
+      )
+    }
+
+    <FlagListContainer>
+      <div style={{display: 'flex', gap: '12px'}}>
+        <div>
+          <Tooltip content="Brazil" >
+            {flagBox('BR')}
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content="Canada" >
+            {flagBox('CA')}
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content="Mexico" >
+            {flagBox('MX')}
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content="United States" width={130}>
+            {flagBox('US')}
+          </Tooltip>
+        </div>
+      </div>   
+    </FlagListContainer>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Label,
+        Tooltip,
+        Wrapper,
+        Flag,
+        FlagContainer,
+        FlagListContainer,
+      },
+    }}
+  />
+)

package/src/lib/components/tooltip/stories/tooltip.stories.mdx

@@ -0,0 +1,63 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Tooltip } from '../index'
+import { 
+  PlayGroundTooltip,
+  UseJSXElement,
+  WrapJSXElement
+} from './components'
+
+
+<Meta title="Components/Tooltip" component={Tooltip}/>
+
+# Tooltip System
+
+For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=734%3A7388&t=asPLtvbqVaOTwoNs-0)
+
+## How to Use
+
+```tsx
+import { Tooltip, TooltipPosition } from '@edvisor/product-language'
+
+<Tooltip 
+  content="consectetur adipiscing elit"
+  position={TooltipPosition.top}
+>
+  Lorem ipsum dolor sit amet
+</Tooltip>
+
+```
+
+### Positioning
+
+<PlayGroundTooltip/>
+
+
+### With JSX Elemnt
+
+<UseJSXElement/>
+
+
+### Wrap JSX Elemnt
+<WrapJSXElement/>
+
+### API
+
+## Tooltip
+| Prop           | Type            | Description                                                           |
+| -------------- | --------------- | --------------------------------------------------------------------- |
+| [`position?`](#tooltipPosition)  | `TooltipPosition`     | `The position to display the Tooltip`         | 
+| `content`                        | `ReactNode`           | `Content of the Tooltip`                      | 
+| `children`                       | `ReactNode`           | `ELement to be wrapped by the tooltip`        |
+| `width?`                         |  `number`             | `The width of the Tooltip, (default to 100%)` |
+| `className?`                     | `string`              | `Class to be added to the Tooltip`            |
+| `style?`                         | `CSSProperties`       | `Stiles to be added to the Tooltip`           |
+
+<div id="tooltipPosition"></div>
+
+## TooltipPosition
+| Prop           | Type                              | Description                                         |
+| -------------- | --------------------------------- | --------------------------------------------------- |
+| 1              | `TooltipPosition.TOP`             | `Display the tooltip at the top of the element`     |
+| 2              | `TooltipPosition.BOTTOM`          | `Display the tooltip at the bottom of the element`  |
+| 3              | `TooltipPosition.LEFT`            | `Display the tooltip in the left of the element`    |
+| 4              | `TooltipPosition.RIGHT`           | `Display the tooltip in the right of the element`   |

package/src/lib/components/tooltip/tooltip.test.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable no-restricted-syntax */
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Tooltip } from './index'
+
+describe('Tooltip Tests', () => {
+
+  it('should render the Tooltip', async () => {
+    render(
+      <Tooltip content="Tooltip Content">
+        Text For Tooltip
+      </Tooltip>
+    )
+
+    expect(screen.queryByText('Tooltip Content')).not.toBeInTheDocument()
+
+    fireEvent.mouseOver(screen.getByText('Text For Tooltip'))
+
+    expect(screen.queryByText('Tooltip Content')).toBeInTheDocument()
+    expect(screen.getByRole('tooltip')).toBeInTheDocument()
+    
+  })
+})

package/src/lib/components/tooltip/tooltip.tsx

@@ -0,0 +1,179 @@
+import { FC, isDefined, uniqueId } from '@helpers'
+import { CSSProperties, ReactNode, useState } from 'react'
+import styled, { css, keyframes, FlattenSimpleInterpolation } from 'styled-components'
+import { Surface, Padding, Margin } from '@foundations'
+
+export enum TooltipPosition {
+  TOP,
+  BOTTOM,
+  LEFT,
+  RIGHT,
+}
+
+interface IPosition {
+  TOP: FlattenSimpleInterpolation
+  BOTTOM: FlattenSimpleInterpolation
+  LEFT: FlattenSimpleInterpolation
+  RIGHT: FlattenSimpleInterpolation
+}
+
+export const TooltipWrapper = styled.div`
+  position: relative;
+  display: inline-flex;
+`
+const getContainerPosition = (tooltipPosition : TooltipPosition) => {
+  
+  const position: IPosition = {
+    TOP: css``,
+    BOTTOM: css`
+      top: calc(100% + 5px);
+    `,
+    LEFT: css`
+    margin-right: ${Margin.none};
+      width: 100%;
+      left: unset;
+      top: 50%;
+      right: calc(100% + 5px);
+    `,
+    RIGHT: css`
+      margin-left: ${Margin.none};
+      width: 100%;
+      top: 50%;
+      left: calc(100% + 5px);
+    `
+  }
+
+  const key = TooltipPosition[tooltipPosition] as keyof IPosition
+  return position[key]
+}
+
+const getTooltipBoxPosition = (tooltipPosition : TooltipPosition) => {
+  
+  const position: IPosition = {
+    TOP: css``,
+    BOTTOM: css`
+      &:after {
+        border-color: transparent transparent ${Surface.Default.Inverse} transparent;
+        top: unset;
+        width: 1px;
+        bottom: 100%;
+        left: calc(50% - 5px);
+      }
+    `,
+    LEFT: css`
+      &:after {
+        border-color: transparent transparent transparent ${Surface.Default.Inverse};
+        left: 100%;
+        top: calc(50% - 5px);
+      }
+    `,
+    RIGHT: css`
+      &:after {
+        border-color: transparent ${Surface.Default.Inverse} transparent
+          transparent;
+        right: 100%;
+        left: unset;
+        top: calc(50% - 5px);
+      }
+    `
+  }
+
+  const key = TooltipPosition[tooltipPosition] as keyof IPosition
+  return position[key]
+}
+
+export const CenterContainer = styled.div<{position: TooltipPosition, width?: number}>`
+  position: absolute;
+  width: ${({width}) => isDefined(width) ? `${width}px` : '100%'};
+  margin-left:${({width}) => isDefined(width) ? `-${width/2}px` : '-50%'};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 50%;
+  bottom: ${({position}) => position === TooltipPosition.BOTTOM ? 'unset' :  'calc(100% + 5px)'};
+  pointer-events: none;
+  ${({ position }) => getContainerPosition(position)}
+`
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`
+
+export const TooltipBox = styled.div<{position: TooltipPosition}>`
+  position: relative;
+  background-color: ${Surface.Default.Inverse};  
+  color: ${Surface.Default.Default};
+  text-align: center;
+  border-radius: 6px;
+  padding: ${Padding.xxs} ${Padding.xs};
+  animation: ${fadeIn} 0.1s linear;
+  &:after {
+    content: "";
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: ${Surface.Default.Inverse} transparent transparent transparent;
+    left: calc(50% - 4.5px);
+    top: 100%;
+  }
+  ${({ position }) => getTooltipBoxPosition(position)}
+`
+
+interface ITooltip {
+  position?: TooltipPosition 
+  content: ReactNode, 
+  children: ReactNode,
+  width?: number,
+  className?: string
+  style?: CSSProperties
+}
+
+export const Tooltip: FC<ITooltip> = (props) => {
+
+  const {
+    position = TooltipPosition.TOP, 
+    content,
+    width, 
+    children,
+    style,
+    className, 
+  } = props
+  
+  const [isHovered, setIsHovered] = useState(false)
+  const id = uniqueId('tooltip-')
+
+  return (
+    <TooltipWrapper>
+      <span
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {children}
+      </span>
+      {isHovered && (
+        <CenterContainer 
+          role="tooltip"
+          id={id}
+          position={position} 
+          width={width} 
+        >
+          <TooltipBox 
+            aria-describedby={id}  
+            style={style} 
+            className={className} 
+            position={position}
+          >
+            {content}
+          </TooltipBox>
+        </CenterContainer>
+      )}
+    </TooltipWrapper>
+  )
+}