@coinbase/cds-common 0.0.0 → 8.13.2

package/esm/internal/utils/storyBuilder.js

@@ -0,0 +1,102 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useId, useMemo } from 'react';
+import isObject from 'lodash/isObject';
+import merge from 'lodash/merge';
+import omit from 'lodash/omit';
+import { jsx as _jsx } from "react/jsx-runtime";
+const emptyObject = {};
+export const baseConfig = {
+  args: {
+    isDarkMode: false
+  },
+  argTypes: {
+    isDarkMode: {
+      control: 'boolean',
+      description: 'Enable dark mode'
+    }
+  },
+  parameters: {
+    // Percy specific params
+    percy: {
+      additionalSnapshots: [{
+        prefix: '[Dark mode] ',
+        args: {
+          isDarkMode: true
+        }
+      }]
+    }
+  }
+};
+function isArray(props) {
+  return Array.isArray(props);
+}
+export function sanitizeProps(props) {
+  if (isObject(props)) {
+    return omit(props, ['scale', 'spectrum']);
+  }
+  return emptyObject;
+}
+export function storyBuilder(builderConfig) {
+  function builder(Component, sharedConfig) {
+    const storiesSet = new Set();
+    const defaultConfig = merge({}, baseConfig, builderConfig);
+    function build(args, customConfig) {
+      var _mergedConfig$paramet;
+      const TemplateFn = props => {
+        const id = useId();
+        const sanitizedProps = useMemo(() => sanitizeProps(props), [props]);
+        return /*#__PURE__*/_jsx(Component, _objectSpread({}, sanitizedProps), id);
+      };
+      const Template = TemplateFn.bind({});
+      const mergedConfig = merge({}, defaultConfig, sharedConfig, {
+        args
+      }, customConfig);
+      Template.parameters = _objectSpread(_objectSpread({}, mergedConfig.parameters), {}, {
+        storyshots: {
+          disable: mergedConfig === null || mergedConfig === void 0 || (_mergedConfig$paramet = mergedConfig.parameters) === null || _mergedConfig$paramet === void 0 || (_mergedConfig$paramet = _mergedConfig$paramet.a11y) === null || _mergedConfig$paramet === void 0 ? void 0 : _mergedConfig$paramet.skip
+        }
+      });
+      Template.args = mergedConfig.args;
+      Template.argTypes = mergedConfig.argTypes;
+      storiesSet.add(Template);
+      return Template;
+    }
+    function buildSheet(args, config) {
+      var _mergedConfig$paramet2;
+      let stories = Array.from(storiesSet.values());
+      const StorySheet = () => null;
+      const Template = StorySheet.bind({});
+      if (isArray(args)) {
+        const storiesOverride = [];
+        args.forEach(itemArgs => {
+          stories.forEach(StoryTemplate => {
+            const StoryTemplateCopy = StoryTemplate.bind({});
+            StoryTemplateCopy.args = merge({}, StoryTemplate.args, itemArgs);
+            StoryTemplateCopy.argTypes = StoryTemplate.argTypes;
+            storiesOverride.push(StoryTemplateCopy);
+          });
+        });
+        stories = storiesOverride;
+      }
+      const mergedConfig = merge({}, defaultConfig, sharedConfig, config);
+      Template.args = isArray(args) ? mergedConfig.args : args;
+      Template.argTypes = merge({}, mergedConfig.argTypes, stories[0].argTypes);
+      Template.parameters = _objectSpread(_objectSpread({}, mergedConfig.parameters), {}, {
+        storyshots: {
+          disable: (_mergedConfig$paramet2 = mergedConfig.parameters.a11y) === null || _mergedConfig$paramet2 === void 0 ? void 0 : _mergedConfig$paramet2.skip
+        },
+        stories
+      });
+      return Template;
+    }
+    return {
+      build,
+      buildSheet
+    };
+  }
+  return builder;
+}

package/esm/internal/visualizations/SparklineInteractiveData.js

