@nulogy/components 15.1.2 → 15.1.4

package/dist/main.js

@@ -51418,14 +51418,14 @@
           marginBottom: theme.space.x1
         }
       }, /*#__PURE__*/React__default["default"].createElement("span", {
-        style: labelTextStyles$1(theme)
+        style: labelTextStyles(theme)
       }, labelText), requirementText && /*#__PURE__*/React__default["default"].createElement(RequirementText, null, requirementText)), helpText && /*#__PURE__*/React__default["default"].createElement(HelpText$1, null, helpText), getRadioButtons(otherProps), /*#__PURE__*/React__default["default"].createElement(InlineValidation, {
         mt: "x1",
         errorMessage: errorMessage,
         errorList: errorList
       }));
     }
-    var labelTextStyles$1 = function labelTextStyles(theme) {
+    var labelTextStyles = function labelTextStyles(theme) {
       return {
         fontSize: theme.fontSizes.small,
         fontWeight: Number(theme.fontWeights.bold),
@@ -52673,9 +52673,6 @@
       var value = _a.value,
         _onChange = _a.onChange,
         defaultValue = _a.defaultValue,
-        labelText = _a.labelText,
-        requirementText = _a.requirementText,
-        helpText = _a.helpText,
         disabled = _a.disabled,
         errorMessage = _a.errorMessage,
         errorList = _a.errorList,
@@ -52703,7 +52700,7 @@
         _a$closeMenuOnSelect = _a.closeMenuOnSelect,
         closeMenuOnSelect = _a$closeMenuOnSelect === void 0 ? true : _a$closeMenuOnSelect,
         noOptionsMessage = _a.noOptionsMessage,
-        props = __rest(_a, ["value", "onChange", "defaultValue", "labelText", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
+        props = __rest(_a, ["value", "onChange", "defaultValue", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
       var _useTranslation = useTranslation(),
         t = _useTranslation.t;
       var variant = useComponentVariant();
@@ -52715,6 +52712,16 @@
         return calcOptionsLength(options);
       }, [options]);
       var isWindowed = optionsLength >= windowThreshold;
+      var labelText = props.labelText,
+        requirementText = props.requirementText,
+        helpText = props.helpText,
+        hint = props.hint;
+      var fieldLabelProps = {
+        labelText: labelText,
+        requirementText: requirementText,
+        helpText: helpText,
+        hint: hint
+      };
       noOptionsMessage || (noOptionsMessage = function noOptionsMessage() {
         return t("no options");
       });
@@ -52729,11 +52736,7 @@
         maxHeight: maxHeight,
         windowed: options.length > windowThreshold
       });
-      return /*#__PURE__*/React__default["default"].createElement(Field, Object.assign({}, styledProps), /*#__PURE__*/React__default["default"].createElement(MaybeFieldLabel, {
-        labelText: labelText,
-        requirementText: requirementText,
-        helpText: helpText
-      }, /*#__PURE__*/React__default["default"].createElement(StateManagedSelect$1, Object.assign({
+      return /*#__PURE__*/React__default["default"].createElement(Field, Object.assign({}, styledProps), /*#__PURE__*/React__default["default"].createElement(MaybeFieldLabel, Object.assign({}, fieldLabelProps), /*#__PURE__*/React__default["default"].createElement(StateManagedSelect$1, Object.assign({
         ref: ref,
         isSearchable: autocomplete,
         isDisabled: disabled,
@@ -55093,26 +55096,6 @@
       }));
     });
 
-    var labelTextStyles = function labelTextStyles(theme) {
-      return {
-        fontSize: theme.fontSizes.small,
-        fontWeight: theme.fontWeights.bold,
-        lineHeight: theme.lineHeights.smallTextBase
-      };
-    };
-    function MaybeToggleTitle(_a) {
-      var labelText = _a.labelText,
-        requirementText = _a.requirementText,
-        helpText = _a.helpText,
-        children = _a.children,
-        props = __rest(_a, ["labelText", "requirementText", "helpText", "children"]);
-      var themeContext = React.useContext(styled.ThemeContext);
-      return labelText ? (/*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, props), /*#__PURE__*/React__default["default"].createElement(Box, {
-        mb: children && "x1"
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        style: labelTextStyles(themeContext)
-      }, labelText), requirementText && /*#__PURE__*/React__default["default"].createElement(RequirementText, null, requirementText), helpText && /*#__PURE__*/React__default["default"].createElement(HelpText$1, null, helpText)), children)) : (/*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children));
-    }
     var BaseToggle = function BaseToggle(_a) {
       var disabled = _a.disabled,
         onChange = _a.onChange,
@@ -55125,12 +55108,13 @@
         labelText = _a.labelText,
         requirementText = _a.requirementText,
         helpText = _a.helpText,
+        hint = _a.hint,
         toggled = _a.toggled,
         _a$onClick = _a.onClick,
         onClick = _a$onClick === void 0 ? noop$2 : _a$onClick,
         variant = _a.variant,
         dataTestId = _a["data-testid"],
-        props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "toggled", "onClick", "variant", "data-testid"]);
+        props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "hint", "toggled", "onClick", "variant", "data-testid"]);
       var handleClick = function handleClick(e) {
         onClick(e);
       };
@@ -55141,11 +55125,11 @@
         className: className,
         alignItems: "flex-start",
         py: "half"
-      }, spaceProps), /*#__PURE__*/React__default["default"].createElement(MaybeToggleTitle, {
-        id: labelText && labelText + "-label",
+      }, spaceProps), /*#__PURE__*/React__default["default"].createElement(MaybeFieldLabel, {
         labelText: labelText,
         requirementText: requirementText,
-        helpText: helpText
+        helpText: helpText,
+        hint: hint
       }, /*#__PURE__*/React__default["default"].createElement(ClickInputLabel, {
         variant: componentVariant,
         as: "div",

package/dist/main.module.js

@@ -51401,14 +51401,14 @@ function RadioGroup(_a) {
       marginBottom: theme.space.x1
     }
   }, /*#__PURE__*/React__default.createElement("span", {
-    style: labelTextStyles$1(theme)
+    style: labelTextStyles(theme)
   }, labelText), requirementText && /*#__PURE__*/React__default.createElement(RequirementText, null, requirementText)), helpText && /*#__PURE__*/React__default.createElement(HelpText$1, null, helpText), getRadioButtons(otherProps), /*#__PURE__*/React__default.createElement(InlineValidation, {
     mt: "x1",
     errorMessage: errorMessage,
     errorList: errorList
   }));
 }
-var labelTextStyles$1 = function labelTextStyles(theme) {
+var labelTextStyles = function labelTextStyles(theme) {
   return {
     fontSize: theme.fontSizes.small,
     fontWeight: Number(theme.fontWeights.bold),
@@ -52656,9 +52656,6 @@ var NDSSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var value = _a.value,
     _onChange = _a.onChange,
     defaultValue = _a.defaultValue,
-    labelText = _a.labelText,
-    requirementText = _a.requirementText,
-    helpText = _a.helpText,
     disabled = _a.disabled,
     errorMessage = _a.errorMessage,
     errorList = _a.errorList,
@@ -52686,7 +52683,7 @@ var NDSSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     _a$closeMenuOnSelect = _a.closeMenuOnSelect,
     closeMenuOnSelect = _a$closeMenuOnSelect === void 0 ? true : _a$closeMenuOnSelect,
     noOptionsMessage = _a.noOptionsMessage,
-    props = __rest(_a, ["value", "onChange", "defaultValue", "labelText", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
+    props = __rest(_a, ["value", "onChange", "defaultValue", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var variant = useComponentVariant();
@@ -52698,6 +52695,16 @@ var NDSSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     return calcOptionsLength(options);
   }, [options]);
   var isWindowed = optionsLength >= windowThreshold;
+  var labelText = props.labelText,
+    requirementText = props.requirementText,
+    helpText = props.helpText,
+    hint = props.hint;
+  var fieldLabelProps = {
+    labelText: labelText,
+    requirementText: requirementText,
+    helpText: helpText,
+    hint: hint
+  };
   noOptionsMessage || (noOptionsMessage = function noOptionsMessage() {
     return t("no options");
   });
@@ -52712,11 +52719,7 @@ var NDSSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     maxHeight: maxHeight,
     windowed: options.length > windowThreshold
   });
-  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, styledProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, {
-    labelText: labelText,
-    requirementText: requirementText,
-    helpText: helpText
-  }, /*#__PURE__*/React__default.createElement(StateManagedSelect$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, styledProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, Object.assign({}, fieldLabelProps), /*#__PURE__*/React__default.createElement(StateManagedSelect$1, Object.assign({
     ref: ref,
     isSearchable: autocomplete,
     isDisabled: disabled,
@@ -55076,26 +55079,6 @@ var ToggleButton = /*#__PURE__*/React__default.forwardRef(function (props, ref)
   }));
 });
 
-var labelTextStyles = function labelTextStyles(theme) {
-  return {
-    fontSize: theme.fontSizes.small,
-    fontWeight: theme.fontWeights.bold,
-    lineHeight: theme.lineHeights.smallTextBase
-  };
-};
-function MaybeToggleTitle(_a) {
-  var labelText = _a.labelText,
-    requirementText = _a.requirementText,
-    helpText = _a.helpText,
-    children = _a.children,
-    props = __rest(_a, ["labelText", "requirementText", "helpText", "children"]);
-  var themeContext = useContext(ThemeContext$1);
-  return labelText ? (/*#__PURE__*/React__default.createElement("div", Object.assign({}, props), /*#__PURE__*/React__default.createElement(Box, {
-    mb: children && "x1"
-  }, /*#__PURE__*/React__default.createElement("span", {
-    style: labelTextStyles(themeContext)
-  }, labelText), requirementText && /*#__PURE__*/React__default.createElement(RequirementText, null, requirementText), helpText && /*#__PURE__*/React__default.createElement(HelpText$1, null, helpText)), children)) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, children));
-}
 var BaseToggle = function BaseToggle(_a) {
   var disabled = _a.disabled,
     onChange = _a.onChange,
@@ -55108,12 +55091,13 @@ var BaseToggle = function BaseToggle(_a) {
     labelText = _a.labelText,
     requirementText = _a.requirementText,
     helpText = _a.helpText,
+    hint = _a.hint,
     toggled = _a.toggled,
     _a$onClick = _a.onClick,
     onClick = _a$onClick === void 0 ? noop$2 : _a$onClick,
     variant = _a.variant,
     dataTestId = _a["data-testid"],
-    props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "toggled", "onClick", "variant", "data-testid"]);
+    props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "hint", "toggled", "onClick", "variant", "data-testid"]);
   var handleClick = function handleClick(e) {
     onClick(e);
   };
@@ -55124,11 +55108,11 @@ var BaseToggle = function BaseToggle(_a) {
     className: className,
     alignItems: "flex-start",
     py: "half"
-  }, spaceProps), /*#__PURE__*/React__default.createElement(MaybeToggleTitle, {
-    id: labelText && labelText + "-label",
+  }, spaceProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, {
     labelText: labelText,
     requirementText: requirementText,
-    helpText: helpText
+    helpText: helpText,
+    hint: hint
   }, /*#__PURE__*/React__default.createElement(ClickInputLabel, {
     variant: componentVariant,
     as: "div",

package/dist/src/Select/Select.d.ts

@@ -4,6 +4,7 @@ import { PropsValue } from "react-select";
 import type { GroupBase, Props, StylesConfig } from "react-select";
 import { StyledProps } from "../StyledProps";
 import { CustomOnChangeValue } from "./lib";
+import { FieldLabelProps } from "../FieldLabel/FieldLabel.type";
 export type NDSOptionValue = string | number | boolean | null;
 export interface NDSOption {
     label: ReactNode;
@@ -11,9 +12,10 @@ export interface NDSOption {
 }
 interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group extends GroupBase<Option>> extends StyledProps {
     autocomplete?: Props<Option, IsMulti, Group>["isSearchable"];
-    labelText?: string;
-    requirementText?: string;
-    helpText?: ReactNode;
+    labelText?: FieldLabelProps["labelText"];
+    requirementText?: FieldLabelProps["requirementText"];
+    hint?: FieldLabelProps["hint"];
+    helpText?: FieldLabelProps["helpText"];
     disabled?: Props<Option, IsMulti, Group>["isDisabled"];
     errorMessage?: string;
     errorList?: string[];

package/dist/src/Select/Select.js

@@ -26,7 +26,7 @@ import { SelectOption } from "./SelectOption";
 import MenuList from "./MenuList";
 import { calcOptionsLength, checkOptionsAreValid, extractValue, getReactSelectValue } from "./lib";
 const NDSSelect = forwardRef((_a, ref) => {
-    var { value, onChange, defaultValue, labelText, requirementText, helpText, disabled, errorMessage, errorList, id, initialIsOpen, multiselect, placeholder, components, options, styles, windowThreshold = 300, autocomplete = true, maxHeight = "248px", required = false, menuPosition = "absolute", menuPlacement = "bottom", classNamePrefix = "ndsSelect", closeMenuOnSelect = true, noOptionsMessage } = _a, props = __rest(_a, ["value", "onChange", "defaultValue", "labelText", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
+    var { value, onChange, defaultValue, disabled, errorMessage, errorList, id, initialIsOpen, multiselect, placeholder, components, options, styles, windowThreshold = 300, autocomplete = true, maxHeight = "248px", required = false, menuPosition = "absolute", menuPlacement = "bottom", classNamePrefix = "ndsSelect", closeMenuOnSelect = true, noOptionsMessage } = _a, props = __rest(_a, ["value", "onChange", "defaultValue", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
     const { t } = useTranslation();
     const variant = useComponentVariant();
     const theme = useTheme();
@@ -35,6 +35,8 @@ const NDSSelect = forwardRef((_a, ref) => {
     const optionsRef = React.useRef(options);
     const optionsLength = React.useMemo(() => calcOptionsLength(options), [options]);
     const isWindowed = optionsLength >= windowThreshold;
+    const { labelText, requirementText, helpText, hint } = props;
+    const fieldLabelProps = { labelText, requirementText, helpText, hint };
     noOptionsMessage || (noOptionsMessage = () => t("no options"));
     React.useEffect(() => {
         checkOptionsAreValid(options);
@@ -48,7 +50,7 @@ const NDSSelect = forwardRef((_a, ref) => {
         windowed: options.length > windowThreshold,
     });
     return (React.createElement(Field, Object.assign({}, styledProps),
-        React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText },
+        React.createElement(MaybeFieldLabel, Object.assign({}, fieldLabelProps),
             React.createElement(ReactSelect, Object.assign({ ref: ref, isSearchable: autocomplete, isDisabled: disabled, defaultMenuIsOpen: initialIsOpen, isMulti: multiselect, defaultValue: getReactSelectValue(options, defaultValue), value: getReactSelectValue(options, value), options: options, onChange: (newValue) => {
                     if (!onChange)
                         return;

package/dist/src/Select/Select.story.d.ts

@@ -48,7 +48,7 @@ export declare const Required: {
     };
 };
 export declare const WithAClearButton: () => React.JSX.Element;
-export declare const WithHelpText: {
+export declare const WithAllFieldLabelProps: {
     (): React.JSX.Element;
     story: {
         name: string;

package/dist/src/Select/Select.story.js

@@ -106,9 +106,9 @@ Required.story = {
     name: "set to required",
 };
 export const WithAClearButton = () => (React.createElement(Select, { isClearable: true, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-export const WithHelpText = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-WithHelpText.story = {
-    name: "with helpText",
+export const WithAllFieldLabelProps = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", hint: "This is a hint for the input field", requirementText: "(Required)", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+WithAllFieldLabelProps.story = {
+    name: "with all field label props",
 };
 export const WithCustomId = () => (React.createElement(Select, { id: "my-custom-id", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
 WithCustomId.story = {

package/dist/src/Toggle/Toggle.d.ts

@@ -3,6 +3,7 @@ import { SpaceProps } from "styled-system";
 import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { DefaultNDSThemeType } from "../theme";
 declare const ToggleComponent: React.ForwardRefExoticComponent<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    hint?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     variant?: ComponentVariant;
     toggled?: boolean;

package/dist/src/Toggle/Toggle.js

@@ -9,11 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState, useContext } from "react";
-import { ThemeContext } from "styled-components";
+import React, { useState } from "react";
 import propTypes from "@styled-system/prop-types";
-import { Box } from "../Box";
-import { HelpText, RequirementText } from "../FieldLabel";
+import { MaybeFieldLabel } from "../FieldLabel";
 import { Field } from "../Form";
 import { Text } from "../Type";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
@@ -21,23 +19,8 @@ import { ClickInputLabel } from "../utils";
 import { getSubset, omitSubset } from "../utils/subset";
 import { noop } from "../utils/noop";
 import ToggleButton from "./ToggleButton";
-const labelTextStyles = (theme) => ({
-    fontSize: theme.fontSizes.small,
-    fontWeight: theme.fontWeights.bold,
-    lineHeight: theme.lineHeights.smallTextBase,
-});
-function MaybeToggleTitle(_a) {
-    var { labelText, requirementText, helpText, children } = _a, props = __rest(_a, ["labelText", "requirementText", "helpText", "children"]);
-    const themeContext = useContext(ThemeContext);
-    return labelText ? (React.createElement("div", Object.assign({}, props),
-        React.createElement(Box, { mb: children && "x1" },
-            React.createElement("span", { style: labelTextStyles(themeContext) }, labelText),
-            requirementText && React.createElement(RequirementText, null, requirementText),
-            helpText && React.createElement(HelpText, null, helpText)),
-        children)) : (React.createElement(React.Fragment, null, children));
-}
 const BaseToggle = (_a) => {
-    var { disabled, onChange, onText, offText, className, required, error, id, labelText, requirementText, helpText, toggled, onClick = noop, variant, "data-testid": dataTestId } = _a, props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "toggled", "onClick", "variant", "data-testid"]);
+    var { disabled, onChange, onText, offText, className, required, error, id, labelText, requirementText, helpText, hint, toggled, onClick = noop, variant, "data-testid": dataTestId } = _a, props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "hint", "toggled", "onClick", "variant", "data-testid"]);
     const handleClick = (e) => {
         onClick(e);
     };
@@ -45,7 +28,7 @@ const BaseToggle = (_a) => {
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
     return (React.createElement(Field, Object.assign({ className: className, alignItems: "flex-start", py: "half" }, spaceProps),
-        React.createElement(MaybeToggleTitle, { id: labelText && `${labelText}-label`, labelText: labelText, requirementText: requirementText, helpText: helpText },
+        React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText, hint: hint },
             React.createElement(ClickInputLabel, { variant: componentVariant, as: "div", onClick: onClick, disabled: disabled, "data-testid": dataTestId },
                 React.createElement(ToggleButton, Object.assign({ id: id, checked: toggled, onChange: onChange, disabled: disabled, required: required, "aria-required": required, "aria-invalid": error, "aria-labelledby": labelText && `${labelText}-label`, onClick: handleClick, toggled: toggled }, restProps, { ref: props.innerRef })),
                 (onText || offText) && (React.createElement(Text, { disabled: disabled, mb: "none", ml: "x1" }, toggled ? onText : offText))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "15.1.2",
+  "version": "15.1.4",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {