@redocly/theme 0.1.23 → 0.1.26

package/src/Panel/Panel.ts

@@ -4,7 +4,9 @@ import { PanelHeader } from '@theme/Panel/PanelHeader';
 import { PanelBody } from '@theme/Panel/PanelBody';
 import { PanelComponent } from '@theme/Panel/PanelComponent';
 
-export const Panel = styled(PanelComponent)`
+export const Panel = styled(PanelComponent).attrs(() => ({
+  'data-component-name': 'Panel/Panel',
+}))`
   border-radius: var(--panels-border-radius);
 
   ${PanelHeader} + ${PanelBody} {

package/src/Panel/PanelBody.ts

@@ -18,7 +18,9 @@ interface PanelBodyProps {
   hidden?: boolean;
 }
 
-export const PanelBody = styled.div<PanelBodyProps>`
+export const PanelBody = styled.div.attrs(() => ({
+  'data-component-name': 'Panel/PanelBody',
+}))<PanelBodyProps>`
   ${({ animate }) => animate && showPanelAnimation};
   ${({ hidden }) => hidden && 'visibility: hidden'};
 

package/src/Panel/PanelComponent.tsx

@@ -44,6 +44,7 @@ export function PanelComponent({
       data-cy={
         typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null
       }
+      data-component-name="Panel/PanelComponent"
     >
       {header &&
         (typeof header === 'function' ? (

package/src/Panel/PanelHeader.ts

@@ -7,7 +7,9 @@ export interface PanelHeaderProps {
   toggle?: (e: BaseSyntheticEvent) => void;
 }
 
-export const PanelHeader = styled.div<PanelHeaderProps>`
+export const PanelHeader = styled.div.attrs(() => ({
+  'data-component-name': 'Panel/PanelHeader',
+}))<PanelHeaderProps>`
   position: relative;
   z-index: 1;
   display: flex;

package/src/Panel/PanelHeaderTitle.ts

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-export const PanelHeaderTitle = styled.span`
+export const PanelHeaderTitle = styled.span.attrs(() => ({
+  'data-component-name': 'Panel/PanelHeaderTitle',
+}))`
   line-height: 1;
   margin-right: 5px;
   font-weight: 700;

package/src/SamplesPanelControls/SamplesPanelControls.ts

@@ -2,7 +2,9 @@ import styled from 'styled-components';
 
 import { CodeBlock } from '@theme/CodeBlock';
 
-export const SamplesControlButton = styled.button`
+export const SamplesControlButton = styled.button.attrs(() => ({
+  'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
+}))`
   background-color: var(--samples-panel-controls-background-color);
   border: 0;
   outline: 0;

package/src/Search/ClearIcon.tsx

@@ -15,7 +15,9 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export const ClearIcon = styled(Icon)`
+export const ClearIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'Search/ClearIcon',
+}))`
   position: absolute;
   cursor: pointer;
   width: 0.5em;

package/src/Search/SearchIcon.tsx

@@ -15,7 +15,9 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export const SearchIcon = styled(Icon)`
+export const SearchIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'Search/SearchIcon',
+}))`
   position: absolute;
   cursor: pointer;
   width: 1em;

package/src/Search/SidebarSearch.tsx

@@ -3,7 +3,9 @@ import styled from 'styled-components';
 import { Search } from '@theme/Search/Search';
 import { Popover } from '@theme/Search/Popover';
 
-export const SidebarSearch = styled(Search)`
+export const SidebarSearch = styled(Search).attrs(() => ({
+  'data-component-name': 'Search/SidebarSearch',
+}))`
   --search-input-text-color: var(--sidebar-item-active-color);
 
   ${Popover} {

package/src/Sidebar/MenuContainer.tsx

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-export const MenuContainer = styled.div`
+export const MenuContainer = styled.div.attrs(() => ({
+  'data-component-name': 'Sidebar/MenuContainer',
+}))`
   position: relative;
   overflow-y: auto;
   flex-grow: 1;

package/src/Sidebar/SeparatorItem.tsx

@@ -2,7 +2,9 @@ import styled from 'styled-components';
 
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
 
-export const SeparatorItem = styled(MenuItemLabel)`
+export const SeparatorItem = styled(MenuItemLabel).attrs(() => ({
+  'data-component-name': 'Sidebar/SeparatorItem',
+}))`
   cursor: default;
   font-weight: var(--font-weight-bold);
   color: var(--sidebar-separator-label-color);

package/src/SidebarLogo/SidebarLogo.tsx

@@ -23,7 +23,11 @@ export function SidebarLogo({
   const logo = <LogoImgEl src={imageUrl} alt={altText || 'logo'} />;
 
   return (
-    <LogoWrap data-cy={dataTestId} style={{ backgroundColor }}>
+    <LogoWrap
+      data-cy={dataTestId}
+      style={{ backgroundColor }}
+      data-component-name="SidebarLogo/SidebarLogo"
+    >
       {href ? <Link href={href}>{logo}</Link> : logo}
     </LogoWrap>
   );

package/src/SourceCode/SourceCode.tsx

@@ -56,7 +56,7 @@ export function SourceCode({
   const _source = source || externalSource?.sample?.get?.(externalSource) || '';
   if (withCopyButton) {
     return (
-      <CopyButtonWrapper data={source}>
+      <CopyButtonWrapper data={source} data-component-name="SourceCode/SourceCode">
         {({ renderCopyButton }) => (
           <SampleControlsWrap>
             <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
@@ -67,5 +67,12 @@ export function SourceCode({
     );
   }
 
-  return <Code dataTestId={dataTestId} lang={lang} source={_source} />;
+  return (
+    <Code
+      dataTestId={dataTestId}
+      lang={lang}
+      source={_source}
+      data-component-name="SourceCode/SourceCode"
+    />
+  );
 }

package/src/Tooltip/Tooltip.tsx

@@ -50,6 +50,7 @@ export function TooltipComponent({
       onMouseLeave={isControlled ? undefined : handleLeave}
       onClick={isControlled ? undefined : handleLeave}
       className={`tooltip-${className}`}
+      data-component-name="Tooltip/Tooltip"
     >
       {children}
       {isOpened && (

package/src/Typography/H1.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { typography } from '@theme/utils';
 
 export const H1 = styled.h1.attrs(() => ({
-  'data-component-name': 'Headings/H1',
+  'data-component-name': 'Typography/H1',
 }))`
   color: var(--color-content);
   margin: 0 0 25px;

package/src/Typography/H2.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { typography } from '@theme/utils';
 
 export const H2 = styled.h2.attrs(() => ({
-  'data-component-name': 'Headings/H2',
+  'data-component-name': 'Typography/H2',
 }))`
   color: var(--color-content);
   margin: 0 0 20px;

package/src/Typography/H3.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { typography } from '@theme/utils';
 
 export const H3 = styled.h3.attrs(() => ({
-  'data-component-name': 'Headings/H3',
+  'data-component-name': 'Typography/H3',
 }))`
   color: var(--color-content);
 

package/src/Typography/SectionHeader.ts

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-export const SectionHeader = styled.h2`
+export const SectionHeader = styled.h2.attrs(() => ({
+  'data-component-name': 'Typography/SectionHeader',
+}))`
   color: var(--h-color);
   font-size: 1.75em;
   font-weight: var(--font-weight-regular);

package/src/Typography/Typography.ts

@@ -1,21 +1,29 @@
 import styled from 'styled-components';
-import { color, typography as typographySystem, TypographyProps } from 'styled-system';
 
-export const Typography = styled.p.attrs(() => ({
+export interface TypographyProps {
+  color?: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontStyle?: string;
+  fontWeight?: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+  marginBottom?: string;
+  marginTop?: string;
+  textAlign?: string;
+}
+
+export const Typography = styled.div.attrs(() => ({
   'data-component-name': 'Typography/Typography',
-}))<
-  TypographyProps & {
-    color?: string;
-    mt?: string;
-    mb?: string;
-  }
->`
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  line-height: var(--line-height-base);
-  color: var(--color-content);
-  ${color};
-  margin-top: ${({ mt }) => mt || '1em'};
-  margin-bottom: ${({ mb }) => mb || '1em'};
-  ${typographySystem}
+}))<TypographyProps>`
+  color: ${({ color }) => color || 'var(--color-content)'};
+  font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};
+  font-size: ${({ fontSize }) => fontSize || 'var(--font-size-base)'};
+  font-style: ${({ fontStyle }) => fontStyle};
+  font-weight: ${({ fontWeight }) => fontWeight || 'var(--font-weight-regular)'};
+  line-height: ${({ lineHeight }) => lineHeight || 'var(--line-height-base)'};
+  letter-spacing: ${({ letterSpacing }) => letterSpacing};
+  margin-bottom: ${({ marginBottom }) => marginBottom};
+  margin-top: ${({ marginTop }) => marginTop};
+  text-align: ${({ textAlign }) => textAlign};
 `;

package/src/globalStyle.ts

@@ -182,6 +182,10 @@ const typography = css`
 const headingsTypography = css`
   // --h-{css-property-name} is fallback for h1...h6
 
+  * {
+    box-sizing: border-box;
+  }
+
   /**
     * @tokens Typography headings font
     */

package/src/icons/ShelfIcon/ShelfIcon.tsx

@@ -32,7 +32,9 @@ const IntShelfIcon = ({ className, style }: ShelfIconProps): JSX.Element => (
   </svg>
 );
 
-export const ShelfIcon = styled(IntShelfIcon)`
+export const ShelfIcon = styled(IntShelfIcon).attrs(() => ({
+  'data-component-name': 'icons/ShelfIcon/ShelfIcon',
+}))`
   ${({ size = '9px', float = '', direction, color }) => css`
     height: ${size};
     width: ${size};

package/src/mocks/hooks/index.ts

@@ -3,6 +3,12 @@ interface RawTheme {
   settings?: any;
 }
 
+interface PageLink {
+  label: string;
+  link: string;
+  type: 'link';
+}
+
 export function useThemeSettings(name: string): RawTheme['settings'] {
   return {
     name,
@@ -15,3 +21,18 @@ export function useThemeSettings(name: string): RawTheme['settings'] {
     },
   };
 }
+
+export function useSidebarSiblingsData(): { nextPage: PageLink; prevPage: PageLink } {
+  return {
+    nextPage: {
+      type: 'link',
+      label: 'Page',
+      link: '#next',
+    },
+    prevPage: {
+      type: 'link',
+      label: 'Page',
+      link: '#prev',
+    },
+  };
+}