@edvisor/product-language 0.3.0 → 0.3.1

package/src/lib/foundations/spacing/spacing.stories.mdx

@@ -1,51 +0,0 @@
-import { Meta, Description } from '@storybook/addon-docs';
-
-
-<Meta title="Foundations/Spacing" />
-
-# Spacing System
-
-All spacing for components and typography is done in increments of 8 pixels.
-This forms the basic unit of measurement for spacing.
-
-For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/UI-Library-(in-progress)?node-id=388%3A364)
-
-## How to use
-
-```javascript
-import SPACING from './spacing'
-
-//get the token value
-SPACING.[`YOUR-VALUE-HERE`]
-```
-
-## When to use
-
-You can set this values from this props:
-
-- width
-- heigth
-- margin
-- padding
-
-
-## List of Values
-
-| Name | Value |
-| ---- | ----- |
-| `Size2` | 2px|
-| `Size4` | 4px|
-| `Size8` | 8px|
-| `Size12` | 12px|
-| `Size16` | 16px|
-| `Size24` | 24px|
-| `Size32` | 32px|
-| `Size64` | 64px|
-| `Size96` | 96px|
-| `Size128` | 128px|
-| `Size192` | 192px|
-| `Size256` | 256px|
-| `Size384` | 384px|
-| `Size512` | 512px|
-| `Size640` | 640px|
-| `Size768` | 768px|

package/src/lib/foundations/spacing/spacing.ts

@@ -1,18 +0,0 @@
-export enum SPACING {
-  Size2 = '2px',
-  Size4 = '4px',
-  Size8 = '8px',
-  Size12 = '12px',
-  Size16 = '16px',
-  Size24 = '24px',
-  Size32 = '32px',
-  Size64 = '64px',
-  Size96 = '96px',
-  Size128 = '128px',
-  Size192 = '192px',
-  Size256 = '256px',
-  Size384 = '384px',
-  Size512 = '512px',
-  Size640 = '640px',
-  Size768 = '768px',
-}

package/src/lib/foundations/typography/constants.ts

@@ -1,25 +0,0 @@
-
-export const enum FontWeight {
-  Regular = '400',
-  Medium = '500',
-  SemiBold = '600',
-}
-
-export const FontSize = {
-  a: '13px',
-  b: '14px',
-  c: '16px',
-  d: '18px',
-  e: '20px',
-  f: '28px',
-  g: '36px',
-} as const
-
-export const LineHeight = {
-  a: '16px',
-  b: '20px',
-  c: '24px',
-  d: '28px',
-  e: '32px',
-  f: '44px',
-} as const

package/src/lib/foundations/typography/fonts.ts

@@ -1,205 +0,0 @@
-export const InterFontFace = `
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
-    U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
-    U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
-    U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
-    format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
-}
-`

package/src/lib/foundations/typography/index.tsx

@@ -1 +0,0 @@
-export * from './typography'

package/src/lib/foundations/typography/text-aspect-flags.ts

