Skip to content

Commit 077d397

Browse files
nkrantznkrantz
authored
chore(example-text, blockquote): add docs (#4167)
1 parent 36bd1e3 commit 077d397

File tree

14 files changed

+638
-1
lines changed

14 files changed

+638
-1
lines changed

‎.changeset/rare-gifts-wash.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/blockquote": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[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‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ export const SITEMAP = [
4848
"/components/badge/",
4949
"/components/badge/api",
5050
"/components/badge/changelog",
51+
"/components/blockquote/",
52+
"/components/blockquote/api",
53+
"/components/blockquote/changelog",
5154
"/components/callout/",
5255
"/components/callout/api",
5356
"/components/callout/changelog",
@@ -87,6 +90,9 @@ export const SITEMAP = [
8790
"/components/disclosure/",
8891
"/components/disclosure/api",
8992
"/components/disclosure/changelog",
93+
"/components/example-text/",
94+
"/components/example-text/api",
95+
"/components/example-text/changelog",
9096
"/components/button/",
9197
"/components/button/api",
9298
"/components/button/changelog",

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,16 @@ export interface BlockquoteProps extends HTMLPasteProps<"div"> {
2121
* @memberof BlockquoteProps
2222
*/
2323
url?: string;
24+
/**
25+
* Remove the bottom margin
26+
* @type {"space0" | "space70"}
27+
* @memberof BlockquoteProps
28+
*/
29+
marginBottom?: "space0" | "space70";
2430
}
2531

2632
export const Blockquote = React.forwardRef<HTMLDivElement, BlockquoteProps>(
27-
({ children, element = "BLOCKQUOTE", url, ...props }, ref) => {
33+
({ children, element = "BLOCKQUOTE", url, marginBottom = "space70", ...props }, ref) => {
2834
return (
2935
<Box
3036
{...safelySpreadBoxProps(props)}
@@ -34,6 +40,7 @@ export const Blockquote = React.forwardRef<HTMLDivElement, BlockquoteProps>(
3440
alignItems="flex-start"
3541
lineHeight="lineHeight30"
3642
fontSize="fontSize30"
43+
marginBottom={marginBottom}
3744
element={element}
3845
>
3946
<BlockquoteIcon element={`${element}_ICON`} decorative={true} color="colorTextIcon" />

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,29 @@ export const WithoutSource: StoryFn = () => (
4848
</Box>
4949
);
5050

51+
export const BottomMargin: StoryFn = () => (
52+
<Box display="flex" flexDirection="column" rowGap="space60">
53+
<Box maxWidth="600px" borderStyle="solid">
54+
<Blockquote url="#">
55+
<BlockquoteContent>
56+
With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the
57+
human experience as a whole.
58+
</BlockquoteContent>
59+
<BlockquoteCitation author="Google" source="People + AI Guidebook" />
60+
</Blockquote>
61+
</Box>
62+
<Box maxWidth="600px" borderStyle="solid">
63+
<Blockquote url="#" marginBottom="space0">
64+
<BlockquoteContent>
65+
With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the
66+
human experience as a whole.
67+
</BlockquoteContent>
68+
<BlockquoteCitation author="Google" source="People + AI Guidebook" />
69+
</Blockquote>
70+
</Box>
71+
</Box>
72+
);
73+
5174
export const CustomizationBlockquote: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
5275
const currentTheme = useTheme();
5376
return (

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -495,6 +495,13 @@
495495
"required": false,
496496
"externalProp": true
497497
},
498+
"marginBottom": {
499+
"type": "\"space0\" | \"space70\"",
500+
"defaultValue": null,
501+
"required": false,
502+
"externalProp": false,
503+
"description": "Remove the bottom margin"
504+
},
498505
"nonce": {
499506
"type": "string",
500507
"defaultValue": null,

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "@twilio-paste-core/blockquote",
3+
"version": "0.0.0",
4+
"private": true,
5+
"sideEffects": false,
6+
"main": "../dist/blockquote.js",
7+
"types": "../dist/blockquote.d.ts"
8+
}

‎packages/paste-website/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"@twilio-paste/avatar": "^9.1.0",
4444
"@twilio-paste/badge": "^8.3.1",
4545
"@twilio-paste/base-radio-checkbox": "^13.1.0",
46+
"@twilio-paste/blockquote": "^0.0.0",
4647
"@twilio-paste/box": "^10.3.0",
4748
"@twilio-paste/breadcrumb": "^11.1.1",
4849
"@twilio-paste/button": "^14.1.2",
@@ -70,6 +71,7 @@
7071
"@twilio-paste/display-heading": "^4.1.0",
7172
"@twilio-paste/display-pill-group": "^8.0.1",
7273
"@twilio-paste/dropdown-library": "^3.0.0",
74+
"@twilio-paste/example-text": "^0.0.0",
7375
"@twilio-paste/file-picker": "^4.1.0",
7476
"@twilio-paste/file-uploader": "^4.1.0",
7577
"@twilio-paste/flex": "^8.1.0",

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
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
2+
import packageJson from '@twilio-paste/blockquote/package.json';
3+
4+
import {SidebarCategoryRoutes} from '../../../constants';
5+
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
6+
import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';
7+
8+
export const meta = {
9+
title: 'Blockquote - Components',
10+
package: '@twilio-paste/blockquote',
11+
description: packageJson.description,
12+
slug: '/components/blockquote/api',
13+
};
14+
15+
export default ComponentPageLayout;
16+
17+
export const getStaticProps = async () => {
18+
const navigationData = await getNavigationData();
19+
const feature = await getFeature('Blockquote');
20+
const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/blockquote');
21+
return {
22+
props: {
23+
data: {
24+
...packageJson,
25+
...feature,
26+
},
27+
componentApi,
28+
mdxHeadings: [...mdxHeadings, ...componentApiTocData],
29+
navigationData,
30+
pageHeaderData: {
31+
categoryRoute: SidebarCategoryRoutes.COMPONENTS,
32+
githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/blockquote',
33+
storybookUrl: '/?path=/story/components-blockquote--default',
34+
},
35+
},
36+
};
37+
};
38+
39+
## Installation
40+
41+
```bash
42+
yarn add @twilio-paste/blockquote - or - yarn add @twilio-paste/core
43+
```
44+
45+
## Usage
46+
47+
```jsx
48+
import { Blockquote, BlockquoteContent, BlockquoteCitation } from '@twilio-paste/core/blockquote';
49+
50+
const BlockquoteExample = () => {
51+
return (
52+
<Blockquote url="#">
53+
<BlockquoteContent>
54+
With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the
55+
human experience as a whole.
56+
</BlockquoteContent>
57+
<BlockquoteCitation author="Google" source="People + AI Guidebook" />
58+
</Blockquote>
59+
);
60+
};
61+
```
62+
63+
## Props
64+
65+
<PropsTable componentApi={props.componentApi} />

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {SidebarCategoryRoutes} from '../../../constants';
2+
import Changelog from '@twilio-paste/blockquote/CHANGELOG.md';
3+
import packageJson from '@twilio-paste/blockquote/package.json';
4+
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
5+
import {getFeature, getNavigationData} from '../../../utils/api';
6+
7+
export const meta = {
8+
title: 'Blockquote - Components',
9+
package: '@twilio-paste/blockquote',
10+
description: packageJson.description,
11+
slug: '/components/blockquote/changelog',
12+
};
13+
14+
export default ComponentPageLayout;
15+
16+
export const getStaticProps = async () => {
17+
const navigationData = await getNavigationData();
18+
const feature = await getFeature('Blockquote');
19+
return {
20+
props: {
21+
data: {
22+
...packageJson,
23+
...feature,
24+
},
25+
navigationData,
26+
mdxHeadings,
27+
pageHeaderData: {
28+
categoryRoute: SidebarCategoryRoutes.COMPONENTS,
29+
githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/blockquote',
30+
storybookUrl: '/?path=/story/components-blockquote--default',
31+
},
32+
},
33+
};
34+
};
35+
36+
<Changelog />

0 commit comments

Comments
 (0)