Stacks/packages/stacks-docs/src/docs/public/system/components/buttons/AnchorButtonTable.svelte at b5b9506a3304ccf50ef822a82f681b2f12cbf6d9 · StackExchange/Stacks · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<script lang="ts">
  import { Button } from '@stackoverflow/stacks-svelte';

  let { variants, weights } = $props();

  const titleCase = (str) => str.toLowerCase().replace(/(?:^|\s)\w/g, (match) => match.toUpperCase());

  const getVariantClass = (v) => v ? `s-btn__${v}` : null;
  const getWeightClass = (w) => w ? `s-btn__${w}` : null;

  const getTitle = (variant, weight) => {
    const parts = [];
    if (variant) parts.push(titleCase(variant));
    else parts.push("Base");
    if (weight) parts.push(titleCase(weight));
    return parts.join(", ");
  };
</script>

<div class="overflow-x-auto">
  <table class="wmn5 s-table s-table__bx-simple">
    <thead>
      <tr>
        <th scope="col">Type</th>
        <th scope="col" class="s-table--cell4">Class</th>
        <th scope="col" class="ta-center">Default State</th>
        <th scope="col" class="ta-center">Selected State</th>
        <th scope="col" class="ta-center">Disabled State</th>
      </tr>
    </thead>
    <tbody>
      {#each variants as variant (variant)}
        {#each weights as weight (weight)}
          {#if !(weight === "clear" && (variant === "featured" || variant === "tonal"))}
            {@const variantClass = getVariantClass(variant)}
            {@const weightClass = getWeightClass(weight)}
            <tr>
              <th scope="row" class="va-middle">{getTitle(variant, weight)}</th>
              <td class="va-middle">
                <div class="d-flex g4 fw-wrap">
                  <code class="stacks-code">.s-btn</code>
                  {#if variantClass}
                    <code class="stacks-code">.{variantClass}</code>
                  {/if}
                  {#if weightClass}
                    <code class="stacks-code">.{weightClass}</code>
                  {/if}
                </div>
              </td>
              <td class="va-middle ta-center px4">
                <Button href="#" class="ws-nowrap" {variant} {weight}>Ask question</Button>
              </td>
              <td class="va-middle ta-center px4">
                <Button href="#" class="ws-nowrap" {variant} {weight} selected role="button" aria-pressed="true">Ask question</Button>
              </td>
              <td class="va-middle ta-center px4">
                <Button href="#" class="ws-nowrap" {variant} {weight} disabled>Ask question</Button>
              </td>
            </tr>
          {/if}
        {/each}
      {/each}
    </tbody>
  </table>
</div>