@transferwise/components 0.0.0-experimental-545dd0a → 0.0.0-experimental-2ea2303

package/src/listItem/Prompt/ListItemPrompt.story.tsx

@@ -3,7 +3,7 @@ import { action } from 'storybook/actions';
 import { lorem10, lorem5 } from '../../test-utils';
 import Link from '../../link';
 import { Sentiment as Sentiments } from '../../common';
-import { List, ListItem } from '../..';
+import { ListItem } from '../..';
 import { Prompt, ListItemPromptProps } from './ListItemPrompt';
 import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
@@ -74,7 +74,7 @@ export const Sentiment: Story = {
     knobs: { disable: true },
   },
   render: (args) => (
-    <List as="ol">
+    <ol className="list-unstyled">
       <ListItem
         title={lorem5}
         subtitle={lorem10}
@@ -103,7 +103,7 @@ export const Sentiment: Story = {
         control={CONTROLS.switch}
         prompt={<Prompt sentiment={Sentiments.NEGATIVE}>This is a negative prompt.</Prompt>}
       />
-    </List>
+    </ol>
   ),
 };
 
@@ -122,7 +122,7 @@ export const Interactivity: Story = {
     },
   },
   render: (args) => (
-    <List as="ol">
+    <ol className="list-unstyled">
       <ListItem
         title={lorem5}
         subtitle={lorem10}
@@ -154,7 +154,7 @@ export const Interactivity: Story = {
           </Prompt>
         }
       />
-    </List>
+    </ol>
   ),
 };
 
@@ -172,7 +172,7 @@ export const Sizing: Story = {
     },
   },
   render: (args) => (
-    <List as="ol">
+    <ol className="list-unstyled">
       <ListItem
         title={lorem5}
         subtitle={lorem10}
@@ -196,6 +196,6 @@ export const Sizing: Story = {
           </ListItem.Prompt>
         }
       />
-    </List>
+    </ol>
   ),
 };

package/src/listItem/Switch/ListItemSwitch.story.tsx

