@redocly/theme 0.18.2 → 0.18.3-patch.1

package/src/components/Catalog/CatalogCard.tsx

@@ -4,99 +4,125 @@ import styled from 'styled-components';
 import type { CatalogItem } from '@theme/types/portal/src/shared/types/catalog';
 import { Link } from '@portal/Link';
 import { Highlight } from '@theme/ui/Highlight';
-import { Tags } from '@theme/components/Tags';
-import { useTranslate } from '@portal/hooks';
+import { Tag } from '@theme/components/Tag';
+import { PointingArrowIcon } from '@theme/icons';
+import { telemetry } from '@portal/telemetry';
+import { slug } from '@theme/utils';
 
 export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
-  const { translate } = useTranslate();
-  const translationKeys = {
-    footer: 'theme.catalog.card.footer',
-  };
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
-      <StyledCard>
+      <StyledCard onClick={() => telemetry.send('catalog_item_clicked', {})}>
         <CardTitle>
           <Highlight>{item.title}</Highlight>
         </CardTitle>
-        {/* <div>{item.image}</div> */}
-        <CardDescription>
-          <Highlight>{item.description ?? ''}</Highlight>
-        </CardDescription>
-        {item.tags ? <Tags tags={item.tags as string[]} /> : null}
-        <hr />
-        <CardFooter data-translation-key={translationKeys.footer}>
-          {translate(translationKeys.footer, 'View documentation')}
-        </CardFooter>
+        <CardContent>
+          <CardDescription>
+            <Highlight>{item.description ?? ''}</Highlight>
+          </CardDescription>
+          <CardFooter>
+            {item.tags && (
+              <CardTags>
+                {(item.tags as string[]).map((tag, index) => (
+                  <CardTag key={tag + index} color={slug(tag)}>
+                    <Highlight>{tag}</Highlight>
+                  </CardTag>
+                ))}
+              </CardTags>
+            )}
+            <SelectButton>
+              <PointingArrowIcon />
+            </SelectButton>
+          </CardFooter>
+        </CardContent>
       </StyledCard>
     </Link>
   );
 }
 
-const StyledCard = styled.div`
-  min-height: 268px;
-  height: 100%;
-  box-shadow: var(--box-shadow);
-
+const SelectButton = styled.div`
+  border: 1px solid var(--catalog-card-button-border-color);
+  border-radius: 100%;
+  width: var(--catalog-card-button-width);
+  height: var(--catalog-card-button-height);
   display: flex;
-  flex-direction: column;
-
-  color: var(--text-color);
-  background-color: var(--thin-tile-background-color);
-  border-radius: 4px;
-
-  border: 1px solid var(--border-color);
-  box-shadow: 0px 0px 10px 0px rgba(35, 35, 35, 0.05);
+  align-items: center;
+  justify-content: center;
   transition: all 0.2s ease-in-out;
 
