@redocly/theme 0.6.5 → 0.7.1

package/lib/Search/Search.js

@@ -35,12 +35,17 @@ const Autocomplete_1 = require("../Search/Autocomplete");
 const ClearIcon_1 = require("../Search/ClearIcon");
 const SearchIcon_1 = require("../Search/SearchIcon");
 const SearchItem_1 = require("../Search/SearchItem");
+const hooks_1 = require("../hooks");
 function Search() {
     const history = (0, usePreloadHistory_1.usePreloadHistory)();
     const { query, setQuery, items } = (0, search_1.useFuseSearch)();
+    const themeSettings = (0, hooks_1.useThemeConfig)();
     // TODO: ask somebody about typings
     const navigate = (item) => history.push(item.url);
-    const renderAutocomplete = () => (React.createElement(Autocomplete_1.Autocomplete, { items: items, value: query, change: setQuery, select: navigate, placeholder: "Search the docs", renderItem: (item) => React.createElement(SearchItem_1.SearchItem, { key: item.id, item: item }) }, (isOpen, reset) => (isOpen ? React.createElement(ClearIcon_1.ClearIcon, { onClick: reset }) : React.createElement(SearchIcon_1.SearchIcon, null))));
+    const renderAutocomplete = () => {
+        var _a, _b;
+        return (React.createElement(Autocomplete_1.Autocomplete, { items: items, value: query, change: setQuery, select: navigate, placeholder: "Search the docs", keyShortcuts: (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'], renderItem: (item) => React.createElement(SearchItem_1.SearchItem, { key: item.id, item: item }) }, (isOpen, reset) => (isOpen ? React.createElement(ClearIcon_1.ClearIcon, { onClick: reset }) : React.createElement(SearchIcon_1.SearchIcon, null))));
+    };
     return React.createElement(Wrapper, { "data-component-name": "Search/Search" }, renderAutocomplete());
 }
 exports.Search = Search;

package/lib/Search/SearchIcon.js

@@ -15,7 +15,7 @@ exports.SearchIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
   cursor: pointer;
   width: 1em;
   height: 1em;
-  right: 1em;
+  left: 0.8em;
   fill: var(--search-input-text-color);
   z-index: -1;
 

package/lib/Search/ShortcutKey.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface ShortcutKeyProps {
+    keyShortcuts?: string | string[];
+}
+export declare function ShortcutKey(props: ShortcutKeyProps): JSX.Element;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/Search/ShortcutKey.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = exports.ShortcutKey = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function ShortcutKey(props) {
+    let mainShortcutKey = null;
+    if (props.keyShortcuts) {
+        if (Array.isArray(props.keyShortcuts)) {
+            mainShortcutKey = props.keyShortcuts[0];
+        }
+        else {
+            mainShortcutKey = props.keyShortcuts;
+        }
+    }
+    mainShortcutKey = mainShortcutKey === null || mainShortcutKey === void 0 ? void 0 : mainShortcutKey.toUpperCase();
+    return react_1.default.createElement(exports.Wrapper, null, mainShortcutKey);
+}
+exports.ShortcutKey = ShortcutKey;
+exports.Wrapper = styled_components_1.default.div `
+  position: absolute;
+  cursor: pointer;
+  font-size: 0.8em;
+  height: 2em;
+  line-height: 2em;
+  right: 1em;
+  fill: var(--search-input-text-color);
+  color: var(--search-input-placeholder-color);
+  opacity: 0.5;
+  z-index: -1;
+`;
+//# sourceMappingURL=ShortcutKey.js.map

package/lib/config.d.ts

@@ -244,14 +244,17 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     }>>>;
     search: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
         placement: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+        shortcuts: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, "many">>>;
     }, {
         hide: z.ZodOptional<z.ZodBoolean>;
     }>, "strict", z.ZodTypeAny, {
         hide?: boolean | undefined;
         placement?: string | undefined;
+        shortcuts?: string[] | undefined;
     }, {
         hide?: boolean | undefined;
         placement?: string | undefined;
+        shortcuts?: string[] | undefined;
     }>>>;
     colorMode: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
         ignoreDetection: z.ZodOptional<z.ZodBoolean>;
@@ -429,6 +432,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     }>>>;
     openapi: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, {}, {}>>;
     graphql: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, {}, {}>>;
+    analytics: z.ZodOptional<z.ZodAny>;
     userProfile: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
         loginLabel: z.ZodOptional<z.ZodDefault<z.ZodString>>;
         logoutLabel: z.ZodOptional<z.ZodDefault<z.ZodString>>;
@@ -519,6 +523,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     search?: {
         hide?: boolean | undefined;
         placement?: string | undefined;
+        shortcuts?: string[] | undefined;
     } | undefined;
     markdown?: {
         frontMatterKeysToResolve?: string[] | undefined;
@@ -548,6 +553,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     } | undefined;
     openapi?: {} | undefined;
     graphql?: {} | undefined;
+    analytics?: any;
     colorMode: {
         hide?: boolean | undefined;
         ignoreDetection?: boolean | undefined;
@@ -642,6 +648,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     search?: {
         hide?: boolean | undefined;
         placement?: string | undefined;
+        shortcuts?: string[] | undefined;
     } | undefined;
     colorMode?: {
         hide?: boolean | undefined;
@@ -686,6 +693,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     } | undefined;
     openapi?: {} | undefined;
     graphql?: {} | undefined;
+    analytics?: any;
     userProfile?: {
         hide?: boolean | undefined;
         loginLabel?: string | undefined;
@@ -705,4 +713,7 @@ export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 's
         }[];
         devLogin?: boolean;
     };
+    search?: {
+        shortcuts?: string[];
+    };
 };

