@redocly/theme 0.1.11 → 0.1.14

package/utils/ClipboardService.js

@@ -5,81 +5,10 @@ var ClipboardService = /** @class */ (function () {
     function ClipboardService() {
     }
     ClipboardService.isSupported = function () {
-        return (typeof document !== 'undefined' &&
-            !!document.queryCommandSupported &&
-            document.queryCommandSupported('copy'));
-    };
-    ClipboardService.selectElement = function (element) {
-        if (!element) {
-            return;
-        }
-        var range;
-        var selection;
-        if (document.body.createTextRange) {
-            range = document.body.createTextRange();
-            range.moveToElementText(element);
-            range.select();
-        }
-        else if (document.createRange && window.getSelection) {
-            selection = window.getSelection();
-            range = document.createRange();
-            range.selectNodeContents(element);
-            selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
-            selection === null || selection === void 0 ? void 0 : selection.addRange(range);
-        }
-    };
-    ClipboardService.deselect = function () {
-        if (document.selection) {
-            document.selection.empty();
-        }
-        else if (window.getSelection) {
-            var selection = window.getSelection();
-            if (selection) {
-                selection.removeAllRanges();
-            }
-        }
-    };
-    ClipboardService.copySelected = function () {
-        var result;
-        try {
-            result = document.execCommand('copy');
-        }
-        catch (err) {
-            result = false;
-        }
-        return result;
-    };
-    ClipboardService.copyElement = function (element) {
-        ClipboardService.selectElement(element);
-        var res = ClipboardService.copySelected();
-        if (res) {
-            ClipboardService.deselect();
-        }
-        return res;
+        return typeof (navigator === null || navigator === void 0 ? void 0 : navigator.clipboard) !== 'undefined';
     };
     ClipboardService.copyCustom = function (text) {
-        var textArea = document.createElement('textarea');
-        textArea.style.position = 'fixed';
-        textArea.style.top = '0';
-        textArea.style.left = '0';
-        // Ensure it has a small width and height. Setting to 1px / 1em
-        // doesn't work as this gives a negative w/h on some browsers.
-        textArea.style.width = '2em';
-        textArea.style.height = '2em';
-        // We don't need padding, reducing the size if it does flash render.
-        textArea.style.padding = '0';
-        // Clean up any borders.
-        textArea.style.border = 'none';
-        textArea.style.outline = 'none';
-        textArea.style.boxShadow = 'none';
-        // Avoid flash of white box if rendered for any reason.
-        textArea.style.background = 'transparent';
-        textArea.value = text;
-        document.body.appendChild(textArea);
-        textArea.select();
-        var res = ClipboardService.copySelected();
-        document.body.removeChild(textArea);
-        return res;
+        return navigator.clipboard.writeText(text);
     };
     return ClipboardService;
 }());

package/utils/isUrl.d.ts

@@ -6,7 +6,7 @@
 /**
  * Loosely validate a URL `string`.
  *
- * @param {String} string
+ * @param {String} input
  * @return {Boolean}
  */
-export declare function isUrl(string: string): boolean;
+export declare function isUrl(input: unknown): boolean;

package/utils/isUrl.js

@@ -12,14 +12,14 @@ var nonLocalhostDomainRE = /^[^\s.]+\.\S{2,}$/;
 /**
  * Loosely validate a URL `string`.
  *
- * @param {String} string
+ * @param {String} input
  * @return {Boolean}
  */
