@redocly/theme 0.1.0 → 0.1.3

package/src/Panel/__tests__/__snapshots__/ContentPanel.test.tsx.snap

@@ -0,0 +1,278 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentPanel renders collapsed 1`] = `
+.c8 {
+  height: 9px;
+  width: 9px;
+  -webkit-transform: rotateZ(0deg);
+  -ms-transform: rotateZ(0deg);
+  transform: rotateZ(0deg);
+  fill: inherit;
+  vertical-align: middle;
+  -webkit-transition: -webkit-transform 0.2s ease-out;
+  -webkit-transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+}
+
+.c6 {
+  line-height: 1;
+  margin-right: 5px;
+  font-weight: 700;
+  color: var(--color-content);
+}
+
+.c3 {
+  position: relative;
+  z-index: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  white-space: nowrap;
+  cursor: pointer;
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  pointer-events: auto;
+}
+
+.c4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 {
+  border-radius: var(--panels-border-radius);
+}
+
+.c0:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.c1 {
+  border: 1px solid var(--global-border-color);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+}
+
+.c1:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.c1 > .c2 {
+  padding: calc(var(--spacing-unit) * 4);
+  font-size: 18px;
+  font-weight: var(--font-weight-bold);
+  background-color: var(--panels-background-color);
+}
+
+.c1 > .c2 .c5 {
+  color: var(--color-content);
+}
+
+.c1 > .c2 .c7 {
+  fill: var(--color-content);
+}
+
+<div
+  class="c0 c1"
+  data-cy="panel-contentpanel-header"
+>
+  <div
+    class="c2 c3"
+    data-cy="panel-header"
+  >
+    <div
+      class="c4"
+    >
+      <span
+        class="c5 c6"
+        data-cy="title"
+      >
+        ContentPanel header
+      </span>
+      <svg
+        aria-hidden="true"
+        class="c7 c8"
+        viewBox="0 0 4.25 7"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z"
+        />
+        <path
+          d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ContentPanel renders expanded 1`] = `
+.c8 {
+  height: 9px;
+  width: 9px;
+  -webkit-transform: rotateZ(90deg);
+  -ms-transform: rotateZ(90deg);
+  transform: rotateZ(90deg);
+  fill: inherit;
+  vertical-align: middle;
+  -webkit-transition: -webkit-transform 0.2s ease-out;
+  -webkit-transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+}
+
+.c6 {
+  line-height: 1;
+  margin-right: 5px;
+  font-weight: 700;
+  color: var(--color-content);
+}
+
+.c10 {
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  background-color: var(--panels-background-color);
+}
+
+.c3 {
+  position: relative;
+  z-index: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  white-space: nowrap;
+  cursor: pointer;
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  pointer-events: auto;
+}
+
+.c4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 {
+  border-radius: var(--panels-border-radius);
+}
+
+.c0 .c2 + .c9 {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.c0:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.c1 {
+  border: 1px solid var(--global-border-color);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+}
+
+.c1:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.c1 > .c2 {
+  padding: calc(var(--spacing-unit) * 4);
+  font-size: 18px;
+  font-weight: var(--font-weight-bold);
+  background-color: var(--panels-background-color);
+}
+
+.c1 > .c2 .c5 {
+  color: var(--color-content);
+}
+
+.c1 > .c2 .c7 {
+  fill: var(--color-content);
+}
+
+.c1 > .c9 {
+  padding: calc(var(--spacing-unit) * 4);
+}
+
+.c1 > .c2 + .c9 {
+  padding-top: 1px;
+}
+
+<div
+  class="c0 c1"
+  data-cy="panel-contentpanel-header"
+>
+  <div
+    class="c2 c3"
+    data-cy="panel-header"
+  >
+    <div
+      class="c4"
+    >
+      <span
+        class="c5 c6"
+        data-cy="title"
+      >
+        ContentPanel header
+      </span>
+      <svg
+        aria-hidden="true"
+        class="c7 c8"
+        viewBox="0 0 4.25 7"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z"
+        />
+        <path
+          d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="c9 c10"
+    data-cy="panel-body"
+  >
+    ContentPanel body
+  </div>
+</div>
+`;

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

@@ -0,0 +1,398 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Panel renders collapsed 1`] = `
+.c4 {
+  height: 9px;
+  width: 9px;
+  -webkit-transform: rotateZ(0deg);
+  -ms-transform: rotateZ(0deg);
+  transform: rotateZ(0deg);
+  fill: inherit;
+  vertical-align: middle;
+  -webkit-transition: -webkit-transform 0.2s ease-out;
+  -webkit-transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+}
+
+.c1 {
+  position: relative;
+  z-index: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  white-space: nowrap;
+  cursor: pointer;
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  pointer-events: auto;
+}
+
+.c3 {
+  line-height: 1;
+  margin-right: 5px;
+  font-weight: 700;
+  color: var(--color-content);
+}
+
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 {
+  border-radius: var(--panels-border-radius);
+}
+
+.c0:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+<div
+  class="c0"
+  data-cy="panel-panel-header"
+>
+  <div
+    class="c1"
+    data-cy="panel-header"
+  >
+    <div
+      class="c2"
+    >
+      <span
+        class="c3"
+        data-cy="title"
+      >
+        Panel header
+      </span>
+      <svg
+        aria-hidden="true"
+        class="c4"
+        viewBox="0 0 4.25 7"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z"
+        />
+        <path
+          d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Panel renders expanded 1`] = `
+.c7 {
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  background-color: var(--panels-background-color);
+}
+
+.c5 {
+  height: 9px;
+  width: 9px;
+  -webkit-transform: rotateZ(90deg);
+  -ms-transform: rotateZ(90deg);
+  transform: rotateZ(90deg);
+  fill: inherit;
+  vertical-align: middle;
+  -webkit-transition: -webkit-transform 0.2s ease-out;
+  -webkit-transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+}
+
+.c2 {
+  position: relative;
+  z-index: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  white-space: nowrap;
+  cursor: pointer;
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  pointer-events: auto;
+}
+
+.c4 {
+  line-height: 1;
+  margin-right: 5px;
+  font-weight: 700;
+  color: var(--color-content);
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 {
+  border-radius: var(--panels-border-radius);
+}
+
+.c0 .c1 + .c6 {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.c0:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+<div
+  class="c0"
+  data-cy="panel-panel-header"
+>
+  <div
+    class="c1 c2"
+    data-cy="panel-header"
+  >
+    <div
+      class="c3"
+    >
+      <span
+        class="c4"
+        data-cy="title"
+      >
+        Panel header
+      </span>
+      <svg
+        aria-hidden="true"
+        class="c5"
+        viewBox="0 0 4.25 7"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z"
+        />
+        <path
+          d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="c6 c7"
+    data-cy="panel-body"
+  >
+    Panel body
+  </div>
+</div>
+`;
+
+exports[`Panel renders with header 1`] = `
+.c7 {
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  background-color: var(--panels-background-color);
+}
+
+.c5 {
+  height: 9px;
+  width: 9px;
+  -webkit-transform: rotateZ(90deg);
+  -ms-transform: rotateZ(90deg);
+  transform: rotateZ(90deg);
+  fill: inherit;
+  vertical-align: middle;
+  -webkit-transition: -webkit-transform 0.2s ease-out;
+  -webkit-transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+}
+
+.c2 {
+  position: relative;
+  z-index: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  white-space: nowrap;
+  cursor: pointer;
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  pointer-events: auto;
+}
+
+.c4 {
+  line-height: 1;
+  margin-right: 5px;
+  font-weight: 700;
+  color: var(--color-content);
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 {
+  border-radius: var(--panels-border-radius);
+}
+
+.c0 .c1 + .c6 {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.c0:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+<div
+  class="c0"
+  data-cy="panel-panel-header"
+>
+  <div
+    class="c1 c2"
+    data-cy="panel-header"
+  >
+    <div
+      class="c3"
+    >
+      <span
+        class="c4"
+        data-cy="title"
+      >
+        Panel header
+      </span>
+      <svg
+        aria-hidden="true"
+        class="c5"
+        viewBox="0 0 4.25 7"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z"
+        />
+        <path
+          d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="c6 c7"
+    data-cy="panel-body"
+  >
+    Panel body
+  </div>
+</div>
+`;
+
+exports[`Panel renders with header as function 1`] = `
+.c1 {
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  background-color: var(--panels-background-color);
+}
+
+.c0 {
+  border-radius: var(--panels-border-radius);
+}
+
+.c0:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+<div
+  class="c0"
+>
+  <div>
+    Custom Header component: 
+    {"expanded":true}
+  </div>
+  <div
+    class="c1"
+    data-cy="panel-body"
+  >
+    Panel body
+  </div>
+</div>
+`;
+
+exports[`Panel renders without header 1`] = `
+.c1 {
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  background-color: var(--panels-background-color);
+}
+
+.c0 {
+  border-radius: var(--panels-border-radius);
+}
+
+.c0:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+    data-cy="panel-body"
+  >
+    Panel body
+  </div>
+</div>
+`;

package/src/Panel/index.ts

@@ -0,0 +1,7 @@
+export * from './CodePanel';
+export * from './ContentPanel';
+export * from './DarkHeader';
+export * from './Panel';
+export * from './PanelBody';
+export * from './PanelHeader';
+export * from './PanelHeaderTitle';

package/src/SamplesPanelControls/SamplesControlButton.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { SampleControls, SamplesControlButton } from './SamplesPanelControls';
+
+export default {
+  title: 'Samples Control Button',
+  component: SamplesControlButton,
+} as ComponentMeta<typeof SamplesControlButton>;
+
+const Template: ComponentStory<typeof SamplesControlButton> = (args) => (
+  <SampleControls style={{ width: '200px' }}>
+    <SamplesControlButton {...args}>Copy</SamplesControlButton>
+  </SampleControls>
+);
+
+export const Default = Template.bind({});
+Default.args = {};