@oanda/labs-widget-common 1.0.203 → 1.0.205

package/src/components/TimeUnitSwitch/TimeUnitSwitch.tsx

@@ -0,0 +1,67 @@
+import { useLocale } from '@oanda/mono-i18n';
+import React from 'react';
+
+import { useLayoutProvider } from '../../providers';
+import { Size } from '../../types';
+import { Button, ButtonSize, ButtonVariant } from '../Button';
+import { TimeUnitSelect } from './TimeUnitSelect';
+import type { TimeUnitSwitchProps } from './types';
+
+const TimeUnitSwitch = <T extends string>({
+  selected,
+  options,
+  callback,
+  tooltipId,
+}: TimeUnitSwitchProps<T>) => {
+  const { lang } = useLocale();
+  const { size } = useLayoutProvider();
+  const isDesktop = size === Size.DESKTOP;
+
+  const handleButtonClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {
+    callback(e.currentTarget.value as T);
+  };
+
+  return (
+    <>
+      {isDesktop ? (
+        <div
+          className="lw-mb-6 lw-flex lw-gap-1 lw-self-end"
+          data-testid="time-unit-switch"
+        >
+          {options.map(({ value, label, tooltipLabel }) => {
+            const tooltip = tooltipLabel
+              ? lang(tooltipLabel.translationKey, { count: tooltipLabel.count })
+              : tooltipLabel;
+            const buttonLabel = lang(label);
+
+            return (
+              <Button
+                key={value}
+                data-tooltip-content={tooltip}
+                data-tooltip-id={tooltipId}
+                size={ButtonSize.full}
+                value={value}
+                variant={
+                  selected === value
+                    ? ButtonVariant.primary
+                    : ButtonVariant.secondary
+                }
+                onClick={handleButtonClick}
+              >
+                {buttonLabel}
+              </Button>
+            );
+          })}
+        </div>
+      ) : (
+        <TimeUnitSelect
+          callback={callback}
+          options={options}
+          selected={selected}
+        />
+      )}
+    </>
+  );
+};
+
+export { TimeUnitSwitch };

package/src/components/TimeUnitSwitch/index.ts

@@ -0,0 +1 @@
+export * from './TimeUnitSwitch';

package/src/components/TimeUnitSwitch/types.ts

@@ -0,0 +1,17 @@
+export interface TimeUnitOption<TimeUnit> {
+  value: TimeUnit;
+  label: string;
+  tooltipLabel?: TooltipLabel;
+}
+
+export interface TimeUnitSwitchProps<TimeUnit> {
+  selected: TimeUnit;
+  options: TimeUnitOption<TimeUnit>[];
+  callback: (value: TimeUnit) => void;
+  tooltipId?: string;
+}
+
+interface TooltipLabel {
+  translationKey: string;
+  count: number;
+}

package/src/components/index.ts

@@ -22,6 +22,7 @@ export * from './Table';
 export * from './TableWidget';
 export * from './Tabs';
 export * from './TextInput';
+export * from './TimeUnitSwitch';
 export * from './Tooltip';
 export * from './Truncate';
 export * from './WidgetWrapper';

package/src/tailwind/colors.ts

@@ -26,6 +26,8 @@ export const colorPalette = {
   grayLight: '#9EA4AC',
   gray: '#7B8085',
   darkGray: '#1C1C1C',
+  brightBlue: 'rgba(51, 88, 255, 0)',
+  brightBlue30: 'rgba(51, 88, 255, 0.3)',
 };
 
 export const twColorPallete = toTwConfigKeys(colorPalette);