feat: translate web components part1 (#2454)

regen-network · Sep 9, 2024 · 80e59d0 · 80e59d0
1 parent 71ea2c4
commit 80e59d0
Show file tree

Hide file tree

Showing 78 changed files with 692 additions and 204 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,6 +17,7 @@ module.exports = {
       {
         ignoreFunction: ['test'],
         ignoreAttribute: [
+          'allow',
           'sx',
           'linearGradient',
           'rel',
@@ -29,14 +30,22 @@ module.exports = {
           'margin',
           'padding',
           'background',
+          'backgroundClip',
           'backgroundImage',
+          'backgroundPosition',
+          'backgroundSize',
           'border',
+          'borderImageSource',
+          'borderColor',
           'borderTop',
           'borderLeft',
+          'borderRight',
           'borderBottom',
           'flexFlow',
           'transition',
           'transform',
+          'filter',
+          'rel',
         ],
       },
     ],

diff --git a/web-components/src/components/banner/CookiesTopBanner.tsx b/web-components/src/components/banner/CookiesTopBanner.tsx
@@ -1,16 +1,16 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { Box } from '@mui/material';
 import Backdrop from '@mui/material/Backdrop';
-import Link from '@mui/material/Link';
 import Cookies from 'js-cookie';
 
 // TODO use Section component
 import ContainedButton from '../buttons/ContainedButton';
 import { Body } from '../typography';
 
 interface CookiesTopBannerProps {
-  privacyUrl: string;
-  TOSUrl: string;
+  acceptLabel: string;
+  rejectLabel: string;
+  children: ReactNode;
 }
 
 const rejectCookieName: string = 'cookies-rejected';
@@ -44,8 +44,9 @@ function setCookie(name: string, cookieValue: string): void {
 }
 
 export default function CookiesTopBanner({
-  privacyUrl,
-  TOSUrl,
+  acceptLabel,
+  rejectLabel,
+  children,
 }: CookiesTopBannerProps): JSX.Element | null {
   const [visible, setVisible] = useState(false);
 
@@ -103,16 +104,7 @@ export default function CookiesTopBanner({
             })}
           >
             <Body mobileSize="xs" pr={5}>
-              We use cookies to provide you with a great user experience. By
-              using this site, you accept our use of{' '}
-              <Link href={privacyUrl} color="secondary.main">
-                cookies policy
-              </Link>{' '}
-              and agree to our{' '}
-              <Link href={TOSUrl} color="secondary.main">
-                platform terms of service
-              </Link>
-              .
+              {children}
             </Body>
             <Box
               sx={{
@@ -130,7 +122,7 @@ export default function CookiesTopBanner({
                   height: spacing(8.75),
                 })}
               >
-                accept
+                {acceptLabel}
               </ContainedButton>
               <Body
                 size="sm"
@@ -143,7 +135,7 @@ export default function CookiesTopBanner({
                   pl: [null, 8.5],
                 }}
               >
-                Reject
+                {rejectLabel}
               </Body>
             </Box>
           </Box>

diff --git a/web-components/src/components/blog-post/blog-post.stories.tsx b/web-components/src/components/blog-post/blog-post.stories.tsx
@@ -12,6 +12,7 @@ export const blogPost = (): JSX.Element => (
       header="This is a blog post header"
       url="https://medium.com/regen-network"
       description="This is a blog post description"
+      buttonText="read more"
     />
   </div>
 );
diff --git a/web-components/src/components/blog-post/index.tsx b/web-components/src/components/blog-post/index.tsx
@@ -10,11 +10,13 @@ export interface BlogPostProps {
   description: SanityBlockOr<string>; // optional array for sanity block content
   img: JSX.Element;
   url: string;
+  buttonText: string;
 }
 
 const BlogPost: React.FC<React.PropsWithChildren<BlogPostProps>> = ({
   header,
   description,
+  buttonText,
   img,
   url,
 }) => {
@@ -48,7 +50,7 @@ const BlogPost: React.FC<React.PropsWithChildren<BlogPostProps>> = ({
         target="_blank"
         rel="noopener noreferrer"
       >
-        read more
+        {buttonText}
       </OutlinedButton>
     </div>
   );

diff --git a/web-components/src/components/buttons/EditButton.tsx b/web-components/src/components/buttons/EditButton.tsx
@@ -6,9 +6,10 @@ import { Label } from '../typography';
 
 interface ButtonProps {
   onClick: () => void;
+  buttonText: string;
 }
 
-function EditButton({ onClick }: ButtonProps): JSX.Element {
+function EditButton({ onClick, buttonText }: ButtonProps): JSX.Element {
   return (
     <OutlinedButton
       size="small"
@@ -20,7 +21,7 @@ function EditButton({ onClick }: ButtonProps): JSX.Element {
       startIcon={<EditIcon sx={{ height: 13, width: 13 }} />}
     >
       <Label size="sm" sx={{ color: 'info.dark' }}>
-        Edit
+        {buttonText}
       </Label>
     </OutlinedButton>
   );

diff --git a/web-components/src/components/buttons/button.stories.tsx b/web-components/src/components/buttons/button.stories.tsx
@@ -84,7 +84,9 @@ export const textButton = (): JSX.Element => (
   </Flex>
 );
 
-export const editButton = () => <EditButton onClick={() => {}} />;
+export const editButton = () => (
+  <EditButton buttonText="Edit" onClick={() => {}} />
+);
 
 export const copyButton = {
   render: () => (

diff --git a/...ents/src/components/cards/ArticleCard.tsx → ...ponents/cards/ArticleCard/ArticleCard.tsx b/...ents/src/components/cards/ArticleCard.tsx → ...ponents/cards/ArticleCard/ArticleCard.tsx
@@ -1,32 +1,38 @@
 import { Box } from '@mui/material';
 
-import { PlayButton } from '../atoms/PlayButton/PlayButton';
-import OutlinedButton from '../buttons/OutlinedButton';
-import { Body } from '../typography';
-import MediaCard from './MediaCard/MediaCard';
+import { PlayButton } from '../../atoms/PlayButton/PlayButton';
+import OutlinedButton from '../../buttons/OutlinedButton';
+import { Body } from '../../typography';
+import MediaCard from '../MediaCard/MediaCard';
+import { ArticleType } from './ArticleCard.types';
 
-function getBtnText(type?: string | null): string {
+function getBtnText(
+  type: ArticleType,
+  btnTextMapping: Record<ArticleType, string>,
+): string {
   switch (type) {
     case 'video':
-      return 'watch video';
+      return btnTextMapping['video'];
     case 'article':
-      return 'read article';
+      return btnTextMapping['article'];
     case 'podcast':
-      return 'listen to podcast';
+      return btnTextMapping['podcast'];
     default:
-      return 'read article';
+      return btnTextMapping['article'];
   }
 }
 
 export interface ArticleCardProps {
-  type: string;
+  type: ArticleType;
   name: string;
   date: string;
   author: string;
   imgSrc: string;
   url: string;
   className?: string;
   play?: boolean;
+  draftText: string;
+  btnTextMapping: Record<ArticleType, string>;
 }
 
 export default function ArticleCard({
@@ -38,6 +44,8 @@ export default function ArticleCard({
   url,
   type,
   play = false,
+  draftText,
+  btnTextMapping,
 }: ArticleCardProps): JSX.Element {
   return (
     <MediaCard
@@ -46,6 +54,7 @@ export default function ArticleCard({
       imgSrc={imgSrc}
       backgroundGradient={false}
       elevation={1}
+      draftText={draftText}
     >
       {play && <PlayButton />}
       <Body size="sm" sx={{ flex: '1 0 auto', py: [2.5, 2], px: [4, 5] }}>
@@ -68,7 +77,7 @@ export default function ArticleCard({
           mx: [4, 5],
         }}
       >
-        {getBtnText(type)}
+        {getBtnText(type, btnTextMapping)}
       </OutlinedButton>
     </MediaCard>
   );

diff --git a/web-components/src/components/cards/ArticleCard/ArticleCard.types.ts b/web-components/src/components/cards/ArticleCard/ArticleCard.types.ts
@@ -0,0 +1 @@
+export type ArticleType = 'video' | 'article' | 'podcast';
diff --git a/web-components/src/components/cards/CreateCards/CreateCard.stories.tsx b/web-components/src/components/cards/CreateCards/CreateCard.stories.tsx
@@ -9,6 +9,10 @@ export default {
 };
 
 const onClick = () => null;
+const projectButtonText = '+ create project';
+const projectEmptyTitle = 'You have not created any projects yet';
+const creditClassButtonText = '+ create credit class';
+const creditClassEmptyTitle = 'You have not created any credit classes yet';
 
 export const withTitleAndIcon = (): JSX.Element => (
   <CreateCard
@@ -32,15 +36,35 @@ export const noTitleOrIcon = (): JSX.Element => (
 );
 
 export const firstProjectCard = () => (
-  <CreateProjectCard isFirstProject onClick={onClick} />
+  <CreateProjectCard
+    isFirstProject
+    onClick={onClick}
+    buttonText={projectButtonText}
+    emptyTitle={projectEmptyTitle}
+  />
 );
 
-export const createProjectCard = () => <CreateProjectCard onClick={onClick} />;
+export const createProjectCard = () => (
+  <CreateProjectCard
+    onClick={onClick}
+    buttonText={projectButtonText}
+    emptyTitle={projectEmptyTitle}
+  />
+);
 
 export const firstCreditClassCard = () => (
-  <CreateCreditClassCard isFirstCreditClass onClick={onClick} />
+  <CreateCreditClassCard
+    isFirstCreditClass
+    onClick={onClick}
+    buttonText={creditClassButtonText}
+    emptyTitle={creditClassEmptyTitle}
+  />
 );
 
 export const createCreditClassCard = () => (
-  <CreateCreditClassCard onClick={onClick} />
+  <CreateCreditClassCard
+    onClick={onClick}
+    buttonText={creditClassButtonText}
+    emptyTitle={creditClassEmptyTitle}
+  />
 );
diff --git a/web-components/src/components/cards/CreateCards/CreateCreditClassCard.tsx b/web-components/src/components/cards/CreateCards/CreateCreditClassCard.tsx
@@ -7,17 +7,21 @@ interface Props {
   sx?: SxProps<Theme>;
   onClick: () => void;
   isFirstCreditClass?: boolean;
+  buttonText: string;
+  emptyTitle: string;
 }
 
 export const CreateCreditClassCard = ({
   sx = [],
   onClick,
   isFirstCreditClass,
+  buttonText,
+  emptyTitle,
 }: Props): JSX.Element => {
   let title;
   let icon;
   if (isFirstCreditClass) {
-    title = 'You have not created any credit classes yet';
+    title = emptyTitle;
     icon = (
       <CreditClassIcon
         sx={theme => ({
@@ -33,7 +37,7 @@ export const CreateCreditClassCard = ({
       sx={sx}
       title={title}
       onClick={onClick}
-      buttonText="+ create credit class"
+      buttonText={buttonText}
       icon={icon}
     />
   );

diff --git a/web-components/src/components/cards/CreateCards/CreateProjectCard.tsx b/web-components/src/components/cards/CreateCards/CreateProjectCard.tsx
@@ -7,15 +7,20 @@ interface Props {
   sx?: SxProps<Theme>;
   onClick: () => void;
   isFirstProject?: boolean;
+  emptyTitle: string;
+  buttonText: string;
 }
 
-function getCardData(isFirstProject?: boolean): {
+function getCardData(
+  emptyTitle: string,
+  isFirstProject?: boolean,
+): {
   title?: string;
   icon?: React.ReactElement;
 } {
   let title, icon;
   if (isFirstProject) {
-    title = 'You have not created any projects yet';
+    title = emptyTitle;
     icon = (
       <NoProjectIcon
         sx={theme => ({
@@ -32,14 +37,16 @@ export const CreateProjectCard = ({
   sx = [],
   onClick,
   isFirstProject,
+  buttonText,
+  emptyTitle,
 }: Props): JSX.Element => {
-  const { title, icon } = getCardData(isFirstProject);
+  const { title, icon } = getCardData(emptyTitle, isFirstProject);
   return (
     <CreateCard
       sx={sx}
       title={title}
       onClick={onClick}
-      buttonText="+ create project"
+      buttonText={buttonText}
       icon={icon}
     />
   );

diff --git a/web-components/src/components/cards/CredibilityCard/CredibilityCard.utils.ts b/web-components/src/components/cards/CredibilityCard/CredibilityCard.utils.ts
@@ -1,4 +1,5 @@
 export const getBackground = (index: number, value: number) => {
   const percentage = `${Math.min(100, 55 + index * value)}%`;
+  // eslint-disable-next-line lingui/no-unlocalized-strings
   return `linear-gradient(-8deg, #F1F7F6 ${percentage}, transparent ${percentage})`;
 };