@simplybusiness/mobius 4.1.1 → 4.2.0

package/src/components/TextField/TextField.tsx

@@ -3,6 +3,7 @@
 import classNames from "classnames/dedupe";
 import {
   HTMLInputTypeAttribute,
+  ReactElement,
   ReactNode,
   Ref,
   RefAttributes,
@@ -12,8 +13,8 @@ import { UseTextFieldProps, useTextField } from "../../hooks";
 import { DOMProps, FocusEvents } from "../../types";
 import { ForwardedRefComponent } from "../../types/components";
 import { ErrorMessage } from "../ErrorMessage";
-import { Flex } from "../Flex";
 import { Label } from "../Label";
+import { adornmentWithClassName } from "./adornmentWithClassName";
 
 export type TextFieldElementType = HTMLInputElement;
 export interface TextFieldProps
@@ -41,6 +42,10 @@ export interface TextFieldProps
     | "submit"
     | "week"
   >;
+  prefixInside?: ReactElement;
+  prefixOutside?: ReactElement;
+  suffixInside?: ReactElement;
+  suffixOutside?: ReactElement;
 }
 
 export type TextFieldRef = Ref<TextFieldElementType>;
@@ -56,6 +61,10 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
       errorMessage,
       children,
       isRequired,
+      prefixInside,
+      prefixOutside,
+      suffixInside,
+      suffixOutside,
       ...otherProps
     } = props;
 
@@ -72,6 +81,7 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
       "--is-invalid": validationState === "invalid",
       "--is-required": typeof isRequired === "boolean" && isRequired,
       "--is-optional": typeof isRequired === "boolean" && !isRequired,
+      "--is-hidden": hidden,
       [className || ""]: true,
     };
 
@@ -81,7 +91,11 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
       "--is-invalid": validationState === "invalid",
     });
 
-    const containerClasses = classNames("mobius/TextField", textfieldClasses);
+    const containerClasses = classNames(
+      "mobius",
+      "mobius/TextField",
+      textfieldClasses,
+    );
 
     const inputClasses = classNames(
       "mobius",
@@ -89,27 +103,49 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
       textfieldClasses,
     );
 
+    const inputWrapperClasses = classNames(
+      "mobius/TextFieldInputWrapper",
+      textfieldClasses,
+    );
+
     return (
-      <Flex flexDirection="column" className={containerClasses}>
+      <div className={containerClasses}>
         {label && !hidden && (
           <Label {...labelProps} className={labelClasses}>
             {label}
           </Label>
         )}
-        <div className="mobius/TextFieldInputWrapper">
-          <input
-            {...otherProps}
-            {...inputProps}
-            disabled={isDisabled}
-            ref={ref}
-            type={type}
-            aria-invalid={errorMessage != null}
-            className={inputClasses}
-          />
-          <div className="mobius/TextFieldChildren">{children}</div>
+        <div className="mobius/TextFieldInnerContainer">
+          {adornmentWithClassName(
+            prefixOutside,
+            "mobius/TextFieldPrefixOutside",
+          )}
+          <div className={inputWrapperClasses}>
+            {adornmentWithClassName(
+              prefixInside,
+              "mobius/TextFieldPrefixInside",
+            )}
+            <input
+              {...otherProps}
+              {...inputProps}
+              ref={ref}
+              type={type}
+              className={inputClasses}
+            />
+            {adornmentWithClassName(
+              suffixInside,
+              "mobius/TextFieldSuffixInside",
+            )}
+          </div>
+          {adornmentWithClassName(
+            suffixOutside,
+            "mobius/TextFieldSuffixOutside",
+          )}
         </div>
+        {children && <div className="mobius/TextFieldChildren">{children}</div>}
+
         <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />
-      </Flex>
+      </div>
     );
   });
 

package/src/components/TextField/adornmentWithClassName.ts

@@ -0,0 +1,13 @@
+import classNames from "classnames";
+import { ReactElement, cloneElement } from "react";
+
+export const adornmentWithClassName = (
+  component?: ReactElement,
+  className?: string,
+) => {
+  if (!component) return null;
+
+  return cloneElement(component, {
+    className: classNames(component.props.className, className),
+  });
+};

package/src/components/Title/Title.stories.tsx

@@ -1,11 +1,9 @@
 import type { Meta } from "@storybook/react";
 import { Title, TitleProps } from "./Title";
-import { excludeControls } from "../../utils/excludeControls";
 
 export default {
   title: "Components/Title",
   component: Title,
-  argTypes: excludeControls("className", "elementType"),
 };
 
 export const Normal: Meta<typeof Title> = {

package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -1,11 +1,9 @@
 import type { Meta } from "@storybook/react";
 import { VisuallyHidden, VisuallyHiddenProps } from ".";
-import { excludeControls } from "../../utils/excludeControls";
 
 export default {
   title: "Components/VisuallyHidden",
   component: VisuallyHidden,
-  argTypes: excludeControls("className", "elementType"),
 };
 
 export const Normal: Meta<typeof VisuallyHidden> = {

package/src/components/index.tsx

@@ -19,6 +19,7 @@ export * from "./Link";
 export * from "./LinkButton";
 export * from "./List";
 export * from "./LoadingIndicator";
+export * from "./Logo";
 export * from "./Modal";
 export * from "./NumberField";
 export * from "./Option";