Merge branch 'next-onboarding' into 'next'

Next: onboarding flow

See merge request soapbox-pub/soapbox-fe!1217

app/soapbox/components/ui/button/useButtonStyles.ts

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 
-type ButtonThemes = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'transparent'
+type ButtonThemes = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'transparent' | 'link'
 type ButtonSizes = 'sm' | 'md' | 'lg'
 
 type IButtonStyles = {
@@ -25,6 +25,7 @@ const useButtonStyles = ({
     accent: 'border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-500 focus:ring-2 focus:ring-offset-2',
     danger: 'border-transparent text-danger-700 bg-danger-100 hover:bg-danger-200 focus:ring-danger-500 focus:ring-2 focus:ring-offset-2',
     transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
+    link: 'border-transparent text-primary-600 hover:bg-gray-100 hover:text-primary-700',
   };
 
   const sizes = {

app/soapbox/components/ui/icon/icon.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import SvgIcon from './svg-icon';
 
-interface IIcon {
+interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
   className?: string,
   count?: number,
   alt?: string,

app/soapbox/components/ui/input/input.tsx

@@ -11,7 +11,7 @@ const messages = defineMessages({
   hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' },
 });
 
-interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required'> {
+interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required'> {
   autoFocus?: boolean,
   defaultValue?: string,
   className?: string,

app/soapbox/components/ui/stack/stack.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-type SIZES = 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5
+type SIZES = 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
 
 const spaces = {
   '0.5': 'space-y-0.5',
@@ -11,6 +11,7 @@ const spaces = {
   3: 'space-y-3',
   4: 'space-y-4',
   5: 'space-y-5',
+  10: 'space-y-10',
 };
 
 const justifyContentOptions = {

app/soapbox/components/ui/text/text.tsx

@@ -6,6 +6,7 @@ type Weights = 'normal' | 'medium' | 'semibold' | 'bold'
 type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
 type Alignments = 'left' | 'center' | 'right'
 type TrackingSizes = 'normal' | 'wide'
+type TransformProperties = 'uppercase' | 'normal'
 type Families = 'sans' | 'mono'
 type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
@@ -48,6 +49,11 @@ const trackingSizes = {
   wide: 'tracking-wide',
 };
 
+const transformProperties = {
+  normal: 'normal-case',
+  uppercase: 'uppercase',
+};
+
 const families = {
   sans: 'font-sans',
   mono: 'font-mono',
@@ -62,6 +68,7 @@ interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'danger
   tag?: Tags,
   theme?: Themes,
   tracking?: TrackingSizes,
+  transform?: TransformProperties,
   truncate?: boolean,
   weight?: Weights
 }
@@ -76,6 +83,7 @@ const Text: React.FC<IText> = React.forwardRef(
       tag = 'p',
       theme = 'default',
       tracking = 'normal',
+      transform = 'normal',
       truncate = false,
       weight = 'normal',
       ...filteredProps
@@ -99,6 +107,7 @@ const Text: React.FC<IText> = React.forwardRef(
           [trackingSizes[tracking]]: true,
           [families[family]]: true,
           [alignmentClass]: typeof align !== 'undefined',
+          [transformProperties[transform]]: typeof transform !== 'undefined',
         }, className)}
       />
     );

app/soapbox/components/ui/textarea/textarea.tsx

@@ -1,14 +1,13 @@
 import classNames from 'classnames';
 import React from 'react';
 
-interface ITextarea {
+interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required'> {
   autoFocus?: boolean,
   defaultValue?: string,
   name?: string,
   isCodeEditor?: boolean,
   placeholder?: string,
   value?: string,
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
 }
 
 const Textarea = React.forwardRef(