@edvisor/product-language 0.2.0 → 0.3.0

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

@@ -1,25 +1,30 @@
 import styled from 'styled-components'
-import { FC, is, isDefined } from '@helpers'
+import { FC, is, isDefined, Nothing } from '@helpers'
 import { Focused } from '@foundations'
 import {
   ButtonSizeProps,
   getBackgroundColorByType,
   getIsDisabled,
   getTextColorByType,
+  getIconColorByType,
   getTextColorIfDisabled,
   getCursor,
   getPaddingBySize,
   getBackgroundColorHoverByType,
+  getTextDecorationHoverByType,
   getTextColorOnHoverByType,
+  getIconColorOnHoverByType,
   getBorderByType,
   getPaddingByType,
   getBackgroundColorDisabledByType,
   getBorderDisabledByType,
   ButtonType,
   getBackgroundColorPressedByType,
+  getButtonType,
+  ButtonTypeProps,
 } from './button-flags'
 import { ComponentType } from 'react'
-import { Label1 } from 'components/typography'
+import { Label } from 'components/typography'
 import { Spinner } from 'components/spinner'
 
 const ButtonFrame = styled.button<{
@@ -27,10 +32,13 @@ const ButtonFrame = styled.button<{
   buttonSize: string
   cursor: string
   backgroundHover: string
+  textDecorationHover: string,
   backgroundPressed: string
   textColorHover: string
   buttonBorder: string
   isDisabled: boolean
+  iconColor: string
+  iconColorHover: string
 }>`
   padding: ${(props) => props.buttonSize};
   border: ${(props) => props.buttonBorder};
@@ -43,16 +51,27 @@ const ButtonFrame = styled.button<{
   gap: 8px;
   align-items: center;
   position: relative;
+  svg[role='icon'] {
+    path {
+      fill: ${(props) => props.iconColor};
+    }
+  }
+  
 
   ${(props) =>
     !props.isDisabled
       ? `
     &:hover {
       background: ${props.backgroundHover};
-      
+      text-decoration:  ${props.textDecorationHover};
       div {
         color: ${props.textColorHover};
       }
+      svg[role='icon'] {
+        path {
+          fill: ${props.iconColorHover};
+        }
+      }
     }
 
     &:focus  {
@@ -64,17 +83,14 @@ const ButtonFrame = styled.button<{
     }
 
     &:active {
+      text-decoration: 'none'
       background: ${props.backgroundPressed}
     }
   `
       : ''}
 `
 
-const ButtonText = styled(Label1)<{
-  textColor: string
-  textColorDisabled: string
-  isLoading: boolean
-}>`
+const ButtonText = styled(Label)<{ textColor: string, textColorDisabled: string, isLoading: boolean }>`
   color: ${(props) =>
     props.textColorDisabled !== '' ? props.textColorDisabled : props.textColor};
 
@@ -86,37 +102,29 @@ const ButtonText = styled(Label1)<{
       : ''}
 `
 
-const Loading = styled(Spinner)`
-    position: absolute;
+const IconContainer = styled.div<{ isLoading: boolean }>`
+  width: 20px;
+  ${(props) =>
+    props.isLoading
+      ? 'visibility: hidden;'
+      : ''
+  }
 `
 
-interface DummyIconProps {
-  type: ButtonType
-}
+const Loading = styled(Spinner)`
+  position: absolute;
+`
 
-interface IButtonProps {
+interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   loading?: boolean
-  IconPrefix?: ComponentType<DummyIconProps>
-  IconSuffix?: ComponentType<DummyIconProps>
+  IconPrefix?: ComponentType
+  IconSuffix?: ComponentType
   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
+function makeButtonConfig(props: IButtonProps & ButtonTypeProps & ButtonSizeProps) {
+  const buttonType  = getButtonType(props)
   const isDisabled = getIsDisabled(props)
   const backgroundColor = isDisabled
     ? getBackgroundColorDisabledByType(buttonType)
@@ -125,14 +133,17 @@ function makeButtonConfig(props: ISecretInnerButtonProps & ButtonSizeProps) {
   const buttonOverridePadding = getPaddingByType(buttonType)
   const cursor = getCursor(props)
   const backgroundHover = getBackgroundColorHoverByType(buttonType)
+  const textDecorationHover = getTextDecorationHoverByType(buttonType)
   const backgroundPressed = getBackgroundColorPressedByType(buttonType)
   const textColorHover = getTextColorOnHoverByType(buttonType)
+  const iconColorHover = getIconColorOnHoverByType(buttonType)
   const buttonBorder = isDisabled
     ? getBorderDisabledByType(buttonType)
     : getBorderByType(buttonType)
   const buttonSize =
     buttonOverridePadding !== '' ? buttonOverridePadding : buttonPadding
   const textColor = getTextColorByType(buttonType)
+  const iconColor = getIconColorByType(buttonType)
   const textColorDisabled = getTextColorIfDisabled(props)
 
   return {
@@ -140,33 +151,39 @@ function makeButtonConfig(props: ISecretInnerButtonProps & ButtonSizeProps) {
     buttonSize,
     cursor,
     backgroundHover,
+    textDecorationHover,
     backgroundPressed,
     textColorHover,
+    iconColorHover,
     buttonBorder,
     isDisabled,
     textColor,
+    iconColor,
     textColorDisabled,
+    buttonType,
   }
 }
 
-const SecretInnerButton: FC<ISecretInnerButtonProps & ButtonSizeProps> = (
+export const Button: FC<IButtonProps & ButtonTypeProps & ButtonSizeProps> = (
   props
 ) => {
   const {
     children,
-    buttonType,
     loading,
     IconPrefix,
     IconSuffix,
+    type = 'button',
     ...htmlProps
   } = props
-  const { textColor, textColorDisabled, ...buttonConfig } =
+  const { textColor, textColorDisabled, buttonType, ...buttonConfig } =
     makeButtonConfig(props)
-
   return (
-    <ButtonFrame {...htmlProps} {...buttonConfig} data-testid="button-test">
-      {isDefined(IconPrefix) ? <IconPrefix type={buttonType} /> : ''}
-
+    <ButtonFrame {...htmlProps} type={type} {...buttonConfig} data-testid="button-test">
+      {isDefined(IconPrefix) ? (
+        <IconContainer isLoading={is(loading)}>
+          <IconPrefix />
+        </IconContainer>
+      ) : <Nothing />}
       <ButtonText
         textColor={textColor}
         textColorDisabled={textColorDisabled}
@@ -179,53 +196,19 @@ const SecretInnerButton: FC<ISecretInnerButtonProps & ButtonSizeProps> = (
           small
           onPrimary={
             buttonType === ButtonType.primary ||
-            buttonType === ButtonType.primaryDestructive
+            buttonType === ButtonType.destructivePrimary
           }
         />
       ) : (
         ''
       )}
 
-      {isDefined(IconSuffix) ? <IconSuffix type={buttonType} /> : ''}
+      {isDefined(IconSuffix) ? (
+        <IconContainer isLoading={is(loading)}>
+          <IconSuffix />
+        </IconContainer>
+      ) : <Nothing />}
     </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/stories/button.stories.mdx

@@ -1,10 +1,11 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { ButtonPrimary, ButtonBasic, ButtonDestructive, ButtonOutline, ButtonPlain, DummyIcon } from '../index'
+import { Button } from '../index'
+import { IconMinor } from 'components/icon'
 import { PlainHTMLFormExample, DisabledLoadingExample } from './components'
 
 <Meta
   title="Components/Button"
-  component={ButtonPrimary}
+  component={Button}
 />
 
 # Button
@@ -15,11 +16,11 @@ For more details, check out the component page on [Figma](https://www.figma.com/
 
 ```javascript
 // Import the component
-import { ButtonPrimary } from './index'
+import { Button } from './index'
 
 
 // Render the component sending the required parameters
-<ButtonPrimary label="SOME-label-HERE" />
+<Button primary label="SOME-label-HERE" />
 ```
 
 ## Properties 
@@ -44,61 +45,61 @@ The available optional properties are as follows, try them out in the editable c
 ## 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>
+  <Button type="submit">Basic</Button>
+  <Button primary>Primary</Button>
+  <Button destructive>Destructive</Button>
+  <Button destructive primary>Destructive Primary</Button>
+  <Button outline>Outline</Button>
+  <Button plain>Plain</Button>
+  <Button plain subtle >Plain Subtle</Button>
 </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>
+  <Button disabled>Basic</Button>
+  <Button primary disabled>Primary</Button>
+  <Button destructive disabled>Destructive</Button>
+  <Button destructive primary disabled>Destructive Primary</Button>
+  <Button outline disabled>Outline</Button>
+  <Button plain disabled>Plain</Button>
+  <Button plain subtle disabled>Plain Subtle</Button>
 </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>
+  <Button loading>Basic</Button>
+  <Button primary loading>Primary</Button>
+  <Button destructive loading>Destructive</Button>
+  <Button destructive primary loading>Destructive Primary</Button>
+  <Button outline loading>Outline</Button>
+  <Button plain loading>Plain</Button>
+  <Button plain subtle loading>Plain Subtle</Button>
 </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>
+  <Button IconPrefix={IconMinor.Fire}>Basic</Button>
+  <Button primary IconPrefix={IconMinor.Fire}>Primary</Button>
+  <Button destructive IconPrefix={IconMinor.Fire}>Destructive</Button>
+  <Button destructive primary IconPrefix={IconMinor.Fire}>Destructive Primary</Button>
+  <Button outline IconPrefix={IconMinor.Fire}>Outline</Button>
+  <Button plain IconPrefix={IconMinor.Fire}>Plain</Button>
+  <Button plain subtle IconPrefix={IconMinor.Fire}>Plain Subtle</Button>
 </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>
+  <Button IconSuffix={IconMinor.Fire}>Basic</Button>
+  <Button primary IconSuffix={IconMinor.Fire}>Primary</Button>
+  <Button destructive IconSuffix={IconMinor.Fire}>Destructive</Button>
+  <Button destructive primary IconSuffix={IconMinor.Fire}>Destructive Primary</Button>
+  <Button outline IconSuffix={IconMinor.Fire}>Outline</Button>
+  <Button plain IconSuffix={IconMinor.Fire}>Plain</Button>
+  <Button plain subtle IconSuffix={IconMinor.Fire}>Plain Subtle</Button>
 </Canvas>
 
 <Canvas>
-  <ButtonBasic large>Large</ButtonBasic>
-  <ButtonBasic>Default</ButtonBasic>
-  <ButtonBasic small>Small</ButtonBasic>
+  <Button large>Large</Button>
+  <Button>Default</Button>
+  <Button small>Small</Button>
 </Canvas>
 

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

@@ -1,7 +1,7 @@
 
 import { Playground } from 'storybook-addon-jarle-monaco'
 import { InputField } from '../../../input-field'
-import { Button, ButtonPrimary } from '../button'
+import { Button } from '../button'
 
 export const PlainHTMLFormExample = () => (
   <Playground
@@ -24,8 +24,8 @@ const [invalid, setInvalid] = useState(false);
     required
   />
   <div style={{display:'flex', gap:'8px'}}>
-    <ButtonBasic type="reset">Clear</ButtonBasic>
-    <ButtonPrimary type="submit">Send</ButtonPrimary>
+    <Button type="reset">Clear</Button>
+    <Button primary type="submit">Send</Button>
   </div>
 </form>  
     `}
@@ -33,8 +33,7 @@ const [invalid, setInvalid] = useState(false);
       renderAsComponent: true,
       scope: {
         InputField,
-        ButtonBasic: Button,
-        ButtonPrimary
+        Button
       },
     }}
   />
@@ -70,7 +69,7 @@ const [loading, setLoading] = useState(false);
     required
   />
   <div style={{display:'flex', gap:'8px'}}>
-    <ButtonPrimary type="submit" disabled={disabled} loading={loading}>Send</ButtonPrimary>
+    <Button primary type="submit" disabled={disabled} loading={loading}>Send</Button>
   </div>
 </form>  
     `}
@@ -78,8 +77,7 @@ const [loading, setLoading] = useState(false);
       renderAsComponent: true,
       scope: {
         InputField,
-        ButtonBasic: Button,
-        ButtonPrimary
+        Button
       },
     }}
   />

package/src/lib/components/molecules/input-checkbox/input-checkbox.tsx

@@ -1,48 +1,47 @@
-import { useState } from 'react'
+import { InputHTMLAttributes } from 'react'
 import styled from 'styled-components'
 import { FC, isDefined, isEmpty, Nothing } from '@helpers'
 import { Margin } from '@foundations'
-import { Checkbox, ICheckboxProps } from '../../checkbox'
-import { Label1 } from 'components/typography'
-import { Flex } from 'components/layout'
+import { Checkbox } from '../../checkbox'
+import { Label } from 'components/typography'
 
-const Text = styled(Label1)`
-  margin-left: ${Margin.s};
+const Text = styled(Label)`
+  margin-left: ${Margin.xs};
   user-select: none;
 `
-const Wrapper = styled(Flex)`
+
+const Wrapper = styled.label`
+  display: flex;
   width: 100%;
   align-items: center;
 `
-interface IInputCheckboxProps {
+
+export type IInputCheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
   label: string
+  error?: boolean
+  onChange?: (change: boolean) => void
 }
 
-export type IInputCheckbox = IInputCheckboxProps & ICheckboxProps
+export const InputCheckbox: FC<IInputCheckboxProps> = (props) => {
+  const {
+    onChange,
+    label = '',
+  } = props
 
-export const InputCheckbox: FC<IInputCheckbox> = (props) => {
-  const { onChange, label = '', disabled = false, error = false, checked = false } = props
-  const [isChecked, setIsChecked] = useState(checked)
   if (isEmpty(label)) {
     return <Nothing />
   }
 
-  const handleOnChange = () => {
-    setIsChecked(!isChecked)
-    if(isDefined(onChange)){
-      onChange(!isChecked)
-    }
-  }
-
   return (
     <Wrapper>
       <Checkbox
         {...props}
-        onChange={handleOnChange}
-        onClick={handleOnChange}
-        disabled={disabled}
-        error={error}
-        checked={isChecked}
+        onChange={(e) => {
+          if (isDefined(onChange)) {
+            onChange(e.target.checked)
+          }
+        }}
+        name={isDefined(props.name) ? props.name : label}
       />
       <Text>{label}</Text>
     </Wrapper>

package/src/lib/components/molecules/input-checkbox/stories/components.tsx

@@ -1,36 +1,53 @@
 import { Playground } from 'storybook-addon-jarle-monaco'
-import { InputCheckbox } from '../index'
+import styled from 'styled-components'
+import { Margin } from '@foundations'
+import { If } from '@helpers'
+import { Button } from 'components/molecules/button'
+import { Caption } from 'components/typography'
+import { InputCheckbox } from '../input-checkbox'
 
-export const PlainHTMLFormExample = () => (
+const Fields = styled.div`
+  margin-bottom: ${Margin.s};
+`
+
+export const InputCheckboxExample = () => (
   <Playground
     code={`
 /* Edit this code sample! */
 const [withError, setWithError] = useState(false);
+const [accepted, setAccepted] = useState(false);
 
 <form onSubmit={(e) => {
     e.preventDefault()
-    console.log('form submitted')
   }}
 >
-  <InputCheckbox
-    onInvalid={(e) => {
-      setWithError(true)
-    }}
-    error={withError}
-    onChange={(e) => {
-      console.log('at stories', e)
-      setWithError(false)
-    }}
-    label="My label"
-    required />
-  <input type="submit"/>
+  <Fields>
+    <InputCheckbox
+      onInvalid={(e) => {
+        setWithError(true)
+      }}
+      error={withError}
+      onChange={(e) => {
+        setAccepted(!accepted)
+        setWithError(false)
+      }}
+      label="I accept the terms."
+      required />
+    <If is={accepted}><Caption subdued>You have accepted the terms.</Caption></If>
+  </Fields>
+  <Button primary type="submit">Submit</Button>
 </form>
 `}
     providerProps={{
       renderAsComponent: true,
       scope: {
         InputCheckbox,
+        Caption,
+        Button,
+        If,
+        Fields,
       },
     }}
   />
 )
+

package/src/lib/components/molecules/input-checkbox/stories/input-checkbox.stories.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { InputCheckbox } from '../index'
-import { PlainHTMLFormExample } from './index'
+import { InputCheckbox } from '../input-checkbox'
+import { InputCheckboxExample } from './components'
 
 <Meta
   title="Components/InputCheckbox"
@@ -27,11 +27,9 @@ import { InputCheckbox } from './index'
 ## Examples
 
 <Canvas>
-  <InputCheckbox label="My label" onChange={(e) => console.log('at stories', e)} />
-  <InputCheckbox label="My label" disabled />
-  <InputCheckbox label="My label" error />
-  <InputCheckbox label="My label" checked />
-  <InputCheckbox label="My label" error checked />
+  <InputCheckbox label="Burger" />
+  <InputCheckbox label="Fries" disabled />
+  <InputCheckbox label="Drink" error />
 </Canvas>
 
 
@@ -48,4 +46,4 @@ Also, you can sen this parameters:
 
 ## Playground
 
-<PlainHTMLFormExample />
+<InputCheckboxExample />

package/src/lib/components/organisms/multi-choice-list/multi-choice-list.tsx

@@ -1,14 +1,13 @@
 import styled from 'styled-components'
 import { FC, isDefined, isEmpty, Nothing } from '@helpers'
-import { Text , Margin } from '@foundations'
+import { Margin } from '@foundations'
 import { Flex } from 'components/layout'
-import { Label1 } from 'components/typography'
-import { InputCheckbox, IInputCheckbox } from '../../molecules/input-checkbox'
+import { Label } from 'components/typography'
+import { IInputCheckboxProps, InputCheckbox } from 'components/molecules/input-checkbox'
 
-const HelpfulMessage = styled(Label1)`
+const HelpfulMessage = styled(Label)`
   margin-top: ${Margin.xxs};
   margin-left: ${Margin.xl};
-  color: ${Text.Subdued};
   user-select: none;
 `
 const Group = styled(Flex)`
@@ -16,8 +15,7 @@ const Group = styled(Flex)`
   flex-direction: column;
   gap: 18px;
 `
-interface IOption extends IInputCheckbox {
-  id: string
+interface IOption extends IInputCheckboxProps {
   helpfulMessage?: string
 }
 interface IMultiChoiceList {
@@ -30,6 +28,7 @@ export const MultiChoiceList: FC<IMultiChoiceList> = (props: IMultiChoiceList) =
   if (isEmpty(options)) {
     return <Nothing />
   }
+
   return (
     <Group role="group">
       {options.map((option:IOption) => (
@@ -42,7 +41,7 @@ export const MultiChoiceList: FC<IMultiChoiceList> = (props: IMultiChoiceList) =
             {...option}
           />
           {isDefined(option.helpfulMessage) && (
-            <HelpfulMessage id={`${option.id}-id`}>
+            <HelpfulMessage subdued id={`${option.id}-id`}>
               {option.helpfulMessage}
             </HelpfulMessage>
           )}