@transferwise/components 0.0.0-experimental-492a9d3 → 0.0.0-experimental-44a3fcb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-492a9d3",
+  "version": "0.0.0-experimental-44a3fcb",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -79,11 +79,11 @@
     "storybook": "^7.4.5",
     "@transferwise/less-config": "3.1.0",
     "@wise/components-theming": "0.8.4",
-    "@transferwise/neptune-css": "0.0.0-experimental-492a9d3"
+    "@transferwise/neptune-css": "14.9.3"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-492a9d3",
+    "@transferwise/neptune-css": "^14.9.3",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^0.8.4",
     "react": ">=16.14",

package/src/accordion/Accordion.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-accordion-item {
   display: block;
   width: 100%;

package/src/avatar/Avatar.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.tw-avatar {
   position: relative;
   border-radius: 50%;
@@ -38,6 +39,7 @@
   max-width: 100%;
 }.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
+  font-family: Arial, sans-serif;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }.tw-avatar.tw-avatar--initials,

package/src/card/Card.css

@@ -44,6 +44,13 @@
 [dir="rtl"] .np-card__button {
   text-align: right;
 }
+.np-theme-personal .np-card__button:focus {
+  outline: none;
+}
+.np-theme-personal .np-card__button:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-card__content {
   padding: 24px 16px;
   padding: var(--size-24) var(--size-16);

package/src/flowNavigation/FlowNavigation.css

@@ -13,9 +13,19 @@
   max-width: 1164px;
 }
 .np-flow-navigation__stepper {
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-bottom: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-right: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-right: 0 !important;
 }
 .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
   display: none;
@@ -27,11 +37,23 @@
   height: auto;
 }
 .np-flow-navigation--sm .np-flow-navigation__stepper {
+  min-height: 56px;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-right: 24px !important;
+  padding-right: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-left: 24px !important;
   padding-left: var(--size-24) !important;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-left: 24px !important;
+  padding-left: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-right: 24px !important;
   padding-right: var(--size-24) !important;
-  min-height: 56px;
 }
 .np-flow-navigation--lg .np-flow-navigation__stepper {
   max-width: 562px;

package/src/inputs/Input.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);

package/src/inputs/TextArea.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);

package/src/main.css

@@ -74,7 +74,9 @@ div.critical-comms .critical-comms-body {
     flex-wrap: wrap;
   }
 }
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {line-height: 1.5;line-height: var(--line-height-body);
+.tw-date-lookup-calendar > tbody > tr > td.weekend button {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);line-height: 1.5;line-height: var(--line-height-body);
 }
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
   font-size: 1rem;
@@ -86,6 +88,8 @@ div.critical-comms .critical-comms-body {
 }
 @media (min-width: 768px) {
 }
