@nulogy/components 15.1.3 → 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),
@@ -55096,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,
@@ -55128,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);
       };
@@ -55144,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),
@@ -55079,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,
@@ -55111,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);
   };
@@ -55127,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/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.3",
+  "version": "15.1.4",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {