@redocly/theme 0.7.4 → 0.7.5

package/src/Catalog/Filter.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
+import { Checkbox } from '@theme/ui/Checkbox';
+
+export function Filter({ filter }: { filter: ResolvedFilter }) {
+  if (!filter.parentUsed) return null;
+  return (
+    <FilterGroup key={filter.property + filter.title}>
+      <FilterTitle>{filter.title} filter</FilterTitle>
+      {filter.type === 'select' ? (
+        <StyledSelect
+          onChange={(e) => filter.selectOption(e.target.value)}
+          value={filter.selectedOptions.values().next()?.value || ''}
+        >
+          <option key="none" value="">
+            All
+          </option>
+          {filter.filteredOptions.map((value: any) => (
+            <option key={value.value} value={value.value}>
+              {value.value} ({value.count})
+            </option>
+          ))}
+        </StyledSelect>
+      ) : (
+        filter.filteredOptions.map((value: any) => {
+          const id = 'filter--' + filter.property + '--' + slug(value.value);
+          return (
+            <FilterValue key={id}>
+              <Checkbox
+                type="checkbox"
+                id={id}
+                checked={filter.selectedOptions.has(value.value)}
+                onChange={() => filter.toggleOption(value.value)}
+              />
+              <label htmlFor={id}>
+                {value.value} ({value.count})
+              </label>
+            </FilterValue>
+          );
+        })
+      )}
+    </FilterGroup>
+  );
+}
+
+const FilterGroup = styled.div`
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-color);
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+`;
+
+const FilterTitle = styled.h4`
+  font-size: 18px;
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  margin-bottom: 16px;
+`;
+
+const FilterValue = styled.label`
+  display: block;
+  cursor: pointer;
+  font-size: 16px;
+  margin: 8px 0;
+
+  input {
+    cursor: pointer;
+  }
+`;
+
+const StyledSelect = styled.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: string): string {
+  return str.replace(/\s/g, '-').toLowerCase();
+}

package/src/Catalog/Tags.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Highlight } from '@theme/ui/Highlight';
+
+export function Tags({ tags }: { tags: string[] }) {
+  return (
+    <TagsWrapper>
+      {tags.map((tag) => (
+        <Tag key={tag} className={'tag-' + slug(tag)}>
+          <Highlight>{tag}</Highlight>
+        </Tag>
+      ))}
+    </TagsWrapper>
+  );
+}
+
+const TagsWrapper = styled.div`
+  margin-top: 16px;
+`;
+
+const Tag = styled.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: string): string {
+  return str.replace(/\s/g, '-').toLowerCase();
+}

package/src/Feedback/ReportDialog.tsx

@@ -0,0 +1,51 @@
+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, onCancel }}
+        onSubmit={(value) => {
+          submitFeedback('problem', { ...value, location });
+          onSubmit();
+        }}
+      />
+    </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/index.ts

@@ -2,4 +2,6 @@ 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

@@ -56,9 +56,11 @@ export type ReasonsProps = {
   };
 };
 
