@transferwise/components 46.7.0 → 46.8.0

package/build/main.css

@@ -4629,6 +4629,107 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
   box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
 }
+.segmented-control {
+  box-sizing: border-box;
+  --segment-highlight-width: 0;
+  --segment-highlight-x: var(--size-4);
+}
+.segmented-control__segments {
+  display: inline-flex;
+  position: relative;
+  padding: 4px;
+  padding: var(--size-4);
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: outline 300ms;
+  outline: 2px solid transparent;
+}
+.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
+  outline: 2px solid var(--color-interactive-primary);
+}
+.segmented-control__segments::after {
+  content: "";
+  position: absolute;
+  width: var(--segment-highlight-width);
+  top: 4px;
+  top: var(--size-4);
+  bottom: 4px;
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
+  z-index: 0;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: left 300ms;
+}
+.segmented-control__segments--no-animate::after {
+  transition: none !important;
+}
+.segmented-control__segment {
+  position: relative;
+  flex: 1 1 100%;
+  flex-flow: column;
+  padding: 8px 16px;
+  padding: var(--size-8) var(--size-16);
+  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--size-4);
+  min-width: 0;
+  line-height: inherit;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  z-index: 1;
+  cursor: pointer;
+  transition: background 300ms;
+  color: var(--color-interactive-primary);
+}
+.segmented-control__segment:first-child {
+  margin-left: 0;
+}
+.segmented-control__segment:hover {
+  background: rgba(0,0,0,0.10196);
+  background: var(--color-background-overlay);
+}
+.segmented-control__radio-input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+.segmented-control__button {
+  width: 100%;
+  height: 100%;
+  background: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  outline: none;
+  font: inherit;
+  outline: 2px solid transparent;
+}
+.segmented-control__button:focus {
+  outline-offset: 0px;
+}
+.segmented-control__button:focus-visible {
+  outline-color: var(--color-interactive-primary);
+}
+.segmented-control__selected-segment:hover {
+  background: transparent;
+}
+.segmented-control__text {
+  word-wrap: break-word;
+  word-break: break-word;
+  color: var(--color-interactive-primary);
+  transition: font-weight 300ms;
+}
 .np-summary {
   min-width: 280px;
 }

package/build/styles/main.css

@@ -4629,6 +4629,107 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
   box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
 }
+.segmented-control {
+  box-sizing: border-box;
+  --segment-highlight-width: 0;
+  --segment-highlight-x: var(--size-4);
+}
+.segmented-control__segments {
+  display: inline-flex;
+  position: relative;
+  padding: 4px;
+  padding: var(--size-4);
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: outline 300ms;
+  outline: 2px solid transparent;
+}
+.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
+  outline: 2px solid var(--color-interactive-primary);
+}
+.segmented-control__segments::after {
+  content: "";
+  position: absolute;
+  width: var(--segment-highlight-width);
+  top: 4px;
+  top: var(--size-4);
+  bottom: 4px;
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
+  z-index: 0;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: left 300ms;
+}
+.segmented-control__segments--no-animate::after {
+  transition: none !important;
+}
+.segmented-control__segment {
+  position: relative;
+  flex: 1 1 100%;
+  flex-flow: column;
+  padding: 8px 16px;
+  padding: var(--size-8) var(--size-16);
+  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--size-4);
+  min-width: 0;
+  line-height: inherit;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  z-index: 1;
+  cursor: pointer;
+  transition: background 300ms;
+  color: var(--color-interactive-primary);
+}
+.segmented-control__segment:first-child {
+  margin-left: 0;
+}
+.segmented-control__segment:hover {
+  background: rgba(0,0,0,0.10196);
+  background: var(--color-background-overlay);
+}
+.segmented-control__radio-input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+.segmented-control__button {
+  width: 100%;
+  height: 100%;
+  background: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  outline: none;
+  font: inherit;
+  outline: 2px solid transparent;
+}
+.segmented-control__button:focus {
+  outline-offset: 0px;
+}
+.segmented-control__button:focus-visible {
+  outline-color: var(--color-interactive-primary);
+}
+.segmented-control__selected-segment:hover {
+  background: transparent;
+}
+.segmented-control__text {
+  word-wrap: break-word;
+  word-break: break-word;
+  color: var(--color-interactive-primary);
+  transition: font-weight 300ms;
+}
 .np-summary {
   min-width: 280px;
 }

package/build/styles/segmentedControl/SegmentedControl.css

