@bookjane2/bookjane-design-library 7.2.9 → 7.3.1

package/lib/components/BKJTextInput/BKJTextInput.stories.js

@@ -1,124 +1,124 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { css } from 'styled-components';
-import { BKJTextInput } from 'index.js';
-import { isString } from '../../common.types.js';
-import { useFormBehaviors } from '../../hooks/index.js';
-import { BKJButton } from '../BKJButton/index.js';
-import { BKJIconComponentMap } from '../BKJIcon/BKJIcon.types.js';
-import { BKJThemeTextInput } from './BKJTextInput.theme.js';
-const setup = {
-    title: 'Input Elements/BKJTextInput',
-    component: BKJTextInput,
-    argTypes: {
-        variant: {
-            name: 'Text Input Variant',
-            options: Object.keys(BKJThemeTextInput),
-            control: {
-                type: 'select',
-            },
-        },
-        value: {
-            name: 'Input Value',
-        },
-        name: {
-            name: 'Change Event Name',
-        },
-        onChange: {
-            name: 'Text Input onChange Function',
-        },
-        label: {
-            name: 'Input Label',
-        },
-        error: {
-            name: 'Error Message',
-        },
-        required: {
-            name: 'Is Required?',
-        },
-        placeholder: {
-            name: 'Text Input Placeholder',
-        },
-        disabled: {
-            name: 'Is Text Input Disabled?',
-        },
-        maxLength: {
-            name: 'Text Input Max-Length',
-        },
-        selected: {
-            name: 'Selected Items to be listed in closable pills',
-        },
-        onCloseSelectedPill: {
-            name: 'Selected Item Pill onClose Function',
-        },
-        onClickTextInput: {
-            name: 'Text Input onClick Function',
-        },
-        leftIcon: {
-            name: 'Left Side Icon',
-            options: Object.keys(BKJIconComponentMap),
-            control: {
-                type: 'select',
-            },
-        },
-        rightIcon: {
-            name: 'Right Side Icon',
-            options: Object.keys(BKJIconComponentMap),
-            control: {
-                type: 'select',
-            },
-        },
-        onClickLeftIcon: {
-            name: 'Left Side Icon onClick Function',
-        },
-        onClickRightIcon: {
-            name: 'Right Side Icon onClick Function',
-        },
-    },
-};
-const initialState = {
-    email: '',
-    password: '',
-};
-const Template = () => {
-    const { values, onChange, fieldErrors, onSubmit, isDisabled } = useFormBehaviors({
-        isDirtyCheckEnabled: false,
-        initialState,
-        validations: {
-            email: (value) => {
-                const messages = [];
-                if (isString(value)) {
-                    if (value.length === 0)
-                        return messages.concat('You must enter an email address.');
-                    if (!value.includes('@'))
-                        messages.push('Invalid email address format.');
-                }
-                return messages;
-            },
-            // password: (value: string): FormValidationErrorMessageType => {
-            //   const messages: FormValidationErrorMessageType = [];
-            //   console.log(value);
-            //   if (isString(value)) {
-            //     if (value.length === 0) messages.push('Please enter your password.');
-            //   }
-            //   return messages;
-            // },
-        },
-        onSubmit: () => { },
-    });
-    const something = css `
-    margin: 28px 0;
-  `;
-    return (_jsxs("form", Object.assign({ style: { width: '358px' }, onSubmit: onSubmit }, { children: [_jsx(BKJTextInput, { value: values.email, onChange: onChange, variant: "RoundEdges", name: "email", label: "Email", leftIconProps: { iconName: 'Search' }, placeholder: "Enter your email address", disabled: true, autoComplete: "off", required: true, error: fieldErrors['email'], css: something }, void 0),
-            _jsx(BKJButton, Object.assign({ variant: "GreenSolid", disabled: isDisabled }, { children: "Login" }), void 0)] }), void 0));
-};
-export const Default = Template.bind({});
-Default.args = {
-// name: 'input',
-// label: 'Custom Field Name',
-// variant: 'RoundEdges',
-// placeholder: 'Enter value for custom field',
-// onClickLeftIcon: undefined,
-// onClickRightIcon: undefined,
-};
-export default setup;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from 'styled-components';
+import { BKJTextInput } from 'index.js';
+import { isString } from '../../common.types.js';
+import { useFormBehaviors } from '../../hooks/index.js';
+import { BKJButton } from '../BKJButton/index.js';
+import { BKJIconComponentMap } from '../BKJIcon/BKJIcon.types.js';
+import { BKJThemeTextInput } from './BKJTextInput.theme.js';
+const setup = {
+    title: 'Input Elements/BKJTextInput',
+    component: BKJTextInput,
+    argTypes: {
+        variant: {
+            name: 'Text Input Variant',
+            options: Object.keys(BKJThemeTextInput),
+            control: {
+                type: 'select',
+            },
+        },
+        value: {
+            name: 'Input Value',
+        },
+        name: {
+            name: 'Change Event Name',
+        },
+        onChange: {
+            name: 'Text Input onChange Function',
+        },
+        label: {
+            name: 'Input Label',
+        },
+        error: {
+            name: 'Error Message',
+        },
+        required: {
+            name: 'Is Required?',
+        },
+        placeholder: {
+            name: 'Text Input Placeholder',
+        },
+        disabled: {
+            name: 'Is Text Input Disabled?',
+        },
+        maxLength: {
+            name: 'Text Input Max-Length',
+        },
+        selected: {
+            name: 'Selected Items to be listed in closable pills',
+        },
+        onCloseSelectedPill: {
+            name: 'Selected Item Pill onClose Function',
+        },
+        onClickTextInput: {
+            name: 'Text Input onClick Function',
+        },
+        leftIcon: {
+            name: 'Left Side Icon',
+            options: Object.keys(BKJIconComponentMap),
+            control: {
+                type: 'select',
+            },
+        },
+        rightIcon: {
+            name: 'Right Side Icon',
+            options: Object.keys(BKJIconComponentMap),
+            control: {
+                type: 'select',
+            },
+        },
+        onClickLeftIcon: {
+            name: 'Left Side Icon onClick Function',
+        },
+        onClickRightIcon: {
+            name: 'Right Side Icon onClick Function',
+        },
+    },
+};
+const initialState = {
+    email: '',
+    password: '',
+};
+const Template = () => {
+    const { values, onChange, fieldErrors, onSubmit, isDisabled } = useFormBehaviors({
+        isDirtyCheckEnabled: false,
+        initialState,
+        validations: {
+            email: (value) => {
+                const messages = [];
+                if (isString(value)) {
+                    if (value.length === 0)
+                        return messages.concat('You must enter an email address.');
+                    if (!value.includes('@'))
+                        messages.push('Invalid email address format.');
+                }
+                return messages;
+            },
+            // password: (value: string): FormValidationErrorMessageType => {
+            //   const messages: FormValidationErrorMessageType = [];
+            //   console.log(value);
+            //   if (isString(value)) {
+            //     if (value.length === 0) messages.push('Please enter your password.');
+            //   }
+            //   return messages;
+            // },
+        },
+        onSubmit: () => { },
+    });
+    const something = css `
+    margin: 28px 0;
+  `;
+    return (_jsxs("form", Object.assign({ style: { width: '358px' }, onSubmit: onSubmit }, { children: [_jsx(BKJTextInput, { value: values.email, onChange: onChange, variant: "RoundEdges", name: "email", label: "Email", leftIconProps: { iconName: 'Search' }, placeholder: "Enter your email address", disabled: true, autoComplete: "off", required: true, error: fieldErrors['email'], css: something }, void 0),
+            _jsx(BKJButton, Object.assign({ variant: "GreenSolid", disabled: isDisabled }, { children: "Login" }), void 0)] }), void 0));
+};
+export const Default = Template.bind({});
+Default.args = {
+// name: 'input',
+// label: 'Custom Field Name',
+// variant: 'RoundEdges',
+// placeholder: 'Enter value for custom field',
+// onClickLeftIcon: undefined,
+// onClickRightIcon: undefined,
+};
+export default setup;
 //# sourceMappingURL=BKJTextInput.stories.js.map

