feat: Add the CommunityBubble component (#496)

* feat: Add the CommunityBubble component

* fix: Styles

src/components/CommunityBubble/CommunityBubble.css

@@ -0,0 +1,29 @@
+.dui-community-bubble {
+  display: flex;
+  color: white;
+  border-radius: 12px;
+  padding: 10px 34px 10px 19px;
+  background: #161518;
+  align-items: center;
+  gap: 15px;
+}
+
+.dui-community-bubble__icon {
+  background-image: url('../../assets/discord.svg');
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 20px;
+  width: 28px;
+  filter: brightness(0) invert(1);
+}
+
+.dui-community-bubble__text--bold {
+  font-weight: 600;
+}
+
+.dui-community-bubble__text {
+  display: flex;
+  flex-direction: column;
+  color: white;
+  font-size: 12px;
+}

src/components/CommunityBubble/CommunityBubble.props.ts

@@ -0,0 +1,7 @@
+export type CommunityBubbleProps = {
+  className?: string
+  i18n?: {
+    title: string
+    subtitle: string
+  }
+}

src/components/CommunityBubble/CommunityBubble.stories.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import { CommunityBubble } from './CommunityBubble'
+
+storiesOf('CommunityBubble', module).add('Base', () => <CommunityBubble />)

src/components/CommunityBubble/CommunityBubble.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { CommunityBubbleProps } from './CommunityBubble.props'
+import './CommunityBubble.css'
+import classNames from 'classnames'
+
+export const CommunityBubble = (props: CommunityBubbleProps) => {
+  return (
+    <a
+      className={classNames('dui-community-bubble', props.className)}
+      href="https://decentraland.org/discord"
+      target="about:blank"
+    >
+      <i className="dui-community-bubble__icon" />
+      <p className="dui-community-bubble__text">
+        <span>{props.i18n?.title ?? 'Need Guidance?'}</span>
+        <span className="dui-community-bubble__text--bold">
+          {props.i18n?.subtitle ?? 'ASK THE COMMUNITY'}
+        </span>
+      </p>
+    </a>
+  )
+}

src/components/CommunityBubble/index.ts

@@ -0,0 +1,2 @@
+export * from './CommunityBubble.props'
+export * from './CommunityBubble'

src/index.ts

@@ -96,6 +96,7 @@ export * from './components/IconBadge/IconBadge'
 export * from './components/SmartWearableFilter'
 export * from './components/SmartBadge'
 export * from './components/SmartIcon'
+export * from './components/CommunityBubble'
 
 // Semantic components
 /* eslint-disable no-restricted-imports */