@redocly/theme 0.18.3-patch.0 → 0.18.3

package/src/components/Filter/FilterContent.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Button } from '@theme';
-
-import { useTranslate } from '@portal/hooks';
-import { FilterControls } from '@theme/components/Catalog';
-import { Filter } from '@theme/components/Filter/index';
-import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
-import { StyledInput } from '@theme/components/Filter/FilterPopover';
-
-interface FilterContentProps {
-  setFilterTerm: (value: string) => void;
-  filters: ResolvedFilter[];
-  filterTerm: string;
-  isMobile: boolean;
-}
-
-export function FilterContent({
-  setFilterTerm,
-  filters,
-  filterTerm,
-  isMobile,
-}: FilterContentProps) {
-  const { translate } = useTranslate();
-  const translationKeys = {
-    placeholder: 'theme.catalog.filters.placeholder',
-    clearAll: 'theme.catalog.filters.clearAll',
-  };
-
-  const handleClearAll = () => {
-    filters.forEach((filter) => filter.selectOption(''));
-  };
-
-  return (
-    <FilterContentWrapper isMobile={isMobile}>
-      <FilterControls>
-        <StyledInput
-          placeholder={translate(translationKeys.placeholder, 'Type to filter...')}
-          value={filterTerm}
-          onChange={(e) => setFilterTerm(e.target.value)}
-        />
-      </FilterControls>
-      <FilterItems>
-        {filters.map((filter, idx) => (
-          <Filter filter={filter} key={filter.property + '-' + idx} />
-        ))}
-      </FilterItems>
-      <Button size="small" onClick={handleClearAll}>
-        {translate(translationKeys.placeholder, 'Clear all filters')}
-      </Button>
-    </FilterContentWrapper>
-  );
-}
-
-const FilterContentWrapper = styled.div<{ isMobile?: boolean }>`
-  display: none;
-
-  ${Button} {
-    width: var(--filter-content-clear-button-width);
-    margin: var(--filter-content-clear-button-margin);
-  }
-
-  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.small} {
-    display: block;
-    border-right: 1px solid var(--filter-content-border-color);
-
-    ${FilterControls} {
-      background: var(--filter-controls-background-color);
-    }
-  }
-`;
-
-export const FilterItems = styled.div`
-  padding: var(--filter-content-items-padding);
-`;

package/src/components/Filter/FilterPopover.tsx

@@ -1,132 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Filter, FilterControls } from '@theme';
-
-import { FilterContent, FilterItems } from '@theme/components/Filter/FilterContent';
-import { useTranslate } from '@portal/hooks';
-import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
-
-interface FilterPopoverProps {
-  setIsAddingFilter: (value: boolean) => void;
-  setFilterTerm: (value: string) => void;
-  filters: ResolvedFilter[];
-  filterTerm: string;
-}
-
-export function FilterPopover({
-  setIsAddingFilter,
-  setFilterTerm,
-  filters,
-  filterTerm,
-}: FilterPopoverProps) {
-  const translationKeys = {
-    placeholder: 'theme.catalog.filters.placeholder',
-    done: 'theme.catalog.filters.done',
-  };
-  const { translate } = useTranslate();
-
-  return (
-    <FilterPopoverWrapper>
-      <FilterPopoverHeader>
-        <FilterPopoverHeaderLabel>Add Filter</FilterPopoverHeaderLabel>
-        <FilterPopoverHeaderButton onClick={() => setIsAddingFilter(false)}>
-          {translate(translationKeys.placeholder, 'Done')}
-        </FilterPopoverHeaderButton>
-      </FilterPopoverHeader>
-      <FilterContent
-        setFilterTerm={setFilterTerm}
-        filters={filters}
-        filterTerm={filterTerm}
-        isMobile
-      />
-      <FilterControls>
-        <StyledInput
-          placeholder={translate(translationKeys.placeholder, 'Type to filter...')}
-          value={filterTerm}
-          onChange={(e) => setFilterTerm(e.target.value)}
-        />
-      </FilterControls>
-      <FilterItems>
-        {filters.map((filter, idx) => (
-          <Filter filter={filter} key={filter.property + '-' + idx} />
-        ))}
-      </FilterItems>
-    </FilterPopoverWrapper>
-  );
-}
-
-const FilterPopoverWrapper = styled.aside<{ isActiveInMobileMode?: boolean }>`
-  position: absolute;
-  top: 0;
-  z-index: var(--z-index-popover);
-  height: 100vh;
-  overflow: auto;
-  transition: height 0.2s ease-in-out;
-  width: 100%;
-  background-color: var(--filter-popover-background-color);
-  display: block;
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    display: none;
-  }
-`;
-
-const FilterPopoverHeader = styled.div`
-  height: var(--navbar-height);
-  padding: var(--filter-popover-header-padding);
-  display: grid;
-  align-items: center;
-  grid-template-columns: 1fr 1fr 1fr;
-  border-bottom: 1px solid var(--filter-popover-header-border-color);
-  background-color: var(--filter-popover-header-background-color);
-`;
-
-const FilterPopoverHeaderLabel = styled.div`
-  color: var(--filter-popover-header-label-color);
-  justify-self: center;
-  grid-column-start: 2;
-  font-size: var(--filter-popover-header-label-font-size);
-  font-weight: var(--filter-popover-header-label-font-weight);
-`;
-
-const FilterPopoverHeaderButton = styled.div`
-  color: var(--filter-popover-header-button-color);
-  justify-self: end;
-  font-size: var(--filter-popover-header-button-font-size);
-  font-weight: var(--filter-popover-header-button-font-weight);
-  height: var(--filter-popover-header-button-height);
-  line-height: var(--filter-popover-header-button-height);
-`;
-
-export const StyledInput = styled.input`
-  border: var(--filter-input-border);
-  min-width: var(--filter-input-min-width);
-  width: 100%;
-  outline: none;
-  padding: var(--filter-input-padding);
-  border-radius: var(--filter-input-border-radius);
-  background-color: var(--filter-input-background-color);
-  color: var(--filter-input-color);
-  font-family: var(--filter-input-font-family);
-  font-size: var(--filter-input-font-size);
-  line-height: var(--filter-input-line-height);
-
-  &::placeholder {
-    opacity: var(--filter-input-placeholder-opacity);
-    color: var(--filter-input-placeholder-color);
-  }
-
-  &:hover {
-    color: var(--filter-input-hover-color);
-    border: var(--filter-input-hover-border);
-  }
-
-  &:focus {
-    color: var(--filter-input-focus-color);
-    border: var(--filter-input-focus-border);
-  }
-
-  &:-webkit-autofill {
-    background-color: var(--filter-input-background-color);
-  }
-`;

