SAP
diff --git a/‎package-lock.json
Copy file name to clipboard
+3-3Lines changed: 3 additions & 3 deletions b/‎package-lock.json
Copy file name to clipboard
+3-3Lines changed: 3 additions & 3 deletions
diff --git a/‎package.json
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion b/‎package.json
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion
diff --git a/‎src/DatePicker/DatePicker.Component.js
Copy file name to clipboard
+18-1Lines changed: 18 additions & 1 deletion b/‎src/DatePicker/DatePicker.Component.js
Copy file name to clipboard
+18-1Lines changed: 18 additions & 1 deletion
diff --git a/‎src/DatePicker/DatePicker.js
Copy file name to clipboard
+6-2Lines changed: 6 additions & 2 deletions b/‎src/DatePicker/DatePicker.js
Copy file name to clipboard
+6-2Lines changed: 6 additions & 2 deletions
diff --git a/‎src/Menu/Menu.Component.js
Copy file name to clipboard
+20-30Lines changed: 20 additions & 30 deletions b/‎src/Menu/Menu.Component.js
Copy file name to clipboard
+20-30Lines changed: 20 additions & 30 deletions
diff --git a/‎src/Menu/Menu.js
Copy file name to clipboard
+2-16Lines changed: 2 additions & 16 deletions b/‎src/Menu/Menu.js
Copy file name to clipboard
+2-16Lines changed: 2 additions & 16 deletions
diff --git a/‎src/Menu/Menu.test.js
Copy file name to clipboard
+6-84Lines changed: 6 additions & 84 deletions b/‎src/Menu/Menu.test.js
Copy file name to clipboard
+6-84Lines changed: 6 additions & 84 deletions
@@ -49,7 +49,7 @@
     "@babel/runtime": "^7.8.0",
     "chain-function": "^1.0.1",
     "classnames": "^2.2.6",
-    "fundamental-styles": "0.8.0-rc.16",
+    "fundamental-styles": "0.8.2-rc.0",
     "keycode": "^2.2.0",
     "moment": "^2.24.0",
     "prop-types": "^15.7.1",
 
@@ -1,9 +1,22 @@
 import { DatePicker } from '../';
 import FormLabel from '../Forms/FormLabel';
+import moment from 'moment';
 import path from 'path';
 import React from 'react';
 import { ComponentPage, Example } from '../_playground';
 
+const tomorrow = moment().add(1, 'day').endOf('day').format('YYYYMMDD');
+const nextDay = moment().add(2, 'day').endOf('day').format('YYYYMMDD');
+const dayAfter = moment().add(3, 'day').endOf('day').format('YYYYMMDD');
+const oneWeek = moment().add(7, 'day').endOf('day').format('YYYYMMDD');
+
+const specialDays = {
+    [tomorrow]: 1,
+    [nextDay]: 2,
+    [dayAfter]: 3,
+    [oneWeek]: 4
+};
+
 export const DatePickerComponent = () => {
     return (
         <ComponentPage
@@ -84,7 +97,11 @@ export const DatePickerComponent = () => {
                 <DatePicker readOnly />
             </Example>
 
-
+            <Example
+                centered
+                title='With special days'>
+                <DatePicker specialDays={specialDays} />
+            </Example>
         </ComponentPage>
     );
 };
@@ -307,6 +307,7 @@ class DatePicker extends Component {
             onBlur,
             popoverProps,
             readOnly,
+            specialDays,
             validationState,
             ...props
         } = this.props;
@@ -357,7 +358,8 @@ class DatePicker extends Component {
                                 locale={locale}
                                 localizedText={localizedText}
                                 onChange={this.updateDate}
-                                ref={this.calendarRef} />
+                                ref={this.calendarRef}
+                                specialDays={specialDays} />
                         </>
                     }
                     control={
@@ -425,6 +427,7 @@ DatePicker.propTypes = {
     locale: PropTypes.string,
     popoverProps: PropTypes.object,
     readOnly: PropTypes.bool,
+    specialDays: PropTypes.object,
     validationState: PropTypes.shape({
         state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
         text: PropTypes.string
@@ -456,7 +459,8 @@ DatePicker.propDescriptions = {
     onBlur: 'Callback function for onBlur events. In the object returned, `date` is the date object, `formattedDate` is the formatted date, and `isoFormattedDate` is the date formatted in ISO-8601 format (YYYY-MM-DD).',
     onChange: 'Callback function for onChange events. In the object returned, `date` is the date object, `formattedDate` is the formatted date, and `isoFormattedDate` is the date formatted in ISO-8601 format (YYYY-MM-DD).',
     onDatePickerClose: 'Callback function which triggers when datepicker closes after date selection. In the object returned, `date` is the date object, `formattedDate` is the formatted date, and `isoFormattedDate` is the date formatted in ISO-8601 format (YYYY-MM-DD).',
-    onFocus: 'Callback function for onFocus events. In the object returned, `date` is the date object, `formattedDate` is the formatted date, and `isoFormattedDate` is the date formatted in ISO-8601 format (YYYY-MM-DD).'
+    onFocus: 'Callback function for onFocus events. In the object returned, `date` is the date object, `formattedDate` is the formatted date, and `isoFormattedDate` is the date formatted in ISO-8601 format (YYYY-MM-DD).',
+    specialDays: 'Object with special dates and special date types in shape of `{\'YYYYMMDD\': type}`. Type must be a number between 1-20.'
 };
 
 export default DatePicker;
@@ -27,72 +27,62 @@ export const MenuComponent = () => {
             </Example>
 
             <Example
-                description='Menu with grouped sub-menus and group headers.'
-                title='Menu with Group'>
+                description='Menu items with horizontal line as separator.'
+                title='Menu with Separator'>
                 <Menu>
                     <Menu.List>
-                        <Menu.Item>
+                        <Menu.Item separator>
                             <Link to='#'>Option 1</Link>
                         </Menu.Item>
                         <Menu.Item>
                             <Link to='#'>Option 2</Link>
                         </Menu.Item>
-                        <Menu.Item>
+                        <Menu.Item separator>
                             <Link to='#'>Option 3</Link>
                         </Menu.Item>
+                        <Menu.Item>
+                            <Link to='#'>Option 4</Link>
+                        </Menu.Item>
                     </Menu.List>
-                    <Menu.Group title='Group Header'>
-                        <Menu.List>
-                            <Menu.Item>
-                                <Link to='#'>Option 4</Link>
-                            </Menu.Item>
-                            <Menu.Item>
-                                <Link to='#'>Option 5</Link>
-                            </Menu.Item>
-                            <Menu.Item>
-                                <Link to='#'>Option 6</Link>
-                            </Menu.Item>
-                        </Menu.List>
-                    </Menu.Group>
                 </Menu>
             </Example>
 
             <Example
-                description='Menu items with horizontal line as separator.'
+                description='Menu item states - selected, active, and disabled.'
                 title='Menu with Separator'>
                 <Menu>
-                    <Menu.List separated>
-                        <Menu.Item>
+                    <Menu.List>
+                        <Menu.Item separator>
                             <Link to='#'>Option 1</Link>
                         </Menu.Item>
-                        <Menu.Item>
+                        <Menu.Item active>
                             <Link to='#'>Option 2</Link>
                         </Menu.Item>
-                        <Menu.Item>
+                        <Menu.Item selected>
                             <Link to='#'>Option 3</Link>
                         </Menu.Item>
-                        <Menu.Item>
+                        <Menu.Item disabled>
                             <Link to='#'>Option 4</Link>
                         </Menu.Item>
                     </Menu.List>
                 </Menu>
             </Example>
 
             <Example
-                description='Menu items with an add-on before.'
-                title='Menu with Addon Before'>
-                <Menu addonBefore>
+                description='Menu items with an add-on before or after.'
+                title='Menu with Add-on'>
+                <Menu>
                     <Menu.List>
-                        <Menu.Item>
+                        <Menu.Item addonBefore='grid'>
                             <Link to='#'>Option 1</Link>
                         </Menu.Item>
-                        <Menu.Item addon='accept'>
+                        <Menu.Item addonBefore='wrench'>
                             <Link to='#'>Option 2</Link>
                         </Menu.Item>
-                        <Menu.Item>
+                        <Menu.Item addonAfter='accept' addonBefore='history'>
                             <Link to='#'>Option 3</Link>
                         </Menu.Item>
-                        <Menu.Item>
+                        <Menu.Item addonBefore='lightbulb'>
                             <Link to='#'>Option 4</Link>
                         </Menu.Item>
                     </Menu.List>
 
@@ -1,11 +1,10 @@
 import classnames from 'classnames';
-import MenuGroup from './_MenuGroup';
 import MenuItem from './_MenuItem';
 import MenuList from './_MenuList';
 import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 
-const Menu = React.forwardRef(({ addonBefore, children, className, disableStyles, ...props }, ref) => {
+const Menu = React.forwardRef(({ children, className, disableStyles, ...props }, ref) => {
 
     useEffect(() => {
         if (!disableStyles) {
@@ -15,38 +14,25 @@ const Menu = React.forwardRef(({ addonBefore, children, className, disableStyles
 
     const menuClasses = classnames(
         'fd-menu',
-        {
-            'fd-menu--addon-before': addonBefore
-        },
         className
     );
 
     return (
         <nav {...props} className={menuClasses}
             ref={ref}>
-            {React.Children.toArray(children).map(child => {
-                return React.cloneElement(child, {
-                    addonBefore: addonBefore
-                });
-            })}
+            {children}
         </nav>
     );
 });
 
 Menu.displayName = 'Menu';
 
 Menu.propTypes = {
-    addonBefore: PropTypes.bool,
     children: PropTypes.node,
     className: PropTypes.string,
     disableStyles: PropTypes.bool
 };
 
-Menu.propDescriptions = {
-    addonBefore: 'Set to **true** enables menu items with add-on before.'
-};
-
-Menu.Group = MenuGroup;
 Menu.Item = MenuItem;
 Menu.List = MenuList;
 
 
@@ -19,52 +19,6 @@ describe('<Menu />', () => {
         </Menu>
     );
 
-    const menuGroupCode = (
-        <MemoryRouter>
-            <Menu className='blue'>
-                <Menu.List className='blue'>
-                    <Menu.Item>
-                        <Link to='/'>Option 1</Link>
-                    </Menu.Item>
-                    <Menu.Item className='blue' isLink>
-                        <Link to='/'>
-                            Option 2
-                        </Link>
-                    </Menu.Item>
-                    <Menu.Item>
-                        <Link to='/'>Option 3</Link>
-                    </Menu.Item>
-                </Menu.List>
-                <Menu.Group className='blue' title='Group Header'>
-                    <Menu.List>
-                        <Menu.Item>
-                            <Link to='/'>Option 4</Link>
-                        </Menu.Item>
-                        <Menu.Item>
-                            <Link to='/'>Option 5</Link>
-                        </Menu.Item>
-                        <Menu.Item>
-                            <Link to='/'>Option 6</Link>
-                        </Menu.Item>
-                    </Menu.List>
-                </Menu.Group>
-                <Menu.Group title='Group Header 2'>
-                    <Menu.List>
-                        <Menu.Item>
-                            <Link to='/'>Option 7</Link>
-                        </Menu.Item>
-                        <Menu.Item>
-                            <Link to='/'>Option 8</Link>
-                        </Menu.Item>
-                        <Menu.Item>
-                            <Link to='/'>Option 9</Link>
-                        </Menu.Item>
-                    </Menu.List>
-                </Menu.Group>
-            </Menu>
-        </MemoryRouter>
-    );
-
     const menuSeparatorCode = (
         <MemoryRouter>
             <Menu>
@@ -88,12 +42,12 @@ describe('<Menu />', () => {
 
     const menuAddonBeforeCode = (
         <MemoryRouter>
-            <Menu addonBefore>
+            <Menu>
                 <Menu.List>
                     <Menu.Item>
                         <Link to='/'>Option 1</Link>
                     </Menu.Item>
-                    <Menu.Item addon='accept'>
+                    <Menu.Item addonBefore='accept'>
                         <Link to='/'>Option 2</Link>
                     </Menu.Item>
                     <Menu.Item>
@@ -113,12 +67,6 @@ describe('<Menu />', () => {
         expect(tree).toMatchSnapshot();
     });
 
-    test('create menu group component', () => {
-        const component = renderer.create(menuGroupCode);
-        const tree = component.toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
     test('create menu with separator component', () => {
         const component = renderer.create(menuSeparatorCode);
         const tree = component.toJSON();
@@ -131,16 +79,6 @@ describe('<Menu />', () => {
         expect(tree).toMatchSnapshot();
     });
 
-    describe('MenuGroup', () => {
-        test('should allow customization of header level', () => {
-            const element = mount(<Menu.Group headingLevel={2} title='Sample' />);
-
-            expect(
-                element.find('.fd-menu__title').type()
-            ).toBe('h2');
-        });
-    });
-
     describe('Prop spreading', () => {
         test('should allow props to be spread to the Menu component', () => {
             const element = mount(<Menu data-sample='Sample' />);
@@ -169,12 +107,12 @@ describe('<Menu />', () => {
         test('should allow props to be spread to the MenuItem component\'s addon div element', () => {
             const element = mount(
                 <MemoryRouter>
-                    <Menu addonBefore>
+                    <Menu>
                         <Menu.List>
                             <Menu.Item>
                                 <Link to='/'>Option 1</Link>
                             </Menu.Item>
-                            <Menu.Item addon='accept' addonProps={{ 'data-sample': 'Sample' }}>
+                            <Menu.Item addonBefore='accept' addonProps={{ 'data-sample': 'Sample' }}>
                                 <Link to='/'>Option 2</Link>
                             </Menu.Item>
                             <Menu.Item>
@@ -205,7 +143,7 @@ describe('<Menu />', () => {
                 </MemoryRouter>);
 
             expect(
-                element.find('a.fd-menu__item').getDOMNode().attributes['data-sample'].value
+                element.find('a.fd-menu__link').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
@@ -219,23 +157,7 @@ describe('<Menu />', () => {
             );
 
             expect(
-                element.find('a.fd-menu__item').getDOMNode().attributes['data-sample'].value
-            ).toBe('Sample');
-        });
-
-        test('should allow props to be spread to the MenuGroup component', () => {
-            const element = mount(<Menu.Group data-sample='Sample' title='Sample' />);
-
-            expect(
-                element.getDOMNode().attributes['data-sample'].value
-            ).toBe('Sample');
-        });
-
-        test('should allow props to be spread to the MenuGroup heading component', () => {
-            const element = mount(<Menu.Group title='Sample' titleProps={{ 'data-sample': 'Sample' }} />);
-
-            expect(
-                element.find('h3').getDOMNode().attributes['data-sample'].value
+                element.find('a.fd-menu__link').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
     });