Skip to content

Commit 6903bea

Browse files
committed
Update Index component to reflect counts.
1 parent 04c9861 commit 6903bea

7 files changed

Lines changed: 685 additions & 596 deletions

File tree

content/docs/components/metadata-index.mdx

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,62 @@ By default each list shows up to 15 values before revealing a "Show more" button
6262
/>
6363
```
6464

65+
Pass `limit={0}` to show all values at once with no toggle button.
66+
67+
```mdx {3}
68+
<Index
69+
label="Subject"
70+
limit={0}
71+
/>
72+
```
73+
74+
### Sort Order
75+
76+
Values within each label group can be ordered alphabetically (the default) or by frequency — most common value first. Use `sortOrder="count"` to surface the most-used terms at the top.
77+
78+
```mdx {3}
79+
<Index
80+
label="Subject"
81+
sortOrder="count"
82+
/>
83+
```
84+
85+
<Index label="Subject" sortOrder="count" />
86+
87+
### Show Count
88+
89+
Pass `showCount` to display the number of items that carry each value alongside the term, e.g. `Nepal (6)`.
90+
91+
```mdx {3}
92+
<Index
93+
label="Subject"
94+
showCount
95+
/>
96+
```
97+
98+
<Index label="Subject" showCount />
99+
100+
Both options can be combined:
101+
102+
```mdx {3-4}
103+
<Index
104+
label="Subject"
105+
sortOrder="count"
106+
showCount
107+
/>
108+
```
109+
110+
<Index label="Subject" sortOrder="count" showCount />
111+
65112
## API
66113

67-
| Prop | Type | Default | Notes |
68-
| --------------- | ------ | ----------- | -------------------------------------------------------------------------------------------------- |
69-
| `label` | string | | Restrict the index to a single metadata label (case-insensitive match on the configured labels). |
70-
| `metadata` | array | global | Optional override (array of `{label, values}`) to render a curated subset instead of the full set. |
71-
| `limit` | number | `15` | Maximum number of values to show before revealing the toggle inside each `<dl>`. |
72-
| `expandLabel` | string | `Show more` | Text for the expand button when additional values are hidden. |
73-
| `collapseLabel` | string | `Show less` | Text used after expanding the list. |
74-
| `className` | string | | Extra classes applied to the wrapping `<div>`. Each label always renders as its own `<dl>`. |
114+
| Prop | Type | Default | Notes |
115+
| --------------- | ----------------------------- | ----------------- | -------------------------------------------------------------------------------------------------- |
116+
| `label` | string | | Restrict the index to a single metadata label (case-insensitive match on the configured labels). |
117+
| `metadata` | array | global | Optional override (array of `{label, values}`) to render a curated subset instead of the full set. |
118+
| `limit` | number | `15` | Maximum number of values to show before revealing the toggle inside each `<dl>`. Pass `0` to show all values with no toggle. |
119+
| `sortOrder` | `"alphabetically"` \| `"count"` | `"alphabetically"` | Order values alphabetically or by descending occurrence count. Sorting is applied before the limit, so the most relevant values are always visible first when using `"count"`. |
120+
| `showCount` | boolean | `false` | When `true`, appends the occurrence count in parentheses after each value, e.g. `Nepal (6)`. |
121+
| `expandLabel` | string | `Show more` | Text for the expand button when additional values are hidden. |
122+
| `collapseLabel` | string | `Show less` | Text used after expanding the list. |
123+
| `className` | string | | Extra classes applied to the wrapping `<div>`. Each label always renders as its own `<dl>`. |

0 commit comments

Comments
 (0)