ca-components 2.1.142 → 2.1.151

package/lib/components/ca-progress-bar/ca-progress-bar.component.stories.ts

@@ -0,0 +1,1539 @@
+import {
+    Meta,
+    moduleMetadata,
+    StoryObj,
+    applicationConfig,
+} from '@storybook/angular';
+
+//module
+import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { importProvidersFrom } from '@angular/core';
+
+//Components
+import { ProgressBarComponent } from '../ca-progress-bar/ca-progress-bar.component';
+
+//Helper
+import { MapHelper } from '../ca-map/utils/helpers/map.helper';
+
+const meta: Meta<ProgressBarComponent> = {
+    title: 'Example/ProgressBar',
+    component: ProgressBarComponent,
+    tags: ['autodocs'],
+    decorators: [
+        moduleMetadata({
+            imports: [
+                //modules
+                AngularSvgIconModule.forRoot(),
+                HttpClientModule,
+            ],
+            providers: [SvgIconRegistryService],
+        }),
+        applicationConfig({
+            providers: [importProvidersFrom(BrowserAnimationsModule)],
+        }),
+    ],
+    argTypes: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: {
+                control: 'number',
+                defaultValue: 50,
+            },
+            mileageInfo: {
+                control: 'text',
+                defaultValue: '1,1983 mi',
+            },
+            currentStop: {
+                control: 'object',
+                defaultValue: {
+                    type: 'currentStop',
+                    position: 50,
+                    location: 'Philadelphia, PA',
+                    mileage: '',
+                    latitude: 38.122958832669,
+                    longitude: -85.6978972106951,
+                },
+            },
+            gpsTitle: {
+                control: 'text',
+                gpsTitle: '128.4 mi',
+            },
+            gpsIcon: {
+                control: 'file',
+                gpsIcon: 'assets/ca-components/svg/map/gps_full.svg',
+            },
+            gpsInfo: {
+                control: 'object',
+                defaultValue: {
+                    gpsHeading: 'MOVING - SOUTH',
+                    gpsTime: '3:47',
+                },
+            },
+            mileagesPercent: {
+                control: 'text',
+                defaultValue: '59%',
+            },
+            gpsLocationIcon: {
+                control: 'file',
+                defaultValue:
+                    'assets/ca-components/svg/map/ic_pulse_circle.svg',
+            },
+            gpsProgress: {
+                control: 'object',
+                defaultValue: [
+                    {
+                        type: 'start',
+                        position: 0,
+                        location: 'Overland Park, KS',
+                        mileage: '305.7 mi ago',
+                        time: '05/09/21 04:00 PM',
+                        latitude: 34.81629127878479,
+                        longitude: -84.05705557447767,
+                    },
+                    {
+                        type: 'pickup',
+                        position: 40,
+                        location: 'Chicago, IL',
+                        mileage: '225.6 mi ago',
+                        time: '05/09/21 07:00 PM',
+                        latitude: 29.533042509319234,
+                        longitude: -82.27005101950496,
+                    },
+                    {
+                        type: 'pickup',
+                        position: 60,
+                        location: 'Near Maplewood, MO',
+                        mileage: '325.6 mi ago',
+                        time: '05/09/21 09:00 PM',
+                        latitude: 38.197103511601675,
+                        longitude: -85.79030629905438,
+                    },
+                    {
+                        type: 'delivery',
+                        position: 100,
+                        location: 'Los Angeles, CA',
+                        mileage: '50.7 mi ago',
+                        time: '05/09/21 11:00 PM',
+                        latitude: 40.324100681086385,
+                        longitude: -86.37922103258747,
+                    },
+                ],
+            },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<ProgressBarComponent>;
+
+export const MovingProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/gps_full.svg',
+            gpsInfo: {
+                gpsHeading: 'MOVING - SOUTH',
+                gpsTime: '3:47',
+            },
+            mileagesPercent: '59%',
+            totalMiles: 2037.1,
+            gpsLocationIcon: MapHelper.getLocationIcon('#6692F1'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Springdale, GA',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                    legMiles: 0,
+                    stopNumber: 0,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Ocala, FL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                    legMiles: 79.5,
+                    stopNumber: 1,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Atlanta, GA',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                    legMiles: 379.5,
+                    stopNumber: 2,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Milwaukee, WI',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                    legMiles: 79.5,
+                    stopNumber: 3,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 80,
+                    location: 'Louisville, KY',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                    legMiles: 379.5,
+                    stopNumber: 1,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Louisville, KY',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                    legMiles: 79.5,
+                    stopNumber: 2,
+                },
+            ],
+        },
+    },
+};
+
+export const ShortStopProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/gps_short_status.svg',
+            gpsInfo: {
+                gpsHeading: 'SHORT STOP',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#F89B2E',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#FAB15C'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const ExtendedStopProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/gps_extended_status.svg',
+            gpsInfo: {
+                gpsHeading: 'EXTENDED STOP',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#DF3C3C',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#E66767'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const ParkingProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/gps_parking_status.svg',
+            gpsInfo: {
+                gpsHeading: 'PARKING',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#919191',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#919191'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const NoGpsProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/no_gps_status.svg',
+            gpsInfo: {
+                gpsHeading: 'NO GPS DEVICE',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#AAAAAA',
+            },
+            mileagesPercent: '42%',
+            gpsLocationIcon: '',
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const ShortStopIgnitionProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/short_stop_ignition.svg',
+            gpsInfo: {
+                gpsHeading: 'SHORT STOP - IGNITION',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#F89B2E',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#FAB15C'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const ExtendedStopIgnitionProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/extended_stop_ignition.svg',
+            gpsInfo: {
+                gpsHeading: 'EXTENDED STOP - IGNITION',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#DF3C3C',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#E66767'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const ParkingIgnitionProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/parking_ignition.svg',
+            gpsInfo: {
+                gpsHeading: 'PARKING - IGNITION',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#919191',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#919191'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const MovingTrailerProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/gps_trailer_moving.svg',
+            gpsInfo: {
+                gpsHeading: 'MOVING - SOUTH',
+                gpsTime: '3:47',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#6692F1'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const ShortStopTrailerProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/gps_trailer_short_stop.svg',
+            gpsInfo: {
+                gpsHeading: 'SHORT STOP',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#F89B2E',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#FAB15C'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const ExtendedStopTrailerProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/gps_trailer_extended.svg',
+            gpsInfo: {
+                gpsHeading: 'EXTENDED STOP',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#DF3C3C',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#E66767'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const ParkingTrailerProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/gps_trailer_parking.svg',
+            gpsInfo: {
+                gpsHeading: 'PARKING',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#919191',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#919191'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const ShortStopTrailerIgnitionProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon:
+                'assets/ca-components/svg/map/short_stop_trailer_ignition.svg',
+            gpsInfo: {
+                gpsHeading: 'SHORT STOP - IGNITION',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#F89B2E',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#FAB15C'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const ExtendedStopTrailerIgnitionProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon: 'assets/ca-components/svg/map/extended_stop_ignition.svg',
+            gpsInfo: {
+                gpsHeading: 'EXTENDED STOP - IGNITION',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#DF3C3C',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#E66767'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};
+
+export const ParkingTrailerIgnitionProgressBar: Story = {
+    args: {
+        progressBarData: {
+            driverId: 1,
+            totalMiles: 2037.1,
+            dispatchStatus: '',
+            currentLocation: null,
+            currentPosition: 50,
+            mileageInfo: '226.3 mi',
+            currentStop: {
+                type: 'currentStop',
+                heading: 'Current Location',
+                position: 50,
+                location: 'Philadelphia, PA',
+                mileage: '',
+                latitude: 38.122958832669,
+                longitude: -85.6978972106951,
+            },
+            gpsTitle: '128.4 mi',
+            gpsIcon:
+                'assets/ca-components/svg/map/parking_trailer_ignition.svg',
+            gpsInfo: {
+                gpsHeading: 'PARKING - IGNITION',
+                gpsTime: '3:47',
+                gpsHeadingColor: '#919191',
+            },
+            mileagesPercent: '59%',
+            gpsLocationIcon: MapHelper.getLocationIcon('#919191'),
+            gpsProgress: [
+                {
+                    type: 'start',
+                    heading: 'Origin',
+                    position: 0,
+                    location: 'Overland Park, KS',
+                    mileage: '305.7 mi ago',
+                    time: '05/09/21 04:00 PM',
+                    latitude: 34.81629127878479,
+                    longitude: -84.05705557447767,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (1)',
+                    position: 20,
+                    location: 'Chicago, IL',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 06:00 PM',
+                    latitude: 29.533042509319234,
+                    longitude: -82.27005101950496,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (2)',
+                    position: 40,
+                    location: 'Chattanooga, TN',
+                    mileage: '225.6 mi ago',
+                    time: '05/09/21 07:00 PM',
+                    latitude: 34.001049366913065,
+                    longitude: -84.48820105737911,
+                },
+                {
+                    type: 'pickup',
+                    heading: 'Pickup (3)',
+                    position: 60,
+                    location: 'Near Maplewood, MO',
+                    mileage: '325.6 mi ago',
+                    time: '05/09/21 09:00 PM',
+                    latitude: 38.197103511601675,
+                    longitude: -85.79030629905438,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (1)',
+                    position: 90,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+                {
+                    type: 'delivery',
+                    heading: 'Delivery (2)',
+                    position: 100,
+                    location: 'Los Angeles, CA',
+                    mileage: '50.7 mi ago',
+                    time: '05/09/21 11:00 PM',
+                    latitude: 40.324100681086385,
+                    longitude: -86.37922103258747,
+                },
+            ],
+        },
+    },
+};