Skip to content
This repository was archived by the owner on Oct 19, 2021. It is now read-only.

Commit d4ee34f

Browse files
hellobriantw15egan
hellobrian
authored and
tw15egan
committed
feat(StructuredList): add components for StructuredList (#24)
* feat(StructuredList): in progress * feat(StructuredList): all basic components for simple list * chore(StructuredList): setup storybook * test(StructuredListWrapper): initial tests * chore(package.json): use latest carbon-components * refactor(StructuredListContent): remove * chore(StructuredListStory): rename file * feat(StructuredListRow): new variant for selection * feat(StructuredListInput): make input * refactor(StructuredList): row can render <label> * fix(StructuredList): some changes * chore(StructuredList): welp * test(StructuredListHead): add tests * test(StructuredList): tests for input * test(StructuredList): row tests * test(StructuredList): tests for body and cell * refactor(StructuredList): add handleKeyDown prop to children * chore(package.json): update carbon-components in devDeps to use latest * refactor(StructuredListRow): render input with prop * test(StructuredList): update tests * chore(StructuredList): next input inside row * test(StructuredList): remove unused mount
1 parent 98e4418 commit d4ee34f

File tree

5 files changed

+514
-12
lines changed

5 files changed

+514
-12
lines changed

‎.storybook/components/StructuredListStory.js‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React from "react";
2+
import { storiesOf, action } from "@storybook/react";
3+
import Icon from "../../components/Icon";
4+
import {
5+
StructuredListWrapper,
6+
StructuredListHead,
7+
StructuredListBody,
8+
StructuredListRow,
9+
StructuredListInput,
10+
StructuredListCell
11+
} from "../../components/StructuredList";
12+
13+
storiesOf("StructuredList", module)
14+
.addWithInfo(
15+
"Simple",
16+
`
17+
description here
18+
`,
19+
() =>
20+
<StructuredListWrapper>
21+
<StructuredListHead>
22+
<StructuredListRow head>
23+
<StructuredListCell head>service</StructuredListCell>
24+
<StructuredListCell head>type</StructuredListCell>
25+
<StructuredListCell head>description</StructuredListCell>
26+
</StructuredListRow>
27+
</StructuredListHead>
28+
<StructuredListBody>
29+
<StructuredListRow>
30+
<StructuredListCell noWrap>
31+
Apache Spark
32+
</StructuredListCell>
33+
<StructuredListCell>IBM</StructuredListCell>
34+
<StructuredListCell>
35+
Apache Spark is an open source cluster computing framework
36+
optimized for
37+
extremely fast and large scale data processing,
38+
which you can access via the newly integrated notebook interface
39+
IBM Analytics
40+
for Apache Spark.
41+
</StructuredListCell>
42+
</StructuredListRow>
43+
<StructuredListRow>
44+
<StructuredListCell noWrap>
45+
Cloudant
46+
</StructuredListCell>
47+
<StructuredListCell>
48+
IBM
49+
</StructuredListCell>
50+
<StructuredListCell>
51+
Cloudant NoSQL DB is a fully managed data layer designed for
52+
modern web and
53+
mobile applications that leverages a
54+
flexible JSON schema.
55+
</StructuredListCell>
56+
</StructuredListRow>
57+
</StructuredListBody>
58+
</StructuredListWrapper>
59+
)
60+
.addWithInfo(
61+
"Selection",
62+
`
63+
description here
64+
`,
65+
() =>
66+
<StructuredListWrapper selection border>
67+
<StructuredListHead>
68+
<StructuredListRow head>
69+
<StructuredListCell head>{""}</StructuredListCell>
70+
<StructuredListCell head>service</StructuredListCell>
71+
<StructuredListCell head>type</StructuredListCell>
72+
<StructuredListCell head>description</StructuredListCell>
73+
</StructuredListRow>
74+
</StructuredListHead>
75+
<StructuredListBody>
76+
<StructuredListRow label htmlFor="apache-spark">
77+
<StructuredListInput
78+
id="apache-spark"
79+
value="apache-spark"
80+
title="apache-spark"
81+
name="services"
82+
defaultChecked
83+
/>
84+
<StructuredListCell>
85+
<Icon
86+
className="bx--structured-list-svg"
87+
name="checkmark--glyph"
88+
description="select a service"
89+
/>
90+
</StructuredListCell>
91+
<StructuredListCell>
92+
Apache Spark
93+
</StructuredListCell>
94+
<StructuredListCell>IBM</StructuredListCell>
95+
<StructuredListCell>
96+
Apache Spark is an open source cluster computing framework
97+
optimized for
98+
extremely fast and large scale data processing,
99+
which you can access via the newly integrated notebook interface
100+
IBM Analytics
101+
for Apache Spark.
102+
</StructuredListCell>
103+
</StructuredListRow>
104+
<StructuredListRow label htmlFor="cloudant">
105+
<StructuredListInput
106+
id="cloudant"
107+
value="cloudant"
108+
title="cloudant"
109+
name="services"
110+
/>
111+
<StructuredListCell>
112+
<Icon
113+
className="bx--structured-list-svg"
114+
name="checkmark--glyph"
115+
description="select a service"
116+
/>
117+
</StructuredListCell>
118+
<StructuredListCell>
119+
Cloudant
120+
</StructuredListCell>
121+
<StructuredListCell>
122+
IBM
123+
</StructuredListCell>
124+
<StructuredListCell>
125+
Cloudant NoSQL DB is a fully managed data layer designed for
126+
modern web and
127+
mobile applications that leverages a
128+
flexible JSON schema.
129+
</StructuredListCell>
130+
</StructuredListRow>
131+
</StructuredListBody>
132+
</StructuredListWrapper>
133+
);

‎components/StructuredList.js‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import React, { Component } from "react";
2+
import PropTypes from "prop-types";
3+
import classNames from "classnames";
4+
import uid from "../lib/uniqueId";
5+
6+
class StructuredListWrapper extends Component {
7+
static propTypes = {
8+
children: PropTypes.node,
9+
className: PropTypes.string,
10+
border: PropTypes.bool,
11+
selection: PropTypes.bool
12+
};
13+
14+
static defaultProps = {
15+
border: false,
16+
selection: false
17+
};
18+
19+
render() {
20+
const { children, selection, className, border, ...other } = this.props;
21+
22+
const classes = classNames("bx--structured-list", className, {
23+
"bx--structured-list--border": border,
24+
"bx--structured-list--selection": selection
25+
});
26+
27+
return (
28+
<section className={classes} {...other}>
29+
{children}
30+
</section>
31+
);
32+
}
33+
}
34+
35+
class StructuredListHead extends Component {
36+
static propTypes = {
37+
children: PropTypes.node,
38+
className: PropTypes.string
39+
};
40+
41+
render() {
42+
const { children, className, ...other } = this.props;
43+
44+
const classes = classNames("bx--structured-list-thead", className);
45+
return <div className={classes} {...other}>{children}</div>;
46+
}
47+
}
48+
49+
class StructuredListInput extends Component {
50+
static propTypes = {
51+
className: PropTypes.string,
52+
id: PropTypes.string,
53+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
54+
name: PropTypes.string,
55+
title: PropTypes.string,
56+
defaultChecked: PropTypes.bool,
57+
onChange: PropTypes.func
58+
};
59+
60+
static defaultProps = {
61+
onChange: () => {},
62+
value: 'value'
63+
};
64+
65+
componentWillMount() {
66+
this.uid = this.props.id || uid();
67+
}
68+
69+
render() {
70+
const { className, value, name, title, ...other } = this.props;
71+
const classes = classNames("bx--structured-list-input", className);
72+
return (
73+
<input
74+
{...other}
75+
type="radio"
76+
tabIndex={-1}
77+
id={this.uid}
78+
className={classes}
79+
value={value}
80+
name={name}
81+
title={title}
82+
/>
83+
);
84+
}
85+
}
86+
87+
class StructuredListRow extends Component {
88+
static propTypes = {
89+
children: PropTypes.node,
90+
className: PropTypes.string,
91+
head: PropTypes.bool,
92+
label: PropTypes.bool,
93+
htmlFor: PropTypes.string,
94+
tabIndex: PropTypes.number,
95+
onKeyDown: PropTypes.func
96+
};
97+
98+
static defaultProps = {
99+
htmlFor: "unique id",
100+
head: false,
101+
label: false,
102+
tabIndex: 0,
103+
onKeyDown: () => {}
104+
};
105+
106+
render() {
107+
const {
108+
onKeyDown,
109+
tabIndex,
110+
htmlFor,
111+
children,
112+
className,
113+
head,
114+
label,
115+
...other
116+
} = this.props;
117+
118+
const classes = classNames("bx--structured-list-row", className, {
119+
"bx--structured-list-row--header-row": head
120+
});
121+
122+
return label
123+
? <label
124+
{...other}
125+
tabIndex={tabIndex}
126+
className={classes}
127+
htmlFor={htmlFor}
128+
onKeyDown={onKeyDown}
129+
>
130+
{children}
131+
</label>
132+
: <div {...other} className={classes}>
133+
{children}
134+
</div>;
135+
}
136+
}
137+
138+
class StructuredListBody extends Component {
139+
static propTypes = {
140+
children: PropTypes.node,
141+
className: PropTypes.string,
142+
head: PropTypes.bool,
143+
onKeyDown: PropTypes.func
144+
};
145+
146+
static defaultProps = {
147+
onKeyDown: () => {}
148+
};
149+
150+
state = {
151+
labelRows: null,
152+
rowSelected: 0
153+
};
154+
155+
render() {
156+
const { children, className, ...other } = this.props;
157+
const classes = classNames("bx--structured-list-tbody", className);
158+
return <div className={classes} {...other}>{children}</div>;
159+
}
160+
}
161+
162+
class StructuredListCell extends Component {
163+
static propTypes = {
164+
children: PropTypes.node,
165+
className: PropTypes.string,
166+
head: PropTypes.bool,
167+
noWrap: PropTypes.bool
168+
};
169+
170+
static defaultProps = {
171+
head: false,
172+
noWrap: false
173+
};
174+
175+
render() {
176+
const { children, className, head, noWrap, ...other } = this.props;
177+
178+
const classes = classNames(className, {
179+
"bx--structured-list-th": head,
180+
"bx--structured-list-td": !head,
181+
"bx--structured-list-content--nowrap": noWrap
182+
});
183+
184+
return <div className={classes} {...other}>{children}</div>;
185+
}
186+
}
187+
188+
export {
189+
StructuredListWrapper,
190+
StructuredListHead,
191+
StructuredListBody,
192+
StructuredListRow,
193+
StructuredListInput,
194+
StructuredListCell
195+
};

0 commit comments

Comments
 (0)