@redocly/theme 0.1.7 → 0.1.10

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

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavbarLogo renders 1`] = `
+.c0 {
+  max-width: var(--logo-max-width);
+  max-height: var(--logo-max-height);
+  height: var(--logo-height);
+  margin: var(--logo-margin);
+}
+
+<a
+  href="https://test.com/"
+  to="https://test.com/"
+>
+  <img
+    alt="Navbar Logo"
+    class="c0"
+    data-component-name="NavbarLogo/NavbarLogo"
+    src="https://test.com/logo.png"
+  />
+</a>
+`;
+
+exports[`NavbarLogo renders without link 1`] = `
+.c0 {
+  max-width: var(--logo-max-width);
+  max-height: var(--logo-max-height);
+  height: var(--logo-height);
+  margin: var(--logo-margin);
+}
+
+<img
+  alt="Navbar Logo"
+  class="c0"
+  data-component-name="NavbarLogo/NavbarLogo"
+  src="https://test.com/logo.png"
+/>
+`;

package/src/NavbarLogo/index.ts

@@ -0,0 +1 @@
+export * from '@theme/NavbarLogo/NavbarLogo';

package/src/OperationBadge/OperationBadge.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { OperationBadge } from '@theme/OperationBadge';
+
+export default {
+  title: 'Components/OperationBadge',
+  component: OperationBadge,
+  argTypes: {},
+} as ComponentMeta<typeof OperationBadge>;
+
+const Template: ComponentStory<typeof OperationBadge> = (args) => (
+  <OperationBadge {...args}>Default</OperationBadge>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+const TemplateAll: ComponentStory<typeof OperationBadge> = () => (
+  <>
+    <OperationBadge type="get">get</OperationBadge>
+    <OperationBadge type="post">post</OperationBadge>
+    <OperationBadge type="put">put</OperationBadge>
+    <OperationBadge type="delete">delete</OperationBadge>
+    <OperationBadge type="options">options</OperationBadge>
+    <OperationBadge type="patch">patch</OperationBadge>
+    <OperationBadge type="basic">basic</OperationBadge>
+    <OperationBadge type="link">link</OperationBadge>
+    <OperationBadge type="head">head</OperationBadge>
+    <OperationBadge type="hook">hook</OperationBadge>
+  </>
+);
+
+export const All = TemplateAll.bind({});
+All.args = {};

package/src/OperationBadge/OperationBadge.ts

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
+  className: `operation-type ${props.type}`,
+}))<{ type: string }>`
+  display: inline-block;
+  font-size: var(--http-badge-menu-font-size);
+  font-family: var(--http-badge-font-family);
+  font-weight: var(--http-badge-font-weight);
+  line-height: var(--http-badge-menu-line-height);
+  color: var(--http-badge-color);
+  background-color: #333;
+  border-radius: var(--http-badge-border-radius);
+  width: 36px;
+  height: 14px;
+  text-transform: uppercase;
+  text-align: center;
+  margin-right: 6px;
+
+  &.get {
+    background-color: var(--color-http-get);
+  }
+
+  &.post {
+    background-color: var(--color-http-post);
+  }
+
+  &.put {
+    background-color: var(--color-http-put);
+  }
+
+  &.options {
+    background-color: var(--color-http-options);
+  }
+
+  &.patch {
+    background-color: var(--color-http-patch);
+  }
+
+  &.delete {
+    background-color: var(--color-http-delete);
+  }
+
+  &.basic {
+    background-color: var(--color-http-basic);
+  }
+
+  &.link {
+    background-color: var(--color-http-link);
+  }
+
+  &.head {
+    background-color: var(--color-http-head);
+  }
+
+  &.hook {
+    background-color: var(--color-http-hook);
+  }
+`;

package/src/OperationBadge/__tests__/OperationBadge.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { OperationBadge } from '@theme/OperationBadge';
+
+describe('OperationBadge', () => {
+  it('renders basic', () => {
+    const { container } = render(<OperationBadge type={'basic'}>basic</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders get', () => {
+    const { container } = render(<OperationBadge type={'get'}>get</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders post', () => {
+    const { container } = render(<OperationBadge type={'post'}>post</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders put', () => {
+    const { container } = render(<OperationBadge type={'put'}>put</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders delete', () => {
+    const { container } = render(<OperationBadge type={'delete'}>delete</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders options', () => {
+    const { container } = render(<OperationBadge type={'options'}>options</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders patch', () => {
+    const { container } = render(<OperationBadge type={'patch'}>patch</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders link', () => {
+    const { container } = render(<OperationBadge type={'link'}>link</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders head', () => {
+    const { container } = render(<OperationBadge type={'head'}>head</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders hook', () => {
+    const { container } = render(<OperationBadge type={'hook'}>hook</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});