Skip to content

Commit

Permalink
chore(example-text, blockquote): add docs (#4167)
Browse files Browse the repository at this point in the history
  • Loading branch information
nkrantz authored Dec 4, 2024
1 parent 36bd1e3 commit 077d397
Show file tree
Hide file tree
Showing 14 changed files with 638 additions and 1 deletion.
6 changes: 6 additions & 0 deletions .changeset/rare-gifts-wash.md
Original file line number Diff line number Diff line change
@@ -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.
6 changes: 6 additions & 0 deletions cypress/integration/sitemap-vrt/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
9 changes: 8 additions & 1 deletion packages/paste-core/components/blockquote/src/Blockquote.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand All @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
7 changes: 7 additions & 0 deletions packages/paste-core/components/blockquote/type-docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
8 changes: 8 additions & 0 deletions packages/paste-core/core-bundle/blockquote/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
2 changes: 2 additions & 0 deletions packages/paste-website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
65 changes: 65 additions & 0 deletions packages/paste-website/src/pages/components/blockquote/api.mdx
Original file line number Diff line number Diff line change
@@ -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} />
Original file line number Diff line number Diff line change
@@ -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 />
Loading

0 comments on commit 077d397

Please sign in to comment.