kitchen-sink-server/src/modules/base-checkcontrol/index.ts

import { css } from '@tesseract-design/css-utils'

export enum CheckControlAppearance {
  TICK_BOX = 'tick-box',
  BUTTON = 'button',
  SWITCH = 'switch',
}

export type CheckControlBaseArgs = {
  compact: boolean,
  appearance: CheckControlAppearance,
  block: boolean,
  type: string,
}

export const CheckStateContainer = ({
  appearance,
  type,
}: CheckControlBaseArgs): string => css.cx(
  css`
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    &:disabled + * {
      cursor: not-allowed;
    }
    &:first-child + * > :first-child + * + * {
      align-items: flex-start;
      text-align: left;
    }
    &:checked + * {
      --color-accent: var(--color-active, Highlight);
      outline: 0;
    }
    &:indeterminate[type="checkbox"] + * {
      --color-accent: var(--color-active, Highlight);
      outline: 0;
    }
    &:indeterminate[type="checkbox"] + * > :first-child + * > * > :first-child {
      display: none;
    }
    &:checked + * > :first-child + * > * > :first-child + * {
      display: none;
    }
    &:focus + * {
      --color-accent: var(--color-hover, red);
      outline: 0;
    }
    &:focus[type="checkbox"] + * {
      --color-accent: var(--color-hover, red);
      outline: 0;
    }
    &:focus + * > :first-child::before {
      box-shadow: 0 0 0 0.375rem var(--color-accent, blue);
    }
  `,
  css.nest('&:checked + * > :first-child + * > *') (
    css.if (
      appearance === CheckControlAppearance.TICK_BOX
      || appearance === CheckControlAppearance.BUTTON
    ) (
      css.if (type === 'checkbox') (
        css`
          width: 1.5em;
          height: 1.5em;
        `
      ),
      css.if (type === 'radio') (
        css`
          width: 1em;
          height: 1em;
        `
      ),
    ),
    css.if (appearance === CheckControlAppearance.SWITCH) (
      css`
        width: 1em;
        height: 1em;
        margin-right: 0;
        margin-left: 1em;
      `
    ),
  ),
  css.nest('&:first-child + *') (
    css`
      cursor: pointer;
    `,
    css.if (appearance === CheckControlAppearance.BUTTON) (
      css`
        display: flex;
      `,
    ),
    css.if (appearance === CheckControlAppearance.SWITCH) (
      css`
        width: 1em;
        height: 1em;
      `,
    ),
  ),
  css.nest('&:indeterminate[type="checkbox"] + * > :first-child + * > *') (
    css.if (
      appearance === CheckControlAppearance.BUTTON
      || appearance === CheckControlAppearance.TICK_BOX
    ) (
      css`
        width: 1.5em;
        height: 1.5em;
      `
    ),
    css.if (appearance === CheckControlAppearance.SWITCH) (
      css`
        width: 1em;
        height: 1em;
        margin-right: 0.5em;
        margin-left: 0.5em;
      `
    )
  ),
  css.nest('&:indeterminate[type="checkbox"] + * > :first-child + * > * > :first-child + *') (
    css.if (
      appearance === CheckControlAppearance.BUTTON
      || appearance === CheckControlAppearance.TICK_BOX
    ) (
      css`
        display: block;
      `
    ),
  ),
  css.nest('&:checked + * > :first-child + * > * > :first-child') (
    css.if (
      appearance === CheckControlAppearance.BUTTON
      || appearance === CheckControlAppearance.TICK_BOX
    ) (
      css`
        display: block;
      `
    ),
  ),
);

export const ClickArea = (): string => css.cx(
  css`
    display: contents;
  `
);

export const CheckIndicatorArea = ({
  compact,
  appearance,
  type,
}: CheckControlBaseArgs): string => css.cx(
  css`
    display: inline-grid;
    vertical-align: middle;
    place-content: center;
    position: relative;
    background-color: var(--color-bg, white);
    box-shadow: 0 0 0 0.125rem var(--color-bg, white);
    color: var(--color-accent, blue);
    overflow: hidden;
    &::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: inherit;
      border-width: 0.125rem;
      border-style: solid;
      box-sizing: border-box;
    }
  `,
  css.if (appearance === CheckControlAppearance.TICK_BOX) (
    css`
      width: 1.5em;
      height: 1.5em;
    `,
    css.if (type === 'checkbox') (
      css`
        border-radius: 0.25rem;
      `
    ),
    css.if (type === 'radio') (
      css`
        border-radius: 50%;
      `
    ),
  ),
  css.if (appearance === CheckControlAppearance.BUTTON) (
    css`
      width: 1.5em;
      height: 1.5em;
    `,
    css.if (!compact) (
      css`
        margin-left: -0.25rem;
      `
    ),
    css.if (type === 'checkbox') (
      css`
        border-radius: 0.25rem;
      `
    ),
    css.if (type === 'radio') (
      css`
        border-radius: 50%;
      `
    ),
  ),
  css.if (appearance === CheckControlAppearance.SWITCH) (
    css`
      width: 2.5em;
      height: 1.5em;
      border-radius: 0.75em;
    `
  ),
  css.nest('& + *') (
    css.dynamic({
      'margin-left': compact ? '0.375rem' : '0.75rem',
    })
  )
);

export const CheckIndicatorWrapper = ({
  appearance,
}: CheckControlBaseArgs): string => css.cx(
  css`
    flex-shrink: 0;
    display: grid;
    position: relative;
    background-color: var(--color-accent, blue);
    overflow: hidden;
    border-radius: inherit;
  `,
  css.if(
    appearance === CheckControlAppearance.TICK_BOX
    || appearance === CheckControlAppearance.BUTTON
  ) (
    css`
      width: 0;
      height: 0;
    `
  ),
  css.if(appearance === CheckControlAppearance.SWITCH) (
    css`
      width: 1em;
      height: 1em;
      margin-right: 1em;
      transition-property: margin-left, margin-right;
      transition-duration: 150ms;
      transition-timing-function: ease-out;
    `
  ),
);

export const CheckIndicator = ({
  appearance,
}: CheckControlBaseArgs) => css.cx(
  css`
    fill: none;
    stroke: var(--color-bg, white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 1.5em;
    height: 1.5em;
  `,
  css.if(appearance === CheckControlAppearance.SWITCH) (
    css`
      display: none;
    `
  )
);

export const ClickAreaWrapper = ({
  block,
  appearance,
}: CheckControlBaseArgs) => css.cx(
  css`
    vertical-align: middle;
  `,
  css.dynamic({
    display: block ? 'block' : 'inline-block',
  }),
  css.if (appearance === CheckControlAppearance.TICK_BOX) (
    css`
      padding-left: 2.25rem;
      text-indent: -2.25rem;
    `
  ),
  css.if (appearance === CheckControlAppearance.SWITCH) (
    css`
      padding-left: 3.25rem;
      text-indent: -3.25rem;
    `
  ),
);

export const Subtext = () => css.cx(
  css`
    font-size: 0.875em;
  `
);