@edvisor/product-language 0.2.0 → 0.3.1

package/src/lib/components/layout/index.ts

@@ -1,3 +0,0 @@
-export * from './left-right-layout'
-export * from './flex'
-export * from './grid-layout'

package/src/lib/components/layout/left-right-layout.tsx

@@ -1,67 +0,0 @@
-import { Margin } from '@foundations'
-import { FC, PropsWithChildren } from '@helpers'
-import { Body, Heading3 } from 'components/typography'
-import styled from 'styled-components'
-
-interface ILeftRightLayoutGeneratorProps {
-  columns?: number
-  columnGutter?: number
-  rowGutter?: number
-}
-
-const DEFAULT: ILeftRightLayoutGeneratorProps = {
-  columns: 12,
-  columnGutter: 24,
-  rowGutter: 0,
-}
-
-export function leftRightLayoutGenerator (layoutProps: ILeftRightLayoutGeneratorProps = {}) {
-  const options = {
-    ...DEFAULT,
-    ...layoutProps,
-  }
-
-  const LayoutFrame = styled.div`
-    display: grid;
-    grid-template-columns: repeat(${options.columns}, 1fr);
-    grid-column-gap: ${options.columnGutter}px;
-    grid-row-gap: ${options.rowGutter}px;
-  `
-
-  const Left = styled.div`
-    grid-column: 1 / span 4;
-    grid-row: third-line / 4;
-  `
-
-  const Right = styled.div`
-    grid-column: 5 / span 8;
-    grid-row: third-line / 4;
-  `
-
-  const Slots = {
-    Left,
-    Right,
-    HeadingText: styled(Heading3)`
-      margin-bottom: ${Margin.m};
-    `,
-    HelpText: styled(Body).attrs({ subdued: true })``,
-    BodyText: Body,
-  }
-  
-  const Layout: FC<PropsWithChildren, typeof Slots> = (props) => {
-    return <LayoutFrame>{props.children}</LayoutFrame>
-  }
-
-  Layout.Left = Left
-  Layout.Right = Right
-  Layout.HeadingText = Slots.HeadingText 
-  Layout.BodyText = Slots.BodyText
-  Layout.HelpText = Slots.HelpText
-
-  return {
-    LeftRightLayout: Layout,
-    Layout,
-    Left,
-    Right,
-  }
-}

package/src/lib/components/link/index.ts

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

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

@@ -1,29 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { Link } from '.'
-import { Interactive } from '@foundations'
-
-describe('Link', () => {
-  it('should render the component Link with default color', async () => {
-    render(
-      <Link label="Edvisor" aria-label="red" href="https://app.edvisor.io/" />
-    )
-    expect(screen.getByRole('link')).toBeInTheDocument()
-    expect(screen.getByText('Edvisor')).toBeInTheDocument()
-    expect(screen.getByRole('link')).toHaveStyle(`color: ${Interactive.Default.Default}`)
-  })
-  it('should render the component Link with subtle color', async () => {
-    render(<Link href="https://app.edvisor.io/" label="Edvisor" subtle />)
-    expect(screen.getByRole('link')).toBeInTheDocument()
-    expect(screen.getByText('Edvisor')).toBeInTheDocument()
-    expect(screen.getByRole('link')).toHaveStyle(`color: ${Interactive.Subtle.Default}`)
-  })
-  it('should render the component Link with disabled color even if it has default or subtle attributes color', async () => {
-    render(
-      <Link subtle disabled label="Edvisor" href="https://app.edvisor.io/" />
-    )
-
-    expect(screen.getByRole('link')).toBeInTheDocument()
-    expect(screen.getByText('Edvisor')).toBeInTheDocument()
-    expect(screen.getByRole('link')).toHaveStyle(`color: ${Interactive.Default.Disabled}`)
-  })
-})

package/src/lib/components/link/link.tsx

