From f6c25ac88cffefaab475c7feb2325b3242472d03 Mon Sep 17 00:00:00 2001 From: Ian Stewart Date: Mon, 15 Jan 2018 09:34:06 +0100 Subject: [PATCH] [5.1.0] Refactored and added tests, added checkbox group component, refactored store-emoji file and added custom styling possibilities to checkbox. (#1028) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Added whiteSpace: nowrap. (#749) * Added whiteSpace: nowrap. * Fixed linter warning. * Added command avatar prop to Commands and made command description not required. Added event listener for escape key press to Dialog, Lightbox, Menu, Select and IconMenu. Fixed various styling issues, added more component tests. * Automated changelog (#754) * Added gemfile. * Added changelog gen. * Added changelog. * Added check for open state. (#756) * Added check for open state. * Moved checks to close functions instead. * Changed check. * Updated changelog. * Mentions/message (#746) * :construction: Working on mentions * Changed to array of strings. * Changed example. * Finished mention styles. * Refactored TextMessage to make use of html-react-parser instead of dangerouslySetInnerHTML. * Added onMentionClick. * Added docgen. * Changed docs. * Component tests: Added onChange tests (#760) * Added onchange test for checkbox * Added onchange test for input * Added onchange test for radio-button * Added onchange test for slider * Added onclick test for tab * Small fix * Issue #666 (#702) * :fire: Removed withTheme component. #666 * :memo: Removed depricated withTheme. * :memo: Removed warning. * :memo: Docgen * Added option to match commands non leading, changed command.title to command.value, added command.prefix (#753) * Made commands great again. * Changed docs. * Changed docs. * Added prefix to functions. * :lipstick: Adjusted styles to conform with design. (#701) * :lipstick: Adjusted styles to conform with design. * Added disabled prop to Input, fixed placeholder styles. * Changed Input text color. * Changed disabled styles. * Fixed tests. * Issue #705 (#707) * :sparkles: Added open and hideMenu prop, added onClickOutside * :lipstick: Added fontSize * :memo: Updated docs to match new api * :memo: Docgen * Added handleKeyDown to EmojiMenu. * Issue #725 (#750) * WIP emoji parser to new `emoji.js`. * WIP emoji-parsing files. * Added prettier. * Ignored emojione.json. * Fixed parse script. * Added emoji.sh. * Updated emojione. * Added tone0. * Fixed modifier titles. * Removed log. * Removed svgSprites prop, added cdn url fix. * Added fontSize. * Changed script to fix error in emojione.json. * Removed statics. * Added attribution to component. * Added attribution to docs page. * Added attribution to README. * Fixed color. * Docgen. * Added attribution. * Prettiered file. * Issue #641 (#659) * :hammer: Refactored list-item to fix alignment issue. Fixed issue #648. #648 * :white_check_mark: Added tests. * :bug: Removed redundant transform. * :green_heart: Fixed test. * :art: Added nestedLevel prop and passthrough. * :art: Added nestedLevel prop and passthrough. * :lipstick: Added style handling for nestedLevel prop. * :green_heart: Fixed tests for root styles. * :white_check_mark: Added test for nestingLevel styles. * :memo: Added example shownig nestedLevel prop at work. * :memo: DocGen. * :memo: Fixed docs nav throwing warning. * :rotating_light: Fixed linting errors. * Issue #652 (#711) * :art: Added event to Pagination onChange * :memo: Changed doc comment * :art: Added event to sendEmoji * :art: Changed prop name * :art: Added event prop * :art: Added event, added docs * :memo: Docgen * :memo: Render newlines as
* :memo: Changed docs * Fixed test. * Fixed doc emoji css. * 4.0.0 * Removed unused npm script. * Fixed Searchbox changeSearchQuery (#765) * Pass value directly, event did not persist. * Docgen. * Removed console.log. * Made prop not required. (#766) * Added textDecoration: none. (#767) * Added textDecoration none to EmojiMenu attribution link, made onMentionClick not required, fixed bug with SearchBox changeQuery by passing value instead of event. * Updated LABELS.md. (#771) * Updated LABELS.md. * Added missing label. * Component tests: Consistency and test fixes (#763) * admin-badge consistency * alert consistency * small fixes * app-header consistency * small consistency changes fot tests * channel-header consistency * checkbox consistency * dialog consistency * Fixed input tests and added consistency * lightbox consistency * Fixed list tests and added consistency * Fixed menu-item tests and added consistency * added textAlign: 'left' (#772) * Added secondaryText to ChannelHeader. (#773) * Issue #770 (#774) * Added secondaryText to ChannelHeader. * Changed to minWidth, made Pagination button great again. * Added secondaryText to ChannelHeader, fixed TableHeader text alignment, fixed Pagination buttons, added tests. * Fixed test. * Fixed mistake with Button styling. (#776) * Fixed ChannelHeader styling for buttons. * Eslint (#779) * Updated eslint and config. * Applied new rules. * Removed z-index to overcome z-index quirks & restructured avatar div order. (#782) * Bug/doc table (#798) * Added correct styling for td items. * DocGen. * Removed borderTop, fixes issue #787. (#794) * Issue #790 (#791) * Added backgroundColor to input styles. * Reformatted prop types. * Added sendIcon and sendIconColor props. * Docgen. * Added placeholderStyle. * Issue #789 (#792) * Removed message arrow. * Decreased margins. * Fixed docs. * Fixed tests. * Added placeholderStyle to SearchBox. (#795) * Props to themeable component override color passed by theme, fixed issue #788. (#796) * Fixed EmojiMenu styling, closes issue #797. (#799) * Fixed EmojiMenu styling, closes issue #797. * Fixed tests. * Changed to longhand backgroundColor. (#801) * Changed to longhand backgroundColor. * Fixed tests * Issue #800 (#802) * Added dividerStyle, fixed issue #800. * Fixed Divider styles. * Added more examples. * Prepared for extended theming capabilities. * Added activeStyle to MenuItem, fixed issue #808. (#811) * Added iconColor to select, fixed issue #807. (#809) * Added iconColor to select, fixed issue #807.' * Fixed documentation. * Fixed linting errors. * Added iconColor to SearchBox, fixed issue #804. (#810) * Added iconColor to select, fixed issue #807.' * Added iconColor to SearchBox, fixed issue #804. * Fixed documentation. * Fixed documentation. * Fixed linting errors. * Added more override capabilities. * Added expandMenuItem to Message. (#814) * Added expandMenuItem to Message. * Changed docs. * Added commandStyle. (#815) * Added commandStyle. * Adjusted docs text. * Added more overiding styles capabilities. * Added check for expandMenuItem. * Fixed Message expand menu item, added missing check for expandMenuItem prop. * Added key events to Commands (#818) * Added onMenuClose. * Changed styles. * Changed onMouseOver to onChange. * Changed avatar styles. * Added key events. * Wip fixing docs. * WIP docs. * Removed borderRadius override. * Fixed docs. * Return this.hideMenu(); * Changed to single line. * Added onMenuOpen. * Emoji filter (#813) * WIP emoji parser to new `emoji.js`. * WIP emoji-parsing files. * Added prettier. * Ignored emojione.json. * Fixed parse script. * Added emoji.sh. * Updated emojione. * Added tone0. * Fixed modifier titles. * Removed log. * Removed svgSprites prop, added cdn url fix. * Added fontSize. * Changed script to fix error in emojione.json. * Removed statics. * Added attribution to component. * Added attribution to docs page. * Added attribution to README. * Fixed color. * Docgen. * Added attribution. * WIP emojifilter. * Fixed styles. * Added EmojiModifiers to EmojiFilter. * Sort of working docs. * Added parseHtml. * WIP emoji filter. * Fixed home table styles. * Added selectEmoji. * WIP filter. * Removed FocusTrap. * Uninstalled focus-trap-react. * Added tone filter.; * Fixed tab and enter events. * WIP emoji filter. * Added handleClose and added selectedEmoji. * Changed check. * Deconstructed onMenuClose. * Changed to handleChange. * Removed log. * Added focus on select. * Removed unused prop. * Added override style. * Only import _ because chain wouldnt work otherwise. * Made null default selected index. * Added onOpenMenu. * Multiline input (#785) * :sparkles: Added multiline to message input #134 * :sparkles: Added multiLine to Input * :memo: Added docgen * :art: Added default argument * :white_check_mark: Fixed tests * :white_check_mark: Added tests * Fixed merge conflicts * Fixed multi-line delete text bomb. * Fixed broken test. * Added multiline fix to input component. * Ignored package-lock. * Reverted change. * Removed correct file. * Moved propTypes and defaultProps to top of file. * Moved propTypes, defaultProps and displayName to top of file. * Docgen. * Removed redundant. * Added coverage to gitignore. * Added correct multiline hadnling code. * Added multiline example to docs. * Added `mobile-detect`. * Added mobile check so mobiles can use enter in multiline message inputs. * Moved mobile detect to internal function. * Added maxRows to multiline input. * Added maxRows to Input textarea. * Only get styles once... * Only get styles once... * Added lodash.get. * Linted file. * Added getStyles.placeholder. * Added rowHeight prop. * Destruct props instead of passing them, changed checks. * Added rowHeight prop. * Added multiline to Input and MessageInput. Added key events to Commands, added EmojiFilter component. * Added icons. (#820) * Added icons. * Docgen. * Destructed rowHeight prop. (#821) * Added four new icons, desctructed rowHeight prop in Input to prevent warnings. * Patch/card header styles (#823) * Added overide possibilities for card-header header element. * DocGen. * Added test for new getStyle function. * Added override for CardHeader. * Changed mentions to highlights. (#824) * Changed mentions to highlights. * Applied changes. * Docgen. * Changed mentions to highlights, changed how highlights are matched. * Issue #830 (#831) * Adjusted html stucture and css for profile component. * Added override style for cover and coverImage. * DocGen. * Fixed tests. * Added override capabilities to profile component. * Added `left: 50%` & `translate(-50%, -50%)`. Fixed #833. (#834) * Fixed profile styling. * Issue #778 (#836) * Added lodash to dependencies. * Replaced underscore with lodash. Fixes #778. * Removed underscore from dependencies. * Issue #837 (#839) * Added maxValue defaultprop. * Made check better. * Adjusted styles. Fixes #837. * Added more examples in badges. * DocGen. * Made prettier. * Tab change callback (#838) * Added onTabChange prop to tabs. * DocGen. * Added callback log to docs. * Added event and index to callback. * Adjusted log to show logging index. * DocGen. * Added callback to Tabs and fixed badge styling bug. * Tabs selected index (#841) * Simplified getSelectedTab. * Added selectedIndex prop. * Docgen. * Fixed tasks. * Fixed wrong function statements. * Removed if statement & componentWillReceive. * Made Tabs so it can work as a controlled component. * DocGen. * Tabs selected index (#844) * Simplified getSelectedTab. * Added selectedIndex prop. * Docgen. * Fixed tasks. * Fixed wrong function statements. * Removed if statement & componentWillReceive. * Changed check to isNumber. * Message badge (#846) * Added badge to Message. * Docgen. * Fixed test. * Added badge prop to Message. * Issue #851 (#852) * [4.3.6] Added badge prop to Message. (#847) * Issue #203 search-box (#583) * Refactored style function for search-box, #203 * Added test for search-box style function * Issue #203 select (#584) * Changed to es6 default argument * Added test for select style function, #203 * :bug: Made offline the default status (#585) * Issue #578 (#586) * fixed #578 * updated docs for pagination * Made Avatar status default offline, added jumpToPage Pagination, fixed some bugs with Pagination. Changed a lot of code styling, added getStyles tests. * Added test for slider style function, #203 (#587) * Issue #203 switch (#589) * Refactored style function for switch, #203 * Added test for switch style function, #203 * Added test for table style function, #203 (#590) * Issue #203 table items (#591) * Added test for table-body style function, #203 * Added test for table-column style function * Added test for table-header-column style function * Added test for table-header style function * Added test for table-row style function * :fire: Removed argument * :fire: Changed argument * Issue #203 alert (#592) * Refactored style function for alert, #203 * Added test for alert style function * Issue #203 banner (#593) * Refactored style function for banner, #203 * Added test for banner style function * Issue #203 divider (#594) * Refactored style function for divider, #203 * Small fix * Added test for divider style function * Issue #203 icon menu (#596) * Refactored style function for icon-menu, #203 * Added test for icon-menu style function * Issue #203 list (#597) * Refactored style function for list, #203 * Added test for list style function * Issue #598 (#600) * :bug: Increased zIndex * :memo: Added IconMenu example * Switch theme (#601) * :art: Changed to default param * :art: Minor code styling improvements * :bug: Changed to backgroundColor * Issue #203 emoji-menu (#595) * Refactored style function for emoji-menu, #203 * Added test for emoji-menu style function * Refactored emoji-categories styles * Changed naming * Refactored emoji-category styles * Refactored emoji-modifiers styles * Added tests * Fixed zIndex issue with ListItem, fixed theming issue with Switch, added more style tests. * :white_check_mark: Added test for getPager (#603) * :white_check_mark: Added test for getPager * :art: Fixed tets * :pencil2: Fixed typo * :white_check_mark: Added test * :lipstick: Adjusted styles to fix bug. Fixes #495. * :memo: Adjusted image size on docs page. #495 * Issue #604 (#606) * :sparkles: ListItem root click toggles nested list if onClick is not supplied * :zap: Added check for children to prevent redundant calls to setState * :art: Saved operators in const * :rewind: Reverted develop push. @iancstewart didn't have his coffee yet. * Issue #495 (#607) * :sparkles: Added new header design for lightbox. * :lipstick: Styled lightbox image. Fixed #495 #495 * :memo: DocGen. * :bug: Renamed prop to `title`. * :memo: DocGen. * :bug: Adjusted propname for image-message. * Issue #523 (#549) * :wrench: Ejected create-react-app * :fire: Removed styleroot * :fire: Removed eslint from create-react-app * :memo: Added info about styleroot * :green_heart: Installed radium * :hankey: Possible fix. (#608) * :hankey: Possible fix. Not very elegant though. * :memo: Added section about scaling emoji's * :rotating_light: Fixed maxLength * :sparkles: Added error to RadioButtonGroup (#611) * Added error to RadioButton group, added className to messages, added more tests. * :ambulance: Added missing type (#613) * :ambulance: Added hotfix for long text in tables (#614) * Added hotfix for Banner, added fix for long texts in Table. * Feature/collapsed images (#617) * :hankey: Added missing keys * :sparkles: Added collapse to image Messag * :pencil2: Fixed typo * :sparkles: Added collapsedText * :hankey: Oops * :lipstick: Added cursor * :memo: Added collapse example * [Feature] Commands (#616) * :sparkles: Added Commands component * :memo: Added docs for Command component * :memo: Fixed mistakes * :art: Changed to lodash map * Added Commands component, added collapsed and expand props to Message allowing image messages to be collapsed and expanded. * :sparkles: Added param to Commands (#619) * :sparkles: Added param to Commands * :memo: Added param example * :memo: Changed docs * :sparkles: Added filter to Commands (#620) * Feature/commands open/close (#621) * :sparkles: Added filter to Commands * :fire: Added open/close based on value prop * :memo: Changed placeholder * :sparkles: Added onClickOutside, clicking outside the menu will now close it (#623) * Added auto open/close to Commands, added value prop and filter to commands and added onClickOutside to Commands. * Commands onselect (#625) * :lipstick: Removed margin * :bug: Added missing setState * :bug: Added missing handleSelect * :memo: Added working hover and select events * :fire: Removed log * Added missing handleSelect to Commands, fixed styles. * :hammer: Refactored message doc to use selects instead of rendering more message lists (#629) * :lipstick: Fixed height for list-items without second line. (#632) * :lipstick: Fixed height for list-items without second line. Fixes #630. #630 * :green_heart: Added missing parameter to ListItem test. * :white_check_mark: Added test for `getStyle.root()` function for single-line styles. * :art: Flipped things around * :white_check_mark: Fixed test to match flip * :lipstick: Decreased ListItem height * :memo: Added primaryText example * Clickoutside (#634) * :heavy_minus_sign: Removed onlcickoutside, it caused production builds to fail * :hammer: Refactored to use a clickAway element * Bug/color contrast (#635) * :lipstick: Changed text colors * :lipstick: Changed bold texts to primaryText color * Removed onClickOutside from Commands, changed text colors to increase contrast. * :lipstick: Changed color * :lipstick: Added top and translate, fixed firefox issue (#640) * :sparkles: Added rightButton prop, overhauled stylings (#638) * :sparkles: Added rightButton prop, overhauled stylings * :fire: Removed override * :lipstick: Added top and translate, fixed firefox issue * :white_check_mark: Fixed tests * :green_heart: Fixed test * Fixed browser support issue with LisItems, added rightButton to MessageInput. * List item/icon menu (#644) * :lipstick: Overhauled styles to not break * :fire: Removed avatar from example * :green_heart: Fixed tests * Removed translate from button and avatar, fixed icon menu bug. * :bug: Fixed buttons for long text (#646) * Fixed ListItems with long texts and buttons. * :bug: Combine styles instead of returning (#650) * :lipstick: Added translate (#643) * :lipstick: Added translate Fixed issue #637 * :lipstick: Increased padding * :green_heart: Fixed test * Issue #622/commands (#649) * :hammer: Reverted changes * :lipstick: Fixed styles for long texts, changed color * Reintroduced react-onclickoutside, fix override style bug with MessageInput, fixed Select header long texts. * Profile component test (#610) * Added test examples for style component * :truck: Moved file * Expanded profile component test * WIP function test with sinon * :white_check_mark: Moved tests * :fire: Removed tests * Added getStyle tests * Combined tests * Test button as prop instead of passing as child * Fixed small mistake in button test * Combined tests * Changed naming of profile to wrapper * added test for alert (#609) * added test for alert * fixed an npm test fail and re-ordered the test itself * Fixed tests * :art: Added event argument to props (#653) * :art: Added event argument to props * :art: Changed propName * :memo: Changed doc comments * Added event to function props, changed onHover to onMouseOver. * AdminBadge component test (#655) * Added test for admin-badge component * :art: Changed titles * :hammer: Refactored list-item to fix alignment issue. (#656) * :hammer: Refactored list-item to fix alignment issue. Fixed issue #648. #648 * :white_check_mark: Added tests. * :bug: Removed redundant transform. * :green_heart: Fixed test. * Issue #622 (#658) * :art: Replaced clickAway with onClickOutside * :art: Changed to onClickOutside * :art: Changed to onClickOutside * :white_check_mark: Removed test * Component tests: supply userAgent using beforeEach (#660) * Supplied userAgent using beforeEach * Supplied userAgent using beforeEach * Supplied userAgent using beforeEach * Changed useragent:null to undefined * Issue #628 (#633) * :art: Moved icon menu into textMessage. #628 * :bug: Fixed semantics. * :art: Moved icon menu into stickerMessage. #628 * :art: Move icon menu into imageMessage. #628 * :bug: Added render imageMessageIconMenu function. #627 * :bug: Removed icon button within collapsed image body. #627 * :memo: DocGen. * Squashed commit of the following: commit 552b3e691e39e1b987b41332e1a338998ba52389 Author: Ian Stewart Date: Fri Jun 9 09:52:07 2017 +0200 :hammer: Refactored list-item to fix alignment issue. (#656) * :hammer: Refactored list-item to fix alignment issue. Fixed issue #648. #648 * :white_check_mark: Added tests. * :bug: Removed redundant transform. * :green_heart: Fixed test. commit 14fce69248c544b11e9d295f763c810e60e12ef4 Author: Ralphvandodewaard Date: Fri Jun 9 09:16:05 2017 +0200 AdminBadge component test (#655) * Added test for admin-badge component * :art: Changed titles commit 2f4ae0347f4ee9bf8aa7f98d2820e05203409640 Author: sjaakluthart Date: Thu Jun 8 15:18:56 2017 +0200 Added event to function props, changed onHover to onMouseOver. commit c2b453b10c4962ccc8f2e8397bc790c6af6977d6 Merge: c2a2c93 5fe3d93 Author: sjaakluthart Date: Thu Jun 8 15:18:19 2017 +0200 :twisted_rightwards_arrows: Merged origin/master commit c2a2c936003db296eeda4282a1dd5b7cadcdc127 Author: Sjaak Luthart Date: Thu Jun 8 15:16:45 2017 +0200 :art: Added event argument to props (#653) * :art: Added event argument to props * :art: Changed propName * :memo: Changed doc comments commit 5c9b58fb249ec342931c99b39ea6f83a94c4d5ab Author: Tom Oversluizen Date: Thu Jun 8 12:32:09 2017 +0200 added test for alert (#609) * added test for alert * fixed an npm test fail and re-ordered the test itself * Fixed tests commit 5fe3d936223c6d252d5cddc0866434c9d424f0bb Author: Sjaak Luthart Date: Thu Jun 8 08:59:54 2017 +0200 [3.5.7] Reintroduced react-onclickoutside, fix override style bug with MessageInput, fixed Select header long texts. (#651) * Added more tables. (#452) * added text overflow to list-item (#455) * added text overflow to list-item * deleted comma at line 65 * :bug: Added working fix * Saved styles to object for all pages (#457) * Added more examples to docs (#450) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * Issue #456 (#458) * :bug: Added text overlfow to Profile * :bug: Added text overflow to channel header * :bug: Added text overflow to pop over * :bug: Added textOverflow to AppHeader * :bug: Added text overflow to menu item * Add input example (#459) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * :bug: Added disabled styles * :lipstick: Changed color * :fire: Removed inputs * Added error and disabled styles to Slider, fixed text overflow issues. * Issue-#462 (#464) * listItem set secondaryText lineHeight to 16px * Increased listItem height and fixed lineHeight * Fixed lineheight in list and updated examples * modified the max-height of the messageImage (#466) * modified the max-height of the messageImage * deleted commets and narrowed the max height down to 200px * Added more verticl spacing between Title, Description, Usage, Examples and Props (#468) * Fixed styling for Input page (#471) * Fixed styling for Input page * :lipstick: Changed Input's background color * Issue-#451: Fixed last few "style={{ }}"s (#469) * Fixed last few "style={{ }}"s * :bug: Reverted changes * :art: Renamed object * Issue #446: Added examples to components (#470) * Added AdminBadge example * Added Badge example * Added Button example * :art: Changed to single lines * Changed image Message max height, fixed Input background colour, fixed Input label colour. * Issue #477 (#478) * :sparkles: Added IconNotification * :memo: Added docs output * Issue #447 (#472) * Fixed styling for Input page * :sparkles: Added `lightbox/index.jsx`. * :lipstick: Added styles for `lightbox`. * :sparkles: Added lightbox to `message.jsx`. #447 * :memo: Docgen. * :hankey: Reverted unwanted commit. * :sparkles: Added `enableLightbox` prop. * :memo: Docgen. * :memo: Added `Docs` page. * :pencil2: New image link. * :bug: Added more checks for `enableLightbox`. * :bug: Added more checks. * :sparkles: Added onMenuClose to IconMenu (#479) * :sparkles: Added onMenuClose to IconMenu * :memo: Added docs * Added Lightbox component, added lightbox to Message, added IconNotification, added onMenuClose to IconMenu. * :sparkles: Added status indicator to Avatar (#484) Fixed issue #483 * :zap: Added recompose pure to WithTheme (#485) Fixed issue #481 * Added pure to WithTheme, added status to Avatar. * Profile status (#489) * :sparkles: Added status to Profile * :memo: Added docs output * Added status prop to Profile. * :bug: Added zIndex to icon and badge (#491) * Added zIndex to ListItem badge and icon style. * Fixed profile name being pushed under section (#475) * Fixed profile name being pushed under section * Same fix using styles instead of section element * New fix attempt for profile name being pushed under section * Reversed changes and added minHeight * Stickers (#497) * :sparkles: Added sticker type, added MessageHeader * :heavy_minus_sign: Removed press menu to prepare for more component splits * :art: Added MessageTime * :art: Changed import * :construction: WIP splitting messages * :art: Added ImageMessage * :art: Added StickerMessage * :hammer: Moved components to separate folders to allow for separate styles * :art: Moved styles to MessageTime folder * :art: Moved styles to MessageHeader * :construction: WIP styling StickerMessage * :lipstick: Finished sticker message style * :art: Moved styles to TextMessage * :lipstick: Added `flexShrink` to prevent shrinking. * :art: Moved style to ImageMessage * :memo: Added docs * Added stickers to Message, fixed bugs with Profile. * Fixed listItem primaryText, secondaryText and adminBadge being off center (#467) * Fixed primaryText, secondaryText and adminBadge being off center * Reversed lineHeight changes and used another method to center items * Fixed primaryText lineHeight and used padding instead to position text * Re-added textOverflow and used minHeight * Reversed overflow:hidden in root * Develop (#498) * Added more tables. (#452) * added text overflow to list-item (#455) * added text overflow to list-item * deleted comma at line 65 * :bug: Added working fix * Saved styles to object for all pages (#457) * Added more examples to docs (#450) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * Issue #456 (#458) * :bug: Added text overlfow to Profile * :bug: Added text overflow to channel header * :bug: Added text overflow to pop over * :bug: Added textOverflow to AppHeader * :bug: Added text overflow to menu item * Add input example (#459) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * :bug: Added disabled styles * :lipstick: Changed color * :fire: Removed inputs * Added error and disabled styles to Slider, fixed text overflow issues. * Issue-#462 (#464) * listItem set secondaryText lineHeight to 16px * Increased listItem height and fixed lineHeight * Fixed lineheight in list and updated examples * modified the max-height of the messageImage (#466) * modified the max-height of the messageImage * deleted commets and narrowed the max height down to 200px * Added more verticl spacing between Title, Description, Usage, Examples and Props (#468) * Fixed styling for Input page (#471) * Fixed styling for Input page * :lipstick: Changed Input's background color * Issue-#451: Fixed last few "style={{ }}"s (#469) * Fixed last few "style={{ }}"s * :bug: Reverted changes * :art: Renamed object * Issue #446: Added examples to components (#470) * Added AdminBadge example * Added Badge example * Added Button example * :art: Changed to single lines * Changed image Message max height, fixed Input background colour, fixed Input label colour. * Issue #477 (#478) * :sparkles: Added IconNotification * :memo: Added docs output * Issue #447 (#472) * Fixed styling for Input page * :sparkles: Added `lightbox/index.jsx`. * :lipstick: Added styles for `lightbox`. * :sparkles: Added lightbox to `message.jsx`. #447 * :memo: Docgen. * :hankey: Reverted unwanted commit. * :sparkles: Added `enableLightbox` prop. * :memo: Docgen. * :memo: Added `Docs` page. * :pencil2: New image link. * :bug: Added more checks for `enableLightbox`. * :bug: Added more checks. * :sparkles: Added onMenuClose to IconMenu (#479) * :sparkles: Added onMenuClose to IconMenu * :memo: Added docs * Added Lightbox component, added lightbox to Message, added IconNotification, added onMenuClose to IconMenu. * :sparkles: Added status indicator to Avatar (#484) Fixed issue #483 * :zap: Added recompose pure to WithTheme (#485) Fixed issue #481 * Added pure to WithTheme, added status to Avatar. * Profile status (#489) * :sparkles: Added status to Profile * :memo: Added docs output * Added status prop to Profile. * :bug: Added zIndex to icon and badge (#491) * Added zIndex to ListItem badge and icon style. * Fixed profile name being pushed under section (#475) * Fixed profile name being pushed under section * Same fix using styles instead of section element * New fix attempt for profile name being pushed under section * Reversed changes and added minHeight * Stickers (#497) * :sparkles: Added sticker type, added MessageHeader * :heavy_minus_sign: Removed press menu to prepare for more component splits * :art: Added MessageTime * :art: Changed import * :construction: WIP splitting messages * :art: Added ImageMessage * :art: Added StickerMessage * :hammer: Moved components to separate folders to allow for separate styles * :art: Moved styles to MessageTime folder * :art: Moved styles to MessageHeader * :construction: WIP styling StickerMessage * :lipstick: Finished sticker message style * :art: Moved styles to TextMessage * :lipstick: Added `flexShrink` to prevent shrinking. * :art: Moved style to ImageMessage * :memo: Added docs * Added stickers to Message, fixed bugs with Profile. * :bug: Added secondaryBadge prop for badges in the text field. * :bug: Adjusted AdminBadge styles to fix height issue. * :memo: Added with secondaryBadge to docs pages. * :memo: DocGen. * :bug: Added 2px lineHeight for overhanging 'g'. * :bug: Added 2px lineHeight to compensate for overhanging g. * :art: Renamed prop * Issue #493 (#501) * :sparkles: Added `IconMenu`. * :bug: Changed prop onClick to closeMenu. * :memo: Added section to docs for messages with icon menu. * :memo: DocGen. * :fire: Removed redundant method * :art: Renamed method * Compact messages image (#500) * :bug: Fixed compact stickers * :lipstick: Changed style for compact image messages * Added IconMenu to message, fixed compact Message styles, added textBadge to ListItem. * fixed #508 (#509) * Tables (#510) * :sparkles: Added Table components * :sparkles: Changed to Table components * :memo: Added docs page * :hankey: Added missing exports * :art: Changed to es6 functions * Added Table components, added value prop to CheckBox. * :bug: Added check for textBadge (#513) * Removed unknown handleSearch prop and fixed errors, for #517 (#519) * Issue #507 (#516) * :construction: WIP changing context * :construction: Added unsub * :twisted_rightwards_arrows: merged stash * :art: Added themeable component * :art: Added newline * :construction: Added themeable HoC * :art: Changed to es6 methods * :hammer: Changed back to stateless, added color propType, added compose * :memo: WIP theme doc page * :truck: Renamed file * :twisted_rightwards_arrows: Merged stash * :fire: Removed pure to allow hovers to work again * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :fire: Removed theme wrapper * :memo: Added proper example for theme * :memo: Added h2 * :memo: Added default theme button * :truck: Made themeable part of the API * :art: Changed to lodash functions * :memo: Added themeable doc * :memo: Fixed usage * :memo: Changed getting started * :memo: Added docs output * :memo: Removed components I do not need docs for * added curry function for themeable options * :rotating_light: Removed React warning * :art: Changed naming * :memo: Finished themeable hoc doc * :memo: Added deprecation warnings * added option to use anchor-ui without withTheme component * :hammer: Applied theme changes to EmojiMenu * :hammer: Applied theme change to Modal * :art: Removed redundant * :green_heart: Fixed lint error * :hankey: Reverted change * Changed how theme color is managed, added ThemeProvider, added themeable HoC. * :hankey: Added missing export * Added export for ThemeProvider. * Issue #504 (#529) * :bug: Added `contentStyle` prop to iconMenu. * :memo: DocGen. #504 * :bug: Added default for prop. Fixed #504. * :memo: DocGen. #504 * Issue #203 avatar (#525) * Added test for avatar style function, #203 * Added test for each type * Issue #203 admin-badge (#524) * Added test for admin-badge style function * Fixed wrong property on inverted test * :lipstick: Added missing themeable to ChannelAvatar (#527) * Issue #518 (#532) * Made hideAlert prop optional, for #518 * Removed hideAlert from home and with-theme * :lipstick: Added theme color transition (#528) * :lipstick: Added theme color transition * :green_heart: Fixed tests * :hankey: Added default `right: inital` to select's popOver styles. (#531) * :hankey: Added default `right: inital` to select's popOver styles. We should find a better fix for this. Fixes #530. #530 * :bug: Moved popOver styles to const. * deleted line-height to fix the display of the adminbadge on firefox, … (#521) * deleted line-height to fix the display of the adminbadge on firefox, fixed #512 * modified lineheight secondarytext * changed line-height of the textbadge to 22px * reverted changes * :sparkles: Added IconColor (#537) * :sparkles: Added icon refresh (#539) * Various styling fixes, added icons, added themeable to ChannelAvatar, added contentStyle to IconMenu, added transition to all components that use theme colour. * Refactored style function for banner, #203 (#536) * Added test for card-content style function, #203 (#542) * Added test for card-header style function, #203 (#544) * Added test for channel-header style function, #203 (#545) * Added test for card style function, #203 (#540) * Window resize (#543) * :heavy_plus_sign: Added `react-event-listener`. * :sparkles: Added `closeMenu` on window resize. * :memo: DocGen. * :green_heart: Added new line. * Fixed empty objects (#551) * Issue #203 button (#538) * Added test for button style function, #203 * Combine-styles fix * Fixed empty objects * :hankey: Fixed github button * Issue #203 badge (#535) * Added test for badge style function, #203 * Small fix * Fixed empty objects and changed to es6 default argument * :white_check_mark: Changed describe * Issue #203 checkbox (#546) * Added test for checkbox style function, #203 * Fixed empty object * Issue #203 dialog (#547) * Added test for dialog style function, #203 * Fixed tests. * Fixed empty object and changed to es6 default argument * Issue #203 empty-state (#548) * Refactored style function for empty-state, #203 * Fixed empty object * Fixed empty objects (#553) * Refactored style function for banner (#554) * Added test for lightbox style function, #203 (#555) * Refactored list style function (#556) * Issue #203 list-item (#557) * Added test for list-item style function * Changed to es6 default argument * Added test for menu-item style function, #203 (#559) * Added test for message style function, #203 (#561) * Issue #203 image-message (#563) * Added test for image-message style function * Changed to es6 default argument * Added test for message-header style function, #203 (#565) * Added test for message-time style function, #203 (#567) * :rotating_light: Fixed linter missing files. (#550) * :rotating_light: Fixed linter missing files. * resolved lint errors * Pagination (#564) * :sparkles: Added Pagination component * :sparkles: Added icons * :memo: Added docs page * :memo: Changed docs * :lipstick: Added width * :fire: Removed header * :sparkles: Added position prop * :memo: Updated docgen * :fire: Removed defaultProp * :hankey: Removed loze put * :sparkles: Changed argument * Components updated to ES6 arrow function (#566) * updated the badge function to a ES6 arrow function * updated the adminbadge function to an ES6 arrow function * updated the alert function to an ES6 arrow function * updated the app-header function to an ES6 arrow function * updated the avatar function to an ES6 arrow function * updated the button function to an ES6 arrow function * updated the card function to an ES6 arrow function * updated the channel-header function to an ES6 arrow function * updated the divider function to an ES6 arrow function * updated the emoji-menu function to an ES6 arrow function * updated the empty-state function to an ES6 arrow function * updated the home function to an ES6 arrow function * updated icon-menu function to an ES6 arrow function * updated lightbox function to an ES6 arrow function * updated list-item function to an ES6 arrow function * updated list function to an ES6 arrow function * updated icons function to an ES6 arrow function * updated loading function to an ES6 arrow function * updated menu-item function to an ES6 arrow function * updated message-list function to an ES6 arrow function * updated message function to an ES6 arrow function * updated nav function to an ES6 arrow function * updated paper function to an ES6 arrow function * updated pop-over function to an ES6 arrow function * updated profile-card function to an ES6 arrow function * updated profile function to an ES6 arrow function * updated props function to an ES6 arrow function * updated table function to an ES6 arrow function * updated tabs function to an ES6 arrow function * updated theme-provider function to an ES6 arrow function * updated themeable function to an ES6 arrow function * updated with-theme function to an ES6 arrow function * Added Pagination component, fixed some code styling, added tests. * :memo: Changed docs * Issue #203 loader (#558) * Refactored loader style function * Added test for loader style function, #203 * Fixed naming * Added root style function * Fixed function, added test * Added test for text-message style function, #203 (#572) * Issue #203 message-input (#573) * Refactored style function for message-input, #203 * Added test for message-input style function * Issue #203 message-list (#574) * Refactored style function for message-list, #203 * Added test for message-list style function * Fixed wrong naming (#575) * Added test for overlay style function, #203 (#576) * Added test for pagination style function, #203 (#577) * Issue #203 radio-button (#581) * Refactored style function for radio-button, #203 * Added test for radio-button style fucntion, #203 * SRC Functions update to ES6 (#571) * updated index funtion to an ES6 arrow function * updated app-header function to an ES6 arrow function * updated avatar function to an ES6 arrow function * updated badge function to an ES6 arrow function * updated card function to an ES6 arrow function * updated card-content function to an ES6 arrow function * updated card function to an ES6 arrow function * updated card-header function to an ES6 arrow function * updated channel header function to ES6 * updated checkbox function to ES6 * updated divider function to ES6 * updated emoji categories function to ES6 * updated emoji menu function to ES6 * updated empty state function to ES6 * updated the icons functions to ES6 * fixed console error in icons * updated input function to ES6 * updated internal functions to ES6 * updated list function to ES6 * updated loader functions to ES6 * :art: Moved scope * :hankey: Fixed conflict * :hankey: Added missing returns * :art: Reverted change * updated menu function to an ES6 arrow function * updated multiple messages functions to ES6 arrow functions * updated message-input functions to ES6 arrow functions * updated modal function to ES6 arrow function * updated overlay function to an ES6 arrow function * updated paper function to an ES6 arrow function * updated pop-over function to ES6 arrow function * fixed merge conflict * updated radio button function to ES6 arrow function * updated radio button group function to ES6 arrow function * updated slider function to ES6 arrow function * updated switch function to ES6 arrow function * updated tab function to ES6 arrow function * updated adminbadge getstyles function * updated app-header get styles function * updated avatar get styles function * updated button get style function * updated channel-header get styles functions * updated card-content get styles function * updaetd card-header get styles function * updated app-header get styles functions * updated checkbox getstyles functions * updated dialog getstyles function * updated empty-state getstyles function * updated input get styles functions * updated lightbox get-styles functions * updated list-item get styles function * updated menu getstyles functions * updated menu-item getstyles functions * updated messages get-styles functions * updated modal getstyles functions * updated overlay getstyles functions * updated paper getstyles function * updated profile getstyles functions * updated profile-card getstyles function * updated select getstyles functions * updated slider getstyles functions * updated tab getstyles functions * updated table getstyles function * updated table bpdy getstyles function * updated table column getstyles functions * updated table header getstyles functions * updated table-header-column getstyles functions * updated table-row getstyles functions * updated tabs getstyles functions * :hankey: Reverted change * :art: Removed newline * :art: Removed newline * Issue #203 pop-over (#579) * Refactored style function for pop-over, #203 * Added test for pop-over style function * Added test for position argument * Issue #203 profile-card (#580) * Changed to es6 default value * Added test for profile-card style function, #203 * Fixed avatar style test * Issue #203 radio-button-group (#582) * Refactored style function for radio-button-group, #203 * Added test for radio-button-group style function * Issue #203 search-box (#583) * Refactored style function for search-box, #203 * Added test for search-box style function * Issue #203 select (#584) * Changed to es6 default argument * Added test for select style function, #203 * :bug: Made offline the default status (#585) * Issue #578 (#586) * fixed #578 * updated docs for pagination * Made Avatar status default offline, added jumpToPage Pagination, fixed some bugs with Pagination. Changed a lot of code styling, added getStyles tests. * Added test for slider style function, #203 (#587) * Issue #203 switch (#589) * Refactored style function for switch, #203 * Added test for switch style function, #203 * Added test for table style function, #203 (#590) * Issue #203 table items (#591) * Added test for table-body style function, #203 * Added test for table-column style function * Added test for table-header-column style function * Added test for table-header style function * Added test for table-row style function * :fire: Removed argument * :fire: Changed argument * Issue #203 alert (#592) * Refactored style function for alert, #203 * Added test for alert style function * Issue #203 banner (#593) * Refactored style function for banner, #203 * Added test for banner style function * Issue #203 divider (#594) * Refactored style function for divider, #203 * Small fix * Added test for divider style function * Issue #203 icon menu (#596) * Refactored style function for icon-menu, #203 * Added test for icon-menu style function * Issue #203 list (#597) * Refactored style function for list, #203 * Added test for list style function * Issue #598 (#600) * :bug: Increased zIndex * :memo: Added IconMenu example * Switch theme (#601) * :art: Changed to default param * :art: Minor code styling improvements * :bug: Changed to backgroundColor * Issue #203 emoji-menu (#595) * Refactored style function for emoji-menu, #203 * Added test for emoji-menu style function * Refactored emoji-categories styles * Changed naming * Refactored emoji-category styles * Refactored emoji-modifiers styles * Added tests * Fixed zIndex issue with ListItem, fixed theming issue with Switch, added more style tests. * :white_check_mark: Added test for getPager (#603) * :white_check_mark: Added test for getPager * :art: Fixed tets * :pencil2: Fixed typo * :white_check_mark: Added test * :lipstick: Adjusted styles to fix bug. Fixes #495. * :memo: Adjusted image size on docs page. #495 * Issue #604 (#606) * :sparkles: ListItem root click toggles nested list if onClick is not supplied * :zap: Added check for children to prevent redundant calls to setState * :art: Saved operators in const * :rewind: Reverted develop push. @iancstewart didn't have his coffee yet. * Issue #495 (#607) * :sparkles: Added new header design for lightbox. * :lipstick: Styled lightbox image. Fixed #495 #495 * :memo: DocGen. * :bug: Renamed prop to `title`. * :memo: DocGen. * :bug: Adjusted propname for image-message. * Issue #523 (#549) * :wrench: Ejected create-react-app * :fire: Removed styleroot * :fire: Removed eslint from create-react-app * :memo: Added info about styleroot * :green_heart: Installed radium * :hankey: Possible fix. (#608) * :hankey: Possible fix. Not very elegant though. * :memo: Added section about scaling emoji's * :rotating_light: Fixed maxLength * :sparkles: Added error to RadioButtonGroup (#611) * Added error to RadioButton group, added className to messages, added more tests. * :ambulance: Added missing type (#613) * :ambulance: Added hotfix for long text in tables (#614) * Added hotfix for Banner, added fix for long texts in Table. * Feature/collapsed images (#617) * :hankey: Added missing keys * :sparkles: Added collapse to image Messag * :pencil2: Fixed typo * :sparkles: Added collapsedText * :hankey: Oops * :lipstick: Added cursor * :memo: Added collapse example * [Feature] Commands (#616) * :sparkles: Added Commands component * :memo: Added docs for Command component * :memo: Fixed mistakes * :art: Changed to lodash map * Added Commands component, added collapsed and expand props to Message allowing image messages to be collapsed and expanded. * :sparkles: Added param to Commands (#619) * :sparkles: Added param to Commands * :memo: Added param example * :memo: Changed docs * :sparkles: Added filter to Commands (#620) * Feature/commands open/close (#621) * :sparkles: Added filter to Commands * :fire: Added open/close based on value prop * :memo: Changed placeholder * :sparkles: Added onClickOutside, clicking outside the menu will now close it (#623) * Added auto open/close to Commands, added value prop and filter to commands and added onClickOutside to Commands. * Commands onselect (#625) * :lipstick: Removed margin * :bug: Added missing setState * :bug: Added missing handleSelect * :memo: Added working hover and select events * :fire: Removed log * Added missing handleSelect to Commands, fixed styles. * :hammer: Refactored message doc to use selects instead of rendering more message lists (#629) * :lipstick: Fixed height for list-items without second line. (#632) * :lipstick: Fixed height for list-items without second line. Fixes #630. #630 * :green_heart: Added missing parameter to ListItem test. * :white_check_mark: Added test for `getStyle.root()` function for single-line styles. * :art: Flipped things around * :white_check_mark: Fixed test to match flip * :lipstick: Decreased ListItem height * :memo: Added primaryText example * Clickoutside (#634) * :heavy_minus_sign: Removed onlcickoutside, it caused production builds to fail * :hammer: Refactored to use a clickAway element * Bug/color contrast (#635) * :lipstick: Changed text colors * :lipstick: Changed bold texts to primaryText color * Removed onClickOutside from Commands, changed text colors to increase contrast. * :lipstick: Changed color * :lipstick: Added top and translate, fixed firefox issue (#640) * :sparkles: Added rightButton prop, overhauled stylings (#638) * :sparkles: Added rightButton prop, overhauled stylings * :fire: Removed override * :lipstick: Added top and translate, fixed firefox issue * :white_check_mark: Fixed tests * :green_heart: Fixed test * Fixed browser support issue with LisItems, added rightButton to MessageInput. * List item/icon menu (#644) * :lipstick: Overhauled styles to not break * :fire: Removed avatar from example * :green_heart: Fixed tests * Removed translate from button and avatar, fixed icon menu bug. * :bug: Fixed buttons for long text (#646) * Fixed ListItems with long texts and buttons. * :bug: Combine styles instead of returning (#650) * :lipstick: Added translate (#643) * :lipstick: Added translate Fixed issue #637 * :lipstick: Increased padding * :green_heart: Fixed test * Issue #622/commands (#649) * :hammer: Reverted changes * :lipstick: Fixed styles for long texts, changed color * Reintroduced react-onclickoutside, fix override style bug with MessageInput, fixed Select header long texts. * Profile component test (#610) * Added test examples for style component * :truck: Moved file * Expanded profile component test * WIP function test with sinon * :white_check_mark: Moved tests * :fire: Removed tests * Added getStyle tests * Combined tests * Test button as prop instead of passing as child * Fixed small mistake in button test * Combined tests * Changed naming of profile to wrapper commit e3c16baa0da131de4af19e128d76c76fb4092a3f Author: Ralphvandodewaard Date: Thu Jun 8 08:56:45 2017 +0200 Profile component test (#610) * Added test examples for style component * :truck: Moved file * Expanded profile component test * WIP function test with sinon * :white_check_mark: Moved tests * :fire: Removed tests * Added getStyle tests * Combined tests * Test button as prop instead of passing as child * Fixed small mistake in button test * Combined tests * Changed naming of profile to wrapper commit f5dc5eb6f9f2e7ea95d4e9b99f6cbaededf6dc69 Author: sjaakluthart Date: Thu Jun 8 08:49:22 2017 +0200 Reintroduced react-onclickoutside, fix override style bug with MessageInput, fixed Select header long texts. commit 093e3bf8113a45a88f580316c4bcee84f1c4d36b Author: Sjaak Luthart Date: Thu Jun 8 08:47:19 2017 +0200 Issue #622/commands (#649) * :hammer: Reverted changes * :lipstick: Fixed styles for long texts, changed color commit b63ce080a55b4aa7c43097912b8618a5fcbcad4e Author: Sjaak Luthart Date: Thu Jun 8 08:39:23 2017 +0200 :lipstick: Added translate (#643) * :lipstick: Added translate Fixed issue #637 * :lipstick: Increased padding * :green_heart: Fixed test commit f6a651690185a5cd2f2ceaf430c2c89c847dc653 Author: Sjaak Luthart Date: Thu Jun 8 08:39:09 2017 +0200 :bug: Combine styles instead of returning (#650) commit 38021fa626a65d23e7952139df93219baa39ebad Merge: 4977bef 22a499d Author: sjaakluthart Date: Wed Jun 7 17:12:24 2017 +0200 :twisted_rightwards_arrows: Merged origin/master commit 22a499daacd136fb95741ec56ed8c901006ccddf Author: Sjaak Luthart Date: Wed Jun 7 12:40:44 2017 +0200 [3.5.6] Fixed ListItems with long texts and buttons. (#647) * Added more tables. (#452) * added text overflow to list-item (#455) * added text overflow to list-item * deleted comma at line 65 * :bug: Added working fix * Saved styles to object for all pages (#457) * Added more examples to docs (#450) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * Issue #456 (#458) * :bug: Added text overlfow to Profile * :bug: Added text overflow to channel header * :bug: Added text overflow to pop over * :bug: Added textOverflow to AppHeader * :bug: Added text overflow to menu item * Add input example (#459) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * :bug: Added disabled styles * :lipstick: Changed color * :fire: Removed inputs * Added error and disabled styles to Slider, fixed text overflow issues. * Issue-#462 (#464) * listItem set secondaryText lineHeight to 16px * Increased listItem height and fixed lineHeight * Fixed lineheight in list and updated examples * modified the max-height of the messageImage (#466) * modified the max-height of the messageImage * deleted commets and narrowed the max height down to 200px * Added more verticl spacing between Title, Description, Usage, Examples and Props (#468) * Fixed styling for Input page (#471) * Fixed styling for Input page * :lipstick: Changed Input's background color * Issue-#451: Fixed last few "style={{ }}"s (#469) * Fixed last few "style={{ }}"s * :bug: Reverted changes * :art: Renamed object * Issue #446: Added examples to components (#470) * Added AdminBadge example * Added Badge example * Added Button example * :art: Changed to single lines * Changed image Message max height, fixed Input background colour, fixed Input label colour. * Issue #477 (#478) * :sparkles: Added IconNotification * :memo: Added docs output * Issue #447 (#472) * Fixed styling for Input page * :sparkles: Added `lightbox/index.jsx`. * :lipstick: Added styles for `lightbox`. * :sparkles: Added lightbox to `message.jsx`. #447 * :memo: Docgen. * :hankey: Reverted unwanted commit. * :sparkles: Added `enableLightbox` prop. * :memo: Docgen. * :memo: Added `Docs` page. * :pencil2: New image link. * :bug: Added more checks for `enableLightbox`. * :bug: Added more checks. * :sparkles: Added onMenuClose to IconMenu (#479) * :sparkles: Added onMenuClose to IconMenu * :memo: Added docs * Added Lightbox component, added lightbox to Message, added IconNotification, added onMenuClose to IconMenu. * :sparkles: Added status indicator to Avatar (#484) Fixed issue #483 * :zap: Added recompose pure to WithTheme (#485) Fixed issue #481 * Added pure to WithTheme, added status to Avatar. * Profile status (#489) * :sparkles: Added status to Profile * :memo: Added docs output * Added status prop to Profile. * :bug: Added zIndex to icon and badge (#491) * Added zIndex to ListItem badge and icon style. * Fixed profile name being pushed under section (#475) * Fixed profile name being pushed under section * Same fix using styles instead of section element * New fix attempt for profile name being pushed under section * Reversed changes and added minHeight * Stickers (#497) * :sparkles: Added sticker type, added MessageHeader * :heavy_minus_sign: Removed press menu to prepare for more component splits * :art: Added MessageTime * :art: Changed import * :construction: WIP splitting messages * :art: Added ImageMessage * :art: Added StickerMessage * :hammer: Moved components to separate folders to allow for separate styles * :art: Moved styles to MessageTime folder * :art: Moved styles to MessageHeader * :construction: WIP styling StickerMessage * :lipstick: Finished sticker message style * :art: Moved styles to TextMessage * :lipstick: Added `flexShrink` to prevent shrinking. * :art: Moved style to ImageMessage * :memo: Added docs * Added stickers to Message, fixed bugs with Profile. * Fixed listItem primaryText, secondaryText and adminBadge being off center (#467) * Fixed primaryText, secondaryText and adminBadge being off center * Reversed lineHeight changes and used another method to center items * Fixed primaryText lineHeight and used padding instead to position text * Re-added textOverflow and used minHeight * Reversed overflow:hidden in root * Develop (#498) * Added more tables. (#452) * added text overflow to list-item (#455) * added text overflow to list-item * deleted comma at line 65 * :bug: Added working fix * Saved styles to object for all pages (#457) * Added more examples to docs (#450) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * Issue #456 (#458) * :bug: Added text overlfow to Profile * :bug: Added text overflow to channel header * :bug: Added text overflow to pop over * :bug: Added textOverflow to AppHeader * :bug: Added text overflow to menu item * Add input example (#459) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * :bug: Added disabled styles * :lipstick: Changed color * :fire: Removed inputs * Added error and disabled styles to Slider, fixed text overflow issues. * Issue-#462 (#464) * listItem set secondaryText lineHeight to 16px * Increased listItem height and fixed lineHeight * Fixed lineheight in list and updated examples * modified the max-height of the messageImage (#466) * modified the max-height of the messageImage * deleted commets and narrowed the max height down to 200px * Added more verticl spacing between Title, Description, Usage, Examples and Props (#468) * Fixed styling for Input page (#471) * Fixed styling for Input page * :lipstick: Changed Input's background color * Issue-#451: Fixed last few "style={{ }}"s (#469) * Fixed last few "style={{ }}"s * :bug: Reverted changes * :art: Renamed object * Issue #446: Added examples to components (#470) * Added AdminBadge example * Added Badge example * Added Button example * :art: Changed to single lines * Changed image Message max height, fixed Input background colour, fixed Input label colour. * Issue #477 (#478) * :sparkles: Added IconNotification * :memo: Added docs output * Issue #447 (#472) * Fixed styling for Input page * :sparkles: Added `lightbox/index.jsx`. * :lipstick: Added styles for `lightbox`. * :sparkles: Added lightbox to `message.jsx`. #447 * :memo: Docgen. * :hankey: Reverted unwanted commit. * :sparkles: Added `enableLightbox` prop. * :memo: Docgen. * :memo: Added `Docs` page. * :pencil2: New image link. * :bug: Added more checks for `enableLightbox`. * :bug: Added more checks. * :sparkles: Added onMenuClose to IconMenu (#479) * :sparkles: Added onMenuClose to IconMenu * :memo: Added docs * Added Lightbox component, added lightbox to Message, added IconNotification, added onMenuClose to IconMenu. * :sparkles: Added status indicator to Avatar (#484) Fixed issue #483 * :zap: Added recompose pure to WithTheme (#485) Fixed issue #481 * Added pure to WithTheme, added status to Avatar. * Profile status (#489) * :sparkles: Added status to Profile * :memo: Added docs output * Added status prop to Profile. * :bug: Added zIndex to icon and badge (#491) * Added zIndex to ListItem badge and icon style. * Fixed profile name being pushed under section (#475) * Fixed profile name being pushed under section * Same fix using styles instead of section element * New fix attempt for profile name being pushed under section * Reversed changes and added minHeight * Stickers (#497) * :sparkles: Added sticker type, added MessageHeader * :heavy_minus_sign: Removed press menu to prepare for more component splits * :art: Added MessageTime * :art: Changed import * :construction: WIP splitting messages * :art: Added ImageMessage * :art: Added StickerMessage * :hammer: Moved components to separate folders to allow for separate styles * :art: Moved styles to MessageTime folder * :art: Moved styles to MessageHeader * :construction: WIP styling StickerMessage * :lipstick: Finished sticker message style * :art: Moved styles to TextMessage * :lipstick: Added `flexShrink` to prevent shrinking. * :art: Moved style to ImageMessage * :memo: Added docs * Added stickers to Message, fixed bugs with Profile. * :bug: Added secondaryBadge prop for badges in the text field. * :bug: Adjusted AdminBadge styles to fix height issue. * :memo: Added with secondaryBadge to docs pages. * :memo: DocGen. * :bug: Added 2px lineHeight for overhanging 'g'. * :bug: Added 2px lineHeight to compensate for overhanging g. * :art: Renamed prop * Issue #493 (#501) * :sparkles: Added `IconMenu`. * :bug: Changed prop onClick to closeMenu. * :memo: Added section to docs for messages with icon menu. * :memo: DocGen. * :fire: Removed redundant method * :art: Renamed method * Compact messages image (#500) * :bug: Fixed compact stickers * :lipstick: Changed style for compact image messages * Added IconMenu to message, fixed compact Message styles, added textBadge to ListItem. * fixed #508 (#509) * Tables (#510) * :sparkles: Added Table components * :sparkles: Changed to Table components * :memo: Added docs page * :hankey: Added missing exports * :art: Changed to es6 functions * Added Table components, added value prop to CheckBox. * :bug: Added check for textBadge (#513) * Removed unknown handleSearch prop and fixed errors, for #517 (#519) * Issue #507 (#516) * :construction: WIP changing context * :construction: Added unsub * :twisted_rightwards_arrows: merged stash * :art: Added themeable component * :art: Added newline * :construction: Added themeable HoC * :art: Changed to es6 methods * :hammer: Changed back to stateless, added color propType, added compose * :memo: WIP theme doc page * :truck: Renamed file * :twisted_rightwards_arrows: Merged stash * :fire: Removed pure to allow hovers to work again * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :fire: Removed theme wrapper * :memo: Added proper example for theme * :memo: Added h2 * :memo: Added default theme button * :truck: Made themeable part of the API * :art: Changed to lodash functions * :memo: Added themeable doc * :memo: Fixed usage * :memo: Changed getting started * :memo: Added docs output * :memo: Removed components I do not need docs for * added curry function for themeable options * :rotating_light: Removed React warning * :art: Changed naming * :memo: Finished themeable hoc doc * :memo: Added deprecation warnings * added option to use anchor-ui without withTheme component * :hammer: Applied theme changes to EmojiMenu * :hammer: Applied theme change to Modal * :art: Removed redundant * :green_heart: Fixed lint error * :hankey: Reverted change * Changed how theme color is managed, added ThemeProvider, added themeable HoC. * :hankey: Added missing export * Added export for ThemeProvider. * Issue #504 (#529) * :bug: Added `contentStyle` prop to iconMenu. * :memo: DocGen. #504 * :bug: Added default for prop. Fixed #504. * :memo: DocGen. #504 * Issue #203 avatar (#525) * Added test for avatar style function, #203 * Added test for each type * Issue #203 admin-badge (#524) * Added test for admin-badge style function * Fixed wrong property on inverted test * :lipstick: Added missing themeable to ChannelAvatar (#527) * Issue #518 (#532) * Made hideAlert prop optional, for #518 * Removed hideAlert from home and with-theme * :lipstick: Added theme color transition (#528) * :lipstick: Added theme color transition * :green_heart: Fixed tests * :hankey: Added default `right: inital` to select's popOver styles. (#531) * :hankey: Added default `right: inital` to select's popOver styles. We should find a better fix for this. Fixes #530. #530 * :bug: Moved popOver styles to const. * deleted line-height to fix the display of the adminbadge on firefox, … (#521) * deleted line-height to fix the display of the adminbadge on firefox, fixed #512 * modified lineheight secondarytext * changed line-height of the textbadge to 22px * reverted changes * :sparkles: Added IconColor (#537) * :sparkles: Added icon refresh (#539) * Various styling fixes, added icons, added themeable to ChannelAvatar, added contentStyle to IconMenu, added transition to all components that use theme colour. * Refactored style function for banner, #203 (#536) * Added test for card-content style function, #203 (#542) * Added test for card-header style function, #203 (#544) * Added test for channel-header style function, #203 (#545) * Added test for card style function, #203 (#540) * Window resize (#543) * :heavy_plus_sign: Added `react-event-listener`. * :sparkles: Added `closeMenu` on window resize. * :memo: DocGen. * :green_heart: Added new line. * Fixed empty objects (#551) * Issue #203 button (#538) * Added test for button style function, #203 * Combine-styles fix * Fixed empty objects * :hankey: Fixed github button * Issue #203 badge (#535) * Added test for badge style function, #203 * Small fix * Fixed empty objects and changed to es6 default argument * :… * Fixed Message theming and override capabilities. * Changed to 0 in favor of null. (#854) * Changed selectedIndex default value to 0 to prevent TypeError if handleSelect was fired before selectedIndex was changed. * Removed safari windows latest from support list. (#858) * Issue #859 (#860) * Added fallaback for avatar. * DocGen. Fixes #859. * Fixed tests. * DocGen * Added what it does to docs line. * Adjusted to path intead. * Added defaultImage to avatar. * Fixed clickable error bug. Fixes #862. (#863) * Added icons (#865) * Fixed clickable error bug. Fixes #862. * Added new icons. * Added arrow icons & fixed MessageInput clickable area. * Reverted changes. * Added arrow icons & fixed MessageInput clickable area. * Decreased Tab and ChannelHeader height. (#870) * Issue #868 (#869) * Prepared messages body.type giphy. * Prepared messages index for giphy. * Added missing ;. * Created type giphy message. Fixes #868. * Added giphy message to docs. * Added sentByText to messages index file. * DocGen. * Added test. * Fixed linting error. * Changed prop name. * Used correct calculations. Fixes #871. (#873) * Used correct calculations. Fixes #871. * Fixed test. * Made a bit DRY'er. * Added giphy message, adjusted get-pop-over-position calculation & decreased Tab height. * Added onHeaderClick to IconMenu and PopOver. (#875) * Added onHeaderClick to IconMenu and PopOver. * Added docgen. * [4.3.12] Added onHeaderClick to IconMenu and PopOver. * Fixed passthrough. (#877) * Removed opacity on giphy description. (#878) * Fixed giphyDescription prop passthrough & giphyDescription styling. * Added object-fit cover to overcome image & giphy stretching. (#880) * Added npm version badge. * Added object-fit to images & giphies, fixes stretching. * Added inputRef to SearchBox. (#884) * Issue #882 (#883) * Created Gallery component. * Added gallery to index exports. * DocGen. * Fixed missing styles. * Added doc page. Fixes #882. * Fixed requests. * DocGen. * Changed naming. * Adjusted some more naming. * DocGen. * Adjusted all image naming to item. * Added test for gallery. * Fixed docs. * Added gallery component, fixed image and gif stretching & added inputRef. * Added custom props to Gallery. (#886) * Added ...custom prop to gallery. * Issue #889 (#892) * Added buttonStyle prop. Fixes #889. * Updated docs. * Adjusted docs description. * [WIP] Component tests (#867) * Slightly adjusted admin-badge test. * WIP Possible new way of folder stucture to improve testing. * Fixed imports for TravisCI. * Revert change to DRY. * Added text prop node passthrough as well. * Adjusted it descriptions. * Adjusted it descriptions. * Issue #895 (#896) * Made title not required. * Removed redundant check. * Added enableLightbox to Gallery, fixes #895. * Added ligthbox to docs. * Changed open. * Added height. * Changed alts, added title. * Use item.alt or item.src als alt. * Fixed test. * Issue #769 (#897) * Added after element, fixes #769. * Fixed style consistency. * Issue #864 (#894) * Removed pure HOC from exports. * Removed shallowEqual. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed tests. * Fixed test. * Fixed test. * Issue #899 (#900) * Added DateSeparator to exports. Fixes #899. * DocGen. * Added margin 0 to text styling. * Messages patch (#901) * Added sticker message patch. * Added emoji message patch. * Added lightbox option to gallery, removed pure exports, added override styles to iconButton in messages & patched some message bugs. * Date separator (#903) * Changed DateSeparator style. * Removed defaultProp. * Decreased margin. * Issue #552 admin badge (#904) * Made sure admin-badge test actually gets tested propperly. * Fixed component test. * Issue #552 alert (#905) * New structure for correct testing. * Refactored getStyle functions to es6 notation. * Fixed alert getStyle test. * Fixed alerts component test. * Issue #552 app header (#906) * New structure for correct testing. * Fixed AppHeader getStyle test. * Fixed AppHeader component test. * Issue #552 avatar (#907) * Fixed Avatar getStyle test. * New structure for correct testing. * Fixed Avatar component test. * Issue #910 (#911) * Used compact styles from styles file instead. * Fixed typo. * Removed position absolute and flex styling for compact image/ giphy messages. Fixes #910. * Issue #552 banner (#909) * Fixed Banner getStyle test. * New structure for correct testing. * Fixed Banner component test. * Issue #552 badge (#908) * Fixed Badge getStyle test. * New structure for correct testing. * Fixed Badge component test. * Adjusted date sepparator styles, fixed tests & fixed image/giphy message bug. * Adjusted date separator styles, fixed tests and fixed image/giphy message bug. * Made sure myMessage style for stickers is correct. (#913) * Fixed my sticker message style bug. * Media (#915) * Added Media component. * Added docs for Media. * Changed prop to object of queries. * Updated docs. * Issue #898 (#917) * Replaced \n with
. Fixes #898. * Added multiline to docs. * Added select for enableMultiline. * Added Media component & added multiline capabilities to Message component. * Issue #916 (#919) * Added active color to MenuItem icon. Fixes #916. * Added active with icon to docs. * DocGen. * Added top: ...px to header buttons. Fixes #891. (#921) * Issue #922 (#923) * Added footer to Menu component. Fixes #922. * DocGen. * Fixed tests. * Issue #926 (#928) * Fixed label styles, moved style prop to correct element. * Added override style for buttons container. * Added tests. * Made label prop optional. * Added icon prop, fixes #926. * Fixed test. * Fixed label padding. * Added docgen. * Added examples. * Changed rm to rimraf, fixes #925. (#927) * Added optional icon to RadioButton, made label optional. * Updated react-onclickoutside. (#931) * Fixed bug in unmounting of media listeners. (#935) * Update dev dependencies (#933) * Updated react-docgen. * Docgen. * Updated prettier. * Updated nyc. * Updated babel-cli. * Updated babel-eslint. * Sjaak/docs code examples (#936) * Installed marked and prismjs. * Added markdown component. * Added styles. * Added detailed code example. * Added Markdown component to AdminBadge. * Refactored to new Markdown component. * Changed colors. * Added languages. * Refactored to new Markdown. * Refactored to Markdown component. * Added title to Markdown. * Removed fonts. * Added title. * Uninstalled react-markdown. * Indented file. * Removed prefixes. * Sjaakluthart/docs styles (#938) * Removed unused className. * Removed redundant styles. * Added meyer reset. * Started with refactor. * Moved files. * Changed classname. * Renamed classNames. * Changed selector. * Added margin. * Fixed paper styles. * Changed heading styles. * Changed selector. * Changed markup. * Added margin. * Changed markup. * Changed to anchor-ui Table. * Increased margin. * Removed overflow. * Reverted changes. * Added responsive menu, fixes #180. * Sjaakluthart/code examples (#939) * Added example. * Added example. * Added example. * Added example. * Added example. * Added example. * Added example. * Added example. * Simplified handler. * Changed markup. * Changed syntax. * Added example. * Removed log. * Added example. * Issue #937 (#940) * Added header check to contentContainer. * Added test for `getStyles.contentContainer()`. Fixes #937. * Added code example for menu. * Fixed example. * Issue #552 button (#942) * Fixed button getStyle test. * New structure for correct testing. * Fixed index test. * Issue #941 (#943) * Replaced react-measure for own Media component. Fixes #941. * Removed react-measure from dependencies. * DocGen. * Sjaakluthart/code examples (#944) * Added code example. * Added code example. * Added code example. * Added code example. * Moved menu markdown to the correct spot. * Updated react-onclickoutside, updated dev dependecies, fixed unmounting in media component, added new code examples and fixed menu scroll bug. * DocGen. * Added a check for numbers followed by "." to overcome Catastrophic Backtracking regexp. (#946) * Issue #552 card (#952) * New structure for correct testing. * Fixed index test. * Added backgroundColor and color. (#953) * Issue #552 card content (#958) * New structure for correct testing. * Fixed index test. * Adjusted naming. * Imported component instead of radium export. * Issue #552 checkbox (#962) * Fixed getStyles test. * New structure for correct testing. * Issue #552 card header (#960) * New structure for correct testing. * Fixed index test. * Issue #552 channel header (#959) * New structure for correct testing. * Fixed getStyle test. * Added missing new line. * Fixed index test. * Fixed naming * Added node test. * Bumped messageInput multiline check to `> 49`. Fixes firefox/Edge15 iconButton push down. (#954) * Issue #552 checkbox (#965) * Fixed getStyles test. * New structure for correct testing. * Fixed index test. * Issue #552 commands (#966) * Added getStyle test for Commands. * New structure for correct testing. * WIP Index Test for commands. * Added index test for commands. * Issue #552 date separator (#972) * Added getStyles test for DateSeparator. * New structure for correct testing. * Added index test for DateSeparator. * Fixed typo. * Issue #552 dialog (#974) * Fixed getStyles test for Dialog. * New structure for correct testing. * Fixed index test for Dialog. * Sjaakluthart/image (#973) * Added image preloader * Image is global * Added basic docs page, needs more styling * Remove logging * In componentWillReceiveProps do not check for existing, only compare with previous * Consistent naming, errorComponent and preloadComponent * Added code example * Wrap example text in p * Fixed example. * Improved docs. * Remamed component. * Renamed files. * Renamed docs. * More renaming. * Renamed prop. * Removed Status constant. * Added component description. * Fixed prop description. * Docgen. * Fixed route. * Fixed docs page styling. * Sorted imports. * Fixed badge uncovered lines. (#975) * Fixed badge uncovered lines. * Fixed broken test. * Issue #552 divider (#976) * Refactored to es6 functions. * New structure for correct testing. * Fixed index test for Divider. * DocGen. * Issue #552 emoji filter (#978) * Added getStyles test for EmojiFilter. * Fixed getStyles test for EmojiFilter. * New structure for correct testing. * Added index test for EmojiFilter. * DocGen. * Issue #981 (#982) * Removed marginLeft from all message root styles. * Removed marginRight from all message root styles. Fixes #981. * Issue #977 (#980) * Added after succes to travis for CodeCoverage. * Reverted codecov package change. * Added coveralls package and npm script for travis. Should fix #977. * Small adjustments. * Should fix it. * Added coverage badge to readme. * Small naming changes. * Adjusted mocha opts. * Use codecov instead * Added codecov.yml. * Changed badge to codecov badge. * Sjaakluthart/image loader message (#979) * Added ImageLoader to image and giphy messages. * Added imagePlaceholder, imageError and onImageLoad. * Added onImageError. * Updated some test files, added ImageLoader and fixed Message no-Avatar bug. * Fixed typo, fixes #986. * Changed homepage. * Changed script. * Changed to buildbranch. * Sjaakluthart/eslint (#989) * Updated eslint config. * Fixed linter error. * Fixed linter error. * Disabled rule. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed code styling. * Fixed code styling. * Fixed code styling. * Disabled rule. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting error. * added () to fix unexpected newlines before/after )/( * removed unused default props * rewritten component to be a pure functionm * added rule to disable nesting htmlFor * fixed slider * fixed indenting * removed comment disable-line * removed max-len rule * removed comment, moved to oneline * removed multiple (( )) on calledWith * fixed tests * added comment * altered comment * fixed errors caused by cleaning up the linting errors (#991) * V5.0.0 (#993) * Issue #848 (#888) * Removed redundant typing message. * Removed redundant import. * Moved iconMenu into message body. * WIP added style to iconMenu for clean messages. * Moved sticker header on top of sticker body. * Added styles for sticker IconMenu. * Moved time on top of images and giphies. * Added styles for compact with new IconMenu placement. * Fixed collapsed styles. Fixes #848. * Fixed tests. * Added test for sticker messages. * Added styles for iconMenu in MessageHeader. * Bumped maxWidth of container to 80%. * Added readability maxWidth to TextMessage. * Issue #806 (#893) * Added menuIcon to Message. * Removed unused styles. * Replaced custom menus with iconMenu prop. * Added styles for iconMenu. * Applied API changes. * Fixed collapsedText. * Adjusted styles to look more like design. * Fixed sticker message styling. * Fixed tests. * Fixed sticker stretching. * Added font scaling for messageTime. * Removed redundant width styling from messageTime. * Fixed tests. * Issue #930 (#934) * Bumped react react-dom and html-react-parser version. * Bumped react and react-dom version. * Fixed all the tests. Fixes #930. * Created default style file to make message styles more dry. Fixes #494. (#949) * Replace dangerouslySetInnerHTML with html-react-parser. Fixes #761. (#951) * Replace dangerouslySetInnerHTML with html-react-parser. Fixes #761. * Removed createMarkup function. * Implemented 8dp grid to AppHeader. (#956) * Issue #751 alert (#955) * Implemented 8dp grid to Alert. * Cleaned-up Alert getStyle. * Reversed test. * Refactored message-list, made ref work again (#961) * Refactored message-list * renamed * Eslint fixes * Replaced emojione.imagePathPNG for emojione.emojiSize. Fixes #725. (#964) * Issue #783 (#948) * Bumped react react-dom and html-react-parser version. * Bumped react and react-dom version. * Fixed all the tests. Fixes #930. * Added react-portal to portal pop-over element to bottom of root. * Added own portal component. * Deconstructed props. * Added doc page about portal component. Fixes #783. * Added example for portal component. * Added description for docs page. * Added description for docs page. * Added alert about react v16. * Made passthrough for portal node prop instead. * Fixed Selects positioning. * Fixed pop-over-position test. * DocGen. * Adjusted in favor of comments. * Fixed broken check. * Changed example. * Changed text. * Cleanup. * Docgen. * Issue #872 (#950) * Added variable middle alignment for when it gets cut of. * Fixed horizontal middle so it actually alligns in the middle. * Added variable middle alignment for when it gets cut off horizontal. * Added 16 margin around the variable placements. * Fixed broken tests. * Added test for offset positioning. Fixes #872. * Removed logging. * Adjusted naming. * Implemented 8dp grid to Banner. (#968) * Implemented 8dp grid to Button. (#969) * Implemented 8dp grid to Card. (#970) * Issue #751 admin badge (#990) * Implemented 8dp grid to AdminBadge. * Fixed linting error. * Fixed broken test. * Implemented 8dp grid to AdminBadge. (#992) * Updated to React v16, added portal for PopOver, updated to emojione v3, refactored and restyled Message, replaced dangerouslySetInnerHTML with html-react-parser and adjusted some styling to 8dp grid. * Removed duplicate statements. * Added migration guide for v4.x to v5. * Sjaakluthart/issue #995 (#996) * Fixed avatar toggle. * Removed marginLeft, fixes #995. * Fixed avatar margin not being removed. * Added boxSizing: border-box to make sure it stay the correct size. (#999) * Added boxSizing: border-box to make sure it stay the correct size. * Fixed test. * Fixed styling issue with long texts in ListItem. * Lightbox portal (#1001) * Added Portal to Lightbox. * Added Portal to Dialog. * Added Portal to Modal. * Added Portal to Lightbox, Dialog and Modal. * Added className to Lightbox. (#1003) * Added className to Lightbox. * Added click away layer to Dialog. * Added click away layer to Dialog. * Changed Overlay opacity. * Changed Overlay background to be more opaque. * Issue #552 emoji menu (#1008) * Fixed uncoverd lines for emoji-menu/get-style test. * New structure for correct testing. * Added index test for emoji-menu. * Issue #1009 (#1010) * Fixed uncoverd lines for emoji-menu/get-style test. * New structure for correct testing. * Added index test for emoji-menu. * Made new internal function for store-emoji. * Removed old storage function. * Used new internal function in EmojiMenu. Fixes #1009. * Added store to dependencies. * Made sure chosen emoji gets moved to the first place when its already stored. * Updated sinon package. * Fixed broken stubs after package update. * Added test for store-emoji. * Cleaned the campgrounds. * Issue #552 empty state (#1012) * Adjusted get-styles test for empty-state. * New structure for correct testing. * Removed trailing white-space. * Fixed index test for empty-state. * Moved combineStyle calls to get-style file. * Added missing getStyle functions. * Issue #552 gallery (#1013) * Fixed get-style test for gallery. * New structure for correct testing. * Fixed index test for gallery. * Added onClick test. * Issue #552 icon menu (#1014) * Adjusted getStyle to correct code styling. * New structure for correct testing. * Added index test for icon-menu. * Issue #552 input (#1015) * Fixed getStyles test for input. * New structure for correct testing. * Fixed index test for input. * Issue #552 internal (#1016) * Adjusted internal/prop-types test. * Adjusted internal/get-pop-over-position test. * Adjusted internal/get-pager test. * Updated comment. * Added test for mobile-detect. * Issue #552 lightbox (#1017) * Adjusted internal/prop-types test. * Fixed code styling. * New structure for correct testing. * Adjusted index test. * Issue #552 list (#1018) * Adjusted internal/prop-types test. * Adjusted getStyle function to correct code styling. * New structure for correct testing. * Fixed index test for list. * Issue #552 list item (#1019) * Adjusted internal/prop-types test. * Removed redundant props. * Fixed getStyle test. * Fixed tests. * New structure for correct testing. * Added index test for list-item. * Changed propType validation. (#1021) * Checkbox custom styles (#1022) * Added custom style possibilities to unchecked element. * DocGen. * Added to tests. * fixed typo. * Sjaak/input label (#1023) * Only render label if it is passed. * Only render label if it is passed. * Changed to single line. * Fixed broken test. * Changed code styling of radio-group file. * Changed code styling of radio-button file. * Changed code styling of slider file. * Made sure html doesnt get rendered if label is not passed in switch. Fixes #1020. * Changed code styling of tab file. * Added CheckboxGroup component. Fixes #1025. (#1026) * Added CheckboxGroup component. Fixes #1025. * Adjusted docs comments. * DocGen. * Adjusted docs page. * Adjusted example for checkbox docs component. * Fixed example. * Moved custom prop to last prop. * Created getStyles test for CheckboxGroup. * Added index test. * Adjusted checkbox docs page. * Replaced babel-preset-es2015 with babel-preset-env. Fixes #988. (#1027) * Refactored and added tests, added checkbox group component, refactored store-emoji file and added custom styling possibilities to checkbox. --- docs/components.json | 539 ++++++++++++------- docs/src/components/checkbox/example.js | 27 +- docs/src/components/checkbox/index.jsx | 24 +- package.json | 10 +- src/checkbox-group/component.jsx | 76 +++ src/checkbox-group/get-styles.js | 12 + src/checkbox-group/index.js | 4 + src/checkbox-group/styles.js | 21 + src/checkbox/component.jsx | 70 +-- src/checkbox/get-styles.js | 5 +- src/emoji-menu/{index.jsx => component.jsx} | 23 +- src/emoji-menu/index.js | 13 + src/emoji-menu/storage.js | 63 --- src/empty-state/{index.jsx => component.jsx} | 40 +- src/empty-state/get-styles.js | 8 +- src/empty-state/index.js | 4 + src/gallery/{index.jsx => component.jsx} | 3 +- src/gallery/index.js | 4 + src/icon-menu/{index.jsx => component.jsx} | 10 +- src/icon-menu/get-styles.js | 4 +- src/icon-menu/index.js | 11 + src/input/{index.jsx => component.jsx} | 6 +- src/input/index.js | 4 + src/internal/get-percentage.js | 10 +- src/internal/store-emoji.js | 14 + src/lightbox/{index.jsx => component.jsx} | 3 +- src/lightbox/get-styles.js | 6 +- src/lightbox/index.js | 4 + src/list-item/{index.jsx => component.jsx} | 12 +- src/list-item/get-styles.js | 6 +- src/list-item/index.js | 11 + src/list/{index.jsx => component.jsx} | 3 +- src/list/get-styles.js | 8 +- src/list/index.js | 4 + src/radio-button-group/index.jsx | 60 ++- src/radio-button/index.jsx | 58 +- src/select/index.jsx | 2 +- src/slider/index.jsx | 96 ++-- src/switch/index.jsx | 36 +- src/tab/index.jsx | 64 +-- test/checkbox-group/get-styles.test.js | 48 ++ test/checkbox-group/index.test.js | 84 +++ test/checkbox/get-styles.test.js | 14 + test/checkbox/index.test.js | 8 + test/emoji-menu/get-styles.test.js | 16 +- test/emoji-menu/index.test.js | 62 +++ test/empty-state/get-styles.test.js | 34 ++ test/empty-state/index.test.js | 81 ++- test/gallery/get-styles.test.js | 12 +- test/gallery/index.test.js | 119 +++- test/icon-menu/index.test.js | 138 +++++ test/input/get-styles.test.js | 74 ++- test/input/index.test.js | 137 +++-- test/internal/get-pager.test.js | 9 +- test/internal/get-pop-over-position.test.js | 14 +- test/internal/mobile-detect.js | 19 + test/internal/prop-types.test.js | 24 +- test/internal/store-emoji.test.js | 76 +++ test/lightbox/index.test.js | 90 ++-- test/list-item/get-styles.test.js | 22 +- test/list-item/index.test.js | 191 +++++++ test/list/index.test.js | 65 +-- 62 files changed, 1916 insertions(+), 799 deletions(-) create mode 100644 src/checkbox-group/component.jsx create mode 100644 src/checkbox-group/get-styles.js create mode 100644 src/checkbox-group/index.js create mode 100644 src/checkbox-group/styles.js rename src/emoji-menu/{index.jsx => component.jsx} (91%) create mode 100644 src/emoji-menu/index.js delete mode 100644 src/emoji-menu/storage.js rename src/empty-state/{index.jsx => component.jsx} (71%) create mode 100644 src/empty-state/index.js rename src/gallery/{index.jsx => component.jsx} (98%) create mode 100644 src/gallery/index.js rename src/icon-menu/{index.jsx => component.jsx} (96%) create mode 100644 src/icon-menu/index.js rename src/input/{index.jsx => component.jsx} (96%) create mode 100644 src/input/index.js create mode 100644 src/internal/store-emoji.js rename src/lightbox/{index.jsx => component.jsx} (97%) create mode 100644 src/lightbox/index.js rename src/list-item/{index.jsx => component.jsx} (94%) create mode 100644 src/list-item/index.js rename src/list/{index.jsx => component.jsx} (96%) create mode 100644 src/list/index.js create mode 100644 test/checkbox-group/get-styles.test.js create mode 100644 test/checkbox-group/index.test.js create mode 100644 test/emoji-menu/index.test.js create mode 100644 test/icon-menu/index.test.js create mode 100644 test/internal/mobile-detect.js create mode 100644 test/internal/store-emoji.test.js create mode 100644 test/list-item/index.test.js diff --git a/docs/components.json b/docs/components.json index 2dd9a770..b80befbd 100644 --- a/docs/components.json +++ b/docs/components.json @@ -900,9 +900,32 @@ "computed": false } }, + "uncheckedStyle": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "Override the styles of the unchecked element", + "defaultValue": { + "value": "{}", + "computed": false + } + }, "value": { "type": { - "name": "string" + "name": "union", + "value": [ + { + "name": "string" + }, + { + "name": "number" + }, + { + "name": "bool" + } + ] }, "required": true, "description": "The checkbox' value" @@ -916,6 +939,118 @@ } } }, + "components/checkbox-group/component.jsx": { + "description": "", + "displayName": "CheckboxGroup", + "methods": [], + "props": { + "values": { + "type": { + "name": "arrayOf", + "value": { + "name": "union", + "value": [ + { + "name": "string" + }, + { + "name": "number" + }, + { + "name": "bool" + } + ] + } + }, + "required": false, + "description": "The CheckboxGroup's values", + "defaultValue": { + "value": "[]", + "computed": false + } + }, + "onChange": { + "type": { + "name": "func" + }, + "required": true, + "description": "Callback fired when Checkbox's value changes\n\nfunction(event: object) => void" + }, + "children": { + "type": { + "name": "node" + }, + "required": true, + "description": "The CheckboxGroup's content (Checkbox), each child must have a value prop" + }, + "label": { + "type": { + "name": "node" + }, + "required": true, + "description": "The CheckboxGroup's label" + }, + "labelStyle": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "Override the styles of the label element", + "defaultValue": { + "value": "{}", + "computed": false + } + }, + "style": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "Override the styles of the root element", + "defaultValue": { + "value": "{}", + "computed": false + } + }, + "buttonStyle": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "Override the styles of the button container", + "defaultValue": { + "value": "{}", + "computed": false + } + }, + "error": { + "type": { + "name": "node" + }, + "required": false, + "description": "Display an error message", + "defaultValue": { + "value": "null", + "computed": false + } + }, + "errorStyle": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "Override the styles of the error element", + "defaultValue": { + "value": "{}", + "computed": false + } + } + } + }, "components/commands/component.jsx": { "description": "Used for displaying a list of commands", "displayName": "Commands", @@ -1637,197 +1772,7 @@ } } }, - "components/emoji-menu/emoji-categories.jsx": { - "description": "", - "methods": [], - "props": { - "changeCategory": { - "type": { - "name": "func" - }, - "required": true, - "description": "" - }, - "category": { - "type": { - "name": "string" - }, - "required": true, - "description": "" - }, - "activeColor": { - "type": { - "name": "string" - }, - "required": true, - "description": "" - }, - "recent": { - "type": { - "name": "bool" - }, - "required": true, - "description": "" - }, - "style": { - "type": { - "name": "instanceOf", - "value": "Object" - }, - "required": false, - "description": "", - "defaultValue": { - "value": "{}", - "computed": false - } - }, - "iconStyle": { - "type": { - "name": "instanceOf", - "value": "Object" - }, - "required": false, - "description": "", - "defaultValue": { - "value": "{}", - "computed": false - } - }, - "iconColor": { - "type": { - "name": "string" - }, - "required": true, - "description": "" - } - } - }, - "components/emoji-menu/emoji-category.jsx": { - "description": "", - "methods": [], - "props": { - "category": { - "type": { - "name": "string" - }, - "required": true, - "description": "" - }, - "emojis": { - "type": { - "name": "arrayOf", - "value": { - "name": "shape", - "value": { - "shortname": { - "name": "string", - "required": true - } - } - } - }, - "required": true, - "description": "" - }, - "sendEmoji": { - "type": { - "name": "func" - }, - "required": true, - "description": "" - }, - "style": { - "type": { - "name": "instanceOf", - "value": "Object" - }, - "required": false, - "description": "", - "defaultValue": { - "value": "{}", - "computed": false - } - }, - "emojiStyle": { - "type": { - "name": "instanceOf", - "value": "Object" - }, - "required": false, - "description": "", - "defaultValue": { - "value": "{}", - "computed": false - } - } - } - }, - "components/emoji-menu/emoji-modifiers.jsx": { - "description": "", - "displayName": "EmojiModifiers", - "methods": [], - "props": { - "modifiers": { - "type": { - "name": "arrayOf", - "value": { - "name": "shape", - "value": { - "shortname": { - "name": "string", - "required": true - }, - "title": { - "name": "string", - "required": true - } - } - } - }, - "required": true, - "description": "" - }, - "changeTone": { - "type": { - "name": "func" - }, - "required": true, - "description": "" - }, - "tone": { - "type": { - "name": "string" - }, - "required": true, - "description": "" - }, - "style": { - "type": { - "name": "instanceOf", - "value": "Object" - }, - "required": false, - "description": "", - "defaultValue": { - "value": "{}", - "computed": false - } - }, - "modifierStyle": { - "type": { - "name": "instanceOf", - "value": "Object" - }, - "required": false, - "description": "", - "defaultValue": { - "value": "{}", - "computed": false - } - } - } - }, - "components/emoji-menu/index.jsx": { + "components/emoji-menu/component.jsx": { "description": "Menu for sending messages with emoji", "displayName": "EmojiMenu", "methods": [ @@ -2026,7 +1971,197 @@ } } }, - "components/empty-state/index.jsx": { + "components/emoji-menu/emoji-categories.jsx": { + "description": "", + "methods": [], + "props": { + "changeCategory": { + "type": { + "name": "func" + }, + "required": true, + "description": "" + }, + "category": { + "type": { + "name": "string" + }, + "required": true, + "description": "" + }, + "activeColor": { + "type": { + "name": "string" + }, + "required": true, + "description": "" + }, + "recent": { + "type": { + "name": "bool" + }, + "required": true, + "description": "" + }, + "style": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "", + "defaultValue": { + "value": "{}", + "computed": false + } + }, + "iconStyle": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "", + "defaultValue": { + "value": "{}", + "computed": false + } + }, + "iconColor": { + "type": { + "name": "string" + }, + "required": true, + "description": "" + } + } + }, + "components/emoji-menu/emoji-category.jsx": { + "description": "", + "methods": [], + "props": { + "category": { + "type": { + "name": "string" + }, + "required": true, + "description": "" + }, + "emojis": { + "type": { + "name": "arrayOf", + "value": { + "name": "shape", + "value": { + "shortname": { + "name": "string", + "required": true + } + } + } + }, + "required": true, + "description": "" + }, + "sendEmoji": { + "type": { + "name": "func" + }, + "required": true, + "description": "" + }, + "style": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "", + "defaultValue": { + "value": "{}", + "computed": false + } + }, + "emojiStyle": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "", + "defaultValue": { + "value": "{}", + "computed": false + } + } + } + }, + "components/emoji-menu/emoji-modifiers.jsx": { + "description": "", + "displayName": "EmojiModifiers", + "methods": [], + "props": { + "modifiers": { + "type": { + "name": "arrayOf", + "value": { + "name": "shape", + "value": { + "shortname": { + "name": "string", + "required": true + }, + "title": { + "name": "string", + "required": true + } + } + } + }, + "required": true, + "description": "" + }, + "changeTone": { + "type": { + "name": "func" + }, + "required": true, + "description": "" + }, + "tone": { + "type": { + "name": "string" + }, + "required": true, + "description": "" + }, + "style": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "", + "defaultValue": { + "value": "{}", + "computed": false + } + }, + "modifierStyle": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "", + "defaultValue": { + "value": "{}", + "computed": false + } + } + } + }, + "components/empty-state/component.jsx": { "description": "Pretty placeholder for empty content", "displayName": "EmptyState", "methods": [], @@ -2105,7 +2240,7 @@ } } }, - "components/gallery/index.jsx": { + "components/gallery/component.jsx": { "description": "Justified grid layout for showcasing images.", "displayName": "Gallery", "methods": [ @@ -2225,7 +2360,7 @@ } } }, - "components/icon-menu/index.jsx": { + "components/icon-menu/component.jsx": { "description": "Open a menu from an Icon, give options related to the icon", "displayName": "IconMenu", "methods": [ @@ -3870,7 +4005,7 @@ } } }, - "components/input/index.jsx": { + "components/input/component.jsx": { "description": "General purpose form input", "displayName": "Input", "methods": [ @@ -4078,7 +4213,7 @@ } } }, - "components/lightbox/index.jsx": { + "components/lightbox/component.jsx": { "description": "Lightbox for images", "displayName": "Lightbox", "methods": [ @@ -4169,7 +4304,7 @@ } } }, - "components/list/index.jsx": { + "components/list/component.jsx": { "description": "A wrapper for ListItems", "displayName": "List", "methods": [], @@ -4251,7 +4386,7 @@ } } }, - "components/list-item/index.jsx": { + "components/list-item/component.jsx": { "description": "A list's item", "displayName": "ListItem", "methods": [ @@ -6842,7 +6977,7 @@ "value": { "type": { "name": "custom", - "raw": "propTypes.valueInRange" + "raw": "customPropTypes.valueInRange" }, "required": false, "description": "The slider's value. Must between min and max", @@ -6868,7 +7003,7 @@ "max": { "type": { "name": "custom", - "raw": "propTypes.minMax" + "raw": "customPropTypes.minMax" }, "required": false, "description": "The slider's max value. Cannot be equal to min.", @@ -6880,7 +7015,7 @@ "min": { "type": { "name": "custom", - "raw": "propTypes.minMax" + "raw": "customPropTypes.minMax" }, "required": false, "description": "The slider's min value. Cannot be equal to max.", diff --git a/docs/src/components/checkbox/example.js b/docs/src/components/checkbox/example.js index 3786dd82..f736c8f0 100644 --- a/docs/src/components/checkbox/example.js +++ b/docs/src/components/checkbox/example.js @@ -2,6 +2,7 @@ export default ` \`\`\`jsx import React, { Component } from 'react'; import Checkbox from 'anchor-ui/checkbox'; + import CheckboxGroup from 'anchor-ui/checkbox-group'; import Divider from 'anchor-ui/divider'; import _ from 'lodash'; @@ -30,20 +31,18 @@ export default ` return (
- - + + + +
    { diff --git a/docs/src/components/checkbox/index.jsx b/docs/src/components/checkbox/index.jsx index 3539f8ba..15bf4147 100644 --- a/docs/src/components/checkbox/index.jsx +++ b/docs/src/components/checkbox/index.jsx @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import _ from 'lodash'; import Checkbox from '../../../../dist/checkbox'; +import CheckboxGroup from '../../../../dist/checkbox-group'; import Divider from '../../../../dist/divider'; import Props from '../props'; import components from '../../../components.json'; @@ -31,13 +32,9 @@ class CheckboxDoc extends Component { render() { const { values } = this.state; - const componentData = _.find(components, component => component.displayName === 'Checkbox'); + const checkboxData = _.find(components, component => component.displayName === 'Checkbox'); + const checkboxGroupData = _.find(components, component => component.displayName === 'CheckboxGroup'); const style = { - checkboxWrapper: { - display: 'flex', - flexWrap: 'wrap', - alignItems: 'center' - }, paper: { margin: 0, padding: '20px' @@ -59,30 +56,26 @@ class CheckboxDoc extends Component {

    Checkbox

    Description

    -

    {componentData.description}

    +

    {checkboxData.description}

    Examples

    -
    + -
    +
      { @@ -93,7 +86,10 @@ class CheckboxDoc extends Component {
    - +

    Checkbox

    + +

    CheckboxGroup

    + ); } diff --git a/package.json b/package.json index df248b3f..6efea2f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "anchor-ui", - "version": "5.0.6", + "version": "5.1.0", "description": "React Component UI Kit", "main": "dist/index.js", "files": [ @@ -40,10 +40,11 @@ "babel-cli": "^6.26.0", "babel-eslint": "^8.0.1", "babel-plugin-add-module-exports": "^0.2.1", - "babel-preset-es2015": "^6.18.0", + "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.16.0", "babel-preset-stage-0": "^6.16.0", "chai": "^3.5.0", + "chance": "^1.0.13", "codecov": "^3.0.0", "enzyme": "^3.1.0", "enzyme-adapter-react-16": "^1.0.3", @@ -60,13 +61,13 @@ "react-docgen": "^2.19.0", "react-test-renderer": "^15.5.4", "rimraf": "^2.6.2", - "sinon": "^1.17.7", + "sinon": "^4.1.3", "sinon-chai": "^2.9.0" }, "babel": { "presets": [ "react", - "es2015", + "env", "stage-0" ], "plugins": [ @@ -90,6 +91,7 @@ "react-event-listener": "^0.4.5", "react-onclickoutside": "^6.6.3", "recompose": "^0.22.0", + "store": "^2.0.12", "tlds": "^1.182.0" } } diff --git a/src/checkbox-group/component.jsx b/src/checkbox-group/component.jsx new file mode 100644 index 00000000..64a9dbb5 --- /dev/null +++ b/src/checkbox-group/component.jsx @@ -0,0 +1,76 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Radium from 'radium'; +import includes from 'lodash/includes'; +import getStyles from './get-styles'; + +const propTypes = { + /** The CheckboxGroup's values */ + values: PropTypes.arrayOf(PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.bool + ])), + /** + * Callback fired when Checkbox's value changes + * + * function(event: object) => void + */ + onChange: PropTypes.func.isRequired, + /** The CheckboxGroup's content (Checkbox), each child must have a value prop */ + children: PropTypes.node.isRequired, + /** The CheckboxGroup's label */ + label: PropTypes.node.isRequired, + /** Override the styles of the label element */ + labelStyle: PropTypes.instanceOf(Object), + /** Override the styles of the root element */ + style: PropTypes.instanceOf(Object), + /** Override the styles of the button container */ + buttonStyle: PropTypes.instanceOf(Object), + /** Display an error message */ + error: PropTypes.node, + /** Override the styles of the error element */ + errorStyle: PropTypes.instanceOf(Object) +}; + +const defaultProps = { + values: [], + labelStyle: {}, + style: {}, + error: null, + errorStyle: {}, + buttonStyle: {} +}; + +const displayName = 'CheckboxGroup'; + +const CheckboxGroup = ({ + values, onChange, children, buttonStyle, label, labelStyle, style, error, errorStyle, ...custom +}) => { + const childrenWithProps = React.Children.map( + children, + child => React.cloneElement( + child, + { + checked: includes(values, child.props.value), + onChange + } + ) + ); + + return ( +
    + {label} +
    + {childrenWithProps} +
    + {error ? {error} : null} +
    + ); +}; + +CheckboxGroup.propTypes = propTypes; +CheckboxGroup.defaultProps = defaultProps; +CheckboxGroup.displayName = displayName; + +export default Radium(CheckboxGroup); diff --git a/src/checkbox-group/get-styles.js b/src/checkbox-group/get-styles.js new file mode 100644 index 00000000..10cd077e --- /dev/null +++ b/src/checkbox-group/get-styles.js @@ -0,0 +1,12 @@ +import styles from './styles'; +import combineStyles from '../internal/combine-styles'; + +const buttons = overrideStyle => combineStyles(styles.buttons, overrideStyle); +const label = overrideStyle => combineStyles(styles.label, overrideStyle); +const error = overrideStyle => combineStyles(styles.error, overrideStyle); + +export default { + buttons, + label, + error +}; diff --git a/src/checkbox-group/index.js b/src/checkbox-group/index.js new file mode 100644 index 00000000..787141c9 --- /dev/null +++ b/src/checkbox-group/index.js @@ -0,0 +1,4 @@ +import Radium from 'radium'; +import CheckboxGroup from './component'; + +export default Radium(CheckboxGroup); diff --git a/src/checkbox-group/styles.js b/src/checkbox-group/styles.js new file mode 100644 index 00000000..1d0a3bf6 --- /dev/null +++ b/src/checkbox-group/styles.js @@ -0,0 +1,21 @@ +import colors from '../settings/colors'; + +export default { + buttons: { + display: 'flex', + flexWrap: 'wrap' + }, + label: { + fontSize: '16px', + color: colors.secondaryText, + fontWeight: 'bolder', + padding: '0 0 8px 8px', + display: 'inline-block' + }, + error: { + display: 'block', + paddingLeft: '10px', + color: colors.error, + fontSize: '14px' + } +}; diff --git a/src/checkbox/component.jsx b/src/checkbox/component.jsx index 5bede978..2d95390e 100644 --- a/src/checkbox/component.jsx +++ b/src/checkbox/component.jsx @@ -2,37 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import getStyles from './get-styles'; import IconCheckbox from '../icons/icon-checkbox'; -import styles from './styles'; -/** A checkbox is used to verify which options you want selected from a group. */ -const Checkbox = ({ - onChange, label, checked, name, style, inputStyle, iconStyle, labelStyle, value, color, ...custom -}) => ( -