fix: typography

packages/assets/src/index.ts

@@ -1150,6 +1150,8 @@ export { default as LogoMissions } from './logos/LogoMissions';
 export * from './logos/LogoMissions';
 export { default as LogoSlotsFull } from './logos/LogoSlotsFull';
 export * from './logos/LogoSlotsFull';
+export { default as LogoSlotsShort } from './logos/LogoSlotsShort';
+export * from './logos/LogoSlotsShort';
 export { default as LogoSportsbet } from './logos/LogoSportsbet';
 export * from './logos/LogoSportsbet';
 export { default as LogoSportsbetFull } from './logos/LogoSportsbetFull';

packages/assets/src/logos/LogoBitcasinoShort.tsx

@@ -5,7 +5,7 @@ import { themed } from '@heathmont/moon-utils';
 
 const Svg = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
-    width="auto"
+    width="1em"
     height="1em"
     viewBox="0 0 198 263"
     fill="none"

packages/assets/src/logos/LogoBombayShort.tsx

@@ -5,7 +5,7 @@ import { themed } from '@heathmont/moon-utils';
 
 const Svg = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
-    width="auto"
+    width="1em"
     height="1em"
     viewBox="0 0 19 27"
     fill="none"

packages/assets/src/logos/LogoLuckyslotsShort.tsx

@@ -5,7 +5,7 @@ import { themed } from '@heathmont/moon-utils';
 
 const Svg = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
-    width="auto"
+    width="1em"
     height="1em"
     viewBox="0 0 26 31"
     fill="none"

packages/assets/src/logos/LogoSlotsShort.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ColorProps } from '@heathmont/moon-themes';
+import { themed } from '@heathmont/moon-utils';
+
+const Svg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M13.0817 14.1682L10.5442 13.1532C8.68331 12.4765 7.55552 11.9126 7.04801 11.4615C6.5405 11.0667 6.31494 10.3901 6.31494 9.54422C6.31494 7.62697 7.89385 6.27362 10.2058 6.27362C11.7284 6.27362 13.0253 7.00668 14.2095 8.47281L18.7771 7.06307C16.8598 3.51052 14.0403 1.70605 10.375 1.70605C7.95024 1.70605 5.86383 2.49551 4.05936 3.96164C2.36767 5.42777 1.52182 7.34502 1.52182 9.657C1.52182 12.8712 3.43907 15.2396 7.21718 16.6493L10.0367 17.7207C11.7847 18.3974 12.9689 18.9613 13.5328 19.4688C14.0403 19.9199 14.3223 20.5966 14.3223 21.4988C14.3223 22.4575 13.9839 23.3033 13.3073 24.0364C12.5742 24.9386 11.5028 25.3333 10.0367 25.3333C7.72468 25.3333 6.37133 24.2619 4.79242 21.2169L0.28125 22.6266C2.14211 27.5325 5.41271 29.9573 9.92388 29.9573C12.5742 29.9573 14.7734 29.1678 16.5779 27.5325C18.4951 25.8408 19.4537 23.7544 19.4537 21.2169C19.341 18.0027 17.4801 15.8599 13.0817 14.1682Z"
+      fill="currentColor"
+    />
+    <path
+      d="M6.82314 3.3968C6.82314 5.31405 5.30062 6.78018 3.38338 6.78018C1.46613 6.78018 0 5.25766 0 3.34041C0 2.43818 0.338337 1.64872 1.01501 0.972045C1.69169 0.295369 2.48114 -0.0429688 3.38338 -0.0429688C5.30062 -0.0429688 6.82314 1.47955 6.82314 3.3968Z"
+      fill="#F7CD00"
+    />
+  </svg>
+);
+
+type SvgProps = {
+  color?: ColorProps;
+  height?: string | number;
+  width?: string | number;
+  fontSize?: string | number;
+  verticalAlign?: string;
+};
+const LogoSlotsShort = styled(Svg)<SvgProps>(
+  ({ color, height, width, fontSize, verticalAlign, theme }) => ({
+    ...(color && {
+      color: themed('color', color)(theme),
+    }),
+    height,
+    width,
+    fontSize,
+    verticalAlign,
+  })
+);
+LogoSlotsShort.defaultProps = {
+  verticalAlign: 'middle',
+};
+export default LogoSlotsShort;

