feat: component as nested selector

nerdslabs · Dec 8, 2023 · 265d2ab · 265d2ab
1 parent 594d3ef
commit 265d2ab
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 0 deletions.
diff --git a/packages/svelte/stories/ComponentSelector.stories.svelte b/packages/svelte/stories/ComponentSelector.stories.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import ComponentSelector from "./ComponentSelector.svelte";
+</script>
+
+<Meta
+  title="Svelte/ComponentSelector"
+  component={ComponentSelector}
+  argTypes={{
+    label: { control: "text" },
+  }}
+/>
+
+<Template let:args>
+  <ComponentSelector {...args} on:click={args.onClick} />
+</Template>
+
+<Story
+  name="Default"
+/>
diff --git a/packages/svelte/stories/ComponentSelector.svelte b/packages/svelte/stories/ComponentSelector.svelte
@@ -0,0 +1,7 @@
+
+<script lang="ts">
+  import { Component, InnerComponent } from './componentSelector'
+</script>
+
+<Component>Default component</Component>
+<InnerComponent><Component>Same component with color override</Component></InnerComponent>
diff --git a/packages/svelte/stories/componentSelector.ts b/packages/svelte/stories/componentSelector.ts
@@ -0,0 +1,19 @@
+import { component } from '@teiler/svelte'
+
+const Component = component.div`
+  color: black;
+  background: #efefef;
+  border-radius: 5px;
+  padding: 10px 12px;
+  display: inline-block;
+`
+
+const InnerComponent = component`
+  display: inline-block;
+
+  & ${Component} {
+    color: red !important;
+  }
+`
+
+export { Component, InnerComponent }