From 55a985589de8bec58caa122342be01a22a9d6eff Mon Sep 17 00:00:00 2001 From: billgil Date: Thu, 24 Nov 2022 19:23:37 +0100 Subject: [PATCH] feat(Customize): Credentials and Button (#921) * feat(Customize): Credentials and Button * fix(Credentials): customize prop --- .changeset/new-pets-clean.md | 5 +++ packages/core/src/interfaces/customize.ts | 31 +++++++++++++++++++ .../ButtonCustom/ButtonCustom.styles.tsx | 8 +++-- packages/core/src/lib/Button/types.ts | 27 ++-------------- .../core/src/lib/CopyButton/CopyButton.tsx | 5 +-- packages/core/src/lib/CopyButton/types.ts | 1 + .../lib/Credentials/Credentials.stories.tsx | 12 +++++++ .../lib/Credentials/Credentials.styles.tsx | 19 +++++++++--- .../core/src/lib/Credentials/Credentials.tsx | 12 +++++-- packages/core/src/lib/Credentials/types.ts | 7 ++++- .../core/src/lib/Typography/Typography.tsx | 1 + packages/core/src/lib/Typography/types.ts | 1 + 12 files changed, 92 insertions(+), 37 deletions(-) create mode 100644 .changeset/new-pets-clean.md create mode 100644 packages/core/src/interfaces/customize.ts diff --git a/.changeset/new-pets-clean.md b/.changeset/new-pets-clean.md new file mode 100644 index 000000000..4707c4471 --- /dev/null +++ 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 new file mode 100644 index 000000000..053d78061 --- /dev/null +++ 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 index 7412cd561..8b3bd907d 100644 --- 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)` 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 index 093396429..36fe09e84 100644 --- 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 index e35d870a5..546916db6 100644 --- 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 = ({ - text, + fill, iconSize = 24, onCopy = () => {}, revertIn = 3000, + text, ...props }) => { const [, copy] = useCopyToClipboard(); @@ -66,7 +67,7 @@ const CopyButton: FC = ({ )} diff --git a/packages/core/src/lib/CopyButton/types.ts b/packages/core/src/lib/CopyButton/types.ts index d268bed7e..c945e6e41 100644 --- 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 index 698a1ce2e..cfab7527a 100644 --- 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 index e78f8c091..2ec7dd0a2 100644 --- 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>` - background: ${color.aero10}; - border-radius: 16px; +type TStyleProps = Pick; + +const CredentialsStyled = styled.div` + 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 index 12fd3496b..8e1108d21 100644 --- 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 = ({ + 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 = ({ return ( @@ -64,6 +66,7 @@ const Credentials: FC = ({ = ({ )} {hasHideButton && hasCopyButton && } {hasCopyButton && ( - + )} diff --git a/packages/core/src/lib/Credentials/types.ts b/packages/core/src/lib/Credentials/types.ts index 858899359..c2abde3a2 100644 --- 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; 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 index 26e4283f8..c63a9f06c 100644 --- 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 = ({ children, copyable, + fontSize, iconSize, italic, monospace, diff --git a/packages/core/src/lib/Typography/types.ts b/packages/core/src/lib/Typography/types.ts index 0a14c8ddd..752fc229c 100644 --- 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 */