@@ -0,0 +1,101 @@
+.segmented-control {
+  box-sizing: border-box;
+  --segment-highlight-width: 0;
+  --segment-highlight-x: var(--size-4);
+}
+.segmented-control__segments {
+  display: inline-flex;
+  position: relative;
+  padding: 4px;
+  padding: var(--size-4);
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: outline 300ms;
+  outline: 2px solid transparent;
+}
+.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
+  outline: 2px solid var(--color-interactive-primary);
+}
+.segmented-control__segments::after {
+  content: "";
+  position: absolute;
+  width: var(--segment-highlight-width);
+  top: 4px;
+  top: var(--size-4);
+  bottom: 4px;
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
+  z-index: 0;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: left 300ms;
+}
+.segmented-control__segments--no-animate::after {
+  transition: none !important;
+}
+.segmented-control__segment {
+  position: relative;
+  flex: 1 1 100%;
+  flex-flow: column;
+  padding: 8px 16px;
+  padding: var(--size-8) var(--size-16);
+  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--size-4);
+  min-width: 0;
+  line-height: inherit;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  z-index: 1;
+  cursor: pointer;
+  transition: background 300ms;
+  color: var(--color-interactive-primary);
+}
+.segmented-control__segment:first-child {
+  margin-left: 0;
+}
+.segmented-control__segment:hover {
+  background: rgba(0,0,0,0.10196);
+  background: var(--color-background-overlay);
+}
+.segmented-control__radio-input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+.segmented-control__button {
+  width: 100%;
+  height: 100%;
+  background: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  outline: none;
+  font: inherit;
+  outline: 2px solid transparent;
+}
+.segmented-control__button:focus {
+  outline-offset: 0px;
+}
+.segmented-control__button:focus-visible {
+  outline-color: var(--color-interactive-primary);
+}
+.segmented-control__selected-segment:hover {
+  background: transparent;
+}
+.segmented-control__text {
+  word-wrap: break-word;
+  word-break: break-word;
+  color: var(--color-interactive-primary);
+  transition: font-weight 300ms;
+}

package/build/types/index.d.ts

@@ -13,6 +13,7 @@ export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/ty
 export type { ModalProps } from './modal';
 export type { CurrencyHeaderItem, CurrencyItem, CurrencyOptionItem, MoneyInputProps, } from './moneyInput';
 export type { LayoutDirection, TypographyTypes, TitleTypes, BodyTypes, LinkTypes, DisplayTypes, } from './common';
+export type { SegmentedControlProps } from './segmentedControl';
 /**
  * Components
  */
@@ -82,6 +83,7 @@ export { default as RadioGroup } from './radioGroup';
 export { default as RadioOption } from './radioOption';
 export { default as Section } from './section';
 export { default as Select } from './select';
+export { default as SegmentedControl } from './segmentedControl';
 export { default as SlidingPanel } from './slidingPanel';
 export { default as SnackbarPortal } from './snackbar/Snackbar';
 export { default as SnackbarProvider } from './snackbar/SnackbarProvider';

package/build/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/build/types/segmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+type SegmentBase = {
+    id: string;
+    label: string;
+    value: string;
+};
+type Segment = SegmentBase & {
+    controls?: never;
+};
+type SegmentWithControls = SegmentBase & {
+    controls: string;
+};
+export type Segments = Segment[] | SegmentWithControls[];
+type SegmentedControlPropsBase = {
+    name: string;
+    defaultValue: string;
+    mode: 'input' | 'view';
+    onChange: (value: string) => void;
+};
+type SegmentedControlViewProps = {
+    mode: 'view';
+    segments: SegmentWithControls[];
+};
+type SegmentedControlInputProps = {
+    mode: 'input';
+    segments: Segment[];
+};
+export type SegmentedControlProps = SegmentedControlPropsBase & (SegmentedControlViewProps | SegmentedControlInputProps);
+declare const SegmentedControl: ({ name, defaultValue, mode, segments, onChange, }: SegmentedControlProps) => import("react").JSX.Element;
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/build/types/segmentedControl/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,OAAO,EAAE,GAAG,mBAAmB,EAAE,CAAC;AAEzD,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,mBAAmB,EAAE,CAAC;CACjC,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,sDAMnB,qBAAqB,gCAqIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build/types/segmentedControl/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SegmentedControl';
+export { default } from './SegmentedControl';
+//# sourceMappingURL=index.d.ts.map

package/build/types/segmentedControl/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.7.0",
+  "version": "46.8.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -21,7 +21,7 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@babel/core": "^7.22.15",
+    "@babel/core": "^7.23.9",
     "@babel/plugin-transform-runtime": "^7.22.15",
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
@@ -53,7 +53,7 @@
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-tokens": "^8.8.0",
+    "@transferwise/neptune-tokens": "^8.8.1",
     "@tsconfig/recommended": "^1.0.2",
     "@types/babel__core": "^7.20.1",
     "@types/jest": "^26.0.20",
@@ -65,24 +65,23 @@
     "@types/use-sync-external-store": "^0.0.4",
     "@wise/art": "^2.7.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "babel-plugin-formatjs": "^10.5.3",
