Camelcase seo things (codesandbox#3847)

* cmalecase things

* fix daterTime

* fix ts

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx

@@ -80,9 +80,9 @@ export const Comment = React.memo<{
       </Link>
       <Stack
         as="article"
-        itemprop="comment"
-        itemscope=""
-        itemtype="http://schema.org/Comment"
+        itemProp="comment"
+        itemScope
+        itemType="http://schema.org/Comment"
         align="flex-start"
         justify="space-between"
         marginBottom={4}
@@ -137,10 +137,10 @@ export const Comment = React.memo<{
           borderColor: 'sideBar.border',
         })}
       >
-        <Text itemprop="text" block css={truncateText} marginBottom={2}>
+        <Text itemProp="text" block css={truncateText} marginBottom={2}>
           {comment.content}
         </Text>
-        <Text variant="muted" size={2} itemprop="commentCount">
+        <Text variant="muted" size={2} itemProp="commentCount">
           {getRepliesString(comment.comments.length)}
         </Text>
       </Element>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx

@@ -31,9 +31,9 @@ export const Reply = ({ reply }: ReplyProps) => {
     >
       <Element
         as="article"
-        itemprop="comment"
-        itemscope=""
-        itemtype="http://schema.org/Comment"
+        itemProp="comment"
+        itemScope
+        itemType="http://schema.org/Comment"
         key={id}
         marginLeft={4}
         marginRight={2}
@@ -74,7 +74,7 @@ export const Reply = ({ reply }: ReplyProps) => {
         })}
       >
         {!editing ? (
-          <Element itemprop="text">
+          <Element itemProp="text">
             <Markdown source={content} />
           </Element>
         ) : (

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx

@@ -205,13 +205,13 @@ const DialogAddComment: React.FC<{
         >
           <Stack gap={2} align="center">
             <Element
-              itemprop="author"
-              itemscope=""
-              itemtype="http://schema.org/Person"
+              itemProp="author"
+              itemScope
+              itemType="http://schema.org/Person"
             >
               <Avatar user={comment.user} />
             </Element>
-            <Text size={3} weight="bold" variant="body" itemprop="name">
+            <Text size={3} weight="bold" variant="body" itemProp="name">
               {comment.user.username}
             </Text>
           </Stack>
@@ -382,7 +382,7 @@ const CommentBody = ({ comment, editing, setEditing, hasReplies }) => {
         })}
       >
         {!editing ? (
-          <Element itemprop="text">
+          <Element itemProp="text">
             <Markdown source={comment.content} />
           </Element>
         ) : (

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/AvatarBlock.tsx

@@ -8,18 +8,18 @@ export const AvatarBlock: React.FC<{ comment: CommentFragment }> = ({
   comment,
 }) => (
   <Stack gap={2} align="center">
-    <Element itemprop="author" itemscope="" itemtype="http://schema.org/Person">
+    <Element itemProp="author" itemScope itemType="http://schema.org/Person">
       <Avatar user={comment.user} />
     </Element>
     <Stack direction="vertical" justify="center" gap={1}>
-      <Text itemprop="name" size={3} weight="bold" variant="body">
+      <Text itemProp="name" size={3} weight="bold" variant="body">
         {comment.user.username}
       </Text>
       <Text
         size={2}
         variant="muted"
-        itemprop="dateCreated"
-        datetime={comment.insertedAt.toString()}
+        itemProp="dateCreated"
+        dateTime={comment.insertedAt.toString()}
       >
         {formatDistance(
           zonedTimeToUtc(comment.insertedAt, 'Etc/UTC'),

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx

@@ -133,7 +133,7 @@ export const MultiComment = ({ x, y, ids }: MultiCommentProps) => {
                     size={2}
                     weight="bold"
                     paddingRight={2}
-                    itemprop="name"
+                    itemProp="name"
                     css={css({
                       color: 'sideBar.foreground',
                     })}

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx

@@ -110,9 +110,9 @@ export const Comments: React.FC = () => {
 
         {currentComments.length ? (
           <List
-            itemprop="mainEntity"
-            itemscope=""
-            itemtype="http://schema.org/Conversation"
+            itemProp="mainEntity"
+            itemScope
+            itemType="http://schema.org/Conversation"
             ref={scrollRef}
             marginTop={4}
             css={{

packages/components/src/components/Element/index.tsx

@@ -16,9 +16,6 @@ export interface IElementProps {
   paddingTop?: number;
   paddingLeft?: number;
   paddingRight?: number;
-  itemprop?: string;
-  itemscope?: string;
-  itemtype?: string;
   css?: Object;
 }
 

packages/components/src/components/List/index.tsx

@@ -5,9 +5,6 @@ import { Stack } from '../Stack';
 
 type ListActionProps = {
   disabled?: boolean;
-  itemprop?: string;
-  itemscope?: string;
-  itemtype?: string;
 };
 
 export const List = styled(Element).attrs({ as: 'ul' })(

packages/components/src/components/Text/index.tsx

@@ -21,8 +21,7 @@ export interface ITextProps extends React.HTMLAttributes<HTMLSpanElement> {
   block?: boolean;
   maxWidth?: number | string;
   variant?: 'body' | 'muted' | 'danger';
-  itemprop?: string;
-  datetime?: string;
+  dateTime?: string;
 }
 
 export const Text = styled(Element).attrs({ as: 'span' })<ITextProps>(