package/lib/config.js

@@ -86,6 +86,7 @@ exports.ThemeConfig = zod_1.z
     search: zod_1.z
         .object({
         placement: zod_1.z.string().default('navbar').optional(),
+        shortcuts: zod_1.z.array(zod_1.z.string()).default(['/']).optional(),
     })
         .extend(HideConfig.shape)
         .strict()
@@ -160,6 +161,7 @@ exports.ThemeConfig = zod_1.z
         .optional(),
     openapi: zod_1.z.object({}).passthrough().optional(),
     graphql: zod_1.z.object({}).passthrough().optional(),
+    analytics: zod_1.z.any().optional(),
     userProfile: zod_1.z
         .object({
         loginLabel: zod_1.z.string().default('Login').optional(),

package/lib/globalStyle.js

@@ -1784,6 +1784,16 @@ const markdown = (0, styled_components_1.css) `
   --md-numbered-list-number-padding: 0 5px; // @presenter Spacing
 
   // @tokens End
+
+  /**
+  * @tokens Markdown Tabs
+  */
+
+  --md-tabs-tab-text-color: var(--color-emphasis-600); // @presenter Color
+  --md-tabs-active-tab-border-color: var(--text-color); // @presenter Color
+  --md-tabs-hover-tab-border-color: var(--text-color-secondary); // @presenter Color
+
+  // @tokens End
 `;
 const search = (0, styled_components_1.css) `
   /**
@@ -1879,7 +1889,54 @@ const tile = (0, styled_components_1.css) `
   --thin-tile-background-color: var(--color-secondary-50);
 `;
 const apiLogsTable = (0, styled_components_1.css) `
- --api-logs-row-hover-background-color: var(--color-secondary-300)
+ --api-logs-row-hover-background-color: var(--color-secondary-300);
+`;
+const pages = (0, styled_components_1.css) `
+  /**
+  * @tokens 404 Page
+  * @presenter Color
+  */
+
+  --page-404-font-family: var(--font-family-base); // @presenter FontFamily
+
+  --page-404-header-text-color: #000; 
+  --page-404-header-font-size: 14em; // @presenter FontSize
+  --page-404-header-font-weight: 600; // @presenter FontWeight
+  --page-404-header-line-height: 1.2; // @presenter LineHeight
+  --page-404-header-margin: 0; // @presenter Spacing
+
+  --page-404-description-text-color: #000;
+  --page-404-description-font-size: 2em; // @presenter FontSize
+  --page-404-description-font-weight: 400; // @presenter FontWeight
+  --page-404-description-line-height: 1; // @presenter LineHeight
+  --page-404-description-margin: 0; // @presenter Spacing
+
+  --page-404-button-margin: 4em; // @presenter Spacing
+
+  // @tokens End
+
+  /**
+  * @tokens 403 Page
+  * @presenter Color
+  */
+ 
+   --page-403-font-family: var(--font-family-base); // @presenter FontFamily
+ 
+   --page-403-header-text-color: #000;
+   --page-403-header-font-size: 14em; // @presenter FontSize
+   --page-403-header-font-weight: 600; // @presenter FontWeight
+   --page-403-header-line-height: 1.2; // @presenter LineHeight
+   --page-403-header-margin: 0; // @presenter Spacing
+ 
+   --page-403-description-text-color: #000;
+   --page-403-description-font-size: 2em; // @presenter FontSize
+   --page-403-description-font-weight: 400; // @presenter FontWeight
+   --page-403-description-line-height: 1; // @presenter LineHeight
+   --page-403-description-margin: 0; // @presenter Spacing
+ 
+   --page-403-button-margin: 4em; // @presenter Spacing
+ 
+   // @tokens End
 `;
 exports.styles = (0, styled_components_1.css) `
   :root {
@@ -1910,6 +1967,7 @@ exports.styles = (0, styled_components_1.css) `
     ${tile}
     ${loadProgressBar}
     ${apiLogsTable}
+    ${pages}
   }
 
   :root.dark {

package/lib/index.d.ts

@@ -21,3 +21,4 @@ export * from './ColorModeSwitcher';
 export * from './Sidebar';
 export * from './types/config';
 export * from './config';
+export * from './Pages';

package/lib/index.js

@@ -37,4 +37,5 @@ __exportStar(require("./ColorModeSwitcher"), exports);
 __exportStar(require("./Sidebar"), exports);
 __exportStar(require("./types/config"), exports);
 __exportStar(require("./config"), exports);
+__exportStar(require("./Pages"), exports);
 //# sourceMappingURL=index.js.map

package/lib/mocks/Link.js

@@ -21,7 +21,7 @@ const react_1 = __importDefault(require("react"));
 function Link(props) {
     const { active: _, httpVerb: _1, hasActiveSubItem: _2, routeSlug: _3, external: _4 } = props, filteredProps = __rest(props, ["active", "httpVerb", "hasActiveSubItem", "routeSlug", "external"]);
     // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
-    return react_1.default.createElement("a", Object.assign({ href: filteredProps.to }, filteredProps));
+    return react_1.default.createElement("a", Object.assign({ href: filteredProps.to, ref: filteredProps.innerRef }, filteredProps));
 }
 exports.Link = Link;
 //# sourceMappingURL=Link.js.map

package/lib/mocks/hooks/index.js

@@ -3,7 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
 function useThemeConfig() {
     return {
-        search: { hide: false, placement: 'navbar' },
+        search: {
+            hide: false,
+            placement: 'navbar',
+            shortcuts: ['ctrl+f', 'cmd+k', '/'],
+        },
         markdown: {
             toc: { depth: 3, header: 'Table of contents', hide: false },
             lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },

package/lib/mocks/search.js

@@ -1,13 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFuseSearch = void 0;
+const react_1 = require("react");
 function useFuseSearch() {
+    const [query, setQuery] = (0, react_1.useState)('');
     return {
-        query: '',
-        setQuery(val) {
-            this.query = val;
-        },
-        items: [],
+        query,
+        setQuery,
+        items: [
+            {
+                id: '1',
+                url: '#someUrl1',
+                title: 'Some Dummy Result Item 1',
+                text: 'Some sample search text',
+            },
+            {
+                id: '2',
+                url: '#someUrl2',
+                title: 'Some Dummy Result Item 2',
+                text: 'Some sample search text 2',
+            },
+        ],
     };
 }
 exports.useFuseSearch = useFuseSearch;

package/lib/ui/darkColors.js

@@ -61,8 +61,13 @@ exports.darkMode = (0, styled_components_1.css) `
   --copy-button-tooltip-background-color: var(--tooltip-background-color);
   --tooltip-text-color: #fff;
   --md-table-head-background-color: var(--color-secondary-300);
+  --md-tabs-hover-tab-border-color: var(--color-secondary-500);
   --wide-tile-background-color: #000000;
   --thin-tile-background-color: #000000;
+  --page-404-header-text-color: #fff;
+  --page-404-description-text-color: #fff;
+  --page-403-header-text-color: #fff;
+  --page-403-description-text-color: #fff;
 
   background-color: var(--background-color);
   color: var(--text-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.6.5",
+  "version": "0.7.1",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -39,6 +39,7 @@
     "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router": "^5.3.0",
     "react-router-dom": "^5.3.0",
     "styled-components": "^5.3.6",
     "styled-system": "^5.1.5",
@@ -65,16 +66,18 @@
     "@types/jest": "^29.2.1",
     "@types/jest-when": "^3.5.2",
     "@types/lodash.throttle": "^4.1.7",
-    "@types/node": "^16.11.26",
+    "@types/node": "^18.11.18",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
-    "@types/react-router-dom": "^5.3.1",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-router": "^5.1.20",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.13",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
     "chromatic": "^6.10.2",
+    "concurrently": "^7.4.0",
     "esbuild": "^0.15.11",
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.2.2",
@@ -83,6 +86,7 @@
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
     "react-refresh": "^0.14.0",
+    "react-router": "^5.3.0",
     "react-router-dom": "^5.3.0",
     "storybook-addon-pseudo-states": "^1.15.1",
     "storybook-design-token": "^2.7.1",
@@ -95,10 +99,10 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
-    "concurrently": "^7.4.0",
     "zod": ">=3.19.1"
   },
   "dependencies": {
+    "hotkeys-js": "^3.10.1",
     "timeago.js": "^4.0.2"
   },
   "nx": {

package/src/Feedback/Comment.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Button } from '@theme';
+
+import type { CommentProps } from '@theme/Feedback';
+
+export const Comment = ({ settings, onSubmit }: CommentProps): JSX.Element => {
+  const { label, submitText } = settings || {};
+  const [text, setText] = React.useState('');
+  const [submitValue, setSubmitValue] = React.useState('');
+
+  const send = () => {
+    if (!text) return;
+    setSubmitValue(text);
+    onSubmit({ comment: text });
+  };
+  const handleTextAreaChange = (e: any) => {
+    setText(e.target.value);
+  };
+
+  if (submitValue) {
+    return (
+      <Wrapper>
+        <Label>{submitText || 'Thank you for helping improve our documentation!'}</Label>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper data-component-name="Feedback/Comment">
+      <Label>{label || 'Please share your feedback with us:'}</Label>
+      <TextArea rows={3} onChange={handleTextAreaChange} />
+      <SendButton onClick={send}>Send</SendButton>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const Label = styled.h3`
+  margin-right: 15px;
+`;
+
+const TextArea = styled.textarea`
+  font-family: var(--font-family-base);
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  color: black;
+  margin: 0 0 10px 0;
+  padding: 10px;
+`;
+
+const SendButton = styled(Button).attrs(() => ({
+  color: 'primary',
+}))`
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;

package/src/Feedback/Rating.tsx

@@ -1,36 +1,64 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import type { RatingProps } from '@theme/Feedback';
+import type { RatingProps, ReasonsProps } from '@theme/Feedback';
+import { Comment, Reasons } from '@theme/Feedback';
 
 type StarsProps = {
-  onSubmit: RatingProps['onSubmit'];
+  onSubmit: (value: number) => void;
   max: number;
 };
 
 export const Rating = ({ settings, onSubmit }: RatingProps): JSX.Element => {
-  const { label, max, submitText } = settings || {};
-  const [submitValue, setSubmitValue] = React.useState(0);
+  const {
+    label,
+    max,
+    submitText,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+  } = settings || {};
+  const [score, setScore] = React.useState(0);
+  const [comment, setComment] = React.useState('');
+  const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
 
-  if (submitValue) {
+  if (score && reasonsSettings?.enable && !reasons.length) {
+    const { label: reasonsLabel, items, multi } = reasonsSettings;
+    const buttonText = commentSettings?.enable ? 'Next' : 'Send';
     return (
-      <RatingWidget>
+      <Reasons
+        onSubmit={({ reasons }) => setReasons(reasons)}
+        settings={{ label: reasonsLabel, items, multi, buttonText }}
+      />
+    );
+  }
+
+  if (score && commentSettings?.enable && !comment) {
+    return (
+      <Comment
+        onSubmit={({ comment }) => setComment(comment)}
+        settings={{ label: commentSettings.label }}
+      />
+    );
+  }
+
+  if (score) {
+    onSubmit({
+      score,
+      comment,
+      reasons,
+    });
+    return (
+      <Wrapper>
         <Label>{submitText || 'Thank you for helping improve our documentation!'}</Label>
-      </RatingWidget>
+      </Wrapper>
     );
   }
 
   return (
-    <RatingWidget>
+    <Wrapper data-component-name="Feedback/Rating">
       <Label>{label || 'How helpful was this page?'}</Label>
-      <Stars
-        max={max || 5}
-        onSubmit={(value: number) => {
-          setSubmitValue(value);
-          onSubmit(value);
-        }}
-      />
-    </RatingWidget>
+      <Stars max={max || 5} onSubmit={setScore} />
+    </Wrapper>
   );
 };
 
@@ -64,7 +92,7 @@ const Stars = ({ max, onSubmit }: StarsProps): JSX.Element => {
   return <>{stars}</>;
 };
 
-const RatingWidget = styled.div`
+const Wrapper = styled.div`
   display: flex;
   align-items: center;
 `;

package/src/Feedback/Reasons.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Button } from '@theme';
+
+import type { ReasonsProps } from '@theme/Feedback';
+
+export const Reasons = ({ settings, onSubmit }: ReasonsProps): JSX.Element => {
+  const { label, multi, buttonText, items = [] } = settings;
+  const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+
+  if (!items.length) {
+    return <></>;
+  }
+
+  const input_type = multi ? 'checkbox' : 'radio';
+
+  const handleOptionChange = (position: number) => {
+    const updatedCheckedState = multi
+      ? checkedState.map((item, index) => (index === position ? !item : item))
+      : items.map((_, idx) => position === idx);
+
+    setCheckedState(updatedCheckedState);
+  };
+
+  const submitForm = () => {
+    onSubmit({ reasons: items.filter((_, index) => !!checkedState[index]) });
+  };
+
+  return (
+    <Wrapper data-component-name="Feedback/Reasons">
+      <Label>{label || 'Which statement describes your thoughts about this page?'}</Label>
+      {items.map((reason, idx) => (
+        <OptionWrapper key={reason}>
+          <input
+            type={input_type}
+            value={reason}
+            checked={checkedState[idx]}
+            name="reasons"
+            onChange={() => handleOptionChange(idx)}
+          />
+          <label id={reason} onClick={() => handleOptionChange(idx)}>
+            {reason}
+          </label>
+        </OptionWrapper>
+      ))}
+      <SendButton onClick={submitForm}>{buttonText || 'Send'}</SendButton>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  flex-direction: column;
+`;
+
+const Label = styled.h3`
+  margin-right: 15px;
+`;
+
+const SendButton = styled(Button).attrs(() => ({
+  color: 'primary',
+}))`
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 15px;
+`;
+
+const OptionWrapper = styled.div`
+  margin: 5px 0;
+  display: flex;
+  input {
+    margin-right: 10px;
+    cursor: pointer;
+  }
+  label {
+    font-size: 14px;
+    cursor: pointer;
+  }
+`;

package/src/Feedback/Sentiment.tsx

@@ -1,19 +1,58 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import type { SentimentProps } from '@theme/Feedback';
+import type { SentimentProps, ReasonsProps } from '@theme/Feedback';
+import { Comment, Reasons } from '@theme/Feedback';
 
 import { ThumbUp, ThumbDown } from './Thumbs';
 
 export const Sentiment = ({ settings, onSubmit }: SentimentProps): JSX.Element => {
-  const { label } = settings || {};
+  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const [score, setScore] = React.useState(0);
+  const [comment, setComment] = React.useState('');
+  const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
+
+  if (score && reasonsSettings?.enable && !reasons.length) {
+    const { label: reasonsLabel, items, multi } = reasonsSettings;
+    const buttonText = commentSettings?.enable ? 'Next' : 'Send';
+    return (
+      <Reasons
+        onSubmit={({ reasons }) => setReasons(reasons)}
+        settings={{ label: reasonsLabel, items, multi, buttonText }}
+      />
+    );
+  }
+
+  if (score && commentSettings?.enable && !comment) {
+    const commentLabel =
+      score === 1
+        ? commentSettings.likeLabel || 'What was most helpful?'
+        : commentSettings.dislikeLabel || 'What can we improve?';
+    return (
+      <Comment onSubmit={({ comment }) => setComment(comment)} settings={{ label: commentLabel }} />
+    );
+  }
+
+  if (score) {
+    onSubmit({
+      score,
+      comment,
+      reasons,
+    });
+    return (
+      <Wrapper>
+        <Label>{submitText || 'Thank you for helping improve our documentation!'}</Label>
+      </Wrapper>
+    );
+  }
+
   return (
-    <Wrapper>
+    <Wrapper data-component-name="Feedback/Sentiment">
       <Label>{label || 'Was this page helpful?'}</Label>
-      <Vote onClick={() => onSubmit(1)}>
+      <Vote onClick={() => setScore(1)}>
         <ThumbUp text="Yes" />
       </Vote>
-      <Vote onClick={() => onSubmit(-1)}>
+      <Vote onClick={() => setScore(-1)}>
         <ThumbDown />
       </Vote>
     </Wrapper>