[tooltip & Badge]: custom styles and new illustrations (#885)

* chore: add bgColor to tooltip * add changeset file * chore: add custom styles for badge component * chore: add new illustrations
web3ui · Nov 11, 2022 · 3ae1c33 · 3ae1c33
1 parent c43794a
commit 3ae1c33
Show file tree

Hide file tree

Showing 14 changed files with 1,868 additions and 20 deletions.
diff --git a/.changeset/fair-windows-cover.md b/.changeset/fair-windows-cover.md
@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+Add bgColor to tooltip
diff --git a/packages/core/src/lib/Badge/Badge.stories.tsx b/packages/core/src/lib/Badge/Badge.stories.tsx
@@ -1,5 +1,5 @@
-
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { color } from '@web3uikit/styles';
 import Badge from './Badge';
 
 export default {
@@ -62,3 +62,11 @@ Warning.args = {
     text: 'New',
     state: 'warning',
 };
+
+export const Custom = Template.bind({});
+Custom.args = {
+    text: 'New',
+    state: 'custom',
+    bgColor: color.sky40,
+    borderRadius: 20,
+};
diff --git a/packages/core/src/lib/Badge/Badge.styles.ts b/packages/core/src/lib/Badge/Badge.styles.ts
@@ -2,16 +2,18 @@ import styled from 'styled-components';
 import type { BadgeProps, colorState } from './types';
 import { color, fonts, resetCSS } from '@web3uikit/styles';
 
-type TStyleProps = Pick<BadgeProps, 'state'>;
+type TStyleProps = Pick<BadgeProps, 'state'|'bgColor' | 'borderRadius'>;
 
-const getBackgroundColor = (type: colorState) => {
+const getBackgroundColor = (type: colorState,bgColor:string) => {
     switch (type) {
         case 'danger':
             return color.red40;
         case 'success':
             return color.mint40;
         case 'warning':
             return color.yellow50;
+        case 'custom':
+            return bgColor
         default:
             return color.navy40;
     }
@@ -21,14 +23,14 @@ const DivStyled = styled.div<TStyleProps>`
     ${resetCSS}
     ${fonts.text}
     align-items: center;
-    border-radius: 6px;
+    border-radius: ${({borderRadius=6})=>borderRadius+'px'};
     display: flex;
     height: min-content;
     justify-content: center;
     overflow: hidden;
     padding: 4px 10px;
     width: min-content;
-    background-color: ${({ state = 'normal' }) => getBackgroundColor(state)};
+    background-color: ${({ state = 'normal',bgColor=color.navy40 }) => getBackgroundColor(state,bgColor)};
 `;
 
 export default { DivStyled };
diff --git a/packages/core/src/lib/Badge/Badge.tsx b/packages/core/src/lib/Badge/Badge.tsx
@@ -1,22 +1,28 @@
 import { BadgeProps } from './types';
 import styles from './Badge.styles';
 import { Typography } from '../Typography';
-
+import { color as allColors } from '@web3uikit/styles';
 const { DivStyled } = styles;
 
 const Badge: React.FC<BadgeProps> = ({
     state = 'normal',
     text,
     textVariant = 'body16',
+    color = allColors.white,
+    italic,
+    monospace,
+    weight = 'bold',
     ...props
 }) => {
     return (
         <DivStyled data-testid="test-badge" state={state} {...props}>
             <Typography
-                color="white"
+                color={color}
+                italic={italic}
+                monospace={monospace}
                 data-testid="test-badge-text"
                 variant={textVariant}
-                weight="bold"
+                weight={weight}
             >
                 {text}
             </Typography>

diff --git a/packages/core/src/lib/Badge/types.ts b/packages/core/src/lib/Badge/types.ts
@@ -1,8 +1,12 @@
-import { variantType } from '../Typography/types';
+import { TypographyProps, variantType } from '../Typography/types';
 
-export type colorState = 'normal' | 'success' | 'warning' | 'danger';
+export type colorState = 'normal' | 'success' | 'warning' | 'danger' | 'custom';
 
-export interface BadgeProps {
+type TTextProps = Pick<
+    TypographyProps,
+    'color' | 'italic' | 'monospace' | 'weight'
+>;
+export interface BadgeProps extends TTextProps {
     /**
      * Set the initial state for the Badge component
      */
@@ -15,4 +19,14 @@ export interface BadgeProps {
      * Variant of text style
      */
     textVariant?: variantType;
+
+    /**
+     * background color used when state is set to custom
+     */
+    bgColor?: string;
+
+    /**
+     * set custom radius of the badge
+     */
+    borderRadius?: number;
 }
diff --git a/packages/core/src/lib/Illustrations/Illustration.stories.tsx b/packages/core/src/lib/Illustrations/Illustration.stories.tsx
@@ -153,3 +153,13 @@ export const Wizard = Template.bind({});
 Wizard.args = {
     logo: 'wizard',
 };
+
+export const Plugins = Template.bind({});
+Plugins.args = {
+    logo: 'plugins',
+};
+
+export const Data = Template.bind({});
+Data.args = {
+    logo: 'data',
+};
diff --git a/packages/core/src/lib/Illustrations/Illustration.tsx b/packages/core/src/lib/Illustrations/Illustration.tsx
@@ -19,6 +19,8 @@ import wizard from './images/various/wizard';
 import AllChains from './images/chains';
 import { Suspense } from 'react';
 import { Skeleton } from '../Skeleton';
+import plugins from './images/various/plugins';
+import data from './images/various/data';
 
 const getLogo = (logo: Chain | Logo, width?: Size, height?: Size) => {
     switch (logo) {
@@ -50,6 +52,10 @@ const getLogo = (logo: Chain | Logo, width?: Size, height?: Size) => {
             return discord(width, height);
         case 'wizard':
             return wizard(width, height);
+        case 'plugins':
+            return plugins(width, height);
+        case 'data':
+            return data(width, height);
         default:
             const chainLogos = Object.values(AllChains);
             const ChainLogo = chainLogos.find(