@@ -1,61 +0,0 @@
-import { bitwiseOr, isDefined, MappedEnum, PropsWithChildren, RequireOnlyOne } from '@helpers'
-import { Text } from '../color-system'
-
-export const enum TextAspects {
-  default = 1,
-  subdued = 2,
-  light = 4,
-  critical = 8,
-  success = 16,
-  onPrimary = 32,
-  onCritical = 64,
-}
-
-type TextOptions<T> = MappedEnum<typeof TextAspects, T>
-
-function toTextAspect(n: number): TextAspects {
-  switch (n) {
-    case TextAspects.subdued: return TextAspects.subdued
-    case TextAspects.light: return TextAspects.light
-    case TextAspects.critical: return TextAspects.critical
-    case TextAspects.success: return TextAspects.success
-    case TextAspects.onPrimary: return TextAspects.onPrimary
-    case TextAspects.onCritical: return TextAspects.onCritical
-    default: return TextAspects.default
-  }
-}
-
-const TextAspectColors = {
-  [TextAspects.default]: Text.Default,
-  [TextAspects.subdued]: Text.Subdued,
-  [TextAspects.light]: Text.Light,
-  [TextAspects.onPrimary]: Text.OnPrimary,
-  [TextAspects.onCritical]: Text.OnPrimary,
-  [TextAspects.success]: Text.Success,
-  [TextAspects.critical]: Text.Critical,
-}
-
-export type ITextAspectProps = Partial<RequireOnlyOne<TextOptions<boolean>>> & PropsWithChildren
-
-export type TransientTextOptions = Omit<TextOptions<boolean>, 'onCritical' | 'onPrimary'> & {
-  $onCritical?: boolean
-  $onPrimary?: boolean
-}
-
-export type ITransientTextAspectProps = Partial<RequireOnlyOne<TransientTextOptions>> & PropsWithChildren
-
-export function getTextAspect(props: ITextAspectProps & ITransientTextAspectProps) {
-  return TextAspectColors[
-    toTextAspect(
-      bitwiseOr([
-        props.default,
-        props.subdued,
-        props.light,
-        props.critical,
-        props.success,
-        isDefined(props.onPrimary) ? props.onPrimary : props.$onPrimary,
-        isDefined(props.onCritical) ? props.onCritical : props.$onCritical,
-      ])
-    )
-  ]
-}

package/src/lib/foundations/typography/typography.tsx

@@ -1,102 +0,0 @@
-import { css } from 'styled-components'
-import { getTextAspect, ITransientTextAspectProps } from './text-aspect-flags'
-import { FontWeight, FontSize, LineHeight } from './constants'
-import { is } from '@helpers'
-import { InterFontFace } from './fonts'
-
-export type ILabelProps = ITransientTextAspectProps & {
-  default?: boolean,
-  subtle?: boolean,
-  strong?: boolean, 
-}
-
-export type IBodyProps = ITransientTextAspectProps & {
-  default?: boolean,
-  strong?: boolean, 
-}
-
-const LightText = css` 
-  color: ${getTextAspect({ light: true })};
-`
-
-const Base = css<ITransientTextAspectProps>`
-  color: ${(props) => getTextAspect(props)};
-  ${InterFontFace}
-  font-family: 'Inter';
-`
-
-const Display = css<ITransientTextAspectProps>`
-  ${Base}
-  font-weight: ${FontWeight.Regular};
-  font-size: ${FontSize.g};
-  line-height: ${LineHeight.f};
-`
-
-const Heading1 = css<ITransientTextAspectProps>`
-  ${Base}
-  font-weight: ${FontWeight.SemiBold};
-  font-size: ${FontSize.f};
-  line-height: ${LineHeight.e};
-`
-
-const Heading2 = css<ITransientTextAspectProps>`
-  ${Heading1}
-  font-size: ${FontSize.e};
-  line-height: ${LineHeight.d};
-`
-
-const Heading3 = css<ITransientTextAspectProps>`
-  ${Heading1}
-  font-size: ${FontSize.c};
-  line-height: ${LineHeight.c};
-`
-
-const Heading4 = css<ITransientTextAspectProps>`
-  ${Heading1}
-  font-size: ${FontSize.b};
-  line-height: ${LineHeight.b};
-`
-
-const Body = css<IBodyProps>`
-  ${Base}
-  font-weight: ${({ strong }) => is(strong) ? FontWeight.Medium : FontWeight.Regular};
-  font-size: ${FontSize.b};
-  line-height: ${LineHeight.b};
-`
-
-const BodyLarge = css<IBodyProps>`
-  ${Base}
-  font-weight: ${({ strong }) => is(strong) ? FontWeight.SemiBold : FontWeight.Regular};
-  font-size: ${FontSize.d};
-  line-height: ${LineHeight.d};
-`
-
-const Caption = css<ITransientTextAspectProps>`
-  ${Base}
-  font-weight: ${FontWeight.Regular};
-  font-size: ${FontSize.a};
-  line-height: ${LineHeight.a};
-`
-
-const Label = css<ILabelProps>`
-  ${Base}
-  font-weight:  ${({ strong }) => is(strong) ? FontWeight.Medium : FontWeight.Regular};
-  font-size: ${({ subtle }) => is(subtle) ? FontSize.a : FontSize.b};
-  line-height: ${({ subtle }) => is(subtle) ? LineHeight.a : LineHeight.b};
-`
-
-export const Typography = {
-  Display,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Body,
-  BodyLarge,
-  Caption,
-  Label,
-}
-
-export const _Typography = {
-  LightText,
-}

