@thecb/components 11.9.2-beta.2 → 11.9.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.9.2-beta.2",
+  "version": "11.9.3-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/form-layouts/FormInput.js

@@ -5,6 +5,7 @@ import { fallbackValues } from "./FormLayouts.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
 import { createIdFromString } from "../../../util/general.js";
 import Text from "../text";
+import ButtonWithAction from "../button-with-action";
 import { Box, Cluster, Stack } from "../layouts";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { ERROR_COLOR, ROYAL_BLUE } from "../../../constants/colors";
@@ -171,7 +172,7 @@ const FormInput = ({
           </Cluster>
         ) : (
           <Box padding="0" minWidth="100%">
-            <Cluster justify="space-between" align="center">
+            <Cluster justify="space-between" align="center" overflow>
               {labelDisplayOverride ? (
                 labelDisplayOverride
               ) : (
@@ -191,22 +192,14 @@ const FormInput = ({
                 </Text>
               )}
               {type === "password" && (
-                <Text
-                  variant={labelTextVariant}
-                  color={themeValues.linkColor}
-                  weight={themeValues.fontWeight}
-                  hoverStyles={themeValues.hoverFocusStyles}
-                  extraStyles={`text-decoration: underline; cursor: pointer; &:focus { outline-offset: -2px; }`}
-                  onClick={() => setShowPassword(!showPassword)}
-                  tabIndex="0"
+                <ButtonWithAction
+                  variant="smallGhost"
+                  text={showPassword ? "Hide" : "Show"}
+                  action={() => setShowPassword(!showPassword)}
                   aria-label={showPassword ? "Hide Password" : "Show password"}
-                  aria-live="polite"
-                  onKeyPress={e =>
-                    e.key === "Enter" && setShowPassword(!showPassword)
-                  }
-                >
-                  {showPassword ? "Hide" : "Show"}
-                </Text>
+                  extraStyles={`margin: 0; min-width: auto;`}
+                  textExtraStyles={`color: ${themeValues.linkColor};`}
+                />
               )}
               {isMobile && decorator && (
                 <Box padding="0 0 0 auto">{decorator}</Box>

package/src/components/molecules/email-form/EmailForm.js

@@ -34,8 +34,7 @@ const EmailForm = ({
   );
   const emailFieldErrorMessages = {
     [required.error]: "Email address is required",
-    [isProbablyEmail.error]:
-      "Please enter a valid email address in the format user@example.com"
+    [isProbablyEmail.error]: "Invalid email address"
   };
 
   return (

package/src/components/molecules/email-form/EmailForm.stories.js

@@ -1,210 +0,0 @@
-import React from "react";
-import EmailForm from "./EmailForm";
-import { connect, Provider } from "react-redux";
-import { createStore } from "redux";
-import { createFormState, isProbablyEmail } from "redux-freeform";
-import { noop } from "../../../util/general";
-import { fn } from "@storybook/test";
-
-const formConfig = {
-  email: {
-    validators: [isProbablyEmail()]
-  }
-};
-
-const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
-  formConfig
-);
-
-const store = createStore(
-  reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
-const FormWrapper = props => <EmailForm {...props} />;
-
-const ConnectedEmailForm = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(FormWrapper);
-
-export default {
-  title: "Molecules/EmailForm",
-  component: ConnectedEmailForm,
-  tags: ["!autodocs"],
-  parameters: {
-    layout: "centered"
-  },
-  args: {
-    variant: "default",
-    clearOnDismount: undefined,
-    fields: undefined,
-    actions: undefined,
-    showErrors: false,
-    guestCheckout: false,
-    handleSubmit: noop,
-    showWalletCheckbox: false,
-    saveToWallet: noop,
-    walletCheckboxMarked: false,
-    isRequired: false
-  },
-  argTypes: {
-    variant: {
-      description: "Form container variant.",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "default" }
-      }
-    },
-    fields: {
-      description:
-        "Field data, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
-      control: { type: "object" },
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    actions: {
-      description:
-        "Field actions, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
-      control: { type: "object" },
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    clearOnDismount: {
-      description:
-        "If `true`, `actions.form.clear()` will be called when the component unmounts.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    showErrors: {
-      description: "Show form field errors.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    guestCheckout: {
-      description:
-        "If `true`, displays a message about creating a wallet later for faster checkout.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    handleSubmit: {
-      description:
-        "Function called when the `Enter` key is pressed on the email input (via `onKeyDown` prop passed to `FormInput` component).",
-      control: { type: "object" },
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    showWalletCheckbox: {
-      description:
-        "If `true`, displays a checkbox to save the email address to wallet.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    saveToWallet: {
-      description: "Function called when the wallet checkbox is toggled.",
-      control: { type: "object" },
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    walletCheckboxMarked: {
-      description: "Whether the wallet checkbox is checked.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    isRequired: {
-      description: "If `true`, the email field becomes required.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    }
-  },
-  decorators: [
-    Story => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
-};
-
-export const Basic = args => <ConnectedEmailForm {...args} />;
-
-export const ShowErrors = {
-  args: {
-    showErrors: true
-  },
-  render: args => <ConnectedEmailForm {...args} />
-};
-
-export const GuestCheckout = {
-  args: {
-    guestCheckout: true
-  },
-  render: args => <ConnectedEmailForm {...args} />
-};
-
-export const WithWalletCheckbox = {
-  args: {
-    showWalletCheckbox: true,
-    saveToWallet: fn()
-  },
-  render: args => <ConnectedEmailForm {...args} />
-};
-
-export const Required = {
-  args: {
-    isRequired: true
-  },
-  render: args => <ConnectedEmailForm {...args} />
-};
-
-export const RequiredWithErrors = {
-  args: {
-    isRequired: true,
-    showErrors: true
-  },
-  render: args => <ConnectedEmailForm {...args} />
-};
-
-export const GuestCheckoutWithWallet = {
-  args: {
-    guestCheckout: true,
-    showWalletCheckbox: true,
-    saveToWallet: fn(),
-    walletCheckboxMarked: true
-  },
-  render: args => <ConnectedEmailForm {...args} />
-};
-
-export const HandleSubmit = {
-  args: {
-    handleSubmit: fn()
-  },
-  render: args => <ConnectedEmailForm {...args} />
-};