Fix updates needed for new project (#940)

* feat(InputNew, Button, Cred): new customize props * chore: changeset
web3ui · Dec 9, 2022 · afa2111 · afa2111
1 parent ea2d500
commit afa2111
Show file tree

Hide file tree

Showing 13 changed files with 114 additions and 22 deletions.
diff --git a/.changeset/polite-pets-swim.md b/.changeset/polite-pets-swim.md
@@ -0,0 +1,6 @@
+---
+'@web3uikit/core': patch
+'@web3uikit/styles': patch
+---
+
+InputNew, Button, Cred: new cusomize props
diff --git a/packages/core/src/interfaces/customize.ts b/packages/core/src/interfaces/customize.ts
@@ -1,9 +1,16 @@
+import { TStandardWeight } from '../lib';
+
 export type TCustomize = {
     /**
      * Custom color, HEX or rgba is best
      */
     backgroundColor?: string;
 
+    /**
+     * Border styles: width style color. EG: 3px solid red
+     */
+    border?: string;
+
     /**
      * Border radius, any valid value
      */
@@ -19,6 +26,11 @@ export type TCustomize = {
      */
     fontSize?: string;
 
+    /**
+     * Custom size, number of px
+     */
+    fontWeight?: TStandardWeight;
+
     /**
      * Lighten or darken the background on hover
      */

diff --git a/packages/core/src/lib/Button/Button.stories.tsx b/packages/core/src/lib/Button/Button.stories.tsx
@@ -95,10 +95,13 @@ SizeXL.args = {
 export const CustomButton = Template.bind({});
 CustomButton.args = {
     customize: {
-        backgroundColor: color.navy30,
+        backgroundColor: color.navy10,
+        border: `4px solid ${color.navy40}`,
+        color: color.navy40,
         fontSize: '20px',
+        fontWeight: '700',
         onHover: 'darken',
-        color: color.blue40,
+        padding: '8px 12px',
     },
     text: 'Button',
     theme: 'custom',
@@ -127,4 +130,4 @@ export const ThemeMoneyPrimary = Template.bind({});
 ThemeMoneyPrimary.args = {
     text: 'Primary Money Button',
     theme: 'moneyPrimary',
-};
+};
diff --git a/packages/core/src/lib/Button/ButtonCustom/ButtonCustom.styles.tsx b/packages/core/src/lib/Button/ButtonCustom/ButtonCustom.styles.tsx
@@ -6,6 +6,9 @@ import { ButtonProps } from '../types';
 const ButtonCustomStyled = styled(ButtonBase)<ButtonProps>`
     background-color: ${(p) => p.customize?.backgroundColor};
     border-radius: ${(p) => p.customize?.borderRadius};
+    border: ${(p) => p.customize?.border};
+    font-size: ${(p) => p.customize?.fontSize};
+    font-weight: ${(p) => p.customize?.fontWeight};
     padding: ${(p) => p.customize?.padding};
 
     span {

diff --git a/packages/core/src/lib/Credentials/Credentials.styles.tsx b/packages/core/src/lib/Credentials/Credentials.styles.tsx
@@ -9,10 +9,9 @@ const CredentialsStyled = styled.div<TStyleProps>`
         p.customize?.backgroundColor
             ? p.customize?.backgroundColor
             : color.aero10};
-
+    border: ${(p) => p.customize?.border};
     border-radius: ${(p) =>
         p.customize?.borderRadius ? p.customize?.borderRadius : '16px'};
-
     display: flex;
     flex-direction: column;
     padding: ${(p) => (p.customize?.padding ? p.customize?.padding : '16px')};

diff --git a/packages/core/src/lib/Credentials/Credentials.tsx b/packages/core/src/lib/Credentials/Credentials.tsx
@@ -39,9 +39,10 @@ const Credentials: FC<ICredentialsProps> = ({
 
     useEffect(() => setIsValueHidden(isHidden), [isHidden]);
 
-    useEffect(() => setIsMultiline((text.match(/\n/g) || []).length > 0), [
-        text,
-    ]);
+    useEffect(
+        () => setIsMultiline((text.match(/\n/g) || []).length > 0),
+        [text],
+    );
 
     return (
         <CredentialsStyled
@@ -68,7 +69,7 @@ const Credentials: FC<ICredentialsProps> = ({
                         fontSize={customize?.fontSize}
                         monospace
                         variant={isValueHidden ? 'caption14' : 'body16'}
-                        weight="400"
+                        weight={customize?.fontWeight}
                     >
                         {isValueHidden ? (
                             hiddenText

diff --git a/packages/core/src/lib/InputNew/Input.stories.tsx b/packages/core/src/lib/InputNew/Input.stories.tsx
@@ -1,9 +1,7 @@
-import { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Server } from '@web3uikit/icons';
+import { Search, Server } from '@web3uikit/icons';
 import { InputNew as Input } from '.';
 import { validateRegExp } from '../../utils/const';
-import { TInputStates } from './atoms/types';
 
 export default {
     title: '2.Forms/InputNew',
@@ -145,3 +143,25 @@ InputCustom.args = {
     openByDefault: true,
 };
 InputCustom.storyName = 'Input Custom';
+
+export const InputCustomStyle = Template.bind({});
+InputCustomStyle.args = {
+    customize: {
+        backgroundColor: '#213853',
+        border: '1px solid #99D3FF',
+        borderRadius: '16px',
+        color: '#99D3FF',
+        fontSize: '16px,',
+        onHover: 'lighten',
+        padding: '16px 10px',
+    },
+    label: 'Search by Wallet Address',
+    placeholder: '0x...',
+    slots: {
+        slotBefore: [<Search color="#99D3FF" />],
+    },
+    setLabelMargin: {
+        left: '40px',
+    },
+};
+InputCustomStyle.storyName = 'Input Custom Style';
diff --git a/packages/core/src/lib/InputNew/Input.styles.ts b/packages/core/src/lib/InputNew/Input.styles.ts
@@ -4,7 +4,7 @@ import { IInputProps, TInputStates } from './types';
 
 type TInputProps = Pick<
     IInputProps,
-    'disabled' | 'setLabelMargin' | 'size' | 'state' | 'width'
+    'customize' | 'disabled' | 'setLabelMargin' | 'size' | 'state' | 'width'
 >;
 
 const inputDisabled = css`
@@ -29,7 +29,7 @@ const getColorByState = (state: TInputStates, defaultColor: string) => {
 const DivStyled = styled.div<TInputProps>`
     ${resetCSS};
     ${fonts.text}
-    background-color: ${color.white};
+    background-color: ${(p) => p.customize?.backgroundColor || color.white};
     border-radius: 16px;
     border: 1px solid
         ${(p) => p.state && getColorByState(p.state, color.gray30)};
@@ -39,7 +39,7 @@ const DivStyled = styled.div<TInputProps>`
     width: 100%;
 
     label {
-        background-color: white;
+        background-color: ${(p) => p.customize?.backgroundColor || color.white};
         height: 24px;
         left: ${(p) => p.setLabelMargin?.left || '18px'};
         overflow: hidden;
@@ -50,12 +50,19 @@ const DivStyled = styled.div<TInputProps>`
         white-space: nowrap;
         right: ${(p) => p.setLabelMargin?.right || '18px'};
         z-index: 1;
+
+        &::placeholder {
+            color: ${(p) => p.customize?.color};
+        }
     }
 
+    // custom input overwrites
     input {
+        background-color: ${(p) => p.customize?.backgroundColor || color.white};
+        color: ${(p) => p.customize?.color};
         ${(p) => p.size === 'regular' && 'padding: 8px 18px'};
+        ${(p) => p.customize?.padding && `padding: ${p.customize?.padding}`};
     }
-
     input + input {
         display: none;
     }
@@ -80,7 +87,9 @@ const DivStyled = styled.div<TInputProps>`
             z-index: 1;
 
             &::before {
-                background-color: ${color.white};
+                background-color: ${(p) =>
+                    p.customize?.backgroundColor || color.white};
+                border-radius: 4px;
                 content: '';
                 display: block;
                 height: 100%;
@@ -100,6 +109,10 @@ const DivStyled = styled.div<TInputProps>`
 
     &:hover {
         border-color: ${color.navy30};
+        ${(p) =>
+            p.customize?.onHover && p.customize?.onHover === 'lighten'
+                ? 'filter: brightness(1.1)'
+                : 'filter: brightness(10%)'};
     }
 
     ${(p) => p.disabled && inputDisabled};

diff --git a/packages/core/src/lib/InputNew/Input.tsx b/packages/core/src/lib/InputNew/Input.tsx
@@ -17,6 +17,7 @@ const Input: React.FC<IInputProps> = ({
     autoComplete,
     autoFocus,
     customInput,
+    customize,
     description,
     disabled,
     errorMessage = 'Sorry this is not valid',
@@ -29,8 +30,8 @@ const Input: React.FC<IInputProps> = ({
     placeholder,
     setLabelMargin,
     size,
-    state = disabled ? 'disabled' : undefined,
     slots,
+    state = disabled ? 'disabled' : undefined,
     type = 'text',
     validation,
     value,
@@ -96,6 +97,7 @@ const Input: React.FC<IInputProps> = ({
     return (
         <>
             <DivStyled
+                customize={customize}
                 className={`${
                     Boolean(currentValue || openByDefault) ? 'filled' : 'blank'
                 } ${Boolean(inputInFocus) ? 'focus' : 'blur'}`}
@@ -109,6 +111,8 @@ const Input: React.FC<IInputProps> = ({
             >
                 {label && (
                     <LabelBase
+                        color={customize?.color}
+                        typographyFontWeight={customize?.fontWeight}
                         id={id || 'web3uiKit-input'}
                         testid="test-input-label"
                         text={label}

diff --git a/packages/core/src/lib/InputNew/atoms/LabelBase.tsx b/packages/core/src/lib/InputNew/atoms/LabelBase.tsx
@@ -6,15 +6,23 @@ import styles from './styles';
 const { LabelStyled } = styles;
 
 const LabelBase: FC<ILabelBaseProps> = ({
+    color,
     id,
+    required,
     testid,
     text,
-    required,
+    typographyFontWeight,
+    typographyVariant,
     ...props
 }) => {
     return (
         <LabelStyled data-testid={testid} htmlFor={id} {...props}>
-            <Typography title={text}>
+            <Typography
+                color={color}
+                title={text}
+                variant={typographyVariant}
+                weight={typographyFontWeight}
+            >
                 {text}
                 {required && '*'}
             </Typography>

diff --git a/packages/core/src/lib/InputNew/atoms/types.ts b/packages/core/src/lib/InputNew/atoms/types.ts
@@ -1,3 +1,5 @@
+import { variantType, TStandardWeight } from '../../Typography';
+
 export type TInputStates = 'initial' | 'error' | 'confirmed' | 'disabled';
 
 export type TValidateInput = {
@@ -100,6 +102,11 @@ export interface IInputBaseProps extends TValidateInput {
 }
 
 export interface ILabelBaseProps {
+    /**
+     * set the color of the label text
+     */
+    color?: string;
+
     /**
      * label needs match ID to relate to its input
      */
@@ -119,6 +126,16 @@ export interface ILabelBaseProps {
      * the text rendered in the label
      */
     text?: string;
+
+    /**
+     * the text font weight
+     */
+    typographyFontWeight?: TStandardWeight;
+
+    /**
+     * the text font size
+     */
+    typographyVariant?: variantType;
 }
 
 export interface IVisibilityToggleProps {

diff --git a/packages/core/src/lib/InputNew/types.ts b/packages/core/src/lib/InputNew/types.ts
@@ -1,4 +1,5 @@
 import React from 'react';
+import { TCustomize } from '../../interfaces/customize';
 import { IInputBaseProps, TValidateInput } from './atoms/types';
 
 export type TInputStates = 'initial' | 'error' | 'confirmed' | 'disabled';
@@ -33,6 +34,11 @@ export interface IInputProps extends IInputBaseProps {
      */
     customInput?: JSX.Element;
 
+    /**
+     * Control style settings, for better or worse
+     */
+    customize?: TCustomize;
+
     /**
      * Description of input, Error state message overrides
      */

diff --git a/packages/styles/src/lib/colors.ts b/packages/styles/src/lib/colors.ts
@@ -3,6 +3,7 @@ const color = {
     aero20: '#DCEEFE',
     aero30: '#BBDBF7',
     aero50: '#5B8DB9',
+    aero80: '#213853',
     blue05: '#E8EAED',
     blue10: '#DCEFFD',
     blue20: '#99D3FF',
@@ -51,8 +52,7 @@ const color = {
 export const gradientColors = {
     beauBlue:
         'radial-gradient(106.45% 108.64% at 32.33% -4.84%, #ECF5FC 0.52%, #CEE4F3 100%)',
-    blue:
-        'linear-gradient(113.54deg, rgba(60, 87, 140, 0.5) 14.91%, rgba(70, 86, 169, 0.5) 30.39%, rgba(129, 161, 225, 0.185) 55.76%), linear-gradient(151.07deg, #145559 33.25%, #414FA7 98.24%)',
+    blue: 'linear-gradient(113.54deg, rgba(60, 87, 140, 0.5) 14.91%, rgba(70, 86, 169, 0.5) 30.39%, rgba(129, 161, 225, 0.185) 55.76%), linear-gradient(151.07deg, #145559 33.25%, #414FA7 98.24%)',
     goldShiny:
         'linear-gradient(113.54deg, rgba(199, 148, 37, 0.6) 14.91%, rgba(204, 147, 23, 0.6) 14.92%, rgba(181, 147, 24, 0) 45.98%, rgba(250, 228, 30, 0) 55.76%, rgba(219, 200, 26, 0) 55.76%), linear-gradient(147.17deg, #DBBB14 48.73%, #B38311 98.22%)',
     lightBlue: