npm - @redocly/theme - Versions diffs - 0.1.10 → 0.1.13 - Mend

@redocly/theme 0.1.10 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/CodeBlock/CodeBlock.js +2 -1
package/Markdown/StyledMarkdown.d.ts +0 -2
package/Markdown/StyledMarkdown.js +5 -16
package/Markdown/index.d.ts +0 -1
package/Markdown/index.js +0 -1
package/Navbar/NavbarMenu.js +1 -1
package/OperationBadge/OperationBadge.js +1 -1
package/Search/ClearIcon.js +2 -2
package/Search/Input.js +1 -1
package/Search/Popover.js +1 -1
package/Search/SearchIcon.js +2 -2
package/Sidebar/ApiCallItem.js +1 -1
package/TableOfContent/TableOfContent.js +5 -6
package/globalStyle.d.ts +1 -0
package/globalStyle.js +25 -3
package/mocks/Link.js +4 -1
package/mocks/hooks/usePageData.js +4 -1
package/package.json +1 -1
package/src/CodeBlock/CodeBlock.ts +3 -42
package/src/Markdown/StyledMarkdown.tsx +14 -28
package/src/Markdown/index.ts +0 -1
package/src/Navbar/NavbarMenu.tsx +1 -1
package/src/OperationBadge/OperationBadge.ts +5 -2
package/src/Search/ClearIcon.tsx +12 -13
package/src/Search/Input.tsx +7 -7
package/src/Search/Popover.tsx +2 -2
package/src/Search/SearchIcon.tsx +12 -13
package/src/Sidebar/ApiCallItem.tsx +1 -2
package/src/TableOfContent/TableOfContent.tsx +6 -4
package/src/globalStyle.ts +829 -536
package/src/mocks/Link.tsx +5 -2
package/src/mocks/hooks/usePageData.ts +4 -1
package/src/ui/Typography.tsx +12 -89
package/src/ui/UniversalLink.tsx +3 -8
package/src/utils/ClipboardService.ts +3 -86
package/src/utils/isUrl.ts +4 -4
package/src/utils/theme-helpers.ts +46 -0
package/ui/Typography.d.ts +2 -71
package/ui/Typography.js +15 -93
package/ui/UniversalLink.js +1 -5
package/utils/ClipboardService.d.ts +1 -5
package/utils/ClipboardService.js +2 -73
package/utils/isUrl.d.ts +2 -2
package/utils/isUrl.js +4 -4
package/utils/theme-helpers.d.ts +1 -0
package/utils/theme-helpers.js +42 -2
package/Markdown/CodeSample/CodeSample.d.ts +0 -8
package/Markdown/CodeSample/CodeSample.js +0 -30
package/Markdown/CodeSample/index.d.ts +0 -3
package/Markdown/CodeSample/index.js +0 -19
package/Markdown/CodeSample/styled.d.ts +0 -5
package/Markdown/CodeSample/styled.js +0 -109
package/Markdown/CodeSample/types.d.ts +0 -9
package/Markdown/CodeSample/types.js +0 -2
package/src/Button/Button.stories.tsx +0 -74
package/src/Button/__tests__/Button.test.tsx +0 -42
package/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +0 -274
package/src/CodeBlock/__tests__/CodeBlock.test.tsx +0 -12
package/src/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap +0 -140
package/src/CopyButton/CopyButton.stories.tsx +0 -18
package/src/CopyButton/__tests__/CopyButton.test.tsx +0 -35
package/src/CopyButton/__tests__/CopyButtonWrapper.test.tsx +0 -17
package/src/CopyButton/__tests__/__snapshots__/CopyButton.test.tsx.snap +0 -55
package/src/CopyButton/__tests__/__snapshots__/CopyButtonWrapper.test.tsx.snap +0 -46
package/src/Footer/Footer.stories.tsx +0 -57
package/src/Footer/__tests__/Footer.test.tsx +0 -55
package/src/Footer/__tests__/__snapshots__/Footer.test.tsx.snap +0 -253
package/src/Headings/Headings.stories.tsx +0 -36
package/src/Headings/__tests__/Headings.test.tsx +0 -24
package/src/Headings/__tests__/__snapshots__/Headings.test.tsx.snap +0 -57
package/src/JsonViewer/JsonViewer.stories.tsx +0 -57
package/src/JsonViewer/__tests__/JsonViewer.test.tsx +0 -83
package/src/JsonViewer/__tests__/__snapshots__/JsonViewer.test.tsx.snap +0 -2728
package/src/Layout/__tests__/PageLayout.test.tsx +0 -17
package/src/Layout/__tests__/RootLayout.test.tsx +0 -17
package/src/Layout/__tests__/__snapshots__/PageLayout.test.tsx.snap +0 -38
package/src/Layout/__tests__/__snapshots__/RootLayout.test.tsx.snap +0 -18
package/src/Markdown/CodeSample/CodeSample.tsx +0 -39
package/src/Markdown/CodeSample/index.ts +0 -3
package/src/Markdown/CodeSample/styled.ts +0 -289
package/src/Markdown/CodeSample/types.ts +0 -40
package/src/Navbar/Navbar.stories.tsx +0 -32
package/src/NavbarLogo/NavbarLogo.stories.tsx +0 -20
package/src/NavbarLogo/__tests__/NavbarLogo.test.tsx +0 -47
package/src/NavbarLogo/__tests__/__snapshots__/NavbarLogo.test.tsx.snap +0 -38
package/src/OperationBadge/OperationBadge.stories.tsx +0 -35
package/src/OperationBadge/__tests__/OperationBadge.test.tsx +0 -59
package/src/OperationBadge/__tests__/__snapshots__/OperationBadge.test.tsx.snap +0 -651
package/src/Panel/CodePanel.stories.tsx +0 -26
package/src/Panel/ContentPanel.stories.tsx +0 -26
package/src/Panel/Panel.stories.tsx +0 -56
package/src/Panel/__tests__/CodePanel.test.tsx +0 -26
package/src/Panel/__tests__/ContentPanel.test.tsx +0 -26
package/src/Panel/__tests__/Panel.test.tsx +0 -53
package/src/Panel/__tests__/__snapshots__/CodePanel.test.tsx.snap +0 -258
package/src/Panel/__tests__/__snapshots__/ContentPanel.test.tsx.snap +0 -278
package/src/Panel/__tests__/__snapshots__/Panel.test.tsx.snap +0 -398
package/src/SamplesPanelControls/SamplesControlButton.stories.tsx +0 -18
package/src/SamplesPanelControls/__tests__/SamplesPanelControls.test.tsx +0 -36
package/src/SamplesPanelControls/__tests__/__snapshots__/SamplesPanelControls.test.tsx.snap +0 -228
package/src/SidebarLogo/SidebarLogo.stories.tsx +0 -21
package/src/SidebarLogo/__tests__/SidebarLogo.test.tsx +0 -32
package/src/SidebarLogo/__tests__/__snapshots__/SidebarLogo.test.tsx.snap +0 -62
package/src/SourceCode/SourceCode.stories.tsx +0 -29
package/src/SourceCode/__tests__/SourceCode.test.tsx +0 -48
package/src/SourceCode/__tests__/__snapshots__/SourceCode.test.tsx.snap +0 -786
package/src/TableOfContent/TableOfContent.stories.tsx +0 -39
package/src/Tooltip/Tooltip.stories.tsx +0 -27
package/src/Tooltip/__tests__/Tooltip.test.tsx +0 -41
package/src/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap +0 -83
package/src/Welcome.stories.mdx +0 -7
package/src/icons/ShelfIcon/ShelfIcon.stories.tsx +0 -36
package/src/icons/ShelfIcon/__tests__/ShelfIcon.test.tsx +0 -54
package/src/icons/ShelfIcon/__tests__/__snapshots__/ShelfIcon.test.tsx.snap +0 -235
package/src/utils/__tests__/ClipboardService.test.ts +0 -24
package/src/utils/__tests__/__snapshots__/highlight.test.ts.snap +0 -5
package/src/utils/__tests__/__snapshots__/jsonToHtml.test.ts.snap +0 -5
package/src/utils/__tests__/css-variables.test.ts +0 -20
package/src/utils/__tests__/highlight.test.ts +0 -51
package/src/utils/__tests__/jsonToHtml.test.ts +0 -40
package/src/utils/__tests__/media-css.test.ts +0 -20
package/src/utils/__tests__/theme-helpers.test.ts +0 -25

package/src/OperationBadge/__tests__/__snapshots__/OperationBadge.test.tsx.snap DELETED Viewed

@@ -1,651 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`OperationBadge renders basic 1`] = `
-.c0 {
-  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;
-}
-.c0.get {
-  background-color: var(--color-http-get);
-}
-.c0.post {
-  background-color: var(--color-http-post);
-}
-.c0.put {
-  background-color: var(--color-http-put);
-}
-.c0.options {
-  background-color: var(--color-http-options);
-}
-.c0.patch {
-  background-color: var(--color-http-patch);
-}
-.c0.delete {
-  background-color: var(--color-http-delete);
-}
-.c0.basic {
-  background-color: var(--color-http-basic);
-}
-.c0.link {
-  background-color: var(--color-http-link);
-}
-.c0.head {
-  background-color: var(--color-http-head);
-}
-.c0.hook {
-  background-color: var(--color-http-hook);
-}
-<span
-  class="c0 operation-type basic"
-  type="basic"
->
-  basic
-</span>
-`;
-exports[`OperationBadge renders delete 1`] = `
-.c0 {
-  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;
-}
-.c0.get {
-  background-color: var(--color-http-get);
-}
-.c0.post {
-  background-color: var(--color-http-post);
-}
-.c0.put {
-  background-color: var(--color-http-put);
-}
-.c0.options {
-  background-color: var(--color-http-options);
-}
-.c0.patch {
-  background-color: var(--color-http-patch);
-}
-.c0.delete {
-  background-color: var(--color-http-delete);
-}
-.c0.basic {
-  background-color: var(--color-http-basic);
-}
-.c0.link {
-  background-color: var(--color-http-link);
-}
-.c0.head {
-  background-color: var(--color-http-head);
-}
-.c0.hook {
-  background-color: var(--color-http-hook);
-}
-<span
-  class="c0 operation-type delete"
-  type="delete"
->
-  delete
-</span>
-`;
-exports[`OperationBadge renders get 1`] = `
-.c0 {
-  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;
-}
-.c0.get {
-  background-color: var(--color-http-get);
-}
-.c0.post {
-  background-color: var(--color-http-post);
-}
-.c0.put {
-  background-color: var(--color-http-put);
-}
-.c0.options {
-  background-color: var(--color-http-options);
-}
-.c0.patch {
-  background-color: var(--color-http-patch);
-}
-.c0.delete {
-  background-color: var(--color-http-delete);
-}
-.c0.basic {
-  background-color: var(--color-http-basic);
-}
-.c0.link {
-  background-color: var(--color-http-link);
-}
-.c0.head {
-  background-color: var(--color-http-head);
-}
-.c0.hook {
-  background-color: var(--color-http-hook);
-}
-<span
-  class="c0 operation-type get"
-  type="get"
->
-  get
-</span>
-`;
-exports[`OperationBadge renders head 1`] = `
-.c0 {
-  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;
-}
-.c0.get {
-  background-color: var(--color-http-get);
-}
-.c0.post {
-  background-color: var(--color-http-post);
-}
-.c0.put {
-  background-color: var(--color-http-put);
-}
-.c0.options {
-  background-color: var(--color-http-options);
-}
-.c0.patch {
-  background-color: var(--color-http-patch);
-}
-.c0.delete {
-  background-color: var(--color-http-delete);
-}
-.c0.basic {
-  background-color: var(--color-http-basic);
-}
-.c0.link {
-  background-color: var(--color-http-link);
-}
-.c0.head {
-  background-color: var(--color-http-head);
-}
-.c0.hook {
-  background-color: var(--color-http-hook);
-}
-<span
-  class="c0 operation-type head"
-  type="head"
->
-  head
-</span>
-`;
-exports[`OperationBadge renders hook 1`] = `
-.c0 {
-  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;
-}
-.c0.get {
-  background-color: var(--color-http-get);
-}
-.c0.post {
-  background-color: var(--color-http-post);
-}
-.c0.put {
-  background-color: var(--color-http-put);
-}
-.c0.options {
-  background-color: var(--color-http-options);
-}
-.c0.patch {
-  background-color: var(--color-http-patch);
-}
-.c0.delete {
-  background-color: var(--color-http-delete);
-}
-.c0.basic {
-  background-color: var(--color-http-basic);
-}
-.c0.link {
-  background-color: var(--color-http-link);
-}
-.c0.head {
-  background-color: var(--color-http-head);
-}
-.c0.hook {
-  background-color: var(--color-http-hook);
-}
-<span
-  class="c0 operation-type hook"
-  type="hook"
->
-  hook
-</span>
-`;
-exports[`OperationBadge renders link 1`] = `
-.c0 {
-  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;
-}
-.c0.get {
-  background-color: var(--color-http-get);
-}
-.c0.post {
-  background-color: var(--color-http-post);
-}
-.c0.put {
-  background-color: var(--color-http-put);
-}
-.c0.options {
-  background-color: var(--color-http-options);
-}
-.c0.patch {
-  background-color: var(--color-http-patch);
-}
-.c0.delete {
-  background-color: var(--color-http-delete);
-}
-.c0.basic {
-  background-color: var(--color-http-basic);
-}
-.c0.link {
-  background-color: var(--color-http-link);
-}
-.c0.head {
-  background-color: var(--color-http-head);
-}
-.c0.hook {
-  background-color: var(--color-http-hook);
-}
-<span
-  class="c0 operation-type link"
-  type="link"
->
-  link
-</span>
-`;
-exports[`OperationBadge renders options 1`] = `
-.c0 {
-  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;
-}
-.c0.get {
-  background-color: var(--color-http-get);
-}
-.c0.post {
-  background-color: var(--color-http-post);
-}
-.c0.put {
-  background-color: var(--color-http-put);
-}
-.c0.options {
-  background-color: var(--color-http-options);
-}
-.c0.patch {
-  background-color: var(--color-http-patch);
-}
-.c0.delete {
-  background-color: var(--color-http-delete);
-}
-.c0.basic {
-  background-color: var(--color-http-basic);
-}
-.c0.link {
-  background-color: var(--color-http-link);
-}
-.c0.head {
-  background-color: var(--color-http-head);
-}
-.c0.hook {
-  background-color: var(--color-http-hook);
-}
-<span
-  class="c0 operation-type options"
-  type="options"
->
-  options
-</span>
-`;
-exports[`OperationBadge renders patch 1`] = `
-.c0 {
-  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;
-}
-.c0.get {
-  background-color: var(--color-http-get);
-}
-.c0.post {
-  background-color: var(--color-http-post);
-}
-.c0.put {
-  background-color: var(--color-http-put);
-}
-.c0.options {
-  background-color: var(--color-http-options);
-}
-.c0.patch {
-  background-color: var(--color-http-patch);
-}
-.c0.delete {
-  background-color: var(--color-http-delete);
-}
-.c0.basic {
-  background-color: var(--color-http-basic);
-}
-.c0.link {
-  background-color: var(--color-http-link);
-}
-.c0.head {
-  background-color: var(--color-http-head);
-}
-.c0.hook {
-  background-color: var(--color-http-hook);
-}
-<span
-  class="c0 operation-type patch"
-  type="patch"
->
-  patch
-</span>
-`;
-exports[`OperationBadge renders post 1`] = `
-.c0 {
-  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;
-}
-.c0.get {
-  background-color: var(--color-http-get);
-}
-.c0.post {
-  background-color: var(--color-http-post);
-}
-.c0.put {
-  background-color: var(--color-http-put);
-}
-.c0.options {
-  background-color: var(--color-http-options);
-}
-.c0.patch {
-  background-color: var(--color-http-patch);
-}
-.c0.delete {
-  background-color: var(--color-http-delete);
-}
-.c0.basic {
-  background-color: var(--color-http-basic);
-}
-.c0.link {
-  background-color: var(--color-http-link);
-}
-.c0.head {
-  background-color: var(--color-http-head);
-}
-.c0.hook {
-  background-color: var(--color-http-hook);
-}
-<span
-  class="c0 operation-type post"
-  type="post"
->
-  post
-</span>
-`;
-exports[`OperationBadge renders put 1`] = `
-.c0 {
-  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;
-}
-.c0.get {
-  background-color: var(--color-http-get);
-}
-.c0.post {
-  background-color: var(--color-http-post);
-}
-.c0.put {
-  background-color: var(--color-http-put);
-}
-.c0.options {
-  background-color: var(--color-http-options);
-}
-.c0.patch {
-  background-color: var(--color-http-patch);
-}
-.c0.delete {
-  background-color: var(--color-http-delete);
-}
-.c0.basic {
-  background-color: var(--color-http-basic);
-}
-.c0.link {
-  background-color: var(--color-http-link);
-}
-.c0.head {
-  background-color: var(--color-http-head);
-}
-.c0.hook {
-  background-color: var(--color-http-hook);
-}
-<span
-  class="c0 operation-type put"
-  type="put"
->
-  put
-</span>
-`;

