chore: pr feedback

twilio-labs · Nov 26, 2024 · 1d3f787 · 1d3f787
1 parent 87fc268
commit 1d3f787
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 65 deletions.
diff --git a/.changeset/dull-panthers-develop.md b/.changeset/dull-panthers-develop.md
@@ -1,5 +1,6 @@
 ---
 "@twilio-paste/icons": minor
+"@twilio-page/core": minor
 ---
 
 [Icon]: Add Blockquote icon.
diff --git a/.changeset/tough-dolphins-decide.md b/.changeset/tough-dolphins-decide.md
@@ -1,6 +1,6 @@
 ---
 "@twilio-paste/blockquote": major
-"@twilio-paste/core": major
+"@twilio-paste/core": minor
 ---
 
 [Blockquote]: Added a new Blockquote component to library to act as a stylized text wrapper for a quotation and source.
diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -34,8 +34,8 @@
   "BaseRadioCheckboxLabel": "@twilio-paste/core/base-radio-checkbox",
   "BaseRadioCheckboxLabelText": "@twilio-paste/core/base-radio-checkbox",
   "Blockquote": "@twilio-paste/core/blockquote",
+  "BlockquoteCitation": "@twilio-paste/core/blockquote",
   "BlockquoteContent": "@twilio-paste/core/blockquote",
-  "BlockquoteSource": "@twilio-paste/core/blockquote",
   "Breadcrumb": "@twilio-paste/core/breadcrumb",
   "BreadcrumbItem": "@twilio-paste/core/breadcrumb",
   "Button": "@twilio-paste/core/button",

