static/frontend/unit/main/_directories.tmpl

<!--
  Copyright 2020 The Go Authors. All rights reserved.
  Use of this source code is governed by a BSD-style
  license that can be found in the LICENSE file.
-->

{{define "unit-directories"}}
  <div class="UnitDirectories js-unitDirectories">
    <h2 class="UnitDirectories-title" id="section-directories">
      <img class="go-Icon" height="24" width="24" src="/static/shared/icon/folder_gm_grey_24dp.svg" alt="">
      Directories
      <a class="UnitDirectories-idLink" href="#section-directories" aria-label="Go to Directories">¶</a>
    </h2>
    <div class="UnitDirectories-toggles">
      <div class="UnitDirectories-toggleButtons">
        <button class="js-showInternalDirectories" data-test-id="internal-directories-toggle"
            data-gtmc="directories button" aria-label="Show Internal Directories">
          Show internal
        </button>
        <button class="js-expandAllDirectories" data-test-id="directories-toggle"
            data-gtmc="directories button" aria-label="Expand All Directories">
          Expand all
        </button>
      </div>
    </div>
    <table class="UnitDirectories-table UnitDirectories-table--tree js-expandableTable"
          data-test-id="UnitDirectories-table">
      <tr class="UnitDirectories-tableHeader UnitDirectories-tableHeader--tree">
        <th>Path</th>
        <th class="UnitDirectories-desktopSynopsis">Synopsis</th>
      </tr>
      {{range $dir := .Directories}}
          {{template "directory" .}}
      {{end}}
    </table>
  </div>
{{end}}

{{define "directory"}}
  {{$prefix := .Prefix}}
  <tr{{if .Subdirectories}} data-aria-controls="{{range .Subdirectories}}{{$prefix}}-{{.Suffix}} {{end}}"{{end}}
      class="{{if eq $prefix "internal"}}UnitDirectories-internal{{end}}">
    <td data-id="{{$prefix}}" data-aria-owns="{{range .Subdirectories}}{{$prefix}}-{{.Suffix}} {{end}}">
      <div class="UnitDirectories-pathCell">
        <div>
          {{- if .Subdirectories -}}
            <button type="button" class="go-Button go-Button--inline UnitDirectories-toggleButton"
                aria-expanded="false"
                aria-label="{{len .Subdirectories}} more from"
                data-aria-controls="{{range .Subdirectories}}{{$prefix}}-{{.Suffix}} {{end}}"
                data-aria-labelledby="{{$prefix}}-button {{$prefix}}"
                data-id="{{$prefix}}-button">
              <img class="go-Icon" height="24" width="24" src="/static/shared/icon/arrow_right_gm_grey_24dp.svg"
                  alt="">
            </button>
          {{- end -}}
          {{- if .Root -}}
            <a href="{{.Root.URL}}">{{.Root.Suffix}}</a>
            {{if .Root.IsModule}}<span class="go-Chip go-Chip--inverted">module</span>{{end}}
          </div>
          <div class="UnitDirectories-mobileSynopsis">{{.Root.Synopsis}}</div>
        </div>
      </td>
      <td class="UnitDirectories-desktopSynopsis">{{.Root.Synopsis}}</td>
    {{- else -}}
        <span>{{.Prefix}}</span>
      </td>
      <td class="UnitDirectories-desktopSynopsis"></td>
    {{- end -}}
  </tr>
  {{- range .Subdirectories -}}
    <tr data-id="{{$prefix}}-{{.Suffix}}" class="{{if .IsInternal}}UnitDirectories-internal{{end}}">
      <td>
        <div class="UnitDirectories-subdirectory">
          <span>
            <a href="{{.URL}}">{{.Suffix}}</a>
            {{if .IsModule}}<span class="go-Chip go-Chip--inverted">Module</span>{{end}}
          </span>
          <div class="UnitDirectories-mobileSynopsis">{{.Synopsis}}</div>
        </div>
      </td>
      <td class="UnitDirectories-desktopSynopsis">{{.Synopsis}}</td>
    {{- end -}}
  </tr>
{{end}}