package/lib/components/BKJTextInput/BKJTextInput.styled.d.ts

@@ -1,15 +1,15 @@
-import { IBKJTextInputLabelProps, IBKJTextInputTextInputProps, IBKJTextInputWrapperProps } from './BKJTextInput.types.js';
-export declare const BKJTextInputWrapper: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, IBKJTextInputWrapperProps, never>;
-export declare const BKJTextInputTextInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, IBKJTextInputTextInputProps, never>;
-export declare const BKJTextInputIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    padding?: string | undefined;
-    isOpen?: boolean | undefined;
-}, never>;
-export declare const BKJTextInputLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, IBKJTextInputLabelProps, never>;
-export declare const BKJTextInputRequiredAsterisk: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const BKJTextInputFieldSet: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
-export declare const BKJTextInputDescription: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const BKJTextInputErrorMessage: import("styled-components").StyledComponent<"pre", import("styled-components").DefaultTheme, {}, never>;
+import { IBKJTextInputLabelProps, IBKJTextInputTextInputProps, IBKJTextInputWrapperProps } from './BKJTextInput.types.js';
+export declare const BKJTextInputWrapper: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, IBKJTextInputWrapperProps, never>;
+export declare const BKJTextInputTextInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, IBKJTextInputTextInputProps, never>;
+export declare const BKJTextInputIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    padding?: string | undefined;
+    isOpen?: boolean | undefined;
+}, never>;
+export declare const BKJTextInputLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, IBKJTextInputLabelProps, never>;
+export declare const BKJTextInputRequiredAsterisk: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const BKJTextInputFieldSet: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
+export declare const BKJTextInputDescription: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const BKJTextInputErrorMessage: import("styled-components").StyledComponent<"pre", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=BKJTextInput.styled.d.ts.map

