Skip to content

Commit

Permalink
chore: jhanvi feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkrantz
nkrantz committed Dec 4, 2024
1 parent 10618ba commit 1cf4679
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 16 deletions.
44 changes: 36 additions & 8 deletions packages/paste-website/src/pages/components/blockquote/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {HelpText} from '@twilio-paste/help-text'
import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'
import {Box} from "@twilio-paste/box"
import {Paragraph} from "@twilio-paste/paragraph"
import {Table, THead, Tr, Th, TBody, Td} from '@twilio-paste/table';
import {Anchor} from '@twilio-paste/anchor'

import {SidebarCategoryRoutes} from '../../../constants';
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
Expand Down Expand Up @@ -69,14 +71,40 @@ A Blockquote is a stylized text format used to highlight a text excerpt or quote

### How to decide which components to use to make your text stand out

Component | Usage | Example
----------------|-------|-----
[Example Text](/components/example-text) | Use when you want to provide contextual examples of user input. | <ExampleText>This is an Example Text that guides users on how to respond to a system</ExampleText>
Blockquote | Use to highlight quotations from an external source or customer feedback. | <Blockquote><BlockquoteContent>This is a Blockquote pulled from an outside source.</BlockquoteContent><BlockquoteCitation author="Google" /></Blockquote>
[Code Block](/components/code-block) | Use when you need to display blocks of code and when the user needs to copy a command to put it into a CLI. | <CodeBlock variant="single-line" code={`const accountSID = process.env.TWILIO_ACCOUNT_SID`}/>
[Inline Code](/components/inline-code) | Use to emphasize short, inline pieces of computer code such as variable names and function calls. | <InlineCode>console.log(mySustainabilityGoals)</InlineCode>
[Help Text](/components/help-text) | Use below a form field to help users prevent an error and describe what makes the form field successful. | <><Label htmlFor="email_address" required>Email address</Label><Input aria-describedby="email_help_text" id="email_address" name="email_address" type="email" placeholder="example@twilio.com" onChange={()=>{}} required/><HelpText id="email_help_text">Use your work email address.</HelpText></>
[Callout](/components/callout) | Use a Callout to highlight any other important information. | <Callout variant='neutral'><CalloutHeading as="h2">Heads up!</CalloutHeading><CalloutText>This is some information you need to know.</CalloutText></Callout>
<Box marginBottom="space70">
<Table>
<THead>
<Tr>
<Th>Component</Th>
<Th>Usage</Th>
<Th width="size40">Example</Th>
</Tr>
</THead>
<TBody>
<Tr>
<Td>Blockquote</Td>
<Td>Use to highlight quotations from an external source or customer feedback.</Td>
<Td>
<Blockquote marginBottom="space0"><BlockquoteContent>This is a Blockquote pulled from an outside source.</BlockquoteContent><BlockquoteCitation author="Google" /></Blockquote>
</Td>
</Tr>
<Tr>
<Td><Anchor href="/components/example-text">Example Text</Anchor></Td>
<Td>Use when you want to provide contextual examples of user input.</Td>
<Td>
<ExampleText>This is an Example Text that guides users on how to respond to a system</ExampleText>
</Td>
</Tr>
<Tr>
<Td><Anchor href="/components/callout">Callout</Anchor></Td>
<Td>Use a Callout to highlight any other important information.</Td>
<Td>
<Callout variant='neutral'><CalloutHeading as="h2">Heads up!</CalloutHeading><CalloutText>This is some information you need to know.</CalloutText></Callout>
</Td>
</Tr>
</TBody>
</Table>
</Box>

## Examples

Expand Down
66 changes: 58 additions & 8 deletions packages/paste-website/src/pages/components/example-text/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ import {HelpText} from '@twilio-paste/help-text'
import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'
import {Paragraph} from '@twilio-paste/paragraph'
import {Blockquote, BlockquoteCitation, BlockquoteContent} from '@twilio-paste/blockquote'
import {Table, THead, Tr, Th, TBody, Td} from '@twilio-paste/table';
import {Anchor} from '@twilio-paste/anchor'
import {Box} from '@twilio-paste/box'

import {SidebarCategoryRoutes} from '../../../constants';
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
Expand Down Expand Up @@ -63,14 +66,61 @@ Use Example Text so users can easily differentiate between examples and regular

### How to decide which components to use to make your text stand out

Component | Usage | Example
----------------|-------|-----
Example Text | Use when you want to provide contextual examples of user input. | <ExampleText>This is an Example Text that guides users on how to respond to a system</ExampleText>
[Blockquote](/components/blockquote) | Use to highlight quotations from an external source or customer feedback. | <Blockquote><BlockquoteContent>This is a Blockquote pulled from an outside source.</BlockquoteContent><BlockquoteCitation author="Google" /></Blockquote>
[Code Block](/components/code-block) | Use when you need to display blocks of code and when the user needs to copy a command to put it into a CLI. | <CodeBlock variant="single-line" code={`const accountSID = process.env.TWILIO_ACCOUNT_SID`}/>
[Inline Code](/components/inline-code) | Use to emphasize short, inline pieces of computer code such as variable names and function calls. | <InlineCode>console.log(mySustainabilityGoals)</InlineCode>
[Help Text](/components/help-text) | Use below a form field to help users prevent an error and describe what makes the form field successful. | <><Label htmlFor="email_address" required>Email address</Label><Input aria-describedby="email_help_text" id="email_address" name="email_address" type="email" placeholder="example@twilio.com" onChange={()=>{}} required/><HelpText id="email_help_text">Use your work email address.</HelpText></>
[Callout](/components/callout) | Use a Callout to highlight any other important information. | <Callout variant='neutral'><CalloutHeading as="h2">Heads up!</CalloutHeading><CalloutText>This is some information you need to know.</CalloutText></Callout>
<Box marginBottom="space70">
<Table>
<THead>
<Tr>
<Th>Component</Th>
<Th>Usage</Th>
<Th width="size40">Example</Th>
</Tr>
</THead>
<TBody>
<Tr>
<Td>Example Text</Td>
<Td>Use when you want to provide contextual examples of user input.</Td>
<Td>
<ExampleText>This is an Example Text that guides users on how to respond to a system</ExampleText>
</Td>
</Tr>
<Tr>
<Td><Anchor href="/components/blockquote">Blockquote</Anchor></Td>
<Td>Use to highlight quotations from an external source or customer feedback.</Td>
<Td>
<Blockquote marginBottom="space0"><BlockquoteContent>This is a Blockquote pulled from an outside source.</BlockquoteContent><BlockquoteCitation author="Google" /></Blockquote>
</Td>
</Tr>
<Tr>
<Td><Anchor href="/components/code-block">Code Block</Anchor></Td>
<Td>Use when you need to display blocks of code and when the user needs to copy a command to put it into a CLI.</Td>
<Td>
<CodeBlock variant="single-line" code={`const accountSID = process.env.TWILIO_ACCOUNT_SID`}/>
</Td>
</Tr>
<Tr>
<Td><Anchor href="/components/inline-code">Inline Code</Anchor></Td>
<Td>Use to emphasize short, inline pieces of computer code such as variable names and function calls.</Td>
<Td>
<InlineCode>console.log(mySustainabilityGoals)</InlineCode>
</Td>
</Tr>
<Tr>
<Td><Anchor href="/components/help-text">Help Text</Anchor></Td>
<Td>Use below a form field to help users prevent an error and describe what makes the form field successful.</Td>
<Td>
<><Label htmlFor="email_address" required>Email address</Label><Input aria-describedby="email_help_text" id="email_address" name="email_address" type="email" placeholder="example@twilio.com" onChange={()=>{}} required/><HelpText id="email_help_text">Use your work email address.</HelpText></>
</Td>
</Tr>
<Tr>
<Td><Anchor href="/components/callout">Callout</Anchor></Td>
<Td>Use a Callout to highlight any other important information.</Td>
<Td>
<Callout variant='neutral'><CalloutHeading as="h2">Heads up!</CalloutHeading><CalloutText>This is some information you need to know.</CalloutText></Callout>
</Td>
</Tr>
</TBody>
</Table>
</Box>

## Examples

Expand Down

0 comments on commit 1cf4679

Please sign in to comment.