@@ -0,0 +1,67 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { asset as assetJSON } from '../data/asset';
+const transformAndFilterPrices = data => {
+  // Filters out null timestamps and corrects the type
+  const filterNullTimestamps = value => {
+    if (!value.timestamp) {
+      return [];
+    }
+    return [{
+      price: value.price,
+      timestamp: value.timestamp
+    }];
+  };
+  return (data !== null && data !== void 0 ? data : []).flatMap(filterNullTimestamps).map(point => ({
+    value: parseFloat(point.price),
+    date: new Date(point.timestamp)
+  })).sort((a, b) => a.date.getTime() - b.date.getTime());
+};
+export const sparklineInteractiveData = (() => {
+  const {
+    asset
+  } = assetJSON.data.viewer.assetByUuid;
+  return {
+    hour: transformAndFilterPrices(asset.priceDataForHour.quotes),
+    day: transformAndFilterPrices(asset.priceDataForDay.quotes),
+    week: transformAndFilterPrices(asset.priceDataForWeek.quotes),
+    month: transformAndFilterPrices(asset.priceDataForMonth.quotes),
+    year: transformAndFilterPrices(asset.priceDataForYear.quotes),
+    all: transformAndFilterPrices(asset.priceDataForAll.quotes)
+  };
+})();
+export const strokeColor = '#F7931A';
+const strokeColor2 = '#03925e';
+function generateTimeseriesList(data) {
+  const timeseries = [];
+  const prices = data;
+  timeseries.push({
+    points: prices,
+    id: 'hour',
+    strokeColor
+  });
+  timeseries.push({
+    points: prices.map(point => _objectSpread(_objectSpread({}, point), {}, {
+      value: point.value + 10000 + Math.random() * 1000
+    })),
+    id: 'hour 2',
+    strokeColor: strokeColor2
+  });
+  return timeseries;
+}
+export const sparklineInteractiveHoverData = (() => {
+  const {
+    asset
+  } = assetJSON.data.viewer.assetByUuid;
+  return {
+    hour: generateTimeseriesList(transformAndFilterPrices(asset.priceDataForHour.quotes)),
+    day: generateTimeseriesList(transformAndFilterPrices(asset.priceDataForDay.quotes)),
+    week: generateTimeseriesList(transformAndFilterPrices(asset.priceDataForWeek.quotes)),
+    month: generateTimeseriesList(transformAndFilterPrices(asset.priceDataForMonth.quotes)),
+    year: generateTimeseriesList(transformAndFilterPrices(asset.priceDataForYear.quotes)),
+    all: generateTimeseriesList(transformAndFilterPrices(asset.priceDataForAll.quotes))
+  };
+})();

package/esm/jest/timeTravel.js

@@ -0,0 +1,42 @@
+/**
+ * @link https://caian.dev/posts/test-animations-react-native/
+ */
+import { advanceBy, advanceTo, clear } from 'jest-date-mock';
+export const FRAME_TIME = 10;
+function advanceOneFrame() {
+  advanceBy(FRAME_TIME);
+  jest.advanceTimersByTime(FRAME_TIME);
+}
+
+/**
+ * Setup tests for time travel (start date)
+ */
+export function setup() {
+  let startDate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  advanceTo(new Date(startDate));
+  jest.useFakeTimers();
+}
+
+/**
+ * Travel a specific amount of time (in ms) inside a test
+ */
+export function timeTravel() {
+  let time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : FRAME_TIME;
+  const frames = time / FRAME_TIME;
+  for (let i = 0; i < frames; i += 1) {
+    advanceOneFrame();
+  }
+}
+
+/**
+ * End test with time travel
+ */
+export function teardown() {
+  clear();
+  jest.useRealTimers();
+}
+export const withTimeTravel = func => {
+  setup();
+  func(timeTravel);
+  teardown();
+};

package/esm/lottie/lottieUtils.js

