feat: translate web-components from Document to forms

.eslintrc.js

@@ -15,14 +15,15 @@ module.exports = {
     'lingui/no-unlocalized-strings': [
       1,
       {
-        ignoreFunction: ['test'],
+        ignoreFunction: ['test', 'makeStyles', 'withStyles'],
         ignoreAttribute: [
           'allow',
           'sx',
           'linearGradient',
           'rel',
           'labelClassName',
           'classes',
+          'classNames',
         ],
         ignoreProperty: [
           'border',
@@ -41,6 +42,7 @@ module.exports = {
           'borderLeft',
           'borderRight',
           'borderBottom',
+          'borderRadius',
           'flexFlow',
           'transition',
           'transform',

web-components/src/components/cards/StepCard.tsx

@@ -20,6 +20,9 @@ export interface StepCardProps {
   stepLabel: string;
   apiServerUrl?: string;
   imageStorageBaseUrl?: string;
+  stepFaqsTitle: string;
+  copyText: string;
+  copySuccessText: string;
 }
 
 export interface Step {
@@ -116,6 +119,9 @@ function StepCard({
   stepLabel,
   imageStorageBaseUrl,
   apiServerUrl,
+  stepFaqsTitle,
+  copyText,
+  copySuccessText,
 }: StepCardProps): JSX.Element {
   const { classes: styles, cx } = useStyles();
   const theme = useTheme();
@@ -208,7 +214,13 @@ function StepCard({
           )}
         </Box>
         {step.faqs && step.faqs.length > 0 && (
-          <StepFAQs questionItems={step.faqs} isActive={step.isActive} />
+          <StepFAQs
+            questionItems={step.faqs}
+            isActive={step.isActive}
+            title={stepFaqsTitle}
+            copyText={copyText}
+            copySuccessText={copySuccessText}
+          />
         )}
       </Card>
       <ArrowFilledIcon className="down-arrow" color={theme.palette.info.main} />

web-components/src/components/cards/card.stories.tsx

@@ -209,6 +209,9 @@ export const stepCard: React.FC<React.PropsWithChildren<unknown>> = () => {
           'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
       }}
       stepLabel="step"
+      stepFaqsTitle="top faqs"
+      copyText="Copy"
+      copySuccessText="Successfully copied!"
     />
   );
 };

web-components/src/components/document/document.stories.tsx

@@ -6,5 +6,5 @@ export default {
 };
 
 export const document = (): JSX.Element => (
-  <Document name="certificate" link="/" info="476d7a44" />
+  <Document name="certificate" link="/" linkText={`View 476d7a44 »`} />
 );

web-components/src/components/document/index.tsx

@@ -4,8 +4,8 @@ import { makeStyles } from 'tss-react/mui';
 
 export interface DocumentInfo {
   name: string;
-  info: string;
   link: string;
+  linkText: string;
 }
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -34,8 +34,8 @@ const useStyles = makeStyles()((theme: Theme) => ({
 
 export default function Document({
   name,
-  info,
   link,
+  linkText,
 }: DocumentInfo): JSX.Element {
   const { classes } = useStyles();
   return (
@@ -47,7 +47,7 @@ export default function Document({
         target="_blank"
         rel="noopener noreferrer"
       >
-        View {info} »
+        {linkText}
       </a>
     </div>
   );

web-components/src/components/faq/Category.tsx

@@ -10,6 +10,8 @@ interface CategoryProps {
   name: string;
   questionId?: string;
   questions: QuestionItem[];
+  copyText: string;
+  copySuccessText: string;
 }
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -28,6 +30,8 @@ const Category = ({
   questions,
   name,
   questionId,
+  copyText,
+  copySuccessText,
 }: CategoryProps): JSX.Element => {
   const { classes } = useStyles();
 
@@ -43,6 +47,8 @@ const Category = ({
             question={q.question}
             answer={q.answer}
             isShareable
+            copyText={copyText}
+            copySuccessText={copySuccessText}
           />
         </div>
       ))}

web-components/src/components/faq/Question.tsx

@@ -20,6 +20,8 @@ export interface QuestionProps extends QuestionItem {
   last?: boolean;
   questionId?: string;
   isShareable?: boolean;
+  copyText: string;
+  copySuccessText: string;
 }
 
 interface StyleProps {
@@ -92,6 +94,8 @@ const Question = ({
   question,
   answer,
   questionId,
+  copyText,
+  copySuccessText,
   first = false,
   last = false,
   isShareable = false,
@@ -137,7 +141,9 @@ const Question = ({
               direction="up"
             />
           ) : (
-            <BreadcrumbIcon className={cx(classes.icon, classNames?.icon, 'text-brand-400')} />
+            <BreadcrumbIcon
+              className={cx(classes.icon, classNames?.icon, 'text-brand-400')}
+            />
           )}
         </Title>
         <Body
@@ -186,7 +192,7 @@ const Question = ({
                   color={theme.palette.secondary.dark}
                 />
                 <Label size="xs" color="secondary.main" ml={2.5}>
-                  copy question link
+                  {copyText}
                 </Label>
               </Link>
             )
@@ -195,7 +201,7 @@ const Question = ({
           )}
         </Body>
       </Box>
-      {copied && <Banner text="Link copied to your clipboard" />}
+      {copied && <Banner text={copySuccessText} />}
     </div>
   );
 };

web-components/src/components/faq/StepFAQs.tsx

@@ -11,6 +11,9 @@ import Question, { QuestionItem } from './Question';
 interface StepFAQProps {
   questionItems: QuestionItem[];
   isActive?: boolean;
+  title: string;
+  copyText: string;
+  copySuccessText: string;
 }
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -86,6 +89,9 @@ const useStyles = makeStyles()((theme: Theme) => ({
 const StepFAQs: React.FC<React.PropsWithChildren<StepFAQProps>> = ({
   questionItems,
   isActive,
+  title,
+  copyText,
+  copySuccessText,
 }) => {
   const { classes, cx } = useStyles();
   const theme = useTheme();
@@ -95,7 +101,7 @@ const StepFAQs: React.FC<React.PropsWithChildren<StepFAQProps>> = ({
     <div className={cx(classes.faq, isExpanded && classes.lessPaddingBottom)}>
       <div className={classes.top}>
         <Title variant="h6" className={classes.title}>
-          top faqs
+          {title}
         </Title>
         <Button
           className={classes.addButton}
@@ -135,6 +141,8 @@ const StepFAQs: React.FC<React.PropsWithChildren<StepFAQProps>> = ({
             answer={questionItem.answer}
             first={i === 0}
             last={i === questionItems.length - 1}
+            copyText={copyText}
+            copySuccessText={copySuccessText}
           />
         ))}
       </Collapse>

web-components/src/components/faq/faq.stories.tsx

@@ -28,11 +28,18 @@ export const question = (): JSX.Element => (
     question={questions[0].question}
     answer={questions[0].answer}
     isShareable
+    copyText="copy question link"
+    copySuccessText="Link copied to your clipboard"
   />
 );
 
 export const category = (): JSX.Element => (
-  <Category name={'tech'} questions={questions} />
+  <Category
+    name={'tech'}
+    questions={questions}
+    copyText="copy question link"
+    copySuccessText="Link copied to your clipboard"
+  />
 );
 
 export const navigation = (): JSX.Element => (
@@ -45,11 +52,14 @@ export const navigation = (): JSX.Element => (
 export const faq = (): JSX.Element => (
   <FAQ
     navigate={() => {}}
+    backText="back"
     categories={[
       {
         header: 'concept',
         questions,
       },
     ]}
+    copyText="copy question link"
+    copySuccessText="Link copied to your clipboard"
   />
 );

web-components/src/components/faq/index.tsx

@@ -3,12 +3,12 @@ import Box from '@mui/material/Box';
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
 
+import { cn } from '../../utils/styles/cn';
 import BreadcrumbIcon from '../icons/BreadcrumbIcon';
 import { Label } from '../typography';
 import Category from './Category';
 import Navigation from './Navigation';
 import { QuestionItem } from './Question';
-import { cn } from '../../utils/styles/cn';
 
 export interface FAQProps {
   categories: {
@@ -21,6 +21,9 @@ export interface FAQProps {
 interface Props extends FAQProps {
   navigate: (c: string) => void;
   questionId?: string; // current question title from url anchor
+  backText: string;
+  copyText: string;
+  copySuccessText: string;
 }
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -43,6 +46,9 @@ const FAQ = ({
   header,
   categories,
   questionId,
+  backText,
+  copyText,
+  copySuccessText,
 }: Props): JSX.Element => {
   const { classes } = useStyles();
   if (!categories.length) {
@@ -79,6 +85,8 @@ const FAQ = ({
             questionId={questionId}
             name={category.header}
             questions={category.questions}
+            copyText={copyText}
+            copySuccessText={copySuccessText}
           />
         </div>
       </Box>
@@ -101,12 +109,14 @@ const FAQ = ({
                 className={cn(classes.icon, 'text-brand-400')}
                 direction="prev"
               />
-              back
+              {backText}
             </Label>
             <Category
               questionId={questionId}
               name={category.header}
               questions={category.questions}
+              copyText={copyText}
+              copySuccessText={copySuccessText}
             />
           </div>
         ) : (