Skip to content

Commit

Permalink
Use fieldsets in components token grouping
Browse files Browse the repository at this point in the history
  • Loading branch information
cagataycivici committed Jan 3, 2025
1 parent 28d5cf5 commit 81966b9
Showing 1 changed file with 30 additions and 23 deletions.
Original file line number Diff line number Diff line change
@@ -1,27 +1,34 @@
<template>
<section v-if="isComponentRoute" class="flex flex-col gap-3">
<div class="text-lg font-semibold capitalize">{{ componentKey }}</div>
<template v-for="(value, name) in tokens" :key="name">
<DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
</template>
<Tabs v-if="hasColorScheme" value="cs-0">
<TabList>
<Tab value="cs-0">Light</Tab>
<Tab value="cs-1">Dark</Tab>
</TabList>
<TabPanels class="!px-0">
<TabPanel value="cs-0">
<div class="flex flex-col gap-3">
<DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" />
</div>
</TabPanel>
<TabPanel value="cs-1">
<div class="flex flex-col gap-3">
<DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.dark.' + name" />
</div>
</TabPanel>
</TabPanels>
</Tabs>
<section v-if="isComponentRoute">
<div class="text-lg font-semibold capitalize mb-2">{{ componentKey }}</div>
<Fieldset legend="Common" :toggleable="true" class="mb-3">
<div class="flex flex-col gap-3">
<template v-for="(value, name) in tokens" :key="name">
<DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
</template>
</div>
</Fieldset>
<Fieldset legend="Color Scheme" :toggleable="true">
<Tabs v-if="hasColorScheme" value="cs-0">
<TabList>
<Tab value="cs-0">Light</Tab>
<Tab value="cs-1">Dark</Tab>
</TabList>
<TabPanels>
<TabPanel value="cs-0">
<div class="flex flex-col gap-3">
<DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" />
</div>
</TabPanel>
<TabPanel value="cs-1">
<div class="flex flex-col gap-3">
<DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.dark.' + name" />
</div>
</TabPanel>
</TabPanels>
</Tabs>
<span v-else class="block py-3"> There are no design tokens per color scheme. </span>
</Fieldset>
</section>
</template>

Expand Down

0 comments on commit 81966b9

Please sign in to comment.