-function isUrl(string) {
-    if (typeof string !== 'string') {
+function isUrl(input) {
+    if (typeof input !== 'string') {
         return false;
     }
-    var match = string.match(protocolAndDomainRE);
+    var match = input.match(protocolAndDomainRE);
     if (!match) {
         return false;
     }

package/utils/theme-helpers.d.ts

@@ -1,3 +1,4 @@
 import type { FlattenSimpleInterpolation } from 'styled-components';
 export declare function getTypographyCssRulesByComponentName(componentName: string, fallbackName?: string): Record<string, string>;
 export declare function typography(componentName: string, fallbackName?: string): FlattenSimpleInterpolation;
+export declare function generateCodeBlockTokens(): FlattenSimpleInterpolation | string;

package/utils/theme-helpers.js

@@ -4,8 +4,38 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.typography = exports.getTypographyCssRulesByComponentName = void 0;
+exports.generateCodeBlockTokens = exports.typography = exports.getTypographyCssRulesByComponentName = void 0;
 var styled_components_1 = require("styled-components");
+var Token;
+(function (Token) {
+    Token["Comment"] = "comment";
+    Token["Prolog"] = "prolog";
+    Token["Doctype"] = "doctype";
+    Token["Cdata"] = "cdata";
+    Token["Punctuation"] = "punctuation";
+    Token["property"] = "property";
+    Token["Tag"] = "tag";
+    Token["Number"] = "number";
+    Token["Constant"] = "constant";
+    Token["Symbol"] = "symbol";
+    Token["Boolean"] = "boolean";
+    Token["Selector"] = "selector";
+    Token["String"] = "string";
+    Token["Char"] = "char";
+    Token["Builtin"] = "builtin";
+    Token["Inserted"] = "inserted";
+    Token["Operator"] = "operator";
+    Token["Entity"] = "entity";
+    Token["Url"] = "url";
+    Token["Variable"] = "variable";
+    Token["Atrule"] = "atrule";
+    Token["Keyword"] = "keyword";
+    Token["Regex"] = "regex";
+    Token["Important"] = "important";
+    Token["Bold"] = "bold";
+    Token["Italic"] = "italic";
+    Token["Deleted"] = "deleted";
+})(Token || (Token = {}));
 var typographyProperties = Object.entries({
     fontSize: 'font-size',
     fontWeight: 'font-weight',
@@ -29,4 +59,14 @@ function typography(componentName, fallbackName) {
     return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), getTypographyCssRulesByComponentName(componentName, fallbackName));
 }
 exports.typography = typography;
-var templateObject_1;
+function generateCodeBlockTokens() {
+    var res = '';
+    for (var _i = 0, _a = Object.values(Token); _i < _a.length; _i++) {
+        var token = _a[_i];
+        var cssTokenColorVariableName = "--code-block-tokens-".concat(token, "-color");
+        res += ".token.".concat(token, " { color: var(").concat(cssTokenColorVariableName, ")}; }\n");
+    }
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    pre& {\n      color: var(--code-block-tokens-default-color);\n    }\n    ", "\n  "], ["\n    pre& {\n      color: var(--code-block-tokens-default-color);\n    }\n    ", "\n  "])), res);
+}
+exports.generateCodeBlockTokens = generateCodeBlockTokens;
+var templateObject_1, templateObject_2;

package/Markdown/CodeSample/types.d.ts

@@ -1,9 +0,0 @@
-import { ITypography } from '../../ui/Typography';
-export declare type Token = 'comment' | 'prolog' | 'doctype' | 'cdata' | 'punctuation' | 'property' | 'tag' | 'number' | 'constant' | 'symbol' | 'boolean' | 'selector' | 'string' | 'char' | 'builtin' | 'inserted' | 'operator' | 'entity' | 'url' | 'variable' | 'atrule' | 'keyword' | 'regex' | 'important' | 'important' | 'bold' | 'italic' | 'entity' | 'deleted';
-export declare type Tokens = {
-    [P in Token]?: {
-        color: string;
-    };
-} & {
-    default?: ITypography;
-};

package/Markdown/CodeSample/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/src/Button/Button.stories.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Button } from '@theme/Button';
-
-export default {
-  title: 'Components/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/__tests__/Button.test.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { Button } from '@theme/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

@@ -1,274 +0,0 @@
-// 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/CodeBlock/__tests__/CodeBlock.test.tsx

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