feat: update to [email protected]

.eslintignore

@@ -1 +1,2 @@
 !/.storybook
+lib

package.json

@@ -49,7 +49,7 @@
     "@babel/runtime": "^7.6.3",
     "chain-function": "^1.0.1",
     "classnames": "^2.2.6",
-    "fundamental-styles": "~0.3.0",
+    "fundamental-styles": "~0.4.0-rc.3",
     "hoist-non-react-statics": "^3.3.0",
     "keycode": "^2.2.0",
     "moment": "^2.24.0",

src/Button/Button.Component.js

@@ -37,13 +37,11 @@ export const ButtonComponent = () => {
                 centered
                 description={`* **Action Button**: The default button \n\n* **Standard Button**:
                     Neutral or informative color \n\n* **Positive Button**: Used for positive actions 
-                    such as approved, ok, yes. \n\n* **Medium Button**: Used for warnings or 
-                    alert \n\n* **Negative Button**: Used for negative actions such as decline, cancel, no.`}
+                    such as approved, ok, yes. \n\n* **Negative Button**: Used for negative actions such as decline, cancel, no.`}
                 title='Button Types'>
                 <Button>Action Button</Button>
                 <Button type='standard'>Standard Button</Button>
                 <Button type='positive'>Positive Button</Button>
-                <Button type='medium'>Medium Button</Button>
                 <Button type='negative'>Negative Button</Button>
             </Example>
 
@@ -52,49 +50,47 @@ export const ButtonComponent = () => {
                 description={`Button can have an icon with text or just and icon. You can use \`glyph="icon-name"\` to
                     attach an icon to the button.`}
                 title='Buttons with Icon'>
-                <Button glyph='cart' option='emphasized'>
-                        Add to Cart
-                </Button>
+                <div className='fd-container'>
+                    <div className='fd-col--6'>
+                        <Button glyph='cart' option='emphasized'>
+                                Add to Cart
+                        </Button>
 
-                <Button glyph='cart'>Add to Cart</Button>
+                        <Button glyph='cart'>Add to Cart</Button>
 
-                <Button glyph='filter' option='light'>
-                        Add to Cart
-                </Button>
+                        <Button glyph='filter' option='light'>
+                                Add to Cart
+                        </Button>
 
-                <Button glyph='accept' option='emphasized'
-                    type='positive'>
-                        Approve
-                </Button>
+                        <Button glyph='accept' type='positive'>
+                                Approve
+                        </Button>
 
-                <Button glyph='decline' option='emphasized'
-                    type='negative'>
-                        Reject
-                </Button>
+                        <Button glyph='decline' type='negative'>
+                                Reject
+                        </Button>
 
-                <Button
-                    glyph='alert'
-                    option='emphasized'
-                    type='medium'>
-                        Review
-                </Button>
+                        <Button
+                            glyph='alert'
+                            option='emphasized'>
+                                Review
+                        </Button>
+                    </div>
 
-                <Button glyph='cart' option='emphasized' />
+                    <div className='fd-col--6'>
+                        <Button glyph='cart' />
 
-                <Button glyph='cart' />
+                        <Button glyph='cart' option='light' />
 
-                <Button glyph='filter' option='light' />
+                        <Button glyph='filter' option='standard' />
 
-                <Button glyph='accept' option='emphasized'
-                    type='positive' />
+                        <Button glyph='accept' type='positive' />
 
-                <Button
-                    glyph='decline'
-                    option='emphasized'
-                    type='negative' />
+                        <Button glyph='decline' type='negative' />
 
-                <Button glyph='alert' option='emphasized'
-                    type='medium' />
+                        <Button glyph='alert' type='negative' />
+                    </div>
+                </div>
             </Example>
 
             <Example
