Merge pull request #1484 from prismicio/dani/repeatable-links-warning

feat: repeatable links warning
prismicio · Nov 14, 2024 · 2c15bab · 2c15bab
2 parents e47f6c8 + 0d0c3c9
commit 2c15bab
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 104 deletions.
diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/Form.jsx b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/Form.jsx
@@ -1,4 +1,4 @@
-import { Box, Label } from "theme-ui";
+import { Flex } from "theme-ui";
 
 import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
 import WidgetFormField from "@/legacy/lib/builders/common/EditModal/Field";
@@ -22,57 +22,55 @@ const Form = (props) => {
   } = formValues;
 
   return (
-    <FlexGrid>
-      {Object.entries(FormFields).map(([key, field]) => (
-        <Col key={key}>
-          <WidgetFormField
-            fieldName={createFieldNameFromKey(key)}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            formField={field}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            fields={fields}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            initialValues={initialValues}
-          />
-        </Col>
-      ))}
-      <Col />
-      <Col key="allowTargetBlank">
-        <Box sx={{ mt: 2 }}>
-          <Label
-            htmlFor="allowTargetBlank"
-            variant="label.primary"
-            sx={{
-              display: "flex",
-              alignItems: "center",
+    <>
+      <FlexGrid>
+        {Object.entries(FormFields).map(([key, field]) => (
+          <Col key={key}>
+            <WidgetFormField
+              fieldName={createFieldNameFromKey(key)}
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              formField={field}
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              fields={fields}
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              initialValues={initialValues}
+            />
+          </Col>
+        ))}
+
+        <Col key="allowTargetBlank">
+          <Flex
+            sx={{ gap: 2, marginTop: 3 }}
+            style={{
+              paddingTop: "1px",
             }}
           >
-            Link properties
-          </Label>
-          <WidgetFormField
-            fieldName={createFieldNameFromKey("allowTargetBlank")}
-            formField={CheckBox("Allow target blank", false, true)}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            fields={fields}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            initialValues={initialValues}
-          />
-        </Box>
-      </Col>
-      <DisplayTextCheckbox
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        checked={allowText}
-        height={127}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        setFieldValue={setFieldValue}
-      />
+            <Col>
+              <WidgetFormField
+                fieldName={createFieldNameFromKey("allowTargetBlank")}
+                formField={CheckBox("Allow target blank", false, true)}
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                fields={fields}
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                initialValues={initialValues}
+              />
+            </Col>
+            <DisplayTextCheckbox
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              checked={allowText}
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              setFieldValue={setFieldValue}
+            />
+          </Flex>
+        </Col>
+      </FlexGrid>
       <RepeatableCheckbox
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         checked={repeat}
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         setFieldValue={setFieldValue}
       />
-    </FlexGrid>
+    </>
   );
 };
 

diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx
@@ -1,4 +1,4 @@
-import { Box, Icon, Tooltip } from "@prismicio/editor-ui";
+import { Box, Icon, Text, Tooltip } from "@prismicio/editor-ui";
 import { Checkbox, Flex, Label } from "theme-ui";
 
 import { Col } from "@/legacy/components/Flex";
@@ -53,51 +53,45 @@ export function DisplayTextCheckbox(props: CommonCheckboxProps) {
 }
 
 export function RepeatableCheckbox(props: CommonCheckboxProps) {
-  const { checked, height, setFieldValue } = props;
+  const { checked, setFieldValue } = props;
 
   return (
-    <Col>
-      <Flex
+    <Box flexDirection="column">
+      <Label
+        htmlFor="repeat"
+        variant="label.primary"
         sx={{
           mt: 2,
-          flexDirection: "column",
-          height: height ? `${height}%` : undefined,
         }}
       >
-        <Label
-          htmlFor="repeat"
-          variant="label.primary"
-          sx={{ display: "flex", alignItems: "center" }}
-        >
-          Repeatable
-        </Label>
-        <Label variant="label.border">
-          <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            width="100%"
+        Repeatable
+      </Label>
+      <Label variant="label.border" sx={{ display: "flex" }}>
+        <Checkbox
+          name="repeat"
+          checked={checked}
+          onChange={(event) => {
+            void setFieldValue("config.repeat", event.target.checked);
+          }}
+        />
+        Make this link repeatable - Allow editors to create lists of links
+      </Label>
+      <Box alignItems="center" gap={4}>
+        <Icon name="alert" size="medium" color="grey11" />
+        <Text variant="normal" color="grey11">
+          Repeatable link fields are returned as an array of links by the API.{" "}
+          <a
+            href="https://prismic.io/docs/field"
+            style={{ textDecoration: "none" }}
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            <Flex>
-              <Checkbox
-                name="repeat"
-                checked={checked}
-                onChange={(event) => {
-                  void setFieldValue("config.repeat", event.target.checked);
-                }}
-              />
-              Make this link repeatable
-            </Flex>
-            <Tooltip
-              content="Allow editors to create lists of links"
-              align="end"
-              zIndexHack
-            >
-              <Icon name="alert" size="medium" color="grey11" />
-            </Tooltip>
-          </Box>
-        </Label>
-      </Flex>
-    </Col>
+            <Text variant="normal" color="indigo11">
+              See documentation.
+            </Text>
+          </a>
+        </Text>
+      </Box>
+    </Box>
   );
 }
diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/LinkToMedia/Form.jsx b/packages/slice-machine/src/legacy/lib/models/common/widgets/LinkToMedia/Form.jsx
@@ -19,32 +19,34 @@ const Form = (props) => {
   } = formValues;
 
   return (
-    <FlexGrid>
-      {Object.entries(FormFields).map(([key, field]) => (
-        <Col key={key}>
-          <WidgetFormField
-            fieldName={createFieldNameFromKey(key)}
-            formField={field}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            fields={fields}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            initialValues={initialValues}
-          />
-        </Col>
-      ))}
-      <DisplayTextCheckbox
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        checked={allowText}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        setFieldValue={setFieldValue}
-      />
+    <>
+      <FlexGrid>
+        {Object.entries(FormFields).map(([key, field]) => (
+          <Col key={key}>
+            <WidgetFormField
+              fieldName={createFieldNameFromKey(key)}
+              formField={field}
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              fields={fields}
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              initialValues={initialValues}
+            />
+          </Col>
+        ))}
+        <DisplayTextCheckbox
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          checked={allowText}
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          setFieldValue={setFieldValue}
+        />
+      </FlexGrid>
       <RepeatableCheckbox
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         checked={repeat}
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         setFieldValue={setFieldValue}
       />
-    </FlexGrid>
+    </>
   );
 };