@@ -0,0 +1,20 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// frame / frameRate and multiply by 1000 to convert to milliseconds
+export function getLottieFrameToMs(frame, fr) {
+  return frame / fr * 1000;
+}
+export function getLottieDuration(source) {
+  return getLottieFrameToMs(source.op, source.fr);
+}
+export function getLottieFrameRate(source) {
+  return source.fr;
+}
+export function getLottieMarkers(source, opts) {
+  return source.markers.reduce((prev, next) => _objectSpread(_objectSpread({}, prev), {}, {
+    ["".concat(next.cm)]: opts !== null && opts !== void 0 && opts.ms ? getLottieFrameToMs(next.tm, source.fr) : next.tm
+  }), {});
+}

package/esm/lottie/lottieUtils.test.js

@@ -0,0 +1,44 @@
+import { getLottieDuration, getLottieFrameRate, getLottieFrameToMs, getLottieMarkers } from './lottieUtils';
+describe('lottieUtils', () => {
+  it('getLottieFrameToMs - frame / frameRate and multiply by 1000 to convert to milliseconds', () => {
+    // Second frame of a 30 FPS animation
+    expect(getLottieFrameToMs(2, 30)).toEqual(2 / 30 * 1000);
+  });
+  it('getLottieMarkers', () => {
+    // If this fails you should update the types in lottie-files/tradeStatus index file
+    expect(getLottieMarkers({
+      markers: [{
+        // Animation frame of marker
+        tm: 10,
+        // Marker name
+        cm: 'marker1'
+      }]
+    })).toEqual({
+      marker1: 10
+    });
+    expect(getLottieMarkers({
+      fr: 20,
+      markers: [{
+        // Animation frame of marker
+        tm: 10,
+        // Marker name
+        cm: 'marker1'
+      }]
+    }, {
+      ms: true
+    })).toEqual({
+      marker1: 500
+    });
+  });
+  it('getLottieFrameRate', () => {
+    expect(getLottieFrameRate({
+      fr: 30
+    })).toBe(30);
+  });
+  it('getLottieDuration', () => {
+    expect(getLottieDuration({
+      fr: 60,
+      op: 30
+    })).toBe(500);
+  });
+});

package/esm/lottie/useStatusAnimationPoller.js

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+// TODO: Figure out where we can codegen these types from lottie-files
+
+export const useStatusAnimationPoller = _ref => {
+  let {
+    status = 'loading',
+    playMarkers,
+    onFinish
+  } = _ref;
+  const isRunning = useRef(false);
+  const isComplete = useRef(false);
+  useEffect(() => {
+    // Play loading animation on mount if we aren't already running
+    if (!isRunning.current && !!playMarkers) {
+      playMarkers('loadingStart', 'loadingEnd');
+      isRunning.current = true;
+    }
+  }, [playMarkers]);
+  const previousStatusRef = useRef();
+
+  // onAnimationFinish will get triggered after our first useEffect
+  // play completes and then after each play within onAnimationFinish completes.
+  return useCallback(() => {
+    const previousStatus = previousStatusRef.current;
+    if (status === 'loading') {
+      playMarkers === null || playMarkers === void 0 || playMarkers('loadingStart', 'loadingEnd');
+    } else if (status === 'pending') {
+      if (previousStatus === 'pending') {
+        playMarkers === null || playMarkers === void 0 || playMarkers('pendingAltLoopStart', 'pendingAltLoopEnd');
+      } else {
+        playMarkers === null || playMarkers === void 0 || playMarkers('pendingAltStart', 'pendingAltEnd');
+      }
+    } else if (!isComplete.current) {
+      switch (status) {
+        case 'success':
+          {
+            if (previousStatus === 'pending') {
+              playMarkers === null || playMarkers === void 0 || playMarkers('successAltStart', 'successAltEnd');
+            } else {
+              playMarkers === null || playMarkers === void 0 || playMarkers('successStart', 'successEnd');
+            }
+            break;
+          }
+        case 'cardSuccess':
+          {
+            playMarkers === null || playMarkers === void 0 || playMarkers('successCardStart', 'successCardEnd');
+            break;
+          }
+        case 'failure':
+          {
+            if (previousStatus === 'pending') {
+              playMarkers === null || playMarkers === void 0 || playMarkers('failureAltStart', 'failureAltEnd');
+            } else {
+              playMarkers === null || playMarkers === void 0 || playMarkers('failureStart', 'failureEnd');
+            }
+            break;
+          }
+        default:
+          break;
+      }
+      isComplete.current = true;
+      onFinish === null || onFinish === void 0 || onFinish();
+    }
+    previousStatusRef.current = status;
+  }, [onFinish, playMarkers, status]);
+};

package/esm/media/getAvatarFallbackColor.js

@@ -0,0 +1,50 @@
+import { hsl } from 'd3-color';
+const hashFromString = s => s.split('').reduce((a, b) => {
+  a = (a << 5) - a + b.charCodeAt(0);
+  return a & a;
+}, 0);
+const rgbFromHash = hash => {
+  const rgbValue = [0, 0, 0];
+  rgbValue.forEach((_, idx) => {
+    const newVal = hash >> idx * 8 & 255;
+    rgbValue[idx] = newVal;
+  });
+  return "rgb(".concat(rgbValue[0], ", ").concat(rgbValue[1], ", ").concat(rgbValue[2], ")");
+};
+export const rgbToAvatarFallbackColor = color => {
+  const hslColor = hsl(color);
+  const hue = Math.round(hslColor.h);
+  // if gray (low saturation)
+  if (hslColor.s < 0.3 || Number.isNaN(hslColor.s)) return 'gray';
+  // if green or yellow
+  if (hue === 0 || hue >= 1 && hue <= 79) return 'green';
+  if (hue >= 80 && hue <= 169) return 'teal';
+  if (hue >= 70 && hue <= 249) return 'purple';
+  // if red or pink or orange
+  if (hue >= 250 && hue <= 344 || hue === 345) return 'pink';
+
+  // // Map hue ranges to all available colors
+  // // Hue range: 0-360 degrees
+  // if (hue >= 0 && hue < 20) return 'red';           // 0-19: Red
+  // if (hue >= 20 && hue < 40) return 'orange';       // 20-39: Orange
+  // if (hue >= 40 && hue < 70) return 'yellow';       // 40-69: Yellow
+  // if (hue >= 70 && hue < 100) return 'chartreuse';  // 70-99: Chartreuse
+  // if (hue >= 100 && hue < 140) return 'green';      // 100-139: Green
+  // if (hue >= 140 && hue < 180) return 'teal';       // 140-179: Teal
+  // if (hue >= 180 && hue < 220) return 'blue';       // 180-219: Blue
+  // if (hue >= 220 && hue < 260) return 'indigo';     // 220-259: Indigo
+  // if (hue >= 260 && hue < 300) return 'purple';     // 260-299: Purple
+  // if (hue >= 300 && hue < 340) return 'pink';       // 300-339: Pink
+  // if (hue >= 340 && hue <= 360) return 'red';       // 340-360: Red (wraps back)
+
+  return 'gray';
+};
+
+/**
+ * Generates a fallback color for an Avatar based on a unique identifier
+ */
+export const getAvatarFallbackColor = id => {
+  const hash = hashFromString(id);
+  const rgbValue = rgbFromHash(hash);
+  return rgbToAvatarFallbackColor(rgbValue);
+};

package/esm/media/remoteImageFallbackSrc.js

