@sarasanalytics-com/design-system 0.0.41 → 0.0.43

package/src/stories/gridCell.stories.ts

@@ -0,0 +1,234 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate } from '@storybook/angular';
+import { GridInterface } from '../../projects/component-library/src/public-api';
+import { GridCellComponent } from '../../projects/component-library/src/public-api';
+import { moduleMetadata } from '@storybook/angular';
+import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
+
+
+const meta: Meta<AgGridAngular> = {
+    title: 'GridCell',
+    component: AgGridAngular,
+    tags: ['autodocs'],
+    decorators: [
+        moduleMetadata({ imports: [GridCellComponent, AgGridAngular, AgGridModule], }),
+    ],
+    argTypes: {
+        rowData: {
+            description: [
+                "An array of objects.",
+                "Each object in this array (lets call it `rowObj`) represents a row.",
+                "The `keys` in `rowObj` takes the same name (lets call it `colName`) as columns in that row,",
+                "and the values take `GridInterface` object describing how that cell is rendered and with what content.",
+                "**Please use `GridInterface` to configure cells**."
+            ].join(" ")
+        },
+        columnDefs: {
+            description: [
+                "An array of objects. Each object represents a column.",
+                "The `field` attribute in this object must be same as `colName`(from `rowData`).",
+                "`CellRenderer` should be set to `GridCellComponent`.",
+                "Remaining parameters are common to general ag-grid configuration."
+            ].join(" ")
+        }
+    },
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `    
+        <ag-grid-angular
+            style="height: 300px;"
+            [rowHeight]=50
+            [headerHeight]=44
+            [suppressCellFocus]=true
+            ${argsToTemplate(args)}>
+        </ag-grid-angular>
+        `
+    }),
+};
+
+export default meta;
+type Story = StoryObj<AgGridAngular>;
+
+const params: GridInterface = {
+    cellType: '',
+    viewText: false,
+    viewLeadingIcon: false,
+    viewTrailingIcon: false,
+    viewButton: false,
+    viewChip: false,
+    viewAvatar: false,
+}
+
+const default_colDef = [{
+    field: "TestField",
+    headerComponentParams: {
+        ...params,
+        text: "Cell Text",
+        cellType: "header",
+        viewText: true
+    },
+    resizable: false,
+    headerComponent: GridCellComponent,
+    cellRenderer: GridCellComponent,
+}]
+
+export const Regular: Story = {
+    args: {
+        rowData: [{
+            TestField: {
+                ...params,
+                viewText: true,
+                cellType: 'row',
+                text: 1,
+            }
+        },
+        {
+            TestField: {
+                ...params,
+                viewText: true,
+                cellType: 'row',
+                text: 2,
+            }
+        }],
+        columnDefs: default_colDef
+    }
+};
+
+export const Numeric: Story = {
+    args: {
+        rowData: [{
+            TestField: {
+                ...params,
+                viewText: true,
+                cellType: 'numeric',
+                text: 1,
+            },
+        }],
+        columnDefs: default_colDef
+    }
+};
+
+export const Text_SubText: Story = {
+    args: {
+        rowData: [{
+            TestField: {
+                ...params,
+                viewText: true,
+                cellType: "row",
+                text: "Nithish",
+                subText: "Developer",
+            },
+        }],
+        columnDefs: default_colDef
+    }
+};
+
+
+export const leadingIcon: Story = {
+    args: {
+        rowData: [{
+            TestField: {
+                ...params,
+                viewText: true,
+                viewLeadingIcon: true,
+                iconPath: '../assets/targetScanOutlined.svg',
+                cellType: 'Row',
+                text: "Cell Name",
+            },
+        }],
+        columnDefs: default_colDef
+    }
+};
+
+export const Chip: Story = {
+    args: {
+        rowData: [{
+            TestField: {
+                ...params,
+                viewChip: true,
+                cellType: 'Row',
+                chipConfig: [
+                    {
+                        id: 0,
+                        text: "Chip text",
+                        type: 'primary',
+                        state: 'regular',
+                        filling: 'filled',
+                        iconPath: '../assets/closeBlueOutlined.svg',
+                        iconPosition: 'left',
+                        largeStateIcon: '',
+                        largeStateText: '',
+                    }
+                ],
+                chipClicked: (evt: Event) => {
+                    console.log(evt);
+                }
+            },
+        }],
+        columnDefs: default_colDef
+    }
+};
+
+export const Interactive: Story = {
+    args: {
+        rowData: [{
+            TestField: {
+                ...params,
+                viewText: true,
+                cellType: 'interactive',
+                interactiveLink: '',
+                interactiveLinkTarget: 'blank',
+                text: "Cell Name",
+            },
+        }],
+        columnDefs: default_colDef
+    }
+};
+
+export const Button: Story = {
+    args: {
+        rowData: [{
+            TestField: {
+                ...params,
+                viewButton: true,
+                cellType: 'Row',
+                buttonConfig: {
+                    id: 0,
+                    type: 'primary',
+                    state: 'default',
+                    size: 'small',
+                    text: 'Button',
+                    imagePath: '../assets/sourcesOutlined.svg',
+                    iconPosition: 'right',
+                    href: "",
+                    hrefTarget: 'blank',
+                }
+            },
+        }],
+        columnDefs: default_colDef
+    }
+};
+
+export const Avatar: Story = {
+    args: {
+        rowData: [{
+            TestField: {
+                ...params,
+                viewText: true,
+                cellType: "row",
+                avatarConfig: {
+                    id: 0,
+                    size: 'small',
+                    imagePath: '../assets/avatar.svg',
+                    altText: 'AB'
+                },
+                viewAvatar: true,
+                text: "Nithish",
+                subText: "Developer",
+            },
+        }],
+        columnDefs: default_colDef
+    }
+};

package/src/stories/header.stories.ts

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate } from '@storybook/angular';
+import { HeaderComponent } from '../../projects/component-library/src/lib/header/header.component';
+
+const meta: Meta<HeaderComponent> = {
+    title: 'Header',
+    component: HeaderComponent,
+    tags: ['autodocs'],
+    argTypes: {
+        mainButtonClicked: {
+            action: "mainButtonClicked"
+        },
+        helperButtonClicked: {
+            action: "helperButtonClicked"
+        },
+        info: {
+            description: "Two dimensional array of strings containing label and it's icon address."
+        }
+    },
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `<sa-header ${argsToTemplate(args)}></sa-header>`
+    }),
+};
+
+export default meta;
+type Story = StoryObj<HeaderComponent>;
+
+export const Default: Story = {
+    args: {
+        info: [
+            ["Info Text 1", "../assets/personOutlined.svg"],
+            ["Info Text 2", "../assets/locationOutlined.svg"],
+            ["Info Text 3", "../assets/mailOutlined.svg"]
+        ],
+        buttonMain: "+ Button",
+        buttonHelper: "Helper",
+        headerName: "Header"
+    }
+};
+
+export const With_Chips: Story = {
+    args: {
+        info: [
+            ["Info Text 1", "../assets/personOutlined.svg"],
+            ["Info Text 2", "../assets/locationOutlined.svg"],
+            ["Info Text 3", "../assets/mailOutlined.svg"]
+        ],
+        chipConfig: [
+            ["Chip 1", "success"],
+            ["Chip 2", "warning"],
+            ["Chip 3", "error"],
+        ],
+        buttonMain: "+ Button",
+        buttonHelper: "Helper",
+        headerName: "Header"
+    }
+};
+

package/src/stories/icon.stories.ts

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate, moduleMetadata } from '@storybook/angular';
+import { IconComponent } from '../../projects/component-library/src/lib/icon/icon.component';
+import { HttpClientModule } from '@angular/common/http';
+import { IconService } from '../../projects/component-library/src/lib/icon/icon.service';
+import { iconNames } from '../../projects/component-library/src/public-api';
+
+const meta: Meta<IconComponent> = {
+    title: 'Icon',
+    component: IconComponent,
+    tags: ['autodocs'],
+    decorators: [
+        moduleMetadata({
+            imports: [HttpClientModule],
+            providers: [IconService],
+        }),
+    ],
+    argTypes: {
+        icon: {
+            control: 'select',
+            options: [...iconNames],
+            defaultValue: 'headsetOutlined',
+            description: "Svg icon name"
+        },
+        iconUrl: {
+            control: { type: 'text', },
+            description: "Svg icon web url"
+        },
+        size: {
+            options: ['22', '24', '36', '48'],
+            control: { type: 'radio' },
+            defaultValue: "22"
+        },
+    },
+    render: (args: IconComponent) => ({
+        props: {
+            ...args,
+        },
+        template: `<sa-icon ${argsToTemplate(args)}></sa-icon>`
+    }),
+};
+
+export default meta;
+type Story = StoryObj<IconComponent>;
+
+
+export const defaultIcon: Story = {
+    args: {
+        icon: 'avatar',
+        size: "22",
+    }
+};
+
+export const icon_with_url: Story = {
+    args: {
+        iconUrl: 'https://cdn.prod.website-files.com/672882dbaf15942b1d3d3da7/67288fc322cd2acbd8423e74_Consolidation.svg',
+    }
+};
+
+export const Icon_with_path: Story = {
+    args: {
+        size: "22",
+        iconPath: "/assets/avatar.svg"
+    }
+};

package/src/stories/leftnav.stories.ts

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { LeftNavComponent, ILeftNav, ILeftNavItem } from '../../projects/component-library/src/lib/left-nav/left-nav.component';
+import { Router, ActivatedRoute } from '@angular/router';
+import { moduleMetadata } from '@storybook/angular';
+import { of } from 'rxjs';
+import { HttpClientModule } from '@angular/common/http';
+import { IconService } from '../../projects/component-library/src/lib/icon/icon.service';
+
+const mockRouter = {
+    navigate: (path: string[]) => console.log('Navigated to:', path)
+};
+
+const mockActivatedRoute = {
+    snapshot: {
+        params: {}
+    },
+    params: of({})
+};
+
+const meta: Meta<LeftNavComponent> = {
+    title: 'LeftNav',
+    component: LeftNavComponent,
+    decorators: [
+        moduleMetadata({
+            imports: [HttpClientModule],
+            providers: [
+                IconService,
+                { provide: Router, useValue: mockRouter },
+                { provide: ActivatedRoute, useValue: mockActivatedRoute }
+            ]
+        })
+    ],
+    tags: ['autodocs'],
+    argTypes: {
+        clickEvent: { action: 'clickEvent' },
+        data: {
+            control: { type: 'object' }
+        },
+    },
+    render: (args) => ({
+        props: {
+            ...args,
+            clickEvent: args.clickEvent,
+        },
+        template: `<sa-left-nav [data]="data" (clickEvent)="clickEvent($event)"></sa-left-nav>`
+    }),
+};
+
+export default meta;
+type Story = StoryObj<LeftNavComponent>;
+
+export const Default: Story = {
+    args: {
+        data: {
+            items: [
+                { title: 'Home', icon: 'homeOutlined', disable: false, path: 'home', active: true },
+                { title: 'Pricing', icon: 'pricingIcon', disable: false, path: 'reports', active: false },
+                { title: 'Settings', icon: 'settingsOutlined', disable: false, path: 'settings', active: false }
+            ],
+            footerItems: [
+                { title: 'Help', icon: 'chatHelpOutlined', disable: true, type: 'ICON', tooltip: "coming soon" },
+                { title: 'Profile', icon: 'AVATAR', disable: false, type: 'AVATAR' },
+                { title: 'Chevron', icon: 'doublechevron', disable: true, type: 'ICON' }
+            ]
+        } as ILeftNav
+    }
+};

