Convert knobs and actions to controls/args for CountdownTimer (#14222)

Co-authored-by: Pieter Tolsma <pietertolsma@Pieters-MacBook-Air.local>

ui/pages/swaps/countdown-timer/README.mdx

@@ -0,0 +1,16 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import CountdownTimer from '.';
+
+# CountdownTimer
+
+A CountdownTimer displays a timer that ticks down, communicating to the user the time left to perform some aciton.
+
+<Canvas>
+  <Story id="ui-pages-swaps-countdown-timer-countdown-timer-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={CountdownTimer} />
+

ui/pages/swaps/countdown-timer/countdown-timer.js

@@ -113,10 +113,38 @@ export default function CountdownTimer({
 }
 
 CountdownTimer.propTypes = {
+  /**
+   * Unix timestamp that indicates the time at which this timer has started
+   * running.
+   */
   timeStarted: PropTypes.number,
+
+  /**
+   * Boolean indicating whether to display only the time (`true`) or to also
+   * display a label (`false`), given by the `labelKey` parameter.
+   */
   timeOnly: PropTypes.bool,
+
+  /**
+   * The duration of this timer in milliseconds.
+   */
   timerBase: PropTypes.number,
+
+  /**
+   * The time at which this timer should turn red, indicating it has almost run
+   * out of time. Given in the format `mm:ss`.
+   */
   warningTime: PropTypes.string,
+
+  /**
+   * The key of the label to display next to the timer, defined in
+   * `app/_locales/`.
+   */
   labelKey: PropTypes.string,
+
+  /**
+   * The key of the label to display in the tooltip when hovering over the info
+   * icon, defined in `app/_locales/`.
+   */
   infoTooltipLabelKey: PropTypes.string,
 };

ui/pages/swaps/countdown-timer/countdown-timer.stories.js

@@ -1,66 +1,48 @@
 import React from 'react';
-import { number } from '@storybook/addon-knobs';
 import CountdownTimer from './countdown-timer';
+import README from './README.mdx';
 
 export default {
   title: 'Pages/Swaps/CountdownTimer',
   id: __filename,
+  component: CountdownTimer,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    timeStarted: {
+      type: 'number',
+    },
+    timeOnly: {
+      type: 'boolean',
+    },
+    timerBase: {
+      type: 'number',
+    },
+    labelKey: {
+      type: 'string',
+    },
+    infoTooltipLabelKey: {
+      type: 'string',
+    },
+    warningTime: {
+      type: 'string',
+    },
+  },
+  args: {
+    timeStarted: Date.now(),
+    timeOnly: false,
+    timerBase: 20000,
+    labelKey: 'disconnectPrompt',
+    infoTooltipLabelKey: 'disconnectAllAccountsConfirmationDescription',
+    warningTime: '0:15',
+  },
 };
 
-const getTimeStartedFromDecrimentSeconds = (seconds) =>
-  Date.now() - seconds * 1000;
-
-export const DefaultStory = () => {
-  const timeStartedSecondDecriment = number(
-    'Set timeStarted to curren time minus X seconds',
-    10,
-  );
-
-  return (
-    <CountdownTimer
-      timeStarted={getTimeStartedFromDecrimentSeconds(
-        timeStartedSecondDecriment,
-      )}
-      timeOnly
-    />
-  );
+export const DefaultStory = (args) => {
+  return <CountdownTimer {...args} />;
 };
 
 DefaultStory.storyName = 'Default';
-
-export const CustomTimerBase = () => {
-  const timeStartedSecondDecriment = number(
-    'Set timeStarted to curren time minus X seconds',
-    10,
-  );
-
-  return (
-    <CountdownTimer
-      timeStarted={getTimeStartedFromDecrimentSeconds(
-        timeStartedSecondDecriment,
-      )}
-      timerBase={150000}
-      timeOnly
-    />
-  );
-};
-
-// Label keys used in below stories are just for demonstration purposes
-export const WithLabelInfoTooltipAndWarning = () => {
-  const timeStartedSecondDecriment = number(
-    'Set timeStarted to curren time minus X seconds',
-    0,
-  );
-
-  return (
-    <CountdownTimer
-      timeStarted={getTimeStartedFromDecrimentSeconds(
-        timeStartedSecondDecriment,
-      )}
-      timerBase={20000}
-      labelKey="disconnectPrompt"
-      infoTooltipLabelKey="disconnectAllAccountsConfirmationDescription"
-      warningTime="0:15"
-    />
-  );
-};