@bbl-digital/snorre 4.0.22 → 4.0.23

package/lib/core/Input/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
-export interface InputProps {
+export interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
     /** Input type */
     type?: 'text' | 'search' | 'number' | 'password' | 'file';
     /** Input label */

package/lib/core/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAUvC,MAAM,WAAW,UAAU;IACzB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAA;IACzD,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxD,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,gBAAgB;IAChB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IACtC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IACnD,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,oBAAY,GAAG,GAAG,gBAAgB,CAAA;AAElC,QAAA,MAAM,KAAK,qFA2HV,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAUvC,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxE,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAA;IACzD,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxD,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,gBAAgB;IAChB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IACtC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IACnD,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,oBAAY,GAAG,GAAG,gBAAgB,CAAA;AAElC,QAAA,MAAM,KAAK,qFAiIV,CAAA;AAED,eAAe,KAAK,CAAA"}

package/lib/core/Input/index.js

@@ -62,12 +62,14 @@ const Input = /*#__PURE__*/React.forwardRef(({
   return _jsxs("div", {
     css: styles.relative,
     children: [_jsxs("label", {
+      htmlFor: props.id,
       css: theme => [styles.default(theme), props.highlight && styles.highligted(height), type === 'search' && styles.searchLabel(theme), (props.invalid || props.invalidMessage) && styles.invalid(theme), height && styles.height(height)],
       className: className,
       children: [props.label && _jsx("span", {
         css: info && styles.pr4,
         children: props.label
       }), _jsx("input", {
+        id: props.id,
         type: type,
         ...(type !== 'password' && {
           value
@@ -81,6 +83,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
         maxLength: maxlength,
         ref: ref,
         name: props.name,
+        "aria-describedby": props.invalidMessage ? 'input-error-message' : undefined,
         css: theme => [type === 'text' && styles.text(theme), type === 'search' && styles.search(theme), type === 'password' && styles.password(theme), type === 'number' && styles.number(theme), props.disabled && styles.disabled(theme), cardInput && styles.cardInput(theme)],
         children: React.Children.map(props.children, child => {
           if (!child) {
@@ -91,6 +94,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
       }), type === 'search' && _jsx(IconSearch, {}), props.invalidMessage && _jsx(IconErrorOutline, {
         size: "16px"
       }), props.invalidMessage && _jsx("span", {
+        id: "input-error-message",
         css: theme => [styles.errorMessage(theme), !props?.label && styles.errorMessageNoLabel],
         children: props.invalidMessage
       })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "4.0.22",
+  "version": "4.0.23",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",