package/src/lib/helpers/generic-types.ts

@@ -1,44 +0,0 @@
-// eslint-disable-next-line no-restricted-syntax
-import React, { FC as FunctionComponent, ForwardRefExoticComponent, ForwardRefRenderFunction, PropsWithChildren as PWC, PropsWithoutRef, RefAttributes } from 'react'
-import { Slot } from './slots'
-
-/** @see https://stackoverflow.com/a/49725198/29182 */
-export type RequireOnlyOne<T, Keys extends keyof T = keyof T> = Pick<
-T,
-Exclude<keyof T, Keys>
-> &
-{
-  [K in Keys]-?: Required<Pick<T, K>> &
-    Partial<Record<Exclude<Keys, K>, undefined>>;
-}[Keys];
-
-export type MappedEnum<E, T> = {
-  [key in keyof E]: T;
-}
-
-export type Values<T> = T[keyof T];
-
-export type PropsWithChildren<T = unknown> = PWC<T>
-
-// Our FC type adds the ability to specify sub-components such as Slots
-// also, just good to wrap imports from 3rd parties in general
-export type FC<
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  P = {}, 
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  E extends { [x: symbol]: FunctionComponent<PropsWithChildren> | typeof Slot } = {}
-> = FunctionComponent<P> 
-  & { 
-    [key in keyof E]: E[key]
-  }
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-type ExtensibleForwardRef<T, P = {}, E = {}> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>
-  & {
-    [key in keyof E]: E[key]
-  }
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export function forwardRef<T, P = {}, E = {}>(render: ForwardRefRenderFunction<T, P>): ExtensibleForwardRef<T, P, E> {
-  return React.forwardRef(render) as ExtensibleForwardRef<T, P, E>
-}

package/src/lib/helpers/index.ts

@@ -1,6 +0,0 @@
-export * from './safe-navigation'
-export * from './slots'
-export * from './generic-types'
-export * from './numbers'
-export * from './nothing'
-export * from './strings'

package/src/lib/helpers/nothing.tsx

@@ -1,18 +0,0 @@
-import { FC, PropsWithChildren } from './generic-types'
-import { isDefined } from './safe-navigation'
-
-// eslint-disable-next-line no-null/no-null
-export const Nothing: FC = () => null
-
-export function maybeRender<T>(prop: T, JSX: JSX.Element) {
-  return isDefined(prop) && Boolean(prop) ? JSX : <Nothing />
-}
-
-interface IIfProps {
-  is: unknown
-}
-
-export const If: FC<PropsWithChildren<IIfProps>> = (props) => {
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return maybeRender(props.is, <>{props.children}</>)
-}

package/src/lib/helpers/safe-navigation.ts

@@ -1,44 +0,0 @@
-
-/** even though we have null disabled in the repo,
- * I still would not want isNil to skip checking null
- * it is for juuuuust in case a third party sends us a null
- * or something, and the types are not correct
- */
-
-/* eslint-disable no-null/no-null */
-/* eslint-disable @typescript-eslint/ban-types */
-
-export function isNil<T>(value: T | undefined | null): value is undefined | null {
-  return value === null || value === undefined
-}
-
-export function isDefined<T>(value: T | undefined | null): value is T {
-  return !isNil(value)
-}
-
-export function defaultTo<T>(value: T | undefined | null, fallback: T): T {
-  return isDefined(value) ? value : fallback
-}
-
-export function isEmpty<T extends { length: number }>(obj: T) {
-  return obj.length < 1
-}
-
-/** used for evaluating tri-state logic (true | false | undefined) */
-export function is (pred?: boolean): boolean {
-  return isDefined(pred) && pred
-}
-
-export function safeArray<T>(arr: T[] | undefined | null): T[] {
-  return isDefined(arr) ? arr : []
-}
-
-export function safeCallback <T>(f?: (e: T) => void, e?: T) {
-  if (isDefined(f)) {
-    if (isDefined(e)) {
-      f(e)
-    } else {
-      (f as () => void)()
-    }
-  }
-}