package/lib/components/BKJTextInput/BKJTextInput.styled.js

@@ -1,72 +1,72 @@
-import styled, { css } from 'styled-components';
-import { assertBKJThemeType } from '../../index.js';
-import { InputErrorMessageCSS, InputLabelCSS, InputRequiredAsteriskCSS } from '../common/index.js';
-import { BKJTextInputBaseCSS } from './BKJTextInput.css.styled.js';
-export const BKJTextInputWrapper = styled.label `
-  ${(props) => assertBKJThemeType('BKJTextInput', props)};
-  ${({ theme, variant = 'RoundEdges' }) => theme.textInput[variant]};
-  display: flex;
-  position: relative;
-  align-items: center;
-  box-shadow: none;
-`;
-export const BKJTextInputTextInput = styled.input `
-  ${BKJTextInputBaseCSS};
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  cursor: text;
-  &:focus {
-    outline: none;
-  }
-  ${({ theme, variant = 'RoundEdges' }) => theme.textInput[variant]};
-  ${({ hasLeftIcon }) => hasLeftIcon &&
-    css `
-      &&& {
-        padding-left: 38px !important;
-      }
-    `};
-  ${({ hasRightIcon }) => hasRightIcon &&
-    css `
-      &&& {
-        padding-right: 32px !important;
-      }
-    `};
-`;
-export const BKJTextInputIconWrapper = styled.div `
-  width: fit-content;
-  position: absolute;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 150ms ease-in-out;
-  transform: scale(1, 1);
-  ${({ padding }) => padding &&
-    css `
-      padding: ${padding};
-    `};
-  ${({ isOpen }) => isOpen &&
-    css `
-      transform: scale(1, -1);
-    `};
-`;
-export const BKJTextInputLabel = styled.label `
-  ${({ theme, variant = 'RoundEdges' }) => theme.textInput[variant]};
-  ${InputLabelCSS};
-`;
-export const BKJTextInputRequiredAsterisk = styled.label `
-  ${InputLabelCSS};
-  ${InputRequiredAsteriskCSS};
-`;
-export const BKJTextInputFieldSet = styled.fieldset `
-  position: relative;
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-`;
-export const BKJTextInputDescription = styled.div ``;
-export const BKJTextInputErrorMessage = styled.pre `
-  ${InputErrorMessageCSS};
-`;
+import styled, { css } from 'styled-components';
+import { assertBKJThemeType } from '../../index.js';
+import { InputErrorMessageCSS, InputLabelCSS, InputRequiredAsteriskCSS } from '../common/index.js';
+import { BKJTextInputBaseCSS } from './BKJTextInput.css.styled.js';
+export const BKJTextInputWrapper = styled.label `
+  ${(props) => assertBKJThemeType('BKJTextInput', props)};
+  ${({ theme, variant = 'RoundEdges' }) => theme.textInput[variant]};
+  display: flex;
+  position: relative;
+  align-items: center;
+  box-shadow: none;
+`;
+export const BKJTextInputTextInput = styled.input `
+  ${BKJTextInputBaseCSS};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: text;
+  &:focus {
+    outline: none;
+  }
+  ${({ theme, variant = 'RoundEdges' }) => theme.textInput[variant]};
+  ${({ hasLeftIcon }) => hasLeftIcon &&
+    css `
+      &&& {
+        padding-left: 38px !important;
+      }
+    `};
+  ${({ hasRightIcon }) => hasRightIcon &&
+    css `
+      &&& {
+        padding-right: 32px !important;
+      }
+    `};
+`;
+export const BKJTextInputIconWrapper = styled.div `
+  width: fit-content;
+  position: absolute;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 150ms ease-in-out;
+  transform: scale(1, 1);
+  ${({ padding }) => padding &&
+    css `
+      padding: ${padding};
+    `};
+  ${({ isOpen }) => isOpen &&
+    css `
+      transform: scale(1, -1);
+    `};
+`;
+export const BKJTextInputLabel = styled.label `
+  ${({ theme, variant = 'RoundEdges' }) => theme.textInput[variant]};
+  ${InputLabelCSS};
+`;
+export const BKJTextInputRequiredAsterisk = styled.label `
+  ${InputLabelCSS};
+  ${InputRequiredAsteriskCSS};
+`;
+export const BKJTextInputFieldSet = styled.fieldset `
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`;
+export const BKJTextInputDescription = styled.div ``;
+export const BKJTextInputErrorMessage = styled.pre `
+  ${InputErrorMessageCSS};
+`;
 //# sourceMappingURL=BKJTextInput.styled.js.map

