@edvisor/product-language 0.3.0 → 0.4.0

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

@@ -1,52 +0,0 @@
-import { Canvas, Meta } 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
-
-Default
-<Canvas>
-  <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>
-</Canvas>
-
-Also, we can use that rendering the full name
-<Canvas>
-  <WrapperStoriesWithLabel>
-    <Avatar name="Yan Leite" withLabel />
-    <Avatar name="Yan Leite" withLabel imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png' />
-  </WrapperStoriesWithLabel>
-</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,
-}

package/src/lib/components/molecules/button/button-flags.tsx

@@ -1,340 +0,0 @@
-// this file was generated, but it is safe to modify
-import {
-  bitwiseOr,
-  MappedEnum,
-  RequireOnlyOne,
-  PropsWithChildren,
-  getRightmostSetBitNumber,
-} from '@helpers'
-import { Actions, Padding, Interactive, Text, Borders, Icons } from '@foundations'
-
-export const enum ButtonType {
-  basic = 1,
-  primary = 2,
-  destructive = 4,
-  destructivePrimary = 6,
-  outline = 8,
-  plain = 16,
-  subtle = 32,
-  plainSubtle = 48,
-}
-
-const enum ButtonSize {
-  default = 1,
-  small = 2,
-  large = 4,
-}
-
-const enum ButtonDisabledType {
-  enabled = 1,
-  disabled = 2,
-}
-
-type ButtonTypes<T> = MappedEnum<typeof ButtonType, T>
-type ButtonSizes<T> = MappedEnum<typeof ButtonSize, T>
-type ButtonDisabledTypes<T> = MappedEnum<typeof ButtonDisabledType, T>
-
-function toButtonSize(n: number): ButtonSize {
-  switch (n) {
-    case ButtonSize.default:
-      return ButtonSize.default
-    case ButtonSize.small:
-      return ButtonSize.small
-    case ButtonSize.large:
-      return ButtonSize.large
-    default:
-      return ButtonSize.default
-  }
-}
-
-function toButtonDisabledType(n: number): ButtonDisabledType {
-  switch (n) {
-    case ButtonDisabledType.enabled:
-      return ButtonDisabledType.enabled
-    case ButtonDisabledType.disabled:
-      return ButtonDisabledType.disabled
-    default:
-      return ButtonDisabledType.enabled
-  }
-}
-
-function toButtonTypes(n: number): ButtonType {
-  const defaultType = 0
-  switch (n) {
-    case defaultType:
-    case ButtonType.basic:
-      return ButtonType.basic
-    case ButtonType.primary:
-      return ButtonType.primary
-    case ButtonType.destructivePrimary:
-      return ButtonType.destructivePrimary
-    case ButtonType.destructive:
-      return ButtonType.destructive
-    case ButtonType.outline:
-      return ButtonType.outline
-    case ButtonType.plain:
-      return ButtonType.plain
-    case ButtonType.plainSubtle:
-      return ButtonType.plainSubtle
-    default:
-      return getRightmostSetBitNumber(n)
-  }
-}
-
-const ButtonBackgroundColorValues = {
-  [ButtonType.basic]: Actions.Secondary.Default,
-  [ButtonType.primary]: Actions.Primary.Default,
-  [ButtonType.destructivePrimary]: Actions.Critical.Default,
-  [ButtonType.destructive]: 'none',
-  [ButtonType.outline]: 'none',
-  [ButtonType.plain]: 'none',
-  [ButtonType.subtle]: 'none',
-  [ButtonType.plainSubtle]: 'none',
-}
-
-const ButtonBackgroundColorDisabledValues = {
-  [ButtonType.basic]: Actions.Secondary.Disabled,
-  [ButtonType.primary]: Actions.Primary.Disabled,
-  [ButtonType.destructivePrimary]: Actions.Critical.Disabled,
-  [ButtonType.destructive]: Actions.Secondary.Disabled,
-  [ButtonType.outline]: 'none',
-  [ButtonType.plain]: 'none',
-  [ButtonType.subtle]: Actions.Secondary.Disabled,
-  [ButtonType.plainSubtle]: 'none',
-}
-
-const ButtonBackgroundColorHoverValues = {
-  [ButtonType.basic]: Actions.Secondary.Hover,
-  [ButtonType.primary]: Actions.Primary.Hover,
-  [ButtonType.destructivePrimary]: Actions.Critical.Hover,
-  [ButtonType.destructive]: Actions.Critical.Hover,
-  [ButtonType.outline]: Actions.Secondary.Hover,
-  [ButtonType.plain]: '',
-  [ButtonType.subtle]: Actions.Secondary.Hover,
-  [ButtonType.plainSubtle]: '',
-}
-
-const ButtonTextDecorationHoverValues = {
-  [ButtonType.basic]: '',
-  [ButtonType.primary]: '',
-  [ButtonType.destructivePrimary]: '',
-  [ButtonType.destructive]: '',
-  [ButtonType.outline]: '',
-  [ButtonType.plain]: 'underline',
-  [ButtonType.subtle]: '',
-  [ButtonType.plainSubtle]: 'underline',
-}
-
-const ButtonBackgroundColorPressedValues = {
-  [ButtonType.basic]: Actions.Secondary.Pressed,
-  [ButtonType.primary]: Actions.Primary.Pressed,
-  [ButtonType.destructivePrimary]: Actions.Critical.Pressed,
-  [ButtonType.destructive]: Actions.Critical.Pressed,
-  [ButtonType.outline]: Actions.Secondary.Pressed,
-  [ButtonType.plain]: Actions.Secondary.Hover,
-  [ButtonType.subtle]: Actions.Secondary.Pressed,
-  [ButtonType.plainSubtle]: Actions.Secondary.Hover,
-}
-
-const ButtonTextColorValues = {
-  [ButtonType.basic]: Text.Default,
-  [ButtonType.primary]: Text.OnPrimary,
-  [ButtonType.destructivePrimary]: Text.OnCritical,
-  [ButtonType.destructive]: Text.Default,
-  [ButtonType.outline]: Text.Default,
-  [ButtonType.plain]: Interactive.Default.Default,
-  [ButtonType.subtle]: Text.Default,
-  [ButtonType.plainSubtle]: Interactive.Subtle.Default,
-}
-
-const IconTextColorValues = {
-  [ButtonType.basic]: Icons.Default,
-  [ButtonType.primary]: Icons.OnPrimary,
-  [ButtonType.destructivePrimary]: Icons.OnCritical,
-  [ButtonType.destructive]: Icons.Default,
-  [ButtonType.outline]: Icons.Default,
-  [ButtonType.plain]: Interactive.Default.Default,
-  [ButtonType.subtle]: Icons.Default,
-  [ButtonType.plainSubtle]: Icons.Default,
-}
-
-const ButtonTextColorHoverValues = {
-  [ButtonType.basic]: Text.Default,
-  [ButtonType.primary]: Text.OnPrimary,
-  [ButtonType.destructivePrimary]: Text.OnCritical,
-  [ButtonType.destructive]: Text.OnCritical,
-  [ButtonType.outline]: Text.Default,
-  [ButtonType.plain]: Interactive.Default.Hover,
-  [ButtonType.subtle]: Text.Default,
-  [ButtonType.plainSubtle]: Interactive.Subtle.Hover,
-}
-
-const IconColorHoverValues = {
-  [ButtonType.basic]: Icons.Default,
-  [ButtonType.primary]: Icons.OnPrimary,
-  [ButtonType.destructivePrimary]: Icons.OnCritical,
-  [ButtonType.destructive]: Icons.OnCritical,
-  [ButtonType.outline]: Icons.Default,
-  [ButtonType.plain]: Interactive.Default.Hover,
-  [ButtonType.subtle]: Icons.Default,
-  [ButtonType.plainSubtle]: Interactive.Subtle.Hover,
-}
-
-const ButtonBorderValues = {
-  [ButtonType.basic]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.primary]: 'none',
-  [ButtonType.destructivePrimary]: 'none',
-  [ButtonType.destructive]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.outline]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.plain]: 'none',
-  [ButtonType.subtle]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.plainSubtle]: 'none',
-}
-
-const ButtonBorderDisabledValues = {
-  [ButtonType.basic]: `1px solid ${Borders.Default.Subdued}`,
-  [ButtonType.primary]: 'none',
-  [ButtonType.destructivePrimary]: 'none',
-  [ButtonType.destructive]: `1px solid ${Borders.Default.Subdued}`,
-  [ButtonType.outline]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.plain]: 'none',
-  [ButtonType.subtle]: `1px solid ${Borders.Default.Subdued}`,
-  [ButtonType.plainSubtle]: 'none',
-}
-
-const ButtonTextColorDisabled = {
-  [ButtonDisabledType.enabled]: '',
-  [ButtonDisabledType.disabled]: Text.Light,
-}
-
-const ButtonCursor = {
-  [ButtonDisabledType.enabled]: 'pointer',
-  [ButtonDisabledType.disabled]: 'not-allowed',
-}
-
-const ButtonSizeValues = {
-  [ButtonSize.small]: `${Padding.xxs} ${Padding.s}`,
-  [ButtonSize.default]: `${Padding.xs} ${Padding.m}`,
-  [ButtonSize.large]: `${Padding.s} ${Padding.l}`,
-}
-
-const ButtonSizeValuesByType = {
-  [ButtonType.basic]: '',
-  [ButtonType.primary]: '',
-  [ButtonType.destructivePrimary]: '',
-  [ButtonType.destructive]: '',
-  [ButtonType.outline]: '',
-  [ButtonType.plain]: `${Padding.xxxs} ${Padding.xxs}`,
-  [ButtonType.subtle]: '',
-  [ButtonType.plainSubtle]: `${Padding.xxxs} ${Padding.xxs}`,
-}
-
-const ButtonTypeValues = {
-  [ButtonType.basic]: 1,
-  [ButtonType.primary]: 2,
-  [ButtonType.destructive]: 4,
-  [ButtonType.destructivePrimary]: 6,
-  [ButtonType.outline]: 8,
-  [ButtonType.plain]: 16,
-  [ButtonType.subtle]: 32,
-  [ButtonType.plainSubtle]: 48,
-}
-
-export type ButtonTypeProps = Partial<RequireOnlyOne<ButtonTypes<boolean>>> &
-  PropsWithChildren
-
-export type ButtonSizeProps = Partial<RequireOnlyOne<ButtonSizes<boolean>>> &
-  PropsWithChildren
-
-export type ButtonDisabledTypeProps = Partial<
-  RequireOnlyOne<ButtonDisabledTypes<boolean>>
-> &
-  PropsWithChildren
-
-export function getBackgroundColorByType(type: ButtonType): string {
-  return ButtonBackgroundColorValues[type]
-}
-
-export function getBackgroundColorHoverByType(type: ButtonType): string {
-  return ButtonBackgroundColorHoverValues[type]
-}
-
-export function getTextDecorationHoverByType(type: ButtonType): string {
-  return ButtonTextDecorationHoverValues[type]
-}
-
-export function getBackgroundColorDisabledByType(type: ButtonType): string {
-  return ButtonBackgroundColorDisabledValues[type]
-}
-
-export function getBackgroundColorPressedByType(type: ButtonType): string {
-  return ButtonBackgroundColorPressedValues[type]
-}
-
-export function getTextColorByType(type: ButtonType): string {
-  return ButtonTextColorValues[type]
-}
-
-export function getIconColorByType(type: ButtonType): string {
-  return IconTextColorValues[type]
-}
-
-export function getTextColorOnHoverByType(type: ButtonType): string {
-  return ButtonTextColorHoverValues[type]
-}
-
-export function getIconColorOnHoverByType(type: ButtonType): string {
-  return IconColorHoverValues[type]
-}
-
-export function getBorderByType(type: ButtonType): string {
-  return ButtonBorderValues[type]
-}
-
-export function getBorderDisabledByType(type: ButtonType): string {
-  return ButtonBorderDisabledValues[type]
-}
-
-export function getPaddingBySize(props: ButtonSizeProps): string {
-  return ButtonSizeValues[
-    toButtonSize(bitwiseOr([props.default, props.small, props.large]))
-  ]
-}
-
-export function getPaddingByType(type: ButtonType): string {
-  return ButtonSizeValuesByType[type]
-}
-
-export function getTextColorIfDisabled(props: ButtonDisabledTypeProps): string {
-  return ButtonTextColorDisabled[
-    toButtonDisabledType(bitwiseOr([props.enabled, props.disabled]))
-  ]
-}
-
-export function getCursor(props: ButtonDisabledTypeProps): string {
-  return ButtonCursor[
-    toButtonDisabledType(bitwiseOr([props.enabled, props.disabled]))
-  ]
-}
-
-export function getIsDisabled(props: ButtonDisabledTypeProps): boolean {
-  return (
-    toButtonDisabledType(bitwiseOr([props.enabled, props.disabled])) ===
-    ButtonDisabledType.disabled
-  )
-}
-
-export function getButtonType(props: ButtonTypeProps) {
-  return ButtonTypeValues[
-    toButtonTypes(
-      bitwiseOr([
-        props.basic,
-        props.primary,
-        props.destructive,
-        props.outline,
-        props.plain,
-        props.subtle,
-      ])
-    )
-  ]
-}

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

@@ -1,77 +0,0 @@
-import { Actions } from '@foundations'
-import {render, screen } from '@testing-library/react'
-import { Button } from './index'
-
-describe('Button Tests', () => {
-  describe('ButtonBasic Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <Button>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-    
-  })
-
-  describe('ButtonPrimary Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <Button primary>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-    
-  })
-
-  describe('ButtonDestructive Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <Button destructive>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toHaveStyle('background: none')
-    })
-    
-    it('should render Button with given Text', async () => {
-      render(
-        <Button destructive primary>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toHaveStyle(`background: ${Actions.Critical.Default}`)
-    })
-    
-
-  })
-
-  describe('ButtonOutline Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <Button outline>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-    
-  })
-
-  describe('ButtonPlain Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <Button plain>Test Button</Button>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-  })
-
-})