chore(example-text, blockquote): add docs

.changeset/rare-gifts-wash.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/blockquote": minor
+"@twilio-paste/core": minor
+---
+
+[Blockquote] add default bottom margin of space-70 to Blockquote, add marginBottom prop for the option to remove bottom margin when necessary.

cypress/integration/sitemap-vrt/constants.ts

@@ -48,6 +48,9 @@ export const SITEMAP = [
   "/components/badge/",
   "/components/badge/api",
   "/components/badge/changelog",
+  "/components/blockquote/",
+  "/components/blockquote/api",
+  "/components/blockquote/changelog",
   "/components/callout/",
   "/components/callout/api",
   "/components/callout/changelog",
@@ -87,6 +90,9 @@ export const SITEMAP = [
   "/components/disclosure/",
   "/components/disclosure/api",
   "/components/disclosure/changelog",
+  "/components/example-text/",
+  "/components/example-text/api",
+  "/components/example-text/changelog",
   "/components/button/",
   "/components/button/api",
   "/components/button/changelog",

packages/paste-core/components/blockquote/src/Blockquote.tsx

@@ -21,10 +21,16 @@ export interface BlockquoteProps extends HTMLPasteProps<"div"> {
    * @memberof BlockquoteProps
    */
   url?: string;
+  /**
+   * Remove the bottom margin
+   * @type {"space0" | "space70"}
+   * @memberof BlockquoteProps
+   */
+  marginBottom?: "space0" | "space70";
 }
 
 export const Blockquote = React.forwardRef<HTMLDivElement, BlockquoteProps>(
-  ({ children, element = "BLOCKQUOTE", url, ...props }, ref) => {
+  ({ children, element = "BLOCKQUOTE", url, marginBottom = "space70", ...props }, ref) => {
     return (
       <Box
         {...safelySpreadBoxProps(props)}
@@ -34,6 +40,7 @@ export const Blockquote = React.forwardRef<HTMLDivElement, BlockquoteProps>(
         alignItems="flex-start"
         lineHeight="lineHeight30"
         fontSize="fontSize30"
+        marginBottom={marginBottom}
         element={element}
       >
         <BlockquoteIcon element={`${element}_ICON`} decorative={true} color="colorTextIcon" />

packages/paste-core/components/blockquote/stories/index.stories.tsx

@@ -48,6 +48,29 @@ export const WithoutSource: StoryFn = () => (
   </Box>
 );
 
+export const BottomMargin: StoryFn = () => (
+  <Box display="flex" flexDirection="column" rowGap="space60">
+    <Box maxWidth="600px" borderStyle="solid">
+      <Blockquote url="#">
+        <BlockquoteContent>
+          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>
+        <BlockquoteCitation author="Google" source="People + AI Guidebook" />
+      </Blockquote>
+    </Box>
+    <Box maxWidth="600px" borderStyle="solid">
+      <Blockquote url="#" marginBottom="space0">
+        <BlockquoteContent>
+          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>
+        <BlockquoteCitation author="Google" source="People + AI Guidebook" />
+      </Blockquote>
+    </Box>
+  </Box>
+);
+
 export const CustomizationBlockquote: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
   const currentTheme = useTheme();
   return (

packages/paste-core/components/blockquote/type-docs.json

@@ -495,6 +495,13 @@
       "required": false,
       "externalProp": true
     },
+    "marginBottom": {
+      "type": "\"space0\" | \"space70\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": false,
+      "description": "Remove the bottom margin"
+    },
     "nonce": {
       "type": "string",
       "defaultValue": null,

packages/paste-core/core-bundle/blockquote/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@twilio-paste-core/blockquote",
+  "version": "0.0.0",
+  "private": true,
+  "sideEffects": false,
+  "main": "../dist/blockquote.js",
+  "types": "../dist/blockquote.d.ts"
+}

packages/paste-website/package.json

@@ -43,6 +43,7 @@
     "@twilio-paste/avatar": "^9.1.0",
     "@twilio-paste/badge": "^8.3.1",
     "@twilio-paste/base-radio-checkbox": "^13.1.0",
+    "@twilio-paste/blockquote": "^0.0.0",
     "@twilio-paste/box": "^10.3.0",
     "@twilio-paste/breadcrumb": "^11.1.1",
     "@twilio-paste/button": "^14.1.2",
@@ -70,6 +71,7 @@
     "@twilio-paste/display-heading": "^4.1.0",
     "@twilio-paste/display-pill-group": "^8.0.1",
     "@twilio-paste/dropdown-library": "^3.0.0",
+    "@twilio-paste/example-text": "^0.0.0",
     "@twilio-paste/file-picker": "^4.1.0",
     "@twilio-paste/file-uploader": "^4.1.0",
     "@twilio-paste/flex": "^8.1.0",

packages/paste-website/src/pages/components/blockquote/api.mdx

@@ -0,0 +1,65 @@
+import Changelog from '@twilio-paste/blockquote/CHANGELOG.md'; // I don't know why this is needed but if you remove it the page fails to render
+import packageJson from '@twilio-paste/blockquote/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';
+
+export const meta = {
+  title: 'Blockquote - Components',
+  package: '@twilio-paste/blockquote',
+  description: packageJson.description,
+  slug: '/components/blockquote/api',
+};
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Blockquote');
+  const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/blockquote');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      componentApi,
+      mdxHeadings: [...mdxHeadings, ...componentApiTocData],
+      navigationData,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/blockquote',
+        storybookUrl: '/?path=/story/components-blockquote--default',
+      },
+    },
+  };
+};
+
+## Installation
+
+```bash
+yarn add @twilio-paste/blockquote - or - yarn add @twilio-paste/core
+```
+
+## Usage
+
+```jsx
+import { Blockquote, BlockquoteContent, BlockquoteCitation } from '@twilio-paste/core/blockquote';
+
+const BlockquoteExample = () => {
+  return (
+    <Blockquote url="#">
+      <BlockquoteContent>
+        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>
+      <BlockquoteCitation author="Google" source="People + AI Guidebook" />
+    </Blockquote>
+  );
+};
+```
+
+## Props
+
+<PropsTable componentApi={props.componentApi} />

packages/paste-website/src/pages/components/blockquote/changelog.mdx

@@ -0,0 +1,36 @@
+import {SidebarCategoryRoutes} from '../../../constants';
+import Changelog from '@twilio-paste/blockquote/CHANGELOG.md';
+import packageJson from '@twilio-paste/blockquote/package.json';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData} from '../../../utils/api';
+
+export const meta = {
+  title: 'Blockquote - Components',
+  package: '@twilio-paste/blockquote',
+  description: packageJson.description,
+  slug: '/components/blockquote/changelog',
+};
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Blockquote');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      navigationData,
+      mdxHeadings,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/blockquote',
+        storybookUrl: '/?path=/story/components-blockquote--default',
+      },
+    },
+  };
+};
+
+<Changelog />