Skip to content

Commit fac2f3f

Browse files
Andrew-K-LamCharlie Hay
Andrew-K-Lam
authored and
Charlie Hay
committed
Community quote (#217)
* docs(docs): use tds link in docs * chore(deps): updated package lock file * feat(community-block-quote): added block quote component * test(community-block-quote): add e2e for blockquote * feat(community-block-quote): update markdown file * feat(community-block-quote): update rollup index files * chore(community-block-quote): bump react and react dom version * feat(community-block-quote): added styled component to peer dependency * test(community-block-quote): updated e2e test * test(community-block-quote): use mount for snapshot tests * chore(community-block-quote): align styled component version * chore(community-blockquote): rename BlockQuote to Blockquote * test(community-blockquote): rename BlockQuote to Blockquote * chore(community-blockquote): update package lock file * chore(scripts): update scaffold script * chore(deps): update package-lock * docs(docs): use tds link in docs * chore(deps): updated package lock file * feat(community-block-quote): added block quote component * test(community-block-quote): add e2e for blockquote * feat(community-block-quote): update markdown file * feat(community-block-quote): update rollup index files * chore(community-block-quote): bump react and react dom version * feat(community-block-quote): added styled component to peer dependency * test(community-block-quote): updated e2e test * test(community-block-quote): use mount for snapshot tests * chore(community-block-quote): align styled component version * chore(community-blockquote): rename BlockQuote to Blockquote * test(community-blockquote): rename BlockQuote to Blockquote * chore(community-blockquote): update package lock file * chore(community-blockquote): rebased from master
1 parent 9b776cd commit fac2f3f

File tree

13 files changed

+328
-23
lines changed

13 files changed

+328
-23
lines changed

‎docs/setup/tds-core-globals.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import FlexGrid from '@tds/core-flex-grid'
44
import HairlineDivider from '@tds/core-hairline-divider'
55
import Heading from '@tds/core-heading'
66
import Input from '@tds/core-input'
7-
import Link from '@tds/core-link'
7+
import TdsLink from '@tds/core-link'
88
import OrderedList from '@tds/core-ordered-list'
99
import Paragraph from '@tds/core-paragraph'
1010
import Strong from '@tds/core-strong'
@@ -19,7 +19,7 @@ Object.assign(global, {
1919
HairlineDivider,
2020
Heading,
2121
Input,
22-
Link,
22+
TdsLink,
2323
OrderedList,
2424
Paragraph,
2525
Strong,

‎e2e/output/components/Blockquote/baseline/chrome_headless.png‎

80.2 KB
Loading

‎package-lock.json‎

Lines changed: 7 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/Blockquote/Blockquote.jsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import styled from 'styled-components'
4+
import Heading from '@tds/core-heading'
5+
import Box from '@tds/core-box'
6+
import safeRest from '@tds/shared-safe-rest'
7+
import { media } from '@tds/core-responsive'
8+
import ColoredTextProvider from '../../shared/components/ColoredTextProvider/ColoredTextProvider'
9+
10+
const Wrapper = styled.blockquote({
11+
borderLeft: '4px solid purple',
12+
...media.until('md').css({
13+
paddingLeft: '2rem',
14+
}),
15+
...media.from('md').css({
16+
paddingLeft: '3rem',
17+
}),
18+
})
19+
20+
/**
21+
* The Blockquote component is used to highlight text as a `blockquote` html tag.
22+
*
23+
* @version ./package.json
24+
*/
25+
const Blockquote = ({ children, ...rest }) => (
26+
<Wrapper {...safeRest(rest)}>
27+
<Box vertical={4}>
28+
<Heading level="h2" tag="span">
29+
<ColoredTextProvider>{children}</ColoredTextProvider>
30+
</Heading>
31+
</Box>
32+
</Wrapper>
33+
)
34+
35+
Blockquote.propTypes = {
36+
/**
37+
* Specifies the text to be displayed within Blockquote.
38+
*/
39+
children: PropTypes.node.isRequired,
40+
}
41+
42+
export default Blockquote

‎packages/Blockquote/Blockquote.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
The `Blockquote` component wraps content in an HTML `<blockquote>` and `<span>` element and renders it as an `@tds/core-heading <h2>` component.
2+
3+
### Usage Criteria
4+
5+
- Use to highlight text to the user
6+
- If using as a quote, always attribute a name to your quote
7+
- Always include the correct quotation marks for EN (“”) and FR («»)
8+
- If you’re quoting from an external source, include the source as a hyperlink
9+
- If using a link within `Blockquote`, use `Link` from `@tds/core-link`
10+
- Indicate cuts to quotes with ellipses (...) and edits with square brackets `[`...`]`
11+
12+
```jsx
13+
<Blockquote>
14+
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
15+
labore et dolore magna aliqua” - <TdsLink href="https://tds.telus.com/">Name</TdsLink>
16+
</Blockquote>
17+
```

‎packages/Blockquote/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# TDS Community: Blockquote

‎packages/Blockquote/__tests__/Blockquote.spec.jsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react'
2+
import { mount, shallow } from 'enzyme'
3+
4+
import Blockquote from '../Blockquote'
5+
6+
describe('Blockquote', () => {
7+
const defaultProps = {
8+
children: 'This is an example of Blockquote',
9+
}
10+
11+
const doMount = (props = {}) => mount(<Blockquote {...defaultProps} {...props} />)
12+
13+
const doShallow = (props = {}) => shallow(<Blockquote {...defaultProps} {...props} />)
14+
15+
it('renders', () => {
16+
const blockQuote = doMount()
17+
18+
expect(blockQuote).toMatchSnapshot()
19+
})
20+
21+
it('does other things', () => {
22+
const blockQuote = doMount()
23+
24+
expect(blockQuote).toExist()
25+
})
26+
27+
it('passes additional attributes to the element', () => {
28+
const blockQuote = doMount({ id: 'the-id', 'data-some-attr': 'some value' })
29+
30+
expect(blockQuote).toHaveProp('id', 'the-id')
31+
expect(blockQuote).toHaveProp('data-some-attr', 'some value')
32+
})
33+
34+
it('does not allow custom CSS', () => {
35+
const blockQuote = doShallow({
36+
className: 'my-custom-class',
37+
style: { color: 'hotpink' },
38+
})
39+
40+
expect(blockQuote).not.toHaveProp('className', 'my-custom-class')
41+
expect(blockQuote).not.toHaveProp('style')
42+
})
43+
})

‎packages/Blockquote/__tests__/__snapshots__/Blockquote.spec.jsx.snap‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Blockquote renders 1`] = `
4+
.c0 {
5+
border-left: 4px solid purple;
6+
}
7+
8+
@media (max-width:768px) {
9+
.c0 {
10+
padding-left: 2rem;
11+
}
12+
}
13+
14+
@media (min-width:768px) {
15+
.c0 {
16+
padding-left: 3rem;
17+
}
18+
}
19+
20+
<Blockquote>
21+
<styled.blockquote>
22+
<StyledComponent
23+
forwardedComponent={
24+
Object {
25+
"$$typeof": Symbol(react.forward_ref),
26+
"attrs": Array [],
27+
"componentStyle": ComponentStyle {
28+
"componentId": "sc-bdVaJa",
29+
"isStatic": true,
30+
"lastClassName": "c0",
31+
"rules": Array [
32+
"border-left: 4px solid purple; @media (max-width: 768px) {
33+
padding-left: 2rem;
34+
} @media (min-width: 768px) {
35+
padding-left: 3rem;
36+
}",
37+
],
38+
},
39+
"displayName": "styled.blockquote",
40+
"foldedComponentIds": Array [],
41+
"render": [Function],
42+
"styledComponentId": "sc-bdVaJa",
43+
"target": "blockquote",
44+
"toString": [Function],
45+
"warnTooManyClasses": [Function],
46+
"withComponent": [Function],
47+
}
48+
}
49+
forwardedRef={null}
50+
>
51+
<blockquote
52+
className="c0"
53+
>
54+
<Box
55+
inline={false}
56+
tag="div"
57+
vertical={4}
58+
>
59+
<div
60+
className="TDS_Box-modules__verticalPadding-4___QMNNa"
61+
>
62+
<Heading
63+
invert={false}
64+
level="h2"
65+
tag="span"
66+
>
67+
<span
68+
className="TDS_Heading-modules__h2___l3LmI TDS_Heading-modules__wordBreak___UVmND TDS_Spacing-modules__noSpacing___XPYDG TDS_Heading-modules__secondary___3skcz"
69+
>
70+
<ColoredTextProvider
71+
colorClassName={null}
72+
>
73+
<div>
74+
This is an example of Blockquote
75+
</div>
76+
</ColoredTextProvider>
77+
</span>
78+
</Heading>
79+
</div>
80+
</Box>
81+
</blockquote>
82+
</StyledComponent>
83+
</styled.blockquote>
84+
</Blockquote>
85+
`;

‎packages/Blockquote/index.cjs.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const Blockquote = require('./dist/index.cjs')
2+
3+
module.exports = Blockquote

‎packages/Blockquote/index.es.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Blockquote from './dist/index.es'
2+
3+
export default Blockquote

0 commit comments

Comments
 (0)