@redocly/theme 0.7.4 → 0.8.0

package/lib/Catalog/Catalog.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CatalogConfig } from '@theme/types/portal/src/shared/types/catalog';
+export default function Catalog(props: {
+    pageProps: {
+        catalogId: string;
+        catalogConfig: CatalogConfig;
+    };
+}): JSX.Element;

package/lib/Catalog/Catalog.js

@@ -0,0 +1,167 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const index_js_1 = require("../mocks/hooks/index.js");
+const H2_1 = require("../Typography/H2");
+const H3_1 = require("../Typography/H3");
+const Button_1 = require("../Button/Button");
+const Highlight_1 = require("../ui/Highlight");
+const CatalogCard_1 = require("../Catalog/CatalogCard");
+const Filter_1 = require("../Catalog/Filter");
+const index_1 = require("../mocks/hooks/index");
+function Catalog(props) {
+    const { catalogConfig } = props.pageProps;
+    const items = (0, index_js_1.usePageSharedData)('catalog');
+    const { filterTerm, setFilterTerm, groups, filters } = (0, index_1.useCatalog)(items, catalogConfig);
+    const [isFilterPanelFocused, setIsFilterPanelFocused] = react_1.default.useState(false);
+    return (react_1.default.createElement(Highlight_1.HighlightContext.Provider, { value: [filterTerm] },
+        react_1.default.createElement(CatalogPageWrapper, null,
+            react_1.default.createElement(CatalogPageSidebar, { isActiveInMobileMode: isFilterPanelFocused },
+                react_1.default.createElement(StyledInput, { placeholder: "Filter...", value: filterTerm, onFocus: () => setIsFilterPanelFocused(true), onChange: (e) => setFilterTerm(e.target.value) }),
+                filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx }))),
+                react_1.default.createElement(MobileStickyApplyFilters, null,
+                    react_1.default.createElement(Button_1.Button, { color: "secondary", onClick: () => setIsFilterPanelFocused(false) }, "Apply filters"))),
+            react_1.default.createElement(CatalogPageContent, null,
+                catalogConfig.title ? react_1.default.createElement(CatalogTitle, null,
+                    " ",
+                    catalogConfig.title,
+                    " ") : null,
+                catalogConfig.description ? (react_1.default.createElement(CatalogDescription, null,
+                    " ",
+                    catalogConfig.description,
+                    " ")) : null,
+                groups.map((group) => (react_1.default.createElement(react_1.default.Fragment, { key: group.title },
+                    react_1.default.createElement(H3_1.H3, null,
+                        group.title,
+                        " (",
+                        group.items.length,
+                        ")"),
+                    react_1.default.createElement(CatalogCards, null, group.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item, key: item.link })))))))))));
+}
+exports.default = Catalog;
+const MobileStickyApplyFilters = styled_components_1.default.div `
+  position: fixed;
+  display: none;
+  background-color: var(--sidebar-background-color);
+  bottom: 0;
+  padding: 16px 30px;
+  left: 0px;
+  right: 0px;
+
+  ${Button_1.Button} {
+    width: 100%;
+    margin: 0;
+  }
+`;
+const CatalogPageSidebar = styled_components_1.default.aside `
+  width: var(--sidebar-width);
+  border-right: 1px solid var(--sidebar-border-color);
+  padding: 20px 30px;
+  position: sticky;
+  top: var(--navbar-height);
+  height: calc(100vh - var(--navbar-height));
+  overflow: auto;
+
+  @media screen and (max-width: 767px) {
+    transition: height 0.2s ease-in-out;
+    width: 100%;
+    ${({ isActiveInMobileMode }) => isActiveInMobileMode ? 'padding-bottom: 66px;' : 'height: 76px;'};
+    background-color: var(--sidebar-background-color);
+    border-bottom: 1px solid var(--sidebar-border-color);
+    z-index: 100;
+
+    ${MobileStickyApplyFilters} {
+      display: ${({ isActiveInMobileMode }) => (isActiveInMobileMode ? 'block' : 'none')};
+    }
+  }
+`;
+const CatalogPageContent = styled_components_1.default.main `
+  flex: 1;
+  padding: 32px;
+`;
+const CatalogCards = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 32px;
+`;
+const CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
+  && {
+    margin: 0;
+  }
+`;
+const CatalogDescription = styled_components_1.default.p `
+  margin: 16px 0 32px 0;
+  font-size: 16px;
+  color: var(--text-color-secondary);
+`;
+const CatalogPageWrapper = styled_components_1.default.div `
+  --sidebar-width: var(--catalog-sidebar-width, 300px);
+
+  display: flex;
+  flex-direction: row;
+
+  font-weight: var(--font-weight-regular);
+  padding: 0;
+
+  color: var(--text-color);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+
+  hr {
+    border: 0;
+    width: calc(100% + 48px);
+    margin: auto -24px 0 -24px;
+    border-top: 1px solid var(--border-color);
+  }
+  a:not([role='button']) {
+    text-decoration: none;
+    color: var(--link-text-color);
+    font-weight: var(--link-font-weight);
+  }
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+  }
+`;
+// TODO: merge this input with the input from reference docs
+// the on in ref docs is dark, needs separate variables most likely
+const StyledInput = styled_components_1.default.input `
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  min-width: 200px;
+  outline-color: var(--color-primary-500);
+  width: 100%;
+
+  outline: none;
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  color: var(--text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+
+  &::placeholder {
+    opacity: 0.6;
+    color: var(--text-color);
+  }
+
+  &:hover {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+  }
+
+  &:focus {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--input-background-color);
+  }
+`;
+//# sourceMappingURL=Catalog.js.map

