@sarasanalytics-com/design-system 0.0.42 → 0.0.43

package/src/stories/accordion.stories.ts

@@ -0,0 +1,234 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FormlyForm, FormlyModule } from '@ngx-formly/core';
+import { map as _map, reduce as _reduce } from 'lodash'
+import { HttpClientModule } from '@angular/common/http';
+import { IconService } from '../../projects/component-library/src/lib/icon/icon.service';
+import { AccordionComponent } from '../../projects/component-library/src/lib/accordion/accordion.component';
+import { FormlyFieldWrapperComponent } from '../../projects/component-library/src/shared/formly-field-wrapper/formly-field-wrapper.component';
+
+const meta: Meta<AccordionComponent> = {
+    title: 'Accordion',
+    component: AccordionComponent,
+    tags: ['autodocs'],
+    argTypes: {
+        options: {
+            control: { type: 'object' },
+        },
+        field: {
+            control: { type: 'object' },
+        },
+        model: {
+            control: { type: 'object' },
+        },
+    },
+    decorators: [
+        moduleMetadata({
+            imports: [ReactiveFormsModule, HttpClientModule, FormlyFieldWrapperComponent,
+                FormlyModule.forRoot({
+                    types: [
+                        {
+                            name: 'sa-accordion',
+                            component: AccordionComponent,
+                        },
+                    ],
+                    wrappers: [
+                        {
+                            name: 'wrapper',
+                            component: FormlyFieldWrapperComponent,
+                        },
+                    ],
+                })
+            ],
+            providers: [IconService],
+        }),
+    ],
+    render: (args) => ({
+        props: {
+            ...args,
+            modelChangeHandler: (event: any) => {
+                console.log(event);
+            },
+        },
+        template: `<form>
+        <formly-form 
+            [form]="form" 
+            [fields]="fields" 
+            [model]="model"
+            (modelChange)="modelChangeHandler($event)">
+        </formly-form>
+    </form>`
+    }),
+};
+
+export default meta;
+type Story = StoryObj<FormlyForm>;
+
+const panelData = [
+    {
+        key: 'marketingPanel',
+        title: 'Marketing',
+        accordionExpanded: false,
+        cardMessage: 'Marketing-specific features',
+        titleChip: {
+            label: 'Selected',
+            type: 'small',
+            state: 'neutral',
+            filling: 'filled',
+            changeStateTo: 'error',
+            text: ' {count} Selected',
+        },
+        features: [
+            {
+                title: 'Amazon Ads',
+                tooltip: 'Track Amazon ad performance.',
+                isSelected: false,
+                disabled: true
+            },
+            {
+                title: 'Google Ads',
+                tooltip: 'Analyze Google ad metrics.',
+                isSelected: true,
+            },
+            {
+                title: 'Marketing Overview',
+                tooltip: 'Track and analyze performance metrics for Amazon advertising campaigns, including impressions, clicks, and conversions.',
+                isSelected: false,
+            },
+            {
+                title: 'Facebook Ads',
+                tooltip: 'Track and analyze performance metrics for Amazon advertising campaigns, including impressions, clicks, and conversions.',
+                isSelected: false,
+            },
+        ],
+    },
+    {
+        key: 'accountingPanel',
+        title: 'Accounting',
+        accordionExpanded: true,
+        cardMessage: 'Accounting-specific features',
+        customWrapperClass: '',
+        titleChip: {
+            label: 'Selected',
+            type: 'small',
+            state: 'neutral',
+            filling: 'filled',
+            changeStateTo: 'primary',
+            text: '{count} Selected',
+        },
+        features: [
+            {
+                title: 'QuickBooks',
+                tooltip: 'Integrate QuickBooks data.',
+                isSelected: false,
+            },
+            {
+                title: 'Xero',
+                tooltip: 'Connect Xero accounting.',
+                isSelected: true,
+            },
+            {
+                title: 'Shopify',
+                tooltip: 'Track Amazon ad performance.',
+                isSelected: false,
+            },
+            {
+                title: 'Klaviyo',
+                tooltip: 'Analyze Google ad metrics.',
+                isSelected: true,
+            },
+        ],
+        advancedFeaturesExpanded: true,
+        advancedFeatures: [
+            {
+                title: 'Magento',
+                tooltip: 'Integrate Magento data.',
+                isSelected: false,
+                disabled: false,
+                featureChip: {
+                    label: 'Advanced',
+                    type: 'small',
+                    state: 'primary',
+                    filling: 'filled',
+                },
+            },
+            {
+                title: 'Shiphero',
+                tooltip: 'Connect Xero accounting.',
+                isSelected: false,
+                disabled: false
+            },
+        ],
+        advancedFeatureDisclaimer: 'Please reach out to us to activate the advanced dashboards',
+        advancedFeatureTitle: 'View Advanced Features',
+        advancedFeatureToggleTitle: 'Hide Advanced Features',
+        advancedFeatureDisclaimerButtons: [
+            {
+                text: 'Learn More',
+                type: 'transparent',
+                size: 'small',
+                state: 'default'
+            }, {
+                text: 'Schedule a call',
+                type: 'outline',
+                size: 'small',
+                state: 'default',
+                iconPosition: 'left',
+                icon: "headsetOutlined",
+                buttonIconSize: "14"
+            }
+        ]
+    },
+];
+
+const onButtonClick = (card: any, button: any) => {
+    console.log('Button clicked on card: ', card.title, button);
+};
+
+// export const Accordion: Story = {
+//     args: {
+//         fields: [
+//             {
+//                 key: 'accordionPanelGroup',
+//                 wrappers: ['wrapper'],
+//                 props: {
+//                     label: 'Choose the features that you would like to activate',
+//                     description: `Based on your selected features and preferences, we'll recommend the most relevant dashboards to support your goals`,
+//                     helpText: 'helptext here'
+//                 },
+//                 fieldGroupClassName: 'accordions-group-container',
+//                 fieldGroup: _map(panelData, panel => ({
+//                     key: panel.key,
+//                     type: 'sa-accordion',
+//                     className: 'accordion-group-container',
+//                     props: {
+//                         panelTitle: panel.title,
+//                         accordionExpanded: panel.accordionExpanded,
+//                         cardMessage: panel.cardMessage,
+//                         customWrapperClass: panel.customWrapperClass || 'sa-card-accordion-wrapper',
+//                         titleChip: panel.titleChip,
+//                         expandedIcon: 'downChevronOutlined',
+//                         collapsedIcon: 'rightChevronOutlined',
+//                         tooltipIcon: 'infoCircleOutlined',
+//                         advancedTooltipIcon: 'infoCircleOutlined',
+//                         featureCardWidth: '632px',
+//                         advancedFeatureCardWidth: '632px',
+//                         featuresList: panel.features,
+//                         advancedFeatures: panel.advancedFeatures,
+//                         advancedFeaturesExpanded: panel.advancedFeaturesExpanded || false,
+//                         advancedFeatureTitle: panel.advancedFeatureTitle || 'View Advanced Features',
+//                         advancedFeatureToggleTitle: panel.advancedFeatureToggleTitle || 'Hide Advanced Features',
+//                         advancedFeatureDisclaimerButtons: panel.advancedFeatureDisclaimerButtons,
+//                         advancedFeatureDisclaimer: panel.advancedFeatureDisclaimer,
+//                         ...(panel.advancedFeatureDisclaimerButtons && {
+//                             onButtonClick: (button: any) => onButtonClick(panel, button)
+//                         }),
+//                     },
+//                 }))
+//             }
+//         ],
+//         model: {
+//         },
+//     },
+// };

