Feature/custom theme

packages/payment-widget/src/hooks/use-fields-render.hook.tsx

@@ -5,6 +5,7 @@ import React                 from 'react'
 import { useIntl }           from 'react-intl'
 
 import { Field }             from '../interfaces'
+import { InputStyles }       from '../interfaces'
 import { HandleBlurField }   from '../interfaces'
 import { FieldState }        from '../interfaces'
 import { HandleChangeField } from '../interfaces'
@@ -18,7 +19,8 @@ export const useFieldsRenderer = (
   fieldsState: FieldState,
   handleChange: HandleChangeField,
   handleBlur: HandleBlurField,
-  inputGaps: number
+  inputGaps: number,
+  styles: InputStyles
 ) => {
   const intl = useIntl()
 
@@ -38,6 +40,7 @@ export const useFieldsRenderer = (
           errorText={translateError}
           onChangeNative={handleChange}
           onBlur={handleBlur}
+          styles={styles}
         />
         <Condition match={isNotLastField}>
           <Layout flexBasis={inputGaps} flexShrink={0} />

packages/payment-widget/src/interfaces/fields.interfaces.ts

@@ -4,6 +4,7 @@ import { HTMLInputTypeAttribute } from 'react'
 import { AdditionalFieldsType }   from '../enums'
 import { RequiredFieldsType }     from '../enums'
 import { DirectionFields }        from './styles.interfaces'
+import { InputStyles }            from './styles.interfaces'
 
 export type FieldsNames = RequiredFieldsType | AdditionalFieldsType
 export type FieldState = Record<FieldsNames, string>
@@ -38,4 +39,5 @@ export interface FieldsProps {
   inputGaps?: number
   isGenerateReceipt?: boolean
   additionalFields?: AdditionalField[]
+  styles?: InputStyles
 }

packages/payment-widget/src/interfaces/styles.interfaces.ts

@@ -6,8 +6,25 @@ export enum DirectionFields {
   Column = 'column',
 }
 
+export interface InputStyles {
+  styledArray?: any[]
+  size?: string
+  rounding?: {
+    default: number
+    active: number
+  }
+}
+
+export interface ButtonStyles extends ButtonProps {
+  styledArray?: any[]
+  size?: string
+  variant?: string
+  fill?: boolean
+}
+
 export interface Styles {
   direction?: DirectionFields
   inputGaps?: number
-  button?: ButtonProps
+  button?: ButtonStyles
+  input?: InputStyles
 }

packages/payment-widget/src/interfaces/widget.interfaces.ts

@@ -9,4 +9,6 @@ export interface WidgetProps {
   receipt?: ReceiptSettings
   styles?: Styles
   additionalFields?: AdditionalField[]
+  customTheme?: boolean
+  disabled?: boolean
 }

packages/payment-widget/src/ui/button/button.component.tsx

@@ -1,26 +1,26 @@
 import styled               from '@emotion/styled'
-import { ButtonProps }      from '@atls-ui-parts/button'
 
 import React                from 'react'
 import { FC }               from 'react'
 import { useHover }         from 'react-laag'
 
+import { ButtonStyles }     from '../../interfaces'
 import { appearanceStyles } from './button.styles'
 import { contentStyles }    from './button.styles'
 import { baseStyles }       from './button.styles'
 import { shapeStyles }      from './button.styles'
 
-const ButtonElement = styled('button')<any>(
-  baseStyles,
-  contentStyles,
-  appearanceStyles,
-  shapeStyles
-)
+const ButtonElement = ({ styledArray, ...props }) => {
+  const StyledButton = styledArray.length
+    ? styled('button')<any>(...styledArray)
+    : styled('button')<any>(baseStyles, contentStyles, appearanceStyles, shapeStyles)
+  return <StyledButton {...props} />
+}
 
-export const Button: FC<ButtonProps> = ({ children, ...props }) => {
+export const Button: FC<ButtonStyles> = ({ children, styledArray, ...props }) => {
   const [hover, hoverProps] = useHover()
   return (
-    <ButtonElement hover={hover} {...hoverProps} {...props}>
+    <ButtonElement hover={hover} {...hoverProps} styledArray={styledArray || []} {...props}>
       {children}
     </ButtonElement>
   )

packages/payment-widget/src/ui/fields.component.tsx

@@ -23,6 +23,7 @@ export const Fields = ({
   isGenerateReceipt = false,
   direction = DirectionFields.Column,
   inputGaps = 16,
+  styles = {},
 }: FieldsProps) => {
   const processedFields = isGenerateReceipt
     ? addReceiptFieldsUtil(additionalFields)
@@ -35,7 +36,8 @@ export const Fields = ({
     fieldsState,
     handleChange,
     handleBlur,
-    inputGaps
+    inputGaps,
+    styles
   )
   const Direction = direction === DirectionFields.Column ? Column : Row
 

packages/payment-widget/src/ui/form.component.tsx

@@ -11,7 +11,14 @@ import { useValidate }          from '../hooks'
 import { makePayment }          from '../utils'
 import { makePaymentWithCheck } from '../utils'
 
-export const Form = ({ settings, amount, receipt, styles, additionalFields }: WidgetProps) => {
+export const Form = ({
+  settings,
+  amount,
+  receipt,
+  styles,
+  additionalFields,
+  disabled,
+}: WidgetProps) => {
   const isLoaded = useInit()
   const { errors, validateField, isValidate } = useValidate()
   const payHandler: FormEventHandler<HTMLFormElement> = (event) => {
@@ -36,8 +43,9 @@ export const Form = ({ settings, amount, receipt, styles, additionalFields }: Wi
         additionalFields={additionalFields}
         direction={styles?.direction}
         inputGaps={styles?.inputGaps}
+        styles={styles?.input}
       />
-      <Button type='submit' disabled={!isLoaded} {...styles?.button}>
+      <Button type='submit' disabled={!isLoaded || disabled} {...styles?.button}>
         <FormattedMessage id='payment_widget.pay' defaultMessage='Оплатить' />
       </Button>
     </form>

packages/payment-widget/src/ui/input/input.component.tsx

@@ -14,19 +14,19 @@ import { forwardRef }                   from 'react'
 import { useHover }                     from 'react-laag'
 import { layout }                       from 'styled-system'
 
+import { InputStyles }                  from '../../interfaces'
 import { theme }                        from '../theme/src/index'
 import { appearanceStyles }             from './input.styles'
 import { baseStyles }                   from './input.styles'
 import { shapeStyles }                  from './input.styles'
 import { transitionStyles }             from './input.styles'
 
-export const InputElement = styled.div<any>(
-  baseStyles,
-  shapeStyles,
-  appearanceStyles,
-  transitionStyles,
-  layout
-)
+export const InputElement = ({ styledArray, ...props }) => {
+  const StyledInput = styledArray.length
+    ? styled.div<any>(baseStyles, ...styledArray, layout)
+    : styled.div<any>(baseStyles, shapeStyles, appearanceStyles, transitionStyles, layout)
+  return <StyledInput {...props} />
+}
 
 const Container = styled.div(({ type }: any) => ({
   display: type === 'hidden' ? 'none' : 'flex',
@@ -36,6 +36,7 @@ const Container = styled.div(({ type }: any) => ({
 
 interface InputProps extends BaseInputProps {
   errorText?: string
+  styles?: InputStyles
 }
 
 export const InputWithoutRef: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
@@ -48,13 +49,14 @@ export const InputWithoutRef: ForwardRefRenderFunction<HTMLInputElement, InputPr
     onChange,
     onChangeNative,
     placeholder,
+    styles,
     ...props
   },
   ref
 ) => {
   const changeValue = useChangeValue(disabled, onChange, onChangeNative)
-  const [, hoverProps] = useHover()
-  const [, setFocus] = useState<boolean>(false)
+  const [hover, hoverProps] = useHover()
+  const [focus, setFocus] = useState<boolean>(false)
 
   if (!ref) {
     ref = useRef(null) // eslint-disable-line
@@ -76,15 +78,21 @@ export const InputWithoutRef: ForwardRefRenderFunction<HTMLInputElement, InputPr
       }}
       {...hoverProps}
     >
-      <InputElement {...props} error={errorText !== ''}>
+      <InputElement
+        {...props}
+        error={errorText !== ''}
+        size={styles?.size}
+        styledArray={styles?.styledArray || []}
+        rounding={focus || hover ? styles?.rounding?.active : styles?.rounding?.default}
+      >
         <RawInput
           ref={ref}
           type={type}
           required={required}
           disabled={disabled}
           value={value}
           onChange={changeValue}
-          placeholder={required ? `${placeholder}*` : placeholder}
+          placeholder={placeholder}
           {...props}
         />
       </InputElement>

packages/payment-widget/src/ui/theme/src/theme.provider.tsx

@@ -4,6 +4,9 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
 
 import React                                     from 'react'
 
-export const ThemeProvider = ({ children }) => (
-  <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
-)
+export const ThemeProvider = ({ customTheme, children }) =>
+  customTheme ? (
+    <>{children}</> // eslint-disable-line
+  ) : (
+    <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
+  )

packages/payment-widget/src/ui/widget.component.tsx

@@ -14,11 +14,19 @@ const messages = {
   [LanguagesType.ENGLISH]: messagesEn,
 }
 
-export const Widget = ({ amount, settings, receipt, additionalFields, styles }: WidgetProps) => {
+export const Widget = ({
+  amount,
+  settings,
+  receipt,
+  additionalFields,
+  styles,
+  customTheme,
+  disabled,
+}: WidgetProps) => {
   const locale = settings.language ?? LanguagesType.RUSSIAN
 
   return (
-    <ThemeProvider>
+    <ThemeProvider customTheme={customTheme}>
       <IntlProvider
         locale={locale}
         messages={messages[locale]}
@@ -30,6 +38,7 @@ export const Widget = ({ amount, settings, receipt, additionalFields, styles }:
           receipt={receipt}
           styles={styles}
           additionalFields={additionalFields}
+          disabled={disabled}
         />
       </IntlProvider>
     </ThemeProvider>