diff --git a/packages/assets/raw/logos/logo-bitcasino-short.svg b/packages/assets/raw/logos/logo-bitcasino-short.svg index e618e57bf2..d7676b0f7f 100644 --- a/packages/assets/raw/logos/logo-bitcasino-short.svg +++ b/packages/assets/raw/logos/logo-bitcasino-short.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/assets/raw/logos/logo-bombay-short.svg b/packages/assets/raw/logos/logo-bombay-short.svg index d5d2165021..6ba60d4324 100644 --- a/packages/assets/raw/logos/logo-bombay-short.svg +++ b/packages/assets/raw/logos/logo-bombay-short.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/assets/raw/logos/logo-luckyslots-short.svg b/packages/assets/raw/logos/logo-luckyslots-short.svg index 9105a7e5fa..9b2d5592df 100644 --- a/packages/assets/raw/logos/logo-luckyslots-short.svg +++ b/packages/assets/raw/logos/logo-luckyslots-short.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/assets/raw/logos/logo-slots-short.svg b/packages/assets/raw/logos/logo-slots-short.svg new file mode 100644 index 0000000000..22bf8e21aa --- /dev/null +++ b/packages/assets/raw/logos/logo-slots-short.svg @@ -0,0 +1,5 @@ + + + + diff --git a/packages/assets/src/index.ts b/packages/assets/src/index.ts index e803cbe481..a622320125 100644 --- a/packages/assets/src/index.ts +++ b/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'; diff --git a/packages/assets/src/logos/LogoBitcasinoShort.tsx b/packages/assets/src/logos/LogoBitcasinoShort.tsx index 9e3a7c5b1d..e1b19afccc 100644 --- a/packages/assets/src/logos/LogoBitcasinoShort.tsx +++ b/packages/assets/src/logos/LogoBitcasinoShort.tsx @@ -5,7 +5,7 @@ import { themed } from '@heathmont/moon-utils'; const Svg = (props: React.SVGProps) => ( ) => ( ) => ( ) => ( + + + + +); + +type SvgProps = { + color?: ColorProps; + height?: string | number; + width?: string | number; + fontSize?: string | number; + verticalAlign?: string; +}; +const LogoSlotsShort = styled(Svg)( + ({ color, height, width, fontSize, verticalAlign, theme }) => ({ + ...(color && { + color: themed('color', color)(theme), + }), + height, + width, + fontSize, + verticalAlign, + }) +); +LogoSlotsShort.defaultProps = { + verticalAlign: 'middle', +}; +export default LogoSlotsShort; diff --git a/packages/assets/src/logos/README.mdx b/packages/assets/src/logos/README.mdx index 2d3d20c69d..c351cf44e7 100644 --- a/packages/assets/src/logos/README.mdx +++ b/packages/assets/src/logos/README.mdx @@ -21,27 +21,27 @@ With `width` and `height`: ``` ```jsx react-live - + ``` ## Hub88 ```jsx react-live - + ``` ```jsx react-live - + ``` ## Bitcasino ```jsx react-live - + ``` ```jsx react-live - + ``` ### Missions Tool @@ -53,33 +53,37 @@ With `width` and `height`: ### Livecasino ```jsx react-live - + ``` ### Bombay ```jsx react-live - + ``` ```jsx react-live - + ``` ### Luckyslots ```jsx react-live - + ``` ```jsx react-live - + ``` ### Slots.io ```jsx react-live - + +``` + +```jsx react-live + ``` ## Moon Pay @@ -91,5 +95,5 @@ With `width` and `height`: ## BTCXE & 3D secure: ```jsx react-live - + ``` diff --git a/packages/assets/src/logos/index.ts b/packages/assets/src/logos/index.ts index fd96bac4ae..57759eb438 100644 --- a/packages/assets/src/logos/index.ts +++ b/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'; diff --git a/packages/core/src/caption/Caption.ts b/packages/core/src/caption/Caption.ts new file mode 100644 index 0000000000..82ebed2c17 --- /dev/null +++ b/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(({ 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; diff --git a/packages/core/src/caption/README.mdx b/packages/core/src/caption/README.mdx new file mode 100644 index 0000000000..4014097f9a --- /dev/null +++ b/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 + + Caption with default color + Caption with defined color + Caption with defined color + Caption with defined color + +``` + +## as="p" + +By default Caption renders as Span tag. You can render it as Paragraph or Label tags, etc. + +```jsx react-live + + Caption renders Span tag by default + Caption renders Paragraph tag + Caption renders Label tag + +``` diff --git a/packages/core/src/caption/__tests__/__snapshots__/caption.test.tsx.snap b/packages/core/src/caption/__tests__/__snapshots__/caption.test.tsx.snap new file mode 100644 index 0000000000..24c45d2955 --- /dev/null +++ b/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 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; +} + + + Caption + +`; + +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; +} + +

+ Caption with Paragraph tag +

+`; + +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; +} + + + Caption + +`; + +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; +} + + + Caption + +`; diff --git a/packages/core/src/caption/__tests__/caption.test.tsx b/packages/core/src/caption/__tests__/caption.test.tsx new file mode 100644 index 0000000000..194bad6345 --- /dev/null +++ b/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) => ( + {component} +); + +describe('Caption', () => { + describe('Elements', () => { + test('renders as by default', () => { + const caption = create(renderWithTheme(Caption)); + expect(caption).toMatchSnapshot(); + }); + test('renders as an element if "as" prop provided', () => { + const text = create( + renderWithTheme(Caption with Paragraph tag) + ); + expect(text).toMatchSnapshot(); + }); + }); + + test('renders default color', () => { + const caption = create(renderWithTheme(Caption)); + expect(caption).toMatchSnapshot(); + }); + + test('renders with a color', () => { + const caption = create( + renderWithTheme(Caption) + ); + expect(caption).toMatchSnapshot(); + }); +}); diff --git a/packages/core/src/heading/Heading.ts b/packages/core/src/heading/Heading.ts new file mode 100644 index 0000000000..4d87ff15ca --- /dev/null +++ b/packages/core/src/heading/Heading.ts @@ -0,0 +1,35 @@ +import styled from 'styled-components'; +import { themed } from '@heathmont/moon-utils'; +import { ColorNames } from '@heathmont/moon-themes'; + +import getFontSize from '../private/text/getFontSize'; + +import { HeadingSize } from './HeadingSize'; + +type Props = { + size?: HeadingSize; + color?: ColorNames; + isRegular?: boolean; +}; + +const Heading = styled.h3( + ({ color, theme }) => ({ + color: themed('color', color)(theme), + }), + ({ size = 16 }) => getFontSize(size), + ({ isRegular, theme: { fontWeight } }) => + isRegular + ? { + fontWeight: fontWeight.normal, + } + : { + fontWeight: fontWeight.semibold, + } +); + +Heading.defaultProps = { + color: 'bulma.100', + size: 16, +}; + +export default Heading; diff --git a/packages/core/src/heading/HeadingSize.ts b/packages/core/src/heading/HeadingSize.ts new file mode 100644 index 0000000000..514bb61761 --- /dev/null +++ b/packages/core/src/heading/HeadingSize.ts @@ -0,0 +1 @@ +export type HeadingSize = 16 | 18 | 20 | 24 | 32 | 48 | 56 | 64 | 72; diff --git a/packages/core/src/heading/README.mdx b/packages/core/src/heading/README.mdx new file mode 100644 index 0000000000..242345073a --- /dev/null +++ b/packages/core/src/heading/README.mdx @@ -0,0 +1,77 @@ +--- +name: Heading +menu: Design System +route: /core/heading +--- + +# Heading + +## sizes + +We have predefined font sizes: 16 | 18 | 20 | 24 | 32 | 48 | 56 | 64 | 72. Line heights are calculated automatically based on font size. + +By default font size is 16. You can choose any size. + +```jsx react-live + + Heading with default font size + Text with font size 18 + Text with font size 20 + Text with font size 24 + Text with font size 32 + font size 48 + font size 56 + font size 64 + font size 72 + +``` + +## isRegular + +By default font weight is bold. You can make it thiner. + +```jsx react-live + + Heading with default font weight + + Heading with font-weight: regular + + +``` + +## as="h2" + +By default Heading renders as H3 tag. You can render it as H1, H2, H4, H5 and H6 tags. + +```jsx react-live + + Heading renders H3 tag by default + + Heading renders H2 tag + + + Heading renders H6 tag + + +``` + +## color + +By default Heading color is bulma.100. You can use any color. + +Bulma.100 - is main text color. Trunks.100 - is secondary text color + +```jsx react-live + + Heading with default color + + Heading with defined color + + + Heading with defined color + + + Heading with defined color + + +``` diff --git a/packages/core/src/heading/__tests__/__snapshots__/heading.test.tsx.snap b/packages/core/src/heading/__tests__/__snapshots__/heading.test.tsx.snap new file mode 100644 index 0000000000..2f188da9b9 --- /dev/null +++ b/packages/core/src/heading/__tests__/__snapshots__/heading.test.tsx.snap @@ -0,0 +1,273 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Heading Elements renders as

if no "as" prop provided 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 500; +} + +

+ Text +

+`; + +exports[`Heading Elements renders as an element if "as" prop provided 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 500; +} + +
+ Heading +
+`; + +exports[`Heading Sizes 16rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes 18rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1.125rem; + line-height: 1.75rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes 20rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes 24rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1.5rem; + line-height: 2rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes 32rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 2rem; + line-height: 2.5rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes 48rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 3rem; + line-height: 3.5rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes 56rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 3.5rem; + line-height: 4rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes 64rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 4rem; + line-height: 4.5rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes 72rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 4.5rem; + line-height: 4.75rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes Boldness renders default boldness 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes Boldness renders with regular font weight 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 400; +} + +

+ Heading +

+`; + +exports[`Heading Sizes Colors renders default color 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes Colors renders with a color 1`] = ` +.c0 { + color: #0CD463; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 500; +} + +

+ Heading +

+`; + +exports[`Heading Sizes renders default font size 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 500; +} + +

+ Heading +

+`; diff --git a/packages/core/src/heading/__tests__/heading.test.tsx b/packages/core/src/heading/__tests__/heading.test.tsx new file mode 100644 index 0000000000..0f311eaaef --- /dev/null +++ b/packages/core/src/heading/__tests__/heading.test.tsx @@ -0,0 +1,124 @@ +import React from 'react'; +import { create } from 'react-test-renderer'; +import 'jest-styled-components'; +import { sportsbetDark, ThemeProvider } from '@heathmont/moon-themes'; + +import Heading from '../Heading'; + +const renderWithTheme = (component: JSX.Element) => ( + {component} +); + +describe('Heading', () => { + describe('Elements', () => { + test('renders as

if no "as" prop provided', () => { + const heading = create(renderWithTheme(Text)); + expect(heading).toMatchSnapshot(); + }); + + test('renders as an element if "as" prop provided', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + }); + + describe('Sizes', () => { + test('renders default font size', () => { + const heading = create(renderWithTheme(Heading)); + expect(heading).toMatchSnapshot(); + }); + + test('16rem size renders properly', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + + test('18rem size renders properly', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + + test('20rem size renders properly', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + + test('24rem size renders properly', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + + test('32rem size renders properly', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + + test('48rem size renders properly', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + + test('56rem size renders properly', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + + test('64rem size renders properly', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + + test('72rem size renders properly', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + + describe('Colors', () => { + test('renders default color', () => { + const heading = create(renderWithTheme(Heading)); + expect(heading).toMatchSnapshot(); + }); + + test('renders with a color', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + }); + + describe('Boldness', () => { + test('renders default boldness', () => { + const heading = create(renderWithTheme(Heading)); + expect(heading).toMatchSnapshot(); + }); + + test('renders with regular font weight', () => { + const heading = create( + renderWithTheme(Heading) + ); + expect(heading).toMatchSnapshot(); + }); + }); + }); +}); diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index dcd64f2ee9..15539d3c7b 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -4,5 +4,15 @@ export { default as Badge } from './badge/Badge'; export * from './badge/Badge'; +export { default as Caption } from './caption/Caption'; +export * from './caption/Caption'; export { default as Checkbox } from './checkbox/Checkbox'; export * from './checkbox/Checkbox'; +export { default as Heading } from './heading/Heading'; +export * from './heading/Heading'; +export { default as HeadingSize } from './heading/HeadingSize'; +export * from './heading/HeadingSize'; +export { default as Loader } from './loader/Loader'; +export * from './loader/Loader'; +export { default as Text } from './text/Text'; +export * from './text/Text'; diff --git a/packages/core/src/loader/Loader.tsx b/packages/core/src/loader/Loader.tsx new file mode 100644 index 0000000000..6a34a53605 --- /dev/null +++ b/packages/core/src/loader/Loader.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import styled, { css, keyframes } from 'styled-components'; +import { rem, themed } from '@heathmont/moon-utils'; +import { ColorProps } from '@heathmont/moon-themes'; + +/** + * Animation + */ +const ring = keyframes` + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +`; + +const animation = css` + animation: ${ring} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; +`; + +/** + * Sub-components + */ +const LoaderContainer = styled.strong(({ theme: { space } }) => ({ + display: 'inline-block', + position: 'relative', + width: rem(space.default), + height: rem(space.default), +})); + +type LoaderRingProps = { + animationDelay: string; +} & LoaderProps; + +const LoaderRing = styled.span( + ({ theme: { color, borderStyle, borderWidth } }) => ({ + '--loader-color': color.bulma[100], + display: 'block', + position: 'absolute', + width: '100%', + height: '100%', + borderRadius: '50%', + boxSizing: 'border-box', + borderWidth: borderWidth * 2, + borderStyle, + borderColor: 'transparent', + borderTopColor: 'var(--loader-color)', + }), + animation, + ({ animationDelay }) => ({ animationDelay }), + ({ color, theme }) => ({ '--loader-color': themed('color', color)(theme) }) +); + +/** + * Component + */ +type LoaderProps = { + color?: ColorProps; +}; + +const Loader: React.FC = ({ color }) => ( + + {['-0.45s', '-0.3s', '-0.15s', '0s'].map(delay => ( + + ))} + +); + +export default Loader; diff --git a/packages/core/src/loader/README.mdx b/packages/core/src/loader/README.mdx new file mode 100644 index 0000000000..3c92192f8c --- /dev/null +++ b/packages/core/src/loader/README.mdx @@ -0,0 +1,42 @@ +--- +name: Loader +menu: Design System +route: /core/loader +--- + +# Loader + +Pure CSS loading animation. + +```jsx react-live + + + + +``` + +## Usage + +### Customization + +The `color` prop accepts [themed color token keys](/themes/tokens) (in dot +notation) as well as regular string color values; rgba, hex etc. + +```jsx react-live + + + + + +``` + +### Buttons + +```jsx react-live + + + + +``` diff --git a/packages/core/src/private/text/Size.ts b/packages/core/src/private/text/Size.ts new file mode 100644 index 0000000000..cc67111bf2 --- /dev/null +++ b/packages/core/src/private/text/Size.ts @@ -0,0 +1 @@ +export type Size = 10 | 12 | 14 | 16 | 18 | 20 | 24 | 32 | 48 | 56 | 64 | 72; diff --git a/packages/core/src/private/text/getFontSize.ts b/packages/core/src/private/text/getFontSize.ts new file mode 100644 index 0000000000..74fbd060d2 --- /dev/null +++ b/packages/core/src/private/text/getFontSize.ts @@ -0,0 +1,57 @@ +import { rem } from '@heathmont/moon-utils'; + +import { Size } from './Size'; + +const getFontSize = (size: Size) => + ({ + 10: { + fontSize: rem(10), + lineHeight: rem(16), + }, + 12: { + fontSize: rem(12), + lineHeight: rem(16), + }, + 14: { + fontSize: rem(14), + lineHeight: rem(20), + }, + 16: { + fontSize: rem(16), + lineHeight: rem(24), + }, + 18: { + fontSize: rem(18), + lineHeight: rem(28), + }, + 20: { + fontSize: rem(20), + lineHeight: rem(28), + }, + 24: { + fontSize: rem(24), + lineHeight: rem(32), + }, + 32: { + fontSize: rem(32), + lineHeight: rem(40), + }, + 48: { + fontSize: rem(48), + lineHeight: rem(56), + }, + 56: { + fontSize: rem(56), + lineHeight: rem(64), + }, + 64: { + fontSize: rem(64), + lineHeight: rem(72), + }, + 72: { + fontSize: rem(72), + lineHeight: rem(76), + }, + }[size]); + +export default getFontSize; diff --git a/packages/core/src/text/README.mdx b/packages/core/src/text/README.mdx new file mode 100644 index 0000000000..e2ad6709af --- /dev/null +++ b/packages/core/src/text/README.mdx @@ -0,0 +1,85 @@ +--- +name: Text +menu: Design System +route: /core/text +--- + +# Text + +We treat semantic and visual/cosmetic decisions as two totally [separate](https://csswizardry.com/2016/02/managing-typography-on-large-apps/) things. + +Our choice of `p` and `span` is a purely semantic decision, and doesn't impact cosmetics configured via the `size` prop. + +## sizes + +We have predefined font sizes: 10 | 12 | 14 | 16 | 18 | 20 | 24 | 32 | 48 | 56 | 64 | 72. Line heights are calculated automatically based on font size. + +By default font size is 16. You can choose any size. + +```jsx react-live + + Text with default font size + Text with font size 10 + Text with font size 12 + Text with font size 14 + Text with font size 16 + Text with font size 18 + Text with font size 20 + Text with font size 24 + Text with font size 32 + font size 48 + font size 56 + font size 64 + font size 72 + +``` + +## isBold + +By default font weight is regular. You can make it bolder. + +```jsx react-live + + Text with default font weight + + Text with font-weight: semibold + + +``` + +## as="span" + +By default Text renders as Paragraph tag. You can render it as Span or Label tags, etc. + +```jsx react-live + + Text renders Paragraph tag by default + + Text renders Span tag + + + Text renders Label tag + + +``` + +## color + +By default Text color is bulma.100. You can use any color. + +Bulma.100 - is main text color. Trunks.100 - is secondary text color + +```jsx react-live + + Text with default color + + Text with defined color + + + Text with defined color + + + Text with defined color + + +``` diff --git a/packages/core/src/text/Text.ts b/packages/core/src/text/Text.ts new file mode 100644 index 0000000000..ef81b2530f --- /dev/null +++ b/packages/core/src/text/Text.ts @@ -0,0 +1,30 @@ +import styled from 'styled-components'; +import { themed } from '@heathmont/moon-utils'; +import { ColorNames } from '@heathmont/moon-themes'; + +import getFontSize from '../private/text/getFontSize'; +import { Size } from '../private/text/Size'; + +type Props = { + size?: Size; + color?: ColorNames; + isBold?: boolean; +}; + +const Text = styled.p( + ({ color, theme }) => ({ + color: themed('color', color)(theme), + }), + ({ size = 16 }) => getFontSize(size), + ({ isBold, theme: { fontWeight } }) => + isBold && { + fontWeight: fontWeight.semibold, + } +); + +Text.defaultProps = { + color: 'bulma.100', + size: 16, +}; + +export default Text; diff --git a/packages/core/src/text/__tests__/__snapshots__/text.test.tsx.snap b/packages/core/src/text/__tests__/__snapshots__/text.test.tsx.snap new file mode 100644 index 0000000000..134a846055 --- /dev/null +++ b/packages/core/src/text/__tests__/__snapshots__/text.test.tsx.snap @@ -0,0 +1,306 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Text Elements renders as

if no "as" prop provided 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; +} + +

+ Text +

+`; + +exports[`Text Elements renders as an element if "as" prop provided 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; +} + + + Text + +`; + +exports[`Text Sizes 10rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 0.625rem; + line-height: 1rem; +} + +

+ Text +

+`; + +exports[`Text Sizes 12rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 0.75rem; + line-height: 1rem; +} + +

+ Text +

+`; + +exports[`Text Sizes 14rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 0.875rem; + line-height: 1.25rem; +} + +

+ Text +

+`; + +exports[`Text Sizes 16rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; +} + +

+ Text +

+`; + +exports[`Text Sizes 18rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1.125rem; + line-height: 1.75rem; +} + +

+ Text +

+`; + +exports[`Text Sizes 20rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1.25rem; + line-height: 1.75rem; +} + +

+ Text +

+`; + +exports[`Text Sizes 24rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1.5rem; + line-height: 2rem; +} + +