+    "babel-plugin-formatjs": "^10.5.13",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "enzyme": "^3.11.0",
     "jest": "^27.0.6",
     "jest-cli": "^27.0.6",
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
-    "npm-watch": "^0.11.0",
     "react-intl": "^5.10.0",
     "rollup": "^3.28.1",
     "storybook": "^7.4.5",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.9.4",
+    "@transferwise/neptune-css": "14.9.5",
     "@wise/components-theming": "0.8.4"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "^14.9.4",
+    "@transferwise/neptune-css": "^14.9.5",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^0.8.4",
     "react": ">=16.14",
@@ -118,21 +117,13 @@
     "react-transition-group": "^4.4.2",
     "use-sync-external-store": "^1.2.0"
   },
-  "watch": {
-    "build:crowdin-source-file": "src/**/*.messages.js"
-  },
-  "resolutions": {
-    "**/remark-parse/trim": "0.0.3",
-    "**/chokidar/glob-parent": "5.1.2",
-    "**/fast-glob/glob-parent": "5.1.2"
-  },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "dev": "npm-run-all --parallel dev:* dev:*:* storybook:dev",
     "dev:less:watch": "gulp watchLess --dest=src",
-    "dev:translations": "npx npm-watch",
+    "dev:translations": "pnpm build:crowdin-source-file",
     "storybook:dev": "storybook dev -p 3001",
     "storybook:build": "storybook build --webpack-stats-json",
     "build:css": "gulp compileLess --dest=src",

package/src/index.ts

@@ -33,6 +33,7 @@ export type {
   LinkTypes,
   DisplayTypes,
 } from './common';
+export type { SegmentedControlProps } from './segmentedControl';
 
 /**
  * Components
@@ -107,6 +108,7 @@ export { default as RadioGroup } from './radioGroup';
 export { default as RadioOption } from './radioOption';
 export { default as Section } from './section';
 export { default as Select } from './select';
+export { default as SegmentedControl } from './segmentedControl';
 export { default as SlidingPanel } from './slidingPanel';
 export { default as SnackbarPortal } from './snackbar/Snackbar';
 export { default as SnackbarProvider } from './snackbar/SnackbarProvider';

package/src/main.css

@@ -4629,6 +4629,107 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
   box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
 }
+.segmented-control {
+  box-sizing: border-box;
+  --segment-highlight-width: 0;
+  --segment-highlight-x: var(--size-4);
+}
+.segmented-control__segments {
+  display: inline-flex;
+  position: relative;
+  padding: 4px;
+  padding: var(--size-4);
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: outline 300ms;
+  outline: 2px solid transparent;
+}
+.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
+  outline: 2px solid var(--color-interactive-primary);
+}
+.segmented-control__segments::after {
+  content: "";
+  position: absolute;
+  width: var(--segment-highlight-width);
+  top: 4px;
+  top: var(--size-4);
+  bottom: 4px;
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
+  z-index: 0;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: left 300ms;
+}
+.segmented-control__segments--no-animate::after {
+  transition: none !important;
+}
+.segmented-control__segment {
+  position: relative;
+  flex: 1 1 100%;
+  flex-flow: column;
+  padding: 8px 16px;
+  padding: var(--size-8) var(--size-16);
+  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--size-4);
+  min-width: 0;
+  line-height: inherit;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  z-index: 1;
+  cursor: pointer;
+  transition: background 300ms;
+  color: var(--color-interactive-primary);
+}
+.segmented-control__segment:first-child {
+  margin-left: 0;
+}
+.segmented-control__segment:hover {
+  background: rgba(0,0,0,0.10196);
+  background: var(--color-background-overlay);
+}
+.segmented-control__radio-input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+.segmented-control__button {
+  width: 100%;
+  height: 100%;
+  background: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  outline: none;
+  font: inherit;
+  outline: 2px solid transparent;
+}
+.segmented-control__button:focus {
+  outline-offset: 0px;
+}
+.segmented-control__button:focus-visible {
+  outline-color: var(--color-interactive-primary);
+}
+.segmented-control__selected-segment:hover {
+  background: transparent;
+}
+.segmented-control__text {
+  word-wrap: break-word;
+  word-break: break-word;
+  color: var(--color-interactive-primary);
+  transition: font-weight 300ms;
+}
 .np-summary {
   min-width: 280px;
 }

package/src/main.less

@@ -53,6 +53,7 @@
 @import "./statusIcon/StatusIcon.less";
 @import "./stepper/Stepper.less";
 @import "./select/Select.less";
+@import "./segmentedControl/SegmentedControl.less";
 @import "./summary/Summary.less";
 @import "./switch/Switch.less";
 @import "./tabs/Tabs.less";