package/src/lib/helpers/slots.test.tsx

@@ -1,98 +0,0 @@
-import styled from 'styled-components'
-import { FC } from './generic-types'
-import { isReactElementOfType, Slot } from './slots'
-
-describe('isReactElementOfType', () => {
-  describe('class component', () => {
-    class Bob extends Slot {}
-
-    describe('both component and element are unstyled', () => {
-      it('knows when they are different', () => {
-        expect(isReactElementOfType(Bob)(<div />)).toBe(false)
-      })
-      it('knows when they are the same', () => {
-        expect(isReactElementOfType(Bob)(<Bob />)).toBe(true)
-      })
-    })
-
-    describe('component type is styled', () => {
-      const StyledBob = styled(Bob)``
-
-      it('knows when they are different', () => {
-        expect(isReactElementOfType(StyledBob)(<div />)).toBe(false)
-      })
-      it('knows when they are the same', () => {
-        expect(isReactElementOfType(StyledBob)(<Bob />)).toBe(true)
-      })
-    })
-
-    describe('element is styled', () => {
-      const StyledBob = styled(Bob)``
-
-      it('knows when they are different', () => {
-        expect(isReactElementOfType(Bob)(<div />)).toBe(false)
-      })
-      it('knows when they are the same', () => {
-        expect(isReactElementOfType(Bob)(<StyledBob />)).toBe(true)
-      })
-    })
-
-    describe('both component and element are styled', () => {
-      const StyledBob = styled(Bob)``
-
-      it('knows when they are different', () => {
-        expect(isReactElementOfType(StyledBob)(<div />)).toBe(false)
-      })
-      it('knows when they are the same', () => {
-        expect(isReactElementOfType(StyledBob)(<StyledBob />)).toBe(true)
-      })
-    })
-  })
-
-  describe('function component', () => {
-    const Bob: FC = () => <div />
-
-    describe('both component and element are unstyled', () => {
-      it('knows when they are different', () => {
-        expect(isReactElementOfType(Bob)(<div />)).toBe(false)
-      })
-      it('knows when they are the same', () => {
-        expect(isReactElementOfType(Bob)(<Bob />)).toBe(true)
-      })
-    })
-
-    describe('component type is styled', () => {
-      const StyledBob = styled(Bob)``
-
-      it('knows when they are different', () => {
-        expect(isReactElementOfType(StyledBob)(<div />)).toBe(false)
-      })
-      it('knows when they are the same', () => {
-        expect(isReactElementOfType(StyledBob)(<Bob />)).toBe(true)
-      })
-    })
-
-    describe('element is styled', () => {
-      const StyledBob = styled(Bob)``
-
-      it('knows when they are different', () => {
-        expect(isReactElementOfType(Bob)(<div />)).toBe(false)
-      })
-      it('knows when they are the same', () => {
-        expect(isReactElementOfType(Bob)(<StyledBob />)).toBe(true)
-      })
-    })
-
-    describe('both component and element are styled', () => {
-      const StyledBob = styled(Bob)``
-
-      it('knows when they are different', () => {
-        expect(isReactElementOfType(StyledBob)(<div />)).toBe(false)
-      })
-      it('knows when they are the same', () => {
-        expect(isReactElementOfType(StyledBob)(<StyledBob />)).toBe(true)
-      })
-    })
-  })
-
-})