metamask-extension/ui/app/pages/swaps/countdown-timer/countdown-timer.stories.js

import React from 'react'
import { number } from '@storybook/addon-knobs/react'
import CountdownTimer from './countdown-timer'

export default {
  title: 'CountdownTimer',
}

const getTimeStartedFromDecrimentSeconds = (seconds) =>
  Date.now() - seconds * 1000

export const Default = () => {
  const timeStartedSecondDecriment = number(
    'Set timeStarted to curren time minus X seconds',
    10,
  )

  return (
    <CountdownTimer
      timeStarted={getTimeStartedFromDecrimentSeconds(
        timeStartedSecondDecriment,
      )}
      timeOnly
    />
  )
}

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"
    />
  )
}