Merge branch 'master' into feat/dropdown-justify-prop-and-align-center

web3ui · Dec 15, 2022 · 1471b67 · 1471b67
2 parents 3da7a69 + 62e1644
commit 1471b67
Show file tree

Hide file tree

Showing 43 changed files with 4,341 additions and 1 deletion.
diff --git a/.changeset/hip-mirrors-own.md b/.changeset/hip-mirrors-own.md
@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+Added bean boy illustrations (front, upleft, and animation steps 1-5)
diff --git a/packages/core/src/lib/Illustrations/Illustration.stories.tsx b/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',
+};
diff --git a/packages/core/src/lib/Illustrations/Illustration.tsx b/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(

diff --git a/packages/core/src/lib/Illustrations/images/various/beanBoyFront.tsx b/packages/core/src/lib/Illustrations/images/various/beanBoyFront.tsx
diff --git a/packages/core/src/lib/Illustrations/images/various/beanBoyStepFive.tsx b/packages/core/src/lib/Illustrations/images/various/beanBoyStepFive.tsx
diff --git a/packages/core/src/lib/Illustrations/images/various/beanBoyStepFour.tsx b/packages/core/src/lib/Illustrations/images/various/beanBoyStepFour.tsx
diff --git a/packages/core/src/lib/Illustrations/images/various/beanBoyStepOne.tsx b/packages/core/src/lib/Illustrations/images/various/beanBoyStepOne.tsx
diff --git a/packages/core/src/lib/Illustrations/images/various/beanBoyStepThree.tsx b/packages/core/src/lib/Illustrations/images/various/beanBoyStepThree.tsx
diff --git a/packages/core/src/lib/Illustrations/images/various/beanBoyStepTwo.tsx b/packages/core/src/lib/Illustrations/images/various/beanBoyStepTwo.tsx
diff --git a/packages/core/src/lib/Illustrations/images/various/beanBoyUpLeft.tsx b/packages/core/src/lib/Illustrations/images/various/beanBoyUpLeft.tsx
diff --git a/packages/core/src/lib/Illustrations/types.ts b/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];

diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @web3uikit/icons
 
