WRNexusJS/.publish/ui/components/divider.wrn

// Divider -- a rule between sections, optionally labelled.
//
//   <Divider />
//   <Divider label="or" />
//   <Divider orientation="vertical" />
//
// The label sits between two rules rather than on top of one, so the text
// never overlaps the line at any width.
//
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
// and silently swallows the rule that follows it.
component Divider {
  props {
    size: string = "default"
    color: string = "primary"
    label: string = ""
    orientation: string = "horizontal"
    variant: string = "solid"
    class: string = ""
  }

  functions {
    shared function isVertical() {
      return orientation === "vertical"
    }

    // The rule only takes the component colour when there is a label. A plain
    // divider is chrome and should stay the border token.
    shared function tone() {
      return label ? color : "border"
    }
  }

  view {
    <div
      {...attrs}
      data-ui-component="Divider"
      class='wire-divider {class}'
      data-size='{size}'
      data-color='{color}'
      data-tone='{tone()}'
      data-variant='{variant}'
      data-orientation='{orientation}'
      data-labelled='{label ? "true" : "false"}'
      role="separator"
      aria-orientation='{isVertical() ? "vertical" : "horizontal"}'
    >
      <span class="wire-divider__rule" aria-hidden="true"></span>
      <span class="wire-divider__label" data-show="label">{label}</span>
      <span class="wire-divider__rule" data-show="label" aria-hidden="true"></span>
    </div>
  }

  style {
    .wire-divider {
      --divider-tone: var(--wire-color-border);
      --divider-thickness: 1px;
      display: flex;
      align-items: center;
      gap: 1rem;
      width: 100%;
      min-width: 0;
    }

    .wire-divider[data-tone="primary"] {
      --divider-tone: var(--wire-color-primary);
    }

    .wire-divider[data-tone="secondary"] {
      --divider-tone: var(--wire-color-secondary);
    }

    .wire-divider[data-tone="success"] {
      --divider-tone: var(--wire-color-success);
    }

    .wire-divider[data-tone="warning"] {
      --divider-tone: var(--wire-color-warning);
    }

    .wire-divider[data-tone="danger"] {
      --divider-tone: var(--wire-color-danger);
    }

    .wire-divider[data-size="lg"] {
      --divider-thickness: 2px;
    }

    .wire-divider__rule {
      flex: 1 1 auto;
      height: var(--divider-thickness);
      background: var(--divider-tone);
    }

    .wire-divider[data-variant="dashed"] .wire-divider__rule {
      height: 0;
      background: transparent;
      border-top: var(--divider-thickness) dashed var(--divider-tone);
    }

    .wire-divider[data-variant="dotted"] .wire-divider__rule {
      height: 0;
      background: transparent;
      border-top: var(--divider-thickness) dotted var(--divider-tone);
    }

    .wire-divider__label {
      flex: 0 0 auto;
      color: var(--wire-color-text-muted);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .wire-divider[data-orientation="vertical"] {
      flex-direction: column;
      width: auto;
      height: 100%;
      min-height: 1.5rem;
      margin-inline: 0.75rem;
    }

    .wire-divider[data-orientation="vertical"] .wire-divider__rule {
      width: var(--divider-thickness);
      height: auto;
    }

    .wire-divider[data-orientation="vertical"][data-variant="dashed"] .wire-divider__rule {
      width: 0;
      border-top: 0;
      border-left: var(--divider-thickness) dashed var(--divider-tone);
    }

    .wire-divider[data-orientation="vertical"][data-variant="dotted"] .wire-divider__rule {
      width: 0;
      border-top: 0;
      border-left: var(--divider-thickness) dotted var(--divider-tone);
    }
  }
}