feat(Customize): Credentials and Button (#921)

* feat(Customize): Credentials and Button * fix(Credentials): customize prop
web3ui · Nov 24, 2022 · 55a9855 · 55a9855
1 parent b0943c8
commit 55a9855
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 37 deletions.
diff --git a/.changeset/new-pets-clean.md b/.changeset/new-pets-clean.md
@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+Customize type added for Button and Credentails
diff --git a/packages/core/src/interfaces/customize.ts b/packages/core/src/interfaces/customize.ts
@@ -0,0 +1,31 @@
+export type TCustomize = {
+    /**
+     * Custom color, HEX or rgba is best
+     */
+    backgroundColor?: string;
+
+    /**
+     * Border radius, any valid value
+     */
+    borderRadius?: string;
+
+    /**
+     * Custom color, will change text color and icon fill
+     */
+    color?: string;
+
+    /**
+     * Custom size, number of px
+     */
+    fontSize?: string;
+
+    /**
+     * Lighten or darken the background on hover
+     */
+    onHover?: 'lighten' | 'darken';
+
+    /**
+     * Custom padding, EG 10px 20px
+     */
+    padding?: string;
+};
diff --git a/packages/core/src/lib/Button/ButtonCustom/ButtonCustom.styles.tsx b/packages/core/src/lib/Button/ButtonCustom/ButtonCustom.styles.tsx
@@ -5,14 +5,16 @@ import { ButtonProps } from '../types';
 
 const ButtonCustomStyled = styled(ButtonBase)<ButtonProps>`
     background-color: ${(p) => p.customize?.backgroundColor};
+    border-radius: ${(p) => p.customize?.borderRadius};
+    padding: ${(p) => p.customize?.padding};
 
     span {
-        color: ${(p) => p.customize?.textColor};
-        font-size: ${(p) => p.customize?.fontSize + 'px'};
+        color: ${(p) => p.customize?.color};
+        font-size: ${(p) => p.customize?.fontSize};
     }
 
     svg {
-        fill: ${(p) => p.customize?.textColor};
+        fill: ${(p) => p.customize?.color};
     }
 
     :after {

diff --git a/packages/core/src/lib/Button/types.ts b/packages/core/src/lib/Button/types.ts
@@ -1,27 +1,6 @@
-import { ILoadingProps } from '../Loading';
 import React from 'react';
-
-type TButtonCustomConfig = {
-    /**
-     * Custom color, HEX or rgba is best
-     */
-    backgroundColor?: string;
-
-    /**
-     * Custom color, HEX or rgba is best
-     */
-    textColor?: string;
-
-    /**
-     * Custom size, number of px
-     */
-    fontSize?: number;
-
-    /**
-     * Lighten or darken the background on hover
-     */
-    onHover?: 'lighten' | 'darken';
-};
+import { TCustomize } from '../../interfaces/customize';
+import { ILoadingProps } from '../Loading';
 
 export interface ButtonProps {
     /**
@@ -120,7 +99,7 @@ export interface ButtonProps {
     /**
      * Customize the button
      */
-    customize?: TButtonCustomConfig;
+    customize?: TCustomize;
 
     /**
      * Optional custom CSS

diff --git a/packages/core/src/lib/CopyButton/CopyButton.tsx b/packages/core/src/lib/CopyButton/CopyButton.tsx
@@ -27,10 +27,11 @@ export const useCopyToClipboard = (): [CopiedValue, CopyFn] => {
 };
 
 const CopyButton: FC<CopyButtonProps> = ({
-    text,
+    fill,
     iconSize = 24,
     onCopy = () => {},
     revertIn = 3000,
+    text,
     ...props
 }) => {
     const [, copy] = useCopyToClipboard();
@@ -66,7 +67,7 @@ const CopyButton: FC<CopyButtonProps> = ({
                 <Copy
                     title="copy icon"
                     titleId="copybutton copy icon"
-                    fill={color.navy40}
+                    fill={fill || color.navy40}
                     fontSize={iconSize}
                 />
             )}

diff --git a/packages/core/src/lib/CopyButton/types.ts b/packages/core/src/lib/CopyButton/types.ts
@@ -1,4 +1,5 @@
 export interface CopyButtonProps {
+    fill?: string;
     iconSize?: number;
     onCopy?: (e?: React.BaseSyntheticEvent) => void;
     revertIn?: number;

diff --git a/packages/core/src/lib/Credentials/Credentials.stories.tsx b/packages/core/src/lib/Credentials/Credentials.stories.tsx
@@ -64,3 +64,15 @@ Multiline.args = {
     local_port = 8545
     custom_domains = onfkgi4pc9ld.moralis.io`,
 };