diff --git a/packages/paste-core/components/blockquote/CHANGELOG.md b/packages/paste-core/components/blockquote/CHANGELOG.md
@@ -1 +0,0 @@
-`

diff --git a/packages/paste-core/components/blockquote/__tests__/index.spec.tsx b/packages/paste-core/components/blockquote/__tests__/index.spec.tsx
@@ -1,49 +1,51 @@
 import { render, screen } from "@testing-library/react";
 import * as React from "react";
 
-import { Blockquote, BlockquoteContent, BlockquoteSource } from "../src";
+import { Blockquote, BlockquoteCitation, BlockquoteContent } from "../src";
 
 describe("Blockquote", () => {
   it("should render", () => {
     render(
       <Blockquote url="#" data-testid="blockquote">
         <BlockquoteContent>This is some text.</BlockquoteContent>
-        <BlockquoteSource author="Google" source="People + AI Guidebook" />
+        <BlockquoteCitation author="Google" source="People + AI Guidebook" />
       </Blockquote>,
     );
 
     const blockquote = screen.getByTestId("blockquote");
     expect(blockquote).toBeDefined();
-
     const text = screen.getByText("This is some text.");
     expect(text.nodeName).toBe("BLOCKQUOTE");
-    expect(blockquote.querySelector(`[data-paste-element='BLOCKQUOTE_SOURCE_ANCHOR']`)).toBeTruthy();
+    expect(text).toHaveAttribute("cite", "#");
+    expect(blockquote.querySelector(`[data-paste-element='BLOCKQUOTE_CITATION_ANCHOR']`)).toBeTruthy();
   });
 
   it("should render without a url", () => {
     render(
       <Blockquote data-testid="blockquote">
         <BlockquoteContent>This is some text.</BlockquoteContent>
-        <BlockquoteSource author="Google" source="People + AI Guidebook" />
+        <BlockquoteCitation author="Google" source="People + AI Guidebook" />
       </Blockquote>,
     );
 
     const blockquote = screen.getByTestId("blockquote");
-    expect(blockquote).toBeDefined();
-    expect(blockquote.querySelector(`[data-paste-element='BLOCKQUOTE_SOURCE_TEXT']`)).toBeTruthy();
+    expect(blockquote.querySelector(`[data-paste-element='BLOCKQUOTE_CITATION_CITE']`)).toBeTruthy();
+    expect(blockquote.querySelector("a")).toBeNull();
+    expect(screen.getByText("This is some text.")).not.toHaveAttribute("cite");
   });
 
   it("should render without a source", () => {
     render(
-      <Blockquote url="#" data-testid="blockquote">
+      <Blockquote data-testid="blockquote">
         <BlockquoteContent>This is some text.</BlockquoteContent>
-        <BlockquoteSource author="Google" />
+        <BlockquoteCitation author="Google" />
       </Blockquote>,
     );
 
     const blockquote = screen.getByTestId("blockquote");
     expect(blockquote).toBeDefined();
-    expect(blockquote.querySelector(`[data-paste-element='BLOCKQUOTE_SOURCE_CITE']`)).toBeFalsy();
+    expect(blockquote.querySelector(`[data-paste-element='BLOCKQUOTE_CITATION_CITE']`)).toBeFalsy();
+    expect(screen.getByText("This is some text.")).not.toHaveAttribute("cite");
   });
 });
 
@@ -52,51 +54,35 @@ describe("Customization", () => {
     const { getByTestId } = render(
       <Blockquote url="#" data-testid="blockquote">
         <BlockquoteContent>This is some text.</BlockquoteContent>
-        <BlockquoteSource author="Google" source="People + AI Guidebook" />
-      </Blockquote>,
-    );
-    const { getByTestId: idWithoutURL } = render(
-      <Blockquote data-testid="blockquoteWithoutURL">
-        <BlockquoteContent>This is some text.</BlockquoteContent>
-        <BlockquoteSource author="Google" source="People + AI Guidebook" />
+        <BlockquoteCitation author="Google" source="People + AI Guidebook" />
       </Blockquote>,
     );
 
     expect(getByTestId("blockquote").getAttribute("data-paste-element")).toEqual("BLOCKQUOTE");
     expect(getByTestId("blockquote").querySelector(`[data-paste-element='BLOCKQUOTE_ICON']`)).toBeTruthy();
+    expect(getByTestId("blockquote").querySelector(`[data-paste-element='INNER_BLOCKQUOTE']`)).toBeTruthy();
     expect(getByTestId("blockquote").querySelector(`[data-paste-element='BLOCKQUOTE_CONTENT']`)).toBeTruthy();
-    expect(getByTestId("blockquote").querySelector(`[data-paste-element='BLOCKQUOTE_SOURCE']`)).toBeTruthy();
-    expect(getByTestId("blockquote").querySelector(`[data-paste-element='BLOCKQUOTE_SOURCE_AUTHOR']`)).toBeTruthy();
-    expect(getByTestId("blockquote").querySelector(`[data-paste-element='BLOCKQUOTE_SOURCE_CITE']`)).toBeTruthy();
-    expect(getByTestId("blockquote").querySelector(`[data-paste-element='BLOCKQUOTE_SOURCE_ANCHOR']`)).toBeTruthy();
-    expect(
-      idWithoutURL("blockquoteWithoutURL").querySelector(`[data-paste-element='BLOCKQUOTE_SOURCE_TEXT']`),
-    ).toBeTruthy();
+    expect(getByTestId("blockquote").querySelector(`[data-paste-element='BLOCKQUOTE_CITATION']`)).toBeTruthy();
+    expect(getByTestId("blockquote").querySelector(`[data-paste-element='BLOCKQUOTE_CITATION_AUTHOR']`)).toBeTruthy();
+    expect(getByTestId("blockquote").querySelector(`[data-paste-element='BLOCKQUOTE_CITATION_CITE']`)).toBeTruthy();
+    expect(getByTestId("blockquote").querySelector(`[data-paste-element='BLOCKQUOTE_CITATION_ANCHOR']`)).toBeTruthy();
   });
 
   it("should set custom element data attribute", () => {
     const { getByTestId } = render(
       <Blockquote url="#" data-testid="blockquote" element="CUSTOMIZED">
         <BlockquoteContent element="CUSTOMIZED_CONTENT">This is some text.</BlockquoteContent>
-        <BlockquoteSource author="Google" source="People + AI Guidebook" element="CUSTOMIZED_SOURCE" />
+        <BlockquoteCitation author="Google" source="People + AI Guidebook" element="CUSTOMIZED_SOURCE" />
       </Blockquote>,
     );
-    const { getByTestId: idWithoutURL } = render(
-      <Blockquote data-testid="blockquoteWithoutURL" element="CUSTOMIZED">
-        <BlockquoteContent element="CUSTOMIZED_CONTENT">This is some text.</BlockquoteContent>
-        <BlockquoteSource author="Google" source="People + AI Guidebook" element="CUSTOMIZED_SOURCE" />
-      </Blockquote>,
-    );
-
+    screen.debug();
     expect(getByTestId("blockquote").getAttribute("data-paste-element")).toEqual("CUSTOMIZED");
     expect(getByTestId("blockquote").querySelector(`[data-paste-element='CUSTOMIZED_ICON']`)).toBeTruthy();
+    expect(getByTestId("blockquote").querySelector(`[data-paste-element='INNER_CUSTOMIZED']`)).toBeTruthy();
     expect(getByTestId("blockquote").querySelector(`[data-paste-element='CUSTOMIZED_CONTENT']`)).toBeTruthy();
     expect(getByTestId("blockquote").querySelector(`[data-paste-element='CUSTOMIZED_SOURCE']`)).toBeTruthy();
     expect(getByTestId("blockquote").querySelector(`[data-paste-element='CUSTOMIZED_SOURCE_AUTHOR']`)).toBeTruthy();
     expect(getByTestId("blockquote").querySelector(`[data-paste-element='CUSTOMIZED_SOURCE_CITE']`)).toBeTruthy();
     expect(getByTestId("blockquote").querySelector(`[data-paste-element='CUSTOMIZED_SOURCE_ANCHOR']`)).toBeTruthy();
-    expect(
-      idWithoutURL("blockquoteWithoutURL").querySelector(`[data-paste-element='CUSTOMIZED_SOURCE_TEXT']`),
-    ).toBeTruthy();
   });
 });
diff --git a/packages/paste-core/components/blockquote/src/Blockquote.tsx b/packages/paste-core/components/blockquote/src/Blockquote.tsx
@@ -1,4 +1,5 @@
-import { Box, type BoxProps } from "@twilio-paste/box";
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
 import { BlockquoteIcon } from "@twilio-paste/icons/esm/BlockquoteIcon";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import React from "react";
@@ -26,7 +27,7 @@ export const Blockquote = React.forwardRef<HTMLDivElement, BlockquoteProps>(
   ({ children, element = "BLOCKQUOTE", url, ...props }, ref) => {
     return (
       <Box
-        {...props}
+        {...safelySpreadBoxProps(props)}
         ref={ref}
         display="flex"
         columnGap="space50"
@@ -37,7 +38,7 @@ export const Blockquote = React.forwardRef<HTMLDivElement, BlockquoteProps>(
       >
         <BlockquoteIcon element={`${element}_ICON`} decorative={true} color="colorTextIcon" />
         <BlockquoteContext.Provider value={{ url }}>
-          <Box>{children}</Box>
+          <Box element={`INNER_${element}`}>{children}</Box>
         </BlockquoteContext.Provider>
       </Box>
     );

diff --git a/...nents/blockquote/src/BlockquoteSource.tsx → ...nts/blockquote/src/BlockquoteCitation.tsx b/...nents/blockquote/src/BlockquoteSource.tsx → ...nts/blockquote/src/BlockquoteCitation.tsx
@@ -1,41 +1,42 @@
 import { Anchor } from "@twilio-paste/anchor";
-import { Box, type BoxProps } from "@twilio-paste/box";
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
 import { Text } from "@twilio-paste/text";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import React from "react";
 
 import { BlockquoteContext } from "./BlockquoteContext";
 
-export interface BlockquoteSourceProps extends HTMLPasteProps<"div"> {
+export interface BlockquoteCitationProps extends HTMLPasteProps<"div"> {
   /**
    * Overrides the default element name to apply unique styles with the Customization Provider
-   * @default 'BLOCKQUOTE_SOURCE'
+   * @default 'BLOCKQUOTE_CITATION'
    * @type {BoxProps['element']}
-   * @memberof BlockquoteSourceProps
+   * @memberof BlockquoteCitationProps
    */
   element?: BoxProps["element"];
 
   /**
    * The author of the quote
    * @type {string}
-   * @memberof BlockquoteSourceProps
+   * @memberof BlockquoteCitationProps
    */
   author: string;
 
   /**
    * The source of the quote
    * @type {string}
-   * @memberof BlockquoteSourceProps
+   * @memberof BlockquoteCitationProps
    */
   source?: string;
 }
 
-export const BlockquoteSource = React.forwardRef<HTMLDivElement, BlockquoteSourceProps>(
-  ({ element = "BLOCKQUOTE_SOURCE", author, source, ...props }, ref) => {
+export const BlockquoteCitation = React.forwardRef<HTMLDivElement, BlockquoteCitationProps>(
+  ({ element = "BLOCKQUOTE_CITATION", author, source, ...props }, ref) => {
     const { url } = React.useContext(BlockquoteContext);
 
     return (
-      <Box marginTop="space30" as="p" element={element} {...props} ref={ref}>
+      <Box {...safelySpreadBoxProps(props)} marginTop="space30" as="p" element={element} ref={ref}>
         —{" "}
         <Text as="span" fontWeight="fontWeightSemibold" element={`${element}_AUTHOR`}>
           {author}
@@ -61,4 +62,4 @@ export const BlockquoteSource = React.forwardRef<HTMLDivElement, BlockquoteSourc
   },
 );
 
-BlockquoteSource.displayName = "BlockquoteSource";
+BlockquoteCitation.displayName = "BlockquoteCitation";
diff --git a/packages/paste-core/components/blockquote/src/index.tsx b/packages/paste-core/components/blockquote/src/index.tsx
@@ -2,5 +2,5 @@ export { Blockquote } from "./Blockquote";
 export type { BlockquoteProps } from "./Blockquote";
 export { BlockquoteContent } from "./BlockquoteContent";
 export type { BlockquoteContentProps } from "./BlockquoteContent";
-export { BlockquoteSource } from "./BlockquoteSource";
-export type { BlockquoteSourceProps } from "./BlockquoteSource";
+export { BlockquoteCitation } from "./BlockquoteCitation";
+export type { BlockquoteCitationProps } from "./BlockquoteCitation";
diff --git a/packages/paste-core/components/blockquote/stories/index.stories.tsx b/packages/paste-core/components/blockquote/stories/index.stories.tsx
@@ -4,7 +4,7 @@ import { CustomizationProvider } from "@twilio-paste/customization";
 import { useTheme } from "@twilio-paste/theme";
 import * as React from "react";
 
-import { Blockquote, BlockquoteContent, BlockquoteSource } from "../src";
+import { Blockquote, BlockquoteCitation, BlockquoteContent } from "../src";
 
 // eslint-disable-next-line import/no-default-export
 export default {
@@ -19,7 +19,7 @@ export const Default: StoryFn = () => (
         With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the
         human experience as a whole.
       </BlockquoteContent>
-      <BlockquoteSource author="Google" source="People + AI Guidebook" />
+      <BlockquoteCitation author="Google" source="People + AI Guidebook" />
     </Blockquote>
   </Box>
 );
@@ -31,7 +31,7 @@ export const WithoutUrl: StoryFn = () => (
         With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the
         human experience as a whole.
       </BlockquoteContent>
-      <BlockquoteSource author="Google" source="People + AI Guidebook" />
+      <BlockquoteCitation author="Google" source="People + AI Guidebook" />
     </Blockquote>
   </Box>
 );
@@ -43,7 +43,7 @@ export const WithoutSource: StoryFn = () => (
         With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the
         human experience as a whole.
       </BlockquoteContent>
-      <BlockquoteSource author="Google" />
+      <BlockquoteCitation author="Google" />
     </Blockquote>
   </Box>
 );
@@ -64,26 +64,29 @@ export const CustomizationBlockquote: StoryFn = (_args, { parameters: { isTestEn
           color: "colorTextSuccess",
           padding: "space60",
         },
+        BLOCKQUOTE_ICON: {
+          color: "colorTextWarning",
+        },
+        INNER_BLOCKQUOTE: { margin: "space40" },
         BLOCKQUOTE_CONTENT: {
           color: "colorTextWarning",
           fontFamily: "fontFamilyText",
           fontSize: "fontSize30",
           fontWeight: "fontWeightSemibold",
           lineHeight: "lineHeight40",
         },
-        BLOCKQUOTE_SOURCE: {
+        BLOCKQUOTE_CITATION: {
           color: "colorTextError",
           fontFamily: "fontFamilyText",
           fontSize: "fontSize20",
           fontWeight: "fontWeightSemibold",
           lineHeight: "lineHeight20",
         },
-        BLOCKQUOTE_ICON: {
-          color: "colorTextWarning",
-        },
-        BLOCKQUOTE_SOURCE_AUTHOR: {
+        BLOCKQUOTE_CITATION_AUTHOR: {
           color: "colorTextWarning",
         },
+        BLOCKQUOTE_CITATION_CITE: { fontFamily: "fontFamilyCode" },
+        BLOCKQUOTE_CITATION_ANCHOR: { color: "colorTextLinkStronger" },
       }}
     >
       <Box maxWidth="600px">
@@ -92,7 +95,7 @@ export const CustomizationBlockquote: StoryFn = (_args, { parameters: { isTestEn
             With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the
             human experience as a whole.
           </BlockquoteContent>
-          <BlockquoteSource author="Google" source="People + AI Guidebook" />
+          <BlockquoteCitation author="Google" source="People + AI Guidebook" />
         </Blockquote>
       </Box>
     </CustomizationProvider>

diff --git a/packages/paste-core/components/blockquote/type-docs.json b/packages/paste-core/components/blockquote/type-docs.json
@@ -3178,7 +3178,7 @@
       "externalProp": true
     }
   },
-  "BlockquoteSource": {
+  "BlockquoteCitation": {
     "author": {
       "type": "string",
       "defaultValue": null,
@@ -3602,7 +3602,7 @@
     },
     "element": {
       "type": "string",
-      "defaultValue": "'BLOCKQUOTE_SOURCE'",
+      "defaultValue": "'BLOCKQUOTE_CITATION'",
       "required": false,
       "externalProp": false,
       "description": "Overrides the default element name to apply unique styles with the Customization Provider"