package/src/Panel/CodePanel.stories.tsx DELETED Viewed

@@ -1,26 +0,0 @@
-import React, { JSXElementConstructor } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { PanelComponentProps, CodePanel } from '@theme/Panel';
-export default {
-  title: 'Components/Panels/CodePanel',
-  component: CodePanel,
-} as ComponentMeta<typeof CodePanel>;
-// TODO: find the way to avoid using JSXElementConstructor<PanelComponentProps> and fix types for ComponentStory<typeof CodePanel>
-const Template: ComponentStory<JSXElementConstructor<PanelComponentProps>> = (args) => (
-  <CodePanel {...args}>Code Panel body</CodePanel>
-);
-export const Collapsed = Template.bind({});
-Collapsed.args = {
-  header: 'Code Panel header',
-  expanded: false,
-};
-export const Expanded = Template.bind({});
-Expanded.args = {
-  header: 'Code Panel header',
-  expanded: true,
-};

package/src/Panel/ContentPanel.stories.tsx DELETED Viewed

@@ -1,26 +0,0 @@
-import React, { JSXElementConstructor } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { ContentPanel, PanelComponentProps } from '@theme/Panel';
-export default {
-  title: 'Components/Panels/ContentPanel',
-  component: ContentPanel,
-} as ComponentMeta<typeof ContentPanel>;
-// TODO: find the way to avoid using JSXElementConstructor<PanelComponentProps> and fix types for ComponentStory<typeof CodePanel>
-const Template: ComponentStory<JSXElementConstructor<PanelComponentProps>> = (args) => (
-  <ContentPanel {...args}>Content Panel Body</ContentPanel>
-);
-export const Collapsed = Template.bind({});
-Collapsed.args = {
-  header: 'Content Panel Header',
-  expanded: false,
-};
-export const Expanded = Template.bind({});
-Expanded.args = {
-  header: 'Content Panel Header',
-  expanded: true,
-};