packages/assets/src/logos/README.mdx

@@ -21,27 +21,27 @@ With `width` and `height`:
 ```
 
 ```jsx react-live
-<LogoSportsbetShort fontSize="10rem" />
+<LogoSportsbetShort fontSize="2rem" />
 ```
 
 ## Hub88
 
 ```jsx react-live
-<LogoHub88Short fontSize="16rem" />
+<LogoHub88Full width="100%" height="auto" />
 ```
 
 ```jsx react-live
-<LogoHub88Full width="100%" height="auto" />
+<LogoHub88Short fontSize="2rem" />
 ```
 
 ## Bitcasino
 
 ```jsx react-live
-<LogoBitcasinoFull fontSize="16rem" color="bulma.100" />
+<LogoBitcasinoFull width="100%" height="auto" />
 ```
 
 ```jsx react-live
-<LogoBitcasinoShort fontSize="16rem" color="bulma.100" />
+<LogoBitcasinoShort fontSize="2rem" />
 ```
 
 ### Missions Tool
@@ -53,33 +53,37 @@ With `width` and `height`:
 ### Livecasino
 
 ```jsx react-live
-<LogoLivecasinoFull fontSize="16rem" color="bulma.100" />
+<LogoLivecasinoFull width="100%" height="auto" />
 ```
 
 ### Bombay
 
 ```jsx react-live
-<LogoBombayFull fontSize="16rem" color="bulma.100" />
+<LogoBombayFull width="100%" height="auto" />
 ```
 
 ```jsx react-live
-<LogoBombayShort fontSize="16rem" color="bulma.100" />
+<LogoBombayShort fontSize="2rem" />
 ```
 
 ### Luckyslots
 
 ```jsx react-live
-<LogoLuckyslotsFull fontSize="16rem" color="bulma.100" />
+<LogoLuckyslotsFull width="100%" height="auto" />
 ```
 
 ```jsx react-live
-<LogoLuckyslotsShort fontSize="16rem" color="bulma.100" />
+<LogoLuckyslotsShort fontSize="2rem" />
 ```
 
 ### Slots.io
 
 ```jsx react-live
-<LogoSlotsFull fontSize="16rem" color="bulma.100" />
+<LogoSlotsFull width="100%" height="auto" />
+```
+
+```jsx react-live
+<LogoSlotsShort fontSize="2rem" />
 ```
 
 ## Moon Pay
@@ -91,5 +95,5 @@ With `width` and `height`:
 ## BTCXE & 3D secure:
 
 ```jsx react-live
