feat: Level component (#102)

packages/fuselage/src/components/Level/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { createStyledComponent } from '../../styles';
+
+const Container = createStyledComponent('rcx-level', 'nav');
+const ItemContainer = createStyledComponent('rcx-level__item', 'div');
+
+export const Level = React.forwardRef(function Level(props, ref) {
+  return <Container ref={ref} {...props} />;
+});
+
+Level.displayName = 'Level';
+
+export const LevelItem = React.forwardRef(function LevelItem(props, ref) {
+  return <ItemContainer ref={ref} {...props} />;
+});
+
+LevelItem.displayName = 'Level.Item';
+
+Level.Item = LevelItem;

packages/fuselage/src/components/Level/spec.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Level } from '../..';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Level />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+describe('Level.Item', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Level.Item />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});

packages/fuselage/src/components/Level/stories.mdx

@@ -0,0 +1,32 @@
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import { Headline, Level, Subtitle, Text } from '../..';
+
+<Meta title='Misc|Level' parameters={{ jest: ['Level/spec'] }} />
+
+# Level
+
+A multi-purpose horizontal level, which can contain almost any other element.
+
+<Preview>
+  <Story name='Default'>
+    <Level>
+      <Level.Item>
+        <Text.Skeleton headline defaultColor />
+        <Text.Skeleton subtitle hintColor />
+      </Level.Item>
+      <Level.Item>
+        <Text.Skeleton headline defaultColor />
+        <Text.Skeleton subtitle hintColor />
+      </Level.Item>
+      <Level.Item>
+        <Text.Skeleton headline defaultColor />
+        <Text.Skeleton subtitle hintColor />
+      </Level.Item>
+      <Level.Item>
+        <Text.Skeleton headline defaultColor />
+        <Text.Skeleton subtitle hintColor />
+      </Level.Item>
+    </Level>
+  </Story>
+</Preview>

packages/fuselage/src/components/Level/styles.scss

@@ -0,0 +1,21 @@
+.rcx-level {
+  @include box;
+
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.rcx-level__item {
+  @include box;
+
+  flex: 1 1 100%;
+
+  max-width: 100%;
+  padding-inline: $spaces-x8;
+
+  text-align: center;
+
+  @include when-breakpoint(md) {
+    flex-basis: auto;
+  }
+}

packages/fuselage/src/components/Text/styles.scss

@@ -84,6 +84,72 @@
 
   font-size: inherit;
 
+  @mixin use-style($font-size, $line-height) {
+    height: $font-size;
+    margin-block-start: calc((#{ $line-height } - #{ $font-size }) * 0.3);
+    margin-block-end: calc((#{ $line-height } - #{ $font-size }) * 0.7);
+  }
+
+  &--style-headline {
+    @include use-style($font-size: $text-styles-h1-font-size, $line-height: $text-styles-h1-line-height);
+  }
+
+  &--style-subtitle {
+    @include use-style($font-size: $text-styles-s1-font-size, $line-height: $text-styles-s1-line-height);
+  }
+
+  &--style-paragraph {
+    @include use-style($font-size: $text-styles-p1-font-size, $line-height: $text-styles-p1-line-height);
+  }
+
+  &--style-caption {
+    @include use-style($font-size: $text-styles-c1-font-size, $line-height: $text-styles-c1-line-height);
+  }
+
+  &--style-micro {
+    @include use-style($font-size: $text-styles-micro-font-size, $line-height: $text-styles-micro-line-height);
+  }
+
+  &--color-default {
+    background-color: #{ $text-colors-default };
+  }
+
+  &--color-info {
+    background-color: #{ $text-colors-info };
+  }
+
+  &--color-hint {
+    background-color: #{ $text-colors-hint };
+  }
+
+  &--color-disabled-label {
+    background-color: #{ $text-colors-disabled-label };
+  }
+
+  &--color-disabled {
+    background-color: #{ $text-colors-disabled };
+  }
+
+  &--color-alternative {
+    background-color: #{ $text-colors-alternative };
+  }
+
+  &--color-primary {
+    background-color: #{ $text-colors-primary };
+  }
+
+  &--color-success {
+    background-color: #{ $text-colors-success };
+  }
+
+  &--color-danger {
+    background-color: #{ $text-colors-danger };
+  }
+
+  &--color-warning {
+    background-color: #{ $text-colors-warning };
+  }
+
   &--animated {
     animation: rcx-skeleton__text-animation 1s linear 0s infinite running;
   }

packages/fuselage/src/components/index.js

@@ -13,6 +13,7 @@ export * from './Headline';
 export * from './Icon';
 export * from './InputBox';
 export * from './Label';
+export * from './Level';
 export * from './Margins';
 export * from './Paragraph';
 export * from './PasswordInput';

packages/fuselage/src/components/index.scss

@@ -11,6 +11,7 @@
 @import './Icon/styles.scss';
 @import './InputBox/styles.scss';
 @import './Label/styles.scss';
+@import './Level/styles.scss';
 @import './Margins/styles.scss';
 @import './Paragraph/styles.scss';
 @import './Subtitle/styles.scss';