@redocly/theme 0.1.0 → 0.1.3

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

@@ -0,0 +1,786 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SourceCode renders with copy button 1`] = `
+.c5 {
+  background-color: var(--samples-panel-controls-background-color);
+  border: 0;
+  outline: 0;
+  border-radius: var(--global-border-radius);
+  height: 20px;
+  color: var(--color-content-inverse);
+  font-size: 12px;
+  line-height: 12px;
+  cursor: pointer;
+  padding: 1px 6px;
+  min-width: 90px;
+}
+
+.c5:hover,
+.c5:focus {
+  background-color: var(--samples-panel-controls-hover-background-color);
+}
+
+.c2 {
+  padding: 10px 0;
+  opacity: 0.7;
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+  text-align: right;
+}
+
+.c2:focus-within {
+  opacity: 1;
+}
+
+.c2 > div,
+.c2 > .c4 {
+  margin-top: 5px;
+  margin-left: 10px;
+}
+
+.c2 > div:first-child,
+.c2 > .c4:first-child {
+  margin-left: 0;
+}
+
+.c0:hover .c1 {
+  opacity: 1;
+}
+
+.c6 {
+  max-height: var(--code-block-max-height,600px);
+  word-break: var(--code-block-word-break,initial);
+}
+
+.c6 code[class*='language-'],
+.c6 pre[class*='language-'] {
+  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;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.c6 pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+.c6 .token.comment,
+.c6 .token.prolog,
+.c6 .token.doctype,
+.c6 .token.cdata {
+  color: hsl(30,20%,50%);
+}
+
+.c6 .token.punctuation {
+  opacity: 1;
+}
+
+.c6 .namespace {
+  opacity: 0.7;
+}
+
+.c6 .token.property,
+.c6 .token.tag,
+.c6 .token.number,
+.c6 .token.constant,
+.c6 .token.symbol {
+  color: var(--color-content-inverse);
+}
+
+.c6 .token.boolean {
+  color: var(--color-error-500);
+}
+
+.c6 .token.selector,
+.c6 .token.attr-name,
+.c6 .token.string,
+.c6 .token.char,
+.c6 .token.builtin,
+.c6 .token.inserted {
+  color: #fee39e;
+}
+
+.c6 .token.selector + a,
+.c6 .token.attr-name + a,
+.c6 .token.string + a,
+.c6 .token.char + a,
+.c6 .token.builtin + a,
+.c6 .token.inserted + a,
+.c6 .token.selector + a:visited,
+.c6 .token.attr-name + a:visited,
+.c6 .token.string + a:visited,
+.c6 .token.char + a:visited,
+.c6 .token.builtin + a:visited,
+.c6 .token.inserted + a:visited {
+  color: #4ed2ba;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c6 .token.property.string {
+  color: #9efaa7;
+}
+
+.c6 .token.operator,
+.c6 .token.entity,
+.c6 .token.url,
+.c6 .token.variable {
+  color: #f5b83d;
+}
+
+.c6 .token.atrule,
+.c6 .token.attr-value,
+.c6 .token.keyword {
+  color: #ffdbf4;
+}
+
+.c6 .token.regex,
+.c6 .token.important {
+  color: #e90;
+}
+
+.c6 .token.important,
+.c6 .token.bold {
+  font-weight: bold;
+}
+
+.c6 .token.italic {
+  font-style: italic;
+}
+
+.c6 .token.entity {
+  cursor: help;
+}
+
+.c6 .token.deleted {
+  color: red;
+}
+
+.c7 {
+  overflow-x: auto;
+  margin: 0;
+  font-family: var(--code-font-family);
+  padding: 20px;
+  border-radius: var(--global-border-radius);
+  background-color: var(--samples-panel-controls-background-color);
+  color: var(--color-content-inverse);
+  font-size: var(--code-font-size);
+  white-space: var(--code-wrap,pre);
+}
+
+.c3 {
+  position: relative;
+  display: inline-block;
+}
+
+@media screen and (min-width:50rem) {
+  .c5 {
+    padding: 2px 20px;
+  }
+}
+
+@media screen and (min-width:50rem) {
+  .c2 > div,
+  .c2 > .c4 {
+    margin-top: 0;
+  }
+}
+
+@media print {
+  .c6 code[class*='language-'],
+  .c6 pre[class*='language-'] {
+    text-shadow: none;
+  }
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1 c2"
+    data-cy="copy-button"
+  >
+    <div
+      class="c3 tooltip-copy-button"
+    >
+      <button
+        class="c4 c5"
+        data-cy="copy-button"
+      >
+        Copy
+      </button>
+    </div>
+  </div>
+  <pre
+    class="c6 c7"
+    data-cy="with-copy-button"
+  >
+    <span
+      class="token keyword"
+    >
+      let
+    </span>
+     count 
+    <span
+      class="token operator"
+    >
+      =
+    </span>
+     
+    <span
+      class="token number"
+    >
+      1
+    </span>
+    <span
+      class="token punctuation"
+    >
+      ;
+    </span>
+     count
+    <span
+      class="token operator"
+    >
+      ++
+    </span>
+    <span
+      class="token punctuation"
+    >
+      ;
+    </span>
+  </pre>
+</div>
+`;
+
+exports[`SourceCode renders with external source 1`] = `
+.c0 {
+  max-height: var(--code-block-max-height,600px);
+  word-break: var(--code-block-word-break,initial);
+}
+
+.c0 code[class*='language-'],
+.c0 pre[class*='language-'] {
+  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;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.c0 pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+.c0 .token.comment,
+.c0 .token.prolog,
+.c0 .token.doctype,
+.c0 .token.cdata {
+  color: hsl(30,20%,50%);
+}
+
+.c0 .token.punctuation {
+  opacity: 1;
+}
+
+.c0 .namespace {
+  opacity: 0.7;
+}
+
+.c0 .token.property,
+.c0 .token.tag,
+.c0 .token.number,
+.c0 .token.constant,
+.c0 .token.symbol {
+  color: var(--color-content-inverse);
+}
+
+.c0 .token.boolean {
+  color: var(--color-error-500);
+}
+
+.c0 .token.selector,
+.c0 .token.attr-name,
+.c0 .token.string,
+.c0 .token.char,
+.c0 .token.builtin,
+.c0 .token.inserted {
+  color: #fee39e;
+}
+
+.c0 .token.selector + a,
+.c0 .token.attr-name + a,
+.c0 .token.string + a,
+.c0 .token.char + a,
+.c0 .token.builtin + a,
+.c0 .token.inserted + a,
+.c0 .token.selector + a:visited,
+.c0 .token.attr-name + a:visited,
+.c0 .token.string + a:visited,
+.c0 .token.char + a:visited,
+.c0 .token.builtin + a:visited,
+.c0 .token.inserted + a:visited {
+  color: #4ed2ba;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 .token.property.string {
+  color: #9efaa7;
+}
+
+.c0 .token.operator,
+.c0 .token.entity,
+.c0 .token.url,
+.c0 .token.variable {
+  color: #f5b83d;
+}
+
+.c0 .token.atrule,
+.c0 .token.attr-value,
+.c0 .token.keyword {
+  color: #ffdbf4;
+}
+
+.c0 .token.regex,
+.c0 .token.important {
+  color: #e90;
+}
+
+.c0 .token.important,
+.c0 .token.bold {
+  font-weight: bold;
+}
+
+.c0 .token.italic {
+  font-style: italic;
+}
+
+.c0 .token.entity {
+  cursor: help;
+}
+
+.c0 .token.deleted {
+  color: red;
+}
+
+.c1 {
+  overflow-x: auto;
+  margin: 0;
+  font-family: var(--code-font-family);
+  padding: 20px;
+  border-radius: var(--global-border-radius);
+  background-color: var(--samples-panel-controls-background-color);
+  color: var(--color-content-inverse);
+  font-size: var(--code-font-size);
+  white-space: var(--code-wrap,pre);
+}
+
+@media print {
+  .c0 code[class*='language-'],
+  .c0 pre[class*='language-'] {
+    text-shadow: none;
+  }
+}
+
+<pre
+  class="c0 c1"
+  data-cy="with-external-source"
+>
+  <span
+    class="token keyword"
+  >
+    let
+  </span>
+   count 
+  <span
+    class="token operator"
+  >
+    =
+  </span>
+   
+  <span
+    class="token number"
+  >
+    1
+  </span>
+  <span
+    class="token punctuation"
+  >
+    ;
+  </span>
+   count
+  <span
+    class="token operator"
+  >
+    ++
+  </span>
+  <span
+    class="token punctuation"
+  >
+    ;
+  </span>
+</pre>
+`;
+
+exports[`SourceCode renders with external source when it returns null 1`] = `
+.c0 {
+  max-height: var(--code-block-max-height,600px);
+  word-break: var(--code-block-word-break,initial);
+}
+
+.c0 code[class*='language-'],
+.c0 pre[class*='language-'] {
+  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;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.c0 pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+.c0 .token.comment,
+.c0 .token.prolog,
+.c0 .token.doctype,
+.c0 .token.cdata {
+  color: hsl(30,20%,50%);
+}
+
+.c0 .token.punctuation {
+  opacity: 1;
+}
+
+.c0 .namespace {
+  opacity: 0.7;
+}
+
+.c0 .token.property,
+.c0 .token.tag,
+.c0 .token.number,
+.c0 .token.constant,
+.c0 .token.symbol {
+  color: var(--color-content-inverse);
+}
+
+.c0 .token.boolean {
+  color: var(--color-error-500);
+}
+
+.c0 .token.selector,
+.c0 .token.attr-name,
+.c0 .token.string,
+.c0 .token.char,
+.c0 .token.builtin,
+.c0 .token.inserted {
+  color: #fee39e;
+}
+
+.c0 .token.selector + a,
+.c0 .token.attr-name + a,
+.c0 .token.string + a,
+.c0 .token.char + a,
+.c0 .token.builtin + a,
+.c0 .token.inserted + a,
+.c0 .token.selector + a:visited,
+.c0 .token.attr-name + a:visited,
+.c0 .token.string + a:visited,
+.c0 .token.char + a:visited,
+.c0 .token.builtin + a:visited,
+.c0 .token.inserted + a:visited {
+  color: #4ed2ba;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 .token.property.string {
+  color: #9efaa7;
+}
+
+.c0 .token.operator,
+.c0 .token.entity,
+.c0 .token.url,
+.c0 .token.variable {
+  color: #f5b83d;
+}
+
+.c0 .token.atrule,
+.c0 .token.attr-value,
+.c0 .token.keyword {
+  color: #ffdbf4;
+}
+
+.c0 .token.regex,
+.c0 .token.important {
+  color: #e90;
+}
+
+.c0 .token.important,
+.c0 .token.bold {
+  font-weight: bold;
+}
+
+.c0 .token.italic {
+  font-style: italic;
+}
+
+.c0 .token.entity {
+  cursor: help;
+}
+
+.c0 .token.deleted {
+  color: red;
+}
+
+.c1 {
+  overflow-x: auto;
+  margin: 0;
+  font-family: var(--code-font-family);
+  padding: 20px;
+  border-radius: var(--global-border-radius);
+  background-color: var(--samples-panel-controls-background-color);
+  color: var(--color-content-inverse);
+  font-size: var(--code-font-size);
+  white-space: var(--code-wrap,pre);
+}
+
+@media print {
+  .c0 code[class*='language-'],
+  .c0 pre[class*='language-'] {
+    text-shadow: none;
+  }
+}
+
+<pre
+  class="c0 c1"
+  data-cy="source-code"
+/>
+`;
+
+exports[`SourceCode renders without copy button 1`] = `
+.c0 {
+  max-height: var(--code-block-max-height,600px);
+  word-break: var(--code-block-word-break,initial);
+}
+
+.c0 code[class*='language-'],
+.c0 pre[class*='language-'] {
+  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;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.c0 pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+.c0 .token.comment,
+.c0 .token.prolog,
+.c0 .token.doctype,
+.c0 .token.cdata {
+  color: hsl(30,20%,50%);
+}
+
+.c0 .token.punctuation {
+  opacity: 1;
+}
+
+.c0 .namespace {
+  opacity: 0.7;
+}
+
+.c0 .token.property,
+.c0 .token.tag,
+.c0 .token.number,
+.c0 .token.constant,
+.c0 .token.symbol {
+  color: var(--color-content-inverse);
+}
+
+.c0 .token.boolean {
+  color: var(--color-error-500);
+}
+
+.c0 .token.selector,
+.c0 .token.attr-name,
+.c0 .token.string,
+.c0 .token.char,
+.c0 .token.builtin,
+.c0 .token.inserted {
+  color: #fee39e;
+}
+
+.c0 .token.selector + a,
+.c0 .token.attr-name + a,
+.c0 .token.string + a,
+.c0 .token.char + a,
+.c0 .token.builtin + a,
+.c0 .token.inserted + a,
+.c0 .token.selector + a:visited,
+.c0 .token.attr-name + a:visited,
+.c0 .token.string + a:visited,
+.c0 .token.char + a:visited,
+.c0 .token.builtin + a:visited,
+.c0 .token.inserted + a:visited {
+  color: #4ed2ba;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 .token.property.string {
+  color: #9efaa7;
+}
+
+.c0 .token.operator,
+.c0 .token.entity,
+.c0 .token.url,
+.c0 .token.variable {
+  color: #f5b83d;
+}
+
+.c0 .token.atrule,
+.c0 .token.attr-value,
+.c0 .token.keyword {
+  color: #ffdbf4;
+}
+
+.c0 .token.regex,
+.c0 .token.important {
+  color: #e90;
+}
+
+.c0 .token.important,
+.c0 .token.bold {
+  font-weight: bold;
+}
+
+.c0 .token.italic {
+  font-style: italic;
+}
+
+.c0 .token.entity {
+  cursor: help;
+}
+
+.c0 .token.deleted {
+  color: red;
+}
+
+.c1 {
+  overflow-x: auto;
+  margin: 0;
+  font-family: var(--code-font-family);
+  padding: 20px;
+  border-radius: var(--global-border-radius);
+  background-color: var(--samples-panel-controls-background-color);
+  color: var(--color-content-inverse);
+  font-size: var(--code-font-size);
+  white-space: var(--code-wrap,pre);
+}
+
+@media print {
+  .c0 code[class*='language-'],
+  .c0 pre[class*='language-'] {
+    text-shadow: none;
+  }
+}
+
+<pre
+  class="c0 c1"
+  data-cy="without-copy-button"
+>
+  <span
+    class="token keyword"
+  >
+    let
+  </span>
+   count 
+  <span
+    class="token operator"
+  >
+    =
+  </span>
+   
+  <span
+    class="token number"
+  >
+    1
+  </span>
+  <span
+    class="token punctuation"
+  >
+    ;
+  </span>
+   count
+  <span
+    class="token operator"
+  >
+    ++
+  </span>
+  <span
+    class="token punctuation"
+  >
+    ;
+  </span>
+</pre>
+`;