-<LogoBtcxe fontSize="16rem" />
+<LogoBtcxe fontSize="16rem" color="bulma.100" />
 ```

packages/assets/src/logos/index.ts

@@ -28,6 +28,8 @@ export { default as LogoMissions } from './LogoMissions';
 export * from './LogoMissions';
 export { default as LogoSlotsFull } from './LogoSlotsFull';
 export * from './LogoSlotsFull';
+export { default as LogoSlotsShort } from './LogoSlotsShort';
+export * from './LogoSlotsShort';
 export { default as LogoSportsbet } from './LogoSportsbet';
 export * from './LogoSportsbet';
 export { default as LogoSportsbetFull } from './LogoSportsbetFull';

packages/core/src/caption/Caption.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { rem, themed } from '@heathmont/moon-utils';
+import { ColorProps } from '@heathmont/moon-themes';
+
+type Props = {
+  color?: ColorProps;
+};
+
+const Caption = styled.span<Props>(({ color, theme }) => ({
+  color: themed('color', color)(theme),
+  fontSize: rem(10),
+  lineHeight: rem(16),
+  fontWeight: theme.fontWeight.semibold,
+  textTransform: 'uppercase',
+  letterSpacing: rem(1),
+}));
+
+Caption.defaultProps = {
+  color: 'bulma.100',
+};
+
+export default Caption;

packages/core/src/caption/README.mdx

@@ -0,0 +1,36 @@
+---
+name: Caption
+menu: Design System
+route: /core/caption
+---
+
+# Caption
+
+Caption is a Span tag with predefined styles. No option available except of color
+
+## color
+
+By default Caption color is bulma.100. You can use any color.
+
+Bulma.100 - is main text color. Trunks.100 - is secondary text color
+
+```jsx react-live
+<Stack>
+  <Caption>Caption with default color</Caption>
+  <Caption color="trunks.100">Caption with defined color</Caption>
+  <Caption color="piccolo.100">Caption with defined color</Caption>
+  <Caption color="krillin.100">Caption with defined color</Caption>
+</Stack>
+```
+
+## as="p"
+
+By default Caption renders as Span tag. You can render it as Paragraph or Label tags, etc.
+
+```jsx react-live
+<Stack>
+  <Caption>Caption renders Span tag by default</Caption>
+  <Caption as="p">Caption renders Paragraph tag</Caption>
+  <Caption as="label">Caption renders Label tag</Caption>
+</Stack>
+```

packages/core/src/caption/__tests__/__snapshots__/caption.test.tsx.snap

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Caption Elements renders as <span> by default 1`] = `
+.c0 {
+  color: #FFFFFF;
+  font-size: 0.625rem;
+  line-height: 1rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  -webkit-letter-spacing: 0.0625rem;
+  -moz-letter-spacing: 0.0625rem;
+  -ms-letter-spacing: 0.0625rem;
+  letter-spacing: 0.0625rem;
+}
+
+<span
+  className="c0"
+  color="bulma.100"
+>
+  Caption
+</span>
+`;
+
+exports[`Caption Elements renders as an element if "as" prop provided 1`] = `
+.c0 {
+  color: #FFFFFF;
+  font-size: 0.625rem;
+  line-height: 1rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  -webkit-letter-spacing: 0.0625rem;
+  -moz-letter-spacing: 0.0625rem;
+  -ms-letter-spacing: 0.0625rem;
+  letter-spacing: 0.0625rem;
+}
+
+<p
+  className="c0"
+  color="bulma.100"
+>
+  Caption with Paragraph tag
+</p>
+`;
+
+exports[`Caption renders default color 1`] = `
+.c0 {
+  color: #FFFFFF;
+  font-size: 0.625rem;
+  line-height: 1rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  -webkit-letter-spacing: 0.0625rem;
+  -moz-letter-spacing: 0.0625rem;
+  -ms-letter-spacing: 0.0625rem;
+  letter-spacing: 0.0625rem;
+}
+
+<span
+  className="c0"
+  color="bulma.100"
+>
+  Caption
+</span>
+`;
+
+exports[`Caption renders with a color 1`] = `
+.c0 {
+  color: #0CD463;
+  font-size: 0.625rem;
+  line-height: 1rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  -webkit-letter-spacing: 0.0625rem;
+  -moz-letter-spacing: 0.0625rem;
+  -ms-letter-spacing: 0.0625rem;
+  letter-spacing: 0.0625rem;
+}
+
+<span
+  className="c0"
+  color="piccolo.100"
+>
+  Caption
+</span>
+`;

packages/core/src/caption/__tests__/caption.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { create } from 'react-test-renderer';
+import 'jest-styled-components';
+import { sportsbetDark, ThemeProvider } from '@heathmont/moon-themes';
+
+import Caption from '../Caption';
+
+const renderWithTheme = (component: JSX.Element) => (
+  <ThemeProvider theme={sportsbetDark}>{component}</ThemeProvider>
+);
+
+describe('Caption', () => {
+  describe('Elements', () => {
+    test('renders as <span> by default', () => {
+      const caption = create(renderWithTheme(<Caption>Caption</Caption>));
+      expect(caption).toMatchSnapshot();
+    });
+    test('renders as an element if "as" prop provided', () => {
+      const text = create(
+        renderWithTheme(<Caption as="p">Caption with Paragraph tag</Caption>)
+      );
+      expect(text).toMatchSnapshot();
+    });
+  });
+
+  test('renders default color', () => {
+    const caption = create(renderWithTheme(<Caption>Caption</Caption>));
+    expect(caption).toMatchSnapshot();
+  });
+
+  test('renders with a color', () => {
+    const caption = create(
+      renderWithTheme(<Caption color="piccolo.100">Caption</Caption>)
+    );
+    expect(caption).toMatchSnapshot();
+  });
+});