feat: icons in variants grid

histoire-dev · Feb 15, 2022 · 0ef0928 · 0ef0928
1 parent e48bfb0
commit 0ef0928
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/examples/vue3/src/components/BaseButton.story.vue b/examples/vue3/src/components/BaseButton.story.vue
@@ -41,7 +41,10 @@ function initState () {
  </template>
  </Variant>
 
- <Variant title="big green button">
+ <Variant
+ title="big green button"
+ icon="el:resize-full"
+ >
  <BaseButton
  color="green"
  size="big"
@@ -50,7 +53,10 @@ function initState () {
  </BaseButton>
  </Variant>
 
- <Variant title="small red button">
+ <Variant
+ title="small red button"
+ icon-color="#F43F5E"
+ >
  <BaseButton
  color="red"
  size="small"

diff --git a/packages/histoire/src/client/app/components/StoryVariantGridItem.vue b/packages/histoire/src/client/app/components/StoryVariantGridItem.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { PropType, toRefs } from 'vue'
+import { computed, PropType, toRefs } from 'vue'
 import { useCurrentVariantRoute } from '../composable/variant'
 import { Story, Variant } from '../types'
 import SandboxVue3 from './sandbox/SandboxVue3.vue'
+import { Icon } from '@iconify/vue'
 
 const props = defineProps({
  variant: {
@@ -18,6 +19,8 @@ const props = defineProps({
 
 const { variant } = toRefs(props)
 const { isActive, targetRoute } = useCurrentVariantRoute(variant)
+
+const iconColor = computed(() => props.variant.iconColor)
 </script>
 
 <template>
@@ -26,13 +29,21 @@ const { isActive, targetRoute } = useCurrentVariantRoute(variant)
  <div class="htw-flex-none htw-flex htw-items-center">
  <RouterLink
  :to="targetRoute"
- class="htw-rounded htw-w-max htw-px-2 htw-py-0.5 htw-min-w-16 htw-cursor-pointer"
+ class="htw-rounded htw-w-max htw-px-2 htw-py-0.5 htw-min-w-16 htw-cursor-pointer htw-flex htw-items-center htw-gap-1"
  :class="{
  'hover:htw-bg-zinc-200 htw-text-zinc-500 dark:hover:htw-bg-zinc-800': !isActive,
  'htw-bg-primary-200 hover:htw-bg-primary-300 htw-text-primary-800 dark:htw-bg-primary-700 dark:hover:htw-bg-primary-800 dark:htw-text-primary-200': isActive,
  }"
  >
- {{ variant.title }}
+ <Icon
+ :icon="variant.icon ?? 'carbon:cube'"
+ class="base-list-item-link-icon htw-w-4 htw-h-4 htw-opacity-50"
+ :class="{
+ 'htw-text-zinc-500': !isActive && !variant.iconColor,
+ 'bind-icon-color': !isActive && variant.iconColor,
+ }"
+ />
+ <span>{{ variant.title }}</span>
  </RouterLink>
  </div>
 
@@ -52,3 +63,9 @@ const { isActive, targetRoute } = useCurrentVariantRoute(variant)
  </div>
  </div>
 </template>
+
+<style scoped>
+.bind-icon-color {
+ color: v-bind(iconColor);
+}
+</style>