chore(collapsible): group stories

radix-ng · Jun 19, 2024 · 84cbb38 · 84cbb38
1 parent 41b9364
commit 84cbb38
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 85 deletions.
diff --git a/packages/primitives/collapse/index.ts b/packages/primitives/collapse/index.ts
diff --git a/packages/primitives/collapsible/stories/collapsible-animation.stories.ts b/packages/primitives/collapsible/stories/collapsible-animation.stories.ts
diff --git a/packages/primitives/collapsible/stories/collapsible-external-triggering.stories.ts b/packages/primitives/collapsible/stories/collapsible-external-triggering.stories.ts
diff --git a/packages/primitives/collapsible/stories/collapsible.stories.ts b/packages/primitives/collapsible/stories/collapsible.stories.ts
@@ -1,8 +1,12 @@
+import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
+
 import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 import { RdxCollapsibleContentDirective } from '../src/collapsible-content.directive';
 import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
 import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
+import { RdxCollapsibleAnimationComponent } from './collapsible-animation.component';
+import { RdxCollapsibleExternalTriggeringComponent } from './collapsible-external-triggering.component';
 
 export default {
  title: 'Primitives/Collapsible',
@@ -11,8 +15,14 @@ export default {
  imports: [
  RdxCollapsibleRootDirective,
  RdxCollapsibleTriggerDirective,
- RdxCollapsibleContentDirective
- ]
+ RdxCollapsibleContentDirective,
+
+ RdxCollapsibleExternalTriggeringComponent,
+ RdxCollapsibleAnimationComponent,
+
+ BrowserAnimationsModule
+ ],
+ providers: [provideAnimations()]
  }),
  componentWrapperDecorator(
  (story) => `
@@ -103,3 +113,31 @@ export const Default: Story = {
  `
  })
 };
+
+export const ExternalTrigger: Story = {
+ render: () => ({
+ template: `
+ <div class="radix-themes light light-theme radix-themes-default-fonts"
+ data-accent-color="indigo"
+ data-radius="medium"
+ data-scaling="100%"
+ >
+ <rdx-collapsible-external-triggering></rdx-collapsible-external-triggering>
+ </div>
+ `
+ })
+};
+
+export const Animation: Story = {
+ render: () => ({
+ template: `
+ <div class="radix-themes light light-theme radix-themes-default-fonts"
+ data-accent-color="indigo"
+ data-radius="medium"
+ data-scaling="100%"
+ >
+ <rdx-collapsible-animation></rdx-collapsible-animation>
+ </div>
+ `
+ })
+};