@@ -1,56 +0,0 @@
-import styled from 'styled-components'
-import { AnchorHTMLAttributes } from 'react'
-import { FC, is } from '@helpers'
-import { Interactive } from '@foundations'
-
-export const HTMLAnchor = styled.a<{disabled: boolean, initialColor: string, interactionColor: string}>`
-  color: ${({ initialColor }) => initialColor};
-  pointer-events: ${({ disabled }) => disabled ? 'none' : 'auto' };
-  &:hover{
-    text-decoration: none;
-    color: ${({ interactionColor }) => interactionColor};
-  }
-  &:active{
-    text-decoration: underline;
-  }
-`
-
-interface ILinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  label: string;
-  subtle?: boolean
-  disabled?: boolean
-}
-
-export const Link: FC<ILinkProps> = (props) => {
-
-  const { label, disabled = false, subtle, ...rest } = props
-  const initialColor = getInitialColor(props)
-  const interactionColor = getInteractionColor(props)
-
-  return (
-    <HTMLAnchor 
-      {...rest}
-      disabled={disabled}
-      initialColor={initialColor} 
-      interactionColor={interactionColor}
-    >
-      {label}
-    </HTMLAnchor>
-  )
-}
-
-function getInitialColor ({ subtle, disabled }: ILinkProps) {
-  if (is(disabled)) {
-    return Interactive.Default.Disabled
-  }
-
-  return is(subtle)
-    ? Interactive.Subtle.Default
-    : Interactive.Default.Default
-}
-
-function getInteractionColor ({ subtle }: ILinkProps) {
-  return is(subtle)
-    ? Interactive.Subtle.Hover
-    : Interactive.Default.Hover
-}

package/src/lib/components/link/storybook/link.stories.mdx

@@ -1,51 +0,0 @@
-import { Canvas, Meta } from '@storybook/addon-docs';
-import { Link } from '../link'
-import { Body } from '../../typography'
-
-
-<Meta title="Components/Link" />
-
-# Link
-
-Links are navigational actions that take users to another place. They can appear within or directly following a sentence. Links should not to be mistaken with a Plain Button which are used for actions that aren’t related to navigation.
-  
-
-## How to use it
-The Link component is an extension of HTML <b><a\></b> tag, but its use is limited to textual anchors.
-
-## Default
-
-The Link component with default behavior and styles
-<Canvas>
-<Body>
-  <Link href="https://app.edvisor.io/" target="_blank" label="Edvisor" /> is the number 1 student recruitment software
-</Body>
-</Canvas>
-
-## Subtle
-The Link component with subtle behavior and styles
-<Canvas>
-<Body>
-  Streamline the way you sell education with <Link subtle href="https://app.edvisor.io/" target="_blank" label="Edvisor" />, the best student recruitment software.
-</Body>
-</Canvas>
-
-## Disabled
-
-A disabled Link prevents user interaction.
-<Canvas>
-<Body>
-  Education with <Link subtle disabled href="https://app.edvisor.io/" target="_blank" label="Edvisor" /> is the best.
-</Body>
-</Canvas>
-
-## API
-
-Extends `HTMLAttributes<HTMLAnchorElement>`. Check the documentation <Link href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement" target="_blank" label="here"/>.
-
-| Prop        | Type      | Description               |
-| ----------- | --------- | --------------------------|
-| `label`     | `string`  | the text used as anchor   | 
-| `default?`  | `boolean` | default styling           |
-| `subtle?`   | `boolean` | subtle styling            |
-| `disabled?` | `boolean` | prevents user interaciton |

package/src/lib/components/molecules/avatar/avatar-size-flags.tsx

@@ -1,55 +0,0 @@
-// this file was generated, but it is safe to modify
-import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
-import { Label1, BodyLarge, Display } from 'components/typography'
-
-const enum AvatarSize {
-  small = 1,
-  medium = 2,
-  large = 4,
-}
-
-type AvatarSizes<T> = MappedEnum<typeof AvatarSize, T>
-
-function toAvatarSize(n: number): AvatarSize {
-  switch (n) {
-    case AvatarSize.small:
-      return AvatarSize.small
-    case AvatarSize.medium:
-      return AvatarSize.medium
-    case AvatarSize.large:
-      return AvatarSize.large
-    default:
-      return AvatarSize.medium
-  }
-}
-
-const AvatarSizeValues = {
-  [AvatarSize.small]: '32px',
-  [AvatarSize.medium]: '40px',
-  [AvatarSize.large]: '60px',
-}
-
-const AvatarSizeNodes = {
-  [AvatarSize.small]: Label1,
-  [AvatarSize.medium]: BodyLarge,
-  [AvatarSize.large]: Display,
-}
-
-export type AvatarSizeProps = Partial<RequireOnlyOne<AvatarSizes<boolean>>> &
-  PropsWithChildren
-
-export function getValuesBySize(props: AvatarSizeProps): string {
-  return AvatarSizeValues[
-    toAvatarSize(
-      bitwiseOr([props.small, props.medium, props.large])
-    )
-  ]
-}
-
-export function getNodeToRenderText(props: AvatarSizeProps): React.ElementType {
-  return AvatarSizeNodes[
-    toAvatarSize(
-      bitwiseOr([props.small, props.medium, props.large])
-    )
-  ]
-}