+## 0.2.30
+
+### Patch Changes
+
+-   [#950](https://github.com/web3ui/web3uikit/pull/950) [`c3a4e6c5e`](https://github.com/web3ui/web3uikit/commit/c3a4e6c5e5648d81d69352df869d48de947d8701) Thanks [@KristamMoffett](https://github.com/KristamMoffett)! - Added multiple UI icons, yellow bean and blue bean
+
 ## 0.2.23
 
 ### Patch Changes

diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@web3uikit/icons",
-    "version": "0.2.23",
+    "version": "0.2.30",
     "sideEffects": false,
     "files": [
         "package.json",

diff --git a/packages/icons/src/lib/icons/Airdrop.tsx b/packages/icons/src/lib/icons/Airdrop.tsx
@@ -42,4 +42,5 @@ const SvgAirdrop = ({
         </defs>
     </svg>
 );
+
 export default SvgAirdrop;
diff --git a/packages/icons/src/lib/icons/AlertCircle.tsx b/packages/icons/src/lib/icons/AlertCircle.tsx
@@ -0,0 +1,45 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Run pnpm icons:create to update
+// Do not edit
+import { SVGProps } from 'react';
+import { SVGRProps } from '../type';
+const SvgAlertCircle = ({
+    title,
+    titleId,
+    ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+    <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        data-testid="test-icon"
+        aria-hidden="true"
+        aria-labelledby={titleId}
+        {...props}
+    >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <g
+            clipPath="url(#alert-circle_svg__a)"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            fill="#000"
+        >
+            <path d="M12 5.25a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM3.75 12a8.25 8.25 0 1 1 16.5 0 8.25 8.25 0 0 1-16.5 0Z" />
+            <path d="M12 8.25a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75ZM11.25 15a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75Z" />
+        </g>
+        <defs>
+            <clipPath id="alert-circle_svg__a">
+                <path
+                    fill="#fff"
+                    transform="translate(3 3)"
+                    d="M0 0h18v18H0z"
+                />
+            </clipPath>
+        </defs>
+    </svg>
+);
+
+export default SvgAlertCircle;
diff --git a/packages/icons/src/lib/icons/AlertTriangle.tsx b/packages/icons/src/lib/icons/AlertTriangle.tsx
@@ -0,0 +1,39 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Run pnpm icons:create to update
+// Do not edit
+import { SVGProps } from 'react';
+import { SVGRProps } from '../type';
+const SvgAlertTriangle = ({
+    title,
+    titleId,
+    ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+    <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        data-testid="test-icon"
+        aria-hidden="true"
+        aria-labelledby={titleId}
+        {...props}
+    >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.896 4.712a2.25 2.25 0 0 1 3.028.794l.002.004 6.353 10.605.006.01A2.251 2.251 0 0 1 18.36 19.5H5.639a2.25 2.25 0 0 1-1.923-3.375l.006-.01L10.074 5.51l.644.385-.642-.389c.2-.33.483-.604.82-.794Zm.464 1.57L5.012 16.88A.75.75 0 0 0 5.652 18h12.696a.75.75 0 0 0 .64-1.12L12.641 6.283v-.002a.75.75 0 0 0-1.281 0Z"
+            fill="#000"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 9a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 12 9ZM11.25 15.75A.75.75 0 0 1 12 15h.008a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75Z"
+            fill="#000"
+        />
+    </svg>
+);
+
+export default SvgAlertTriangle;
diff --git a/packages/icons/src/lib/icons/Bean.tsx b/packages/icons/src/lib/icons/Bean.tsx
@@ -104,4 +104,5 @@ const SvgBean = ({
         </defs>
     </svg>
 );
+
 export default SvgBean;
diff --git a/packages/icons/src/lib/icons/Beans.tsx b/packages/icons/src/lib/icons/Beans.tsx
@@ -270,4 +270,5 @@ const SvgBeans = ({
         </defs>
     </svg>
 );
+
 export default SvgBeans;
diff --git a/packages/icons/src/lib/icons/BlueBean.tsx b/packages/icons/src/lib/icons/BlueBean.tsx
@@ -0,0 +1,117 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Run pnpm icons:create to update
+// Do not edit
+import { SVGProps } from 'react';
+import { SVGRProps } from '../type';
+const SvgBlueBean = ({
+    title,
+    titleId,
+    ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+    <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        data-testid="test-icon"
+        aria-hidden="true"
+        aria-labelledby={titleId}
+        {...props}
+    >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <g clipPath="url(#blue-bean_svg__a)">
+            <path
+                d="M15.194 19.819c2.915 0 6.063-1.412 6.53-4.352.35-2.352-1.4-4.352-4.548-5.293-.932-.235-2.331-.94-3.147-1.646-.933-.706-1.633-1.53-2.332-2.352C10.18 4.529 8.899 3 6.8 3c-1.516 0-2.681.47-3.497 1.529-1.05 1.411-1.4 3.658-.817 5.657 1.4 5.175 6.996 9.41 12.708 9.645v-.012Z"
+                fill="url(#blue-bean_svg__b)"
+            />
+            <path
+                d="M17.177 17.23c2.798-.117 3.73-1.881 3.03-3.88-.932-2.47-4.896-2.588-6.761-4-1.749-1.176-3.031-3.763-4.897-4.704-.933-.47-1.982-.47-2.798.117-2.098 1.53-1.05 5.764.583 7.528 2.448 2.705 6.995 5.175 10.843 4.94Z"
+                fill="url(#blue-bean_svg__c)"
+            />
+            <path
+                d="M8.082 16.525c-3.73-3.411 3.731-.941 4.08 1.058.234 1.176-2.914 0-4.08-1.058Z"
+                fill="url(#blue-bean_svg__d)"
+            />
+            <path
+                d="M6.451 13.115c.467 2.47-2.798-.235-1.865-1.294.35-.706 1.632.47 1.865 1.294Z"
+                fill="url(#blue-bean_svg__e)"
+            />
+            <path
+                d="M9.598 5c-1.749-1.294-4.08-1.412-4.663-.942 1.515.47 3.614 1.059 6.762 5.528 1.515 2.235 4.313 2 6.412 2.94 1.282.589 2.915 2.588 2.915 2.588.583-3.528-5.713-4.47-7.462-6.233-1.516-1.059-2.681-2.823-3.964-3.882Z"
+                fill="url(#blue-bean_svg__f)"
+            />
+            <path
+                d="m4.935 7.116.467 1.294 1.282.47-1.282.471-.467 1.294L4.47 9.35l-1.282-.47 1.282-.47.466-1.295Z"
+                fill="#FFFFFE"
+            />
+        </g>
+        <defs>
+            <radialGradient
+                id="blue-bean_svg__b"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="matrix(-8.7833 -6.12617 4.339 -6.22096 131.539 100.046)"
+            >
+                <stop offset={0.34} stopColor="#96DAFF" />
+                <stop offset={1} stopColor="#2B92DC" />
+            </radialGradient>
+            <radialGradient
+                id="blue-bean_svg__c"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="rotate(26.249 -14.686 33.564) scale(8.58382 5.17796)"
+            >
+                <stop offset={0.47} stopColor="#31A1E7" />
+                <stop offset={1} stopColor="#6FCBFF" />
+            </radialGradient>
+            <radialGradient
+                id="blue-bean_svg__f"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="rotate(-179.344 11.696 4.817) scale(6.97673 6.90994)"
+            >
+                <stop stopColor="#B2F1FF" />
+                <stop offset={1} stopColor="#6FC3FF" />
+            </radialGradient>
+            <linearGradient
+                id="blue-bean_svg__d"
+                x1={12.175}
+                y1={16.489}
+                x2={6.963}
+                y2={16.432}
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#6FDCFF" />
+                <stop offset={1} stopColor="#B2EDFF" />
+            </linearGradient>
+            <linearGradient
+                id="blue-bean_svg__e"
+                x1={6.428}
+                y1={12.88}
+                x2={4.33}
+                y2={12.857}
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#6FBAFF" />
+                <stop offset={1} stopColor="#B2E8FF" />
+            </linearGradient>
+            <clipPath id="blue-bean_svg__a">
+                <path
+                    fill="#fff"
+                    transform="translate(2 3)"
+                    d="M0 0h20v17H0z"
+                />
+            </clipPath>
+        </defs>
+    </svg>
+);
+
+export default SvgBlueBean;
diff --git a/packages/icons/src/lib/icons/CheckCircle.tsx b/packages/icons/src/lib/icons/CheckCircle.tsx
@@ -0,0 +1,39 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Run pnpm icons:create to update
+// Do not edit
+import { SVGProps } from 'react';
+import { SVGRProps } from '../type';
+const SvgCheckCircle = ({
+    title,
+    titleId,
+    ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+    <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        data-testid="test-icon"
+        aria-hidden="true"
+        aria-labelledby={titleId}
+        {...props}
+    >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M19.364 12a7.364 7.364 0 1 0-14.728 0 7.364 7.364 0 0 0 14.728 0ZM12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18Z"
+            fill="#000"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15.873 9a.886.886 0 0 1 0 1.255l-4.5 4.491a.89.89 0 0 1-1.258 0l-1.988-1.984a.886.886 0 0 1 0-1.256.89.89 0 0 1 1.258 0l1.36 1.357L14.614 9a.89.89 0 0 1 1.258 0Z"
+            fill="#000"
+        />
+    </svg>
+);
+
+export default SvgCheckCircle;
diff --git a/packages/icons/src/lib/icons/Dai.tsx b/packages/icons/src/lib/icons/Dai.tsx
@@ -40,4 +40,5 @@ const SvgDai = ({
         </defs>
     </svg>
 );
+
 export default SvgDai;