package/lib/Catalog/CatalogCard.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CatalogItem } from '@theme/types/portal/src/shared/types/catalog';
+export declare function CatalogCard({ item }: {
+    item: CatalogItem;
+}): JSX.Element;

package/lib/Catalog/CatalogCard.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogCard = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../mocks/Link");
+const Highlight_1 = require("../ui/Highlight");
+const Tags_1 = require("../Catalog/Tags");
+function CatalogCard({ item }) {
+    var _a;
+    return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
+        React.createElement(StyledCard, null,
+            React.createElement(CardTitle, null,
+                React.createElement(Highlight_1.Highlight, null, item.title)),
+            React.createElement(CardDescription, null,
+                React.createElement(Highlight_1.Highlight, null, (_a = item.description) !== null && _a !== void 0 ? _a : '')),
+            item.tags ? React.createElement(Tags_1.Tags, { tags: item.tags }) : null,
+            React.createElement("hr", null),
+            React.createElement(CardFooter, null, "View documentation"))));
+}
+exports.CatalogCard = CatalogCard;
+const StyledCard = styled_components_1.default.div `
+  min-height: 268px;
+  height: 100%;
+  box-shadow: var(--box-shadow);
+
+  display: flex;
+  flex-direction: column;
+
+  color: var(--text-color);
+  background-color: var(--thin-tile-background-color);
+  border-radius: 4px;
+
+  border: 1px solid var(--border-color);
+  box-shadow: 0px 0px 10px 0px rgba(35, 35, 35, 0.05);
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    /* box-shadow: 0px 12px 30px 0px rgba(35, 35, 35, 0.2); */
+    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+    border: 1px solid var(--border-color);
+    transform: translateY(-2px);
+  }
+
+  border-radius: 8px;
+  width: 100%;
+  padding: 24px 24px 0;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+`;
+const CardTitle = styled_components_1.default.h4 `
+  line-height: 26px;
+  letter-spacing: 0.8px;
+  font-size: 20px;
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  margin-bottom: 16px;
+`;
+const CardDescription = styled_components_1.default.div `
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--line-height);
+  letter-spacing: 0px;
+  font-size: 16px;
+  color: var(--text-color-secondary);
+  text-align: inherit;
+  font-weight: 400;
+`;
+const CardFooter = styled_components_1.default.div `
+  height: 46px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
+
+  a:hover & {
+    text-decoration: var(--link-hover-text-decoration);
+    color: var(--link-hover-text-color);
+  }
+`;
+//# sourceMappingURL=CatalogCard.js.map

