@edvisor/product-language 0.2.0 → 0.3.1

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

@@ -1,235 +0,0 @@
-// this file was generated, but it is safe to modify
-import {
-  bitwiseOr,
-  MappedEnum,
-  RequireOnlyOne,
-  PropsWithChildren,
-} from '@helpers'
-import { Actions, Padding, Interactive, Text, Borders } from '@foundations'
-
-export const enum ButtonType {
-  basic = 1,
-  primary = 2,
-  primaryDestructive = 4,
-  destructive = 8,
-  outline = 16,
-  plain = 32,
-  plainSubtle = 64,
-}
-
-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
-  }
-}
-
-const ButtonBackgroundColorValues = {
-  [ButtonType.basic]: Actions.Secondary.Default,
-  [ButtonType.primary]: Actions.Primary.Default,
-  [ButtonType.primaryDestructive]: Actions.Critical.Default,
-  [ButtonType.destructive]: 'none',
-  [ButtonType.outline]: 'none',
-  [ButtonType.plain]: 'none',
-  [ButtonType.plainSubtle]: 'none',
-}
-
-const ButtonBackgroundColorDisabledValues = {
-  [ButtonType.basic]: Actions.Secondary.Disabled,
-  [ButtonType.primary]: Actions.Primary.Disabled,
-  [ButtonType.primaryDestructive]: Actions.Critical.Disabled,
-  [ButtonType.destructive]: Actions.Secondary.Disabled,
-  [ButtonType.outline]: 'none',
-  [ButtonType.plain]: 'none',
-  [ButtonType.plainSubtle]: 'none',
-}
-
-const ButtonBackgroundColorHoverValues = {
-  [ButtonType.basic]: Actions.Secondary.Hover,
-  [ButtonType.primary]: Actions.Primary.Hover,
-  [ButtonType.primaryDestructive]: Actions.Critical.Hover,
-  [ButtonType.destructive]: Actions.Critical.Hover,
-  [ButtonType.outline]: Actions.Secondary.Hover,
-  [ButtonType.plain]: '',
-  [ButtonType.plainSubtle]: '',
-}
-
-const ButtonBackgroundColorPressedValues = {
-  [ButtonType.basic]: Actions.Secondary.Pressed,
-  [ButtonType.primary]: Actions.Primary.Pressed,
-  [ButtonType.primaryDestructive]: Actions.Critical.Pressed,
-  [ButtonType.destructive]: Actions.Critical.Pressed,
-  [ButtonType.outline]: Actions.Secondary.Pressed,
-  [ButtonType.plain]: Actions.Secondary.Hover,
-  [ButtonType.plainSubtle]: Actions.Secondary.Hover,
-}
-
-const ButtonTextColorValues = {
-  [ButtonType.basic]: Text.Default,
-  [ButtonType.primary]: Text.OnPrimary,
-  [ButtonType.primaryDestructive]: Text.OnCritical,
-  [ButtonType.destructive]: Text.Default,
-  [ButtonType.outline]: Text.Default,
-  [ButtonType.plain]: Interactive.Default.Default,
-  [ButtonType.plainSubtle]: Interactive.Subtle.Default,
-}
-
-const ButtonTextColorHoverValues = {
-  [ButtonType.basic]: Text.Default,
-  [ButtonType.primary]: Text.OnPrimary,
-  [ButtonType.primaryDestructive]: Text.OnCritical,
-  [ButtonType.destructive]: Text.OnCritical,
-  [ButtonType.outline]: Text.Default,
-  [ButtonType.plain]: Interactive.Default.Hover,
-  [ButtonType.plainSubtle]: Interactive.Subtle.Hover,
-}
-
-const ButtonBorderValues = {
-  [ButtonType.basic]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.primary]: 'none',
-  [ButtonType.primaryDestructive]: 'none',
-  [ButtonType.destructive]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.outline]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.plain]: 'none',
-  [ButtonType.plainSubtle]: 'none',
-}
-
-const ButtonBorderDisabledValues = {
-  [ButtonType.basic]: `1px solid ${Borders.Default.Subdued}`,
-  [ButtonType.primary]: 'none',
-  [ButtonType.primaryDestructive]: 'none',
-  [ButtonType.destructive]: `1px solid ${Borders.Default.Subdued}`,
-  [ButtonType.outline]: `1px solid ${Borders.Default.Default}`,
-  [ButtonType.plain]: 'none',
-  [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.primaryDestructive]: '',
-  [ButtonType.destructive]: '',
-  [ButtonType.outline]: '',
-  [ButtonType.plain]: `${Padding.xxxs} ${Padding.xxs}`,
-  [ButtonType.plainSubtle]: `${Padding.xxxs} ${Padding.xxs}`,
-}
-
-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 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 getTextColorOnHoverByType(type: ButtonType): string {
-  return ButtonTextColorHoverValues[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
-  )
-}

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 { ButtonBasic, ButtonPrimary, ButtonDestructive, ButtonOutline, ButtonPlain } from './index'
-
-describe('Button Tests', () => {
-  describe('ButtonBasic Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <ButtonBasic>Test Button</ButtonBasic>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-    
-  })
-
-  describe('ButtonPrimary Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <ButtonPrimary>Test Button</ButtonPrimary>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-    
-  })
-
-  describe('ButtonDestructive Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <ButtonDestructive>Test Button</ButtonDestructive>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-      expect(screen.getByTestId('button-test')).toHaveStyle('background: none')
-    })
-    
-    it('should render Button with given Text', async () => {
-      render(
-        <ButtonDestructive primary>Test Button</ButtonDestructive>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-      expect(screen.getByTestId('button-test')).toHaveStyle(`background: ${Actions.Critical.Default}`)
-    })
-    
-
-  })
-
-  describe('ButtonOutline Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <ButtonOutline>Test Button</ButtonOutline>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-    
-  })
-
-  describe('ButtonPlain Tests', () => {
-    it('should render Button with given Text', async () => {
-      render(
-        <ButtonPlain>Test Button</ButtonPlain>
-      )
-
-      expect(screen.getByText('Test Button')).toBeInTheDocument()
-      expect(screen.queryByRole('button')).toBeInTheDocument()
-    })
-  })
-
-})

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

