Feat: Bean boy illustrations (front, upleft, and animation steps 1-5)

.changeset/hip-mirrors-own.md

@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+Added bean boy illustrations (front, upleft, and animation steps 1-5)

packages/core/src/lib/Illustrations/Illustration.stories.tsx

@@ -167,3 +167,38 @@ export const Data = Template.bind({});
 Data.args = {
     logo: 'data',
 };
+
+export const BeanBoyFront = Template.bind({});
+BeanBoyFront.args = {
+    logo: 'beanBoyFront',
+};
+
+export const BeanBoyUpLeft = Template.bind({});
+BeanBoyUpLeft.args = {
+    logo: 'beanBoyUpLeft',
+};
+
+export const BeanBoyStepOne = Template.bind({});
+BeanBoyStepOne.args = {
+    logo: 'beanBoyStepOne',
+};
+
+export const BeanBoyStepTwo = Template.bind({});
+BeanBoyStepTwo.args = {
+    logo: 'beanBoyStepTwo',
+};
+
+export const BeanBoyStepThree = Template.bind({});
+BeanBoyStepThree.args = {
+    logo: 'beanBoyStepThree',
+};
+
+export const BeanBoyStepFour = Template.bind({});
+BeanBoyStepFour.args = {
+    logo: 'beanBoyStepFour',
+};
+
+export const BeanBoyStepFive = Template.bind({});
+BeanBoyStepFive.args = {
+    logo: 'beanBoyStepFive',
+};

packages/core/src/lib/Illustrations/Illustration.tsx

@@ -21,6 +21,13 @@ import { Suspense } from 'react';
 import { Skeleton } from '../Skeleton';
 import plugins from './images/various/plugins';
 import data from './images/various/data';
+import beanBoyFront from './images/various/beanBoyFront';
+import beanBoyUpLeft from './images/various/beanBoyUpLeft';
+import beanBoyStepOne from './images/various/beanBoyStepOne';
+import beanBoyStepTwo from './images/various/beanBoyStepTwo';
+import beanBoyStepThree from './images/various/beanBoyStepThree';
+import beanBoyStepFour from './images/various/beanBoyStepFour';
+import beanBoyStepFive from './images/various/beanBoyStepFive';
 
 const getLogo = (logo: Chain | Logo, width?: Size, height?: Size) => {
     switch (logo) {
@@ -56,6 +63,20 @@ const getLogo = (logo: Chain | Logo, width?: Size, height?: Size) => {
             return plugins(width, height);
         case 'data':
             return data(width, height);
+        case 'beanBoyFront':
+            return beanBoyFront(width, height);
+        case 'beanBoyUpLeft':
+            return beanBoyUpLeft(width, height);
+        case 'beanBoyStepOne':
+            return beanBoyStepOne(width, height);
+        case 'beanBoyStepTwo':
+            return beanBoyStepTwo(width, height);
+        case 'beanBoyStepThree':
+            return beanBoyStepThree(width, height);
+        case 'beanBoyStepFour':
+            return beanBoyStepFour(width, height);
+        case 'beanBoyStepFive':
+            return beanBoyStepFive(width, height);
         default:
             const chainLogos = Object.values(AllChains);
             const ChainLogo = chainLogos.find(

packages/core/src/lib/Illustrations/types.ts

@@ -20,6 +20,13 @@ export const logoState = [
     'wizard',
     'data',
     'plugins',
+    'beanBoyFront',
+    'beanBoyUpLeft',
+    'beanBoyStepOne',
+    'beanBoyStepTwo',
+    'beanBoyStepThree',
+    'beanBoyStepFour',
+    'beanBoyStepFive',
 ] as const;
 
 export type Logo = typeof logoState[number];