-  &:hover {
-    /* box-shadow: 0px 12px 30px 0px rgba(35, 35, 35, 0.2); */
-    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
-    border: 1px solid var(--border-color);
-    transform: translateY(-2px);
+  svg {
+    fill: var(--catalog-card-icon-color);
   }
+`;
 
-  border-radius: 8px;
-  width: 100%;
-  padding: 24px 24px 0;
+const StyledCard = styled.div.attrs({ 'data-cy': 'Catalog/CatalogCard' })`
+  min-height: var(--catalog-card-min-height);
+  height: 100%;
+  color: var(--catalog-card-text-color);
+  font-size: var(--catalog-card-font-size);
+  font-weight: var(--catalog-card-font-weight);
+  background-color: var(--catalog-card-background-color);
+  border: var(--catalog-card-border-width) var(--catalog-card-border-style) var(--catalog-card-border-color);
+  transition: all 0.2s ease-in-out;
+  border-radius: var(--catalog-card-border-radius);
+  cursor: pointer;
   display: flex;
   flex-direction: column;
-  cursor: pointer;
+
+  &:hover {
+    border-color: var(--catalog-card-hover-border-color);
+
+    ${SelectButton} {
+      transform: rotate(-45deg);
+      border-color: var(--catalog-card-hover-border-color);
+      background: var(--catalog-card-button-hover-background);
+      
+      svg {
+        fill: var(--catalog-card-icon-hover-color);
+      }
+    }
 `;
 
 const CardTitle = styled.h4`
-  line-height: 26px;
-  letter-spacing: 0.8px;
-  font-size: 20px;
-  font-weight: var(--font-weight-bold);
+  color: var(--catalog-card-title-color);
+  min-height: var(--catalog-card-title-min-height);
+  font-size: var(--catalog-card-title-font-size);
+  font-weight: var(--catalog-card-title-font-weight);
   margin: 0;
-  margin-bottom: 16px;
+  padding: var(--catalog-card-title-padding-vertical) var(--catalog-card-title-padding-horizontal);
 `;
 
 const CardDescription = styled.div`
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: var(--catalog-card-description-line-clamp);
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: var(--line-height);
-  letter-spacing: 0px;
-  font-size: 16px;
-  color: var(--text-color-secondary);
-  text-align: inherit;
-  font-weight: 400;
+  margin-bottom: var(--catalog-card-description-margin-bottom);
 `;
 
-const CardFooter = styled.div`
-  height: 46px;
+const CardContent = styled.div`
+  background-color: var(--catalog-card-content-background-color);
+  border-radius: var(--catalog-card-content-border-radius);
+  padding: var(--catalog-card-content-padding);
+  flex: 1;
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
   flex-direction: column;
-  font-size: 16px;
-  font-weight: var(--font-weight-bold);
+  justify-content: space-between;
+`;
 
-  a:hover & {
-    text-decoration: var(--link-hover-text-decoration);
-    color: var(--link-hover-text-color);
-  }
+const CardFooter = styled.div`
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+`;
+
+const CardTags = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xxs);
+`;
+
+const CardTag = styled(Tag)`
+  margin: 0;
 `;

package/src/components/Catalog/index.ts

@@ -0,0 +1,4 @@
+export * from '@theme/components/Catalog/Catalog';
+export * from '@theme/components/Catalog/CatalogCard';
+export * from '@theme/components/Catalog/useCatalog';
+export * from '@theme/components/Catalog/styledVariables';

package/src/components/Catalog/styledVariables.ts

@@ -0,0 +1,93 @@
+import { css } from 'styled-components';
+
+export const catalog = css`
+  /* === Catalog === */
+  /**
+    * @tokens Catalog page
+    */
+  --catalog-page-padding-vertical: var(--spacing-lg);
+  --catalog-page-padding-horizontal: var(--spacing-xl);
+  --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
+  --mobile-catalog-page-padding: 0 var(--spacing-base) var(--spacing-base) var(--spacing-base);
+
+  --mobile-catalog-filter-padding-vertical: var(--spacing-sm);
+  --mobile-catalog-filter-padding-horizontal: var(--spacing-base);
+
+  /**
+    * @tokens Catalog page title
+    */
+  --catalog-title-text-color: var(--text-primary);
+  --catalog-title-font-weight: var(--font-weight-bold);
+  --catalog-title-font-size: var(--font-size-heading-3);
+
+  /**
+    * @tokens Catalog page description
+    */
+  --catalog-description-text-color: var(--text-secondary);
+  --catalog-description-font-weight: var(--font-weight-regular);
+  --catalog-description-font-size: var(--font-size-base);
+  --catalog-description-margin-top: var(--spacing-sm);
+  --catalog-description-margin-bottom: var(--spacing-xl);
+
+  /**
+    * @tokens Catalog page separator
+    */
+  --catalog-separator-color: var(--text-description);
+  --catalog-separator-font-size: var(--font-size-base);
+  --catalog-separator-font-weight: var(--font-weight-regular);
+  --catalog-separator-border-color: var(--border-secondary);
+  --catalog-separator-margin: 0 0 var(--spacing-base) 0;
+  --catalog-separator-padding: var(--spacing-xxs) 0 0 0;
+  --catalog-separator-label-margin: 0 var(--spacing-xs);
+  --catalog-separator-count-height: var(--control-height-xs);
+  --catalog-separator-count-padding: 0 var(--spacing-xxs);
+  --catalog-separator-count-border-radius: var(--border-radius-xlg);
+  --catalog-separator-count-border-color: var(--border-secondary);
+  --catalog-separator-count-background: var(--bg-raised);
+
+  /**
+    * @tokens Catalog card
+    */
+  --catalog-card-min-height: 214px;
+  --catalog-card-text-color: var(--text-secondary);
+  --catalog-card-font-size: var(--font-size-base);
+  --catalog-card-font-weight: var(--font-weight-regular);
+  --catalog-card-background-color: var(--bg-raised);
+  --catalog-card-border-color: var(--border-secondary);
+  --catalog-card-border-width: var(--border-width);
+  --catalog-card-border-style: var(--border-style);
+  --catalog-card-hover-border-color: var(--border-primary);
+  --catalog-card-border-radius: var(--border-radius-lg);
+
+  /**
+    * @tokens Catalog card button
+    */
+  --catalog-card-icon-color: var(--text-secondary);
+  --catalog-card-icon-hover-color: var(--text-primary);
+  --catalog-card-button-hover-background: var(--bg-overlay);
+  --catalog-card-button-height: var(--spacing-xl);
+  --catalog-card-button-width: var(--spacing-xl);
+  --catalog-card-button-border-color: var(--border-secondary);
+  --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
+
+  /**
+    * @tokens Catalog card title
+    */
+  --catalog-card-title-color: var(--text-primary);
+  --catalog-card-title-min-height: calc(var(--spacing-unit) * 18);
+  --catalog-card-title-font-size: var(--font-size-lg);
+  --catalog-card-title-font-weight: var(--font-weight-bold);
+  --catalog-card-title-padding-vertical: var(--spacing-sm);
+  --catalog-card-title-padding-horizontal: var(--spacing-lg);
+
+  /**
+    * @tokens Catalog card description
+    */
+  --catalog-card-description-line-clamp: 3;
+  --catalog-card-description-margin-bottom: var(--spacing-base);
+  --catalog-card-content-background-color: var(--bg-base);
+  --catalog-card-content-border-radius: var(--border-radius-lg);
+  --catalog-card-content-padding: var(--spacing-base);
+  
+  // @tokens End
+`;

package/src/components/Catalog/useCatalog.ts

@@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import type { Location } from 'react-router-dom';
 
+import { telemetry } from '@portal/telemetry';
 import type { ResolvedNavItem } from '@theme/types/portal';
 import type {
   CatalogItem,
@@ -45,6 +46,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
       }
       return [...prev.slice(0, filterIdx), newFilterOptions, ...prev.slice(filterIdx + 1)];
     });
+    telemetry.send('catalog_filter_changed', { type: 'toggle' });
     window.scrollTo(0, 0);
   }, []);
 
@@ -68,6 +70,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
             : f,
         );
       });
+      telemetry.send('catalog_filter_changed', { type: 'select' });
       window.scrollTo(0, 0);
     },
     [filtersWithOptions],
@@ -153,7 +156,16 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
         ? groupByFirstFilter(resolvedFilters, filteredItems)
         : [{ title: 'APIs', items: filteredItems }];
 
-    return { groups, filters: resolvedFilters, setFilterTerm, filterTerm };
+    return {
+      groups,
+      filters: resolvedFilters,
+      setFilterTerm: (newTerm) => {
+        setFilterTerm(newTerm);
+
+        telemetry.send('catalog_filter_changed', { type: 'term' });
+      },
+      filterTerm,
+    };
   }, [
     filtersWithOptions,
     normalizedItems,

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { generateCodeBlockTokens } from '@theme/utils';
 
@@ -10,21 +10,29 @@ export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ cl
     overflow-x: auto;
     max-height: var(--code-block-max-height);
     font-family: var(--code-block-font-family);
-    line-height: var(--code-line-height);
+    line-height: var(--code-block-line-height);
+    font-weight: var(--code-block-font-weight);
     padding: var(--code-block-padding);
     margin: var(--code-block-margin);
-    border-radius: ${(withControls) =>
-      withControls
-        ? '0 0 var(--code-block-border-radius) var(--code-block-border-radius)'
-        : 'var(--code-block-border-radius)'};
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
-    font-size: var(--code-font-size);
+    font-size: var(--code-block-font-size);
     white-space: var(--code-wrap, pre);
     max-height: var(--code-block-max-height, 600px);
     word-break: var(--code-block-word-break, initial);
-    border: none;
-  }
+
+    ${(withControls) =>
+      withControls
+        ? css`
+            border-radius: 0 0 var(--code-block-border-radius) var(--code-block-border-radius);
+            border-left: 1px solid var(--code-block-border-color);
+            border-right: 1px solid var(--code-block-border-color);
+            border-bottom: 1px solid var(--code-block-border-color);
+          `
+        : css`
+            border-radius: var(--code-block-border-radius);
+            border: 1px solid var(--code-block-border-color);
+          `}
 
   /**
   * Based on prism-dark.css

package/src/components/CodeBlock/CodeBlockControlButton.tsx

@@ -1,26 +1,18 @@
 import styled, { css } from 'styled-components';
 
-export const CodeBlockControlButton = styled.button.attrs(() => ({
-  'data-component-name': 'CodeBlockControls/CodeBlockControlButton',
-}))<{ asIcon?: boolean }>`
-  border: 0;
-  outline: 0;
-  border-radius: var(--border-radius);
-  height: 20px;
-  font-size: 12px;
-  line-height: 12px;
-  cursor: pointer;
-  padding: 1px 6px;
-  color: var(--panel-samples-controls-text-color);
+import { Button } from '@theme/components/Button';
+
+export const CodeBlockControlButton = styled(Button)<{ asIcon?: boolean }>`
+  color: var(--code-block-controls-text-color);
 
   ${({ asIcon }) =>
     asIcon
       ? css`
-          background-color: var(--panel-samples-icon-controls-background-color);
+          background-color: var(--code-block-icon-controls-background-color);
         `
       : css`
           min-width: 90px;
-          background-color: var(--panel-samples-text-controls-background-color);
+          background-color: var(--code-block-text-controls-background-color);
         `}
 
   ${({ theme }) => theme.mediaQueries?.small} {
@@ -30,9 +22,4 @@ export const CodeBlockControlButton = styled.button.attrs(() => ({
   :not(:first-child) {
     margin-left: 5px;
   }
-
-  :hover,
-  :focus {
-    background-color: var(--panel-samples-controls-hover-background-color);
-  }
 `;

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { CodeBlockControlButton } from '@theme/components/CodeBlock';
 import { CollapseIcon, DeselectIcon, ExpandIcon, ReportIcon, SelectIcon } from '@theme/icons';
 import { useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
 
 import { CopyButton } from '../CopyButton';
 
@@ -68,7 +69,10 @@ export function CodeBlockControls({
             toasterDuration={copy.toasterDuration}
             buttonText={copy.label}
             tooltipText={copy.tooltipText}
-            onCopyClick={copy?.onClick}
+            onCopyClick={() => {
+              copy?.onClick;
+              telemetry.send('code_snippet_copied', {});
+            }}
           />
         ) : null}
 
@@ -139,6 +143,7 @@ export function CodeBlockControls({
             asIcon={controlsType === 'icon'}
             title={report.tooltipText}
             {...report.props}
+            onClick={() => telemetry.send('code_snippet_reported', {})}
           >
             {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
           </CodeBlockControlButton>
@@ -157,21 +162,24 @@ export function CodeBlockControls({
 const ContainerWraper = styled.div`
   display: flex;
   justify-content: space-between;
-  padding: 5px 10px;
   min-height: 30px;
-  background-color: var(--panel-samples-controls-background-color);
-  border-bottom: var(--panel-samples-controls-border);
-  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  padding: var(--code-block-controls-padding);
+  background-color: var(--code-block-controls-background-color);
+  border-top: var(--code-block-controls-border);
+  border-left: var(--code-block-controls-border);
+  border-right: var(--code-block-controls-border);
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
   margin-top: 10px;
 `;
 
 const Title = styled.span`
   display: flex;
   align-items: center;
-  color: var(--panel-samples-controls-text-color);
+  color: var(--code-block-controls-text-color);
 `;
 
 const ControlsWrapper = styled.div`
+  display: flex;
   opacity: 0.7;
   transition: opacity 0.3s ease;
   text-align: right;

package/src/components/CodeBlock/index.ts

@@ -2,3 +2,4 @@ export * from '@theme/components/CodeBlock/CodeBlock';
 export * from '@theme/components/CodeBlock/CodeBlockContainer';
 export * from '@theme/components/CodeBlock/CodeBlockControls';
 export * from '@theme/components/CodeBlock/CodeBlockControlButton';
+export * from '@theme/components/CodeBlock/styledVariables';

package/src/components/CodeBlock/styledVariables.ts

@@ -0,0 +1,89 @@
+import { css } from 'styled-components';
+
+export const code = css`
+  /**
+    * @tokens Code base styles
+    */
+  --code-font-size: 13px; // @presenter FontSize
+  --code-font-family: var(--font-family-monospaced); // @presenter FontFamily
+  --code-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --code-line-height: var(--line-height-xsm); // @presenter LineHeight
+  --code-wrap: pre;
+  --code-word-break: break-word;
+
+  /**
+    * @tokens Inline Code
+    */
+  --inline-code-font-size: var(--code-font-size); // @presenter FontSize
+  --inline-code-font-family: var(--code-font-family); // @presenter FontFamily
+  --inline-code-font-weight: var(--code-font-weight); // @presenter FontWeight
+  --inline-code-line-height: var(--code-line-height); // @presenter LineHeight
+  --inline-code-text-color: var(--text-secondary); // @presenter Color
+  --inline-code-background-color: var(--bg-overlay); // @presenter Color
+  --inline-code-border-color: var(--border-primary); // @presenter Color
+  --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  /**
+    * @tokens Code Block
+    */
+  --code-block-font-size: var(--code-font-size); // @presenter FontSize
+  --code-block-font-family: var(--code-font-family); // @presenter FontFamily
+  --code-block-line-height: var(--code-line-height); // @presenter LineHeight
+  --code-block-font-weight: var(--code-font-weight); // @presenter FontWeight
+  --code-block-text-color: var(--text-secondary); // @presenter Color
+  --code-block-background-color: var(--bg-raised); // @presenter Color
+  --code-block-border-color: var(--border-primary); // @presenter Color
+  --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --code-block-padding: calc(var(--spacing-unit) * 2);
+  --code-block-margin: 0;
+  --code-block-max-height: 50vh;
+  --code-block-word-break: initial;
+
+  /**
+    * @tokens Code Block controls
+    */
+
+  --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize
+  --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily
+  --code-block-controls-text-color: var(--text-secondary); // @presenter Color
+  --code-block-controls-background-color: var(--bg-overlay); // @presenter Color
+  --code-block-controls-border: 1px solid var(--border-primary); // @presenter Border
+  --code-block-controls-padding: 0 5px; // @presenter Spacing
+  --code-block-icon-controls-background-color: var(--code-block-controls-background-color);
+  --code-block-text-controls-background-color: var(--code-block-controls-background-color);
+
+  /**
+    * @tokens Code Block tokens
+   */
+  --code-block-tokens-default-color: var(--text-secondary); // @presenter Color
+  --code-block-tokens-comment-color: var(--text-placeholder); // @presenter Color
+  --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-boolean-color: var(--color-geekblue-7); // @presenter Color
+  --code-block-tokens-string-color: var(--color-green-6); // @presenter Color
+  --code-block-tokens-property-string-color: var(--text-secondary); // @presenter Color
+  --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-link-color: var(--color-blue-6); // @presenter Color
+  --code-block-tokens-operator-color: var(--color-gold-7); // @presenter Color
+  --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-keyword-color: var(--color-magneta-6); // @presenter Color
+  --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-regex-color: var(--color-gold-5); // @presenter Color
+  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
+  --code-block-tokens-deleted-color: var(--color-red-6); // @presenter Color
+
+  // @tokens End
+`;

package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
 import { useMount, useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
 
 interface ColorModeSwitcherProps {
   className?: string;
@@ -34,6 +35,8 @@ export function ColorModeSwitcher(props: ColorModeSwitcherProps): JSX.Element |
     window.requestAnimationFrame(() => {
       document.documentElement.classList.remove('notransition');
     });
+
+    telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
   };
 
   return (
@@ -52,7 +55,6 @@ export function ColorModeSwitcher(props: ColorModeSwitcherProps): JSX.Element |
 }
 
 const Wrapper = styled.div<{ modes: string[] }>`
-  margin-left: var(--navbar-item-padding-horizontal);
   display: flex;
   align-items: center;
   cursor: pointer;

package/src/components/Dropdown/Dropdown.tsx

@@ -5,13 +5,16 @@ import { ArrowIcon } from '@theme/icons';
 import { useOutsideClick } from '@theme/hooks';
 
 export interface DropdownProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   items: JSX.Element[] | string[];
   dataAttributes?: Record<string, string>;
   className?: string;
   withArrow?: boolean;
   triggerEvent?: 'click' | 'hover';
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
   onChange?: (value: React.ReactNode | string) => void;
+  icon?: React.ReactNode;
 }
 
 export const Dropdown = ({
@@ -22,6 +25,9 @@ export const Dropdown = ({
   triggerEvent = 'click',
   onChange,
   dataAttributes,
+  placement,
+  alignment,
+  icon,
 }: DropdownProps) => {
   const dropdownRef = useRef<HTMLDivElement | null>(null);
 
@@ -58,10 +64,11 @@ export const Dropdown = ({
     >
       <DropdownHeader>
         {children}
+        {icon}
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </DropdownHeader>
       {isOpen && (
-        <DropdownList>
+        <DropdownList placement={placement} alignment={alignment}>
           {items.map((item, index) => (
             <DropdownListItem
               key={index}
@@ -99,10 +106,12 @@ export const DropdownHeader = styled.div`
   cursor: pointer;
 `;
 
-export const DropdownList = styled.ul`
+export const DropdownList = styled.ul<{ placement?: string; alignment?: string }>`
   position: absolute;
-  top: 100%;
-  left: 0;
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
+  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
+  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--dropdown-list-min-width);
   max-width: var(--dropdown-list-max-width);

package/src/components/Dropdown/index.ts

@@ -1 +1,2 @@
 export * from '@theme/components/Dropdown/Dropdown';
+export * from '@theme/components/Dropdown/styledVariables';