@@ -1,231 +0,0 @@
-import styled from 'styled-components'
-import { FC, is, isDefined } from '@helpers'
-import { Focused } from '@foundations'
-import {
-  ButtonSizeProps,
-  getBackgroundColorByType,
-  getIsDisabled,
-  getTextColorByType,
-  getTextColorIfDisabled,
-  getCursor,
-  getPaddingBySize,
-  getBackgroundColorHoverByType,
-  getTextColorOnHoverByType,
-  getBorderByType,
-  getPaddingByType,
-  getBackgroundColorDisabledByType,
-  getBorderDisabledByType,
-  ButtonType,
-  getBackgroundColorPressedByType,
-} from './button-flags'
-import { ComponentType } from 'react'
-import { Label1 } from 'components/typography'
-import { Spinner } from 'components/spinner'
-
-const ButtonFrame = styled.button<{
-  backgroundColor: string
-  buttonSize: string
-  cursor: string
-  backgroundHover: string
-  backgroundPressed: string
-  textColorHover: string
-  buttonBorder: string
-  isDisabled: boolean
-}>`
-  padding: ${(props) => props.buttonSize};
-  border: ${(props) => props.buttonBorder};
-  border-radius: 6px;
-  background: ${(props) => props.backgroundColor};
-  cursor: ${(props) => props.cursor};
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: 8px;
-  align-items: center;
-  position: relative;
-
-  ${(props) =>
-    !props.isDisabled
-      ? `
-    &:hover {
-      background: ${props.backgroundHover};
-      
-      div {
-        color: ${props.textColorHover};
-      }
-    }
-
-    &:focus  {
-      outline: 2px solid ${Focused.Default}
-    }
-
-    &:focus-visible  {
-      border: 2px solid ${Focused.Default}
-    }
-
-    &:active {
-      background: ${props.backgroundPressed}
-    }
-  `
-      : ''}
-`
-
-const ButtonText = styled(Label1)<{
-  textColor: string
-  textColorDisabled: string
-  isLoading: boolean
-}>`
-  color: ${(props) =>
-    props.textColorDisabled !== '' ? props.textColorDisabled : props.textColor};
-
-  ${(props) =>
-    props.isLoading
-      ? `
-    opacity: 0;
-  `
-      : ''}
-`
-
-const Loading = styled(Spinner)`
-    position: absolute;
-`
-
-interface DummyIconProps {
-  type: ButtonType
-}
-
-interface IButtonProps {
-  loading?: boolean
-  IconPrefix?: ComponentType<DummyIconProps>
-  IconSuffix?: ComponentType<DummyIconProps>
-  children?: string
-}
-
-interface IButtonDestructiveProps extends IButtonProps {
-  primary?: boolean
-}
-
-interface IButtonPlainProps extends IButtonProps {
-  subtle?: boolean
-}
-
-interface ISecretInnerButtonProps
-  extends IButtonPlainProps,
-    IButtonDestructiveProps {
-  buttonType: ButtonType
-}
-
-function makeButtonConfig(props: ISecretInnerButtonProps & ButtonSizeProps) {
-  const { buttonType } = props
-  const isDisabled = getIsDisabled(props)
-  const backgroundColor = isDisabled
-    ? getBackgroundColorDisabledByType(buttonType)
-    : getBackgroundColorByType(buttonType)
-  const buttonPadding = getPaddingBySize(props)
-  const buttonOverridePadding = getPaddingByType(buttonType)
-  const cursor = getCursor(props)
-  const backgroundHover = getBackgroundColorHoverByType(buttonType)
-  const backgroundPressed = getBackgroundColorPressedByType(buttonType)
-  const textColorHover = getTextColorOnHoverByType(buttonType)
-  const buttonBorder = isDisabled
-    ? getBorderDisabledByType(buttonType)
-    : getBorderByType(buttonType)
-  const buttonSize =
-    buttonOverridePadding !== '' ? buttonOverridePadding : buttonPadding
-  const textColor = getTextColorByType(buttonType)
-  const textColorDisabled = getTextColorIfDisabled(props)
-
-  return {
-    backgroundColor,
-    buttonSize,
-    cursor,
-    backgroundHover,
-    backgroundPressed,
-    textColorHover,
-    buttonBorder,
-    isDisabled,
-    textColor,
-    textColorDisabled,
-  }
-}
-
-const SecretInnerButton: FC<ISecretInnerButtonProps & ButtonSizeProps> = (
-  props
-) => {
-  const {
-    children,
-    buttonType,
-    loading,
-    IconPrefix,
-    IconSuffix,
-    ...htmlProps
-  } = props
-  const { textColor, textColorDisabled, ...buttonConfig } =
-    makeButtonConfig(props)
-
-  return (
-    <ButtonFrame {...htmlProps} {...buttonConfig} data-testid="button-test">
-      {isDefined(IconPrefix) ? <IconPrefix type={buttonType} /> : ''}
-
-      <ButtonText
-        textColor={textColor}
-        textColorDisabled={textColorDisabled}
-        isLoading={is(loading)}
-      >
-        {children}
-      </ButtonText>
-      {is(loading) ? (
-        <Loading
-          small
-          onPrimary={
-            buttonType === ButtonType.primary ||
-            buttonType === ButtonType.primaryDestructive
-          }
-        />
-      ) : (
-        ''
-      )}
-
-      {isDefined(IconSuffix) ? <IconSuffix type={buttonType} /> : ''}
-    </ButtonFrame>
-  )
-}
-
-export const ButtonBasic: FC<IButtonProps> = (props) => {
-  return <SecretInnerButton buttonType={ButtonType.basic} {...props} />
-}
-
-export const ButtonPrimary: FC<IButtonProps> = (props) => {
-  return <SecretInnerButton buttonType={ButtonType.primary} {...props} />
-}
-
-export const ButtonDestructive: FC<IButtonDestructiveProps> = (props) => {
-  const { primary } = props
-  return (
-    <SecretInnerButton
-      buttonType={
-        isDefined(primary) && primary
-          ? ButtonType.primaryDestructive
-          : ButtonType.destructive
-      }
-      {...props}
-    />
-  )
-}
-
-export const ButtonOutline: FC<IButtonProps> = (props) => {
-  return <SecretInnerButton buttonType={ButtonType.outline} {...props} />
-}
-
-export const ButtonPlain: FC<IButtonPlainProps> = (props) => {
-  const { subtle } = props
-
-  return (
-    <SecretInnerButton
-      buttonType={
-        isDefined(subtle) && subtle ? ButtonType.plainSubtle : ButtonType.plain
-      }
-      {...props}
-    />
-  )
-}

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

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

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

