@redocly/theme 0.1.2 → 0.1.5

package/src/Button/Button.stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['small', 'medium', 'large', 'xlarge'],
+    },
+    color: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'default'],
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args}>Click</Button>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  color: 'primary',
+  disabled: false,
+  blinking: false,
+  fullWidth: false,
+  variant: 'contained',
+  size: 'small',
+  extraClass: 'test',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  color: 'secondary',
+  disabled: false,
+  blinking: false,
+  fullWidth: false,
+  variant: 'contained',
+  size: 'small',
+  extraClass: 'test',
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  color: 'primary',
+  disabled: false,
+  blinking: false,
+  fullWidth: false,
+  variant: 'outlined',
+  size: 'small',
+  extraClass: 'test',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  color: 'secondary',
+  disabled: true,
+  blinking: false,
+  fullWidth: false,
+  variant: 'contained',
+  size: 'small',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  color: 'default',
+  disabled: false,
+  blinking: false,
+  fullWidth: false,
+  variant: 'contained',
+  size: 'large',
+};

package/src/Button/Button.tsx

@@ -0,0 +1,122 @@
+import styled, { css, FlattenSimpleInterpolation, keyframes, Keyframes } from 'styled-components';
+
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
+export type ButtonVariant = 'outlined' | 'contained';
+
+export interface ButtonProps {
+  color?: ButtonColor;
+  disabled?: boolean;
+  blinking?: boolean;
+  fullWidth?: boolean;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  extraClass?: string;
+}
+
+const getBlink = (): Keyframes => keyframes`
+  0% {
+    color: var(--button-color);
+    background-color: var(--button-active-background-color);
+  }
+
+  50% {
+    background-color: var(--button-background-color);
+  }
+
+  100% {
+    color: var(--button-color);
+    background-color: var(--button-active-background-color);
+  }
+`;
+
+const getSize = (size: ButtonSize = 'medium'): FlattenSimpleInterpolation => css`
+  font-size: var(--button-${size}-font-size);
+  padding: var(--button-${size}-padding);
+  min-width: var(--button-${size}-min-width);
+`;
+
+export const baseButtonStyles = css`
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+  line-height: 1;
+
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+
+  &:hover {
+    box-shadow: var(--button-active-box-shadow);
+  }
+
+  &:active {
+    box-shadow: var(--button-active-box-shadow);
+  }
+`;
+
+export const Button = styled.button.attrs(({ color = 'default', extraClass }: ButtonProps) => ({
+  className: `button-color-${color}${extraClass ? ` ${extraClass}` : ''}`,
+}))<ButtonProps>`
+  text-decoration: none;
+  text-align: center;
+
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  ${baseButtonStyles}
+
+  ${({ variant }) =>
+    variant === 'outlined'
+      ? css`
+          color: var(--button-background-color);
+          border: 2px solid var(--button-background-color);
+          background-color: transparent;
+          &:hover {
+            border: 2px solid var(--button-active-background-color);
+            background-color: transparent;
+          }
+
+          &:active {
+            border: 2px solid var(--button-outlined-active-border-color);
+          }
+        `
+      : css`
+          color: var(--button-color);
+          background-color: var(--button-background-color);
+          &:hover {
+            background-color: var(--button-hover-background-color);
+          }
+
+          &:active {
+            background-color: var(--button-active-background-color);
+          }
+        `};
+
+  ${({ size }) => getSize(size)}
+
+  & + & {
+    margin-left: 0.85em;
+  }
+
+  ${({ blinking }) =>
+    blinking &&
+    css`
+      pointer-events: none;
+      animation: ${getBlink()} 1.2s infinite;
+    `}
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      &,
+      &:hover {
+        cursor: default;
+        color: #999999;
+        pointer-events: none;
+      }
+    `}
+`;

package/src/Button/__tests__/Button.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Button } from '../Button';
+
+describe('Button', () => {
+  it('renders', () => {
+    const { container } = render(<Button>Test</Button>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders blinking', () => {
+    const { container } = render(<Button blinking>Test</Button>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with extra class', () => {
+    const { container } = render(<Button extraClass="quick-fox">Test</Button>);
+
+    expect(container.firstChild).toHaveClass('quick-fox');
+  });
+
+  it('renders disabled', () => {
+    const { container } = render(<Button disabled>Test</Button>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders full width', () => {
+    const { container } = render(<Button fullWidth>Test</Button>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders outlined', () => {
+    const { container } = render(<Button variant="outlined">Test</Button>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,274 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  font-size: var(--button-medium-font-size);
+  padding: var(--button-medium-padding);
+  min-width: var(--button-medium-min-width);
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  background-color: var(--button-hover-background-color);
+}
+
+.c1:active {
+  background-color: var(--button-active-background-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+<button
+  class="c0 c1 button-color-default"
+>
+  Test
+</button>
+`;
+
+exports[`Button renders blinking 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  font-size: var(--button-medium-font-size);
+  padding: var(--button-medium-padding);
+  min-width: var(--button-medium-min-width);
+  pointer-events: none;
+  -webkit-animation: hiqtTO 1.2s infinite;
+  animation: hiqtTO 1.2s infinite;
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  background-color: var(--button-hover-background-color);
+}
+
+.c1:active {
+  background-color: var(--button-active-background-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+<button
+  class="c0 c1 button-color-default"
+>
+  Test
+</button>
+`;
+
+exports[`Button renders disabled 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  font-size: var(--button-medium-font-size);
+  padding: var(--button-medium-padding);
+  min-width: var(--button-medium-min-width);
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  background-color: var(--button-hover-background-color);
+}
+
+.c1:active {
+  background-color: var(--button-active-background-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+.c1,
+.c1:hover {
+  cursor: default;
+  color: #999999;
+  pointer-events: none;
+}
+
+<button
+  class="c0 c1 button-color-default"
+  disabled=""
+>
+  Test
+</button>
+`;
+
+exports[`Button renders full width 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: 100%;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  font-size: var(--button-medium-font-size);
+  padding: var(--button-medium-padding);
+  min-width: var(--button-medium-min-width);
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  background-color: var(--button-hover-background-color);
+}
+
+.c1:active {
+  background-color: var(--button-active-background-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+<button
+  class="c0 c1 button-color-default"
+>
+  Test
+</button>
+`;
+
+exports[`Button renders outlined 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-background-color);
+  border: 2px solid var(--button-background-color);
+  background-color: transparent;
+  font-size: var(--button-medium-font-size);
+  padding: var(--button-medium-padding);
+  min-width: var(--button-medium-min-width);
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  border: 2px solid var(--button-active-background-color);
+  background-color: transparent;
+}
+
+.c1:active {
+  border: 2px solid var(--button-outlined-active-border-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+<button
+  class="c0 c1 button-color-default"
+>
+  Test
+</button>
+`;

package/src/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

package/src/CodeBlock/CodeBlock.ts

@@ -0,0 +1,125 @@
+import styled from 'styled-components';
+
+export const CodeBlock = styled.div`
+  max-height: var(--code-block-max-height, 600px);
+  word-break: var(--code-block-word-break, initial);
+  /**
+  * Based on prism-dark.css
+  */
+  code[class*='language-'],
+  pre[class*='language-'] {
+    /* color: white;
+    background: none; */
+    text-shadow: 0 -0.1em 0.2em black;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  @media print {
+    code[class*='language-'],
+    pre[class*='language-'] {
+      text-shadow: none;
+    }
+  }
+
+  /* Code blocks */
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: hsl(30, 20%, 50%);
+  }
+
+  .token.punctuation {
+    opacity: 1;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.number,
+  .token.constant,
+  .token.symbol {
+    color: var(--color-content-inverse);
+  }
+
+  .token.boolean {
+    color: var(--color-error-500);
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #fee39e;
+
+    & + a,
+    & + a:visited {
+      color: #4ed2ba;
+      text-decoration: underline;
+    }
+  }
+
+  .token.property.string {
+    color: #9efaa7;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    color: #f5b83d;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #ffdbf4;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.deleted {
+    color: red;
+  }
+`;

package/src/CodeBlock/__tests__/CodeBlock.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { CodeBlock } from '../CodeBlock';
+
+describe('CodeBlock', () => {
+  it('renders', () => {
+    const { container } = render(<CodeBlock>Test</CodeBlock>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});