@ornikar/kitt-universal 1.0.0-pre

package/src/typography/Typography.tsx

@@ -0,0 +1,165 @@
+import type { FC, ReactElement, ReactNode } from 'react';
+import React, { createContext, useContext } from 'react';
+import type { TextProps } from 'react-native';
+import styled from 'styled-components/native';
+import type { Except, SetOptional } from 'type-fest';
+
+type TypographyHeaderType = `header${'1' | '2' | '3' | '4' | '5'}`;
+type TypographyBodyType = 'body' | `body-${'large' | 'medium' | 'small' | 'xsmall'}`;
+type TypographyType = TypographyHeaderType | TypographyBodyType;
+type TypographyVariant = 'regular' | 'bold' | 'italic';
+export type TypographyColor =
+  | 'black'
+  | 'black-light'
+  | 'white'
+  | 'white-light'
+  | 'grey'
+  | 'grey-light'
+  | 'primary'
+  | 'primary-light'
+  | 'accent'
+  | 'success'
+  | 'danger';
+
+const TypographyTypeContext = createContext<TypographyType | undefined>(undefined);
+const TypographyColorContext = createContext<TypographyColor>('black');
+
+export function useTypographyColor(): TypographyColor {
+  return useContext(TypographyColorContext);
+}
+
+interface StyledTypographyProps {
+  isHeader: boolean;
+  type?: TypographyType;
+  variant: TypographyVariant;
+  color?: TypographyColor;
+}
+
+const StyledTypography = styled.Text<StyledTypographyProps>`
+  /* font */
+  ${({ theme, isHeader, type, variant }) => {
+    const { headers, bodies } = theme.kitt.typography.types;
+
+    return `
+      /* type */
+      ${
+        !type
+          ? ''
+          : `
+  font-family: ${isHeader ? headers.fontFamily[variant] : bodies.fontFamily[variant]};
+  font-size: ${
+    isHeader
+      ? headers.configs[type as TypographyHeaderType].baseAndSmall.fontSize
+      : bodies.configs[type as TypographyBodyType].baseAndSmall.fontSize
+  };
+  line-height: ${
+    isHeader
+      ? headers.configs[type as TypographyHeaderType].baseAndSmall.lineHeight
+      : bodies.configs[type as TypographyBodyType].baseAndSmall.lineHeight
+  };
+    `
+      }
+
+    /* variant */
+    font-weight: ${isHeader ? headers.fontWeight : bodies.fontWeight[variant]};
+    font-style: ${isHeader ? headers.fontStyle : bodies.fontStyle[variant]};
+  `;
+  }}
+
+  /* color */
+  ${({ theme, color }) =>
+    !color
+      ? ''
+      : `
+  color: ${theme.kitt.typography.colors[color]};
+  text-decoration-color: ${theme.kitt.typography.colors[color]};
+  `}
+`;
+
+export interface TypographyProps extends Except<TextProps, 'accessibilityRole'> {
+  // Find mapping for web here: https://www.w3.org/TR/html-aria/
+  accessibilityRole: NonNullable<TextProps['accessibilityRole']> | null;
+  /** base type. Inherited from parent Typography if not specified */
+  base?: TypographyType;
+  small?: TypographyType;
+  medium?: TypographyType;
+  large?: TypographyType;
+  /** Default to regular for bodies and bold of headers. Is not inherited. */
+  variant?: TypographyVariant;
+  /** Inherited from parent Typography if not specified, or black if no Typography parent found. */
+  color?: TypographyColor;
+  children: ReactNode;
+}
+export type TypographyPropsWithoutRole = Except<TypographyProps, 'accessibilityRole'>;
+
+const isTypeHeader = (type: TypographyType): boolean => type.startsWith('header');
+const isTypographyHeader = (base: TypographyType | undefined, typeInContext: TypographyType | undefined): boolean => {
+  if (base) return isTypeHeader(base);
+  if (typeInContext) return isTypeHeader(typeInContext);
+
+  throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
+};
+
+export function Typography({
+  accessibilityRole,
+  base,
+  variant,
+  color,
+  ...otherProps
+}: TypographyProps): ReactElement | null {
+  const typeInContext = useContext(TypographyTypeContext);
+  const isHeader = isTypographyHeader(base, typeInContext);
+  const nonNullableVariant: TypographyVariant = variant ?? (isHeader ? 'bold' : 'regular');
+  const colorWithDefaultToBlack: TypographyColor | undefined = color ?? (typeInContext ? undefined : 'black');
+
+  const content = base ? (
+    // use the type and pass the type to the context for children
+    <TypographyTypeContext.Provider value={base}>
+      <StyledTypography
+        color={colorWithDefaultToBlack}
+        isHeader={isHeader}
+        type={base}
+        variant={nonNullableVariant}
+        {...otherProps}
+      />
+    </TypographyTypeContext.Provider>
+  ) : (
+    <StyledTypography
+      color={colorWithDefaultToBlack}
+      isHeader={isHeader}
+      variant={nonNullableVariant}
+      {...otherProps}
+    />
+  );
+
+  return color ? <TypographyColorContext.Provider value={color}>{content}</TypographyColorContext.Provider> : content;
+}
+
+export type TypographyTextProps = SetOptional<TypographyProps, 'accessibilityRole'>;
+function TypographyText(props: TypographyTextProps): ReactElement {
+  return <Typography accessibilityRole={null} {...props} />;
+}
+
+function TypographyParagraph(props: TypographyTextProps): ReactElement {
+  // @ts-expect-error paragraph is not allowed in react-native but exists in react-native-web
+  return <Typography accessibilityRole="paragraph" {...props} />;
+}
+
+export type TypographyHeadingProps = TypographyPropsWithoutRole;
+
+const createHeading = (level: string): FC<TypographyHeadingProps> => {
+  // https://github.com/necolas/react-native-web/issues/401
+  function TypographyHeading(props: TypographyHeadingProps): ReactElement {
+    return <Typography accessibilityRole="header" {...props} aria-level={level} />;
+  }
+  TypographyHeading.displayName = `TypographyHeading${level}`;
+  return TypographyHeading;
+};
+
+Typography.Text = TypographyText;
+Typography.Paragraph = TypographyParagraph;
+Typography.h1 = createHeading('1');
+Typography.h2 = createHeading('2');
+Typography.h3 = createHeading('3');
+Typography.h4 = createHeading('4');
+Typography.h5 = createHeading('5');

