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

Image stretching fix #234

Merged
merged 6 commits into from
Dec 20, 2018
Merged

Image stretching fix #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
58ce670
Height prop optional
sareh Dec 19, 2018
6bf51fa
Merge branch 'latest' into image-stretching-fix
sareh Dec 19, 2018
6227190
Add PR to changelog
sareh Dec 19, 2018
5d9f52c
Add PR to CHANGELOG.md
radiocontrolled Dec 19, 2018
201b463
Add height optional explanation
sareh Dec 19, 2018
2c3db49
Merge branch 'latest' into image-stretching-fix
sareh Dec 19, 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
1 change: 1 addition & 0 deletions packages/components/psammead-image/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@

| Version | Description |
|---------|-------------|
| 0.2.0 | [PR#234](https://github.com/BBC-News/psammead/pull/234) Change height prop to be optional. Update the storybook example. |
| 0.1.1 | [PR#230](https://github.com/BBC-News/psammead/pull/230) Add README to Storybook |
| 0.1.0 | [PR#225](https://github.com/BBC-News/psammead/pull/225) Create initial package, pulled in from [Simorgh](https://github.com/BBC-News/simorgh). |
14 changes: 8 additions & 6 deletions packages/components/psammead-image/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@ const Wrapper = (src, alt, width, height) => (
);
```

| Prop | Type |
|:---------|:--------------|
| `alt` | string |
| `height` | number/string |
| `src` | string |
| `width` | number/string |
| Prop | Type | Required |
|:---------|:--------------|:---------|
| `alt` | string | Yes |
| `height` | number/string | No |
| `src` | string | Yes |
| `width` | number/string | Yes |

The `height` prop is optional, since in some cases to preserve the image ratio we only want to specify the width and let the browser scale the image accordingly. However, in other cases the height might need to be specified.
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice 👏


## Accessibility notes

Expand Down
6 changes: 3 additions & 3 deletions packages/components/psammead-image/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.

2 changes: 1 addition & 1 deletion packages/components/psammead-image/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-image",
"version": "0.1.1",
"version": "0.2.0",
"main": "dist/index.js",
"description": "React styled components for an Image",
"repository": {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-image/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Image = styled.img`

Image.propTypes = {
alt: string.isRequired,
height: oneOfType([string, number]).isRequired,
height: oneOfType([string, number]),
src: string.isRequired,
width: oneOfType([string, number]).isRequired,
};
Expand Down
8 changes: 1 addition & 7 deletions packages/components/psammead-image/src/index.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,9 @@ const imageAlt =
const imageSrc =
'https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png';
const imageWidth = 853;
const imageHeight = 1067;

storiesOf('Image', module)
.addDecorator(withReadme(Readme))
.add('default', () => (
<Image
alt={imageAlt}
src={imageSrc}
width={imageWidth}
height={imageHeight}
/>
<Image alt={imageAlt} src={imageSrc} width={imageWidth} />
));