@spothero/ui 15.9.5-beta.0 → 15.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.9.5-beta.0",
+  "version": "15.9.6",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",

package/styles/v2/components/Badge/Badge.jsx

@@ -0,0 +1 @@
+export {Badge as default} from '@chakra-ui/react';

package/styles/v2/components/Badge/Badge.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Component from './Badge';
+
+export default {
+    title: 'v2/Badge',
+    component: Component,
+    parameters: {
+        removeBaseHtmlClass: true,
+    },
+};
+
+const Template = props => (
+    <>
+        <Component variant='primary'>
+            Primary
+        </Component>
+        <br/>
+        <Component variant='warningLight'>
+            Warning Light
+        </Component>
+        <br/>
+        <Component variant='solid' colorScheme='green'>
+            Success
+        </Component>
+        <br/>
+        <Component variant='subtle' colorScheme='red'>
+            Removed
+        </Component>
+    </>
+);
+
+export const Badge = Template.bind({});

package/styles/v2/components/Badge/styles/index.js

@@ -0,0 +1,29 @@
+import merge from 'lodash/merge';
+import chakraDefaultTheme from '@chakra-ui/theme';
+
+const baseStyle = {
+    px: 1,
+    textTransform: 'reset',
+    fontSize: 'xs',
+    borderRadius: 'sm',
+    fontWeight: 'bold',
+};
+
+export const variants = {
+     primary: {
+         bg: 'primary.default',
+         color: 'white',
+     },
+    warningLight: {
+         bg: 'yellow.100',
+         color: 'black',
+    },
+};
+
+const defaultProps = {};
+
+export default merge(chakraDefaultTheme.components.Badge, {
+    variants,
+    baseStyle,
+    defaultProps,
+});

package/styles/v2/components/index.js

@@ -35,6 +35,7 @@ export {
 export {Modal} from './Modal';
 export {Radio, RadioGroup} from './Radio';
 export {AutoSuggestSelect} from './AutoSuggestSelect';
+export {default as Badge} from './Badge/Badge';
 
 // generic chakra reexports
 export {

package/styles/v2/components/styles.js

@@ -16,4 +16,5 @@ export {default as Popover} from './Popover/styles';
 export {default as Input} from './Input/styles';
 export {default as Modal} from './Modal/styles';
 export {default as Radio} from './Radio/styles';
-export {default as Skeleton} from './Skeleton/Skeleton.styles';
+export {default as Skeleton} from './Skeleton/Skeleton.styles';
+export {default as Badge} from './Badge/styles';