fix(my-joy-beta): fis badge position

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -932,6 +932,11 @@ exports[`renders <Package /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
+.c12 {
+  display: inline-block;
+  margin-right: 0.375rem;
+}
+
 .c9 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1243,7 +1248,11 @@ exports[`renders <Package /> without throwing 1`] = `
     name="td"
     selected={false}
   >
-    1
+    <div
+      className="c12"
+    >
+      1
+    </div>
   </td>
   <td
     className="c2"

packages/my-joy-beta/src/components/create-instance/package.js

@@ -151,11 +151,9 @@ export const Package = ({
       {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
     </TableTd>
     <TableTd right selected={selected} bold={sortBy === 'disk'}>
-      {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
+      <Margin inline right={1}>{bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}</Margin>
       {ssd && (
-        <Margin inline left={1}>
           <Sup badge>SSD</Sup>
-        </Margin>
       )}
     </TableTd>
     {hasVms && (

packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap

@@ -210,3 +210,66 @@ exports[`Button Small 1`] = `
   Inspire the lazy
 </small>
 `;
+
+exports[`Button Sup 1`] = `
+.c0 {
+  position: absolute;
+  margin-top: -0.375rem;
+  border-radius: 0.1875rem;
+  font-weight: 600;
+  line-height: normal;
+  font-size: 0.5rem;
+  color: rgb(59,70,204);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+<sup
+  className="c0"
+>
+  Inspire the lazy
+</sup>
+`;
+
+exports[`Button Sup badge 1`] = `
+.c0 {
+  position: absolute;
+  margin-top: -0.375rem;
+  border-radius: 0.1875rem;
+  font-weight: 600;
+  line-height: normal;
+  font-size: 0.5rem;
+  color: rgb(59,70,204);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0.125rem 0.1875rem;
+  background: rgb(59,70,204);
+  color: rgb(255,255,255);
+}
+
+<sup
+  className="c0"
+>
+  Inspire the lazy
+</sup>
+`;

packages/ui-toolkit/src/text/__tests__/text.spec.js

@@ -3,7 +3,7 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 import remcalc from 'remcalc';
 
-import { P, H1, H2, H3, H4, H5, H6, Small } from '../';
+import { P, H1, H2, H3, H4, H5, H6, Small, Sup } from '../';
 import { Theme } from '../../mocks';
 import theme from '../../theme';
 
@@ -123,4 +123,32 @@ describe('Button', () => {
     expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
     expect(tree).toHaveStyleRule('font-size', remcalc(13));
   });
+
+  test('Sup', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Sup>Inspire the lazy</Sup>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.primary.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(8));
+  });
+
+  test('Sup badge', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Sup badge>Inspire the lazy</Sup>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.white.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(8));
+  });
 });

packages/ui-toolkit/src/text/sup.js

@@ -4,7 +4,7 @@ import is from 'styled-is';
 
 export default styled.sup`
   position: absolute;
-  margin-top: ${remcalc(-20)};
+  margin-top: ${remcalc(-6)};
   border-radius: ${remcalc(3)};
   font-weight: ${props => props.theme.font.weight.semibold};
   line-height: normal;