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

package/src/segmentedControl/SegmentedControl.tsx

@@ -0,0 +1,138 @@
+import classNames from 'classnames';
+import { createRef, useEffect, useRef, useState } from 'react';
+
+type SegmentedControlPropsBase = {
+  name: string;
+  defaultValue: string;
+  type: 'input' | 'navigation';
+  segments: { label: string; value: string }[];
+  onChange: (value: string) => void;
+};
+
+type SegmentedControlNavigationProps = {
+  type: 'navigation';
+  controls: string;
+};
+
+type SegmentedControlInputProps = {
+  type: 'input';
+  controls?: never;
+};
+
+export type SegmentedControlProps = SegmentedControlPropsBase &
+  (SegmentedControlNavigationProps | SegmentedControlInputProps);
+
+export const SegmentedControl = ({
+  name,
+  defaultValue,
+  type,
+  segments,
+  controls,
+  onChange,
+}: SegmentedControlProps) => {
+  const [selectedValue, setSelectedValue] = useState(defaultValue || segments[0].value);
+  const [animate, setAnimate] = useState(false);
+
+  const segmentsRef = useRef<HTMLDivElement>(null);
+
+  const segmentsWithRefs = segments.map((segment) => ({
+    ...segment,
+    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),
+  }));
+
+  const updateSegmentPosition = () => {
+    const selectedSegmentRef = segmentsWithRefs.find(
+      (segment) => segment.value === selectedValue,
+    )?.ref;
+
+    // We grab the active segments style object from the ref
+    // and set the css variables to the selected segments width and x position.
+    // This is so we can animate the highlight to the selected segment
+    if (selectedSegmentRef?.current && segmentsRef.current) {
+      const { style } = segmentsRef.current;
+      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+    }
+  };
+
+  useEffect(() => {
+    updateSegmentPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [segmentsWithRefs, selectedValue]);
+
+  useEffect(() => {
+    const handleWindowSizeChange = () => {
+      setAnimate(false);
+      updateSegmentPosition();
+    };
+
+    window.addEventListener('resize', handleWindowSizeChange);
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange);
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    onChange(selectedValue);
+  }, [onChange, selectedValue]);
+
+  return (
+    <div
+      ref={segmentsRef}
+      className={classNames('segmented-control', {
+        'segmented-control--input': type === 'input',
+      })}
+    >
+      <div
+        className={classNames('segmented-control__segments', {
+          'segmented-control__segments--no-animate': !animate,
+        })}
+      >
+        {segmentsWithRefs.map((segment) =>
+          type === 'input' ? (
+            <label
+              ref={segment.ref as React.RefObject<HTMLLabelElement>}
+              key={segment.value}
+              className={classNames('segmented-control__segment', {
+                'segmented-control__selected-segment': selectedValue === segment.value,
+              })}
+              htmlFor={segment.value}
+            >
+              <input
+                type="radio"
+                className="segmented-control__radio-input"
+                id={segment.value}
+                name={name}
+                value={segment.value}
+                checked={selectedValue === segment.value}
+                onChange={() => {
+                  setAnimate(true);
+                  setSelectedValue(segment.value);
+                }}
+              />
+              <div className="segmented-control__label-text">{segment.label}</div>
+            </label>
+          ) : (
+            <button
+              ref={segment.ref as React.RefObject<HTMLButtonElement>}
+              key={segment.value}
+              type="button"
+              aria-controls={controls}
+              className={classNames('segmented-control__segment', 'segmented-control__button', {
+                'segmented-control__selected-segment': selectedValue === segment.value,
+              })}
+              onClick={() => {
+                setAnimate(true);
+                setSelectedValue(segment.value);
+              }}
+            >
+              {segment.label}
+            </button>
+          ),
+        )}
+      </div>
+    </div>
+  );
+};

package/src/select/Select.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/src/snackbar/Snackbar.css

@@ -7,6 +7,7 @@
   z-index: 1060;
 }
 [dir="rtl"] .snackbar {
+  right: 0;
   left: auto;
   left: initial;
 }

package/src/tile/Tile.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-tile {
   min-width: 120px;
   border-radius: 10px;
@@ -27,6 +28,10 @@
 }.np-tile__media {
   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 {
   width: 260px;