package/src/stories/avatar.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate } from '@storybook/angular';
+import { AvatarComponent } from '../../projects/component-library/src/lib/avatar/avatar.component';
+
+const meta: Meta<AvatarComponent> = {
+    title: 'Avatar',
+    component: AvatarComponent,
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            options: ['extra-small', 'small', 'medium', 'large', 'extra-large'],
+            control: { type: 'radio' },
+        },
+        altText: {
+            description: "Alternate text that should be displayed if image doesn't exist or is broken"
+        },
+        onClickEvent: {
+            action: "onClickEvent"
+        },
+        onMouseInEvent: {
+            action: "onMouseInEvent"
+        },
+        onMouseOutEvent: {
+            action: "onMouseOutEvent"
+        },
+    },
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `<sa-avatar ${argsToTemplate(args)}></sa-avatar>`
+    }),
+};
+
+export default meta;
+type Story = StoryObj<AvatarComponent>;
+
+
+export const Avatar: Story = {
+    args: {
+        size: "medium",
+        imagePath: "../assets/avatar.svg",
+        altText: "AB"
+    }
+};

package/src/stories/card-carousel.stories.ts

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CardCarouselComponent } from '../../projects/component-library/src/lib/card-carousel/card-carousel.component';
+import { CardComponent } from '../../projects/component-library/src/lib/card/card.component';
+import { IconComponent } from '../../projects/component-library/src/lib/icon/icon.component';
+import { CardCustomHeaderComponent } from '../../projects/component-library/src/lib/card/card-custom-header/card-custom-header.component';
+import { IconService } from '../../projects/component-library/src/lib/icon/icon.service';
+import { HttpClientModule } from '@angular/common/http';
+
+const meta: Meta<CardCarouselComponent> = {
+    title: 'Interactive Components/Carousel Cards',
+    component: CardCarouselComponent,
+    tags: ['autodocs'],
+    decorators: [
+        moduleMetadata({
+            imports: [HttpClientModule, CardComponent, IconComponent, CardCustomHeaderComponent],
+            providers: [IconService],
+        }),
+    ],
+    argTypes: {
+        cards: { control: 'object' },
+        autoPlay: { control: 'boolean' },
+        interval: { control: 'number' },
+        showNavigationArrows: { control: 'boolean' },
+        showIndicators: { control: 'boolean' },
+        showBrandFooter: { control: 'boolean' }
+    }
+};
+
+export default meta;
+type Story = StoryObj<CardCarouselComponent>;
+
+const sampleCards = [
+    {
+        id: 1,
+        title: 'John Doe',
+        subtitle: 'CEO, Company A',
+        avatarIcon: 'avatar',
+        logoIcon: 'innosupps',
+        body: 'This is a great product that has helped our business tremendously.',
+    },
+    {
+        id: 2,
+        title: 'Jane Smith',
+        subtitle: 'CTO, Company B',
+        avatarIcon: 'avatar',
+        logoIcon: 'bpn',
+        body: 'Weve seen significant improvements in our workflow since implementing this solution.',
+    },
+    {
+        id: 3,
+        title: 'Bob Johnson',
+        subtitle: 'CFO, Company C',
+        avatarIcon: 'avatar',
+        logoIcon: 'murad',
+        body: 'The ROI on this product has been outstanding. Highly recommended!',
+    },
+];
+
+export const Default: Story = {
+    args: {
+        cards: sampleCards,
+        autoPlay: true,
+        interval: 5000,
+        showNavigationArrows: true,
+        showIndicators: true,
+        showBrandFooter: true
+    }
+};
+
+export const WithCustomInterval: Story = {
+    args: {
+        cards: sampleCards,
+        interval: 3000,
+    },
+};
+
+export const WithoutAutoPlay: Story = {
+    args: {
+        ...Default.args,
+        autoPlay: false,
+    },
+};
+
+export const WithoutNavigationArrows: Story = {
+    args: {
+        ...Default.args,
+        showNavigationArrows: false,
+    },
+};
+
+export const WithoutIndicators: Story = {
+    args: {
+        ...Default.args,
+        showIndicators: false,
+    },
+};
+
+export const WithoutBrandFooter: Story = {
+    args: {
+        ...Default.args,
+        showBrandFooter: false,
+    },
+};
+
+export const SingleCard: Story = {
+    args: {
+        ...Default.args,
+        cards: [sampleCards[0]],
+    },
+};
+
+export const ManyCards: Story = {
+    args: {
+        ...Default.args,
+        cards: [
+            ...sampleCards,
+            {
+                id: 4,
+                title: 'Alice Brown',
+                subtitle: 'CMO, Company D',
+                avatarIcon: 'avatar',
+                logoIcon: 'targetScanOutlined',
+                body: 'This product has revolutionized our marketing efforts.',
+            },
+            {
+                id: 5,
+                title: 'Charlie Green',
+                subtitle: 'COO, Company E',
+                avatarIcon: 'avatar',
+                logoIcon: 'infoTriangleFilled',
+                body: 'Excellent support and continuous improvements make this a top choice.',
+            },
+        ]
+    },
+};

