[NO-JIRA] Add timezone-safe countdown

src/TimzoneSafeCountdown/Countdown.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { cssModules } from '../helpers/cssModules';
+
+import STYLES from './countdown.scss';
+
+const getClassName = cssModules(STYLES);
+
+class Countdown extends Component {
+  static propTypes = {
+    large: PropTypes.bool,
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    large: false,
+    className: null,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  render = () => {
+    const {
+      className,
+      large,
+      ...rest
+    } = this.props;
+
+    const classNames = [getClassName('countdown__outer', className)];
+
+    return (
+      <div
+        className={classNames.join(' ')}
+        {...rest}
+      >
+        {COUNTDOWN HERE}
+      </div>
+    );
+  };
+}
+
+export default Countdown;

src/TimzoneSafeCountdown/countdown.scss

@@ -0,0 +1,4 @@
+@import '../Tokens/common';
+
+.countdown {
+}

src/TimzoneSafeCountdown/index.js

@@ -0,0 +1,3 @@
+import Countdown from './Countdown';
+
+export { Countdown };

src/TimzoneSafeCountdown/stories.js

@@ -0,0 +1,33 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016-2019 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Component } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { Countdown } from './index';
+
+const tomorrow = new Date();
+tomorrow.setDate(tomorrow.getDate() + 1);
+
+const oneWeek = new Date();
+oneWeek.setDate(oneWeek.getDate() + 1);
+
+  storiesOf('Countdown', module)
+  .add('Default - tomorrow', () => (<Countdown toTime={tomorrow} />))
+  .add('Default - oneWeek', () => (<Countdown toTime={oneWeek} />));