@sarasanalytics-com/design-system 0.0.43 → 0.0.44

package/src/stories/accordion.stories.ts

@@ -1,234 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

@@ -1,242 +0,0 @@
-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';