From 6c3a2b948b64baa2ab60ee8842985014ece167cb Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <1120791+LautaroPetaccio@users.noreply.github.com>
Date: Fri, 3 May 2024 11:23:08 -0300
Subject: [PATCH] feat: Add utility icon to IconBadge (#534)
---
src/components/IconBadge/IconBadge.css | 10 +++++++---
src/components/IconBadge/IconBadge.stories.tsx | 7 +++++--
src/components/IconBadge/IconBadge.tsx | 12 ++++++------
src/components/IconBadge/IconBadge.types.ts | 3 ++-
src/images/wearables/utility.svg | 10 ++++++++++
5 files changed, 30 insertions(+), 12 deletions(-)
create mode 100644 src/images/wearables/utility.svg
diff --git a/src/components/IconBadge/IconBadge.css b/src/components/IconBadge/IconBadge.css
index a9ff7c46..4049af75 100644
--- a/src/components/IconBadge/IconBadge.css
+++ b/src/components/IconBadge/IconBadge.css
@@ -6,6 +6,7 @@
border-radius: 5px;
cursor: pointer;
background-color: #37333d;
+ min-height: 24px;
}
.dui-icon-badge .text {
@@ -16,13 +17,12 @@
.dui-icon-badge .dui-icon-badge__icon {
width: 13px;
height: 13px;
- margin-right: 10px;
background-position: center;
background-repeat: no-repeat;
}
-.dui-icon-badge .dui-icon-badge__custom-icon {
- margin-right: 10px;
+.dui-icon-badge > span:nth-child(2) {
+ margin-left: 10px;
}
/* Icons */
@@ -112,6 +112,10 @@
background-image: url(../../images/wearables/HandsIcon.svg);
}
+.dui-icon-badge .utility {
+ background-image: url(../../images/wearables/utility.svg);
+}
+
.dui-icon-badge .play-once {
background-image: url(../../images/emotes/play-once.svg);
width: 19px;
diff --git a/src/components/IconBadge/IconBadge.stories.tsx b/src/components/IconBadge/IconBadge.stories.tsx
index 71343c23..f6bc6f90 100644
--- a/src/components/IconBadge/IconBadge.stories.tsx
+++ b/src/components/IconBadge/IconBadge.stories.tsx
@@ -5,8 +5,8 @@ import { IconBadge } from './IconBadge'
storiesOf('IconBadge', module)
.add('With Icon', () => (
console.log('Clicked!')}
/>
))
@@ -15,6 +15,9 @@ storiesOf('IconBadge', module)
Custom Icon Component
))
+ .add('Without text', () => (
+ console.log('Clicked!')} />
+ ))
.add('Without Icon', () => (
console.log('Clicked!')} />
))
diff --git a/src/components/IconBadge/IconBadge.tsx b/src/components/IconBadge/IconBadge.tsx
index 7cf417b4..26c816cc 100644
--- a/src/components/IconBadge/IconBadge.tsx
+++ b/src/components/IconBadge/IconBadge.tsx
@@ -13,20 +13,20 @@ export const IconBadge = ({
const childrenInt = React.useMemo(
() => (
<>
- {children ? (
+ {children && icon ? (
{children}
- ) : (
+ ) : icon ? (
- )}
- {text}
+ ) : null}
+ {text ? {text} : null}
),
[children, icon, text]
)
return (
-
+
{childrenInt}
-
+
)
}
diff --git a/src/components/IconBadge/IconBadge.types.ts b/src/components/IconBadge/IconBadge.types.ts
index bd872cd0..1600f355 100644
--- a/src/components/IconBadge/IconBadge.types.ts
+++ b/src/components/IconBadge/IconBadge.types.ts
@@ -31,7 +31,8 @@ export type Props = {
| 'props'
| 'sparkles'
| 'places'
- text: string
+ | 'utility'
+ text?: string
onClick?: () => void
children?: React.ReactNode
}
diff --git a/src/images/wearables/utility.svg b/src/images/wearables/utility.svg
new file mode 100644
index 00000000..bd3f4f1c
--- /dev/null
+++ b/src/images/wearables/utility.svg
@@ -0,0 +1,10 @@
+