@edvisor/product-language 0.1.1 → 0.3.0

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

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

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

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

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