@transferwise/components 0.0.0-experimental-585dd19 → 0.0.0-experimental-81e9437

package/build/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n  as?: 'ul' | 'ol' | 'div';\n  className?: string;\n  children?: React.ReactNode;\n  style?: React.CSSProperties;\n  id?: string;\n  [key: `data-${string}`]: string | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;;;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,cAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,SAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,IAAI;AACxF;;;;"}
+{"version":3,"file":"List.js","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n  as?: 'ul' | 'ol' | 'div';\n  className?: string;\n  children?: React.ReactNode;\n  style?: React.CSSProperties;\n  id?: string;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;;;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,cAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,SAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,IAAI;AACxF;;;;"}

package/build/list/List.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.mjs","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n  as?: 'ul' | 'ol' | 'div';\n  className?: string;\n  children?: React.ReactNode;\n  style?: React.CSSProperties;\n  id?: string;\n  [key: `data-${string}`]: string | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,GAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,IAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,IAAI;AACxF;;;;"}
+{"version":3,"file":"List.mjs","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n  as?: 'ul' | 'ol' | 'div';\n  className?: string;\n  children?: React.ReactNode;\n  style?: React.CSSProperties;\n  id?: string;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,GAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,IAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,IAAI;AACxF;;;;"}

package/build/types/list/List.d.ts

@@ -5,7 +5,7 @@ export interface ListProps {
     children?: React.ReactNode;
     style?: React.CSSProperties;
     id?: string;
-    [key: `data-${string}`]: string | undefined;
+    [key: `data-${string}`]: string | number | boolean | undefined;
 }
 export default function List({ as: Element, className, ...props }: ListProps): React.JSX.Element;
 //# sourceMappingURL=List.d.ts.map

package/build/types/list/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/list/List.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7C;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,EAAE,EAAE,OAAc,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAElF"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/list/List.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CAChE;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,EAAE,EAAE,OAAc,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAElF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-585dd19",
+  "version": "0.0.0-experimental-81e9437",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -83,10 +83,10 @@
     "storybook": "^9.0.18",
     "storybook-addon-tag-badges": "^2.0.1",
     "storybook-addon-test-codegen": "^2.0.1",
-    "@wise/wds-configs": "0.0.0",
+    "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.24.5",
     "@wise/components-theming": "1.6.4",
-    "@transferwise/less-config": "3.1.2"
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.3",

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -29,21 +29,40 @@ export const Basic: Story = {
   },
 };
 
+/**
+ * The `indeterminate` state is predominantly visual and should match the [native HTML checkbox
+ * implementation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate).
+ * It is used to indicate a mixed state, where some but not all items are selected, but does not
+ * change the `checked` state of the input itself – it remains either checked or unchecked.
+ *
+ * In the example below the 1st checkbox is unchecked and the 2nd checkbox is checked.
+ */
 export const Indeterminate: Story = {
   args: {
-    'aria-label': 'Group checkbox with indeterminate state',
     indeterminate: true,
   },
   render: (args) => {
-    const [checked, setChecked] = useState<boolean | undefined>(undefined);
+    const [checked1, setChecked1] = useState<boolean | undefined>(false);
+    const [checked2, setChecked2] = useState<boolean | undefined>(true);
 
     return (
-      <CheckboxButton
-        {...args}
-        checked={false}
-        indeterminate={args.indeterminate}
-        onChange={() => setChecked(!checked)}
-      />
+      <>
+        <CheckboxButton
+          {...args}
+          checked={checked1}
+          indeterminate={args.indeterminate}
+          aria-label="Initially disabled checkbox with indeterminate state"
+          onChange={() => setChecked1((current) => !current)}
+        />
+
+        <CheckboxButton
+          {...args}
+          checked={checked2}
+          indeterminate={args.indeterminate}
+          aria-label="Initially enabled checkbox with indeterminate state"
+          onChange={() => setChecked2((current) => !current)}
+        />
+      </>
     );
   },
 };

package/src/list/List.tsx

@@ -7,7 +7,7 @@ export interface ListProps {
   children?: React.ReactNode;
   style?: React.CSSProperties;
   id?: string;
-  [key: `data-${string}`]: string | undefined;
+  [key: `data-${string}`]: string | number | boolean | undefined;
 }
 
 export default function List({ as: Element = 'ul', className, ...props }: ListProps) {