package/lib/Catalog/Filter.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
+export declare function Filter({ filter }: {
+    filter: ResolvedFilter;
+}): JSX.Element | null;

package/lib/Catalog/Filter.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Filter = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Checkbox_1 = require("../ui/Checkbox");
+function Filter({ filter }) {
+    var _a;
+    if (!filter.parentUsed)
+        return null;
+    return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
+        react_1.default.createElement(FilterTitle, null,
+            filter.title,
+            " filter"),
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '' },
+            react_1.default.createElement("option", { key: "none", value: "" }, "All"),
+            filter.filteredOptions.map((value) => (react_1.default.createElement("option", { key: value.value, value: value.value },
+                value.value,
+                " (",
+                value.count,
+                ")"))))) : (filter.filteredOptions.map((value) => {
+            const id = 'filter--' + filter.property + '--' + slug(value.value);
+            return (react_1.default.createElement(FilterValue, { key: id },
+                react_1.default.createElement(Checkbox_1.Checkbox, { type: "checkbox", id: id, checked: filter.selectedOptions.has(value.value), onChange: () => filter.toggleOption(value.value) }),
+                react_1.default.createElement("label", { htmlFor: id },
+                    value.value,
+                    " (",
+                    value.count,
+                    ")")));
+        }))));
+}
+exports.Filter = Filter;
+const FilterGroup = styled_components_1.default.div `
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-color);
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+`;
+const FilterTitle = styled_components_1.default.h4 `
+  font-size: 18px;
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  margin-bottom: 16px;
+`;
+const FilterValue = styled_components_1.default.label `
+  display: block;
+  cursor: pointer;
+  font-size: 16px;
+  margin: 8px 0;
+
+  input {
+    cursor: pointer;
+  }
+`;
+const StyledSelect = styled_components_1.default.select `
+  border: 1px solid rgba(0, 0, 0, 0.23);
+
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  color: var(--text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+
+  min-width: 200px;
+  outline-color: var(--color-primary-500);
+  transition: outline 0.25s ease;
+  display: inline-block;
+  text-align: left;
+  appearance: none;
+
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 1em;
+  width: 100%;
+`;
+// TODO: import from portal
+function slug(str) {
+    return str.replace(/\s/g, '-').toLowerCase();
+}
+//# sourceMappingURL=Filter.js.map

package/lib/Catalog/Tags.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function Tags({ tags }: {
+    tags: string[];
+}): JSX.Element;

package/lib/Catalog/Tags.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tags = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Highlight_1 = require("../ui/Highlight");
+function Tags({ tags }) {
+    return (react_1.default.createElement(TagsWrapper, null, tags.map((tag) => (react_1.default.createElement(Tag, { key: tag, className: 'tag-' + slug(tag) },
+        react_1.default.createElement(Highlight_1.Highlight, null, tag))))));
+}
+exports.Tags = Tags;
+const TagsWrapper = styled_components_1.default.div `
+  margin-top: 16px;
+`;
+const Tag = styled_components_1.default.div `
+  display: inline-block;
+  background-color: #d3f4ef;
+  color: #000;
+  padding: 2px 5px;
+  border-radius: var(--border-radius);
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 0.8em;
+`;
+// TODO: import from portal
+function slug(str) {
+    return str.replace(/\s/g, '-').toLowerCase();
+}
+//# sourceMappingURL=Tags.js.map

package/lib/Feedback/ReportDialog.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ReportDialogProps } from '../Feedback';
+export declare const ReportDialog: ({ location, settings, onSubmit, onCancel, }: ReportDialogProps) => JSX.Element;