+
+export const Customize = Template.bind({});
+Customize.args = {
+    customize: {
+        backgroundColor: 'darkblue',
+        color: 'white',
+        fontSize: '12px',
+        padding: '8px 12px',
+    },
+    hasHideButton: false,
+    text: 'https://xj5hyiafwkhn.moralis.io:2053/servers',
+};
diff --git a/packages/core/src/lib/Credentials/Credentials.styles.tsx b/packages/core/src/lib/Credentials/Credentials.styles.tsx
@@ -2,17 +2,26 @@ import styled from 'styled-components';
 import { color, resetCSS } from '@web3uikit/styles';
 import { ICredentialsProps, TDivWrapper } from './types';
 
-const CredentialsStyled = styled.div<Pick<ICredentialsProps, 'width'>>`
-    background: ${color.aero10};
-    border-radius: 16px;
+type TStyleProps = Pick<ICredentialsProps, 'customize' | 'width'>;
+
+const CredentialsStyled = styled.div<TStyleProps>`
+    background: ${(p) =>
+        p.customize?.backgroundColor
+            ? p.customize?.backgroundColor
+            : color.aero10};
+
+    border-radius: ${(p) =>
+        p.customize?.borderRadius ? p.customize?.borderRadius : '16px'};
+
     display: flex;
     flex-direction: column;
-    padding: 16px;
+    padding: ${(p) => (p.customize?.padding ? p.customize?.padding : '16px')};
     position: relative;
     width: ${(p) => p.width};
 
     @media (max-width: 600px) {
-        padding: 16px 8px;
+        padding: ${(p) =>
+            p.customize?.padding ? p.customize?.padding : '16px 8px'};
     }
 `;
 

diff --git a/packages/core/src/lib/Credentials/Credentials.tsx b/packages/core/src/lib/Credentials/Credentials.tsx
@@ -17,13 +17,14 @@ const {
 } = styles;
 
 const Credentials: FC<ICredentialsProps> = ({
+    customize,
     hasCopyButton = true,
     hasHideButton = true,
     hiddenText = '•••••••••••••••••••••••••••••••',
     icon,
     isHidden = false,
     text,
-    textColor = color.blue70,
+    textColor = customize?.color || color.blue70,
     title,
     titleColor,
     width = 'auto',
@@ -46,6 +47,7 @@ const Credentials: FC<ICredentialsProps> = ({
     return (
         <CredentialsStyled
             data-testid="test-credentials"
+            customize={customize}
             width={width}
             {...props}
         >
@@ -64,6 +66,7 @@ const Credentials: FC<ICredentialsProps> = ({
                     <Typography
                         color={isValueHidden ? color.blueGray50 : textColor}
                         data-testid="test-cred-new-comp-heading"
+                        fontSize={customize?.fontSize}
                         monospace
                         variant={isValueHidden ? 'caption14' : 'body16'}
                         weight="400"
@@ -92,7 +95,12 @@ const Credentials: FC<ICredentialsProps> = ({
                     )}
                     {hasHideButton && hasCopyButton && <DividerStyled />}
                     {hasCopyButton && (
-                        <CopyButton text={text} iconSize={24} onCopy={onCopy} />
+                        <CopyButton
+                            fill={customize?.color}
+                            iconSize={24}
+                            onCopy={onCopy}
+                            text={text}
+                        />
                     )}
                 </ToolsStyled>
             </PreformattedStyled>

diff --git a/packages/core/src/lib/Credentials/types.ts b/packages/core/src/lib/Credentials/types.ts
@@ -1,5 +1,5 @@
 import { color } from '@web3uikit/styles';
-import React from 'react';
+import { TCustomize } from '../../interfaces/customize';
 import { Typography } from '../Typography';
 import { CopyButtonProps } from '../CopyButton';
 
@@ -8,6 +8,11 @@ type TCopyButtonProps = Pick<CopyButtonProps, 'onCopy'>;
 export interface ICredentialsProps
     extends ICredentialsHeaderProps,
         TCopyButtonProps {
+    /**
+     * Customize the credentials
+     */
+    customize?: TCustomize;
+
     /**
      * if true displays Copy Button
      */

diff --git a/packages/core/src/lib/Typography/Typography.tsx b/packages/core/src/lib/Typography/Typography.tsx
@@ -30,6 +30,7 @@ const getTag = (variant: variantType) => {
 const DynamicText: FC<TypographyProps> = ({
     children,
     copyable,
+    fontSize,
     iconSize,
     italic,
     monospace,

diff --git a/packages/core/src/lib/Typography/types.ts b/packages/core/src/lib/Typography/types.ts
@@ -6,6 +6,7 @@ export interface TypographyProps {
      * Fontsize of the text, if provided it will override the native fontsize of the variant
      */
     fontSize?: string;
+
     /**
      * Variant of text style
      */