@edvisor/product-language 0.2.0 → 0.3.0

package/src/lib/components/input-field/input-field.tsx

@@ -6,7 +6,7 @@ import { getSlot, Slot, is, forwardRef, If } from '@helpers'
 import { Flex, SpaceBetween } from '../layout'
 
 import { LabeledInput } from './components'
-import { Label1, Label2 } from 'components/typography'
+import { Label } from 'components/typography'
 
 const FancyBorder = styled(SpaceBetween)<{ invalid?: boolean }>`
   background: ${({ invalid }) => is(invalid) ? Surface.Critical.Subdued : Surface.Default.Default };
@@ -49,11 +49,11 @@ export const HTMLInput = styled.input`
   }
 `
 
-const PrefixFrame = styled(Label1)`
+const PrefixFrame = styled(Label)`
   margin-right: ${Margin.xs};
 `
 
-const SuffixFrame = styled(Label1)`
+const SuffixFrame = styled(Label)`
   margin-right: ${Margin.xs};
 `
 
@@ -82,7 +82,7 @@ const InputFrame = styled.label`
 
 const ControlsFrame = Flex
 
-const Label = styled(Label2)`
+const InputLabel = styled(Label)`
   margin-bottom: ${Margin.xxs};
 `
 
@@ -100,19 +100,19 @@ export const InputField = forwardRef<
     <FancyBorder invalid={props.invalid} className={className}>
       <InputFrame>
         <If is={label}>
-          <Label subdued>
+          <InputLabel subtle subdued>
             {label}
             {required}
-          </Label>
+          </InputLabel>
         </If>
         <InputLayout>
           {icon}
           <If is={prefix}>
-            <PrefixFrame subdued>{prefix}</PrefixFrame>
+            <PrefixFrame subtle subdued>{prefix}</PrefixFrame>
           </If>
           <HTMLInput ref={ref} {...inputProps} />
           <If is={suffix}>
-            <SuffixFrame subdued>{suffix}</SuffixFrame>
+            <SuffixFrame subtle subdued>{suffix}</SuffixFrame>
           </If>
         </InputLayout>
       </InputFrame>

package/src/lib/components/input-field/storybook/components.tsx

@@ -1,22 +1,15 @@
 import styled from 'styled-components'
 import { useForm } from 'react-hook-form'
 
-import { Icons, Margin } from '@foundations'
 import { SpaceBetween } from 'components/layout'
 import { InputField } from '../input-field'
 
+import { IconMinor } from 'components/icon'
+
 import { Playground } from 'storybook-addon-jarle-monaco'
 import { InputNumber } from '../input-number'
 import { InputText } from '../input-text'
 
-/** @TODO placeholder Icon until the icons are done */
-export const Icon = styled.div`
-  height: 16px;
-  width: 16px;
-  border: 2px solid ${Icons.Default};
-  border-radius: 50%;
-  margin-right: ${Margin.xs};
-`
 
 export const PlainHTMLFormExample = () => (
   <Playground
@@ -159,7 +152,7 @@ export const IconExample = () => (
   prefix="🍺"
 >
   <InputField.Icon>
-    <Icon title="Icons render before the input" />
+    <IconMinor.FolderOpen title="Icons render before the input" />
   </InputField.Icon>
 </InputField>
     `}
@@ -167,7 +160,7 @@ export const IconExample = () => (
       renderAsComponent: true,
       scope: {
         InputField,
-        Icon,
+        IconMinor,
       },
     }}
   />
@@ -201,7 +194,7 @@ const onDislike = () => setLikes(Math.max(likes - 1, 0));
       renderAsComponent: true,
       scope: {
         InputField,
-        Icon,
+        IconMinor,
         styled,
         SpaceBetween,
       },
@@ -247,7 +240,7 @@ const handleChange = (change: string) => {
       renderAsComponent: true,
       scope: {
         InputText,
-        Icon,
+        IconMinor,
       },
     }}
   />
@@ -315,10 +308,10 @@ export const AllDressedExample = () => (
     placeholder="Enter an amount..."
   >
     <InputField.Icon>
-      <Icon title="Icons render before the input" />
+      <IconMinor.CircleDollar title="Icons render before the input" />
     </InputField.Icon>
     <InputField.Controls>
-      <Icon title="Controls render after the input" />
+      <IconMinor.CircleDollar title="Controls render after the input" />
     </InputField.Controls>
   </InputField>
 </InputField.Label>
@@ -327,7 +320,7 @@ export const AllDressedExample = () => (
       renderAsComponent: true,
       scope: {
         InputField,
-        Icon,
+        IconMinor,
       },
     }}
   />

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

@@ -1,5 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs';
 import { Link } from '../link'
+import { Button } from '../../molecules/button'
 import { Body } from '../../typography'
 
 

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

@@ -1,6 +1,6 @@
 // this file was generated, but it is safe to modify
 import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
