Add new onboarding flow to web UI (#24619)

app/javascript/mastodon/features/onboarding/components/arrow_small_right.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ArrowSmallRight = () => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'>
+    <path fillRule='evenodd' d='M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z' clipRule='evenodd' />
+  </svg>
+);
+
+export default ArrowSmallRight;

app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Check from 'mastodon/components/check';
+import classNames from 'classnames';
+
+const ProgressIndicator = ({ steps, completed }) => (
+  <div className='onboarding__progress-indicator'>
+    {(new Array(steps)).fill().map((_, i) => (
+      <React.Fragment key={i}>
+        {i > 0 && <div className={classNames('onboarding__progress-indicator__line', { active: completed > i })} />}
+
+        <div className={classNames('onboarding__progress-indicator__step', { active: completed > i })}>
+          {completed > i && <Check />}
+        </div>
+      </React.Fragment>
+    ))}
+  </div>
+);
+
+ProgressIndicator.propTypes = {
+  steps: PropTypes.number.isRequired,
+  completed: PropTypes.number,
+};
+
+export default ProgressIndicator;

app/javascript/mastodon/features/onboarding/components/step.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'mastodon/components/icon';
+import Check from 'mastodon/components/check';
+
+const Step = ({ label, description, icon, completed, onClick, href }) => {
+  const content = (
+    <>
+      <div className='onboarding__steps__item__icon'>
+        <Icon id={icon} />
+      </div>
+
+      <div className='onboarding__steps__item__description'>
+        <h6>{label}</h6>
+        <p>{description}</p>
+      </div>
+
+      {completed && (
+        <div className='onboarding__steps__item__progress'>
+          <Check />
+        </div>
+      )}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} onClick={onClick} target='_blank' rel='noopener' className='onboarding__steps__item'>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button onClick={onClick} className='onboarding__steps__item'>
+      {content}
+    </button>
+  );
+};
+
+Step.propTypes = {
+  label: PropTypes.node,
+  description: PropTypes.node,
+  icon: PropTypes.string,
+  completed: PropTypes.bool,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export default Step;