@redocly/theme 0.1.5 → 0.1.8

package/src/ui/Dropdown.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { Version } from '@theme/types/portal';
+
+type DropdownProps = {
+  items: Version[];
+  activeItem: Version;
+};
+
+const Icon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="6 9 12 15 18 9"></polyline>
+  </svg>
+);
+
+const DropDownContainer = styled.div`
+  position: relative;
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+`;
+
+const DropDownHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  padding: 8px 10px;
+  border-radius: 4px;
+  border: 1px solid #e4e7eb;
+  font-weight: 600;
+  color: var(--color-text-main);
+  background: var(--color-secondary-300);
+`;
+
+const DropDownList = styled.div`
+  position: absolute;
+  background: var(--color-secondary-300);
+  margin: 2px 20px 0 20px;
+  padding: 0;
+  border-radius: 4px;
+  border: 1px solid rgba(38, 50, 56, 0.2);
+  z-index: 9999;
+  left: 0;
+  right: 0;
+`;
+
+const IconWrapper = styled.span`
+  transition: transform 0.2s;
+  display: inline-block;
+  font-size: 0;
+  &.active {
+    transform: rotate(-180deg);
+  }
+`;
+
+const ListItem = styled.div`
+  background-color: var(--background-color);
+  padding: 0.4em 10px;
+  font-size: 1em;
+  color: var(--color-text-main);
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(38, 50, 56, 0.12);
+  }
+  &.active {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+`;
+
+const DropDownLink = styled(Link)`
+  display: block;
+  text-decoration: none;
+  color: var(--color-text-main);
+`;
+
+export default function Dropdown({ items, activeItem }: DropdownProps): JSX.Element {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const toggling = () => setIsOpen(!isOpen);
+  useEffect(() => {
+    const checkIfClickedOutside = (e: MouseEvent) => {
+      if (!(e.target instanceof HTMLElement)) {
+        return;
+      }
+
+      if (isOpen && ref.current && !ref.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', checkIfClickedOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', checkIfClickedOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <DropDownContainer ref={ref} data-component-name="ui/Dropdown">
+      <DropDownHeader onClick={toggling}>
+        {activeItem?.label || activeItem.version}
+        <IconWrapper className={isOpen ? 'active' : ''}>
+          <Icon />
+        </IconWrapper>
+      </DropDownHeader>
+      {isOpen && (
+        <DropDownList>
+          {items.map((item) => (
+            <ListItem
+              className={activeItem.version === item.version ? 'active' : ''}
+              onClick={toggling}
+              key={item?.link + item?.version}
+            >
+              <DropDownLink to={item?.link || '#'}>{item?.label || item.version}</DropDownLink>
+            </ListItem>
+          ))}
+        </DropDownList>
+      )}
+    </DropDownContainer>
+  );
+}

package/src/ui/Flex.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+import { flexbox, FlexboxProps, width, WidthProps } from 'styled-system';
+
+import { Box } from '@theme/ui/Box';
+
+export interface FlexProps extends FlexboxProps, WidthProps {}
+
+export const Flex = styled(Box).attrs({ 'data-component-name': 'ui/Flex' })<FlexProps>`
+  display: flex;
+  ${flexbox}
+  ${width}
+`;
+
+export function FlexSection(props: React.PropsWithChildren<FlexProps>): JSX.Element {
+  return (
+    <Flex {...props} width={props.width || { xs: '90%', large: 910 }}>
+      {props.children}
+    </Flex>
+  );
+}

package/src/ui/Jumbotron.tsx

@@ -0,0 +1,57 @@
+import { space } from 'styled-system';
+import styled from 'styled-components';
+
+import { H1, H2 } from '@theme/ui/Typography';
+import { Background } from '@theme/ui/Background';
+
+export const Jumbotron = styled(Background).attrs(() => ({
+  'data-component-name': 'ui/Jumbotron',
+}))<{
+  pt?: string;
+  pb?: string;
+  pl?: string;
+  pr?: string;
+  bgImage?: string;
+  bgColor?: string;
+  parallaxEffect?: boolean;
+  textColor?: string;
+}>`
+  flex-direction: column;
+  padding-top: ${({ pt }) => pt || '0'};
+  padding-bottom: ${({ pb }) => pb || '8em'};
+  padding-left: ${({ pl }) => pl || '0'};
+  padding-right: ${({ pr }) => pr || '0'};
+  ${({ bgColor }) => bgColor && `background: ${bgColor}`};
+  ${({ bgImage, bgColor }) =>
+    bgImage &&
+    `
+      background: ${bgColor || 'var(--color-primary-main)'} url(${bgImage});
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+  `};
+  ${({ parallaxEffect }) =>
+    parallaxEffect &&
+    `
+      background-attachment: scroll, fixed;
+  `};
+  ${space}
+  ${H1}, ${H2} {
+    color: ${({ textColor }) => textColor || 'var(--navbar-color-text)'};
+    text-align: center;
+    padding: 0;
+  }
+  h1 {
+    font-size: 3.5em;
+    line-height: 1.2;
+    font-weight: var(--font-weight-bold);
+    margin: 1.75em 0 0.5em 0;
+  }
+  h2 {
+    font-size: 1.875em;
+    line-height: 1;
+    font-weight: var(--font-weight-light);
+    margin: 0;
+    margin-bottom: 2em;
+  }
+`;

package/src/ui/Tiles/ThinTile.tsx

@@ -0,0 +1,151 @@
+import React, { Component, CSSProperties } from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { Flex } from '@theme/ui/Flex';
+import { TileText } from '@theme/ui/Tiles/TileText';
+import { TileHeader } from '@theme/ui/Tiles/TileHeader';
+
+type TextAlign = 'left' | 'right' | 'center' | 'justify';
+
+export interface TileProps {
+  header?: string;
+  icon?: string;
+  children?: string;
+  to?: string;
+  target?: string;
+  headerAlign?: TextAlign;
+  textAlign?: TextAlign;
+  bgColor?: string;
+  bgImage?: string;
+  color?: string;
+  className?: string;
+  style?: CSSProperties;
+  maxWidth?: string;
+}
+
+const ThinTileWrapper = styled(Link)<{ bgColor?: string; bgImage?: string }>`
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+  box-sizing: border-box;
+  transition: box-shadow 0.25s ease;
+  padding: 24px;
+  margin-bottom: 20px;
+  text-decoration: none;
+  width: 100%;
+  background-color: ${({ bgColor }) => bgColor || '#fff'};
+  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
+  background-repeat: no-repeat;
+
+  :hover {
+    box-shadow: 0px 10px 100px 0px rgba(35, 35, 35, 0.2);
+  }
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    width: calc(50% - 20px);
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 250px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.large} {
+    width: 280px;
+  }
+
+  &.external-url {
+    :after {
+      display: none;
+    }
+  }
+`;
+
+const ThinTileIcon = styled.img`
+  width: 90px;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 80px;
+  }
+`;
+
+const ThinTileHeader = styled(TileHeader)<{ align?: TextAlign }>`
+  font-size: 24px;
+  text-align: ${({ align }) => align || 'center'};
+`;
+
+const ThinTileText = styled(TileText)<{ icon?: string; align?: TextAlign }>`
+  font-size: 18px;
+  line-height: 1.5;
+  flex-shrink: 0;
+  min-height: 3em;
+  text-align: ${({ align }) => align || 'center'};
+  ${({ icon }) =>
+    icon
+      ? `
+    display: -webkit-box;
+    -webkit-line-clamp: 8;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-clamp: 8;
+  `
+      : ''};
+  ${({ theme }) => theme.mediaQueries.small} {
+    min-height: 6em;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    min-height: 4.5em;
+  }
+`;
+
+export class ThinTile extends Component<TileProps> {
+  render(): JSX.Element {
+    const { header, icon, children, to, target, headerAlign, textAlign, color, className, style } =
+      this.props;
+
+    const Wrapper = to
+      ? ThinTileWrapper
+      : (ThinTileWrapper.withComponent('div') as typeof ThinTileWrapper);
+
+    return (
+      <Wrapper
+        to={to}
+        target={target}
+        color={color}
+        className={className}
+        style={style}
+        data-component-name="ui/Tiles/ThinTile"
+      >
+        {(icon || header) && (
+          <Flex flexDirection="column">
+            {icon && (
+              <Flex
+                flexShrink={0}
+                height={{ xs: 'auto', small: '100px', medium: '110px' }}
+                alignItems="center"
+                justifyContent="center"
+                mb="25px"
+              >
+                <ThinTileIcon src={icon} />
+              </Flex>
+            )}
+            {header && (
+              <ThinTileHeader align={headerAlign} color={color} data-cy={`Thin-${header}`}>
+                {header}
+              </ThinTileHeader>
+            )}
+          </Flex>
+        )}
+        {children && (
+          <ThinTileText icon={icon} align={textAlign} color={color}>
+            {children}
+          </ThinTileText>
+        )}
+      </Wrapper>
+    );
+  }
+}

package/src/ui/Tiles/TileHeader.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const TileHeader = styled.h3.attrs(() => ({
+  'data-component-name': 'ui/Tiles/TileHeader',
+}))<{ color?: string }>`
+  font-weight: var(--font-weight-bold);
+  line-height: 1.25;
+  color: ${(props) => props.color || 'var(--color-primary-main)'};
+  font-family: var(--h-font-family);
+  && {
+    margin: 0 0 0.5em;
+  }
+`;

package/src/ui/Tiles/TileText.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const TileText = styled.span.attrs(() => ({
+  'data-component-name': 'ui/Tiles/TileText',
+}))<{ color?: string }>`
+  display: inline-block;
+  font-weight: var(--font-weight-regular);
+  overflow: hidden;
+  color: ${(props) => props.color || 'var(--color-text-main)'};
+  line-height: 1.25;
+  font-family: var(--font-family-primary);
+`;

package/src/ui/Tiles/WideTile.tsx

@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { TileProps } from '@theme/ui';
+import { TileText } from '@theme/ui/Tiles/TileText';
+import { TileHeader } from '@theme/ui/Tiles/TileHeader';
+
+// prettier-ignore
+const WideTileWrapper = styled(Link)<{
+  disableArrow?: boolean;
+  withIcon: boolean;
+  bgColor?: string;
+  bgImage?: string;
+  color?: string;
+  maxWidth?: string;
+}>`
+  display: inline-flex;
+  flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
+  border-radius: 10px;
+  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+  background-color: ${({ bgColor }) => bgColor || '#fff'};
+  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
+  background-repeat: no-repeat;
+  padding: 24px;
+  padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
+  margin-bottom: 32px;
+  box-sizing: border-box;
+  position: relative;
+  text-decoration: none;
+  width: 100%;
+  transition: box-shadow 0.25s ease;
+  :hover {
+    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.2);
+  }
+  :before {
+    content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
+    display: inline-block;
+    width: 9px;
+    min-height: 18px;
+    background-size: 9px 18px;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 30px;
+  }
+  &.external-url::after {
+    content: none;
+  }
+  
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: calc(50% - 2em);
+    padding: 32px;
+    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
+    flex-direction: row;
+    max-width: ${({ maxWidth }) => maxWidth};
+  }
+`;
+
+const WideTileHeader = styled(TileHeader)<{ align?: string }>`
+  font-size: 24px;
+  text-align: ${({ align }) => align || 'left'};
+`;
+const WideTileText = styled(TileText)<{ align?: string }>`
+  font-size: 18px;
+  text-align: ${({ align }) => align || 'left'};
+`;
+
+const WideTileIcon = styled.div`
+  margin-bottom: 24px;
+  flex-shrink: 0;
+  width: 70px;
+  img {
+    display: block;
+    height: auto;
+    max-width: 100%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin-right: 24px;
+    margin-bottom: 0;
+  }
+`;
+
+export class WideTile extends Component<TileProps & { disableArrow?: boolean }> {
+  render(): JSX.Element {
+    const {
+      to,
+      header,
+      children,
+      target,
+      disableArrow,
+      textAlign,
+      headerAlign,
+      icon,
+      bgColor,
+      bgImage,
+      color,
+      className,
+      style,
+      maxWidth,
+    } = this.props;
+    return (
+      <WideTileWrapper
+        to={to}
+        target={target}
+        disableArrow={disableArrow}
+        withIcon={!!icon}
+        bgColor={bgColor}
+        bgImage={bgImage}
+        color={color}
+        className={className}
+        style={style}
+        maxWidth={maxWidth}
+        data-component-name="ui/Tiles/WideTile"
+      >
+        {icon && (
+          <WideTileIcon>
+            <img src={icon} alt="" />
+          </WideTileIcon>
+        )}
+        <div>
+          {header && (
+            <WideTileHeader align={textAlign} color={color} data-cy={`Wide-${header}`}>
+              {header}
+            </WideTileHeader>
+          )}
+          {children && (
+            <WideTileText align={headerAlign} color={color}>
+              {children}
+            </WideTileText>
+          )}
+        </div>
+      </WideTileWrapper>
+    );
+  }
+}

package/src/ui/Typography.tsx

@@ -0,0 +1,167 @@
+import styled, { css, SimpleInterpolation } from 'styled-components';
+import { color, typography as typographySystem, ColorProps, TypographyProps } from 'styled-system';
+
+export interface ITypography {
+  fontSize?: string;
+  fontWeight?: string | number;
+  fontFamily?: string;
+  lineHeight?: string;
+  color?: string;
+  transform?: string;
+  marginTop?: string;
+  marginRight?: string;
+  marginLeft?: string;
+  marginBottom?: string;
+  marginVertical?: string;
+  marginHorizontal?: string;
+}
+
+export const typographyTokens = {
+  typography: {
+    fontSize: 'var(--font-size-base)',
+    fontFamily: 'var(--font-family-h)',
+    lineHeight: 'var(--line-height-m)',
+  },
+  heading1: {
+    fontSize: 'var(--h1-font-size)',
+    fontFamily: 'var(--font-family-h)',
+    fontWeight: 'var(--font-weight-bold)',
+    lineHeight: 'var(--h1-line-height)',
+    color: 'var(--color-text-main)',
+    marginTop: 'var(--h1-margin-top)',
+    marginBottom: 'var(--h1-margin-bottom)',
+  },
+  heading2: {
+    fontSize: 'var(--h2-font-size)',
+    fontFamily: 'var(--font-family-h)',
+    fontWeight: 'var(--font-weight-bold)',
+    lineHeight: 'var(--h2-line-height)',
+    color: 'var(--color-text-main)',
+    marginTop: 'var(--h2-margin-top)',
+    marginBottom: 'var(--h2-margin-bottom)',
+  },
+  heading3: {
+    fontSize: 'var(--h3-font-size)',
+    fontFamily: 'var(--font-family-h)',
+    fontWeight: 'var(--font-weight-bold)',
+    lineHeight: 'var(--h3-line-height)',
+    color: 'var(--color-text-main)',
+    marginTop: 'var(--h3-margin-top)',
+    marginBottom: 'var(--h3-margin-bottom)',
+  },
+  heading4: {},
+  heading5: {},
+  heading6: {},
+  blockquote: {
+    color: 'var(--color-text-main)',
+  },
+  alert: {
+    fontSize: 'var(--alert-font-size)',
+    fontWeight: 'var(--alert-font-weight)',
+    lineHeight: 'var(--alert-line-height)',
+    marginTop: 'var(--alert-margin-vertical)',
+    marginBottom: 'var(-alert-margin-vartical)',
+    heading: {
+      fontSize: 'var(--alert-heading-font-size)',
+      fontWeight: 'var(--alert-heading-font-weight)',
+      lineHeight: 'var(--alert-line-height)',
+      transform: 'var(--alert-heading-transform)',
+    },
+  },
+};
+
+export function typography(theme?: ITypography): string | SimpleInterpolation {
+  if (!theme) return '';
+  return css`
+    font-size: ${theme.fontSize || ''};
+    font-weight: ${theme.fontWeight || ''};
+    font-family: ${theme.fontFamily || ''};
+    line-height: ${theme.lineHeight || ''};
+    color: ${theme.color || ''};
+    text-transform: ${theme.transform || ''};
+  `;
+}
+
+type HeadingProps = TypographyProps &
+  ColorProps & {
+    mt?: string;
+    mb?: string;
+  };
+
+export const Emphasis = styled.strong.attrs(() => ({
+  'data-component-name': 'ui/Typography/Emphasis',
+}))`
+  font-weight: var(--font-weight-bold);
+`;
+
+export const H1 = styled.h1.attrs(() => ({
+  'data-component-name': 'ui/Typography/H1',
+}))<HeadingProps>`
+  ${typography(typographyTokens.heading1)};
+  margin: 1.35em 0 0.9em;
+  && {
+    ${({ mt }) => mt && `margin-top: ${mt};`}
+    ${({ mb }) => mb && `margin-bottom: ${mb};`}
+    ${color}
+    ${typographySystem}
+  }
+`;
+
+export const H2 = styled.h1.attrs(() => ({
+  'data-component-name': 'ui/Typography/H2',
+}))<HeadingProps>`
+  ${typography(typographyTokens.heading2)};
+  margin: 1.25em 0 0.8em;
+  && {
+    ${({ mt }) => mt && `margin-top: ${mt};`}
+    ${({ mb }) => mb && `margin-bottom: ${mb};`}
+    ${color}
+    ${typographySystem}
+  }
+`;
+
+export const H3 = styled.h1.attrs(() => ({
+  'data-component-name': 'ui/Typography/H3',
+}))<HeadingProps>`
+  ${typography(typographyTokens.heading3)};
+  margin: 1.25em 0 0.8em;
+  && {
+    ${({ mt }) => mt && `margin-top: ${mt};`}
+    ${({ mb }) => mb && `margin-bottom: ${mb};`}
+    ${color}
+    ${typographySystem}
+  }
+`;
+
+export const SectionHeader = styled.h2`
+  color: var(--color-primary-main);
+  font-size: 1.75em;
+  font-weight: var(--font-weight-light);
+  text-align: center;
+  margin: 2.65em 0;
+  padding: 0px 20px;
+  font-family: var(--font-family-h);
+`;
+
+export const Typography = styled.p.attrs(() => ({
+  'data-component-name': 'ui/Typography/Typography',
+}))<
+  TypographyProps & {
+    color?: string;
+    mt?: string;
+    mb?: string;
+  }
+>`
+  ${typography(typographyTokens.typography)};
+  color: var(--color-text-main);
+  ${color}
+  margin-top: ${({ mt }) => mt || '1em'};
+  margin-bottom: ${({ mb }) => mb || '1em'};
+  ${typographySystem}
+`;
+
+export const CompactTypography = styled(Typography).attrs(() => ({
+  mt: '0em',
+  mb: '0em',
+  'data-component-name': 'ui/Typography/CompactTypography',
+}))``;