@thecb/components 10.12.3-beta.0 → 10.12.3

package/src/components/molecules/obligation/Obligation.stories.js

@@ -1,460 +0,0 @@
-import React from "react";
-import Obligation from "./Obligation";
-import { fn } from "@storybook/test";
-import { Box } from "../../atoms/layouts";
-
-const meta = {
-  title: "Molecules/Obligation",
-  component: Obligation,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    config: undefined,
-    obligations: undefined,
-    actions: undefined,
-    autoPayEnabled: false,
-    autoPayAvailable: false,
-    handleAutopayAction: fn(),
-    deactivatePaymentSchedule: fn(),
-    autoPaySchedule: undefined,
-    paymentPlanSchedule: undefined,
-    navigateToSettings: fn(),
-    isPaymentPlan: false,
-    nextAutopayDate: undefined,
-    obligationAssocID: undefined,
-    dueDate: undefined,
-    agencyName: undefined,
-    inactive: false,
-    inactiveLookupTitle: "",
-    inactiveLookupInput: "Account",
-    inactiveLookupValue: "",
-    isInCustomerManagement: false
-  },
-  argTypes: {
-    config: {
-      description:
-        "Config object that helps set icons and description/subdescription for obligation. Retrieved from FCS.",
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    obligations: {
-      description: "Array of obligation objects",
-      table: {
-        type: { summary: "array" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    actions: {
-      description:
-        "Collection of profile-specific Redux actions that are used by the PaymentDetails submodule",
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    autoPayEnabled: {
-      description: "Whether the obligation is currently set up for autopay",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    autoPayAvailable: {
-      description: "Whether the obligation supports autopay",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    handleAutopayAction: {
-      description: "Function run when user toggles autoapy button",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    deactivatePaymentSchedule: {
-      description: "Function run when user disabled autopay",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    autoPaySchedule: {
-      description: "Schedule object for autopay",
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    paymentPlanSchedule: {
-      description: "Schedule object for payment plan. Currently unused.",
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    navigateToSettings: {
-      description:
-        "Function that navigates a user to the settings page on the profile",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    isPaymentPlan: {
-      description:
-        "Whether the obligation is a payment plan type. Currently unused.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    nextAutopayDate: {
-      description: "The date the next autopay will run",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    obligationAssocID: {
-      description:
-        "The ID of the payment schedule associated with this obligation",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    agencyName: {
-      description:
-        "The name of the agency for this obligation. Used to populate inactive obligation descriptions.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    inactive: {
-      description: "Whether the obligation is in an inactive state.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    inactiveLookupTitle: {
-      description: "String used in the description of an inactive obligation",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    inactiveLookupInput: {
-      description: "Type of obligation, used for inactive obligations",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "Account" }
-      }
-    },
-    inactiveLookupValue: {
-      description:
-        "Account number or other information returned from lookup for inactive obligations",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    isInCustomerManagement: {
-      description:
-        "Whether the user is a customer management user impersonating a profile. If true, certain controls are disabled.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    }
-  }
-};
-
-export default meta;
-
-const obligationConfig = {
-  amountValue: "amountDue",
-  collection: true,
-  description: "Cityville Water Management",
-  details: {
-    collectionDetails: {
-      City: "city",
-      State: "state",
-      "Street Address": "street_address_line_1",
-      "Zip Code": "zip_code"
-    },
-    collectionDetailsList: [
-      {
-        attribute: "name",
-        label: "Name"
-      },
-      {
-        attribute: "street_address_line_1",
-        label: "Street Address"
-      },
-      {
-        attribute: "city",
-        label: "City"
-      },
-      {
-        attribute: "state",
-        label: "State"
-      },
-      {
-        attribute: "zip_code",
-        label: "Zip Code"
-      }
-    ],
-    description: "Cityville Water Management",
-    obligationDetails: {
-      Account: "account_number",
-      Owner: "account_owner",
-      Status: "status",
-      "Utility Type": "utility_type"
-    },
-    subDescription: ["Account", "%account_number%"]
-  },
-  displayName: "Office of Water Management",
-  hasPaperlessBilling: true,
-  icon: [
-    "ACCOUNTS_UTILITY_ELECTRIC",
-    "ACCOUNTS_UTILITY_GAS",
-    "ACCOUNTS_UTILITY_GARBAGE",
-    "ACCOUNTS_UTILITY_WATER"
-  ],
-  iconDefault: "ACCOUNTS_UTILITY_WATER",
-  iconMap: {
-    Water: "ACCOUNTS_UTILITY_WATER"
-  },
-  iconValue: "utility_type",
-  obligationSlug: "cityville-water",
-  paperlessBilling: {
-    confirmationContent: "",
-    infoContent: ""
-  },
-  paymentAttributes: {
-    accountId: "account_number",
-    amount: "amountDue",
-    customAttributes: {
-      account_city: "account_city",
-      account_number: "account_number",
-      account_owner: "account_owner",
-      account_street_address: "account_street_address",
-      account_zip_code: "account_zip_code",
-      utility_type: "utility_type"
-    },
-    description: ["Account", "%account_number%"],
-    subDescription: ["%account_owner%"]
-  },
-  subDescription: ["Account", "%account_number%"],
-  type: "ACCOUNT"
-};
-
-export const ActiveObligation = {
-  args: {
-    config: obligationConfig,
-    obligations: [
-      {
-        allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
-        amountDue: 5438,
-        customAttributes: {
-          account_number: "1006",
-          city: "Cityville",
-          client_slug: "Cityville",
-          customer_name: "Shadout Mapes",
-          due_date: "2024-09-01T12:00:00",
-          invoice_number: "101006.0",
-          line_item_description: "Shadout Mapes",
-          line_item_sub_description: "1006",
-          name: "Shadout Mapes",
-          service_type: "water",
-          state: "North Carolina",
-          street_address_line_1: "23145 O'Hara Wells",
-          sub_client_slug: "cityville-water",
-          total_due_amount: "5438.0",
-          utility_type: "water",
-          zip_code: "79221"
-        },
-        id: "1006",
-        kind: "FEE",
-        description: "Cityville Water Management",
-        subDescription: "Account: 1006",
-        amountValue: 5438,
-        details: {
-          description: "Cityville Water Management",
-          subDescription: "Account: 1006"
-        },
-        paymentAttributes: {
-          description: "Account: 1006",
-          subDescription: "",
-          amount: 5438
-        }
-      }
-    ],
-    actions: {
-      createPaymentFromProfile: fn(),
-      setDetailedObligation: fn(),
-      navigateToDetailedObligation: fn(),
-      deleteObligationAssoc: fn()
-    },
-    autoPayEnabled: true,
-    autoPayAvailable: true,
-    handleAutopayAction: fn(),
-    navigateToSettings: fn(),
-    deactivatePaymentSchedule: fn(),
-    isMobile: false,
-    nextAutopayDate: "On",
-    obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
-    dueDate: "2024-09-01",
-    agencyName: "Water",
-    isInCustomerManagement: false
-  },
-  render: args => (
-    <Box minWidth="800px">
-      <Obligation {...args} />
-    </Box>
-  )
-};
-
-export const InactiveObligation = {
-  args: {
-    config: { ...obligationConfig, icon: "ACCOUNTS_HEALTH" },
-    obligations: [
-      {
-        allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
-        amountDue: 5438,
-        customAttributes: {
-          account_number: "1006",
-          city: "Cityville",
-          client_slug: "Cityville",
-          customer_name: "Shadout Mapes",
-          due_date: "2024-09-01T12:00:00",
-          invoice_number: "101006.0",
-          line_item_description: "Shadout Mapes",
-          line_item_sub_description: "1006",
-          name: "Shadout Mapes",
-          service_type: "water",
-          state: "North Carolina",
-          street_address_line_1: "23145 O'Hara Wells",
-          sub_client_slug: "cityville-water",
-          total_due_amount: "5438.0",
-          utility_type: "water",
-          zip_code: "79221"
-        },
-        id: "1006",
-        kind: "FEE",
-        description: "Cityville Water Management",
-        subDescription: "Account: 1006",
-        amountValue: 5438,
-        details: {
-          description: "Cityville Water Management",
-          subDescription: "Account: 1006"
-        },
-        paymentAttributes: {
-          description: "Account: 1006",
-          subDescription: "",
-          amount: 5438
-        }
-      }
-    ],
-    actions: {
-      createPaymentFromProfile: fn(),
-      setDetailedObligation: fn(),
-      navigateToDetailedObligation: fn(),
-      deleteObligationAssoc: fn()
-    },
-    autoPayEnabled: false,
-    autoPayAvailable: true,
-    handleAutopayAction: fn(),
-    navigateToSettings: fn(),
-    deactivatePaymentSchedule: fn(),
-    isMobile: false,
-    nextAutopayDate: "",
-    obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
-    dueDate: "2024-09-01",
-    agencyName: "Health Service System",
-    isInCustomerManagement: false,
-    inactive: true,
-    inactiveLookupInput: undefined,
-    inactiveLookupTitle: "Health Service System",
-    inactiveLookupValue: "012856"
-  },
-  render: args => (
-    <Box minWidth="800px">
-      <Obligation {...args} />
-    </Box>
-  )
-};
-
-export const CustomerManagementObligation = {
-  args: {
-    config: obligationConfig,
-    obligations: [
-      {
-        allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
-        amountDue: 5438,
-        customAttributes: {
-          account_number: "1006",
-          city: "Cityville",
-          client_slug: "Cityville",
-          customer_name: "Shadout Mapes",
-          due_date: "2024-09-01T12:00:00",
-          invoice_number: "101006.0",
-          line_item_description: "Shadout Mapes",
-          line_item_sub_description: "1006",
-          name: "Shadout Mapes",
-          service_type: "water",
-          state: "North Carolina",
-          street_address_line_1: "23145 O'Hara Wells",
-          sub_client_slug: "cityville-water",
-          total_due_amount: "5438.0",
-          utility_type: "water",
-          zip_code: "79221"
-        },
-        id: "1006",
-        kind: "FEE",
-        description: "Cityville Water Management",
-        subDescription: "Account: 1006",
-        amountValue: 5438,
-        details: {
-          description: "Cityville Water Management",
-          subDescription: "Account: 1006"
-        },
-        paymentAttributes: {
-          description: "Account: 1006",
-          subDescription: "",
-          amount: 5438
-        }
-      }
-    ],
-    actions: {
-      createPaymentFromProfile: fn(),
-      setDetailedObligation: fn(),
-      navigateToDetailedObligation: fn(),
-      deleteObligationAssoc: fn()
-    },
-    autoPayEnabled: false,
-    autoPayAvailable: true,
-    handleAutopayAction: fn(),
-    navigateToSettings: fn(),
-    deactivatePaymentSchedule: fn(),
-    isMobile: false,
-    nextAutopayDate: "",
-    obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
-    dueDate: "2024-09-01",
-    agencyName: "Water",
-    isInCustomerManagement: true
-  },
-  render: args => (
-    <Box minWidth="800px">
-      <Obligation {...args} />
-    </Box>
-  )
-};

package/src/components/molecules/pagination/Pagination.mdx

@@ -1,15 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as PaginationStories from './Pagination.stories.js';
-
-<Meta of={PaginationStories} />
-
-<Title />
-
-Pagination renders a control panel that can be used to interact with paginated tables of data. The component takes some props to customize the look of the controls, as well as callback functions to run when a user interacts with the previous, next, and numerical page buttons. The Pagination component should also be supplied with a number to indicate the current page the user is on as well as the total number of pages.
-
-<Controls />
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>

package/src/components/molecules/popover/Popover.mdx

@@ -1,15 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as PopoverStories from './Popover.stories.js';
-
-<Meta of={PopoverStories} />
-
-<Title />
-
-The Popover is a fully accessible widget to display additional information when a user hovers over a specified trigger element. The trigger can either be text supplied using the `triggerText` prop, or a custom Icon component supplied using the `icon` prop.
-
-The Popover can be positioned to appear anywhere around the trigger element using the position props. Content and style of the Popover are customizable.
-
-<Controls />
-
-<Story />

package/src/components/molecules/popover/Popover.stories.js

@@ -1,220 +0,0 @@
-import Popover from "./Popover";
-import AccountsAddIcon from "../../atoms/icons/AccountsAddIcon";
-import {
-  ATHENS_GREY,
-  CHARADE_GREY,
-  CURIOUS_BLUE,
-  ONAHAU_BLUE
-} from "../../../constants/colors";
-
-export default {
-  title: "Molecules/Popover",
-  component: Popover,
-  tags: ["!autodocs"],
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  args: {
-    triggerText: "",
-    content: "",
-    hasIcon: false,
-    icon: undefined,
-    iconHelpText: "",
-    popoverID: 0,
-    popoverFocus: false,
-    extraStyles: undefined,
-    textExtraStyles: undefined,
-    minWidth: "250px",
-    maxWidth: "300px",
-    height: "auto",
-    position: undefined,
-    arrowPosition: undefined,
-    arrowDirection: "down",
-    transform: "none",
-    buttonExtraStyles: undefined,
-    backgroundColor: "white",
-    borderColor: "rgba(255, 255, 255, 0.85)",
-    popoverExtraStyles: undefined
-  },
-  argTypes: {
-    triggerText: {
-      description:
-        "Text element that popover is anchored to. Only used if hasIcon is false.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    content: {
-      description: "Content of the popover",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    hasIcon: {
-      description:
-        "Whether an icon is the trigger for the popover, instead of text",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    icon: {
-      description:
-        "The icon component to display. Requires hasIcon to be true.",
-      table: {
-        type: { summary: "React Component" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    iconHelpText: {
-      description: "Accessible description of the icon",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    popoverID: {
-      description:
-        "ID value for popover. Use if displaying multiple popovers on the same page.",
-      table: {
-        type: { summary: "number" },
-        defaultValue: { summary: 0 }
-      }
-    },
-    popoverFocus: {
-      description: "Whether focus should transfer to popover when it opens",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    extraStyles: {
-      description:
-        "Extra CSS styles to apply to the wrapper component around the trigger and popover",
-      table: {
-        type: { summary: "CSS string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    textExtraStyles: {
-      description: "Extra styles to apply to the text trigger of the popover",
-      table: {
-        type: { summary: "CSS string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    minWidth: {
-      description: "Minimum width of the popover component",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "250px" }
-      }
-    },
-    maxWidth: {
-      description: "Maximum width of the popover component",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "300px" }
-      }
-    },
-    height: {
-      description: "Height of the popover component. Default sizes to content.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "auto" }
-      }
-    },
-    position: {
-      description:
-        "Object containing values for top/right/bottom/left position of popover relative to trigger",
-      table: {
-        type: { summary: "Object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    arrowPosition: {
-      description:
-        "Object containing values for arrowTop/arrowRight/arrowBottom/arrowLeft position of arrow on popover",
-      table: {
-        type: { summary: "Object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    arrowDirection: {
-      description: "Direction the popover arrow points",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "down" }
-      }
-    },
-    transform: {
-      description: "CSS transform to apply to popover",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    buttonExtraStyles: {
-      description:
-        "Extra styles to apply to the button that wraps popover trigger",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    backgroundColor: {
-      description: "Background color of the popover",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "white" }
-      }
-    },
-    borderColor: {
-      description: "Color of the popover arrow",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "rgba(255, 255, 255, 0.85)" }
-      }
-    },
-    popoverExtraStyles: {
-      description: "Extra styles to apply to the popover",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
-
-export const BasicPopover = {
-  args: {
-    triggerText: "Help",
-    content:
-      "Contact support at 1-800-CTY-VILL for help with your account balance."
-  }
-};
-
-export const IconPopover = {
-  args: {
-    hasIcon: true,
-    icon: AccountsAddIcon,
-    content: "Search for and add a new account to your profile",
-    transform: "skew(15deg, 15deg);"
-  }
-};
-
-export const UnderneathPopover = {
-  args: {
-    triggerText: "What's this?",
-    content: "Popovers can be positioned anywhere around the trigger",
-    position: { top: "50px", right: "50%", left: "50%" },
-    arrowPosition: { arrowRight: "85%", arrowBottom: "100%" },
-    height: "75px",
-    arrowDirection: "up",
-    backgroundColor: `${ONAHAU_BLUE}`,
-    borderColor: `${CURIOUS_BLUE}`
-  }
-};