diff --git a/.all-contributorsrc b/.all-contributorsrc
index 756bccc..1d51854 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -326,6 +326,15 @@
"contributions": [
"code"
]
+ },
+ {
+ "login": "diegoalzate",
+ "name": "Diego Alzate",
+ "avatar_url": "https://avatars.githubusercontent.com/u/22416585?v=4",
+ "profile": "https://github.com/diegoalzate",
+ "contributions": [
+ "code"
+ ]
}
],
"contributorsPerLine": 7,
diff --git a/README.md b/README.md
index b90e4f1..e5de388 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,7 @@
# web3-ui
-
-[](#contributors-)
-
+[](#contributors-)
_In Development - Refactoring in Progress ποΈ_
@@ -119,8 +117,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Ernesto GarcΓa
π» |
David
π» |
Eric Roupe
π» |
- 
James Charlesworth
π» |
Ricardo Seromenho
π» |
+
James Charlesworth
π» |
+
+
+ 
Diego Alzate
π» |
diff --git a/packages/components/src/elements/Badge/Badge.stories.tsx b/packages/components/src/elements/Badge/Badge.stories.tsx
new file mode 100644
index 0000000..74210a7
--- /dev/null
+++ b/packages/components/src/elements/Badge/Badge.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Badge } from './';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+ title: 'Elements/Badge',
+ component: Badge,
+ argTypes: {
+ variant: {
+ type: 'string',
+ defaultValue: 'green',
+ options: [
+ 'red',
+ 'blue',
+ 'green',
+ 'crimson',
+ 'pink',
+ 'purple',
+ 'violet',
+ 'indigo',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'lime',
+ 'yellow',
+ 'orange',
+ 'gold',
+ 'bronze',
+ 'gray',
+ 'contrast',
+ ],
+ control: { type: 'select' },
+ },
+ },
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => ;
+
+export const Default = Template.bind({});
+Default.args = {
+ children: 'Badge',
+};
diff --git a/packages/components/src/elements/Badge/Badge.test.tsx b/packages/components/src/elements/Badge/Badge.test.tsx
new file mode 100644
index 0000000..228591c
--- /dev/null
+++ b/packages/components/src/elements/Badge/Badge.test.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Badge } from './';
+
+describe('Badge', () => {
+ it('renders without throwing', () => {
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+ });
+});
diff --git a/packages/components/src/elements/Badge/Badge.tsx b/packages/components/src/elements/Badge/Badge.tsx
new file mode 100644
index 0000000..3f22595
--- /dev/null
+++ b/packages/components/src/elements/Badge/Badge.tsx
@@ -0,0 +1,115 @@
+import { styled } from '@stitches/react';
+
+export const Badge = styled('span', {
+ // Reset
+ alignItems: 'center',
+ appearance: 'none',
+ borderWidth: '0',
+ boxSizing: 'border-box',
+ display: 'inline-flex',
+ flexShrink: 0,
+ fontFamily: 'inherit',
+ justifyContent: 'center',
+ lineHeight: '1',
+ verticalAlign: 'middle',
+ outline: 'none',
+ textDecoration: 'none',
+ userSelect: 'none',
+ WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+ '&:disabled': {
+ backgroundColor: '$slate3',
+ pointerEvents: 'none',
+ color: '$slate8',
+ },
+ '&::before': {
+ boxSizing: 'border-box',
+ content: '""',
+ },
+ '&::after': {
+ boxSizing: 'border-box',
+ content: '""',
+ },
+
+ // Custom
+ backgroundColor: '$slate3',
+ borderRadius: '$pill',
+ color: '$slate11',
+ whiteSpace: 'nowrap',
+ fontVariantNumeric: 'tabular-nums',
+ paddingLeft: '$2',
+ paddingRight: '$2',
+ paddingTop: '$1',
+ paddingBottom: '$1',
+
+ variants: {
+ variant: {
+ red: {
+ color: '$red11',
+ backgroundColor: '$red3',
+ },
+ crimson: {
+ color: '$crimson11',
+ backgroundColor: '$crimson3',
+ },
+ pink: {
+ color: '$pink11',
+ backgroundColor: '$pink3',
+ },
+ purple: {
+ color: '$purple11',
+ backgroundColor: '$purple3',
+ },
+ violet: {
+ color: '$violet11',
+ backgroundColor: '$violet3',
+ },
+ indigo: {
+ color: '$indigo11',
+ backgroundColor: '$indigo3',
+ },
+ blue: {
+ color: '$blue11',
+ backgroundColor: '$blue3',
+ },
+ cyan: {
+ color: '$cyan11',
+ backgroundColor: '$cyan3',
+ },
+ teal: {
+ color: '$teal11',
+ backgroundColor: '$teal3',
+ },
+ green: {
+ color: '$green11',
+ backgroundColor: '$green3',
+ },
+ lime: {
+ color: '$lime11',
+ backgroundColor: '$lime3',
+ },
+ yellow: {
+ color: '$yellow11',
+ backgroundColor: '$yellow3',
+ },
+ orange: {
+ color: '$orange11',
+ backgroundColor: '$orange3',
+ },
+ gold: {
+ color: '$gold11',
+ backgroundColor: '$gold3',
+ },
+ bronze: {
+ color: '$bronze11',
+ backgroundColor: '$bronze3',
+ },
+ gray: {
+ color: '$slate11',
+ backgroundColor: '$slate3',
+ },
+ contrast: {
+ color: '$hiContrast',
+ },
+ },
+ },
+});
diff --git a/packages/components/src/elements/Badge/index.ts b/packages/components/src/elements/Badge/index.ts
new file mode 100644
index 0000000..9c8edca
--- /dev/null
+++ b/packages/components/src/elements/Badge/index.ts
@@ -0,0 +1 @@
+export * from './Badge';
diff --git a/packages/components/src/elements/index.ts b/packages/components/src/elements/index.ts
index 8b166a8..0081497 100644
--- a/packages/components/src/elements/index.ts
+++ b/packages/components/src/elements/index.ts
@@ -1 +1,2 @@
export * from './Button';
+export * from './Badge';
diff --git a/playground/pages/web3-elements/index.tsx b/playground/pages/web3-elements/index.tsx
index 11cb346..93d8aa8 100644
--- a/playground/pages/web3-elements/index.tsx
+++ b/playground/pages/web3-elements/index.tsx
@@ -1,7 +1,7 @@
import type { NextPage } from 'next';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
-import { Text, Button } from '@web3-ui/components';
+import { Text, Button, Badge } from '@web3-ui/components';
const Web3ComponentsPage: NextPage = () => {
return (
@@ -21,6 +21,10 @@ const Web3ComponentsPage: NextPage = () => {
+
+
Badge
+ testing
+
);