@@ -0,0 +1,11 @@
+/* We provide a base64 encoded image instead of uploading and importing a jpg in code for 2 reasons:
+ * 1. You can place it in common code and anything can import it regardless of its build process
+ * 2. You don't need to turn on image exports in bazel which can possibly export more images than the remote fallback.
+ * 3. Use can use these as tokens if you wish to use them outside of RemoteImage
+ * */
+
+/**
+ * These are svgs encoded base64 so they can scale for any size Remote Images
+ * */
+export const remoteImageDarkFallbackSrc = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiM4QTkxOUUiLz4KPGNpcmNsZSBjeD0iMTYiIGN5PSIxNSIgcj0iMyIgZmlsbD0iIzBBMEIwRCIvPgo8cmVjdCB4PSIxMSIgeT0iNiIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iIzBBMEIwRCIvPgo8cGF0aCBkPSJNNSAxNUw4LjUgOUwxMiAxNUg1WiIgZmlsbD0iIzBBMEIwRCIvPgo8L3N2Zz4K';
+export const remoteImageLightFallbackSrc = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiM1QjYxNkUiLz4KPGNpcmNsZSBjeD0iMTYiIGN5PSIxNSIgcj0iMyIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMTEiIHk9IjYiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik01IDE1TDguNSA5TDEyIDE1SDVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K';

package/esm/motion/animatedCaret.js

@@ -0,0 +1,6 @@
+import { easing, inDuration } from '../animation/collapsible';
+export const animateRotateConfig = {
+  property: 'rotate',
+  easing,
+  duration: inDuration
+};

package/esm/motion/checkbox.js

@@ -0,0 +1,9 @@
+import { createMotionConfig } from './tokens';
+/**
+ * Motion specs
+ * @link https://coda.io/d/Motion-Foundations_d5KlLHcBPlL/CDS-Check-Box_suHNC#_luS1p
+ */
+export const checkboxOpacityEnterConfig = createMotionConfig('fadeIn', 'moderate1');
+export const checkboxScaleEnterConfig = createMotionConfig('scaleUpS', 'moderate1');
+export const checkboxOpacityExitConfig = createMotionConfig('fadeOut', 'moderate1');
+export const checkboxScaleExitConfig = createMotionConfig('scaleDownS', 'moderate1');

package/esm/motion/dot.js

@@ -0,0 +1,9 @@
+import { createMotionConfig } from './tokens';
+/**
+ * Motion specs
+ * @link https://coda.io/d/Motion-Foundations_d5KlLHcBPlL/CDS-Dots_suq2C#_luRZr
+ */
+export const dotOpacityEnterConfig = createMotionConfig('fadeIn', 'moderate1');
+export const dotScaleEnterConfig = createMotionConfig('scaleUpS', 'moderate1');
+export const dotOpacityExitConfig = createMotionConfig('fadeOut', 'moderate1');
+export const dotScaleExitConfig = createMotionConfig('scaleDownS', 'moderate1');

package/esm/motion/hint.js

@@ -0,0 +1,19 @@
+import { createMotionConfig } from './tokens';
+export const colorSurgeEnterConfig = createMotionConfig('fadeIn30', 'fast1');
+export const colorSurgeExitConfig = createMotionConfig('fadeOut30', 'slow4', {
+  delay: 200
+});
+export const shakeTranslateX = [0, -8, 8, -6, 6, -4, 4, -2, 2, 0];
+export const shakeTransitionConfig = {
+  easing: 'enterFunctional',
+  duration: 'slow2'
+};
+export const pulseTransitionConfig = {
+  easing: 'linear',
+  oneOffDuration: 2000
+};
+export const pulseVariantOpacity = {
+  moderate: 0.7,
+  subtle: 0.9,
+  heavy: 0.5
+};

package/esm/motion/switch.js

@@ -0,0 +1,8 @@
+/**
+ * Motion specs
+ * @link https://coda.io/d/Motion-Foundations_d5KlLHcBPlL/CDS-Switch_su7H7#_lu8Pe
+ */
+export const switchTransitionConfig = {
+  easing: 'global',
+  duration: 'moderate1'
+};

package/esm/motion/tokens.js

