Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Adds Brand component to Psammead #105

Merged
merged 31 commits into from
Dec 11, 2018
Merged

Adds Brand component to Psammead #105

Show file tree
Hide file tree
Changes from 30 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
b1504b8
initial package
radiocontrolled Dec 4, 2018
54161aa
Merge branch 'latest' into add-brand
radiocontrolled Dec 5, 2018
dd70e7c
CHANGELOG
radiocontrolled Dec 5, 2018
d441dec
CHANGELOG
radiocontrolled Dec 5, 2018
4421697
WIP - add visually hidden text dep
radiocontrolled Dec 6, 2018
0d32119
update imports for styles
radiocontrolled Dec 6, 2018
db4d127
WIP - update test dep
radiocontrolled Dec 6, 2018
9c1f8f8
move index files and snapshots to src dir
radiocontrolled Dec 6, 2018
5d39cd0
add selector-type-no-unknown to stylelintrc
radiocontrolled Dec 7, 2018
907dc0a
WIP - vh test package lock
radiocontrolled Dec 7, 2018
9e3ad3d
adds babel-plugin-styled-components as a plugin
radiocontrolled Dec 7, 2018
7afefa6
update babel-plugin-styled-components
radiocontrolled Dec 7, 2018
e352655
readme and stylelint whitespace
radiocontrolled Dec 7, 2018
17c9231
merge latest and bring back visually hidden text
radiocontrolled Dec 7, 2018
a98f58e
Update .stylelintrc
ChrisBAshton Dec 7, 2018
10d77e1
PR comments
radiocontrolled Dec 7, 2018
2e17eb8
Merge branch 'add-brand' of github.com:bbc-news/psammead into add-brand
radiocontrolled Dec 7, 2018
f55d28d
PR updates
radiocontrolled Dec 7, 2018
c7eec33
merge latest
radiocontrolled Dec 7, 2018
4303645
Merge branch 'latest' into add-brand
radiocontrolled Dec 7, 2018
fcf5dec
Merge branch 'latest' into add-brand
radiocontrolled Dec 7, 2018
e46a6d0
update from latest
radiocontrolled Dec 7, 2018
decfb44
Merge branch 'latest' into add-brand
radiocontrolled Dec 10, 2018
cf0f203
Update packages/components/psammead-brand/src/index.jsx
sareh Dec 10, 2018
7a5c162
Merge branch 'add-brand' of github.com:bbc-news/psammead into add-brand
radiocontrolled Dec 10, 2018
2f6a28c
Code review changes
radiocontrolled Dec 10, 2018
fcea0b5
adds babel-plugin-styled-components
radiocontrolled Dec 10, 2018
f7ba1b5
Update packages/components/psammead-brand/README.md
Dec 10, 2018
25d29a4
\@bbc/gel-foundations-styled-components removed
radiocontrolled Dec 10, 2018
219498d
merge latest
radiocontrolled Dec 11, 2018
0d414fa
merge latest
radiocontrolled Dec 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
const presets = ['@babel/preset-env', '@babel/preset-react'];

module.exports = {
plugins: [
[
'babel-plugin-styled-components',
{
ssr: true,
fileName: false,
},
],
],
ChrisBAshton marked this conversation as resolved.
Show resolved Hide resolved
presets,
env: {
// used by Jest
Expand Down
8,182 changes: 3,279 additions & 4,903 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.6",
"babel-loader": "^8.0.4",
"babel-plugin-styled-components": "^1.5.1",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that you removed babel-plugin-styled-components from the package.json in this PR.

We currently import babel-plugin-styled-components since it gives meaningful names to the style classes. Our recommended .babelrc config for this is here:

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "fileName": false
      }
    ]
  ]
}

We use it in Simorgh, but we haven't yet added to Psammead.

"ssr": true ensures that when you have server-side rendering, that there won't be a checksum mismatch between the StyledComponent class on the server render and client render.
"filename": false This is to shorten the classes, since otherwise we'll have

Thinking about this, I think it'd be better for this information to live in our main Psammead Readme.md rather than in component readmes, since otherwise we'd have to include it in each component, which would be quite repetitive.

I will open a separate issue for this. In the meantime, I'd appreciate it if you didn't remove babel-plugin-styled-components from the setup.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's already an issue for this: #159.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies, you meant the documentation issue, which you raised in #162.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies @radiocontrolled - I agree with Sareh, let's add this back in.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

"babel-plugin-styled-components": "^1.9.2",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"eslint": "^5.9.0",
Expand All @@ -63,7 +63,7 @@
"husky": "^1.2.0",
"jest": "^23.6.0",
"jest-fetch-mock": "^1.6.5",
"jest-styled-components": "^5.0.1",
"jest-styled-components": "^6.3.1",
"lerna": "^3.3.1",
"prettier": "^1.15.2",
"react": "^16.6.3",
Expand Down
2 changes: 1 addition & 1 deletion packages/components/example-button/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions packages/components/psammead-brand/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Psammead Brand Changelog

| Version | Description |
|---------|-------------|
| 0.1.0 | [PR#105](https://github.com/BBC-News/psammead/pull/105) Create initial package, pulled in from [simorgh](https://github.com/BBC-News/simorgh). |
34 changes: 34 additions & 0 deletions packages/components/psammead-brand/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# Brand · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-brand.svg)](https://www.npmjs.com/package/@bbc/psammead-brand) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md)

## Description
The `Brand` component provides the BBC News logo (as SVG), nested inside a styled span, link and div. The link is currently hardcoded to "https://www.bbc.co.uk/news". `Brand` takes a `brandName` as a prop. This prop is passed to a [VisuallyHiddenText](../VisuallyHiddenText) component, nested inside Brand. Note that this does not currently affect the branding itself, which always renders as `BBC NEWS`.

## Usage
```
import Brand from '@bbc/psammead-brand';

const Header = (brandName) => (
<header role="banner">
<Brand brandName={brandName} />
</header>
);
```

## When to use this component
radiocontrolled marked this conversation as resolved.
Show resolved Hide resolved
The `Brand` component is designed to be used where a BBC logo is required as SVG. `Brand` is used in the [BrandContainer](../../containers/Brand), which consumes a service context it passes to the `Brand`.

## Accessibility notes
* Visually hidden text is provided (e.g. for screen reader users)
* `Brand` is keyboard-accessible and provides hover and focus styles

radiocontrolled marked this conversation as resolved.
Show resolved Hide resolved
## Contributing

Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead respository](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md).

### [Code of Conduct](https://github.com/BBC-News/psammead/blob/latest/CODE_OF_CONDUCT.md)

We welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/BBC-News/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.

### License

Psammead is [Apache 2.0 licensed](https://github.com/BBC-News/psammead/blob/latest/LICENSE).
Loading