5752977660

import { AnchorHTMLAttributes, FC } from 'react';

import './typography.css';

interface FactoryParams {
  tag: 'p' | 'span' | 'a';
  className?: string;
}

interface TypographyProps {
  variant?: 'mono' | 'light' | 'handwriting';
  size?: 'l' | 's' | 'xs';
  className?: string | ReadonlyArray<string>;
}

const typographyFactory = ({
  tag,
  className: componentClassName,
}: FactoryParams): FC<TypographyProps> => {
  const Component = tag;

  return ({ variant, size, className, children, ...rest }) => {
    let classNames = ['typography'];
    if (variant) {
      classNames.push('typography_' + variant);
    }
    if (size) {
      classNames.push('typography_' + size);
    }
    if (componentClassName) {
      classNames.push(componentClassName);
    }
    if (className) {
      classNames = classNames.concat(className);
    }

    return (
      <Component {...rest} className={classNames.join(' ')}>
        {children}
      </Component>
    );
  };
};

export const Paragraph = typographyFactory({ tag: 'p' }) as FC<
  TypographyProps & AnchorHTMLAttributes<HTMLParagraphElement>
>;

export const Span = typographyFactory({ tag: 'span' }) as FC<
  TypographyProps & AnchorHTMLAttributes<HTMLParagraphElement>
>;

export const Link = typographyFactory({
  tag: 'a',
  className: 'link',
}) as FC<TypographyProps & AnchorHTMLAttributes<HTMLAnchorElement>>;

1	import { AnchorHTMLAttributes, FC } from 'react';
2
3	import './typography.css';
4
5	interface FactoryParams {
6	tag: 'p' \| 'span' \| 'a';
7	className?: string;
8	}
9
10	interface TypographyProps {
11	variant?: 'mono' \| 'light' \| 'handwriting';
12	size?: 'l' \| 's' \| 'xs';
13	className?: string \| ReadonlyArray<string>;
14	}
15
16	const typographyFactory = ({	×
17	tag,
18	className: componentClassName,
19	}: FactoryParams): FC<TypographyProps> => {
20	const Component = tag;	×
21
22	return ({ variant, size, className, children, ...rest }) => {	×
23	let classNames = ['typography'];	×
24	if (variant) {	×
25	classNames.push('typography_' + variant);	×
26	}
27	if (size) {	×
28	classNames.push('typography_' + size);	×
29	}
30	if (componentClassName) {	×
31	classNames.push(componentClassName);	×
32	}
33	if (className) {	×
34	classNames = classNames.concat(className);	×
35	}
36
37	return (	×
38	<Component {...rest} className={classNames.join(' ')}>
39	{children}
40	</Component>
41	);
42	};
43	};
44
45	export const Paragraph = typographyFactory({ tag: 'p' }) as FC<	×
46	TypographyProps & AnchorHTMLAttributes<HTMLParagraphElement>
47	>;
48
49	export const Span = typographyFactory({ tag: 'span' }) as FC<	×
50	TypographyProps & AnchorHTMLAttributes<HTMLParagraphElement>
51	>;
52
53	export const Link = typographyFactory({	×
54	tag: 'a',
55	className: 'link',
56	}) as FC<TypographyProps & AnchorHTMLAttributes<HTMLAnchorElement>>;

nilfalse / ctf / 5752977660

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous