@edvisor/product-language 0.10.2 → 0.10.4

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

@@ -1,44 +0,0 @@
-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

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

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

@@ -1,224 +0,0 @@
-/* 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

@@ -1,63 +0,0 @@
-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

@@ -1,22 +0,0 @@
-/* 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

@@ -1,179 +0,0 @@
-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>
-  )
-}