@redocly/theme 0.10.0 → 0.11.0

package/src/Feedback/Feedback.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-
-import type { FeedbackProps } from '@theme/types/portal/src/shared/types/feedback';
-import { Rating, Sentiment, Comment } from '@theme/Feedback';
-import { useThemeConfig } from '@theme/hooks';
-import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
-
-export const Feedback = (props: FeedbackProps & { path?: string }) => {
-  const { submitFeedback } = useSubmitFeedback();
-  const { feedback: themeFeedbackConf } = useThemeConfig();
-  const feedbackConf = { ...themeFeedbackConf, ...props };
-
-  const { type, settings, path } = feedbackConf;
-  switch (type) {
-    case 'rating':
-      return (
-        <Rating
-          settings={settings}
-          onSubmit={(values) => submitFeedback({ type: 'rating', values, path })}
-        />
-      );
-    case 'sentiment':
-      return (
-        <Sentiment
-          settings={settings}
-          onSubmit={(values) => submitFeedback({ type: 'sentiment', values, path })}
-        />
-      );
-    case 'comment':
-      return (
-        <Comment
-          settings={settings}
-          onSubmit={(values) => submitFeedback({ type: 'comment', values, path })}
-        />
-      );
-    default:
-      console.log(`No feedback with type ${type}!`);
-      break;
-  }
-
-  return <></>;
-};

package/src/Feedback/Rating.tsx

@@ -1,107 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import type { RatingProps, ReasonsProps } from '@theme/Feedback';
-import { Comment, Reasons } from '@theme/Feedback';
-
-type StarsProps = {
-  onSubmit: (value: number) => void;
-  max: number;
-};
-
-export const Rating = ({ settings, onSubmit }: RatingProps): JSX.Element => {
-  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 (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) {
-    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>
-      </Wrapper>
-    );
-  }
-
-  return (
-    <Wrapper data-component-name="Feedback/Rating">
-      <Label>{label || 'How helpful was this page?'}</Label>
-      <Stars max={max || 5} onSubmit={setScore} />
-    </Wrapper>
-  );
-};
-
-const Stars = ({ max, onSubmit }: StarsProps): JSX.Element => {
-  const [hovered, setHovered] = React.useState(0);
-  const stars: JSX.Element[] = [];
-
-  for (let index = 1; index <= max; index++) {
-    stars.push(
-      <Star
-        key={index}
-        onClick={() => onSubmit(index)}
-        onMouseOver={() => setHovered(index)}
-        onMouseLeave={() => setHovered(0)}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-          {hovered < index ? (
-            <g fill="#e8c002">
-              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z" />
-            </g>
-          ) : (
-            <g fill="#e8c002">
-              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" />
-            </g>
-          )}
-        </svg>
-      </Star>,
-    );
-  }
-
-  return <>{stars}</>;
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Star = styled.span`
-  cursor: pointer;
-`;
-
-const Label = styled.h3`
-  margin-right: 15px;
-  font-family: var(--font-family-base);
-`;

package/src/Feedback/Reasons.tsx

@@ -1,81 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { Button } from '@theme/Button/Button';
-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/ReportDialog.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { Comment } from '@theme/Feedback/Comment';
-import type { ReportDialogProps } from '@theme/Feedback';
-import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
-
-export const ReportDialog = ({
-  location,
-  settings,
-  onSubmit,
-  onCancel,
-}: ReportDialogProps): JSX.Element => {
-  const { label } = settings;
-  const { submitFeedback } = useSubmitFeedback();
-
-  return (
-    <Wrapper className="modal">
-      <Comment
-        settings={{ label }}
-        onSubmit={(value) => {
-          submitFeedback('problem', { ...value, location });
-          onSubmit();
-        }}
-        onCancel={onCancel}
-      />
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.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;
-  }
-`;

package/src/Feedback/Sentiment.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import type { SentimentProps, ReasonsProps } from '@theme/Feedback';
-import { Comment, Reasons } from '@theme/Feedback';
-import { ThumbUp, ThumbDown } from '@theme/Feedback/Thumbs';
-
-export const Sentiment = ({ settings, onSubmit }: SentimentProps): JSX.Element => {
-  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 data-component-name="Feedback/Sentiment">
-      <Label>{label || 'Was this page helpful?'}</Label>
-      <Vote onClick={() => setScore(1)}>
-        <ThumbUp text="Yes" />
-      </Vote>
-      <Vote onClick={() => setScore(-1)}>
-        <ThumbDown />
-      </Vote>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  font-family: var(--font-family-base);
-  display: flex;
-  align-items: center;
-`;
-
-const Label = styled.h3`
-  margin-right: 15px;
-`;
-
-const Vote = styled.div`
-  cursor: pointer;
-  margin: 0 10px;
-`;

package/src/Feedback/index.ts

@@ -1,8 +0,0 @@
-export { Feedback } from '@theme/Feedback/Feedback';
-export { Rating } from '@theme/Feedback/Rating';
-export { Sentiment } from '@theme/Feedback/Sentiment';
-export { Comment } from '@theme/Feedback/Comment';
-export { Reasons } from '@theme/Feedback/Reasons';
-export { ReportDialog } from '@theme/Feedback/ReportDialog';
-export { useReportDialog } from '@theme/Feedback/useReportDialog';
-export * from './types';

package/src/Feedback/types.ts

@@ -1,66 +0,0 @@
-export type RatingProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
-  settings?: {
-    label?: string;
-    max?: number;
-    submitText?: string;
-    comment?: {
-      enable: boolean;
-      label?: string;
-    };
-    reasons?: {
-      enable: boolean;
-      label?: string;
-      multi?: boolean;
-      items: string[];
-    };
-  };
-};
-
-export type SentimentProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
-  settings?: {
-    label?: string;
-    submitText?: string;
-    comment?: {
-      enable: boolean;
-      likeLabel?: string;
-      dislikeLabel?: string;
-    };
-    reasons?: {
-      enable: boolean;
-      label?: string;
-      multi?: boolean;
-      items: string[];
-    };
-  };
-};
-
-export type CommentProps = {
-  onSubmit: (value: { comment: string }) => void;
-  onCancel?: () => unknown;
-  settings?: {
-    label?: string;
-    submitText?: string;
-  };
-};
-
-export type ReasonsProps = {
-  onSubmit: (value: { reasons: string[] }) => void;
-  settings: {
-    label?: string;
-    multi?: boolean;
-    items: string[];
-    submitText?: string;
-    buttonText?: string;
-  };
-};
-
-export type ReportDialogProps = {
-  location: string;
-  onSubmit: () => void;
-  onCancel: () => void;
-  settings: {
-    label?: string;
-  };
-};

