feat: translate web-components from header to inputs/new

.eslintrc.js

@@ -15,7 +15,7 @@ module.exports = {
     'lingui/no-unlocalized-strings': [
       1,
       {
-        ignoreFunction: ['test', 'makeStyles', 'withStyles'],
+        ignoreFunction: ['test', 'makeStyles', 'withStyles', 'cn'],
         ignoreAttribute: [
           'allow',
           'sx',

web-components/src/components/cards/ReviewCard/ReviewCard.Photo.tsx

@@ -8,8 +8,13 @@ const Photo = ({
   src,
   caption,
   credit,
+  locationText,
   sx = [],
-}: CardMediaProps & { caption?: string; credit?: string }): JSX.Element => {
+}: CardMediaProps & {
+  caption?: string;
+  credit?: string;
+  locationText: string;
+}): JSX.Element => {
   return (
     <Card sx={[{ height: [216, 293], position: 'relative' }, ...sxToArray(sx)]}>
       <CardMedia
@@ -19,6 +24,7 @@ const Photo = ({
       />
       {(caption || credit) && (
         <FileDropBottomBar
+          locationText={locationText}
           caption={caption}
           credit={credit}
           sx={{ position: 'absolute', bottom: 0 }}

web-components/src/components/credits/CreditsGauge.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
 import Grid from '@mui/material/Grid';
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
 
-import { pluralize } from '../../utils/pluralize';
 import Gauge from './Gauge';
 import GaugeText from './GaugeText';
 

web-components/src/components/gradient-badge/GradientBadge.utils.ts

@@ -1,3 +1,4 @@
+/* eslint-disable lingui/no-unlocalized-strings */
 import { GradientBadgeVariant } from './GradientBadge.types';
 
 export const GradientBadgeVariantMapping: {

web-components/src/components/header/Header.mock.ts

@@ -1,3 +1,4 @@
+/* eslint-disable lingui/no-unlocalized-strings */
 import { Item } from './components/HeaderMenuItem/HeaderMenuItem';
 
 export const headerMenuItemsMock: Item[] = [

web-components/src/components/header/Header.stories.ExtraComponent.tsx

@@ -8,7 +8,17 @@ import { getUserMenuItemsMock } from './components/UserMenuItems.mock';
 
 const REGEN_TEST_ADDRESS = 'regen1df675r9vnf7pdedn4sf26svdsem3ugavgxmy46';
 
-export const ExtraComponent = (): JSX.Element => {
+type Props = {
+  loginText: string;
+  logoutText: string;
+  avatarAlt: string;
+};
+
+export const ExtraComponent = ({
+  loginText,
+  avatarAlt,
+  logoutText,
+}: Props): JSX.Element => {
   const [address, setAddress] = useState('');
   const userMenuItems = getUserMenuItemsMock({
     linkComponent: NavLink,
@@ -18,6 +28,9 @@ export const ExtraComponent = (): JSX.Element => {
     <Box display="flex" justifyContent="center" alignItems="center">
       {address && (
         <UserMenuItems
+          nameOrAddress={address}
+          avatarAlt={avatarAlt}
+          logoutText={logoutText}
           avatar={''}
           disconnect={() => setAddress('')}
           pathname={''}
@@ -30,7 +43,7 @@ export const ExtraComponent = (): JSX.Element => {
           size="small"
           onClick={() => setAddress(REGEN_TEST_ADDRESS)}
         >
-          {'login'}
+          {loginText}
         </ContainedButton>
       )}
     </Box>

web-components/src/components/header/Header.stories.tsx

@@ -22,7 +22,13 @@ Default.args = {
   absolute: true,
   color: 'black',
   borderBottom: false,
-  extras: <ExtraComponent />,
+  extras: (
+    <ExtraComponent
+      avatarAlt="default avatar"
+      logoutText="Log out"
+      loginText="Login"
+    />
+  ),
 };
 
 Default.argTypes = {};

web-components/src/components/header/components/NavLink.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from '@mui/material/Link';
 import { makeStyles } from 'tss-react/mui';
+
 import { cn } from '../../../utils/styles/cn';
 
 type UseNavLinkStylesParams = {

web-components/src/components/header/components/UserMenuItems.mock.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable lingui/no-unlocalized-strings */
 import BridgeIcon from '../../icons/BridgeIcon';
 import CreditsIcon from '../../icons/CreditsIcon';
 import { HeaderDropdownItemProps } from './HeaderDropdown/HeaderDropdown.Item';

web-components/src/components/header/components/UserMenuItems.tsx

@@ -12,6 +12,8 @@ interface UserMenuItemsProps extends HeaderMenuItemBase {
   nameOrAddress?: string | null;
   avatar: string;
   userMenuItems: HeaderDropdownItemProps[];
+  logoutText: string;
+  avatarAlt: string;
   disconnect: () => void;
 }
 

web-components/src/components/image-crop/index.tsx

@@ -7,7 +7,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { CancelButtonFooter } from '../organisms/CancelButtonFooter/CancelButtonFooter';
 import { getCroppedImg } from './canvas-utils';
-import { APPLY, UPDATE, UPLOADING } from './ImageCrop.constants';
 
 import 'react-image-crop/dist/ReactCrop.css';
 
@@ -19,6 +18,9 @@ export interface ImageCropProps {
   fixedCrop: Partial<Crop>;
   isCropSubmitDisabled?: boolean;
   isIgnoreCrop?: boolean;
+  uploadText: string;
+  updateText: string;
+  applyText: string;
   children?: React.ReactNode;
 }
 
@@ -76,6 +78,9 @@ export default function ImageCrop({
   fixedCrop,
   isCropSubmitDisabled,
   isIgnoreCrop = false,
+  uploadText,
+  updateText,
+  applyText,
   children,
 }: ImageCropProps): JSX.Element {
   const { classes } = useStyles();
@@ -183,12 +188,12 @@ export default function ImageCrop({
                       <div className="h-20">
                         <CircularProgress size={20} color="secondary" />
                       </div>
-                      <span className="ml-5">{UPLOADING}</span>
+                      <span className="ml-5">{uploadText}</span>
                     </>
                   ) : isIgnoreCrop ? (
-                    UPDATE
+                    updateText
                   ) : (
-                    APPLY
+                    applyText
                   )}
                 </>
               }

web-components/src/components/inputs/ControlledTextField.tsx

@@ -15,6 +15,7 @@ interface ControlledTextFieldProps
   description?: string;
   label?: string;
   optional?: boolean | string;
+  exampleText?: string;
   onExampleClick?: () => void;
   sx?: SxProps<Theme>;
 }
@@ -30,6 +31,7 @@ export default function ControlledTextField({
   meta,
   optional,
   startAdornment,
+  exampleText,
   onExampleClick,
   defaultStyle = true,
   sx,
@@ -54,6 +56,7 @@ export default function ControlledTextField({
     <FieldFormControl
       label={label}
       description={description}
+      exampleText={exampleText}
       onExampleClick={onExampleClick}
       disabled={form.isSubmitting}
       optional={optional}

web-components/src/components/inputs/FieldFormControl.tsx

@@ -27,6 +27,7 @@ interface Props extends FieldProps, DefaultStyleProps {
   disabled?: boolean;
   optional?: boolean | string;
   label?: string;
+  exampleText?: string;
   onExampleClick?: () => void;
 }
 
@@ -83,6 +84,7 @@ export default function FieldFormControl({
   className,
   sx,
   optional,
+  exampleText,
   onExampleClick,
   defaultStyle = true,
   forceDefaultStyle = false,
@@ -124,6 +126,7 @@ export default function FieldFormControl({
           label={label}
           optional={optional}
           description={description}
+          exampleText={exampleText}
           onExampleClick={onExampleClick}
           disabled={disabled}
         />

web-components/src/components/inputs/FormLabel.tsx

@@ -10,6 +10,7 @@ interface Props {
   disabled?: boolean;
   optional?: boolean | string;
   label?: string;
+  exampleText?: string;
   onExampleClick?: () => void;
 }
 
@@ -22,6 +23,7 @@ export default function FormLabel({
   disabled,
   className,
   optional,
+  exampleText,
   onExampleClick,
 }: Props): JSX.Element {
   return (
@@ -42,7 +44,7 @@ export default function FormLabel({
                 onClick={onExampleClick}
                 sx={{ color: 'secondary.main', cursor: 'pointer' }}
               >
-                 See an example»
+                 {exampleText}
               </Box>
             )}
           </Body>

web-components/src/components/inputs/new/AmountField/AmountField.AuxiliaryLabel.tsx

@@ -7,13 +7,15 @@ interface AuxiliaryLabelProps {
   availableAmount: number;
   denom: string;
   auxiliaryLabel?: string;
+  availableLabel: string;
   className?: string;
 }
 
 export const AuxiliaryLabel = ({
   availableAmount,
   denom,
   auxiliaryLabel,
+  availableLabel,
   className,
 }: AuxiliaryLabelProps): JSX.Element => {
   const { classes: styles } = useAmountFieldStyles();
@@ -29,7 +31,7 @@ export const AuxiliaryLabel = ({
           <span className={styles.availableLabel}>{auxiliaryLabel}</span>
         )}
         <span>
-          <span className={styles.availableLabel}>Available:</span>{' '}
+          <span className={styles.availableLabel}>{`${availableLabel}:`}</span>{' '}
           <span className={styles.availableAmount}>
             {getFormattedNumber(availableAmount)}
           </span>

web-components/src/components/inputs/new/AmountField/AmountField.Label.tsx

@@ -5,12 +5,13 @@ import { useAmountFieldStyles } from './AmountField.styles';
 import { AmountLabelProps } from './AmountField.types';
 
 export const AmountLabel: React.FC<React.PropsWithChildren<AmountLabelProps>> =
-  ({ label, auxiliaryLabel, availableAmount, denom }) => {
+  ({ label, auxiliaryLabel, availableAmount, availableLabel, denom }) => {
     const { classes: styles } = useAmountFieldStyles();
     return (
       <Grid container justifyContent="space-between">
         <span className={styles.mainLabel}>{label}</span>
         <AuxiliaryLabel
+          availableLabel={availableLabel}
           availableAmount={availableAmount}
           auxiliaryLabel={auxiliaryLabel}
           denom={denom}