@redocly/theme 0.21.2 → 0.22.0

package/lib/layouts/OIDCForbidden.js

@@ -0,0 +1,95 @@
+"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.OIDCForbidden = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../mocks/hooks");
+function OIDCForbidden() {
+    const { translate } = (0, hooks_1.useTranslate)();
+    const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
+    const [errorDescription, setErrorDescription] = (0, react_1.useState)('');
+    const translationKeys = {
+        title: 'theme.page.forbidden.title',
+    };
+    // use whatever you want here
+    const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
+    const renderText = (text) => text.split(' ').map((part) => URL_REGEX.test(part) ? (react_1.default.createElement(ErrorDescriptionLink, { key: part, href: part },
+        part,
+        ' ')) : (part + ' '));
+    (0, react_1.useEffect)(() => {
+        if (Array.from(searchParams).length) {
+            setErrorDescription(searchParams.get('error_description') || searchParams.get('error') || '');
+            setSearchParams({});
+        }
+    }, [searchParams, setSearchParams]);
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/OIDCForbidden" },
+        react_1.default.createElement(Header, null, "403"),
+        react_1.default.createElement(Description, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Access forbidden')),
+        errorDescription && react_1.default.createElement(ErrorDescription, null, renderText(errorDescription))));
+}
+exports.OIDCForbidden = OIDCForbidden;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 25px auto;
+  font-family: var(--page-403-font-family);
+  text-align: center;
+`;
+const Header = styled_components_1.default.div `
+  color: var(--page-403-header-text-color);
+  margin: var(--page-403-header-margin);
+  font-size: var(--page-403-header-font-size);
+  line-height: var(--page-403-header-line-height);
+  font-weight: var(--page-403-header-font-weight);
+`;
+const Description = styled_components_1.default.div `
+  color: var(--page-403-description-text-color);
+  margin: var(--page-403-description-margin);
+  font-size: var(--page-403-description-font-size);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+const ErrorDescription = styled_components_1.default.div `
+  margin: var(--page-403-oidc-description-margin);
+  font-size: var(--page-403-oidc-description-font-size);
+  color: var(--page-403-description-text-color);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+const ErrorDescriptionLink = styled_components_1.default.a `
+  color: var(--link-text-color);
+
+  &:hover {
+    color: var(--link-hover-text-color);
+  }
+`;
+//# sourceMappingURL=OIDCForbidden.js.map

package/lib/layouts/index.d.ts

@@ -2,3 +2,4 @@ export * from '../layouts/RootLayout';
 export * from '../layouts/PageLayout';
 export * from '../layouts/NotFound';
 export * from '../layouts/Forbidden';
+export * from '../layouts/OIDCForbidden';

package/lib/layouts/index.js

@@ -18,4 +18,5 @@ __exportStar(require("../layouts/RootLayout"), exports);
 __exportStar(require("../layouts/PageLayout"), exports);
 __exportStar(require("../layouts/NotFound"), exports);
 __exportStar(require("../layouts/Forbidden"), exports);
+__exportStar(require("../layouts/OIDCForbidden"), exports);
 //# sourceMappingURL=index.js.map

package/lib/types/portal/src/shared/constants.d.ts

@@ -6,7 +6,8 @@ export type DEFAULT_COOKIE_EXPIRATION = number;
 export declare enum FEEDBACK_TYPES {
     RATING = "rating",
     SENTIMENT = "sentiment",
-    COMMENT = "comment"
+    COMMENT = "comment",
+    MOOD = "mood"
 }
 export declare const DEV_LOGIN_SLUG = "/login/";
 export declare enum ExternalRoutes {

package/lib/types/portal/src/shared/constants.js

@@ -9,6 +9,7 @@ var FEEDBACK_TYPES;
     FEEDBACK_TYPES["RATING"] = "rating";
     FEEDBACK_TYPES["SENTIMENT"] = "sentiment";
     FEEDBACK_TYPES["COMMENT"] = "comment";
+    FEEDBACK_TYPES["MOOD"] = "mood";
 })(FEEDBACK_TYPES = exports.FEEDBACK_TYPES || (exports.FEEDBACK_TYPES = {}));
 exports.DEV_LOGIN_SLUG = '/login/';
 var ExternalRoutes;

package/lib/types/portal/src/shared/types/feedback.d.ts

@@ -1,5 +1,5 @@
 import type { FEEDBACK_TYPES } from '../constants';
-import type { RatingProps, SentimentProps, CommentProps } from '../../../../../components/Feedback';
+import type { RatingProps, SentimentProps, CommentProps, MoodProps } from '../../../../../components/Feedback';
 export type SubmitFeedbackParams = {
     type: string;
     values: Record<string, unknown>;
@@ -7,5 +7,5 @@ export type SubmitFeedbackParams = {
 };
 export type FeedbackProps = {
     type: FEEDBACK_TYPES;
-    settings: (RatingProps | SentimentProps | CommentProps)['settings'];
+    settings: (RatingProps | SentimentProps | CommentProps | MoodProps)['settings'];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.21.2",
+  "version": "0.22.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
-    "@redocly/portal-types": "1.0.2"
+    "@redocly/portal-types": "1.1.0"
   },
   "dependencies": {
     "@redocly/ajv": "^8.11.0",

package/src/components/Catalog/CatalogCard.tsx

@@ -50,7 +50,7 @@ export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
   );
 }
 
-function statusToColor(status: string) {
+export function statusToColor(status: string) {
   switch (status) {
     case 'Below minimum':
       return 'error';

package/src/components/Feedback/Emotions.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { SatisfiedIcon, DissatisfiedIcon, NeutralIcon } from '@theme/icons';
+
+export const Satisfied = () => {
+  return (
+    <Wrapper>
+      <Icon>
+        <SatisfiedIcon />
+      </Icon>
+    </Wrapper>
+  );
+};
+
+export const Dissatisfied = () => {
+  return (
+    <Wrapper>
+      <Icon>
+        <DissatisfiedIcon />
+      </Icon>
+    </Wrapper>
+  );
+};
+
+export const Neutral = () => {
+  return (
+    <Wrapper>
+      <Icon>
+        <NeutralIcon />
+      </Icon>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  color: var(--color-info-text);
+  &:hover {
+    color: var(--color-info-text-active);
+    svg {
+      > g {
+        fill: var(--color-info-text-active);
+      }
+    }
+  }
+`;
+
+const Icon = styled.div`
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  > svg {
+    > g {
+      fill: var(--color-info-text);
+    }
+  }
+`;

