@secondstaxorg/sscomp 1.7.1 → 1.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secondstaxorg/sscomp",
-  "version": "1.7.1",
+  "version": "1.7.7",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/types/components/Accordion/Accordion.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { AccordionProps } from "./type";
+declare const Accordion: (props: AccordionProps) => JSX.Element;
+export default Accordion;

package/types/components/Accordion/type.d.ts

@@ -12,9 +12,9 @@ export interface AccordionProps {
         label: string;
     }) => void;
     /**
-     * Optional, specify the array index (counting from 0) for which accordion to have expanded on page load
+     * Optional, specify the array index (counting from 0) in an array or as a single number for which accordions to have expanded on page load
      * */
-    defaultExpanded?: number;
+    defaultExpanded?: number[] | number;
     onDelete?: ({}: {}) => void;
 }
 export declare type AccordionsType = {

package/types/components/CountrySelector/CountrySelector.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { SelectorProps } from "./type";
+import '../../styles/typography.css';
 /**
- * Dropdown selector for selecting countries and currencies
+ * Dropdown selector for selecting <b>countries</b> or <b>currencies</b>
  */
 declare const CountrySelector: (props: SelectorProps) => JSX.Element;
 export default CountrySelector;

package/types/components/CountrySelector/type.d.ts

@@ -2,24 +2,15 @@ export interface SelectorProps {
     /**
      * Array of countries containing objects of country name, country short name, country flag and subname to be used in the case of selecting currencies
      */
-    options: {
-        optionName: string;
-        optionShortName: string;
-        optionFlag?: string;
-        subName?: string;
-    }[];
+    options: optionType[];
     /**
      * Function to receive the object of the selected item from the dropdown
      */
     selectedOption: (a: any) => void;
     /**
-     * Initial text to be displayed in the field. Suitable to for when there is the need to display the current value of when updating a form
+     * Country to be prepopulated when component is rendered
      */
-    initialText?: string;
-    /**
-     * Initial flag to be displayed in the field along with the initial text. Suitable to for when there is the need to display the current value of when updating a form
-     */
-    initialFlag?: string;
+    initialCountry?: string;
     /**
      * Label for the field
      */
@@ -36,9 +27,22 @@ export interface SelectorProps {
      * Division in the list to segment different groups of options
      */
     sectionTitle?: string;
+    /**
+     * Specify that the component is a required field
+     * */
     required?: boolean;
     /**
      * Input name as is with html input tag
      * */
-    inputName: string;
+    inputName?: string;
+    /**
+     * Specify whether the component is a readonly field
+     */
+    readonly?: boolean;
 }
+export declare type optionType = {
+    optionName: string;
+    optionShortName: string;
+    optionFlag?: string;
+    subName?: string;
+};

package/types/components/DatePicker/style.d.ts

@@ -1,5 +1,6 @@
 export declare const InputLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DatePickerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CalendarSheet: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InputField: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CalendarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorMessage: import("styled-components").StyledComponent<"p", any, {}, never>;

package/types/components/DatePicker/type.d.ts

@@ -31,4 +31,16 @@ export interface DatePickerProps {
      * Specify whether the field is a required field
      */
     required?: boolean;
+    /**
+     * Number of years back to exclude from valid years.
+     */
+    minYear?: number;
+    /**
+     * Initial value to be displayed when the component is rendered.
+     */
+    value?: Date;
+    /**
+     * Specify whether the component is a readonly field
+     */
+    readonly?: boolean;
 }

package/types/components/DateRangePicker/type.d.ts

@@ -23,4 +23,8 @@ export interface DateRangePickerProps {
      */
     showActionButtons?: boolean;
     width?: number;
+    /**
+     * Specify whether the component is a readonly field
+     */
+    readonly?: boolean;
 }

package/types/components/DropdownList/DropdownList.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { DropdownProps } from "./type";
+import '../../styles/typography.css';
 /**
  * Dropdown component for selecting from a list of options
  */

package/types/components/DropdownList/type.d.ts

@@ -45,4 +45,8 @@ export interface DropdownProps {
      * Input name as is with html input tag
      * */
     inputName: string;
+    /**
+     * Specify whether the component is a readonly field
+     */
+    readonly?: boolean;
 }

package/types/components/EmailField/EmailField.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { EmailFieldProps } from "./type";
+/**
+ * This component is used to render an email field. The email field validates the value of the input against a valid email address.
+ */
+declare const EmailField: (props: EmailFieldProps) => JSX.Element;
+export default EmailField;

package/types/components/EmailField/style.d.ts

@@ -0,0 +1,5 @@
+export declare const InputLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputField: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorMessage: import("styled-components").StyledComponent<"p", any, {}, never>;

package/types/components/EmailField/type.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface EmailFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Label of the input field
+     */
+    label?: string;
+    /**
+     * Subtext of the label
+     */
+    subtext?: string;
+    /**
+     * The initial value of the field to be displayed in the component
+     */
+    initialVal?: string;
+    width?: number | 'fit-content' | '100%';
+}

package/types/components/FileUpload/FileUpdload.d.ts

@@ -0,0 +1,5 @@
+import { FileUploadProps } from "./type";
+import React from "react";
+import "../../styles/typography.css";
+declare const FileUpdload: React.FC<FileUploadProps>;
+export default FileUpdload;

package/types/components/FileUpload/style.d.ts

@@ -0,0 +1,2 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/types/components/FileUpload/type.d.ts

@@ -0,0 +1,6 @@
+export interface FileUploadProps {
+    label?: string;
+    required?: boolean;
+    value?: any;
+    onChange: (a: any) => void;
+}

package/types/components/NumberField/NumberField.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { NumberFieldProps } from "./type";
+import '../../styles/typography.css';
+/**
+ * This component is used to render a number or amount field. The latter is rendered when `currencyFlagPath` prop is supplied.
+ */
+declare const NumberField: (props: NumberFieldProps) => JSX.Element;
+export default NumberField;

package/types/components/NumberField/style.d.ts

@@ -0,0 +1,5 @@
+export declare const InputLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputField: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorMessage: import("styled-components").StyledComponent<"p", any, {}, never>;

package/types/components/NumberField/type.d.ts

@@ -0,0 +1,46 @@
+export interface NumberFieldProps {
+    /**
+     * Label of the input field
+     */
+    label?: string;
+    /**
+     * Subtext of the label
+     */
+    subtext?: string;
+    /**
+     * Custom error message to be displayed in the case of an error
+     */
+    errMsg?: string;
+    /**
+     * Width of the component when rendered
+     */
+    width?: number | 'fit-content' | '100%';
+    /**
+     * When supplied the component can be rendered as an amount field
+     */
+    currencyFlagPath?: string;
+    /**
+     * Default value to be passed to the component to be displayed when rendered
+     */
+    value?: number | string;
+    /**
+     * Value that gets output when the component is typed in
+     */
+    onChange: (a: string) => void;
+    /**
+     * Specify whether the component should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether this is a required field
+     */
+    required?: boolean;
+    /**
+     * Specify a placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Specify whether the component is a readonly field
+     */
+    readonly?: boolean;
+}

package/types/components/PasswordField/PasswordField.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { PasswordFieldProps } from "./type";
+import '../../styles/typography.css';
 /**
  * Component for handling password input fields
  */

package/types/components/PhoneInput/PhoneInput.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { PhoneInputProps } from "./type";
+import "../../styles/typography.css";
 /**
  * Dropdown component for selecting from a list of options
  */

package/types/components/PhoneInput/countries.d.ts

@@ -0,0 +1,6 @@
+export declare const countries: {
+    code: string;
+    country: string;
+    flag: string;
+    dial_code: string;
+}[];

package/types/components/PhoneInput/type.d.ts

@@ -3,14 +3,18 @@ export interface PhoneInputProps {
      * Country code to be displayed on page load
      */
     initialCountryCode?: string;
+    /**
+     * Country code to be displayed on page load
+     */
+    initialPhoneNumber?: number;
     /**
      * Placeholder text to be displayed in the field
      */
     placeholder?: string;
     /**
-     * Function to receive the object of the selected item
+     * Function to receive the object of the selected country
      */
-    selectedCountryCode: (a: countryCodesType) => void;
+    selectedCountryCode?: (a: countryCodesType) => void;
     /**
      * Boolean to specify whether the field is active or disabled
      */
@@ -31,13 +35,21 @@ export interface PhoneInputProps {
      * Input name as is with html input tag
      * */
     inputName: string;
+    /**
+     * Onchange function when user is making an input
+     * */
     onChange: (value: {
         countryCode: string;
         phoneNumber: number;
     }) => void;
+    /**
+     * Specify whether the component is a readonly field
+     */
+    readonly?: boolean;
 }
 export declare type countryCodesType = {
     "country": string;
     "dial_code": string;
     "code": string;
+    "flag": string;
 };

package/types/components/Selector/Selector.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { SelectorProps } from "./types";
+import '../../styles/typography.css';
 /**
  * Component for making selections. Usage could be in an onboarding process
  */

package/types/components/Selector/styles.d.ts

@@ -1,5 +1,6 @@
 export declare const MainContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OtherContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InputLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SrInput: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const SelectorContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectorContainer: import("styled-components").StyledComponent<"button", any, {}, never>;

package/types/components/Selector/types.d.ts

@@ -2,10 +2,7 @@ export interface SelectorProps {
     /**
      * Array containing items to be listed in the component
      */
-    itemsList: {
-        value?: string;
-        label: string;
-    }[];
+    itemsList: itemType[];
     /**
      * Callback function passing out the selected item when clicked
      */
@@ -44,4 +41,29 @@ export interface SelectorProps {
      * Input name as is with html input tag
      * */
     inputName: string;
+    /**
+     * Specify whether the options should be displayed side-by-side or one on top of the other
+     * */
+    arrangement: 'vertical' | 'horizontal';
+    /**
+     * Specify whether there should be an "Other" option
+     * */
+    otherOption?: boolean;
+    /**
+     * Specify the placeholder text for the "Other" option
+     * */
+    otherPlaceholder?: string;
+    /**
+     * Specify the number of columns if arrangement is horizontal
+     * */
+    numCols?: number;
+    value?: itemType | itemType[];
+    /**
+     * Specify whether the component is a readonly field
+     */
+    readonly?: boolean;
 }
+export declare type itemType = {
+    label: string;
+    value?: string;
+};

package/types/components/TextArea/TextArea.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { TextAreaProps } from "./type";
+import '../../styles/typography.css';
 /**
  * Component to display a textarea field in a form. This mimics the behavior of a regular HTML <code>&lt;textarea&gt;</code> element and accepts the same props as it along with the custom ones defined.
  */

package/types/components/TextArea/type.d.ts

@@ -16,5 +16,12 @@ export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextArea
      * Initial value to be displayed
      */
     initialVal?: string | number;
+    /**
+     * Specify the width of the component
+     */
     width?: number;
+    /**
+     * Specify whether the component is a readonly field
+     */
+    readonly?: boolean;
 }

package/types/components/TextField/TextField.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { TextFieldProps } from "./type";
+import '../../styles/typography.css';
 /**
  * Component to display an input field component in a form. This mimics the behavior of a regular HTML <code>&lt;input&gt;</code> element and accepts the same props as it along with the custom ones defined.
  */

package/types/components/TextField/type.d.ts

@@ -16,5 +16,12 @@ export interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputEleme
      * The initial value of the field to be displayed in the component
      */
     initialVal?: string | number;
+    /**
+     * Specify the width of the component
+     */
     width?: number | 'fit-content' | '100%';
+    /**
+     * Specify whether the component is a readonly field
+     */
+    readonly?: boolean;
 }

package/types/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { TooltipProps } from "./type";
-import 'tippy.js/dist/tippy.css';
 /**
 * Tooltip text to be displayed on an element
 */

package/types/components/Tooltip/style.d.ts

@@ -0,0 +1 @@
+export declare const TippyContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/types/components/Tooltip/type.d.ts

@@ -15,5 +15,5 @@ export interface TooltipProps {
     /**
      * The HTML id attribute assigned to the child element wrapped inside the tooltip
      */
-    childElementId: string;
+    childElementClassName: string;
 }

package/types/components/index.d.ts

@@ -68,3 +68,7 @@ export { default as Selector } from './Selector/Selector';
 export { default as StepProgress } from './StepProgress/StepProgress';
 export { default as PhoneInput } from './PhoneInput/PhoneInput';
 export { default as Tooltip } from './Tooltip/Tooltip';
+export { default as Accordion } from './Accordion/Accordion';
+export { default as FileUpload } from './FileUpload/FileUpdload';
+export { default as EmailField } from './EmailField/EmailField';
+export { default as NumberField } from './NumberField/NumberField';