package/src/Feedback/useReportDialog.ts

@@ -1,34 +0,0 @@
-import { useState } from 'react';
-
-import type { ReportDialogProps } from '@theme/Feedback/types';
-
-type ReportSettings = {
-  hide?: boolean;
-  label?: string;
-  tooltipText?: string;
-};
-
-export function useReportDialog(reportSettings: ReportSettings): Record<string, any> {
-  const [isReportDialogShown, setIsReportDialogShown] = 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: Partial<ReportDialogProps> = {
-    settings: {
-      label: reportSettings.label || 'What is wrong with a code?',
-    },
-    onSubmit: hideReportDialog,
-    onCancel: hideReportDialog,
-  };
-
-  return { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps };
-}

package/src/Footer/CustomFooter.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { CustomFooterNavItem } from '@theme/Footer/CustomFooterNavItem';
-import { FooterCopyright } from '@theme/Footer/FooterCopyright';
-import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
-
-interface FooterProps {
-  data: NavGroupRecord;
-}
-
-export function CustomFooter({ data }: FooterProps): JSX.Element | null {
-  if (!data) {
-    return null;
-  }
-
-  return (
-    <FooterContainer data-component-name="Footer/CustomFooter">
-      {(data.links as ResolvedNavItem[]).map((navItem, index) => {
-        return (
-          <CustomFooterNavItem
-            key={`${navItem.label}_${index}`}
-            data-cy={navItem.label}
-            navItem={navItem}
-          />
-        );
-      })}
-      <FooterCopyright copyrightText={data.copyrightText} />
-    </FooterContainer>
-  );
-}
-
-const FooterContainer = styled.div`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: block;
-  background-color: var(--footer-background-color);
-  text-align: center;
-  font-family: var(--font-family-base);
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    display: block;
-  }
-`;

package/src/Footer/Footer.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { FooterColumns } from '@theme/Footer/FooterColumns';
-import { FooterCopyright } from '@theme/Footer/FooterCopyright';
-import { isEmptyArray } from '@theme/utils';
-import { useThemeConfig } from '@theme/hooks';
-import type { NavGroup, ResolvedNavItem } from '@theme/types/portal';
-
-interface FooterProps {
-  data: {
-    items?: NavGroup;
-    copyrightText?: string;
-  };
-}
-
-export function Footer({ data: { items, copyrightText } }: FooterProps): JSX.Element | null {
-  const { footer } = useThemeConfig();
-
-  if (isEmptyArray(items) || !copyrightText || footer?.hide) {
-    return null;
-  }
-
-  return (
-    <FooterContainer data-component-name="Footer/Footer">
-      <FooterColumns columns={items as ResolvedNavItem[]} />
-      <FooterCopyright copyrightText={copyrightText} />
-    </FooterContainer>
-  );
-}
-
-const FooterContainer = styled.footer`
-  font-size: var(--footer-font-size);
-  flex-shrink: 0;
-  background-color: var(--footer-background-color);
-  color: var(--footer-text-color);
-  font-family: var(--footer-font-family);
-  font-weight: var(--footer-font-weight);
-  a,
-  a:hover {
-    color: var(--footer-text-color);
-  }
-`;

package/src/Footer/FooterColumns.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { FooterColumn } from '@theme/Footer/FooterColumn';
-import type { ResolvedNavItem } from '@theme/types/portal';
-
-interface FooterColumnsProps {
-  columns: ResolvedNavItem[];
-}
-
-export function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null {
-  if (!columns?.length) {
-    return null;
-  }
-
-  return (
-    <FooterColumnsContainer data-component-name="Footer/FooterColumns">
-      <FooterRow>
-        {columns.map((column, index) => (
-          <FooterColumn key={`${column.label}_${index}`} column={column} />
-        ))}
-      </FooterRow>
-    </FooterColumnsContainer>
-  );
-}
-
-export const FooterColumnsContainer = styled.div`
-  padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  max-width: var(--footer-container-max-width);
-  margin: 0 auto;
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    padding: 5.625em 20px 3.9375em 20px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.print} {
-    color: black;
-    display: none;
-  }
-`;
-
-export const FooterRow = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    justify-content: space-evenly;
-  }
-`;

package/src/Footer/index.ts

@@ -1,4 +0,0 @@
-export * from '@theme/Footer/Footer';
-export * from '@theme/Footer/FooterColumn';
-export * from '@theme/Footer/FooterColumns';
-export * from '@theme/Footer/FooterCopyright';