package/src/components/Feedback/Feedback.tsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 import type { FeedbackProps } from '@theme/types/portal/src/shared/types/feedback';
-import { Rating, Sentiment, Comment } from '@theme/components/Feedback';
+import { Rating, Sentiment, Comment, Mood } from '@theme/components/Feedback';
 import { useThemeConfig } from '@theme/hooks';
 import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
 import { telemetry } from '@portal/telemetry';
@@ -40,6 +40,18 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
             />
           </Wrapper>
         );
+      case 'mood':
+        return (
+          <Wrapper>
+            <Mood
+              settings={settings}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'mood', values, path });
+                telemetry.send('feedback_sent', { type: 'mood' });
+              }}
+            />
+          </Wrapper>
+        );
       case 'comment':
         return (
           <Wrapper>

package/src/components/Feedback/Mood.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import type { MoodProps, ReasonsProps } from '@theme/components/';
+import { useTranslate } from '@portal/hooks';
+import { Dissatisfied, Neutral, Satisfied } from '@theme/components/Feedback/Emotions';
+import { Comment, Reasons } from '@theme/components/Feedback';
+
+export enum MOOD_STATES {
+  SATISFIED = 'satisfied',
+  NEUTRAL = 'neutral',
+  DISSATISFIED = 'dissatisfied',
+}
+
+export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element => {
+  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const [score, setScore] = React.useState('');
+  const [comment, setComment] = React.useState('');
+  const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
+  const { translate } = useTranslate();
+  const translationKeys = {
+    submitText: 'theme.feedback.settings.submitText',
+    label: 'theme.feedback.settings.label',
+    satisfiedLabel: 'theme.feedback.settings.comment.satisfiedLabel',
+    neutralLabel: 'theme.feedback.settings.comment.neutralLabel',
+    dissatisfiedLabel: 'theme.feedback.settings.comment.dissatisfiedLabel',
+  };
+
+  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 renderCommentLabel = (score: string) => {
+      switch (score) {
+        case MOOD_STATES.SATISFIED:
+          return translate(
+            translationKeys.satisfiedLabel,
+            commentSettings.satisfiedLabel || 'What was most helpful?',
+          );
+        case MOOD_STATES.NEUTRAL:
+          return translate(
+            translationKeys.neutralLabel,
+            commentSettings.neutralLabel || 'What can we improve?',
+          );
+        case MOOD_STATES.DISSATISFIED:
+          return translate(
+            translationKeys.dissatisfiedLabel,
+            commentSettings.dissatisfiedLabel || 'What can we improve?',
+          );
+        default:
+          return translate(translationKeys.satisfiedLabel, 'What can we improve?');
+      }
+    };
+    return (
+      <Comment
+        onSubmit={({ comment }) => setComment(comment)}
+        settings={{ label: renderCommentLabel(score) }}
+      />
+    );
+  }
+
+  if (score) {
+    onSubmit({
+      score,
+      comment,
+      reasons,
+    });
+    return (
+      <Wrapper>
+        <Label data-translation-key={translationKeys.submitText}>
+          {translate(translationKeys.submitText, submitText || 'Thank you for your feedback!')}
+        </Label>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper data-component-name="Feedback/Mood" className={className}>
+      <Label data-translation-key={translationKeys.label}>
+        {translate(translationKeys.label, label || 'Was this page helpful?')}
+      </Label>
+      <Vote
+        onClick={() => {
+          setScore(MOOD_STATES.DISSATISFIED);
+        }}
+      >
+        <Dissatisfied />
+      </Vote>
+      <Vote
+        onClick={() => {
+          setScore(MOOD_STATES.NEUTRAL);
+        }}
+      >
+        <Neutral />
+      </Vote>
+      <Vote
+        onClick={() => {
+          setScore(MOOD_STATES.SATISFIED);
+        }}
+      >
+        <Satisfied />
+      </Vote>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  align-items: center;
+`;
+
+const Label = styled.h3`
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
+  margin-right: 15px;
+`;
+
+const Vote = styled.div`
+  cursor: pointer;
+  margin: 0 10px;
+`;

package/src/components/Feedback/index.ts

@@ -1,6 +1,7 @@
 export { Feedback } from '@theme/components/Feedback/Feedback';
 export { Rating } from '@theme/components/Feedback/Rating';
 export { Sentiment } from '@theme/components/Feedback/Sentiment';
+export { Mood } from '@theme/components/Feedback/Mood';
 export { Comment } from '@theme/components/Feedback/Comment';
 export { Reasons } from '@theme/components/Feedback/Reasons';
 export { ReportDialog } from '@theme/components/Feedback/ReportDialog';

package/src/components/Feedback/types.ts

@@ -20,6 +20,27 @@ export type RatingProps = {
   className?: string;
 };
 
+export type MoodProps = {
+  onSubmit: (value: { score: string; comment?: string; reasons?: string[] }) => void;
+  settings?: {
+    label?: string;
+    submitText?: string;
+    comment?: {
+      enable: boolean;
+      satisfiedLabel?: string;
+      neutralLabel?: string;
+      dissatisfiedLabel?: string;
+    };
+    reasons?: {
+      enable: boolean;
+      label?: string;
+      multi?: boolean;
+      items: string[];
+    };
+  };
+  className?: string;
+};
+
 export type SentimentProps = {
   onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
   settings?: {

package/src/components/OpenApiDocs/ScorecardBadges.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Tag } from '@theme/components/Tag';
+import { Link } from '@portal/Link';
+import { telemetry } from '@portal/telemetry';
+import { statusToColor } from '@theme/components/Catalog/CatalogCard';
+
+interface ScorecardBadgesProps {
+  metadata?: {
+    scorecardLevel?: string;
+    scorecardStatus?: string;
+    scoreCardSlug?: string;
+  };
+}
+
+export function ScorecardBadges(props: ScorecardBadgesProps) {
+  return (
+    (props.metadata?.scorecardLevel && (
+      <ScorecardBadgesWrapper data-component-name="OpenApiDocs/ScorecardBadges">
+        <ComplianceTag
+          level={props.metadata.scorecardLevel as string}
+          status={props.metadata?.scorecardStatus as string}
+          slug={props.metadata?.scoreCardSlug as string}
+        />
+      </ScorecardBadgesWrapper>
+    )) ||
+    null
+  );
+}
+
+const ScorecardBadgesWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  margin-top: var(--panel-gap-vertical);
+  position: absolute;
+  z-index: 1;
+  right: var(--panel-gap-horizontal);
+`;
+
+function ComplianceTag(props: { level: string; status: string; slug: string }) {
+  const { level, status, slug } = props;
+  return (
+    <Link to={slug}>
+      <Tag
+        color={statusToColor(status)}
+        size="large"
+        onClick={() => telemetry.send('scorecard_link_clicked', { action: 'click' })}
+      >
+        {level} oops
+      </Tag>
+    </Link>
+  );
+}

package/src/components/OpenApiDocs/index.ts

@@ -7,3 +7,4 @@ export * from '@theme/components/OpenApiDocs/hooks/AfterOpenApiOperation';
 export * from '@theme/components/OpenApiDocs/hooks/AfterOpenApiOperationSummary';
 export * from '@theme/components/OpenApiDocs/hooks/BeforeOpenApiOperation';
 export * from '@theme/components/OpenApiDocs/hooks/BeforeOpenApiOperationSummary';
+export * from '@theme/components/OpenApiDocs/ScorecardBadges';

package/src/config.ts

@@ -448,7 +448,7 @@ export const themeConfigSchema = {
         },
         type: {
           type: 'string',
-          enum: ['rating', 'sentiment', 'comment', 'reasons'],
+          enum: ['rating', 'sentiment', 'comment', 'reasons', 'mood'],
           default: 'sentiment',
         },
         settings: {
@@ -477,6 +477,9 @@ export const themeConfigSchema = {
                 label: { type: 'string' },
                 likeLabel: { type: 'string' },
                 dislikeLabel: { type: 'string' },
+                satisfiedLabel: { type: 'string' },
+                neutralLabel: { type: 'string' },
+                dissatisfiedLabel: { type: 'string' },
               },
               additionalProperties: false,
             },

package/src/globalStyle.ts

@@ -850,6 +850,9 @@ const pages = css`
   --page-403-description-margin: 0; // @presenter Spacing
 
   --page-403-button-margin: 4em; // @presenter Spacing
+    
+  --page-403-oidc-description-font-size: var(--font-size-lg);
+  --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
 
    // @tokens End
 `

package/src/icons/DissatisfiedIcon/DissatisfiedIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+    <rect
+      width="16"
+      height="16"
+      transform="translate(0 0.511719)"
+      fill="white"
+      style={{ mixBlendMode: 'multiply' }}
+    />
+    <path
+      d="M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7 6.9302 6.86831 6.61226 6.63389 6.37784C6.39947 6.14341 6.08152 6.01172 5.75 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5 6.9302 11.3683 6.61226 11.1339 6.37784C10.8995 6.14341 10.5815 6.01172 10.25 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M8 10.0117C7.30982 10.0129 6.63168 10.1926 6.03151 10.5334C5.43135 10.8743 4.92958 11.3646 4.575 11.9567L5.43 12.4567C5.69683 12.0136 6.07369 11.647 6.524 11.3925C6.97431 11.1381 7.48276 11.0043 8 11.0043C8.51724 11.0043 9.0257 11.1381 9.47601 11.3925C9.92631 11.647 10.3032 12.0136 10.57 12.4567L11.425 11.9567C11.0704 11.3646 10.5687 10.8743 9.96849 10.5334C9.36833 10.1926 8.69019 10.0129 8 10.0117Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+  </svg>
+);
+
+export const DissatisfiedIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DissatisfiedIcon/DissatisfiedIcon',
+}))``;