-import { Label1, BodyLarge, Display } from 'components/typography'
+import { Label, Body, Display } from 'components/typography'
 
 const enum AvatarSize {
   small = 1,
@@ -30,8 +30,8 @@ const AvatarSizeValues = {
 }
 
 const AvatarSizeNodes = {
-  [AvatarSize.small]: Label1,
-  [AvatarSize.medium]: BodyLarge,
+  [AvatarSize.small]: Label,
+  [AvatarSize.medium]: Body,
   [AvatarSize.large]: Display,
 }
 

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

@@ -3,7 +3,7 @@ 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'
+import { Label } from 'components/typography'
 
 const Container = styled(SpaceAround)`
   align-items: center;
@@ -25,7 +25,7 @@ const Image = styled.img`
   border-radius: 50%;
 `
 
-const FullName = styled(Label1)`
+const FullName = styled(Label)`
   margin-left: ${Margin.xs};
 `
 interface IAvatarProps {

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

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta } from '@storybook/addon-docs';
 import { Avatar } from '../index'
 import { WrapperStories, AvatarsWithText, AvatarsWithImage, WrapperStoriesWithLabel } from './components'
 
@@ -26,30 +26,27 @@ import { Avatar } from './index'
 
 ## Examples
 
+Default
 <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>
+  <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>
-  <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>
+  <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/button/button-flags.tsx

@@ -4,17 +4,19 @@ import {
   MappedEnum,
   RequireOnlyOne,
   PropsWithChildren,
+  getRightmostSetBitNumber,
 } from '@helpers'
-import { Actions, Padding, Interactive, Text, Borders } from '@foundations'
+import { Actions, Padding, Interactive, Text, Borders, Icons } from '@foundations'
 
 export const enum ButtonType {
   basic = 1,
   primary = 2,
-  primaryDestructive = 4,
-  destructive = 8,
-  outline = 16,
-  plain = 32,
-  plainSubtle = 64,
+  destructive = 4,
+  destructivePrimary = 6,
+  outline = 8,
+  plain = 16,
+  subtle = 32,
+  plainSubtle = 48,
 }
 
 const enum ButtonSize {
@@ -56,83 +58,147 @@ function toButtonDisabledType(n: number): ButtonDisabledType {
   }
 }
 
+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.primaryDestructive]: Actions.Critical.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.primaryDestructive]: Actions.Critical.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.primaryDestructive]: Actions.Critical.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.primaryDestructive]: Actions.Critical.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.primaryDestructive]: Text.OnCritical,
+  [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.primaryDestructive]: Text.OnCritical,
+  [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.primaryDestructive]: '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.primaryDestructive]: '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',
 }
 
@@ -155,13 +221,25 @@ const ButtonSizeValues = {
 const ButtonSizeValuesByType = {
   [ButtonType.basic]: '',
   [ButtonType.primary]: '',
-  [ButtonType.primaryDestructive]: '',
+  [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
 
@@ -181,6 +259,10 @@ 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]
 }
@@ -193,10 +275,18 @@ 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]
 }
@@ -233,3 +323,18 @@ export function getIsDisabled(props: ButtonDisabledTypeProps): boolean {
     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,12 +1,12 @@
 import { Actions } from '@foundations'
 import {render, screen } from '@testing-library/react'
-import { ButtonBasic, ButtonPrimary, ButtonDestructive, ButtonOutline, ButtonPlain } from './index'
+import { Button } from './index'
 
 describe('Button Tests', () => {
   describe('ButtonBasic Tests', () => {
     it('should render Button with given Text', async () => {
       render(
-        <ButtonBasic>Test Button</ButtonBasic>
+        <Button>Test Button</Button>
       )
 
       expect(screen.getByText('Test Button')).toBeInTheDocument()
@@ -18,7 +18,7 @@ describe('Button Tests', () => {
   describe('ButtonPrimary Tests', () => {
     it('should render Button with given Text', async () => {
       render(
-        <ButtonPrimary>Test Button</ButtonPrimary>
+        <Button primary>Test Button</Button>
       )
 
       expect(screen.getByText('Test Button')).toBeInTheDocument()
@@ -30,22 +30,22 @@ describe('Button Tests', () => {
   describe('ButtonDestructive Tests', () => {
     it('should render Button with given Text', async () => {
       render(
-        <ButtonDestructive>Test Button</ButtonDestructive>
+        <Button destructive>Test Button</Button>
       )
 
       expect(screen.getByText('Test Button')).toBeInTheDocument()
       expect(screen.queryByRole('button')).toBeInTheDocument()
-      expect(screen.getByTestId('button-test')).toHaveStyle('background: none')
+      expect(screen.queryByRole('button')).toHaveStyle('background: none')
     })
     
     it('should render Button with given Text', async () => {
       render(
-        <ButtonDestructive primary>Test Button</ButtonDestructive>
+        <Button destructive primary>Test Button</Button>
       )
 
       expect(screen.getByText('Test Button')).toBeInTheDocument()
       expect(screen.queryByRole('button')).toBeInTheDocument()
-      expect(screen.getByTestId('button-test')).toHaveStyle(`background: ${Actions.Critical.Default}`)
+      expect(screen.queryByRole('button')).toHaveStyle(`background: ${Actions.Critical.Default}`)
     })
     
 
@@ -54,7 +54,7 @@ describe('Button Tests', () => {
   describe('ButtonOutline Tests', () => {
     it('should render Button with given Text', async () => {
       render(
-        <ButtonOutline>Test Button</ButtonOutline>
+        <Button outline>Test Button</Button>
       )
 
       expect(screen.getByText('Test Button')).toBeInTheDocument()
@@ -66,7 +66,7 @@ describe('Button Tests', () => {
   describe('ButtonPlain Tests', () => {
     it('should render Button with given Text', async () => {
       render(
-        <ButtonPlain>Test Button</ButtonPlain>
+        <Button plain>Test Button</Button>
       )
 
       expect(screen.getByText('Test Button')).toBeInTheDocument()