package/src/typography/TypographyIcon.stories.tsx

@@ -0,0 +1,32 @@
+import { AlertCircleIcon } from '@ornikar/kitt-icons';
+import { storiesOf } from '@storybook/react-native';
+import React from 'react';
+import { StoryComponents } from '../story-components';
+import { Typography } from './Typography';
+import { TypographyIcon } from './TypographyIcon';
+
+const { Section, Story } = StoryComponents;
+storiesOf('kitt/Typography', module).add('Icon', () => (
+  <Story title="Icons">
+    <Section.DemoSection>
+      <TypographyIcon color="black" icon={<AlertCircleIcon />} />
+    </Section.DemoSection>
+
+    <Section title="Icons inside text">
+      <Typography.Text base="body-large" color="black">
+        <TypographyIcon icon={<AlertCircleIcon />} /> The future is in our{' '}
+        <Typography.Text color="primary">
+          hands <TypographyIcon icon={<AlertCircleIcon />} />
+        </Typography.Text>{' '}
+        to shape.
+      </Typography.Text>
+      <Typography.Text base="header1" color="black">
+        <TypographyIcon icon={<AlertCircleIcon />} /> The future is in our{' '}
+        <Typography.Text color="primary">
+          hands <TypographyIcon icon={<AlertCircleIcon />} />
+        </Typography.Text>{' '}
+        to shape.
+      </Typography.Text>
+    </Section>
+  </Story>
+));

package/src/typography/TypographyIcon.tsx

@@ -0,0 +1,35 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useTheme } from 'styled-components/native';
+import type { Except } from 'type-fest';
+import type { IconProps } from '../Icon/Icon';
+import { Icon } from '../Icon/Icon';
+import type { SetNonNullable } from '../utils/typeUtils';
+import type { TypographyProps } from './Typography';
+import { useTypographyColor } from './Typography';
+
+export interface TypographyIconProps extends Except<IconProps, 'color'> {
+  color?: TypographyProps['color'];
+}
+
+function TypographyIconInheritColor(props: TypographyIconProps): ReactElement {
+  const color = useTypographyColor();
+  const theme = useTheme();
+  return <Icon {...props} color={theme.kitt.typography.colors[color]} />;
+}
+
+function TypographyIconSpecifiedColor({
+  color,
+  ...otherProps
+}: SetNonNullable<TypographyIconProps, 'color'>): ReactElement {
+  const theme = useTheme();
+  return <Icon {...otherProps} color={theme.kitt.typography.colors[color]} />;
+}
+
+export function TypographyIcon({ color, ...otherProps }: TypographyIconProps): ReactElement {
+  if (color) {
+    return <TypographyIconSpecifiedColor color={color} {...otherProps} />;
+  }
+
+  return <TypographyIconInheritColor {...otherProps} />;
+}

package/src/typography/TypographyLink.stories.tsx