package/lib/components/BKJTextInput/BKJTextInput.theme.d.ts

@@ -1,10 +1,10 @@
-import { CreateBKJTextInputVariantStyleOutputType } from './BKJTextInput.types.js';
-export interface IBKJThemeTextInput {
-    RoundEdges: CreateBKJTextInputVariantStyleOutputType;
-    ComboBoxSeamlessRounded: CreateBKJTextInputVariantStyleOutputType;
-    NoStyles: CreateBKJTextInputVariantStyleOutputType;
-    BigChungusSearchGoldMember: CreateBKJTextInputVariantStyleOutputType;
-}
-export declare type BKJThemeTextInputVariantType = keyof IBKJThemeTextInput;
-export declare const BKJThemeTextInput: IBKJThemeTextInput;
+import { CreateBKJTextInputVariantStyleOutputType } from './BKJTextInput.types.js';
+export interface IBKJThemeTextInput {
+    RoundEdges: CreateBKJTextInputVariantStyleOutputType;
+    ComboBoxSeamlessRounded: CreateBKJTextInputVariantStyleOutputType;
+    NoStyles: CreateBKJTextInputVariantStyleOutputType;
+    BigChungusSearchGoldMember: CreateBKJTextInputVariantStyleOutputType;
+}
+export declare type BKJThemeTextInputVariantType = keyof IBKJThemeTextInput;
+export declare const BKJThemeTextInput: IBKJThemeTextInput;
 //# sourceMappingURL=BKJTextInput.theme.d.ts.map