@@ -8,7 +8,6 @@ import {
 import type { ListItemSwitchProps } from './ListItemSwitch';
 import { fn } from 'storybook/test';
 import { lorem10, lorem5 } from '../../test-utils';
-import { List } from '../List';
 
 const meta: Meta<ListItemSwitchProps> = {
   component: ListItem.Switch,
@@ -51,7 +50,7 @@ export const Playground: Story = {
 export const States: Story = {
   render: (args) => {
     return (
-      <List as="ol">
+      <ol className="list-unstyled">
         <ListItem
           title={lorem5}
           subtitle={lorem10}
@@ -64,7 +63,7 @@ export const States: Story = {
           media={MEDIA.avatarSingle}
           control={<ListItem.Switch {...args} />}
         />
-      </List>
+      </ol>
     );
   },
 };

package/src/listItem/_stories/ListItem.story.tsx

@@ -10,7 +10,6 @@ import {
   SB_LIST_ITEM_PROMPTS as PROMPTS,
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from './subcomponents';
-import { List } from '../List';
 
 /**
  * List Items let users review or select options from a dynamic list.<br />
@@ -243,9 +242,9 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
     const [props, previewProps] = getPropsForPreview(args);
 
     return (
-      <List key={args.disabled ? 'disabled' : 'enabled'} as="ol">
+      <ol key={args.disabled ? 'disabled' : 'enabled'} className="list-unstyled">
         <ListItem {...props} {...previewProps} />
-      </List>
+      </ol>
     );
   },
   argTypes: previewArgTypes,

package/src/listItem/_stories/ListItem.variants.test.story.tsx

@@ -9,7 +9,6 @@ import {
   SB_LIST_ITEM_PROMPTS as PROMPTS,
   type SB_ListItem_ControlType as ControlType,
 } from './subcomponents';
-import { List } from '../List';
 
 export default {
   component: ListItem,
@@ -144,7 +143,7 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
   return storyConfig(
     {
       render: () => (
-        <List as="ol">
+        <ol className="list-unstyled">
           {variants.map((variant, variantIndex) => (
             <ListItem
               key={`${controlType}-${variantIndex}-${Math.random()}`}
@@ -152,7 +151,7 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
               {...variant}
             />
           ))}
-        </List>
+        </ol>
       ),
     },
     { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
@@ -178,7 +177,7 @@ export const Switch = generateVariantsForControl('switch');
 
 export const ButtonControlLabel: Story = {
   render: () => (
-    <List as="ol">
+    <ol className="list-unstyled">
       <ListItem
         title="Fully interactive button."
         subtitle="It uses default content hierarchy."
@@ -262,6 +261,6 @@ export const ButtonControlLabel: Story = {
         control={CONTROLS.buttonAsLink}
         prompt={PROMPTS.nonInteractive}
       />
-    </List>
+    </ol>
   ),
 };

package/src/listItem/index.ts

@@ -12,6 +12,3 @@ export type { ListItemRadioProps } from './Radio';
 export type { ListItemSwitchProps } from './Switch';
 
 export { default } from './ListItem';
-
-export { List } from './List';
-export type { ListProps } from './List';

package/src/main.css

@@ -3181,8 +3181,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-spotlight-inactive {
   background-color: rgba(134, 167, 189, 0.025);
-  border: 1px dashed rgba(0,0,0,0.10196);
-  border: 1px dashed var(--color-border-neutral);
 }
 @supports (color: color-mix(in lch, red, blue)) {
 .wds-list-item-spotlight-inactive {
@@ -3195,6 +3193,34 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
   background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
 }
+.wds-list-item .wds-list-item-spotlight__border {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.wds-list-item .wds-list-item-spotlight__border rect {
+  --wds-list-item-spotlight-borderWidth: 1px;
+  --wds-list-item-spotlight-borderWidthOffset: 0.5px;
+  --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * 0.5);
+  fill: none;
+  stroke: rgba(0,0,0,0.10196);
+  stroke: var(--color-border-neutral);
+  width: calc(100% - 1px);
+  width: calc(100% - var(--wds-list-item-spotlight-borderWidth));
+  height: calc(100% - 1px);
+  height: calc(100% - var(--wds-list-item-spotlight-borderWidth));
+  x: 0.5px;
+  x: var(--wds-list-item-spotlight-borderWidthOffset);
+  y: 0.5px;
+  y: var(--wds-list-item-spotlight-borderWidthOffset);
+  rx: calc(16px - 0.5px);
+  rx: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
+  ry: calc(16px - 0.5px);
+  ry: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
+  stroke-dasharray: calc(12px * 0.5) calc(12px * 0.5);
+  stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
+}
 .wds-list-item-prompt {
   grid-area: prompt;
   display: inline-flex;

package/build/listItem/List.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.js","sources":["../../src/listItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n  as?: 'ul' | 'ol';\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function List({ as: Element = 'ul', className, children }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', className)}>{children}</Element>;\n}\n"],"names":["List","as","Element","className","children","_jsx","clsx"],"mappings":";;;;;AAQM,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;AAAEC,EAAAA;AAAQ,CAAa,EAAA;EACzE,oBAAOC,cAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,SAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAAU,CAAC;AAC/F;;;;"}

package/build/listItem/List.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.mjs","sources":["../../src/listItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n  as?: 'ul' | 'ol';\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function List({ as: Element = 'ul', className, children }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', className)}>{children}</Element>;\n}\n"],"names":["List","as","Element","className","children","_jsx","clsx"],"mappings":";;;AAQM,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;AAAEC,EAAAA;AAAQ,CAAa,EAAA;EACzE,oBAAOC,GAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,IAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAAU,CAAC;AAC/F;;;;"}

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

@@ -1,7 +0,0 @@
-export interface ListProps {
-    as?: 'ul' | 'ol';
-    className?: string;
-    children?: React.ReactNode;
-}
-export declare function List({ as: Element, className, children }: ListProps): import("react").JSX.Element;
-//# sourceMappingURL=List.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/listItem/List.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,SAAS;IACxB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,EAAE,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,SAAS,+BAE1E"}

package/src/listItem/List.tsx

@@ -1,11 +0,0 @@
-import { clsx } from 'clsx';
-
-export interface ListProps {
-  as?: 'ul' | 'ol';
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export function List({ as: Element = 'ul', className, children }: ListProps) {
-  return <Element className={clsx('wds-list', 'list-unstyled', className)}>{children}</Element>;
-}