@redocly/theme 0.1.2 → 0.1.3

package/src/globalStyle.ts

@@ -0,0 +1,512 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  /*
+  * Static classnames that can be used to override styles for components:
+  * download-specification-button, next-section-button, button-base
+  */
+  :root {
+    /* === Palette === */
+
+    /*
+    * Color palette
+    */
+    --color-primary-100: #62a1ff;
+    --color-primary-200: #4892ff;
+    --color-primary-300: #2f83ff;
+    --color-primary-400: #1573ff;
+    --color-primary-500: #0065fb;
+    --color-primary-600: #005be2;
+    --color-primary-700: #0050c8;
+    --color-primary-800: #0046af;
+    --color-primary-900: #003c95;
+
+    --color-secondary-100: #ffffff;
+    --color-secondary-200: #f5f7fa;
+    --color-secondary-300: #f3f4f6;
+    --color-secondary-400: #e4e7eb;
+    --color-secondary-500: #d5dae0;
+    --color-secondary-600: #c7cdd5;
+    --color-secondary-700: #b8c0ca;
+    --color-secondary-800: #a9b3c0;
+    --color-secondary-900: #9ba6b5;
+
+    --color-emphasis-100: #ffffff;
+    --color-emphasis-200: #e9eaec;
+    --color-emphasis-300: #cdd0d5;
+    --color-emphasis-400: #b2b6bd;
+    --color-emphasis-500: #969ca6;
+    --color-emphasis-600: #7a828f;
+    --color-emphasis-700: #626974;
+    --color-emphasis-800: #4b5058;
+    --color-emphasis-900: #1c1e21;
+
+    --color-accent-100: #b3dcf3;
+    --color-accent-200: #a6dfff;
+    --color-accent-300: #8cd5ff;
+    --color-accent-400: #73ccff;
+    --color-accent-500: #59c3ff;
+    --color-accent-600: #40baff;
+    --color-accent-700: #26b1ff;
+    --color-accent-800: #0da7ff;
+    --color-accent-900: #009bf2;
+
+    --color-success-100: #98eda0;
+    --color-success-200: #82e98c;
+    --color-success-300: #6ce678;
+    --color-success-400: #57e264;
+    --color-success-500: #41de50;
+    --color-success-600: #2bda3c;
+    --color-success-700: #23c933;
+    --color-success-800: #1fb32d;
+    --color-success-900: #1b9e28;
+
+    --color-warning-100: #ffc966;
+    --color-warning-200: #ffc04d;
+    --color-warning-300: #ffb733;
+    --color-warning-400: #ffae1a;
+    --color-warning-500: #ffa500;
+    --color-warning-600: #e69400;
+    --color-warning-700: #cc8400;
+    --color-warning-800: #b37300;
+    --color-warning-900: #996300;
+
+    --color-error-100: #ffc7c7;
+    --color-error-200: #ffaeae;
+    --color-error-300: #ff9494;
+    --color-error-400: #ff7b7b;
+    --color-error-500: #ff6161;
+    --color-error-600: #ff4747;
+    --color-error-700: #ff2e2e;
+    --color-error-800: #ff1414;
+    --color-error-900: #ff0000;
+
+    /* === Typography === */
+
+    --color-content: #1f2933;
+    --color-content-inverse: var(--color-secondary-200);
+    --color-content-secondary: #7b8794;
+
+    --font-size-base: 14px;
+    --line-height-base: 1.5em;
+    --font-weight-regular: 400;
+    --font-weight-bold: 600;
+    --font-weight-bolder: 700;
+    --font-family-base: Source Sans Pro, sans-serif;
+    --font-family-monospaced: Source Code Pro, monospace;
+
+    --smoothing: antialiased; // text-smoothing
+    --text-rendering: optimizeSpeed; // text-rendering
+
+    /*
+    * Spacing
+    */
+    --spacing-unit: 5px;
+    --spacing-horizontal: calc(var(--spacing-unit) * 8);
+    --spacing-vertical: calc(var(--spacing-unit) * 4);
+
+    /*
+    * Global
+    */
+    --global-border-radius: 4px;
+    --global-border-width: 1px;
+    --global-border-color: var(--color-secondary-400);
+    --global-border-color-secondary: #616e7c;
+    --global-background-color: transparent;
+
+    /* === Page layout === */
+    //TBD
+    /* === Navbar === */
+    //--navbar-height:
+    //TBD
+
+    /* === Menu (sidebar) === */
+
+    --sidebar-width: 285px;
+    --sidebar-background-color: #fff;
+    --sidebar-right-line-color: var(--global-border-color);
+    --sidebar-spacing-unit: 8px;
+    --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);
+    --sidebar-spacing-vertical: var(--sidebar-spacing-unit);
+
+    --sidebar-word-break: 'inherit';
+    --sidebar-separator-label-color: var(--sidebar-item-color);
+    --sidebar-separator-line-color: #dadada;
+    --sidebar-chevron-color: var(--sidebar-item-color);
+    --sidebar-chevron-size: var(--sidebar-spacing-unit);
+
+    --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);
+    --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);
+    --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);
+    --sidebar-item-border-radius: 4px;
+    --sidebar-item-font-family: var(--font-family-base);
+    --sidebar-item-font-size: var(--font-size-base);
+    --sidebar-item-color: var(--color-content);
+    --sidebar-item-active-color: var(--color-content);
+    --sidebar-item-background-color: #fff;
+    --sidebar-item-active-background-color: var(--global-border-color);
+
+    //TBD
+    /* === Footer === */
+    //TBD
+    /* === Table of contents === */
+    //TBD
+    /* === Various components: buttons, inputs, alerts, tooltip === */
+
+    /*
+    * Buttons
+    */
+    --button-color: white;
+    --button-background-color: var(--color-emphasis-500);
+    --button-hover-background-color: var(--color-emphasis-600);
+    --button-active-background-color: var(--color-emphasis-700);
+    --button-outlined-active-border-color: var(--color-emphasis-800);
+    --button-border-radius: var(--global-border-radius);
+    --button-font-family: inherit;
+    --button-font-weight: var(--font-weight-bold);
+    --button-box-shadow: none;
+    --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
+
+    .button-color-primary {
+      --button-color: white;
+      --button-background-color: var(--color-primary-500);
+      --button-hover-background-color: var(--color-primary-600);
+      --button-active-background-color: var(--color-primary-700);
+      --button-outlined-active-border-color: var(--color-primary-800);
+    }
+
+    .button-color-secondary {
+      --button-color: var(--color-emphasis-800);
+      --button-background-color: var(--color-secondary-400);
+      --button-hover-background-color: var(--color-secondary-500);
+      --button-active-background-color: var(--color-secondary-600);
+      --button-outlined-active-border-color: var(--color-secondary-700);
+    }
+
+    --button-small-font-size: 12px;
+    --button-small-padding: 8px 10px;
+    --button-small-min-width: 90px;
+    --button-medium-font-size: 14px;
+    --button-medium-padding: 8px 20px;
+    --button-medium-min-width: 120px;
+    --button-large-font-size: 14px;
+    --button-large-padding: 12px 24px;
+    --button-large-min-width: 150px;
+    --button-xlarge-font-size: 16px;
+    --button-xlarge-padding: 20px 24px;
+    --button-xlarge-min-width: 200px;
+
+    /*
+    * Tooltip
+    */
+    --tooltip-color: var(--color-secondary-300);
+    --tooltip-background-color: #52606d;
+
+    .tooltip-copy-button {
+      --tooltip-color: #000;
+      --tooltip-background-color: #fff;
+    }
+
+    /* === Markdown/Page content (tables, inline code, blockquotes) === */
+
+    /*
+    * Headings
+    * --h-{css-property-name} is fallback for h1...h6
+    */
+    --h-font-family: Source Sans Pro, sans-serif;
+    --h-font-weight: var(--font-weight-bolder);
+    --h-color: var(--color-content);
+
+    --h1-font-size: 36px;
+    --h2-font-size: 28px;
+    --h3-font-size: 18px;
+    --h4-font-size: 16px;
+    --h5-font-size: 14px;
+    --h6-font-size: 12px;
+
+    --h1-line-height: 36px;
+    --h2-line-height: 28px;
+    --h3-line-height: 18px;
+    --h4-line-height: 16px;
+    --h5-line-height: 14px;
+    --h6-line-height: 12px;
+
+    --code-font-size: 13px;
+    --code-font-family: var(--font-family-monospaced);
+    --code-font-weight: 400;
+    --code-wrap: pre;
+
+    --inline-code-font-size: var(--code-font-size);
+    --inline-code-font-family: var(--code-font-family);
+    --inline-code-color: #e53935;
+    --inline-code-background-color: var(--color-secondary-200);
+    --inline-code-border-color: var(--global-border-color);
+    --inline-code-border-radius: var(--global-border-radius);
+
+    --code-block-font-size: var(--code-font-size);
+    --code-block-font-family: var(--code-font-family);
+    --code-block-color: #f1928f;
+    --code-block-background-color: rgba(217, 205, 199, 0.05);
+    --code-block-border-color: var(--global-border-color);
+    --code-block-border-radius: 8px;
+    --code-block-max-height: 600px;
+    --code-block-word-break: initial;
+    --code-block-preformatted-background-color: #323f4b;
+
+    /*
+    * Links
+    */
+    --link-color: var(--color-primary-500);
+    --link-decoration: none;
+    --link-hover-color: var(--color-primary-100);
+    --link-hover-decoration: underline;
+
+    /* === ref docs and graphql docs specific === */
+    /*
+    * Logo
+    */
+    --logo-max-height: 285px;
+    --logo-max-width: 285px;
+    --logo-padding: 2px;
+
+    /*
+    * Http colors
+    */
+    --color-http-get: #3a9601;
+    --color-http-post: #0065fb;
+    --color-http-put: #93527b;
+    --color-http-options: #947014;
+    --color-http-patch: #bf581d;
+    --color-http-delete: #c83637;
+    --color-http-basic: #707070;
+    --color-http-link: #07818f;
+    --color-http-head: #a23dad;
+    --color-http-hook: var(--color-http-post);
+
+    /*
+    * Response colors
+    */
+    --response-success-border-color: #b1e996;
+    --response-success-background-color: #f6fff4;
+    --response-success-text-color: var(--response-success-border-color);
+
+    --response-error-border-color: #ffc9c9;
+    --response-error-background-color: #fff4f4;
+    --response-error-text-color: var(--response-error-border-color);
+
+    --response-redirect-border-color: var(--color-warning-500);
+    --response-redirect-background-color: #ffa5001a;
+    --response-redirect-text-color: var(--response-redirect-border-color);
+
+    --response-info-border-color: #87ceeb;
+    --response-info-background-color: #87ceeb1a;
+    --response-info-text-color: var(--response-info-border-color);
+
+    /*
+    * Panels
+    */
+    --panels-border-radius: 8px;
+    --panels-background-color: #fff;
+
+    --samples-panel-gap: 20px;
+    --samples-panel-width: 37.5%;
+    --samples-panel-block-background-color: #fff;
+    --samples-panel-background-color: #52606d;
+    --samples-panel-callback-background-color: var(--samples-panel-callback-background-color);
+    --samples-panel-controls-background-color: #323f4b;
+    --samples-panel-controls-hover-background-color: #3c4c5a;
+    --samples-panel-controls-active-border-color: var(--color-accent-500);
+    --samples-panel-text-color: #fff;
+    --samples-panel-heading-color: #fff;
+
+    --samples-panel-markdown-background-color: #3c4c5a;
+    --samples-panel-markdown-border-color: #46596a;
+
+    --try-it-panel-tab-background-color: var(--samples-panel-background-color);
+    --try-it-panel-active-tab-background-color: #47535e;
+    --try-it-panel-active-tab-border-color: var(--color-accent-500);
+    --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);
+    --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);
+    --try-it-panel-action-button-width: auto;
+
+    --request-and-response-panel-background-color: #fff;
+
+    /*
+    * Layout
+    */
+    --layout-buttons-top-offset: 20px;
+    --layout-buttons-height: 36px;
+    --layout-buttons-width: 36px;
+
+    --layout-stacked-small-max-width: 90%;
+    --layout-stacked-medium-max-width: 75%;
+    --layout-stacked-large-max-width: 1200px;
+
+    --layout-three-panel-small-max-width: 100%;
+    --layout-three-panel-medium-max-width: 100%;
+    --layout-three-panel-large-max-width: 1800px;
+
+    --layout-middle-panel-small-max-width: none;
+    --layout-middle-panel-medium-max-width: none;
+    --layout-middle-panel-large-max-width: none;
+
+    /*
+    * Schema
+    */
+    --schema-lines-color: var(--global-border-color);
+    --schema-default-details-width: 70%;
+    --schema-type-name-color: var(--color-content-secondary);
+    --schema-type-title-color: var(--color-content-secondary);
+    --schema-require-label-color: var(--color-error-900);
+    --schema-labels-text-size: 0.9em;
+    --schema-nesting-spacing: 1em;
+    --schema-nested-background-color: var(--color-secondary-200);
+    --schema-chevron-color: var(--color-content);
+    --schema-chevron-size: 9px;
+
+    --schema-controls-color: var(--color-emphasis-800);
+    --schema-controls-background-color: var(--color-secondary-400);
+    --schema-controls-hover-background-color: var(--color-secondary-500);
+    --schema-controls-border-color: var(--color-secondary-600);
+
+    --field-name-font-size: var(--code-font-size);
+    --field-name-font-family: var(--code-font-family);
+    --field-enum-background-color: var(--inline-code-background-color);
+    --field-constraint-background-color: var(--inline-code-background-color);
+
+    /*
+    * Search
+    */
+    --search-input-border-bottom: #e6e6e6;
+    --search-results-background-color: #f2f2f2;
+    --search-results-active-item-background-color: #e6e6e6;
+    --search-marked-background-color: #ffff03;
+    --search-popup-header-background-color: var(--color-secondary-200);
+    --search-clear-button-background-color: var(--color-secondary-400);
+    --search-clear-button-hover-background-color: var(--color-secondary-600);
+
+    /*
+    * Other
+    */
+    --badge-color: var(--color-emphasis-100);
+    --badge-background-color: var(--color-primary-500);
+    --deprecated-badge-color: var(--color-emphasis-100);
+    --deprecated-badge-background-color: var(--color-warning-500);
+
+    --recursive-label-color: var(--color-warning-500);
+
+    --http-badge-font-size: 12px;
+    --http-badge-line-height: 20px;
+    --http-badge-font-family: var(--code-font-family);
+    --http-badge-font-weight: var(--font-weight-bold);
+    --http-badge-border-radius: 16px;
+    --http-badge-color: var(--color-content-inverse);
+
+    --http-badge-menu-font-size: 8px;
+    --http-badge-menu-line-height: 14px;
+
+    --spinner-color: var(--color-primary-500);
+
+    --linear-progress-color: var(--color-accent-500);
+    --linear-progress-background-color: var(--color-accent-100);
+
+    /* Floating action button */
+    --fab-color: #0065FB;
+    --fab-background-color: #f2f2f2;
+
+
+    /**
+     * Sidebar
+     * */
+    --sidebar-spacing-unit: 8px;
+    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);
+    --sidebar-padding-horizontal: var(--sidebar-spacing-unit);
+    --sidebar-padding-vertical: var(--sidebar-spacing-unit);
+
+    --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);
+    --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);
+    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);
+    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);
+    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);
+
+    --sidebar-chevron-size: var(--sidebar-spacing-unit);
+    --sidebar-chevron-color: var(--sidebar-text-color);
+
+    --sidebar-border-radius: 4px;
+    --sidebar-background-color: #fff;
+    --sidebar-font-size: var(--font-size-base);
+    --sidebar-font-family: var(--font-family-primary);
+    --sidebar-right-line-color: var(--color-border-light);
+    --sidebar-text-color: var(--color-text-main);
+    --sidebar-text-active-color: var(--sidebar-text-color);
+    --sidebar-text-active-background-color: var(--color-border-light);
+    --sidebar-width: 285px;
+
+    --sidebar-separator-line-color: #dadada;
+    --sidebar-separator-label-color: var(--sidebar-text-color);
+
+    /**
+     * Portal Logo
+     * */
+    --logo-height: 2rem;
+    --logo-margin: var(--sidebar-margin-left);
+
+    /**
+     * Portal Navbar
+     * */
+    --navbar-height: 60px;
+    --navbar-color-text: var(--color-content-inverse);
+    --navbar-color-background: var(--color-primary-500);
+
+    /**
+     * Portal Navbar Item
+     * */
+    --navbar-item-font-size: 16px;
+    --navbar-item-margin-horizontal: 0;
+    --navbar-item-margin-vertical: 0;
+    --navbar-item-border-radius: 10px;
+    --navbar-item-font-weight: var(--font-weight-bold);
+    --navbar-item-active-background-color: #1b75fa;
+    --navbar-item-active-text-color: var(--color-primary-contrast);
+    --navbar-item-active-text-decoration: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --color-content: #f5f7fa;
+      --global-border-color: #4c4c4c;
+      --inline-code-color: #ed8282;
+      --schema-require-label-color: #e55252;
+      --global-background-color: #101010;
+      --sidebar-background-color: #101010;
+      --sidebar-item-active-background-color: #424242;
+      --samples-panel-block-background-color: var(--sidebar-background-color);
+      --color-secondary-200: #1f2933;
+      --color-primary-900: #4892ff;
+      --search-marked-background-color: #707000;
+
+      --response-success-border-color: #3c8d06;
+      --response-success-background-color: #2e7102;
+      --response-error-border-color: #8d5c5c;
+      --response-error-background-color: #802828;
+      --response-redirect-border-color: #ffa500;
+      --response-redirect-background-color: #ffa5001a;
+      --response-info-border-color: #87ceeb;
+      --response-info-background-color: #87ceeb1a;
+
+      --link-color: #4d91ff;
+      --link-hover-color: #3686ff;
+
+      --navbar-color-background: #f2f2f2;
+
+      .search-input {
+        color: var(--color-content);
+      }
+
+      .button-clear {
+        --color-secondary-600: #3e4c59;
+        --color-secondary-400: #1b1b1b;
+      }
+    }
+  }
+`;

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useControl';
+export * from './useMount';
+export * from './useUnmount';

package/src/hooks/useControl.ts

@@ -0,0 +1,20 @@
+import { useState, useCallback } from 'react';
+
+export type UseControlReturnType = {
+  isOpened: boolean;
+  handleOpen: () => void;
+  handleClose: () => void;
+};
+
+export const useControl = (initialVal = false): UseControlReturnType => {
+  const [isOpened, setIsOpened] = useState<boolean>(initialVal);
+
+  const handleOpen = useCallback(() => setIsOpened(true), []);
+  const handleClose = useCallback(() => setIsOpened(false), []);
+
+  return {
+    isOpened,
+    handleOpen,
+    handleClose,
+  };
+};

package/src/hooks/useMount.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+
+export const useMount = (callback: () => void): void => {
+  useEffect(() => {
+    callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/src/hooks/useUnmount.ts

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+
+export const useUnmount = (callback: () => void): void => {
+  useEffect(() => {
+    return () => {
+      callback();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/src/icons/ShelfIcon/ShelfIcon.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Story, ComponentMeta } from '@storybook/react';
+
+import { ShelfIcon, ShelfIconProps } from './ShelfIcon';
+
+export default {
+  title: 'Icons/ShelfIcon',
+  component: ShelfIcon,
+  argTypes: {},
+} as ComponentMeta<typeof ShelfIcon>;
+
+const Template: Story<ShelfIconProps> = (args) => <ShelfIcon {...args} />;
+
+export const Right = Template.bind({});
+Right.args = {
+  direction: 'right',
+  size: '20px',
+};
+
+export const Down = Template.bind({});
+Down.args = {
+  direction: 'down',
+  size: '20px',
+};
+
+export const Left = Template.bind({});
+Left.args = {
+  direction: 'left',
+  size: '20px',
+};
+
+export const Up = Template.bind({});
+Up.args = {
+  direction: 'up',
+  size: '20px',
+};

package/src/icons/ShelfIcon/ShelfIcon.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+
+import { getCssColorVariable } from '../../utils/css-variables';
+
+const directionMap = {
+  right: '0deg',
+  down: '90deg',
+  left: '180deg',
+  up: '270deg',
+};
+
+export interface ShelfIconProps {
+  className?: string;
+  float?: 'left' | 'right';
+  size?: string;
+  color?: string;
+  direction: 'left' | 'right' | 'up' | 'down';
+  style?: React.CSSProperties;
+}
+
+const IntShelfIcon = ({ className, style }: ShelfIconProps): JSX.Element => (
+  <svg
+    className={className}
+    style={style}
+    viewBox="0 0 4.25 7"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z" />
+    <path d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z" />
+  </svg>
+);
+
+export const ShelfIcon = styled(IntShelfIcon)`
+  ${({ size = '9px', float = '', direction, color }) => css`
+    height: ${size};
+    width: ${size};
+    float: ${float};
+    transform: rotateZ(${directionMap[direction]});
+    fill: ${getCssColorVariable(color)};
+  `}
+  vertical-align: middle;
+  transition: transform 0.2s ease-out;
+`;

package/src/icons/ShelfIcon/__tests__/ShelfIcon.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { ShelfIcon } from '../ShelfIcon';
+
+describe('ShelfIcon', () => {
+  it('renders right', () => {
+    const { container } = render(<ShelfIcon direction={'right'} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders left', () => {
+    const { container } = render(<ShelfIcon direction={'left'} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders up', () => {
+    const { container } = render(<ShelfIcon direction={'up'} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders down', () => {
+    const { container } = render(<ShelfIcon direction={'down'} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with float left', () => {
+    const { container } = render(<ShelfIcon direction={'right'} float={'left'} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with float right', () => {
+    const { container } = render(<ShelfIcon direction={'right'} float={'right'} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with big size', () => {
+    const { container } = render(<ShelfIcon direction={'right'} size={'30px'} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with color', () => {
+    const { container } = render(<ShelfIcon direction={'right'} color={'orange'} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});