package/lib/Feedback/ReportDialog.js

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReportDialog = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Comment_1 = require("../Feedback/Comment");
+const useSubmitFeedback_1 = require("../mocks/Feedback/useSubmitFeedback");
+const ReportDialog = ({ location, settings, onSubmit, onCancel, }) => {
+    const { label } = settings;
+    const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
+    return (React.createElement(Wrapper, { className: "modal" },
+        React.createElement(Comment_1.Comment, { settings: { label, onCancel }, onSubmit: (value) => {
+                submitFeedback('problem', Object.assign(Object.assign({}, value), { location }));
+                onSubmit();
+            } })));
+};
+exports.ReportDialog = ReportDialog;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--modal-overlay-background-color);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    background: var(--modal-background-color);
+    box-shadow: var(--modal-box-shadow);
+    padding: 15px;
+    margin: 15px;
+    max-width: 500px;
+    max-height: 300px;
+  }
+`;
+//# sourceMappingURL=ReportDialog.js.map

package/lib/Feedback/index.d.ts

@@ -2,4 +2,6 @@ export { Rating } from '../Feedback/Rating';
 export { Sentiment } from '../Feedback/Sentiment';
 export { Comment } from '../Feedback/Comment';
 export { Reasons } from '../Feedback/Reasons';
+export { ReportDialog } from '../Feedback/ReportDialog';
+export { useReportDialog } from '../Feedback/useReportDialog';
 export * from './types';

package/lib/Feedback/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Reasons = exports.Comment = exports.Sentiment = exports.Rating = void 0;
+exports.useReportDialog = exports.ReportDialog = exports.Reasons = exports.Comment = exports.Sentiment = exports.Rating = void 0;
 var Rating_1 = require("../Feedback/Rating");
 Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return Rating_1.Rating; } });
 var Sentiment_1 = require("../Feedback/Sentiment");
@@ -23,5 +23,9 @@ var Comment_1 = require("../Feedback/Comment");
 Object.defineProperty(exports, "Comment", { enumerable: true, get: function () { return Comment_1.Comment; } });
 var Reasons_1 = require("../Feedback/Reasons");
 Object.defineProperty(exports, "Reasons", { enumerable: true, get: function () { return Reasons_1.Reasons; } });
+var ReportDialog_1 = require("../Feedback/ReportDialog");
+Object.defineProperty(exports, "ReportDialog", { enumerable: true, get: function () { return ReportDialog_1.ReportDialog; } });
+var useReportDialog_1 = require("../Feedback/useReportDialog");
+Object.defineProperty(exports, "useReportDialog", { enumerable: true, get: function () { return useReportDialog_1.useReportDialog; } });
 __exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/lib/Feedback/types.d.ts

@@ -64,9 +64,11 @@ export type ReasonsProps = {
         buttonText?: string;
     };
 };
-export type ProblemProps = {
-    onSubmit: (value: string, location: string) => void;
-    settings?: {
+export type ReportDialogProps = {
+    location: string;
+    onSubmit: () => void;
+    onCancel: () => void;
+    settings: {
         label?: string;
     };
 };

package/lib/Feedback/useReportDialog.d.ts

@@ -0,0 +1,7 @@
+type ReportSettings = {
+    hide?: boolean;
+    label?: string;
+    tooltipText?: string;
+};
+export declare function useReportDialog(reportSettings: ReportSettings): Record<string, any>;
+export {};

package/lib/Feedback/useReportDialog.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReportDialog = void 0;
+const react_1 = require("react");
+function useReportDialog(reportSettings) {
+    const [isReportDialogShown, setIsReportDialogShown] = (0, react_1.useState)(false);
+    const isReportButtonShown = reportSettings.hide === false; // TODO: report temporary disabled by default
+    const showReportDialog = () => {
+        setIsReportDialogShown(true);
+    };
+    const hideReportDialog = () => {
+        setIsReportDialogShown(false);
+    };
+    const reportButtonProps = {
+        onClick: showReportDialog,
+        title: reportSettings.tooltipText || 'Report a problem',
+    };
+    const reportDialogProps = {
+        settings: {
+            label: reportSettings.label || 'What is wrong with a code?',
+        },
+        onSubmit: hideReportDialog,
+        onCancel: hideReportDialog,
+    };
+    return { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps };
+}
+exports.useReportDialog = useReportDialog;
+//# sourceMappingURL=useReportDialog.js.map

package/lib/Markdown/CodeSample/CodeSample.js

@@ -29,35 +29,23 @@ const styled_components_1 = __importStar(require("styled-components"));
 const ClipboardService_1 = require("../../utils/ClipboardService");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const Feedback_1 = require("../../Feedback");
-const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
-const useReportDialog_1 = require("../../hooks/useReportDialog");
 function CodeSample({ rawContent, highlighted, language }) {
     const langClassName = language ? `language-${language}` : '';
-    const { codeSnippet: { copy = {}, report = { hide: true } } = {} } = (0, useThemeConfig_1.useThemeConfig)(); // TODO: report temporary disabled
-    const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
+    const { codeSnippet: { copy = {}, report = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
     const [isCopied, setIsCopied] = (0, react_1.useState)(false);
-    const [isDialogShown, showDialog, hideDialog] = (0, useReportDialog_1.useReportDialog)(false);
+    const { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps } = (0, Feedback_1.useReportDialog)(report);
     const copyCode = (code) => {
         ClipboardService_1.ClipboardService.copyCustom(code);
         setIsCopied(true);
-        setTimeout(() => setIsCopied(false), copy.toasterDuration || 1000);
+        setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
     };
     return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
         react_1.default.createElement(CodeSampleButtonContainer, null,
             !copy.hide && (react_1.default.createElement(react_1.default.Fragment, null,
                 !isCopied && (react_1.default.createElement(Button, { onClick: () => copyCode(rawContent), title: copy.tooltipText || 'Copy to clipboard' }, copy.buttonText || 'Copy')),
                 isCopied && react_1.default.createElement(DoneIndicator, null, copy.toasterText || 'Copied!'))),
-            !report.hide && (react_1.default.createElement(Button, { onClick: () => showDialog(), title: report.tooltipText || 'Report a problem' }, "Report")),
-            isDialogShown && (react_1.default.createElement(ReportDialog, { id: "modal" },
-                react_1.default.createElement(Feedback_1.Comment, { settings: {
-                        label: report.label || 'What is wrong with a code?',
-                        onCancel: () => {
-                            hideDialog();
-                        },
-                    }, onSubmit: (value) => {
-                        submitFeedback('problem', Object.assign(Object.assign({}, value), { location: rawContent }));
-                        hideDialog();
-                    } })))),
+            isReportButtonShown && react_1.default.createElement(Button, Object.assign({}, reportButtonProps), "Report"),
+            isReportDialogShown && react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialogProps, { location: rawContent }))),
         react_1.default.createElement("pre", { className: langClassName },
             react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
 }
@@ -226,25 +214,4 @@ const Wrapper = styled_components_1.default.div `
     ${darkStyleTokens};
   }
 `;
-const ReportDialog = styled_components_1.default.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: var(--modal-overlay-background-color);
-  z-index: 10000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & > * {
-    background: var(--modal-background-color);
-    box-shadow: var(--modal-box-shadow);
-    padding: 15px;
-    margin: 15px;
-    max-width: 500px;
-    max-height: 300px;
-  }
-`;
 //# sourceMappingURL=CodeSample.js.map

package/lib/Sidebar/ArrowBack.js

@@ -7,12 +7,12 @@ exports.ArrowBack = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Arrow = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "Sidebar/ArrowBack" },
-    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "12px", height: "10px", className: className },
+    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "10px", height: "10px", className: className },
         react_1.default.createElement("path", { d: "M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" }),
         react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
 exports.ArrowBack = (0, styled_components_1.default)(Arrow) `
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;