package/lib/components/BKJTextInput/BKJTextInput.theme.js

@@ -1,45 +1,45 @@
-import { css } from 'styled-components';
-import { createBKJTextInputThemeVariantStyles } from './BKJTextInput.utils.js';
-export const BKJThemeTextInput = {
-    RoundEdges: createBKJTextInputThemeVariantStyles(),
-    ComboBoxSeamlessRounded: createBKJTextInputThemeVariantStyles(),
-    NoStyles: createBKJTextInputThemeVariantStyles({
-        fontSize: '14px',
-        border: 'unset',
-        borderRadius: 'unset',
-        boxShadow: 'none',
-        disabledBorder: 'unset',
-        invalidBorderColor: 'unset',
-        padding: '0',
-        focusBorderColor: 'AccentPurple',
-        activeBackgroundColor: 'White',
-        disabledBackgroundColor: 'Grey3',
-        fontColor: 'TextDarkGrey',
-        placeholderColor: 'Grey6',
-        backgroundColor: 'White',
-        background: 'White',
-    }),
-    BigChungusSearchGoldMember: createBKJTextInputThemeVariantStyles({
-        fontSize: '16px',
-        border: css `
-      ${({ theme }) => `1px solid ${theme.colors.Grey6};`}
-    `,
-        minHeight: '52px',
-        height: '52px',
-        borderRadius: '0px',
-        boxShadow: 'none',
-        disabledBorder: 'unset',
-        backgroundColor: 'White',
-        background: 'White',
-        invalidBorderColor: 'unset',
-        padding: '0px 0px 0px 12px',
-        inputPadding: '0',
-        focusBorderColor: 'AccentPurple',
-        activeBackgroundColor: 'White',
-        disabledBackgroundColor: 'Grey3',
-        fontColor: 'TextSubtleGrey',
-        placeholderColor: 'Grey4',
-        fontFamily: 'PoppinsTextMedium',
-    }),
-};
+import { css } from 'styled-components';
+import { createBKJTextInputThemeVariantStyles } from './BKJTextInput.utils.js';
+export const BKJThemeTextInput = {
+    RoundEdges: createBKJTextInputThemeVariantStyles(),
+    ComboBoxSeamlessRounded: createBKJTextInputThemeVariantStyles(),
+    NoStyles: createBKJTextInputThemeVariantStyles({
+        fontSize: '14px',
+        border: 'unset',
+        borderRadius: 'unset',
+        boxShadow: 'none',
+        disabledBorder: 'unset',
+        invalidBorderColor: 'unset',
+        padding: '0',
+        focusBorderColor: 'AccentPurple',
+        activeBackgroundColor: 'White',
+        disabledBackgroundColor: 'Grey3',
+        fontColor: 'TextDarkGrey',
+        placeholderColor: 'Grey6',
+        backgroundColor: 'White',
+        background: 'White',
+    }),
+    BigChungusSearchGoldMember: createBKJTextInputThemeVariantStyles({
+        fontSize: '16px',
+        border: css `
+      ${({ theme }) => `1px solid ${theme.colors.Grey6};`}
+    `,
+        minHeight: '52px',
+        height: '52px',
+        borderRadius: '0px',
+        boxShadow: 'none',
+        disabledBorder: 'unset',
+        backgroundColor: 'White',
+        background: 'White',
+        invalidBorderColor: 'unset',
+        padding: '0px 0px 0px 12px',
+        inputPadding: '0',
+        focusBorderColor: 'AccentPurple',
+        activeBackgroundColor: 'White',
+        disabledBackgroundColor: 'Grey3',
+        fontColor: 'TextSubtleGrey',
+        placeholderColor: 'Grey4',
+        fontFamily: 'PoppinsTextMedium',
+    }),
+};
 //# sourceMappingURL=BKJTextInput.theme.js.map