-export type ProblemProps = {
-  onSubmit: (value: string, location: string) => void; // TODO: maybe we don't need location here
-  settings?: {
+export type ReportDialogProps = {
+  location: string;
+  onSubmit: () => void;
+  onCancel: () => void;
+  settings: {
     label?: string;
   };
 };

package/src/Feedback/useReportDialog.ts

@@ -0,0 +1,34 @@
+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/Markdown/CodeSample/CodeSample.tsx

@@ -3,9 +3,7 @@ import styled, { css } from 'styled-components';
 
 import { ClipboardService } from '@theme/utils/ClipboardService';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-import { Comment } from '@theme/Feedback';
-import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
-import { useReportDialog } from '@theme/hooks/useReportDialog';
+import { ReportDialog, useReportDialog } from '@theme/Feedback';
 
 export type CodeSampleProps = {
   language: string;
@@ -15,16 +13,16 @@ export type CodeSampleProps = {
 
 export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
-  const { codeSnippet: { copy = {}, report = { hide: true } } = {} } = useThemeConfig(); // TODO: report temporary disabled
-  const { submitFeedback } = useSubmitFeedback();
+  const { codeSnippet: { copy = {}, report = {} } = {} } = useThemeConfig();
 
   const [isCopied, setIsCopied] = useState(false);
-  const [isDialogShown, showDialog, hideDialog] = useReportDialog(false);
+  const { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps } =
+    useReportDialog(report);
 
   const copyCode = (code: string) => {
     ClipboardService.copyCustom(code);
     setIsCopied(true);
-    setTimeout(() => setIsCopied(false), copy.toasterDuration || 1000);
+    setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
   };
 
   return (
@@ -44,28 +42,9 @@ export function CodeSample({ rawContent, highlighted, language }: CodeSampleProp
           </>
         )}
 
-        {!report.hide && (
-          <Button onClick={() => showDialog()} title={report.tooltipText || 'Report a problem'}>
-            Report
-          </Button>
-        )}
+        {isReportButtonShown && <Button {...reportButtonProps}>Report</Button>}
 
-        {isDialogShown && (
-          <ReportDialog id="modal">
-            <Comment
-              settings={{
-                label: report.label || 'What is wrong with a code?',
-                onCancel: () => {
-                  hideDialog();
-                },
-              }}
-              onSubmit={(value) => {
-                submitFeedback('problem', { ...value, location: rawContent });
-                hideDialog();
-              }}
-            />
-          </ReportDialog>
-        )}
+        {isReportDialogShown && <ReportDialog {...reportDialogProps} location={rawContent} />}
       </CodeSampleButtonContainer>
       <pre className={langClassName}>
         <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
@@ -242,25 +221,3 @@ const Wrapper = styled.div`
     ${darkStyleTokens};
   }
 `;
-
-const ReportDialog = styled.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;
-  }
-`;

package/src/Sidebar/ArrowBack.tsx

@@ -7,7 +7,7 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 12 10"
-      width="12px"
+      width="10px"
       height="10px"
       className={className}
     >
@@ -19,7 +19,7 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
 
 export const ArrowBack = styled(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;

package/src/Sidebar/SidebarLayout.tsx

@@ -7,13 +7,23 @@ import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
 import { MenuContainer } from '@theme/Sidebar/MenuContainer';
 import { SidebarSearch } from '@theme/Search/SidebarSearch';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { ArrowBack } from '@theme/Sidebar/ArrowBack';
+import { Link } from '@portal/Link';
 
 interface SidebarLayoutProps {
   versions: React.ReactNode;
   menu: React.ReactNode;
+  backLink?: {
+    label: string;
+    slug: string;
+  };
 }
 
-export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {
+export function SidebarLayout({
+  versions,
+  menu,
+  backLink,
+}: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
   const { search, sidebar } = useThemeConfig();
@@ -28,6 +38,15 @@ export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Eleme
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
       <Sidebar animate={true} opened={isOpen}>
+        {(backLink && (
+          <BackLinkWrapper>
+            <Link to={backLink.slug}>
+              <ArrowBack />
+              Back to {backLink.label}
+            </Link>
+          </BackLinkWrapper>
+        )) ||
+          null}
         {versions}
         <MenuContainer>{menu}</MenuContainer>
       </Sidebar>
@@ -35,4 +54,22 @@ export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Eleme
   );
 }
 
+const BackLinkWrapper = styled.div`
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal)
+    calc(var(--sidebar-offset-left) + var(--sidebar-item-padding-horizontal));
+
+  a {
+    color: var(--sidebar-back-button-text-color);
+    font-size: var(--sidebar-back-button-font-size);
+    font-family: var(--sidebar-back-button-font-family);
+    text-decoration: none;
+    &:hover {
+      color: var(--sidebar-back-button-hover-text-color);
+    }
+  }
+
+  border-bottom: 1px solid var(--sidebar-border-color);
+`;
+
 const Wrapper = styled.div``;

package/src/config.ts

@@ -132,7 +132,7 @@ export const ThemeConfig = z
           .object({
             buttonText: z.string().default('Copy').optional(),
             tooltipText: z.string().default('Copy to clipboard').optional(),
-            toasterText: z.string().default('Copied').optional(),
+            toasterText: z.string().default('Copied!').optional(),
             toasterDuration: z.number().default(1500).optional(),
           })
           .extend(HideConfig.shape)
@@ -145,7 +145,7 @@ export const ThemeConfig = z
           })
           .extend(HideConfig.shape)
           .optional()
-          .default({}),
+          .default({ hide: true }),
       })
       .strict()
       .default({})

package/src/globalStyle.ts

@@ -517,7 +517,7 @@ const sidebar = css`
   --sidebar-back-button-font-family: var(--sidebar-item-font-family);
   --sidebar-back-button-font-size: var(--sidebar-item-font-size);
   --sidebar-back-button-transform: inherit;
-  --sidebar-back-button-text-color: var(--sidebar-item-text-color);
+  --sidebar-back-button-text-color: var(--link-text-color);
   --sidebar-back-button-background-color: transparent;
   --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);
   --sidebar-back-button-hover-background-color: transparent;
@@ -1706,7 +1706,7 @@ const inputs = css`
   --input-border: none; // @presenter Border
   --input-border-radius: var(--border-radius); // @presenter BorderRadius
   --input-font-size: var(--font-size-base); // @presenter FontSize
-  --input-font-family: var(--code-font-family); // @presenter FontFamily
+  --input-font-family: var(--font-family-base); // @presenter FontFamily
   --input-line-height: 1.15em; // @presenter LineHeight
   --input-padding: 8px;
 
@@ -1716,6 +1716,8 @@ const inputs = css`
   --input-focus-text-color: var(--text-color-inverse); // @presenter Color
   --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color
 
+  --checkbox-backround-color: var(--background-color);
+  --checkbox-checked-backround-color: var(--color-primary-500);
   // @tokens End
 `;
 
@@ -1925,7 +1927,7 @@ const pages = css`
 
   --page-404-font-family: var(--font-family-base); // @presenter FontFamily
 
-  --page-404-header-text-color: #000; 
+  --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
@@ -1945,31 +1947,31 @@ const pages = css`
   * @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
 `
 
 const modal = css`
-  body:has([id='modal']) {
+  body:has(.modal) {
     overflow: hidden;
   }
-  
+
   --modal-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
   --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
   --modal-background-color: var(--background-color);

package/src/mocks/hooks/index.ts

@@ -1,5 +1,6 @@
 import type { ThemeUIConfig } from '@theme/config';
-
+import type { ResolvedNavItem } from '@theme/types/portal';
+import type { CatalogConfig, FilteredCatalog } from '@theme/types/portal/src/shared/types/catalog';
 interface PageLink {
   label: string;
   link: string;
@@ -65,3 +66,11 @@ export function useSidebarSiblingsData(): { nextPage: PageLink | null; prevPage:
     },
   };
 }
+
+export function usePageSharedData<T = unknown>(_id: string): T {
+  throw new Error('Mock not implemented yet.');
+}
+
+export function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): FilteredCatalog {
+  throw new Error('Mock not implemented yet.');
+}

package/src/types/portal/src/shared/types/catalog.d.ts

@@ -0,0 +1,55 @@
+import type { NavItem } from './nav';
+
+export type FilteredCatalog = {
+  groups: { title: string; items: CatalogItem[] }[];
+  filters: ResolvedFilter[];
+  filterTerm: string;
+  setFilterTerm: (term: string) => void;
+};
+
+export type Filter = {
+  type?: 'select' | 'checkboxes';
+  title: string;
+  property: string;
+  parentFilter?: string;
+  missingCategoryName?: string;
+  options?: string[];
+};
+
+export type CatalogConfig = {
+  slug: string;
+  filters: Filter[];
+  groupByFirstFilter: boolean;
+  items: NavItem[];
+  requiredPermission?: string;
+  separateVersions?: boolean;
+  title?: string;
+  description?: string;
+};
+
+export type CatalogThemeConfig = {
+  catalog: Record<string, CatalogConfig>;
+};
+
+export type ResolvedFilter = Omit<Filter, 'options'> & {
+  options: {
+    value: string;
+    count: number;
+  }[];
+  filteredOptions: {
+    value: string;
+    count: number;
+  }[];
+  toggleOption: (option: string) => void;
+  selectOption: (option: string) => void;
+  parentUsed: boolean;
+  selectedOptions: Set<string>;
+};
+
+export type CatalogItem = {
+  title: string;
+  link: string;
+  description?: string;
+  image?: string;
+  [k: string]: unknown;
+};

package/src/ui/Checkbox.tsx

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+export const Checkbox = styled.input`
+  position: absolute;
+  opacity: 0;
+
+  & + label {
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+
+    div {
+      margin-top: 1px;
+    }
+    p {
+      line-height: 1.2;
+    }
+
+    &::before {
+      content: '';
+      margin-right: 10px;
+      display: inline-block;
+      vertical-align: top;
+      width: 18px;
+      height: 18px;
+      background: var(--checkbox-backround-color);
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+  }
+
+  &:focus + label:before {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+  }
+
+  &:checked + label {
+    &::before {
+      background: var(--checkbox-checked-backround-color);
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 5px;
+      top: 10px;
+      background: var(--checkbox-backround-color);
+      width: 2px;
+      height: 2px;
+      box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white,
+        4px -8px 0 white;
+      transform: rotate(45deg);
+    }
+  }
+
+  &:disabled + label {
+    color: #b8b8b8;
+    cursor: auto;
+    &::before {
+      box-shadow: none;
+      background: #ddd;
+    }
+  }
+`;