+ Text +

+`; + +exports[`Text Sizes 32rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 2rem; + line-height: 2.5rem; +} + +

+ Text +

+`; + +exports[`Text Sizes 48rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 3rem; + line-height: 3.5rem; +} + +

+ Text +

+`; + +exports[`Text Sizes 56rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 3.5rem; + line-height: 4rem; +} + +

+ Text +

+`; + +exports[`Text Sizes 64rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 4rem; + line-height: 4.5rem; +} + +

+ Text +

+`; + +exports[`Text Sizes 72rem size renders properly 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 4.5rem; + line-height: 4.75rem; +} + +

+ Text +

+`; + +exports[`Text Sizes Boldness renders default boldness 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; +} + +

+ Text +

+`; + +exports[`Text Sizes Boldness renders with semibold font weight 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 500; +} + +

+ Text +

+`; + +exports[`Text Sizes Colors renders default color 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; +} + +

+ Text +

+`; + +exports[`Text Sizes Colors renders with a color 1`] = ` +.c0 { + color: #0CD463; + font-size: 1rem; + line-height: 1.5rem; +} + +

+ Text +

+`; + +exports[`Text Sizes renders default font size 1`] = ` +.c0 { + color: #FFFFFF; + font-size: 1rem; + line-height: 1.5rem; +} + +

+ Text +

+`; diff --git a/packages/core/src/text/__tests__/text.test.tsx b/packages/core/src/text/__tests__/text.test.tsx new file mode 100644 index 0000000000..ec921a8e73 --- /dev/null +++ b/packages/core/src/text/__tests__/text.test.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import { create } from 'react-test-renderer'; +import 'jest-styled-components'; +import { sportsbetDark, ThemeProvider } from '@heathmont/moon-themes'; + +import Text from '../Text'; + +const renderWithTheme = (component: JSX.Element) => ( + {component} +); + +describe('Text', () => { + describe('Elements', () => { + test('renders as

if no "as" prop provided', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('renders as an element if "as" prop provided', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + }); + + describe('Sizes', () => { + test('renders default font size', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('10rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('12rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('14rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('16rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('18rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('20rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('24rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('32rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('48rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('56rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('64rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('72rem size renders properly', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + describe('Colors', () => { + test('renders default color', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('renders with a color', () => { + const text = create( + renderWithTheme(Text) + ); + expect(text).toMatchSnapshot(); + }); + }); + + describe('Boldness', () => { + test('renders default boldness', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + + test('renders with semibold font weight', () => { + const text = create(renderWithTheme(Text)); + expect(text).toMatchSnapshot(); + }); + }); + }); +});