@@ -1,104 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { ButtonPrimary, ButtonBasic, ButtonDestructive, ButtonOutline, ButtonPlain, DummyIcon } from '../index'
-import { PlainHTMLFormExample, DisabledLoadingExample } from './components'
-
-<Meta
-  title="Components/Button"
-  component={ButtonPrimary}
-/>
-
-# Button
-
-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 { ButtonPrimary } from './index'
-
-
-// Render the component sending the required parameters
-<ButtonPrimary label="SOME-label-HERE" />
-```
-
-## Properties 
-
-The Buttons accepts the same properties as a normal button and has some additional ones.
-
-The available optional properties are as follows, try them out in the editable code sample below!
-
-| Prop          | Type      | Description                                                              |
-| ----------    | --------- | ------------------------------------------------------------------------ |
-| `IconPrefix?`  | `Icon`  | It will add the given Icon before the text                                        |
-| `IconSuffix?`  | `Icon`  | It will add the given Icon after the text                                         |
-| `loading?`     | `boolean`  | Replaces the text for a loading icon |
-| `size?`    | `small / large` | Changes the size of the button. Leave it empty for the default size    |
-
-### Using as form controls 
-<PlainHTMLFormExample />
-
-### Disabled until something is typed then loading until response
-<DisabledLoadingExample />
-
-## Examples
-
-<Canvas>
-  <ButtonBasic type="submit">Basic</ButtonBasic>
-  <ButtonPrimary>Primary</ButtonPrimary>
-  <ButtonDestructive>Destructive</ButtonDestructive>
-  <ButtonDestructive primary>Primary Destructive</ButtonDestructive>
-  <ButtonOutline>Outline</ButtonOutline>
-  <ButtonPlain>Plain</ButtonPlain>
-  <ButtonPlain subtle >Plain Subtle</ButtonPlain>
-</Canvas>
-
-Disabled
-<Canvas>
-  <ButtonBasic disabled>Basic</ButtonBasic>
-  <ButtonPrimary disabled>Primary</ButtonPrimary>
-  <ButtonDestructive disabled>Destructive</ButtonDestructive>
-  <ButtonDestructive primary disabled>Primary Destructive</ButtonDestructive>
-  <ButtonOutline disabled>Outline</ButtonOutline>
-  <ButtonPlain disabled>Plain</ButtonPlain>
-  <ButtonPlain subtle disabled>Plain Subtle</ButtonPlain>
-</Canvas>
-
-Loading
-<Canvas>
-  <ButtonBasic loading>Basic</ButtonBasic>
-  <ButtonPrimary loading>Primary</ButtonPrimary>
-  <ButtonDestructive loading>Destructive</ButtonDestructive>
-  <ButtonDestructive primary loading>Primary Destructive</ButtonDestructive>
-  <ButtonOutline loading>Outline</ButtonOutline>
-  <ButtonPlain loading>Plain</ButtonPlain>
-  <ButtonPlain subtle loading>Plain Subtle</ButtonPlain>
-</Canvas>
-
-Icons
-<Canvas>
-  <ButtonBasic IconPrefix={DummyIcon}>Basic</ButtonBasic>
-  <ButtonPrimary IconPrefix={DummyIcon}>Primary</ButtonPrimary>
-  <ButtonDestructive IconPrefix={DummyIcon}>Destructive</ButtonDestructive>
-  <ButtonDestructive primary IconPrefix={DummyIcon}>Primary Destructive</ButtonDestructive>
-  <ButtonOutline IconPrefix={DummyIcon}>Outline</ButtonOutline>
-  <ButtonPlain IconPrefix={DummyIcon}>Plain</ButtonPlain>
-  <ButtonPlain subtle IconPrefix={DummyIcon}>Plain Subtle</ButtonPlain>
-</Canvas>
-
-<Canvas>
-  <ButtonBasic IconSuffix={DummyIcon}>Basic</ButtonBasic>
-  <ButtonPrimary IconSuffix={DummyIcon}>Primary</ButtonPrimary>
-  <ButtonDestructive IconSuffix={DummyIcon}>Destructive</ButtonDestructive>
-  <ButtonDestructive primary IconSuffix={DummyIcon}>Primary Destructive</ButtonDestructive>
-  <ButtonOutline IconSuffix={DummyIcon}>Outline</ButtonOutline>
-  <ButtonPlain IconSuffix={DummyIcon}>Plain</ButtonPlain>
-  <ButtonPlain subtle IconSuffix={DummyIcon}>Plain Subtle</ButtonPlain>
-</Canvas>
-
-<Canvas>
-  <ButtonBasic large>Large</ButtonBasic>
-  <ButtonBasic>Default</ButtonBasic>
-  <ButtonBasic small>Small</ButtonBasic>
-</Canvas>
-