initial commit

src/app/atoms/badge/NotificationBadge.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './NotificationBadge.scss';
+
+import Text from '../text/Text';
+
+function NotificationBadge({ alert, children }) {
+  const notificationClass = alert ? ' notification-badge--alert' : '';
+  return (
+    <div className={`notification-badge${notificationClass}`}>
+      <Text variant="b3">{children}</Text>
+    </div>
+  );
+}
+
+NotificationBadge.defaultProps = {
+  alert: false,
+};
+
+NotificationBadge.propTypes = {
+  alert: PropTypes.bool,
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
+};
+
+export default NotificationBadge;

src/app/atoms/badge/NotificationBadge.scss

@@ -0,0 +1,18 @@
+.notification-badge {
+  min-width: 18px;
+  padding: 1px var(--sp-ultra-tight);
+  background-color: var(--tc-surface-low);
+  border-radius: 9px;
+
+  .text {
+    color: var(--bg-surface-low);
+    text-align: center;
+  }
+
+  &--alert {
+    background-color: var(--bg-positive);
+    .text {
+      color: white;
+    }
+  }
+}