+@media (min-width: 768px) {
+}
 .np-accordion-item {
   display: block;
   width: 100%;
@@ -254,6 +258,7 @@ div.critical-comms .critical-comms-body {
 }
 .tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
+  font-family: Arial, sans-serif;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
@@ -592,6 +597,13 @@ div.critical-comms .critical-comms-body {
 [dir="rtl"] .np-card__button {
   text-align: right;
 }
+.np-theme-personal .np-card__button:focus {
+  outline: none;
+}
+.np-theme-personal .np-card__button:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-card__content {
   padding: 24px 16px;
   padding: var(--size-24) var(--size-16);
@@ -2030,9 +2042,19 @@ button.np-option {
   max-width: 1164px;
 }
 .np-flow-navigation__stepper {
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-bottom: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-right: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-right: 0 !important;
 }
 .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
   display: none;
@@ -2044,11 +2066,23 @@ button.np-option {
   height: auto;
 }
 .np-flow-navigation--sm .np-flow-navigation__stepper {
+  min-height: 56px;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-right: 24px !important;
+  padding-right: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-left: 24px !important;
   padding-left: var(--size-24) !important;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-left: 24px !important;
+  padding-left: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-right: 24px !important;
   padding-right: var(--size-24) !important;
-  min-height: 56px;
 }
 .np-flow-navigation--lg .np-flow-navigation__stepper {
   max-width: 562px;
@@ -3964,6 +3998,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   z-index: 1060;
 }
 [dir="rtl"] .snackbar {
+  right: 0;
   left: auto;
   left: initial;
 }
@@ -4605,6 +4640,104 @@ 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;
+  justify-content: center;
+  align-items: center;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  padding: 4px;
+  padding: var(--size-4);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  width: 100%;
+  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: "";
+  background: #ffffff;
+  background: var(--color-background-screen);
+  width: var(--segment-highlight-width);
+  position: absolute;
+  top: 4px;
+  top: var(--size-4);
+  bottom: 4px;
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
+  z-index: 0;
+  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%;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  min-height: 40px;
+  min-height: var(--size-40);
+  line-height: 40px;
+  line-height: var(--size-40);
+  margin: 0;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  z-index: 1;
+  cursor: pointer;
+  transition: font-weight 300ms, background 300ms;
+}
+.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 {
+  background: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  font: inherit;
+  padding: none;
+  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__selected-segment {
+  font-weight: 800;
+  font-weight: var(--font-weight-bold);
+}
+.segmented-control__label-text {
+  white-space: nowrap;
+  color: var(--color-interactive-primary);
+}
 .np-summary {
   min-width: 280px;
 }
@@ -4913,6 +5046,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   width: 100%;
 }
 .np-tile__description {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+  margin-top: 12px;
+  margin-top: var(--size-12);
   display: inline-block;
 }
 .np-tile--small.np-decision__tile--fixed-width {

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";

package/src/popover/Popover.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-theme-personal .np-popover__container {
   border-radius: 16px;
   border-radius: var(--radius-medium);

package/src/segmentedControl/SegmentedControl.css

@@ -0,0 +1,98 @@
+.segmented-control {
+  box-sizing: border-box;
+  --segment-highlight-width: 0;
+  --segment-highlight-x: var(--size-4);
+}
+.segmented-control__segments {
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  padding: 4px;
+  padding: var(--size-4);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  width: 100%;
+  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: "";
+  background: #ffffff;
+  background: var(--color-background-screen);
+  width: var(--segment-highlight-width);
+  position: absolute;
+  top: 4px;
+  top: var(--size-4);
+  bottom: 4px;
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
+  z-index: 0;
+  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%;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  min-height: 40px;
+  min-height: var(--size-40);
+  line-height: 40px;
+  line-height: var(--size-40);
+  margin: 0;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  z-index: 1;
+  cursor: pointer;
+  transition: font-weight 300ms, background 300ms;
+}
+.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 {
+  background: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  font: inherit;
+  padding: none;
+  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__selected-segment {
+  font-weight: 800;
+  font-weight: var(--font-weight-bold);
+}
+.segmented-control__label-text {
+  white-space: nowrap;
+  color: var(--color-interactive-primary);
+}

package/src/segmentedControl/SegmentedControl.less

@@ -0,0 +1,97 @@
+.segmented-control {
+  box-sizing: border-box;
+  --segment-highlight-width: 0;
+  --segment-highlight-x: var(--size-4);
+}
+
+.segmented-control__segments {
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  background: var(--color-background-neutral);
+  padding: var(--size-4);
+  border-radius: var(--size-24);
+  width: 100%;
+  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: "";
+  background: var(--color-background-screen);
+  width: var(--segment-highlight-width);
+  position: absolute;
+  top: var(--size-4);
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
+  z-index: 0;
+  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%;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  min-height: var(--size-40);
+  line-height: var(--size-40);
+  margin: 0;
+  border-radius: var(--size-24);
+  z-index: 1;
+  cursor: pointer;
+  transition: font-weight 300ms, background 300ms;
+}
+
+.segmented-control__segment:hover {
+  background: var(--color-background-overlay);
+}
+
+.segmented-control__radio-input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.segmented-control__button {
+  background: none;
+  appearance: none;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  font: inherit;
+  padding: none;
+  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__selected-segment {
+  font-weight: var(--font-weight-bold);
+}
+
+.segmented-control__label-text {
+  white-space: nowrap;
+  color: var(--color-interactive-primary);
+}

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -0,0 +1,50 @@
+import { StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { SegmentedControl } from './SegmentedControl';
+
+export default {
+  component: SegmentedControl,
+  title: 'Forms/SegmentedControl',
+};
+
+const segments = [
+  { label: 'Cupcakes', value: 'cupcakes' },
+  { label: 'Sponge cake', value: 'spongecake' },
+  { label: 'Carrot cake', value: 'carrotcake' },
+];
+
+const Template: StoryFn = (args) => {
+  const [selectedValue, setSelectedValue] = React.useState(segments[0].value);
+
+  return (
+    <div className="p-a-2">
+      <SegmentedControl
+        name="aRadioGroupName"
+        segments={segments}
+        {...(args.type === 'navigation'
+          ? { type: 'navigation', controls: 'aControlId' }
+          : { type: 'input' })}
+        defaultValue={selectedValue}
+        onChange={setSelectedValue}
+      />
+      <div className="m-a-2" id="aControlId">
+        <p>Selected value: {selectedValue}</p>
+      </div>
+    </div>
+  );
+};
+
+export const SegmentedControlDefault = {
+  render: Template,
+  args: {
+    type: 'input',
+  },
+};
+
+export const SegmentedControlNav = {
+  render: Template,
+  args: {
+    type: 'navigation',
+  },
+};