@vitality-ds/components 4.9.2 → 4.9.4

package/dist/Form/FormField/components/FormFieldLabel/index.spec.js

@@ -3,10 +3,12 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = require("@testing-library/react");
 var _react2 = _interopRequireDefault(require("react"));
+var _logic = require("../../logic");
 var _index = _interopRequireDefault(require("./index"));
 describe("getInputComponent", function () {
   it("should return a <label> component when no fieldType is provided", function () {
     var _render = (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(_index["default"], {
+        id: (0, _logic.getLabelledById)("foo"),
         fieldType: "text",
         content: "Foo",
         htmlFor: "foo"
@@ -16,6 +18,7 @@ describe("getInputComponent", function () {
   });
   it("should return a <label> component when no fieldType `text` is provided", function () {
     var _render2 = (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(_index["default"], {
+        id: (0, _logic.getLabelledById)("foo"),
         fieldType: "text",
         content: "Foo",
         htmlFor: "foo"
@@ -25,6 +28,7 @@ describe("getInputComponent", function () {
   });
   it("should return a <legend> element when passed a checkbox type", function () {
     var _render3 = (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(_index["default"], {
+        id: (0, _logic.getLabelledById)("foo"),
         fieldType: "checkbox",
         content: "Foo",
         htmlFor: "foo"

package/dist/Form/FormField/index.js

@@ -35,6 +35,7 @@ function FormField(_ref) {
   var Component = inputComponent.component;
   var ariaDescribedById = (0, _logic.getDescribedById)(id);
   var ariaErrorId = (0, _logic.getErrorMessageId)(id);
+  var ariaLabelledById = (0, _logic.getLabelledById)(id);
   return /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], restProps, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
     spacing: "sm",
     direction: "horizontal",
@@ -45,6 +46,7 @@ function FormField(_ref) {
     fieldType: type,
     content: label,
     htmlFor: id,
+    id: ariaLabelledById,
     required: required,
     hasError: hasError
   })), infoTooltipContent && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
@@ -61,7 +63,7 @@ function FormField(_ref) {
     onChange: onChange,
     value: value,
     id: id,
-    "aria-labelledby": id,
+    "aria-labelledby": ariaLabelledById,
     "aria-describedby": ariaDescribedById,
     "aria-required": required,
     "aria-errormessage": ariaErrorId,

package/dist/Form/FormField/logic.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getInputComponent = exports.getErrorMessageId = exports.getDescribedById = void 0;
+exports.getLabelledById = exports.getInputComponent = exports.getErrorMessageId = exports.getDescribedById = void 0;
 var _constants = require("./constants");
 // eslint-disable-next-line import/prefer-default-export
 var getInputComponent = exports.getInputComponent = function getInputComponent(type) {
@@ -14,4 +14,7 @@ var getDescribedById = exports.getDescribedById = function getDescribedById(id)
 };
 var getErrorMessageId = exports.getErrorMessageId = function getErrorMessageId(id) {
   return "vitality-errorMessage-".concat(id);
+};
+var getLabelledById = exports.getLabelledById = function getLabelledById(id) {
+  return "vitality-labelledBy-".concat(id);
 };

package/dist/Form/Label/index.js

@@ -11,9 +11,11 @@ function Label(_ref) {
   var content = _ref.content,
     htmlFor = _ref.htmlFor,
     required = _ref.required,
-    hasError = _ref.hasError;
+    hasError = _ref.hasError,
+    id = _ref.id;
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseLabel, {
-    htmlFor: htmlFor
+    htmlFor: htmlFor,
+    id: id
   }, content, required && /*#__PURE__*/_react["default"].createElement(_styled.BaseLabelRequired, {
     hasError: hasError
   }, "*"));

package/dist/components/src/DropdownMenu/types.d.ts

@@ -27,7 +27,7 @@ export declare type TriggerComponentTypes = {
     iconButton: Omit<IconButtonProps, "onClick" | "disabled"> & NeverOnClick & NeverDisableTriggerThroughTriggerProps;
     avatar: Omit<AvatarButtonType, "onClick" | "disabled"> & NeverOnClick & NeverDisableTriggerThroughTriggerProps;
     button: Omit<ButtonProps, "onClick" | "disabled"> & NeverOnClick & NeverDisableTriggerThroughTriggerProps & {
-        "data-vitality-component": string;
+        "data-vitality-component"?: string;
     };
 };
 export declare type TriggerComponents = typeof Button | typeof IconButton | typeof AvatarButton;

package/dist/components/src/Form/FormField/components/FormFieldLabel/types.d.ts

@@ -16,6 +16,10 @@ export declare type FormFieldLabelProps<T> = ExcludedProps & {
      * Indicate whether or not the associated input field is required
      */
     required?: valueof<Pick<CommonProps, "required">>;
+    /**
+     * The id of the label element
+     */
+    id: valueof<Pick<HTMLLabelElement, "id">>;
     /**
      * Id used for the htmlFor attribute that should match the input's id
      */

package/dist/components/src/Form/FormField/logic.d.ts

@@ -2,3 +2,4 @@ import type { InputComponent, InputTypes } from "./types";
 export declare const getInputComponent: (type: InputTypes) => InputComponent<InputTypes>;
 export declare const getDescribedById: (id: string) => string;
 export declare const getErrorMessageId: (id: string) => string;
+export declare const getLabelledById: (id: string) => string;

package/dist/components/src/Form/Label/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { LabelProps } from "./types";
-declare function Label({ content, htmlFor, required, hasError }: LabelProps): JSX.Element;
+declare function Label({ content, htmlFor, required, hasError, id }: LabelProps): JSX.Element;
 export default Label;

package/dist/esm/Form/FormField/components/FormFieldLabel/index.spec.js

@@ -1,9 +1,11 @@
 import { render } from "@testing-library/react";
 import React from "react";
+import { getLabelledById } from "../../logic";
 import FormFieldLabel from "./index";
 describe("getInputComponent", function () {
   it("should return a <label> component when no fieldType is provided", function () {
     var _render = render(/*#__PURE__*/React.createElement(FormFieldLabel, {
+        id: getLabelledById("foo"),
         fieldType: "text",
         content: "Foo",
         htmlFor: "foo"
@@ -13,6 +15,7 @@ describe("getInputComponent", function () {
   });
   it("should return a <label> component when no fieldType `text` is provided", function () {
     var _render2 = render(/*#__PURE__*/React.createElement(FormFieldLabel, {
+        id: getLabelledById("foo"),
         fieldType: "text",
         content: "Foo",
         htmlFor: "foo"
@@ -22,6 +25,7 @@ describe("getInputComponent", function () {
   });
   it("should return a <legend> element when passed a checkbox type", function () {
     var _render3 = render(/*#__PURE__*/React.createElement(FormFieldLabel, {
+        id: getLabelledById("foo"),
         fieldType: "checkbox",
         content: "Foo",
         htmlFor: "foo"

package/dist/esm/Form/FormField/index.js

@@ -10,7 +10,7 @@ import Tooltip from "../../Tooltip";
 import HelperMessage from "../HelperMessage";
 import Fieldset from "./components/Fieldset";
 import FormFieldLabel from "./components/FormFieldLabel";
-import { getDescribedById, getErrorMessageId, getInputComponent } from "./logic";
+import { getDescribedById, getErrorMessageId, getInputComponent, getLabelledById } from "./logic";
 import { IconWrapper } from "./styled";
 function FormField(_ref) {
   var label = _ref.label,
@@ -28,6 +28,7 @@ function FormField(_ref) {
   var Component = inputComponent.component;
   var ariaDescribedById = getDescribedById(id);
   var ariaErrorId = getErrorMessageId(id);
+  var ariaLabelledById = getLabelledById(id);
   return /*#__PURE__*/React.createElement(Fieldset, restProps, /*#__PURE__*/React.createElement(Stack, {
     spacing: "sm",
     direction: "horizontal",
@@ -38,6 +39,7 @@ function FormField(_ref) {
     fieldType: type,
     content: label,
     htmlFor: id,
+    id: ariaLabelledById,
     required: required,
     hasError: hasError
   })), infoTooltipContent && /*#__PURE__*/React.createElement(Box, {
@@ -54,7 +56,7 @@ function FormField(_ref) {
     onChange: onChange,
     value: value,
     id: id,
-    "aria-labelledby": id,
+    "aria-labelledby": ariaLabelledById,
     "aria-describedby": ariaDescribedById,
     "aria-required": required,
     "aria-errormessage": ariaErrorId,

package/dist/esm/Form/FormField/logic.js

@@ -8,4 +8,7 @@ export var getDescribedById = function getDescribedById(id) {
 };
 export var getErrorMessageId = function getErrorMessageId(id) {
   return "vitality-errorMessage-".concat(id);
+};
+export var getLabelledById = function getLabelledById(id) {
+  return "vitality-labelledBy-".concat(id);
 };

package/dist/esm/Form/Label/index.js

@@ -4,9 +4,11 @@ function Label(_ref) {
   var content = _ref.content,
     htmlFor = _ref.htmlFor,
     required = _ref.required,
-    hasError = _ref.hasError;
+    hasError = _ref.hasError,
+    id = _ref.id;
   return /*#__PURE__*/React.createElement(BaseLabel, {
-    htmlFor: htmlFor
+    htmlFor: htmlFor,
+    id: id
   }, content, required && /*#__PURE__*/React.createElement(BaseLabelRequired, {
     hasError: hasError
   }, "*"));