package/src/stories/message-banner.stories.ts

@@ -0,0 +1,116 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { MessageBannerComponent } from '../../projects/component-library/src/lib/message-banner/message-banner.component';
+import { buttonPosition, buttonSizes, buttonType, iconNames } from '../../projects/component-library/src/public-api';
+
+const meta: Meta<MessageBannerComponent> = {
+    title: 'MessageBanner',
+    component: MessageBannerComponent,
+    tags: ['autodocs'],
+    render: (args: MessageBannerComponent) => ({
+        props: {
+            ...args,
+        },
+        template: `
+      <sa-message-banner [type]="type" [bannerIcon]="bannerIcon" [bannerIconSize]="bannerIconSize" [actionText]="actionText" [buttonIcon]="buttonIcon" [buttonIconPosition]="buttonIconPosition" [buttonSize]="buttonSize" [buttonType]="buttonType"
+      [buttonIconSize]="buttonIconSize" [onAction]="onAction">
+        {{ content }}
+      </sa-message-banner>
+    `,
+    }),
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['success', 'warning', 'info', 'error'],
+        },
+        actionText: {
+            control: 'text',
+            defaultValue: 'Learn more'
+        },
+        bannerIcon: {
+            control: 'select',
+            options: [...iconNames]
+        },
+        bannerIconSize: {
+            control: 'text',
+            defaultValue: '24'
+        },
+        buttonIcon: {
+            control: 'select',
+            options: [...iconNames]
+        },
+        buttonType: {
+            control: 'select',
+            options: [...buttonType]
+        },
+        buttonIconPosition: {
+            control: 'select',
+            options: [...buttonPosition]
+        },
+        buttonSize: {
+            control: 'select',
+            options: [...buttonSizes]
+        },
+        buttonIconSize: {
+            options: ['16', '22', '24', '36', '48'],
+            control: { type: 'radio' },
+            defaultValue: "22"
+        },
+        onAction: { action: 'onAction' },
+    },
+};
+
+export default meta;
+type Story = StoryObj<MessageBannerComponent>;
+
+export const Success: Story = {
+    args: {
+        type: 'info',
+        bannerIcon: 'infoCircleOutlined',
+        bannerIconSize: '28',
+        buttonIcon: 'headsetOutlined',
+        buttonType: 'transparent',
+        buttonSize: 'medium',
+        buttonIconPosition: 'left',
+        buttonIconSize: '24',
+        content: 'Oh ho! Some recommended sources needed for your selected features aren\'t connected',
+        actionText: 'Learn more',
+    },
+};
+
+export const Info: Story = {
+    args: {
+        type: 'info',
+        content: 'Stay tuned—we\'ll keep you updated via email and let you know the moment your dashboards are ready',
+    },
+};
+
+export const Warning: Story = {
+    args: {
+        type: 'warning',
+        content: 'Unsure which features to select? No worries—we\'re here to assist you!',
+        actionText: 'Schedule a call',
+        buttonIcon: 'headsetOutlined'
+    },
+};
+
+export const Error: Story = {
+    args: {
+        type: 'error',
+        content: 'Brand name will be used consistently throughout Pulse; please enter a name that is most appropriate',
+    },
+};
+
+export const InfoWithAction: Story = {
+    args: {
+        type: 'info',
+        bannerIcon: 'infoCircleOutlined',
+        bannerIconSize: '28',
+        buttonIcon: 'headsetOutlined',
+        buttonType: 'outline',
+        buttonSize: 'small',
+        buttonIconPosition: 'left',
+        buttonIconSize: '16',
+        content: 'To speed up your onboarding, please have your required data source credentials handy',
+        actionText: 'Learn more',
+    },
+};