@transferwise/components 0.0.0-experimental-1b193a2 → 0.0.0-experimental-7ea22b3

package/build/dateLookup/dateTrigger/DateTrigger.js

@@ -57,6 +57,7 @@ const DateTrigger = ({
         })
       }) : /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",
+        id: ariaLabelIds[2],
         children: placeholder
       }), !onClear ? /*#__PURE__*/jsxRuntime.jsx(Chevron, {
         orientation: position.Position.BOTTOM,

package/build/dateLookup/dateTrigger/DateTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n  ariaLabelledBy?: string;\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  ariaLabelledBy,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n  const valueIdPrefix = useId();\n  const overlayId = useContext(OverlayIdContext);\n  const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && (\n          <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n            {label}\n          </Body>\n        )}\n        {selectedDate ? (\n          <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </Body>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":"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"}
+{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n  ariaLabelledBy?: string;\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  ariaLabelledBy,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n  const valueIdPrefix = useId();\n  const overlayId = useContext(OverlayIdContext);\n  const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && (\n          <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n            {label}\n          </Body>\n        )}\n        {selectedDate ? (\n          <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </Body>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n            id={ariaLabelIds[2]}\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":"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"}

package/build/dateLookup/dateTrigger/DateTrigger.mjs

@@ -55,6 +55,7 @@ const DateTrigger = ({
         })
       }) : /*#__PURE__*/jsx("span", {
         className: "form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",
+        id: ariaLabelIds[2],
         children: placeholder
       }), !onClear ? /*#__PURE__*/jsx(Chevron, {
         orientation: Position.BOTTOM,

package/build/dateLookup/dateTrigger/DateTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n  ariaLabelledBy?: string;\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  ariaLabelledBy,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n  const valueIdPrefix = useId();\n  const overlayId = useContext(OverlayIdContext);\n  const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && (\n          <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n            {label}\n          </Body>\n        )}\n        {selectedDate ? (\n          <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </Body>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":"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"}
+{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n  ariaLabelledBy?: string;\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  ariaLabelledBy,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n  const valueIdPrefix = useId();\n  const overlayId = useContext(OverlayIdContext);\n  const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && (\n          <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n            {label}\n          </Body>\n        )}\n        {selectedDate ? (\n          <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </Body>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n            id={ariaLabelIds[2]}\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":"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"}

package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTrigger.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,SAAS,EAAE,UAAU,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAQ5F,UAAU,gBAAgB;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DateTrigger.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,SAAS,EAAE,UAAU,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAQ5F,UAAU,gBAAgB;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-1b193a2",
+  "version": "0.0.0-experimental-7ea22b3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,9 +91,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/neptune-css": "14.19.1",
+    "@transferwise/less-config": "3.1.0",
     "@wise/components-theming": "1.6.1",
-    "@transferwise/less-config": "3.1.0"
+    "@transferwise/neptune-css": "14.19.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/dateLookup/DateLookup.story.tsx

@@ -66,7 +66,7 @@ export const WithField = () => {
   const disabled = boolean('disabled', false);
   const label = text('label', 'label');
   const monthFormat = select('monthFormat', ['long', 'short'], 'long');
-  const placeholder = text('placeholder', 'placeholder');
+  const placeholder = text('placeholder', 'Select date');
   const id = text('id', 'date-lookup');
 
   const clearable = boolean('clearable', true);

package/src/dateLookup/DateLookup.testingLibrary.spec.js

@@ -23,7 +23,7 @@ describe('DateLookup (events)', () => {
     /** @type {jest.Mock} */
     let handleChange;
 
-    const setup = async () => {
+    const setup = async (overrides = {}) => {
       handleChange = jest.fn();
 
       /** @type {import('@testing-library/react').RenderResult} */
@@ -38,13 +38,14 @@ describe('DateLookup (events)', () => {
               min={min}
               max={max}
               size="lg"
-              placeholder="Asd.."
+              placeholder="Select date"
               label="label"
               aria-labelledby="prioritized-label"
               disabled={false}
               clearable={false}
               onChange={handleChange}
               onClick={jest.fn()}
+              {...overrides}
             />
           </>,
         );
@@ -159,6 +160,14 @@ describe('DateLookup (events)', () => {
       ).toBeInTheDocument();
       await closeDateLookup(view);
     });
+
+    it('reads our the HTML label as well as the input prefix and the placeholder', async () => {
+      const view = await setup({ value: undefined });
+      expect(
+        screen.getByRole('button', { name: 'Prioritized label label Select date' }),
+      ).toBeInTheDocument();
+      await closeDateLookup(view);
+    });
   });
 
   describe('when is clearable', () => {

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -67,6 +67,7 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
           <span
             className="form-control-placeholder visible-xs-inline visible-sm-inline
                        visible-md-inline visible-lg-inline visible-xl-inline"
+            id={ariaLabelIds[2]}
           >
             {placeholder}
           </span>