chore(storybook): add tabs collapsed story to test smaller screens (#…

…1010)

…969)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <[email protected]>
(cherry picked from commit 479f7b3)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [ ] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <[email protected]>

.storybook/preview.js

@@ -42,6 +42,51 @@ const cdsCoreAndShimStyles = [
 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: {
@@ -50,6 +95,11 @@ export const parameters = {
       order: ['Home'],
     },
   },
+  viewport: {
+    viewports: {
+      ...customViewports,
+    },
+  },
 };
 
 export const globalTypes = {

.storybook/stories/tabs/tabs-collapsed.stories.ts

@@ -0,0 +1,78 @@
+/*
+ * 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 { ClrTabs, ClrTabsModule } from '@clr/angular';
+import { Parameters } from '@storybook/addons';
+import { Story } from '@storybook/angular';
+
+import { TabsLayout } from '../../../projects/angular/src/layout/tabs/enums/tabs-layout.enum';
+import { setupStorybook } from '../../helpers/setup-storybook.helpers';
+
+const collapsedStory: Story = args => ({
+  template: `
+    <clr-tabs [clrLayout]="clrLayout">
+      <clr-tab *ngFor="let _ of createArray(tabCount); let i = index">
+        <button clrTabLink>{{title}} {{i + 1}}</button>
+        <clr-tab-content *clrIfActive="activeTab === (i + 1)">
+          <p>
+            {{content}} {{i + 1}}
+          </p>
+        </clr-tab-content>
+      </clr-tab>
+    </clr-tabs>
+  `,
+  props: { ...args },
+});
+
+const defaultParameters: Parameters = {
+  title: 'Tabs/Tabs - Reactive',
+  component: ClrTabs,
+  argTypes: {
+    // inputs
+    clrLayout: { defaultValue: TabsLayout.HORIZONTAL, control: { type: 'inline-radio', options: TabsLayout } },
+    // methods
+    closeOnEscapeKey: { control: { disable: true }, table: { disable: true } },
+    closeOnFocusOut: { control: { disable: true }, table: { disable: true } },
+    closeOnOutsideClick: { control: { disable: true }, table: { disable: true } },
+    openOverflowOnFocus: { control: { disable: true }, table: { disable: true } },
+    resetKeyFocusCurrentToActive: { control: { disable: true }, table: { disable: true } },
+    toggleOverflowOnClick: { control: { disable: true }, table: { disable: true } },
+    toggleOverflowOnPosition: { control: { disable: true }, table: { disable: true } },
+    // story helpers
+    createArray: { control: { disable: true }, table: { disable: true } },
+    tabCount: { control: { type: 'number', min: 1, max: 100 } },
+    activeTab: { control: { type: 'number', min: 1, max: 100 } },
+  },
+  args: {
+    // story helpers
+    createArray: n => new Array(n),
+    tabCount: 4,
+    activeTab: 1,
+    title: 'Tab',
+    content: 'Tab Content',
+  },
+  viewport: {
+    defaultViewport: 'large',
+  },
+};
+
+setupStorybook(ClrTabsModule, collapsedStory, defaultParameters, generateVariants());
+
+function generateVariants() {
+  const variants: Parameters[] = [];
+
+  for (const clrLayout of [TabsLayout.HORIZONTAL, TabsLayout.VERTICAL]) {
+    for (const activeTab of [1, 2, 3, 4]) {
+      variants.push({
+        clrLayout,
+        activeTab,
+        tabCount: 4,
+      });
+    }
+  }
+
+  return variants;
+}