package/src/stories/card.stories.ts

@@ -0,0 +1,242 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate, moduleMetadata } from '@storybook/angular';
+import { CardComponent } from '../../projects/component-library/src/lib/card/card.component';
+import { HttpClientModule } from '@angular/common/http';
+import { IconService } from '../../projects/component-library/src/lib/icon/icon.service';
+import { ButtonComponent } from '../../projects/component-library/src/lib/button/button.component';
+import { CardFooterActionsComponent } from '../../projects/component-library/src/lib/card/card-footer-actions/card-footer-actions.component';
+import { CardTitleActionsComponent } from '../../projects/component-library/src/lib/card/card-title-actions/card-title-actions.component';
+import { ChipsComponent } from '../../projects/component-library/src/lib/chips/chips.component';
+import { IconComponent } from '../../projects/component-library/src/lib/icon/icon.component';
+import { CardCustomHeaderComponent } from '../../projects/component-library/src/lib/card/card-custom-header/card-custom-header.component';
+import { GuideCardComponent } from '../../projects/component-library/src/lib/card/guide-card/guide-card.component';
+import { CheckboxCardComponent } from '../../projects/component-library/src/lib/card/checkbox-card/checkbox-card.component';
+
+const meta: Meta<CardComponent> = {
+    title: 'Card',
+    tags: ['autodocs'],
+    component: CardComponent,
+    decorators: [
+        moduleMetadata({
+            imports: [HttpClientModule, ChipsComponent, ButtonComponent, IconComponent, CardFooterActionsComponent, CardTitleActionsComponent, CardCustomHeaderComponent, GuideCardComponent, CheckboxCardComponent],
+            providers: [IconService],
+        }),
+    ],
+    argTypes: {
+        chip: {
+            control: { type: 'object' },
+        },
+        avatar: {
+            control: { type: 'text' },
+        },
+    },
+    render: (args) => ({
+        props: { ...args },
+        template: `<sa-card ${argsToTemplate(args)}></sa-card>`,
+    }),
+};
+
+export default meta;
+type Story = StoryObj<CardComponent>;
+
+export const ProductListingCardWithAvatar: Story = {
+    args: {
+        title: "Daton",
+        body: "Move your data from 150+ sources and transform into analytics-ready tables",
+        avatar: "../assets/datonAvatar.png",
+        chip: {
+            id: '1',
+            text: "Chip",
+            type: "regular",
+            state: "primary",
+            filling: "outline"
+        },
+        showCardBody: true,
+        showCardHeader: false
+    },
+    render: (args) => ({
+        props: args,
+        template: `
+            <sa-card ${argsToTemplate(args)}>
+                <sa-card-footer-actions>
+                    <sa-button id="document" type="primary" text="Document" size="medium"></sa-button>
+                </sa-card-footer-actions>
+            </sa-card>
+        `
+    })
+};
+
+export const ProductListingCardWithImage: Story = {
+    args: {
+        title: "Daton",
+        body: "Move your data from 150+ sources and transform into analytics-ready tables",
+        image: "../assets/datonAvatar.png",
+        imageWidth: "200",
+        chip: {
+            id: '1',
+            text: "Chip",
+            type: "regular",
+            state: "primary",
+            filling: "outline"
+        },
+        showCardBody: true,
+        showCardHeader: false
+    },
+    render: (args) => ({
+        props: args,
+        template: `
+            <sa-card ${argsToTemplate(args)}>
+                <sa-card-footer-actions>
+                    <sa-button id="document" type="primary" text="Document" size="medium"></sa-button>
+                </sa-card-footer-actions>
+            </sa-card>
+        `
+    })
+};
+
+export const SignupCard: Story = {
+    args: {
+        title: "Daton",
+        body: "Move your data from 150+ sources and transform into analytics-ready tables.",
+        icon: "multiConnectionHub",
+        iconSize: "42",
+        chip: {
+            id: '',
+            text: "Chip",
+            type: "small",
+            state: "primary",
+            filling: "outline"
+        },
+        showCardBody: true,
+        showCardHeader: false
+    },
+};
+
+export const KeyFeaturesCard: Story = {
+    args: {
+        title: "Connect Effortlessly",
+        body: "Access over 250+ data sources with a few clicks, no coding required.",
+        icon: "multiConnectionHub",
+        iconSize: "42",
+        width: "50%",
+        height: "300px",
+        column: true,
+        chip: {
+            id: '',
+            text: 'Not started yet',
+            type: 'small',
+            state: 'secondary',
+            filling: 'filled'
+        },
+        showCardBody: true,
+        showCardHeader: false
+    },
+    render: (args) => ({
+        props: args,
+        template: `
+            <sa-card ${argsToTemplate(args)}>
+                <sa-card-title-actions>
+                    <div class="sa-document-action">
+                        <sa-icon icon="rightChevronOutlined" size="28"></sa-icon>
+                    </div>
+                </sa-card-title-actions>
+            </sa-card>
+        `
+    })
+};
+
+export const TestimonialCard: Story = {
+    args: {
+        body: `"Saras Analytics provides reliable, data-driven insights that empower us to make informed decisions with confidence."`,
+        customWrapperClass: 'sa-card-custom-wrapper',
+        width: "24.063rem",
+        title: 'Jason Panzer',
+        subtitle: 'CEO, Innosupps',
+        logoIcon: 'innosupps',
+        avatar: 'avatar',
+        column: false,
+        showCardHeader: true,
+        showCardBody: true,
+        showHeaderBodyDivider: true
+    },
+    render: (args) => ({
+        props: args,
+        template: `
+            <sa-card ${argsToTemplate(args)}>
+            <sa-card-title-header>
+                <div class="sa-card-custom-header-container">
+                    <sa-icon [icon]="avatar" size="50"></sa-icon>
+                    <div class="sa-card-title-subtitle-container">
+                        <div class="sa-card-custom-title">{{ title }}</div>
+                        <div class="sa-card-subtitle">{{ subtitle }}</div>
+                    </div>
+                    <div class="sa-card-titleIcon">
+                        <sa-icon [icon]="logoIcon" customClass="auto-dimensions"></sa-icon>
+                    </div>
+                </div>
+            </sa-card-title-header>
+            </sa-card>
+        `
+    })
+};
+
+export const GeneralCard: Story = {
+    args: {
+        title: "Jason Panzer",
+        customWrapperClass: 'sa-card-secondary-wrapper',
+        body: "Saras Analytics provides reliable, data-driven insights that empower us to make informed decisions with confidence.",
+        icon: "avatar",
+        iconSize: "54",
+        width: "24.063rem",
+        column: false,
+        showCardBody: true
+    },
+};
+
+// New meta configuration for GuideCardComponent
+const guideCardMeta: Meta<GuideCardComponent> = {
+    title: 'GuideCard',
+    component: GuideCardComponent,
+    tags: ['autodocs'],
+    argTypes: {
+        title: { control: 'text' },
+        steps: { control: 'object' }
+    },
+};
+
+export const GuideCard: StoryObj<GuideCardComponent> = {
+    args: {
+        title: "Getting Started Guide",
+        steps: [
+            {
+                title: "Define your target audience",
+                description: "Identify the specific group of people you want to reach with your marketing efforts. Consider demographics, interests, and behaviors."
+            }, {
+                title: "Set clear marketing goals",
+                description: "Establish specific, measurable, achievable, relevant, and time-bound (SMART) objectives for your marketing plan."
+            }, {
+                title: "Conduct market research",
+                description: "Analyze your competitors, industry trends, and customer needs to inform your marketing strategy."
+            }, {
+                title: "Choose your marketing channels",
+                description: "Select the most effective platforms and methods to reach your target audience, such as social media, email marketing, or content marketing."
+            }, {
+                title: "Develop your marketing message"
+            }, {
+                title: "Set your marketing budget",
+                description: "Allocate resources to different marketing activities based on their potential impact and alignment with your goals."
+            }
+        ]
+    },
+    render: (args) => ({
+        props: args,
+        template: `
+            <sa-guide-card
+                [title]="title"
+                [steps]="steps"
+            ></sa-guide-card>
+        `
+    })
+};
+
+GuideCard.storyName = 'Guide Card';