Skip to content

Commit e3e7e80

Browse files
helenvholmeshelenvholmes
authoredAug 19, 2020
0.11.0
0.11.0
·
v3.5.5v0.11.0
2 parents f884889 + e20520d commit e3e7e80

9 files changed

+167
-115
lines changed
 

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
66
Currently, this repo is in Prerelease. When it is released, this project will adhere to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
77
========
88

9+
## 0.11.0
10+
11+
## Breaking Changes
12+
13+
- Removes options from the `Pagination` component
14+
915
## 0.10.4
1016

1117
### Changes

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nypl/design-system-react-components",
3-
"version": "0.10.4",
3+
"version": "0.11.0",
44
"description": "Design System React Components",
55
"repository": {
66
"type": "git",

‎src/components/Pagination/Pagination.stories.tsx

+80-7
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,93 @@
11
import * as React from "react";
22
import { action } from "@storybook/addon-actions";
3+
import { withDesign } from "storybook-addon-designs";
4+
import { text } from "@storybook/addon-knobs";
35

6+
import Button from "../Button/Button";
7+
import { ButtonTypes, ButtonIconPositions } from "../Button/ButtonTypes";
8+
import Icon from "../Icons/Icon";
9+
import { IconNames, IconRotationTypes } from "../Icons/IconTypes";
10+
import Label from "../Label/Label";
411
import Pagination from "./Pagination";
12+
import Select from "../Select/Select";
513

614
export default {
715
title: "Pagination",
816
component: Pagination,
17+
decorators: [withDesign],
918
};
1019

1120
export const pagination = () => (
1221
<Pagination
13-
paginationDropdownOptions={["1 of 4", "2 of 4", "3 of 4", "4 of 4"]}
14-
previousPageHandler={action("goToPrevious")}
15-
nextPageHandler={action("goToNext")}
16-
currentValue={"1 of 4"}
17-
onSelectChange={action("selectChange")}
18-
onSelectBlur={action("selectBlur")}
19-
/>
22+
previousPage={
23+
<Button
24+
buttonType={ButtonTypes.Secondary}
25+
onClick={action("Previous clicked")}
26+
iconDecorative={true}
27+
iconName={IconNames.arrow}
28+
iconPosition={ButtonIconPositions.Left}
29+
iconRotation={IconRotationTypes.rotate90}
30+
>
31+
{text("Previous Button Label", "Previous")}
32+
</Button>
33+
}
34+
nextPage={
35+
<Button
36+
buttonType={ButtonTypes.Secondary}
37+
onClick={action("Next clicked")}
38+
iconDecorative={true}
39+
iconName={IconNames.arrow}
40+
iconPosition={ButtonIconPositions.Right}
41+
iconRotation={IconRotationTypes.rotate270}
42+
>
43+
{text("Next Button Label", "Next")}
44+
</Button>
45+
}
46+
>
47+
<Label htmlFor="paginationSelect" id={"paginationLabel"}>
48+
{text("Select Label", "Page ")}
49+
</Label>
50+
<Select
51+
name="Pagination Select"
52+
id={"paginationSelect"}
53+
isRequired={false}
54+
ariaLabel="Pagination Label"
55+
labelId={"paginationLabel"}
56+
onBlur={action("blur")}
57+
onChange={action("changed")}
58+
>
59+
<option aria-selected={true}>
60+
{text("Option 1 Text", "1 of 7")}
61+
</option>
62+
<option aria-selected={false}>
63+
{text("Option 2 Text", "2 of 7")}
64+
</option>
65+
<option aria-selected={false}>
66+
{text("Option 3 Text", "3 of 7")}
67+
</option>
68+
<option aria-selected={false}>
69+
{text("Option 4 Text", "4 of 7")}
70+
</option>
71+
<option aria-selected={false}>
72+
{text("Option 5 Text", "5 of 7")}
73+
</option>
74+
<option aria-selected={false}>
75+
{text("Option 6 Text", "6 of 7")}
76+
</option>
77+
<option aria-selected={false}>
78+
{text("Option 7 Text", "7 of 7")}
79+
</option>
80+
</Select>
81+
</Pagination>
2082
);
83+
84+
pagination.story = {
85+
name: "Pagination",
86+
parameters: {
87+
design: {
88+
type: "figma",
89+
url:
90+
"https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17226%3A932",
91+
},
92+
},
93+
};

‎src/components/Pagination/Pagination.test.tsx

+53-33
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ import { stub } from "sinon";
33
import * as Enzyme from "enzyme";
44
import * as React from "react";
55

6+
import Button from "../Button/Button";
7+
import { ButtonTypes, ButtonIconPositions } from "../Button/ButtonTypes";
8+
import Icon from "../Icons/Icon";
9+
import { IconNames, IconRotationTypes } from "../Icons/IconTypes";
10+
import Label from "../Label/Label";
611
import Pagination from "./Pagination";
712
import Select from "../Select/Select";
813

@@ -23,40 +28,55 @@ describe("Pagination Test", () => {
2328
it("Renders two buttons and a Select", () => {
2429
wrapper = Enzyme.shallow(
2530
<Pagination
26-
paginationDropdownOptions={[
27-
"1 of 4",
28-
"2 of 4",
29-
"3 of 4",
30-
"4 of 4",
31-
]}
32-
previousPageHandler={previousCallback}
33-
nextPageHandler={nextCallback}
34-
currentValue={"1 of 4"}
35-
onSelectChange={changeCallback}
36-
onSelectBlur={blurCallback}
37-
/>
31+
previousPage={
32+
<Button
33+
buttonType={ButtonTypes.Secondary}
34+
onClick={previousCallback()}
35+
iconDecorative={true}
36+
iconName={IconNames.arrow}
37+
iconPosition={ButtonIconPositions.Left}
38+
iconRotation={IconRotationTypes.rotate90}
39+
>
40+
Previous
41+
</Button>
42+
}
43+
nextPage={
44+
<Button
45+
buttonType={ButtonTypes.Secondary}
46+
onClick={nextCallback()}
47+
iconDecorative={true}
48+
iconName={IconNames.arrow}
49+
iconPosition={ButtonIconPositions.Right}
50+
iconRotation={IconRotationTypes.rotate270}
51+
>
52+
Next
53+
</Button>
54+
}
55+
>
56+
<Label htmlFor="select" id={"label"}>
57+
Page
58+
</Label>
59+
<Select
60+
name="optionalLabelSelect"
61+
id={"select"}
62+
isRequired={false}
63+
ariaLabel="Select Label"
64+
labelId={"label"}
65+
onBlur={blurCallback()}
66+
onChange={changeCallback()}
67+
>
68+
<option aria-selected={true}>1 of 7</option>
69+
<option aria-selected={false}>2 of 7</option>
70+
<option aria-selected={false}>3 of 7</option>
71+
<option aria-selected={false}>4 of 7</option>
72+
<option aria-selected={false}>5 of 7</option>
73+
<option aria-selected={false}>6 of 7</option>
74+
<option aria-selected={false}>7 of 7</option>
75+
</Select>
76+
</Pagination>
3877
);
39-
expect(wrapper.find("Button")).to.have.lengthOf(2);
40-
expect(wrapper.find(Select)).to.have.lengthOf(1);
41-
});
42-
43-
it("Renders two buttons and a Select when there are zero pages", () => {
44-
wrapper = Enzyme.shallow(
45-
<Pagination
46-
paginationDropdownOptions={[
47-
"1 of 4",
48-
"2 of 4",
49-
"3 of 4",
50-
"4 of 4",
51-
]}
52-
previousPageHandler={previousCallback}
53-
nextPageHandler={nextCallback}
54-
currentValue={"1 of 4"}
55-
onSelectChange={changeCallback}
56-
onSelectBlur={blurCallback}
57-
/>
58-
);
59-
expect(wrapper.find("Button")).to.have.lengthOf(2);
78+
expect(wrapper.find(Button)).to.have.lengthOf(2);
6079
expect(wrapper.find(Select)).to.have.lengthOf(1);
80+
expect(wrapper.find(Label)).to.have.lengthOf(1);
6181
});
6282
});

‎src/components/Pagination/Pagination.tsx

+16-67
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,31 @@
11
import * as React from "react";
22
import bem from "../../utils/bem";
3-
import Button, { ButtonOptions } from "../Button/Button";
4-
import Label from "../Label/Label";
5-
import Select from "../Select/Select";
6-
import { ButtonIconPositions, ButtonTypes } from "../Button/ButtonTypes";
7-
import { IconRotationTypes } from "../Icons/IconTypes";
83
export interface PaginationProps {
4+
/** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
95
blockName?: string;
6+
/** Additional className for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
107
className?: string;
11-
currentValue: string;
8+
/** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
129
modifiers?: string[];
13-
nextPageHandler: (event: React.MouseEvent) => void;
14-
onSelectBlur: (event: React.MouseEvent) => void;
15-
onSelectChange: (event: React.MouseEvent) => void;
16-
paginationDropdownOptions: string[];
17-
previousPageHandler: (event: React.MouseEvent) => void;
10+
/** Right hand element that is the next handler, typically a button */
11+
nextPage?: React.ReactNode;
12+
/** Left hand element that is the previous handler, typically a button */
13+
previousPage?: React.ReactNode;
1814
}
1915

20-
export default function Pagination(props: PaginationProps) {
16+
export default function Pagination(
17+
props: React.PropsWithChildren<PaginationProps>
18+
) {
2119
const {
2220
blockName,
21+
children,
2322
className,
24-
currentValue,
2523
modifiers,
26-
nextPageHandler,
27-
onSelectBlur,
28-
onSelectChange,
29-
paginationDropdownOptions,
30-
previousPageHandler,
24+
nextPage,
25+
previousPage,
3126
} = props;
3227

3328
const pagination__base_class = "pagination";
34-
let buttonPrevOpts: ButtonOptions = {
35-
id: "pagination-previous",
36-
onClick: previousPageHandler,
37-
content: <>Previous</>,
38-
buttonType: ButtonTypes.Secondary,
39-
iconPosition: ButtonIconPositions.Left,
40-
iconRotation: IconRotationTypes.rotate90,
41-
iconName: "arrow_xsmall",
42-
iconDecorative: true,
43-
};
44-
45-
let buttonNextOpts: ButtonOptions = {
46-
id: "pagination-next",
47-
onClick: nextPageHandler,
48-
content: <>Next</>,
49-
buttonType: ButtonTypes.Secondary,
50-
iconPosition: ButtonIconPositions.Right,
51-
iconRotation: IconRotationTypes.rotate270,
52-
iconName: "arrow_xsmall",
53-
iconDecorative: true,
54-
};
55-
56-
let dropdownProps = {
57-
dropdownId: "pagination-dropdown",
58-
isRequired: false,
59-
labelId: "pagination-select-label",
60-
labelText: "Page",
61-
selectedOption: currentValue,
62-
onChange: onSelectChange,
63-
onBlur: onSelectBlur,
64-
};
6529

6630
return (
6731
<nav
@@ -70,24 +34,9 @@ export default function Pagination(props: PaginationProps) {
7034
className,
7135
])}
7236
>
73-
<Button onClick={buttonPrevOpts.onClick} {...buttonPrevOpts}>
74-
{buttonPrevOpts.content}
75-
</Button>
76-
<Label htmlFor="pagination-dropdown" id={dropdownProps.labelId}>
77-
{dropdownProps.labelText}
78-
</Label>
79-
<Select
80-
name="pagination-select"
81-
blockName={pagination__base_class}
82-
{...dropdownProps}
83-
>
84-
{paginationDropdownOptions.map((item) => (
85-
<option aria-selected={false}>{item}</option>
86-
))}
87-
</Select>
88-
<Button onClick={buttonNextOpts.onClick} {...buttonNextOpts}>
89-
{buttonNextOpts.content}
90-
</Button>
37+
{previousPage}
38+
{children}
39+
{nextPage}
9140
</nav>
9241
);
9342
}

‎src/components/Pagination/_Pagination.scss

+3-6
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33

44
align-items: stretch;
55
display: flex;
6-
justify-content: center;
76
width: 100%;
87

9-
& > * {
8+
> * {
109
&:not(:last-child) {
1110
@include space-inline-xs;
1211
}
@@ -18,9 +17,7 @@
1817
align-self: center;
1918
}
2019

21-
&__dropdown {
22-
align-items: baseline;
23-
display: flex;
24-
justify-content: space-between;
20+
.select {
21+
@include space-stack-none;
2522
}
2623
}

‎src/components/Select/Select.test.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -260,4 +260,5 @@ describe("Select", () => {
260260
);
261261
expect(container.find("select").instance()).to.equal(ref.current);
262262
});
263+
it("should throw warning when there are more than 7 options");
263264
});

‎src/components/Select/Select.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,12 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
8686
ariaLabelledBy = labelId + " " + helperTextId;
8787
}
8888

89+
if (React.Children.count(children) > 7) {
90+
console.warn(
91+
"NYPL DS recommends that your <select>s have fewer than 8 options"
92+
);
93+
}
94+
8995
return (
9096
<select
9197
name={name}

0 commit comments

Comments
 (0)
Please sign in to comment.