@@ -147,16 +143,6 @@ export const ButtonComponent = () => {
                     </Button>
                 </div>
                 <div className='frDocs-tile__break' />
-                <div className='frDocs-tile__centered'>
-                    <Button type='medium'>Medium</Button>
-                    <Button selected type='medium'>
-                    Selected
-                    </Button>
-                    <Button disabled type='medium'>
-                    Disabled
-                    </Button>
-                </div>
-                <div className='frDocs-tile__break' />
                 <div className='frDocs-tile__centered'>
                     <Button type='negative'>Negative</Button>
                     <Button selected type='negative'>

src/Calendar/Calendar.js

@@ -162,62 +162,103 @@ class Calendar extends Component {
 
     generateMonths = (monthProps) => {
         const months = moment.localeData(this.props.locale).months();
-        const listOfMonths = months.map((month, index) => {
-            const shortenedNameMonth = moment.localeData(this.props.locale).monthsShort()[index];
-
-            const calendarItemClasses = classnames(
-                'fd-calendar__item',
-                {
-                    'is-selected': months[this.state.currentDateDisplayed.month()] === month,
-                    'fd-calendar__item--current': months[this.state.todayDate.month()] === month
-                }
-            );
+
+        const gridArray = [];
+
+        let i = 0;
+
+        while (i < months.length) {
+            gridArray.push(months.slice(i, i += 4));
+        }
+
+        const listOfMonths = gridArray.map((setOfMonths, index) => {
+            const monthCells = setOfMonths.map((month, subIndex) => {
+                const shortenedNameMonth = moment.localeData(this.props.locale).monthsShort()[subIndex + (4 * index)];
+                const isSelected = months[this.state.currentDateDisplayed.month()] === month;
+                const calendarItemClasses = classnames(
+                    'fd-calendar__item',
+                    {
+                        'is-selected': isSelected,
+                        'fd-calendar__item--current': months[this.state.todayDate.month()] === month
+                    }
+                );
+
+                return (
+                    <td aria-selected={isSelected} className={calendarItemClasses}
+                        key={month} name={month}
+                        onClick={() => this.changeMonth(month)}>
+                        <span className='fd-calendar__text' role='button'>
+                            {shortenedNameMonth}
+                        </span>
+                    </td>
+                );
+            });
 
             return (
-                <li className={calendarItemClasses} key={month}
-                    name={month} onClick={() => this.changeMonth(month)}>
-                    {shortenedNameMonth}
-                </li>
+                <tr className='fd-calendar__row' key={`month-row-${index}`}>
+                    {monthCells}
+                </tr>
             );
         });
 
         return (
             <div className='fd-calendar__months'>
-                <ul {...monthProps} className='fd-calendar__list'>
-                    {listOfMonths}
-                </ul>
+                <table {...monthProps} className='fd-calendar__table'
+                    role='grid'>
+                    <tbody className='fd-calendar__group'>
+                        {listOfMonths}
+                    </tbody>
+                </table>
             </div>
         );
     }
 
     generateYears = (yearListProps) => {
         let year = this.state.currentDateDisplayed.year();
-        const years = [year];
-        for (let iterations = 1; iterations < 12; iterations++) {
-            year = year + 1;
-            years.push(year);
+        const years = [];
+        for (let row = 0; row < 3; row++) {
+            years.push([]);
+            for (let column = 0; column < 4; column++) {
+                years[row][column] = year;
+                year += 1;
+            }
         }
-        const listOfYears = years.map(element => {
-            const yearClasses = classnames(
-                'fd-calendar__item',
-                {
-                    'is-selected': this.state.currentDateDisplayed.year() === element,
-                    'fd-calendar__item--current': this.state.todayDate.year() === element
-                }
-            );
+        const listOfYears = years.map((rowOfYears, index) => {
+            const yearCells = rowOfYears.map(element => {
+                const isSelected = this.state.currentDateDisplayed.year() === element;
+                const yearClasses = classnames(
+                    'fd-calendar__item',
+                    {
+                        'is-selected': isSelected,
+                        'fd-calendar__item--current': this.state.todayDate.year() === element
+                    }
+                );
+
+                return (
+                    <td aria-selected={isSelected}
+                        className={yearClasses} key={element}
+                        name={element} onClick={() => this.changeYear(element)}>
+                        <span className='fd-calendar__text' role='button'>
+                            {element}
+                        </span>
+                    </td>
+                );
+            });
 
             return (
-                <li className={yearClasses} key={element}
-                    name={element} onClick={() => this.changeYear(element)}>
-                    {element}
-                </li>
+                <tr className='fd-calendar__row' key={`year-row-${index}`}>
+                    {yearCells}
+                </tr>
             );
         });
         return (
-            <div className='fd-calendar__months'>
-                <ul {...yearListProps} className='fd-calendar__list'>
-                    {listOfYears}
-                </ul>
+            <div className='fd-calendar__years'>
+                <table {...yearListProps} className='fd-calendar__table'
+                    role='grid'>
+                    <tbody className='fd-calendar__group'>
+                        {listOfYears}
+                    </tbody>
+                </table>
             </div>
         );
     }
@@ -399,11 +440,12 @@ class Calendar extends Component {
 
                 days.push(
                     <td
+                        aria-selected={this.isSelected(day)}
                         className={dayClasses}
                         key={copyDate}
                         onClick={this.isEnabledDate(day) ? () => this.dateClick(copyDate, enableRangeSelection) : null}
-                        role='gridcell' >
-                        <span className='fd-calendar__text'>{dateFormatted.toString()}</span>
+                        role='gridcell'>
+                        <span className='fd-calendar__text' role='button'>{dateFormatted.toString()}</span>
                     </td >
                 );
 

src/Calendar/Calendar.test.js

@@ -122,7 +122,7 @@ describe('<Calendar />', () => {
         expect(wrapper.children().children().state('showMonths')).toBeTruthy();
 
         wrapper
-            .find('ul.fd-calendar__list li.fd-calendar__item')
+            .find('.fd-calendar__item')
             .at(3)
             .simulate('click');
 
@@ -168,7 +168,7 @@ describe('<Calendar />', () => {
         expect(wrapper.children().children().state('showYears')).toBeTruthy();
 
         wrapper
-            .find('ul.fd-calendar__list li.fd-calendar__item')
+            .find('.fd-calendar__item')
             .at(3)
             .simulate('click');
 
@@ -216,7 +216,7 @@ describe('<Calendar />', () => {
         expect(wrapper.children().children().state('showYears')).toBeTruthy();
 
         wrapper
-            .find('ul.fd-calendar__list li.fd-calendar__item')
+            .find('.fd-calendar__item')
             .at(3)
             .simulate('click');
 
@@ -424,23 +424,23 @@ describe('<Calendar />', () => {
             ).toBe('Sample');
         });
 
-        test('should allow props to be spread to the Calendar component\'s month list ul element', () => {
+        test('should allow props to be spread to the Calendar component\'s month list table element', () => {
             const element = mount(<Calendar monthListProps={{ 'data-sample': 'Sample' }} />);
 
             element.find('.fd-calendar__action').at(1).childAt(0).simulate('click');
 
             expect(
-                element.find('ul').getDOMNode().attributes['data-sample'].value
+                element.find('table').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
-        test('should allow props to be spread to the Calendar component\'s year list ul element', () => {
+        test('should allow props to be spread to the Calendar component\'s year list table element', () => {
             const element = mount(<Calendar yearListProps={{ 'data-sample': 'Sample' }} />);
 
             element.find('.fd-calendar__action').at(2).childAt(0).simulate('click');
 
             expect(
-                element.find('ul').getDOMNode().attributes['data-sample'].value
+                element.find('table').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });