Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(website): create website blockquote #299

Merged
merged 9 commits into from Feb 10, 2020
Merged

feat(website): create website blockquote #299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9c6c4b2
feat(website): add blockquote component
katieporter Feb 9, 2020
c14178d
feat(website): add optional source url to blockquote
katieporter Feb 10, 2020
4d3fd77
chore(website): clean up formatting on blockquote
katieporter Feb 10, 2020
1158d49
chore(website): change research insights to blockquotes
katieporter Feb 10, 2020
8b35547
fix(website): self-close empty component in Blockquote
katieporter Feb 10, 2020
85d63af
chore(website): clean up formatting in Blockquote
katieporter Feb 10, 2020
5b73bcc
chore(website): adjust blockquote formatting again
katieporter Feb 10, 2020
b4cac3b
fix(website): adjust blockquote prop typing to accept null and undefined
katieporter Feb 10, 2020
0e7f7a6
Merge branch 'master' into website-blockquote
katieporter Feb 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
42 changes: 42 additions & 0 deletions packages/paste-website/src/components/Blockquote.tsx
View file
Open in desktop
@@ -0,0 +1,42 @@
import * as React from 'react';
import {Anchor} from '@twilio-paste/anchor';
import {Box} from '@twilio-paste/box';
import {Text} from '@twilio-paste/text';

interface Props {
name?: string;
source?: string;
sourceUrl?: string;
}

const Citation: React.FC<Props> = ({name, source, sourceUrl}) => {
return (
<Text as="footer" fontWeight="fontWeightSemibold" marginTop="space40">
&mdash; {name}
{source && ', '}
{source && (
<cite>{sourceUrl ? <Anchor href={sourceUrl}>{source}</Anchor> : <Text as="span">{source}</Text>}</cite>
TheSisb marked this conversation as resolved.
Show resolved Hide resolved
)}
</Text>
);
};

export const Blockquote: React.FC<Props> = ({children, name, source, sourceUrl}) => {
return (
<Box
borderLeftWidth="borderWidth20"
borderColor="colorBorderPrimaryLight"
borderLeftStyle="solid"
paddingLeft="space60"
paddingTop="space30"
paddingBottom="space30"
marginTop="space60"
marginBottom="space60"
>
<Text as="p" fontSize="fontSize40" lineHeight="lineHeight50">
{children}
</Text>
{name && <Citation name={name} source={source} sourceUrl={sourceUrl} />}
TheSisb marked this conversation as resolved.
Show resolved Hide resolved
</Box>
);
};
22 changes: 8 additions & 14 deletions packages/paste-website/src/pages/components/alert/index.mdx
View file
Open in desktop
Expand Up @@ -15,6 +15,7 @@ import {Card} from '@twilio-paste/card';
import {Heading} from '@twilio-paste/heading';
import {Paragraph} from '@twilio-paste/paragraph';
import {DoDont, Do, Dont} from '../../../components/DoDont';
import {Blockquote} from '../../../components/Blockquote';
import {Callout, CalloutTitle, CalloutText} from '../../../components/callout';
import {Codeblock} from '../../../components/codeblock';
import {SidebarCategoryRoutes} from '../../../constants';
Expand Down Expand Up @@ -129,14 +130,10 @@ Use a neutral alert to notify a user of a change that's relevant for them to ach

In most cases, a neutral alert should be dismissible (*i.e.*, have a close button) and should be assigned `role="status"`

<Callout>
<CalloutTitle>Research insight</CalloutTitle>
<CalloutText>
From <Anchor href="https://www.nngroup.com/articles/indicators-validations-notifications/">Nielsen Norman Group</Anchor>:
"A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it will disrupt
their current task and be irrelevant to their current needs."
</CalloutText>
</Callout>
<Blockquote name="Nielsen Norman Group" source="Indicators, Validations, and Notifications" sourceUrl="https://www.nngroup.com/articles/indicators-validations-notifications/">
A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it will disrupt
their current task and be irrelevant to their current needs.
</Blockquote>

<LivePreview scope={{Alert, Text, Anchor}} language="jsx">
{`<Alert variant="neutral">
Expand Down Expand Up @@ -210,12 +207,9 @@ Keep in mind that the longer an alert is present, the more it starts looking lik

Keep alert text brief by placing only the highest priority information in an alert. Too much text in an alert can overwhelm a user. A good rule of thumb is to keep alert text to a single line in a desktop-sized container, or limiting it to 90 characters.

<Callout>
<CalloutTitle>Research insight</CalloutTitle>
<CalloutText>
From <Anchor href="https://practicaltypography.com/responsive-web-design.html">Butterick's Practical Typography</Anchor>: "Regardless of screen width, the optimal line length is still 45–90 characters. As you test your layout, make sure that text elements stay within this range."
</CalloutText>
</Callout>
<Blockquote name="Matthew Butterick" source="Butterick's Practical Typography" sourceUrl="https://practicaltypography.com/responsive-web-design.html">
Regardless of screen width, the optimal line length is still 45–90 characters. As you test your layout, make sure that text elements stay within this range.
</Blockquote>

Compose an alert with:

Expand Down