feat: move badge

docs/config.json

@@ -19,7 +19,7 @@
   "menuSections": [
     "Themes",
     "Assets",
-    "Core",
+    "Design System",
     "Calendar",
     "Components",
     "Global",

docs/src/components/code/index.tsx

@@ -9,6 +9,7 @@ import * as Pagination from '@heathmont/moon-pagination';
 import * as Sidebar from '@heathmont/moon-sidebar';
 import * as Calendar from '@heathmont/moon-calendar';
 import * as Table from '@heathmont/moon-table';
+import * as Core from '@heathmont/moon-core';
 import { useTheme } from '@heathmont/moon-themes';
 
 import { prismTheme } from './prism';
@@ -59,6 +60,7 @@ export const Code = ({ codeString, ...props }: CodeProps) => {
           scope={{
             ...Assets,
             ...Components,
+            ...Core,
             ...Utils,
             ...Pagination,
             ...Sidebar,

packages/components/src/badge/README.mdx

@@ -6,9 +6,38 @@ route: /components/badge
 
 # Badge
 
+### ⚠️ This component is deprecated.
+
+It's still available but planned for removal.
+
+Use design system [Badge](/core/badge) instead.
+
+## Migration guide
+
+### Set proper size
+
+Set `size="small"` if size wasn't set.
+
+```
+<Badge>Active</Badge> -> <Badge size="small">Active</Badge>
+```
+
+### Change size props
+
+`xsmall` -> `small`
+
+`small` -> `default`
+
+```
+<Badge size="xsmall">Example</Badge> -> <Badge size="small">Example</Badge>
+<Badge size="small">Example</Badge> -> <Badge>Example</Badge>
+```
+
+## Outdated documentation
+
 Default size count and labeling component
 
-```jsx react-live
+```
 <Badge color="bulma.100" backgroundColor="dodoria.100">
   Active
 </Badge>
@@ -18,7 +47,7 @@ Default size count and labeling component
 
 You coud simply use `color` and `backgroundColor` props
 
-```jsx react-live
+```
 <Inline>
   <Badge color="bulma.100" backgroundColor="piccolo.100">
     Active
@@ -36,7 +65,7 @@ You coud simply use `color` and `backgroundColor` props
 
 You coud simply use `size` prop. By default size is xSmall. You can change it to Small.
 
-```jsx react-live
+```
 <Inline>
   <Badge backgroundColor="piccolo.100">xSmall size</Badge>
   <Badge backgroundColor="piccolo.100" size="small">

packages/core/README.md

@@ -1 +1 @@
-# Core
+# Design System

packages/core/src/badge/Badge.ts

@@ -5,7 +5,7 @@ import { ColorProps } from '@heathmont/moon-themes';
 export type BadgeProps = {
   color?: ColorProps;
   backgroundColor?: ColorProps;
-  size?: 'xsmall' | 'small';
+  size?: 'small' | 'default';
 };
 
 const Badge = styled.span<BadgeProps>(
@@ -17,19 +17,27 @@ const Badge = styled.span<BadgeProps>(
     letterSpacing: rem(1), // TODO
   }),
   ({ size }) => ({
-    padding: size === 'small' ? `0 ${rem(8)}` : `0 ${rem(4)}`,
-    fontSize: size === 'small' ? rem(10) : rem(8),
-    lineHeight: size === 'small' ? rem(16) : rem(12),
+    padding: size === 'small' ? `0 ${rem(4)}` : `0 ${rem(8)}`,
+    fontSize: size === 'small' ? rem(8) : rem(10),
+    lineHeight: size === 'small' ? rem(12) : rem(16),
   }),
   /* If a color or backgroundColor is set, override the modifier styles. */
   ({ color, backgroundColor, theme }) => ({
-    color: themed('color', color)(theme),
+    color: color ? themed('color', color)(theme) : theme.color.goten[100],
     backgroundColor: themed('color', backgroundColor)(theme),
   })
 );
 
 Badge.defaultProps = {
-  size: 'xsmall',
+  size: 'default',
+  color: 'goten.100',
+  backgroundColor: 'piccolo.100',
 };
 
+/*
+default
+color - goten
+backgroundColor - piccolo.100
+*/
+
 export default Badge;

packages/core/src/badge/README.mdx

@@ -1,46 +1,66 @@
 ---
 name: Badge
-menu: Core
+menu: Design System
 route: /core/badge
 ---
 
 # Badge
 
-Default size count and labeling component
+Small count and labeling component.
+
+## Usage:
+
+```
+import { Badge } from '@heathmont/moon-core';
+```
 
 ```jsx react-live
-<Badge color="bulma.100" backgroundColor="dodoria.100">
-  Active
-</Badge>
+<Badge>Active</Badge>
 ```
 
 ## Customize colours
 
-You coud simply use `color` and `backgroundColor` props
+You could use `color` and `backgroundColor` props.
+
+Default colours are:
+
+```
+color="goten.100"
+
+backgroundColor="piccolo.100"
+```
 
 ```jsx react-live
 <Inline>
-  <Badge color="bulma.100" backgroundColor="piccolo.100">
+  <Badge color="goten.100" backgroundColor="piccolo.100">
     Active
   </Badge>
   <Badge color="krillin.100" backgroundColor="gohan.100">
     Active
   </Badge>
-  <Badge color="bulma.100" backgroundColor="dodoria.100">
+  <Badge color="goten.100" backgroundColor="dodoria.100">
     Active
   </Badge>
 </Inline>
 ```
 
 ## Customize size
 
-You coud simply use `size` prop. By default size is xSmall. You can change it to Small.
+You could use `size` prop.
+
+By default size is `default`.
+
+Possible sizes are `small` and `default`.
+
+```
+size= "small" | "default"
+
+```
 
 ```jsx react-live
 <Inline>
-  <Badge backgroundColor="piccolo.100">xSmall size</Badge>
-  <Badge backgroundColor="piccolo.100" size="small">
-    small size
-  </Badge>
+  <Badge size="small">Small</Badge>
+  <Badge size="default">Default</Badge>
+  <Badge>Default</Badge>
 </Inline>
 ```