WRNexusJS/packages/ui/components/container.wrn

// Container -- a centred, width-limited page wrapper.
//
//   <Container maxWidth="lg">...</Container>
//
// It also accepts columns and gap, because it always has and applications
// depend on it. Reach for Grid when a grid is the point; reach for Container
// when the point is the reading width.
//
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
// and silently swallows the rule that follows it.
component Container {
  props {
    size: string = "default"
    color: string = "primary"
    // Stays 2 to match what shipped. A published default cannot be changed
    // without silently reflowing every Container already in use.
    columns: number = 2
    gap: string = "md"
    maxWidth: string = "xl"
    centered: boolean = true
    class: string = ""
  }

  functions {
    shared function columnCount() {
      var value = Number(columns)
      if (!value || value < 1) {
        return 1
      }
      return Math.min(6, value)
    }
  }

  view {
    <div
      {...attrs}
      data-ui-component="Container"
      class='wire-container {class}'
      data-size='{size}'
      data-color='{color}'
      data-gap='{gap}'
      data-max-width='{maxWidth}'
      data-centered='{centered}'
      data-columns='{columnCount()}'
    >
      <slot></slot>
    </div>
  }

  style {
    .wire-container {
      --container-gap: 1.25rem;
      width: 100%;
      min-width: 0;
      padding-inline: 1rem;
    }

    .wire-container[data-centered="true"] {
      margin-inline: auto;
    }

    /* Reading widths, not breakpoints: the cap is about line length. */
    .wire-container[data-max-width="md"] {
      max-width: 48rem;
    }

    .wire-container[data-max-width="lg"] {
      max-width: 64rem;
    }

    .wire-container[data-max-width="xl"],
    .wire-container[data-max-width="wide"] {
      max-width: 80rem;
    }

    .wire-container[data-max-width="2xl"] {
      max-width: 96rem;
    }

    .wire-container[data-max-width="full"] {
      max-width: none;
    }

    .wire-container[data-size="compact"] {
      padding-inline: 1rem;
    }

    .wire-container[data-size="comfortable"] {
      padding-inline: 1.25rem;
    }

    .wire-container[data-size="spacious"] {
      padding-inline: 1.5rem;
    }

    .wire-container[data-gap="xs"] {
      --container-gap: 0.5rem;
    }

    .wire-container[data-gap="sm"] {
      --container-gap: 0.75rem;
    }

    .wire-container[data-gap="lg"] {
      --container-gap: 2rem;
    }

    .wire-container[data-gap="xl"] {
      --container-gap: 2.5rem;
    }

    /*
     * Columns are opt-in. One column stays plain flow so a container does not
     * quietly turn every page into a grid.
     */
    .wire-container:not([data-columns="1"]) {
      display: grid;
      gap: var(--container-gap);
      grid-template-columns: 1fr;
    }

    @media (min-width: 640px) {
      .wire-container[data-columns="2"],
      .wire-container[data-columns="3"],
      .wire-container[data-columns="4"],
      .wire-container[data-columns="5"],
      .wire-container[data-columns="6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .wire-container[data-size="default"],
      .wire-container[data-size="comfortable"],
      .wire-container[data-size="spacious"] {
        padding-inline: 1.5rem;
      }
    }

    @media (min-width: 1024px) {
      .wire-container[data-columns="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .wire-container[data-columns="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .wire-container[data-columns="5"] {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      .wire-container[data-columns="6"] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }

      .wire-container[data-size="default"],
      .wire-container[data-size="comfortable"],
      .wire-container[data-size="spacious"] {
        padding-inline: 2rem;
      }
    }
  }
}