package/src/lib/components/molecules/avatar/avatar.test.tsx

@@ -1,114 +0,0 @@
-import {render, screen } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import { Avatar } from './index'
-
-describe('Avatar Tests', () => {
-  describe('Avatar Tests', () => {
-    it('should render the acronym name from user', async () => {
-      render(
-        <Avatar
-          name="Some Full Name"
-          small
-        />
-      )
-
-      expect(screen.getByText('SN')).toBeInTheDocument()
-      expect(screen.queryByRole('img')).not.toBeInTheDocument()
-      expect(screen.queryByText('Some Full Name')).not.toBeInTheDocument()
-    })
-    it('should render the acronym name with just two parts of name', async () => {
-      render(
-        <Avatar
-          name="Some Name"
-          small
-        />
-      )
-
-      expect(screen.getByText('SN')).toBeInTheDocument()
-    })
-    it('should render the acronym name with just one parts of name', async () => {
-      render(
-        <Avatar
-          name="Name"
-          small
-        />
-      )
-
-      expect(screen.getByText('N')).toBeInTheDocument()
-    })
-    it('should not render the acronym with empty name', async () => {
-      render(
-        <Avatar
-          name=""
-          small
-        />
-      )
-      expect(screen.queryByText('Name')).not.toBeInTheDocument()
-    })
-  })
-
-  it('should render the image from user', async () => {
-    render(
-      <Avatar
-        name="Some Full Name"
-        imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'
-      />
-    )
-
-    expect(screen.queryByText('SN')).not.toBeInTheDocument()
-    expect(screen.queryByText('Some Full Name')).not.toBeInTheDocument()
-    expect(screen.getByRole('img')).toBeInTheDocument()
-  })
-
-  it('should not have accessibility issues', async () => {
-    const { container } = render(
-      <Avatar
-        name="Some Full Name"
-        small
-      />
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-
-  describe('withLabel behavior Tests', () => {
-    it('should render the full name and the acronym name from user', async () => {
-      render(
-        <Avatar
-          name="Some Full Name"
-          withLabel
-        />
-      )
-
-      expect(screen.queryByRole('img')).not.toBeInTheDocument()
-      expect(screen.getByText('SN')).toBeInTheDocument()
-      expect(screen.getByText('Some Full Name')).toBeInTheDocument()
-    })
-
-    it('should render the full name and the user image', async () => {
-      render(
-        <Avatar
-          name="Some Full Name"
-          imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'
-          withLabel
-        />
-      )
-
-      expect(screen.queryByText('SN')).not.toBeInTheDocument()
-      expect(screen.getByText('Some Full Name')).toBeInTheDocument()
-      expect(screen.getByRole('img')).toBeInTheDocument()
-    })
-
-    it('should not have accessibility issues', async () => {
-      const { container } = render(
-        <Avatar
-          name="Some Full Name"
-          imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'
-          withLabel
-        />
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-  })
-})

package/src/lib/components/molecules/avatar/avatar.tsx

@@ -1,80 +0,0 @@
-import styled from 'styled-components'
-import { FC, isDefined, isNil, Nothing } from '@helpers'
-import { Margin, Surface } from '@foundations'
-import { SpaceAround } from '../../layout/'
-import { AvatarSizeProps, getValuesBySize, getNodeToRenderText } from './avatar-size-flags'
-import { Label1 } from 'components/typography'
-
-const Container = styled(SpaceAround)`
-  align-items: center;
-`
-
-const Circle = styled.div<{ size: string }>`
-  width: ${({ size }) => size};
-  height: ${({ size }) => size};
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  background: ${Surface.Neutral.Default};
-`
-
-const Image = styled.img`
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-`
-
-const FullName = styled(Label1)`
-  margin-left: ${Margin.xs};
-`
-interface IAvatarProps {
-  name: string;
-  imageUrl?: string;
-  imageLabel?: string;
-  withLabel?: boolean;
-  className?: string
-}
-type IProps = IAvatarProps & AvatarSizeProps
-
-const isFirstOrLast = (el: string,
-  index: number,
-  items: Array<string>): boolean =>
-    isDefined(el) && index === 0 || index === items.length - 1
-
-const getInitial = (text: string): string => isNil(text)
-  ? ''
-  : text.charAt(0)
-
-
-const getInitialsFromName = (name: string): string =>  {
-  const allNames = name.trim().split(' ')
-  const initials = allNames
-    .filter(isFirstOrLast)
-    .map(getInitial)
-    .join('')
-
-  return initials
-}
-
-export const Avatar: FC<IProps> = (props) => {
-  const {name, imageUrl, withLabel, imageLabel = `${name} avatar` } = props
-  const size = getValuesBySize(props)
-  const Text = getNodeToRenderText(props)
-
-  if (!isDefined(name)) {
-    return <Nothing />
-  }
-
-  return (
-    <Container className={props.className}>
-      <Circle size={size}>
-        { isDefined(imageUrl)
-         ? <Image src={imageUrl} alt={imageLabel}/>
-         : <Text>{getInitialsFromName(name)}</Text>
-        }
-      </Circle>
-      { isDefined(withLabel) && <FullName>{name}</FullName> }
-    </Container>
-  )
-}

package/src/lib/components/molecules/avatar/index.tsx

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

package/src/lib/components/molecules/avatar/stories/avatar.stories.mdx

@@ -1,55 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Avatar } from '../index'
-import { WrapperStories, AvatarsWithText, AvatarsWithImage, WrapperStoriesWithLabel } from './components'
-
-<Meta
-  title="Components/Avatar"
-  component={Avatar}
-/>
-
-# Avatar
-
-For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1008%3A1257)
-
-## How to use
-
-```javascript
-// Import the component
-import { Avatar } from './index'
-
-
-// Render the component sending the required parameters
-<Avatar name="SOME-NAME-HERE" />
-```
-## Good Practices
-- You can send the `imageLabel` propertie as and `alt` propertie in order to set and alternative text to image
-
-## Examples
-
-<Canvas>
-  <Story name="default">
-    <WrapperStories>
-      <AvatarsWithText>
-        <Avatar name="Yan Leite" small />
-        <Avatar name="Yan Leite" medium />
-        <Avatar name="Yan Leite" large />
-      </AvatarsWithText>
-      <AvatarsWithImage>
-        <Avatar name="Yan Leite" imageLabel="Edvisor Logo" small imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png' />
-        <Avatar name="Yan Leite" medium imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png' />
-        <Avatar name="Yan Leite" large imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png' />
-      </AvatarsWithImage>
-    </WrapperStories>
-  </Story>
-</Canvas>
-
-Also, we can use that rendering the full name
-<Canvas>
-  <Story name="with-label">
-    <WrapperStoriesWithLabel>
-      <Avatar name="Yan Leite" withLabel />
-      <Avatar name="Yan Leite" withLabel imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png' />
-    </WrapperStoriesWithLabel>
-  </Story>
-</Canvas>
-

package/src/lib/components/molecules/avatar/stories/components.tsx

@@ -1,36 +0,0 @@
-import styled from 'styled-components'
-import { Surface, Padding } from '@foundations'
-
-const WrapperStories = styled.div`
-  width: 244px;
-  height: 192px;
-  background: ${Surface.Default.Default};
-`
-
-const WrapperStoriesWithLabel = styled.div`
-  width: 130px;
-  background: ${Surface.Default.Default};
-
-  & > div  {
-    padding-bottom: ${Padding.l};
-  }
-`
-
-const AvatarsWithText = styled.div`
-  display: flex;
-  justify-content: space-around;
-  padding: ${Padding.l} 0 ${Padding.l} 0;
-`
-
-const AvatarsWithImage = styled.div`
-  display: flex;
-  justify-content: space-around;
-  padding-bottom: ${Padding.l};
-`
-
-export {
-  WrapperStories,
-  AvatarsWithText,
-  AvatarsWithImage,
-  WrapperStoriesWithLabel,
-}