@@ -0,0 +1,89 @@
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react-native';
+import React from 'react';
+import styled from 'styled-components/native';
+import type { BlockProps } from '../stories/Block';
+import { BlockWithPadding } from '../stories/Block';
+import { StoryComponents } from '../story-components';
+import type { TypographyProps } from './Typography';
+import { Typography } from './Typography';
+import { TypographyLink } from './TypographyLink';
+
+const { Story, StoryGrid, StoryTitle } = StoryComponents;
+const groups: {
+  background: BlockProps['color'];
+  colors: [TypographyProps['color'], TypographyProps['color']];
+}[] = [
+  { background: 'transparent', colors: ['black', 'black-light'] },
+  { background: 'dark', colors: ['white', 'white-light'] },
+];
+
+const variants: NonNullable<TypographyProps['variant']>[] = ['bold', 'regular', 'italic'];
+const typographyTypes: TypographyProps['base'][] = ['body-large', 'body-medium', 'body', 'body-small', 'body-xsmall'];
+
+const ucFirst = (string: string): string => string[0].toUpperCase() + string.slice(1);
+const formatColorName = (colorName = 'black'): string => colorName.split('-').map(ucFirst).join('\u00A0');
+
+const ViewWithMarginBottom = styled.View`
+  overflow: hidden;
+  margin-bottom: 10px;
+`;
+
+storiesOf('kitt/Typography', module).add('Link', () => (
+  <Story title="Link">
+    {groups.map(({ background, colors }, index) => (
+      <BlockWithPadding
+        /* eslint-disable-next-line react/no-array-index-key */
+        key={index}
+        color={background}
+      >
+        <StoryGrid.Row breakpoint="medium">
+          {colors.filter(Boolean).map((color) =>
+            variants.map((variant) => (
+              <StoryGrid.Col key={variant}>
+                <StoryTitle.Level2 color={color}>
+                  {formatColorName(color)} {ucFirst(variant)}
+                </StoryTitle.Level2>
+
+                {typographyTypes.map((base) => {
+                  return (
+                    <ViewWithMarginBottom key={base}>
+                      {[false, true].map((noUnderline) => (
+                        <Typography.Paragraph
+                          key={noUnderline ? 'no-underline' : 'underline'}
+                          variant={variant}
+                          base={base}
+                          color={color}
+                        >
+                          This is a paragraph and inside it{' '}
+                          <TypographyLink
+                            base={base}
+                            noUnderline={noUnderline}
+                            href="#"
+                            onPress={action('Link pressed')}
+                          >
+                            there is a link
+                          </TypographyLink>{' '}
+                          that leads home.{' '}
+                          <TypographyLink
+                            noUnderline={noUnderline}
+                            variant="bold"
+                            href="#"
+                            onPress={action('Link pressed')}
+                          >
+                            Here a bold link
+                          </TypographyLink>
+                          .
+                        </Typography.Paragraph>
+                      ))}
+                    </ViewWithMarginBottom>
+                  );
+                })}
+              </StoryGrid.Col>
+            )),
+          )}
+        </StoryGrid.Row>
+      </BlockWithPadding>
+    ))}
+  </Story>
+));

package/src/typography/TypographyLink.tsx

@@ -0,0 +1,48 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { Platform } from 'react-native';
+import styled from 'styled-components/native';
+import type { SetRequired } from 'type-fest';
+import type { TypographyProps, TypographyPropsWithoutRole } from './Typography';
+import { Typography } from './Typography';
+
+interface StyledTypographyLinkProps extends TypographyPropsWithoutRole {
+  disabled?: boolean;
+  noUnderline?: boolean;
+}
+
+const StyledLink = styled(Typography).withConfig({
+  shouldForwardProp: (prop, defaultValidatorFn) => !['disabled', 'noUnderline'].includes(prop),
+})<TypographyLinkProps & TypographyProps>`
+  text-decoration: ${({ noUnderline }) => (noUnderline ? 'none' : 'underline')};
+  ${({ disabled }) =>
+    Platform.OS === 'web'
+      ? `
+  text-decoration-color: inherit;
+  transition: color 0.2s ease-in-out;
+  cursor: ${disabled ? 'not-allowed' : 'pointer'};
+  `
+      : null};
+  margin: 0;
+`;
+
+interface TypographyLinkProps extends SetRequired<StyledTypographyLinkProps, 'onPress'> {
+  href?: string;
+}
+
+export function TypographyLink({
+  disabled,
+  noUnderline,
+  variant = 'bold',
+  ...otherProps
+}: TypographyLinkProps): ReactElement {
+  return (
+    <StyledLink
+      disabled={disabled}
+      noUnderline={noUnderline}
+      variant={variant}
+      accessibilityRole="link"
+      {...otherProps}
+    />
+  );
+}