Skip to content

Commit 6a63a21

Browse files
meganaconleygreg-a-smith
meganaconley
and
greg-a-smith
authored
feat: update to [email protected] (#848)
* starting sidenav refactor * finish side nav refactor * fix side nav tests, button refactor * fix month/year display on calendar * finish year table * update calendar tests * revert unnecessary changes to shellbar * PR feedback * Added lib directory to eslintignore * Updated variables and overflow styles for side nav Co-authored-by: Greg Smith <[email protected]>
1 parent c346a17 commit 6a63a21

18 files changed

+1030
-679
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
!/.storybook
2+
lib

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
"@babel/runtime": "^7.6.3",
5050
"chain-function": "^1.0.1",
5151
"classnames": "^2.2.6",
52-
"fundamental-styles": "~0.3.0",
52+
"fundamental-styles": "~0.4.0-rc.3",
5353
"hoist-non-react-statics": "^3.3.0",
5454
"keycode": "^2.2.0",
5555
"moment": "^2.24.0",

‎src/Button/Button.Component.js‎

Lines changed: 31 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,11 @@ export const ButtonComponent = () => {
3737
centered
3838
description={`* **Action Button**: The default button \n\n* **Standard Button**:
3939
Neutral or informative color \n\n* **Positive Button**: Used for positive actions
40-
such as approved, ok, yes. \n\n* **Medium Button**: Used for warnings or
41-
alert \n\n* **Negative Button**: Used for negative actions such as decline, cancel, no.`}
40+
such as approved, ok, yes. \n\n* **Negative Button**: Used for negative actions such as decline, cancel, no.`}
4241
title='Button Types'>
4342
<Button>Action Button</Button>
4443
<Button type='standard'>Standard Button</Button>
4544
<Button type='positive'>Positive Button</Button>
46-
<Button type='medium'>Medium Button</Button>
4745
<Button type='negative'>Negative Button</Button>
4846
</Example>
4947

@@ -52,49 +50,47 @@ export const ButtonComponent = () => {
5250
description={`Button can have an icon with text or just and icon. You can use \`glyph="icon-name"\` to
5351
attach an icon to the button.`}
5452
title='Buttons with Icon'>
55-
<Button glyph='cart' option='emphasized'>
56-
Add to Cart
57-
</Button>
53+
<div className='fd-container'>
54+
<div className='fd-col--6'>
55+
<Button glyph='cart' option='emphasized'>
56+
Add to Cart
57+
</Button>
5858

59-
<Button glyph='cart'>Add to Cart</Button>
59+
<Button glyph='cart'>Add to Cart</Button>
6060

61-
<Button glyph='filter' option='light'>
62-
Add to Cart
63-
</Button>
61+
<Button glyph='filter' option='light'>
62+
Add to Cart
63+
</Button>
6464

65-
<Button glyph='accept' option='emphasized'
66-
type='positive'>
67-
Approve
68-
</Button>
65+
<Button glyph='accept' type='positive'>
66+
Approve
67+
</Button>
6968

70-
<Button glyph='decline' option='emphasized'
71-
type='negative'>
72-
Reject
73-
</Button>
69+
<Button glyph='decline' type='negative'>
70+
Reject
71+
</Button>
7472

75-
<Button
76-
glyph='alert'
77-
option='emphasized'
78-
type='medium'>
79-
Review
80-
</Button>
73+
<Button
74+
glyph='alert'
75+
option='emphasized'>
76+
Review
77+
</Button>
78+
</div>
8179

82-
<Button glyph='cart' option='emphasized' />
80+
<div className='fd-col--6'>
81+
<Button glyph='cart' />
8382

84-
<Button glyph='cart' />
83+
<Button glyph='cart' option='light' />
8584

86-
<Button glyph='filter' option='light' />
85+
<Button glyph='filter' option='standard' />
8786

88-
<Button glyph='accept' option='emphasized'
89-
type='positive' />
87+
<Button glyph='accept' type='positive' />
9088

91-
<Button
92-
glyph='decline'
93-
option='emphasized'
94-
type='negative' />
89+
<Button glyph='decline' type='negative' />
9590

96-
<Button glyph='alert' option='emphasized'
97-
type='medium' />
91+
<Button glyph='alert' type='negative' />
92+
</div>
93+
</div>
9894
</Example>
9995

10096
<Example
@@ -147,16 +143,6 @@ export const ButtonComponent = () => {
147143
</Button>
148144
</div>
149145
<div className='frDocs-tile__break' />
150-
<div className='frDocs-tile__centered'>
151-
<Button type='medium'>Medium</Button>
152-
<Button selected type='medium'>
153-
Selected
154-
</Button>
155-
<Button disabled type='medium'>
156-
Disabled
157-
</Button>
158-
</div>
159-
<div className='frDocs-tile__break' />
160146
<div className='frDocs-tile__centered'>
161147
<Button type='negative'>Negative</Button>
162148
<Button selected type='negative'>

‎src/Calendar/Calendar.js‎

Lines changed: 81 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -162,62 +162,103 @@ class Calendar extends Component {
162162

163163
generateMonths = (monthProps) => {
164164
const months = moment.localeData(this.props.locale).months();
165-
const listOfMonths = months.map((month, index) => {
166-
const shortenedNameMonth = moment.localeData(this.props.locale).monthsShort()[index];
167-
168-
const calendarItemClasses = classnames(
169-
'fd-calendar__item',
170-
{
171-
'is-selected': months[this.state.currentDateDisplayed.month()] === month,
172-
'fd-calendar__item--current': months[this.state.todayDate.month()] === month
173-
}
174-
);
165+
166+
const gridArray = [];
167+
168+
let i = 0;
169+
170+
while (i < months.length) {
171+
gridArray.push(months.slice(i, i += 4));
172+
}
173+
174+
const listOfMonths = gridArray.map((setOfMonths, index) => {
175+
const monthCells = setOfMonths.map((month, subIndex) => {
176+
const shortenedNameMonth = moment.localeData(this.props.locale).monthsShort()[subIndex + (4 * index)];
177+
const isSelected = months[this.state.currentDateDisplayed.month()] === month;
178+
const calendarItemClasses = classnames(
179+
'fd-calendar__item',
180+
{
181+
'is-selected': isSelected,
182+
'fd-calendar__item--current': months[this.state.todayDate.month()] === month
183+
}
184+
);
185+
186+
return (
187+
<td aria-selected={isSelected} className={calendarItemClasses}
188+
key={month} name={month}
189+
onClick={() => this.changeMonth(month)}>
190+
<span className='fd-calendar__text' role='button'>
191+
{shortenedNameMonth}
192+
</span>
193+
</td>
194+
);
195+
});
175196

176197
return (
177-
<li className={calendarItemClasses} key={month}
178-
name={month} onClick={() => this.changeMonth(month)}>
179-
{shortenedNameMonth}
180-
</li>
198+
<tr className='fd-calendar__row' key={`month-row-${index}`}>
199+
{monthCells}
200+
</tr>
181201
);
182202
});
183203

184204
return (
185205
<div className='fd-calendar__months'>
186-
<ul {...monthProps} className='fd-calendar__list'>
187-
{listOfMonths}
188-
</ul>
206+
<table {...monthProps} className='fd-calendar__table'
207+
role='grid'>
208+
<tbody className='fd-calendar__group'>
209+
{listOfMonths}
210+
</tbody>
211+
</table>
189212
</div>
190213
);
191214
}
192215

193216
generateYears = (yearListProps) => {
194217
let year = this.state.currentDateDisplayed.year();
195-
const years = [year];
196-
for (let iterations = 1; iterations < 12; iterations++) {
197-
year = year + 1;
198-
years.push(year);
218+
const years = [];
219+
for (let row = 0; row < 3; row++) {
220+
years.push([]);
221+
for (let column = 0; column < 4; column++) {
222+
years[row][column] = year;
223+
year += 1;
224+
}
199225
}
200-
const listOfYears = years.map(element => {
201-
const yearClasses = classnames(
202-
'fd-calendar__item',
203-
{
204-
'is-selected': this.state.currentDateDisplayed.year() === element,
205-
'fd-calendar__item--current': this.state.todayDate.year() === element
206-
}
207-
);
226+
const listOfYears = years.map((rowOfYears, index) => {
227+
const yearCells = rowOfYears.map(element => {
228+
const isSelected = this.state.currentDateDisplayed.year() === element;
229+
const yearClasses = classnames(
230+
'fd-calendar__item',
231+
{
232+
'is-selected': isSelected,
233+
'fd-calendar__item--current': this.state.todayDate.year() === element
234+
}
235+
);
236+
237+
return (
238+
<td aria-selected={isSelected}
239+
className={yearClasses} key={element}
240+
name={element} onClick={() => this.changeYear(element)}>
241+
<span className='fd-calendar__text' role='button'>
242+
{element}
243+
</span>
244+
</td>
245+
);
246+
});
208247

209248
return (
210-
<li className={yearClasses} key={element}
211-
name={element} onClick={() => this.changeYear(element)}>
212-
{element}
213-
</li>
249+
<tr className='fd-calendar__row' key={`year-row-${index}`}>
250+
{yearCells}
251+
</tr>
214252
);
215253
});
216254
return (
217-
<div className='fd-calendar__months'>
218-
<ul {...yearListProps} className='fd-calendar__list'>
219-
{listOfYears}
220-
</ul>
255+
<div className='fd-calendar__years'>
256+
<table {...yearListProps} className='fd-calendar__table'
257+
role='grid'>
258+
<tbody className='fd-calendar__group'>
259+
{listOfYears}
260+
</tbody>
261+
</table>
221262
</div>
222263
);
223264
}
@@ -399,11 +440,12 @@ class Calendar extends Component {
399440

400441
days.push(
401442
<td
443+
aria-selected={this.isSelected(day)}
402444
className={dayClasses}
403445
key={copyDate}
404446
onClick={this.isEnabledDate(day) ? () => this.dateClick(copyDate, enableRangeSelection) : null}
405-
role='gridcell' >
406-
<span className='fd-calendar__text'>{dateFormatted.toString()}</span>
447+
role='gridcell'>
448+
<span className='fd-calendar__text' role='button'>{dateFormatted.toString()}</span>
407449
</td >
408450
);
409451

‎src/Calendar/Calendar.test.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ describe('<Calendar />', () => {
122122
expect(wrapper.children().children().state('showMonths')).toBeTruthy();
123123

124124
wrapper
125-
.find('ul.fd-calendar__list li.fd-calendar__item')
125+
.find('.fd-calendar__item')
126126
.at(3)
127127
.simulate('click');
128128

@@ -168,7 +168,7 @@ describe('<Calendar />', () => {
168168
expect(wrapper.children().children().state('showYears')).toBeTruthy();
169169

170170
wrapper
171-
.find('ul.fd-calendar__list li.fd-calendar__item')
171+
.find('.fd-calendar__item')
172172
.at(3)
173173
.simulate('click');
174174

@@ -216,7 +216,7 @@ describe('<Calendar />', () => {
216216
expect(wrapper.children().children().state('showYears')).toBeTruthy();
217217

218218
wrapper
219-
.find('ul.fd-calendar__list li.fd-calendar__item')
219+
.find('.fd-calendar__item')
220220
.at(3)
221221
.simulate('click');
222222

@@ -424,23 +424,23 @@ describe('<Calendar />', () => {
424424
).toBe('Sample');
425425
});
426426

427-
test('should allow props to be spread to the Calendar component\'s month list ul element', () => {
427+
test('should allow props to be spread to the Calendar component\'s month list table element', () => {
428428
const element = mount(<Calendar monthListProps={{ 'data-sample': 'Sample' }} />);
429429

430430
element.find('.fd-calendar__action').at(1).childAt(0).simulate('click');
431431

432432
expect(
433-
element.find('ul').getDOMNode().attributes['data-sample'].value
433+
element.find('table').getDOMNode().attributes['data-sample'].value
434434
).toBe('Sample');
435435
});
436436

437-
test('should allow props to be spread to the Calendar component\'s year list ul element', () => {
437+
test('should allow props to be spread to the Calendar component\'s year list table element', () => {
438438
const element = mount(<Calendar yearListProps={{ 'data-sample': 'Sample' }} />);
439439

440440
element.find('.fd-calendar__action').at(2).childAt(0).simulate('click');
441441

442442
expect(
443-
element.find('ul').getDOMNode().attributes['data-sample'].value
443+
element.find('table').getDOMNode().attributes['data-sample'].value
444444
).toBe('Sample');
445445
});
446446

0 commit comments

Comments
 (0)