package/src/icons/DissatisfiedIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/DissatisfiedIcon/DissatisfiedIcon';

package/src/icons/NeutralIcon/NeutralIcon.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+    <rect
+      width="16"
+      height="16"
+      transform="translate(0 0.511719)"
+      fill="white"
+      style={{ mixBlendMode: 'multiply' }}
+    />
+    <path
+      d="M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7 6.9302 6.86831 6.61226 6.63389 6.37784C6.39947 6.14341 6.08152 6.01172 5.75 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5 6.9302 11.3683 6.61226 11.1339 6.37784C10.8995 6.14341 10.5815 6.01172 10.25 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path d="M11 10.5117H5V11.5117H11V10.5117Z" fill="black" fillOpacity="0.45" />
+  </svg>
+);
+
+export const NeutralIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/NeutralIcon/NeutralIcon',
+}))``;

package/src/icons/NeutralIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/NeutralIcon/NeutralIcon';

package/src/icons/SatisfiedIcon/SatisfiedIcon.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="17"
+    viewBox="0 0 16 17"
+    fill="none"
+  >
+    <rect
+      width="16"
+      height="16"
+      transform="translate(0 0.511719)"
+      fill="white"
+      style={{ mixBlendMode: 'multiply' }}
+    />
+    <path
+      d="M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7.00134 7.0972 6.96991 6.93405 6.90757 6.78179C6.84522 6.62953 6.7532 6.49121 6.63686 6.37487C6.52052 6.25853 6.38219 6.1665 6.22993 6.10416C6.07767 6.04181 5.91453 6.01039 5.75 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5013 7.0972 11.4699 6.93405 11.4076 6.78179C11.3452 6.62953 11.2532 6.49121 11.1369 6.37487C11.0205 6.25853 10.8822 6.1665 10.7299 6.10416C10.5777 6.04181 10.4145 6.01039 10.25 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M8 12.5117C8.69019 12.5106 9.36833 12.3308 9.96849 11.99C10.5687 11.6492 11.0704 11.1589 11.425 10.5667L10.57 10.0667C10.3032 10.5098 9.92631 10.8764 9.47601 11.1309C9.0257 11.3854 8.51724 11.5191 8 11.5191C7.48276 11.5191 6.97431 11.3854 6.524 11.1309C6.07369 10.8764 5.69683 10.5098 5.43 10.0667L4.575 10.5667C4.92958 11.1589 5.43135 11.6492 6.03151 11.99C6.63168 12.3308 7.30982 12.5106 8 12.5117Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+  </svg>
+);
+
+export const SatisfiedIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/SatisfiedIcon/SatisfiedIcon',
+}))``;

package/src/icons/SatisfiedIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/SatisfiedIcon/SatisfiedIcon';

package/src/icons/index.ts

@@ -21,3 +21,6 @@ export * from '@theme/icons/CheckboxIcon';
 export * from '@theme/icons/ErrorIcon';
 export * from '@theme/icons/EditIcon';
 export * from '@theme/icons/RocketIcon';
+export * from '@theme/icons/SatisfiedIcon';
+export * from '@theme/icons/DissatisfiedIcon';
+export * from '@theme/icons/NeutralIcon';