package/src/components/Filter/FilterTag.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { ClearIcon } from '@theme/components/Search/ClearIcon';
-
-interface FilterTagProps {
-  label: string;
-  onClick: () => void;
-}
-
-export function FilterTag({ label, onClick }: FilterTagProps) {
-  return (
-    <TagWrapper onClick={onClick}>
-      <TagLabel>{label}</TagLabel>
-      <ClearIcon />
-    </TagWrapper>
-  );
-}
-
-const TagWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  cursor: pointer;
-  color: var(--filter-tag-color);
-  border-radius: var(--filter-tag-border-radius);
-  border: 1px solid var(--filter-tag-border-color);
-  background-color: var(--filter-tag-background-color);
-  padding: var(--filter-tag-padding);
-  font-size: var(--filter-tag-font-size);
-  font-weight: var(--filter-tag-font-weight);
-  margin: var(--filter-tag-margin);
-`;
-
-const TagLabel = styled.div`
-  margin: var(--filter-tag-label-margin);
-`;

package/src/components/Filter/FilterTags.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
-import { FilterTag } from '@theme/components/Filter/FilterTag';
-
-interface FilterTagsProps {
-  filters: ResolvedFilter[];
-}
-
-export function FilterTags({ filters }: FilterTagsProps) {
-  const selectedFilters: { filter: ResolvedFilter; selectedOption: string }[] = [];
-  filters.forEach((filter: ResolvedFilter & { selectedOptions: any }) => {
-    if (filter.selectedOptions?.size) {
-      for (let selectedOption of filter.selectedOptions) {
-        selectedFilters.push({
-          filter,
-          selectedOption,
-        });
-      }
-    }
-  });
-
-  return (
-    <FilterTagsWrapper>
-      {selectedFilters.map(({ filter, selectedOption }) => (
-        <FilterTag
-          key={`${filter.title}: ${selectedOption}`}
-          onClick={() => filter.toggleOption(selectedOption)}
-          label={`${filter.title}: ${selectedOption}`}
-        />
-      ))}
-    </FilterTagsWrapper>
-  );
-}
-
-const FilterTagsWrapper = styled.div`
-  display: flex;
-`;

package/src/components/Filter/styledVariables.ts

@@ -1,109 +0,0 @@
-import { css } from 'styled-components';
-
-export const filter = css`
-  /* === Filter === */
-  /**
-  * @tokens Filters
-  */
-  --filter-group-padding: var(--spacing-base) 0 0 0;
-
-  --filter-title-font-weight: var(--font-weight-bold);
-  --filter-title-font-size: var(--font-size-base);
-  --filter-title-margin: 0 0 var(--spacing-xxs) 0;
-
-  --filter-option-font-weight: var(--font-weight-regular);
-  --filter-option-font-size: var(--font-size-base);
-  --filter-option-margin: var(--spacing-xs) 0 0 0;
-
-  --filter-option-label-font-size: var(--font-size-base);
-  --filter-option-label-font-weight: var(--font-weight-regular);
-  --filter-option-label-margin: 0 var(--spacing-xs) 0 0;
-  --filter-option-label-color: var(--text-secondary);
-
-  --filter-option-count-height: 14px;
-  --filter-option-count-color: var(--text-description);
-  --filter-option-count-font-size: var(--spacing-sm);
-  --filter-option-count-font-weight: var(--font-weight-regular);
-  --filter-option-count-padding: 0px var(--spacing-xxs);
-  --filter-option-count-border-radius: var(--spacing-sm);
-  --filter-option-count-border-color: 1px solid var(--border-secondary);
-  --filter-option-count-background-color: var(--bg-raised);
-
-  --filter-content-border-color: var(--border-secondary);
-  --filter-content-items-padding: 0 var(--mobile-catalog-filter-padding-horizontal);
-  --filter-content-clear-button-margin: var(--spacing-base) auto 0 auto;
-  --filter-content-clear-button-width: calc(var(--spacing-unit) * 40);
-  --filter-controls-background-color: var(--bg-base);
-
-  --filter-popover-background-color: var(--bg-base);
-  --filter-popover-header-padding: var(--mobile-catalog-filter-padding-vertical) var(--mobile-catalog-filter-padding-horizontal);
-  --filter-popover-header-border-color: var(--border-secondary);
-  --filter-popover-header-background-color: var(--navbar-background-color);
-  --filter-popover-header-label-color: var(--navbar-text-color);
-  --filter-popover-header-label-font-size: var(--font-size-lg);
-  --filter-popover-header-label-font-weight: var(--font-weight-bold);
-  --filter-popover-header-button-color: var(--navbar-text-color);
-  --filter-popover-header-button-height: var(--control-height-base);
-  --filter-popover-header-button-font-size: var(--font-size-base);
-  --filter-popover-header-button-font-weight: var(--font-weight-regular);
-
-  --filter-tags-wrapper-padding: var(--spacing-xs) 0 var(--spacing-base) var(--spacing-base);
-  --filter-tag-color: var(--text-primary);
-  --filter-tag-border-radius: var(--spacing-sm);
-  --filter-tag-border-color: var(--border-primary);
-  --filter-tag-background-color: var(--bg-raised);
-  --filter-tag-padding: 0 var(--spacing-xs);
-  --filter-tag-font-size: var(--font-size-sm);
-  --filter-tag-font-weight: var(--font-weight-regular);
-  --filter-tag-margin: 0 var(--spacing-xxs) 0 0;
-  --filter-tag-label-margin: 0 var(--spacing-xxs) 0 0;
-
-  --filter-input-border: 1px solid var(--border-primary);
-  --filter-input-min-width: 200px;
-  --filter-input-padding: var(--input-padding);
-  --filter-input-border-radius: var(--input-border-radius);
-  --filter-input-background-color: var(--input-background-color);
-  --filter-input-color: var(--text-secondary);
-  --filter-input-font-family: var(--font-family-base);
-  --filter-input-font-size: var(--font-size-base);
-  --filter-input-line-height: var(--input-line-height);
-  --filter-input-placeholder-opacity: 0.6;
-  --filter-input-placeholder-color: var(--text-placeholder);
-  --filter-input-hover-color: var(--text-primary);
-  --filter-input-hover-border: 1px solid var(--border-primary);
-  --filter-input-focus-color: var(--text-primary);
-  --filter-input-focus-border: 1px solid var(--border-primary);
-
-  --filter-add-button-margin: 0 var(--spacing-sm) 0 0;
-  --filter-add-button-padding: 0;
-  --filter-add-button-font-size: var(--font-size-base);
-  --filter-add-button-font-weight: var(--font-weight-regular);
-
-  --filter-select-min-height: var(--control-height-base);
-  --filter-select-color: var(--text-primary);
-  --filter-select-border-color: var(--border-primary);
-  --filter-select-border-radius: calc(var(--spacing-unit) * 1.5);
-  --filter-select-padding: 0;
-  --filter-select-hover-border-color: var(--text-primary);
-  --filter-select-option-margin: 0;
-
-  --filter-date-picker-color: var(--text-primary);
-  --filter-date-picker-margin: 0 0 var(--spacing-xxs) 0;
-  --filter-date-picker-gap: var(--spacing-xs);
-  --filter-date-picker-width: 50px;
-  --filter-date-picker-tile-background: var(--color-blue-2);
-  --filter-date-picker-tile-color: var(--text-primary);
-  --filter-date-picker-tile-hover-background: var(--color-blue-3);
-  --filter-date-picker-tile-hover-color: var(--text-primary);
-  --filter-date-picker-input-width: var(--spacing-md);
-  --filter-date-picker-invalid-input-background: var(--bg-raised);
-  --filter-date-picker-button-padding: var(--spacing-xxs);
-  --filter-date-picker-icon-stroke: var(--text-secondary);
-  --filter-date-picker-icon-width: var(--spacing-sm);
-  --filter-date-picker-hover-icon-stroke: var(--text-primary);
-  --filter-date-picker-wrapper-border-color: var(--border-primary);
-  --filter-date-picker-wrapper-radius: calc(var(--spacing-unit) * 1.5);
-  --filter-date-picker-wrapper-padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);
-
-  // @tokens End
-`;

package/src/components/Footer/styledVariables.ts

@@ -1,58 +0,0 @@
-import { css } from 'styled-components';
-
-export const footer = css`
-  /**
-    * @tokens Footer
-    */
-  --footer-background-color: var(--bg-raised); // @presenter Color
-  --footer-text-color: var(--text-secondary); // @presenter Color
-  --footer-border-color: var(--border-secondary); // @presenter Color
-
-  --footer-padding-vertical: calc(var(--spacing-unit) * 20); // @presenter Spacing
-  --footer-padding-horizontal: calc(var(--spacing-unit) * 20); // @presenter Spacing
-
-  --footer-font-size: var(--font-size-base); // @presenter FontSize
-  --footer-font-weight: var(--font-weight-regular); // @presenter FontWeight
-
-  --footer-dividing-border-color: var(--footer-border-color); // @presenter Color
-
-  --footer-title-text-color: var(--text-primary); // @presenter Color
-  --footer-title-font-size: var(--font-size-xl); // @presenter FontSize
-  --footer-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
-  --footer-title-margin-bottom: var(--spacing-lg); // @presenter Spacing
-
-  --footer-link-text-color: var(--text-secondary); // @presenter Color
-  --footer-link-hover-color: var(--text-primary); // @presenter Color
-  --footer-link-padding-vertical: var(--spacing-xs); // @presenter Spacing
-  --footer-link-padding-horizontal: 0;
-
-  --footer-item-icon-width: var(--spacing-lg); // @presenter Spacing
-  --footer-item-icon-height: var(--spacing-lg); // @presenter Spacing
-  --footer-item-icon-margin-right: var(--spacing-sm); // @presenter Spacing
-  --footer-item-icon-border-color: var(--border-primary); // @presenter Color
-  --footer-item-icon-border-radius: 12px; // @presenter BorderRadius
-  --footer-item-icon-padding: var(--spacing-xxs); // @presenter Spacing
-
-  --footer-column-min-width: calc(var(--spacing-unit) * 30);
-  --footer-column-margin-bottom: var(--spacing-lg); // @presenter Spacing
-  --footer-column-margin-horizontal: var(--spacing-sm); // @presenter Spacing
-
-  --footer-copyright-font-size: var(--footer-font-size); // @presenter FontSize
-  --footer-copyright-margin-top: var(--spacing-sm); // @presenter Spacing
-  --footer-copyright-text-align: start;
-
-  --footer-logo-display: block;
-  --footer-logo-margin-right: 86px; // @presenter Spacing
-  --footer-logo-margin-bottom: var(--spacing-xl); // @presenter Spacing
-
-  --footer-language-picker-display: block;
-
-  --footer-container-max-width: var(--container-width); // @presenter Spacing
-
-  --mobile-footer-padding-vertical: var(--spacing-base); // @presenter Spacing
-  --mobile-footer-padding-horizontal: var(--spacing-base); // @presenter Spacing
-  --mobile-footer-column-margin-bottom: var(--spacing-base); // @presenter Spacing
-  --mobile-footer-title-margin-bottom: var(--spacing-sm); // @presenter Spacing
-
-  // @tokens End
-`;

package/src/components/Image/Image.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-function parseSrcSet(srcSet: string): Map<string, string> {
-  const result = new Map<string, string>();
-  const parts = srcSet.split(', ');
-
-  for (const part of parts) {
-    const [url, theme] = part.split(' ');
-    result.set(theme, url);
-  }
-
-  return result;
-}
-
-type ImageProps = {
-  src?: string;
-  srcSet?: string;
-  alt?: string;
-  className?: string;
-};
-
-export function Image(props: ImageProps) {
-  const { src, srcSet, alt, className } = props;
-
-  const parsedSourceSetMap = React.useMemo(() => {
-    return srcSet ? parseSrcSet(srcSet) : new Map();
-  }, [srcSet]);
-
-  return (
-    <>
-      {src ? (
-        <img src={src} alt={alt} className={className} />
-      ) : (
-        Array.from(parsedSourceSetMap).map(([key, value]) => (
-          <ColorModeAwareImage key={key} colorMode={key} src={value} alt={alt} />
-        ))
-      )}
-    </>
-  );
-}
-
-const ColorModeAwareImage = styled.img<{ colorMode: string }>`
-  html:not(.${(props) => props.colorMode}) && {
-    display: none;
-  }
-`;

package/src/components/Image/index.ts

@@ -1 +0,0 @@
-export * from '@theme/components/Image/Image';