@@ -0,0 +1,71 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { generateAnimToken } from './utils';
+export const curves = {
+  global: [0.6, 0, 0.15, 1],
+  enterExpressive: [0.33, 0, 0, 1],
+  enterFunctional: [0, 0, 0.15, 1],
+  exitExpressive: [1, 0, 0.67, 1],
+  exitFunctional: [0.6, 0, 1, 1],
+  linear: [0, 0, 1, 1]
+};
+export const durations = {
+  quick: 33,
+  /** Buttons, Toggles, Text, Icons, Selection Controls */
+  fast1: 100,
+  fast2: 133,
+  fast3: 150,
+  /** Short distance movements, System Messaging, Navigation Drawer, Modals */
+  moderate1: 200,
+  moderate2: 250,
+  moderate3: 300,
+  /** Large distance movements, Page Transitions, Full screen dialogue */
+  slow1: 350,
+  slow2: 400,
+  slow3: 500,
+  slow4: 1000
+};
+export const animations = {
+  fadeIn: generateAnimToken('opacity', [0, 1], 'enterFunctional'),
+  fadeIn10: generateAnimToken('opacity', [0, 0.1], 'enterFunctional'),
+  fadeIn20: generateAnimToken('opacity', [0, 0.2], 'enterFunctional'),
+  fadeIn30: generateAnimToken('opacity', [0, 0.3], 'enterFunctional'),
+  fadeOut: generateAnimToken('opacity', [1, 0], 'global'),
+  fadeOut10: generateAnimToken('opacity', [0.1, 0], 'global'),
+  fadeOut20: generateAnimToken('opacity', [0.2, 0], 'global'),
+  fadeOut30: generateAnimToken('opacity', [0.3, 0], 'global'),
+  slideUp: generateAnimToken('y', '-100%', 'enterFunctional'),
+  slideUp8: generateAnimToken('y', -8, 'enterFunctional'),
+  slideUp16: generateAnimToken('y', -16, 'enterFunctional'),
+  slideUp24: generateAnimToken('y', -24, 'enterFunctional'),
+  slideUp40: generateAnimToken('y', -40, 'enterFunctional'),
+  slideDown: generateAnimToken('y', '100%', 'exitFunctional'),
+  slideDown8: generateAnimToken('y', 8, 'global'),
+  slideDown16: generateAnimToken('y', 16, 'global'),
+  slideDown24: generateAnimToken('y', 24, 'global'),
+  slideDown40: generateAnimToken('y', 40, 'global'),
+  slideRight: generateAnimToken('x', '100%', 'global'),
+  slideRight8: generateAnimToken('x', 8, 'global'),
+  slideRight16: generateAnimToken('x', 16, 'global'),
+  slideRight24: generateAnimToken('x', 24, 'global'),
+  slideRight40: generateAnimToken('x', 40, 'global'),
+  slideLeft: generateAnimToken('x', '-100%', 'global'),
+  slideLeft8: generateAnimToken('x', -8, 'global'),
+  slideLeft16: generateAnimToken('x', -16, 'global'),
+  slideLeft24: generateAnimToken('x', -24, 'global'),
+  slideLeft40: generateAnimToken('x', -40, 'global'),
+  scaleUpXXS: generateAnimToken('scale', [0.98, 1], 'enterFunctional'),
+  scaleUpXS: generateAnimToken('scale', [0.95, 1], 'enterFunctional'),
+  scaleUpS: generateAnimToken('scale', [0.9, 1], 'enterFunctional'),
+  scaleDownXXS: generateAnimToken('scale', [1, 0.98], 'global'),
+  scaleDownXS: generateAnimToken('scale', [1, 0.95], 'global'),
+  scaleDownS: generateAnimToken('scale', [1, 0.9], 'global')
+};
+export const createMotionConfig = (effect, duration, overrides) => {
+  return _objectSpread(_objectSpread({}, animations[effect]), {}, {
+    duration
+  }, overrides);
+};

package/esm/motion/utils.js

@@ -0,0 +1,17 @@
+export const generateAnimToken = (property, values, easing) => {
+  if (Array.isArray(values)) {
+    return {
+      property,
+      fromValue: values[0],
+      toValue: values[1],
+      easing
+    };
+  }
+
+  // animate from current value thus no specific fromValue
+  return {
+    property,
+    toValue: values,
+    easing
+  };
+};