chore(storybook): add stories for header for smaller screens

.github/ISSUE_TEMPLATE/bug-report.md

@@ -31,19 +31,20 @@ _A clear and concise description of what you expected to happen._
 
 **Clarity version:**
 
-- [ ] v13.x
 - [ ] v15.x
+- [ ] v16.x
 - [ ] Other:
 
 **Framework version:**
-_ie: Angular 15_
+
+_ie: Angular 16_
 
 **Device:**
 
 - Type: [e.g. MacBook]
 - OS: [e.g. iOS]
-- Browser [e.g. chrome, safari]
-- Version [e.g. 22]
+- Browser: [e.g. chrome, safari]
+- Version: [e.g. 22]
 
 ## Additional notes
 

.storybook/helpers/common.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+export const CommonModules = [CommonModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule];

.storybook/preview.js

@@ -35,6 +35,51 @@ const cdsCoreAndShimStyles = [previewStyles, resetStyles, coreTokens, darkThemeC
 loadIcons();
 addDocs(docs);
 
+const customViewports = {
+  large: {
+    name: 'CLR Large',
+    styles: {
+      width: '992px',
+      height: '100%',
+    },
+  },
+  medium: {
+    name: 'CLR Medium',
+    styles: {
+      width: '768px',
+      height: '100%',
+    },
+  },
+  small: {
+    name: 'CLR Small',
+    styles: {
+      width: '576px',
+      height: '100%',
+    },
+  },
+  smallMobile: {
+    name: 'Small mobile',
+    styles: {
+      width: '320px',
+      height: '568px',
+    },
+  },
+  largeMobile: {
+    name: 'Large mobile',
+    styles: {
+      width: '414px',
+      height: '896px',
+    },
+  },
+  tablet: {
+    name: 'Tablet',
+    styles: {
+      width: '834px',
+      height: '1112px',
+    },
+  },
+};
+
 export const parameters = {
   docs: { inlineStories: true },
   options: {
@@ -43,6 +88,11 @@ export const parameters = {
       order: ['Home'],
     },
   },
+  viewport: {
+    viewports: {
+      ...customViewports,
+    },
+  },
 };
 
 export const globalTypes = {

.storybook/stories/accordion/accordion-panel.stories.ts

@@ -6,13 +6,11 @@
 
 import { ClrAccordionModule, ClrAccordionPanel } from '@clr/angular';
 import { action } from '@storybook/addon-actions';
-import { Parameters } from '@storybook/addons';
-import { Story } from '@storybook/angular';
+import { moduleMetadata, Story } from '@storybook/angular';
 
-import { setupStorybook } from '../../helpers/setup-storybook.helpers';
+import { CommonModules } from '../../helpers/common';
 
-const defaultStory: Story = args => ({
-  template: `
+const template = `
     <clr-accordion>
       <clr-accordion-panel
         [clrAccordionPanelOpen]="clrAccordionPanelOpen"
@@ -23,49 +21,58 @@ const defaultStory: Story = args => ({
         <clr-accordion-content>{{ content }}</clr-accordion-content>
       </clr-accordion-panel>
     </clr-accordion>
-  `,
-  props: { ...args },
-});
+  `;
 
-const defaultParameters: Parameters = {
+export default {
   title: 'Accordion/Accordion Panel',
   component: ClrAccordionPanel,
   argTypes: {
     // outputs
     clrAccordionPanelOpenChange: { control: { disable: true } },
+    title: { description: 'Rendered within the `<clr-accordion-title>` element' },
+    content: { description: 'Rendered within the `<clr-accordion-content>` element' },
     // methods
     togglePanel: { control: { disable: true } },
     collapsePanelOnAnimationDone: { control: { disable: true }, table: { disable: true } },
     getAccordionContentId: { control: { disable: true }, table: { disable: true } },
     getAccordionHeaderId: { control: { disable: true }, table: { disable: true } },
     getPanelStateClasses: { control: { disable: true }, table: { disable: true } },
   },
+  decorators: [
+    moduleMetadata({
+      imports: [...CommonModules, ClrAccordionModule],
+    }),
+  ],
   args: {
     // outputs
     clrAccordionPanelOpenChange: action('clrAccordionPanelOpenChange'),
     // story helpers
     title: 'Title',
     content: 'Hello World!',
-  },
-};
-
-const variants: Parameters[] = [
-  {
-    clrAccordionPanelOpen: false,
     clrAccordionPanelDisabled: false,
-  },
-  {
     clrAccordionPanelOpen: false,
-    clrAccordionPanelDisabled: true,
-  },
-  {
-    clrAccordionPanelOpen: true,
-    clrAccordionPanelDisabled: false,
-  },
-  {
-    clrAccordionPanelOpen: true,
-    clrAccordionPanelDisabled: true,
   },
-];
+};
+
+export const PanelClosed: Story = args => ({
+  template,
+  props: args,
+});
+
+export const PanelOpened: Story = PanelClosed.bind({});
+PanelOpened.args = {
+  ...PanelClosed.args,
+  clrAccordionPanelOpen: true,
+};
+
+export const PanelClosedDisabled: Story = PanelClosed.bind({});
+PanelClosedDisabled.args = {
+  ...PanelClosed.args,
+  clrAccordionPanelDisabled: true,
+};
 
-setupStorybook(ClrAccordionModule, defaultStory, defaultParameters, variants);
+export const PanelOpenedDisabled: Story = PanelOpened.bind({});
+PanelOpenedDisabled.args = {
+  ...PanelOpened.args,
+  clrAccordionPanelDisabled: true,
+};

.storybook/stories/accordion/accordion.stories.ts

@@ -5,29 +5,18 @@
  */
 
 import { ClrAccordion, ClrAccordionModule } from '@clr/angular';
-import { Parameters } from '@storybook/addons';
-import { Story } from '@storybook/angular';
+import { moduleMetadata, Story } from '@storybook/angular';
 
-import { setupStorybook } from '../../helpers/setup-storybook.helpers';
+import { CommonModules } from '../../helpers/common';
 
-const defaultStory: Story = args => ({
-  template: `
-    <clr-accordion [clrAccordionMultiPanel]="clrAccordionMultiPanel">
-      <clr-accordion-panel
-        *ngFor="let _ of createArray(panelCount); let i = index"
-        [clrAccordionPanelOpen]="!!openIndices[i]"
-      >
-        <clr-accordion-title>{{title}} {{i + 1}}</clr-accordion-title>
-        <clr-accordion-content>{{content}} {{i + 1}}</clr-accordion-content>
-      </clr-accordion-panel>
-    </clr-accordion>
-  `,
-  props: { ...args },
-});
-
-const defaultParameters: Parameters = {
+export default {
   title: 'Accordion/Accordion',
   component: ClrAccordion,
+  decorators: [
+    moduleMetadata({
+      imports: [...CommonModules, ClrAccordionModule],
+    }),
+  ],
   argTypes: {
     // inputs
     clrAccordionMultiPanel: { defaultValue: false, control: { type: 'boolean' } },
@@ -46,32 +35,35 @@ const defaultParameters: Parameters = {
   },
 };
 
-const variants: Parameters[] = [
-  {
-    clrAccordionMultiPanel: false,
-    panelCount: 4,
-    openIndices: [],
-  },
-  {
-    clrAccordionMultiPanel: false,
-    panelCount: 4,
-    openIndices: [true],
-  },
-  {
-    clrAccordionMultiPanel: false,
-    panelCount: 4,
-    openIndices: [false, false, false, true],
-  },
-  {
-    clrAccordionMultiPanel: true,
-    panelCount: 4,
-    openIndices: [false, true, true, false],
-  },
-  {
-    clrAccordionMultiPanel: true,
-    panelCount: 4,
-    openIndices: [true, true, true, true],
-  },
-];
+const template = `
+    <clr-accordion [clrAccordionMultiPanel]="clrAccordionMultiPanel">
+      <clr-accordion-panel
+        *ngFor="let _ of createArray(panelCount); let i = index"
+        [clrAccordionPanelOpen]="!!openIndices[i]"
+      >
+        <clr-accordion-title>{{title}} {{i + 1}}</clr-accordion-title>
+        <clr-accordion-content>{{content}} {{i + 1}}</clr-accordion-content>
+      </clr-accordion-panel>
+    </clr-accordion>
+  `;
+
+export const Initial: Story = args => ({
+  template,
+  props: args,
+});
 
-setupStorybook(ClrAccordionModule, defaultStory, defaultParameters, variants);
+export const SinglePanelOpened: Story = Initial.bind({});
+SinglePanelOpened.args = {
+  ...Initial.args,
+  openIndices: [true, false, false, false],
+};
+
+export const MultiplePanelsOpened: Story = Initial.bind({});
+MultiplePanelsOpened.argTypes = {
+  ...Initial.argTypes,
+  clrAccordionMultiPanel: { defaultValue: true, control: { disable: true } },
+};
+MultiplePanelsOpened.args = {
+  ...Initial.args,
+  openIndices: [true, true, false, false],
+};

.storybook/stories/accordion/nested-accordion.stories.ts

@@ -5,13 +5,34 @@
  */
 
 import { ClrAccordionModule } from '@clr/angular';
-import { Parameters } from '@storybook/addons';
-import { Story } from '@storybook/angular';
+import { moduleMetadata, Story } from '@storybook/angular';
 
-import { setupStorybook } from '../../helpers/setup-storybook.helpers';
+import { CommonModules } from '../../helpers/common';
 
-const defaultStory: Story = args => ({
-  template: `
+export default {
+  title: 'Accordion/Nested Accordion',
+  argTypes: {
+    // story helpers
+    openIndex: { control: { disable: true }, table: { disable: true } },
+    nestedOpenIndex: { control: { disable: true }, table: { disable: true } },
+    createArray: { control: { disable: true }, table: { disable: true } },
+    panelCount: { control: { type: 'number', min: 1, max: 100 } },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [...CommonModules, ClrAccordionModule],
+    }),
+  ],
+  args: {
+    // story helpers
+    openIndex: undefined,
+    nestedOpenIndex: undefined,
+    createArray: n => new Array(n),
+    panelCount: 4,
+  },
+};
+
+const template = `
     <clr-accordion>
       <clr-accordion-panel
         *ngFor="let _ of createArray(panelCount); let i = index"
@@ -28,36 +49,16 @@ const defaultStory: Story = args => ({
         </clr-accordion-content>
       </clr-accordion-panel>
     </clr-accordion>
-  `,
-  props: { ...args },
+  `;
+
+export const Closed: Story = args => ({
+  template,
+  props: args,
 });
 
-const defaultParameters: Parameters = {
-  title: 'Accordion/Nested Accordion',
-  argTypes: {
-    // story helpers
-    openIndex: { control: { disable: true }, table: { disable: true } },
-    nestedOpenIndex: { control: { disable: true }, table: { disable: true } },
-    createArray: { control: { disable: true }, table: { disable: true } },
-    panelCount: { control: { type: 'number', min: 1, max: 100 } },
-  },
-  args: {
-    // story helpers
-    openIndex: undefined,
-    nestedOpenIndex: undefined,
-    createArray: n => new Array(n),
-    panelCount: 4,
-  },
+export const Opened: Story = Closed.bind({});
+Opened.args = {
+  ...Closed.args,
+  openIndex: 0,
+  nestedOpenIndex: 0,
 };
-
-const variants: Parameters[] = [
-  {
-    openIndex: 0,
-  },
-  {
-    openIndex: 0,
-    nestedOpenIndex: 0,
-  },
-];
-
-setupStorybook(ClrAccordionModule, defaultStory, defaultParameters, variants);