From 29c4b7f05f62307b57b7059368c60b230f4ad271 Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Tue, 27 Oct 2020 11:43:21 -0300 Subject: [PATCH 01/12] refactor Colors var names --- src/shared-components/accordion/style.ts | 2 +- .../accordion/thumbnails/style.ts | 2 +- src/shared-components/button/constants.ts | 4 ++-- src/shared-components/button/test.tsx | 4 ++-- src/shared-components/carousel/style.ts | 2 +- src/shared-components/chip/style.ts | 2 +- src/shared-components/dropdown/style.ts | 4 ++-- src/shared-components/field/style.ts | 2 +- src/shared-components/optionButton/style.ts | 2 +- src/shared-components/selectorButton/style.ts | 4 ++-- src/shared-components/toggle/index.tsx | 2 +- src/shared-components/typography/index.ts | 6 ++--- stories/button/index.stories.tsx | 22 +++++++++---------- stories/button/linkButton/index.stories.tsx | 10 ++++----- stories/button/roundButton/index.stories.tsx | 10 ++++----- stories/progressBar/index.stories.tsx | 2 +- stories/tooltip/index.stories.tsx | 2 +- 17 files changed, 41 insertions(+), 41 deletions(-) diff --git a/src/shared-components/accordion/style.ts b/src/shared-components/accordion/style.ts index 52a7371ea..61f6ace98 100644 --- a/src/shared-components/accordion/style.ts +++ b/src/shared-components/accordion/style.ts @@ -45,7 +45,7 @@ export const AccordionBox = styled.div<{ ? ` opacity: 0.4; background-color: ${COLORS.disabled}; - border-color: ${COLORS.purple30}; + border-color: ${COLORS.primaryTint3}; ` : ''}; `; diff --git a/src/shared-components/accordion/thumbnails/style.ts b/src/shared-components/accordion/thumbnails/style.ts index 2ae133fed..c75ce56a8 100644 --- a/src/shared-components/accordion/thumbnails/style.ts +++ b/src/shared-components/accordion/thumbnails/style.ts @@ -35,7 +35,7 @@ export const ThumbnailImage = styled.img` export const MultiplesContainer = styled.div` ${thumbnailBase} - background-color: ${COLORS.purple15}; + background-color: ${COLORS.defaultBorder}; `; export const MultiplesText = styled.div` diff --git a/src/shared-components/button/constants.ts b/src/shared-components/button/constants.ts index 022aef756..e9fd88f7a 100644 --- a/src/shared-components/button/constants.ts +++ b/src/shared-components/button/constants.ts @@ -3,8 +3,8 @@ import { COLORS } from '../../constants'; // TODO: potentially break out these pairings to the color constants file export const textColorsAssociatedWithColors = { [COLORS.primary]: { - tint1: COLORS.purple85, - tint2: COLORS.purple70, + tint1: COLORS.primaryTint1, + tint2: COLORS.primaryTint2, }, [COLORS.secondary]: { tint1: COLORS.lavender80, diff --git a/src/shared-components/button/test.tsx b/src/shared-components/button/test.tsx index 311a309b3..e8aa574e3 100644 --- a/src/shared-components/button/test.tsx +++ b/src/shared-components/button/test.tsx @@ -24,7 +24,7 @@ describe(', ); - expect(button.prop('buttonColor')).toEqual(COLORS.statusRed); + expect(button.prop('buttonColor')).toEqual(COLORS.error); }); }); diff --git a/src/shared-components/carousel/style.ts b/src/shared-components/carousel/style.ts index 7b52f20f8..706c7eddb 100644 --- a/src/shared-components/carousel/style.ts +++ b/src/shared-components/carousel/style.ts @@ -14,7 +14,7 @@ export const Card = styled.div` const primaryStyles = css` .slick-dots { li { - background-color: ${COLORS.purple}; + background-color: ${COLORS.primary}; } } `; diff --git a/src/shared-components/chip/style.ts b/src/shared-components/chip/style.ts index 9563be109..a2e22297d 100644 --- a/src/shared-components/chip/style.ts +++ b/src/shared-components/chip/style.ts @@ -14,7 +14,7 @@ export const ChipText = styled.span` `; const defaultStyle = css` - background-color: ${COLORS.purple10}; + background-color: ${COLORS.disabled}; ${ChipText} { color: ${COLORS.primary}; } diff --git a/src/shared-components/dropdown/style.ts b/src/shared-components/dropdown/style.ts index 90e756e51..5fe8666c9 100644 --- a/src/shared-components/dropdown/style.ts +++ b/src/shared-components/dropdown/style.ts @@ -53,7 +53,7 @@ export const dropdownInputStyle = ({ border: 1px solid ${COLORS.border}; ${dropdownBorderRadius}; - color: ${COLORS.purple85}; + color: ${COLORS.primaryTint1}; line-height: ${SPACER.x4large}; overflow: hidden; text-overflow: ellipsis; @@ -158,7 +158,7 @@ export const DropdownOption = styled.li<{ selected: boolean; disabled: boolean; }>` - color: ${COLORS.purple85}; + color: ${COLORS.primaryTint1}; min-height: ${SPACER.x4large}; background-color: ${COLORS.white}; diff --git a/src/shared-components/field/style.ts b/src/shared-components/field/style.ts index 886e6edd2..353d16f92 100644 --- a/src/shared-components/field/style.ts +++ b/src/shared-components/field/style.ts @@ -23,7 +23,7 @@ export const FieldContainer = styled.div` export const Label = styled.label<{ disabled: boolean }>` ${TYPOGRAPHY_STYLE.label}; - ${({ disabled }) => disabled && `color:${COLORS.purple30};`}; + ${({ disabled }) => disabled && `color:${COLORS.primaryTint3};`}; `; const inputStyles = css` diff --git a/src/shared-components/optionButton/style.ts b/src/shared-components/optionButton/style.ts index 811c2ada9..c439a14e4 100644 --- a/src/shared-components/optionButton/style.ts +++ b/src/shared-components/optionButton/style.ts @@ -128,7 +128,7 @@ export const TextContainer = styled.div` `; export const Text = styled.div` - color: ${COLORS.purple85}; + color: ${COLORS.primaryTint1}; line-height: 1.5; `; diff --git a/src/shared-components/selectorButton/style.ts b/src/shared-components/selectorButton/style.ts index f5152c6dd..fa5944a0c 100644 --- a/src/shared-components/selectorButton/style.ts +++ b/src/shared-components/selectorButton/style.ts @@ -55,8 +55,8 @@ const secondarySelectorStyle = (checked: boolean) => css` `; const disabledSelectorStyle = css` - background-color: ${COLORS.purple30}; - border-color: ${COLORS.purple30}; + background-color: ${COLORS.primaryTint3}; + border-color: ${COLORS.primaryTint3}; cursor: not-allowed; `; diff --git a/src/shared-components/toggle/index.tsx b/src/shared-components/toggle/index.tsx index 979ccfe12..50d9615f0 100644 --- a/src/shared-components/toggle/index.tsx +++ b/src/shared-components/toggle/index.tsx @@ -59,7 +59,7 @@ export const Toggle = ({ base: COLORS.secondary, }, inactive: { - base: COLORS.purple15, + base: COLORS.defaultBorder, }, activeThumb: { base: COLORS.white, diff --git a/src/shared-components/typography/index.ts b/src/shared-components/typography/index.ts index 8549c99b9..7d974320e 100644 --- a/src/shared-components/typography/index.ts +++ b/src/shared-components/typography/index.ts @@ -27,7 +27,7 @@ const titleStyle = css` `; export const baseBodyStyles = ` - color: ${COLORS.purpleTint1}; + color: ${COLORS.primaryTint1}; font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.body}; line-height: ${round(28 / 16, 2)}; `; @@ -37,7 +37,7 @@ const bodyStyle = css` `; const captionStyle = css` - color: ${COLORS.purpleTint2}; + color: ${COLORS.primaryTint2}; font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.caption}; line-height: ${round(24 / 14, 2)}; `; @@ -53,7 +53,7 @@ const successStyle = css` `; const labelStyle = css` - color: ${COLORS.purpleTint1}; + color: ${COLORS.primaryTint1}; font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.label}; line-height: ${round(20 / 12, 2)}; `; diff --git a/stories/button/index.stories.tsx b/stories/button/index.stories.tsx index 8f63814e6..c112829a5 100644 --- a/stories/button/index.stories.tsx +++ b/stories/button/index.stories.tsx @@ -76,35 +76,35 @@ export const WithIcon = () => ( export const WithColor = () => ( - - + - - - - - - - - - diff --git a/stories/button/linkButton/index.stories.tsx b/stories/button/linkButton/index.stories.tsx index 1569bd86f..b79e03efc 100644 --- a/stories/button/linkButton/index.stories.tsx +++ b/stories/button/linkButton/index.stories.tsx @@ -52,19 +52,19 @@ export const ReactRouterLink = () => { export const WithColor = () => ( - + Primary - + Secondary - + Tertiary - + Quaternary - + Disabled diff --git a/stories/button/roundButton/index.stories.tsx b/stories/button/roundButton/index.stories.tsx index 5a1e6d89b..42ccae7bb 100644 --- a/stories/button/roundButton/index.stories.tsx +++ b/stories/button/roundButton/index.stories.tsx @@ -88,32 +88,32 @@ export const Loading = () => ( export const WithColor = () => ( - }> + }> Primary } > Secondary } > Tertiary } > Quaternary } > diff --git a/stories/progressBar/index.stories.tsx b/stories/progressBar/index.stories.tsx index da7178a72..d5aa2803c 100644 --- a/stories/progressBar/index.stories.tsx +++ b/stories/progressBar/index.stories.tsx @@ -26,7 +26,7 @@ const BarContainer = styled.div` :before { content: 'PAGE CONTENT'; - color: ${COLORS.purple30}; + color: ${COLORS.primaryTint3}; } `; diff --git a/stories/tooltip/index.stories.tsx b/stories/tooltip/index.stories.tsx index c0e8db35a..a6df25a9d 100644 --- a/stories/tooltip/index.stories.tsx +++ b/stories/tooltip/index.stories.tsx @@ -23,7 +23,7 @@ const TooltipContainer = styled.div<{ height?: string }>` `; const TriggerContainer = styled.div` - background: ${COLORS.purple}; + background: ${COLORS.primary}; margin: 0 auto; padding: ${SPACER.small}; color: ${COLORS.white}; From b5a764e0f09bc392b1b0a386dd83b8bf1d210170 Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Tue, 27 Oct 2020 11:53:29 -0300 Subject: [PATCH 02/12] hardcoded hexadecimal colors --- src/shared-components/loadingSpinner/test.tsx | 5 +++-- stories/checkbox/index.stories.tsx | 3 ++- stories/radioButton/index.stories.tsx | 3 ++- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/shared-components/loadingSpinner/test.tsx b/src/shared-components/loadingSpinner/test.tsx index 88f524e01..167487ce7 100644 --- a/src/shared-components/loadingSpinner/test.tsx +++ b/src/shared-components/loadingSpinner/test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import renderer from 'react-test-renderer'; +import { COLORS } from 'src/constants'; import { LoadingSpinner } from './index'; @@ -14,8 +15,8 @@ describe('', () => { it('renders the correct css with custom props', () => { const component = renderer.create( ( @@ -54,7 +55,7 @@ export const WithControls = () => ( onClick={action('checkbox clicked')} icon={ boolean('icon', false) ? ( - + ) : null } size={select('size', ['large', 'small'], 'large')} diff --git a/stories/radioButton/index.stories.tsx b/stories/radioButton/index.stories.tsx index 97b19471d..05c8188a3 100644 --- a/stories/radioButton/index.stories.tsx +++ b/stories/radioButton/index.stories.tsx @@ -3,6 +3,7 @@ import { text, boolean, select } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; import { RadioButton } from 'src/shared-components'; import { AcneGlyph } from 'src/svgs/glyphs'; +import { COLORS } from 'src/constants'; import { ArgsTable, Description, @@ -70,7 +71,7 @@ export const WithControls = () => ( onClick={(action('radio button clicked'), () => undefined)} icon={ boolean('icon', false) ? ( - + ) : null } size={select('size', ['large', 'small'], 'small')} From c1d81560d7107936910b002c85398b7d60ed4ee7 Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Tue, 27 Oct 2020 14:46:11 -0300 Subject: [PATCH 03/12] cleanup --- .../accordion/thumbnails/index.tsx | 5 --- .../button/components/roundButton/index.tsx | 2 +- src/shared-components/button/index.tsx | 2 +- .../button/shared-components/loader/index.tsx | 19 +------- .../carousel/arrow/index.tsx | 9 ---- src/shared-components/container/style.ts | 2 +- .../dropdown/desktopDropdown.tsx | 43 +++---------------- src/shared-components/dropdown/index.tsx | 32 +++++++------- .../dropdown/mobileDropdown.tsx | 25 +++-------- src/shared-components/dropdown/test.tsx | 7 +++ src/shared-components/field/index.tsx | 8 ++-- .../immersiveModal/index.tsx | 2 +- .../loadingSpinner/index.tsx | 28 ++++-------- src/shared-components/optionButton/index.tsx | 10 ++--- src/shared-components/progressBar/index.tsx | 1 - src/shared-components/radioButton/index.tsx | 16 +++---- src/shared-components/toggle/index.tsx | 12 +++--- src/shared-components/tooltip/index.tsx | 14 +++--- 18 files changed, 76 insertions(+), 161 deletions(-) diff --git a/src/shared-components/accordion/thumbnails/index.tsx b/src/shared-components/accordion/thumbnails/index.tsx index d57533cc3..25565630a 100644 --- a/src/shared-components/accordion/thumbnails/index.tsx +++ b/src/shared-components/accordion/thumbnails/index.tsx @@ -1,4 +1,3 @@ -import PropTypes from 'prop-types'; import React from 'react'; import { @@ -57,8 +56,4 @@ const Thumbnails = ({ photoSrcs }: ThumbnailsProps) => { return {renderThumbnails()}; }; -Thumbnails.propTypes = { - photoSrcs: PropTypes.arrayOf(PropTypes.string).isRequired, -}; - export default Thumbnails; diff --git a/src/shared-components/button/components/roundButton/index.tsx b/src/shared-components/button/components/roundButton/index.tsx index 8b143bbf4..ccbc5923e 100644 --- a/src/shared-components/button/components/roundButton/index.tsx +++ b/src/shared-components/button/components/roundButton/index.tsx @@ -39,7 +39,7 @@ type RoundButtonProps = { * When loading, onClick function execution is disallowed */ isLoading?: boolean; - loading?: boolean | undefined; + loading?: boolean; onClick?: () => void; /** * Color that will override existing text, icon, and loading colors (except when disabled is true) diff --git a/src/shared-components/button/index.tsx b/src/shared-components/button/index.tsx index d410accf5..524604a05 100644 --- a/src/shared-components/button/index.tsx +++ b/src/shared-components/button/index.tsx @@ -46,7 +46,7 @@ type ButtonProps = { * When loading, onClick function execution is disallowed */ isLoading?: boolean; - loading?: boolean | undefined; + loading?: boolean; onClick: () => void; /** * Color that will override existing text, icon, and loading colors for the button (except when disabled is true) diff --git a/src/shared-components/button/shared-components/loader/index.tsx b/src/shared-components/button/shared-components/loader/index.tsx index 8f5307611..95d45aba6 100644 --- a/src/shared-components/button/shared-components/loader/index.tsx +++ b/src/shared-components/button/shared-components/loader/index.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { COLORS, COLORS_PROP_TYPES } from '../../../../constants'; +import { COLORS } from '../../../../constants'; import ButtonLoader from './style'; import { ButtonTypeWithAction } from '../..'; @@ -41,20 +40,4 @@ const Loader = ({ ); -Loader.propTypes = { - buttonColor: COLORS_PROP_TYPES, - buttonType: PropTypes.oneOf([ - 'primary', - 'secondary', - 'tertiary', - 'quaternary', - 'action', - ]), - className: PropTypes.string, - disabled: PropTypes.bool, - isFullWidth: PropTypes.bool, - isLoading: PropTypes.bool, - textColor: PropTypes.string, -}; - export default Loader; diff --git a/src/shared-components/carousel/arrow/index.tsx b/src/shared-components/carousel/arrow/index.tsx index bb8a167fe..6f0874dc9 100644 --- a/src/shared-components/carousel/arrow/index.tsx +++ b/src/shared-components/carousel/arrow/index.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { RoundButton } from '../../button'; import ArrowLeftIcon from '../../../svgs/icons/arrow-left-icon.svg'; @@ -47,12 +46,4 @@ const Arrow = ({ ); }; -Arrow.propTypes = { - bottomRightAlignedArrows: PropTypes.bool, - disabled: PropTypes.bool, - next: PropTypes.bool, - onClick: PropTypes.func, - prev: PropTypes.bool, -}; - export default Arrow; diff --git a/src/shared-components/container/style.ts b/src/shared-components/container/style.ts index 1693969c8..ba0a02995 100644 --- a/src/shared-components/container/style.ts +++ b/src/shared-components/container/style.ts @@ -74,7 +74,7 @@ export const Image = styled.img` type StyledContainer = StyledComponent< DetailedHTMLProps, HTMLDivElement>, { - type?: 'clickable' | 'message' | undefined; + type?: 'clickable' | 'message'; }, any >; diff --git a/src/shared-components/dropdown/desktopDropdown.tsx b/src/shared-components/dropdown/desktopDropdown.tsx index 11d0ebde3..715ea2614 100644 --- a/src/shared-components/dropdown/desktopDropdown.tsx +++ b/src/shared-components/dropdown/desktopDropdown.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { css } from '@emotion/core'; import useResetFocus from 'src/utils/accessibility/useResetFocus'; @@ -19,9 +18,11 @@ import { OptionType } from './index'; type DesktopDropdownProps = { borderRadius: string; closeDropdown: () => void; - currentOption: OptionType; + currentOption?: OptionType; isOpen: boolean; - onOptionClick: (event: any) => void; + onOptionClick: ( + event: React.MouseEvent | React.KeyboardEvent, + ) => void; onSelectClick: () => void; options: OptionType[]; optionsContainerMaxHeight: string; @@ -50,7 +51,7 @@ export const DesktopDropdown = ({ } }; - const handleOptionKeydown = (event: React.KeyboardEvent) => { + const handleOptionKeydown = (event: React.KeyboardEvent) => { // This allows users to select an option via the enter key if (event.key === 'Enter') { onOptionClick(event); @@ -126,37 +127,3 @@ export const DesktopDropdown = ({ ); }; - -DesktopDropdown.defaultProps = { - value: undefined, - options: [{ value: null, label: '' }], - currentOption: { value: null, label: '' }, - textAlign: 'left', - isOpen: false, -}; - -DesktopDropdown.propTypes = { - borderRadius: PropTypes.string.isRequired, - // eslint-disable-next-line react/forbid-prop-types - value: PropTypes.any, - options: PropTypes.arrayOf( - PropTypes.shape({ - // eslint-disable-next-line react/forbid-prop-types - value: PropTypes.any, - label: PropTypes.string, - disabled: PropTypes.bool, - }), - ), - textAlign: PropTypes.oneOf(['left', 'center']), - currentOption: PropTypes.shape({ - // eslint-disable-next-line react/forbid-prop-types - value: PropTypes.any, - label: PropTypes.string, - disabled: PropTypes.bool, - }), - closeDropdown: PropTypes.func.isRequired, - onOptionClick: PropTypes.func.isRequired, - onSelectClick: PropTypes.func.isRequired, - isOpen: PropTypes.bool, - optionsContainerMaxHeight: PropTypes.string.isRequired, -}; diff --git a/src/shared-components/dropdown/index.tsx b/src/shared-components/dropdown/index.tsx index a6420aa06..9e8266635 100644 --- a/src/shared-components/dropdown/index.tsx +++ b/src/shared-components/dropdown/index.tsx @@ -6,15 +6,15 @@ import { DesktopDropdown } from './desktopDropdown'; import allowNullPropType from '../../utils/allowNullPropType'; export type OptionType = { - /** - * The option indentifier - */ - value: string | undefined; + disabled?: boolean; /** * The text to be displayed for the option */ label: string; - disabled?: boolean; + /** + * The option indentifier + */ + value?: string; }; type DropdownProps = { @@ -30,7 +30,7 @@ type DropdownProps = { optionsContainerMaxHeight?: string; textAlign?: 'left' | 'center'; /** - * The currently selected option. Can mount as `null` + * The currently selected option. Can mount as `undefined` */ value?: string; }; @@ -42,7 +42,7 @@ type DropdownProps = { export const Dropdown = ({ borderRadius = '4px', onChange, - options, + options = [{ value: undefined, label: '' }], optionsContainerMaxHeight = '250px', textAlign = 'left', value, @@ -68,7 +68,9 @@ export const Dropdown = ({ closeDropdown(); }; - const onOptionClick = (event: React.MouseEvent) => { + const onOptionClick = ( + event: React.MouseEvent | React.KeyboardEvent, + ) => { const target = event.currentTarget; if (target.hasAttribute('disabled')) { return; @@ -84,10 +86,10 @@ export const Dropdown = ({ return ( ); } @@ -112,9 +114,7 @@ export const Dropdown = ({ Dropdown.propTypes = { borderRadius: PropTypes.string, - value: allowNullPropType( - PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - ), + onChange: PropTypes.func.isRequired, options: PropTypes.arrayOf( PropTypes.shape({ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -122,7 +122,9 @@ Dropdown.propTypes = { disabled: PropTypes.bool, }), ).isRequired, - textAlign: PropTypes.oneOf(['left', 'center']), - onChange: PropTypes.func.isRequired, optionsContainerMaxHeight: PropTypes.string, + textAlign: PropTypes.oneOf(['left', 'center']), + value: allowNullPropType( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + ), }; diff --git a/src/shared-components/dropdown/mobileDropdown.tsx b/src/shared-components/dropdown/mobileDropdown.tsx index 147a9f2b9..d1b7bea44 100644 --- a/src/shared-components/dropdown/mobileDropdown.tsx +++ b/src/shared-components/dropdown/mobileDropdown.tsx @@ -1,17 +1,16 @@ import React from 'react'; -import PropTypes from 'prop-types'; import ChevronIcon from '../../svgs/icons/chevron-icon.svg'; import { DropdownContainer, dropdownInputStyle, IconContainer } from './style'; -import { OptionType } from './index'; +import { OptionType } from '.'; type MobileDropdownProps = { borderRadius: string; onSelectChange: (event: React.ChangeEvent) => void; options: OptionType[]; - textAlign?: 'left' | 'center'; - value?: string | number | undefined; + textAlign: 'left' | 'center'; + value?: string | number; }; /** @@ -22,8 +21,8 @@ type MobileDropdownProps = { export const MobileDropdown = ({ borderRadius, onSelectChange, - options = [{ value: undefined, label: '' }], - textAlign = 'left', + options, + textAlign, value, }: MobileDropdownProps) => ( @@ -57,17 +56,3 @@ export const MobileDropdown = ({ ); - -MobileDropdown.propTypes = { - borderRadius: PropTypes.string.isRequired, - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - options: PropTypes.arrayOf( - PropTypes.shape({ - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - label: PropTypes.string, - disabled: PropTypes.bool, - }), - ), - textAlign: PropTypes.oneOf(['left', 'center']), - onSelectChange: PropTypes.func, -}; diff --git a/src/shared-components/dropdown/test.tsx b/src/shared-components/dropdown/test.tsx index 84368c47d..43537948e 100644 --- a/src/shared-components/dropdown/test.tsx +++ b/src/shared-components/dropdown/test.tsx @@ -44,6 +44,7 @@ describe('', () => { onSelectChange={() => undefined} borderRadius="4px" options={options} + textAlign="left" />, ) .toJSON(); @@ -61,6 +62,7 @@ describe('', () => { options={options} onSelectChange={spy} value="" + textAlign="left" />, ); @@ -81,6 +83,8 @@ describe('', () => { onSelectClick={() => null} closeDropdown={() => null} onOptionClick={() => null} + textAlign="left" + isOpen={false} />, ); @@ -101,6 +105,8 @@ describe('', () => { optionsContainerMaxHeight="250px" closeDropdown={() => null} onOptionClick={() => null} + textAlign="left" + isOpen={false} />, ); @@ -122,6 +128,7 @@ describe('', () => { optionsContainerMaxHeight="250px" onSelectClick={() => null} closeDropdown={() => null} + textAlign="left" />, ); diff --git a/src/shared-components/field/index.tsx b/src/shared-components/field/index.tsx index 183bb894a..c2bbe375b 100644 --- a/src/shared-components/field/index.tsx +++ b/src/shared-components/field/index.tsx @@ -60,12 +60,12 @@ type FieldProps = { export const Field = ({ children: inputChild, disabled = false, - messages = {}, - messagesType = 'error', hideMessagesIcon = false, hintMessage = '', label = '', labelFor = '', + messages = {}, + messagesType = 'error', }: FieldProps) => { const htmlFor = labelFor || label; const messagesKeys = Object.keys(messages); @@ -110,10 +110,10 @@ Field.Input = Input; Field.propTypes = { children: PropTypes.element.isRequired, disabled: PropTypes.bool, - messages: PropTypes.objectOf(PropTypes.node), - messagesType: PropTypes.oneOf(['error', 'success']), hideMessagesIcon: PropTypes.bool, hintMessage: PropTypes.string, label: PropTypes.string, labelFor: PropTypes.string, + messages: PropTypes.objectOf(PropTypes.node), + messagesType: PropTypes.oneOf(['error', 'success']), }; diff --git a/src/shared-components/immersiveModal/index.tsx b/src/shared-components/immersiveModal/index.tsx index 6469600ae..73fd8feea 100644 --- a/src/shared-components/immersiveModal/index.tsx +++ b/src/shared-components/immersiveModal/index.tsx @@ -234,8 +234,8 @@ export const ImmersiveModal = ({ ImmersiveModal.propTypes = { children: PropTypes.node.isRequired, - headerImage: PropTypes.node, footerContent: PropTypes.node, + headerImage: PropTypes.node, onClose: PropTypes.func.isRequired, title: PropTypes.string, }; diff --git a/src/shared-components/loadingSpinner/index.tsx b/src/shared-components/loadingSpinner/index.tsx index 4d62d9c2e..dd392fab5 100644 --- a/src/shared-components/loadingSpinner/index.tsx +++ b/src/shared-components/loadingSpinner/index.tsx @@ -13,10 +13,6 @@ type LoadingSpinnerProps = { * Color of the loading dots */ color?: string; - /** - * Distance dots will move horizontally - */ - translateX?: string; /** * Length of time for animation loop */ @@ -25,21 +21,21 @@ type LoadingSpinnerProps = { * Size of loading dots */ size?: string; + /** + * Distance dots will move horizontally + */ + translateX?: string; }; -const DEFAULT_TRANSLATE_X = '100px'; -const DEFAULT_DURATION = 2; -const DEFAULT_SIZE = '14px'; - /** * LoadingSpinner will cover the entirety of the container that holds it. The container should have `position: relative;` as part of its styling to prevent the LoadingSpinner from spilling outside the container. */ export const LoadingSpinner = ({ bgColor = COLORS.background, color = COLORS.primary, - translateX = DEFAULT_TRANSLATE_X, - duration = DEFAULT_DURATION, - size = DEFAULT_SIZE, + duration = 2, + size = '14px', + translateX = '100px', }: LoadingSpinnerProps) => ( @@ -68,15 +64,7 @@ export const LoadingSpinner = ({ LoadingSpinner.propTypes = { bgColor: PropTypes.string, color: PropTypes.string, - translateX: PropTypes.string, duration: PropTypes.number, size: PropTypes.string, -}; - -LoadingSpinner.defaultProps = { - bgColor: COLORS.background, - color: COLORS.primary, - translateX: DEFAULT_TRANSLATE_X, - duration: DEFAULT_DURATION, - size: DEFAULT_SIZE, + translateX: PropTypes.string, }; diff --git a/src/shared-components/optionButton/index.tsx b/src/shared-components/optionButton/index.tsx index 7f3705ba5..a43c69d15 100644 --- a/src/shared-components/optionButton/index.tsx +++ b/src/shared-components/optionButton/index.tsx @@ -22,11 +22,11 @@ type OptionButtonProps = { /** * Label */ - text: string; - subtext?: React.ReactNode; onClick: () => void; optionType: 'radio' | 'checkbox'; selected?: boolean; + subtext?: React.ReactNode; + text: string; [key: string]: unknown; }; @@ -34,11 +34,11 @@ export const OptionButton = ({ borderRadius = '4px', buttonType = 'primary', icon, - text, onClick, optionType, selected = false, subtext, + text, ...rest }: OptionButtonProps) => ( | React.KeyboardEvent, @@ -48,19 +56,11 @@ export const RadioButton = ({ RadioButton.propTypes = { checked: PropTypes.bool.isRequired, - /** - * Text label displayed next to the radio button - */ children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node, ]), disabled: PropTypes.bool, - /** - * Icon optionally displayed inside the radio button. - * - * Icons are only displayed at the 'large' size - */ icon: PropTypes.node, onClick: PropTypes.func, size: PropTypes.oneOf(['large', 'small']), diff --git a/src/shared-components/toggle/index.tsx b/src/shared-components/toggle/index.tsx index 50d9615f0..2688b0268 100644 --- a/src/shared-components/toggle/index.tsx +++ b/src/shared-components/toggle/index.tsx @@ -12,12 +12,6 @@ import { thumbStyle, } from './style'; -const propTypes = { - checked: PropTypes.bool, - label: PropTypes.string, - onChange: PropTypes.func.isRequired, -}; - type ToggleProps = { checked?: boolean; label?: string; @@ -74,4 +68,8 @@ export const Toggle = ({ ); -Toggle.propTypes = propTypes; +Toggle.propTypes = { + checked: PropTypes.bool, + label: PropTypes.string, + onChange: PropTypes.func.isRequired, +}; diff --git a/src/shared-components/tooltip/index.tsx b/src/shared-components/tooltip/index.tsx index b6fc9d3f2..bfc6f634c 100644 --- a/src/shared-components/tooltip/index.tsx +++ b/src/shared-components/tooltip/index.tsx @@ -54,19 +54,19 @@ type TooltipProps = { /** * Adjusts positioning, in px */ - nudgeLeft?: number; + nudgeBottom?: number; /** * Adjusts positioning, in px */ - nudgeRight?: number; + nudgeLeft?: number; /** * Adjusts positioning, in px */ - nudgeTop?: number; + nudgeRight?: number; /** * Adjusts positioning, in px */ - nudgeBottom?: number; + nudgeTop?: number; position?: PositionTypes; }; @@ -85,10 +85,10 @@ export const Tooltip = ({ display = true, hasRestrictedWidth = false, isSmall = false, + nudgeBottom = 0, nudgeLeft = 0, nudgeRight = 0, nudgeTop = 0, - nudgeBottom = 0, position = 'top', }: TooltipProps) => { const [clicked, setClicked] = useState(false); @@ -140,10 +140,10 @@ export const Tooltip = ({ displayTooltip={display} hasRestrictedWidth={hasRestrictedWidth} isSmall={isSmall} + nudgeBottom={nudgeBottom} nudgeLeft={nudgeLeft} nudgeRight={nudgeRight} nudgeTop={nudgeTop} - nudgeBottom={nudgeBottom} open={open} position={position} > @@ -170,9 +170,9 @@ Tooltip.propTypes = { display: PropTypes.bool, hasRestrictedWidth: PropTypes.bool, isSmall: PropTypes.bool, + nudgeBottom: PropTypes.number, nudgeLeft: PropTypes.number, nudgeRight: PropTypes.number, nudgeTop: PropTypes.number, - nudgeBottom: PropTypes.number, position: PropTypes.oneOf(['top', 'bottom']), }; From 192084bd26f31fe0decdba28209387e19c602269 Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Tue, 27 Oct 2020 14:55:41 -0300 Subject: [PATCH 04/12] repositino callout static member --- src/shared-components/callout/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared-components/callout/index.tsx b/src/shared-components/callout/index.tsx index fb498e92c..9e2ebf5bd 100644 --- a/src/shared-components/callout/index.tsx +++ b/src/shared-components/callout/index.tsx @@ -39,10 +39,10 @@ export const Callout = ({ ); +Callout.Container = ParentContainer; + Callout.propTypes = { children: PropTypes.node.isRequired, color: PropTypes.string, icon: PropTypes.node, }; - -Callout.Container = ParentContainer; From a5474104cb87b6de948115d3c99b952375a08833 Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Tue, 27 Oct 2020 14:58:19 -0300 Subject: [PATCH 05/12] snapshots --- .size-snapshot.json | 210 +++++++++--------- .../__snapshots__/test.tsx.snap | 8 +- 2 files changed, 109 insertions(+), 109 deletions(-) diff --git a/.size-snapshot.json b/.size-snapshot.json index 0b1b26a27..3db95fde0 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,13 +1,13 @@ { "bundle.js": { - "bundled": 1138873, - "minified": 1071802, - "gzipped": 103255 + "bundled": 1134588, + "minified": 1068360, + "gzipped": 102472 }, "bundle.umd.js": { - "bundled": 1147960, - "minified": 1046065, - "gzipped": 99116 + "bundled": 1143503, + "minified": 1043590, + "gzipped": 98381 }, "shared-components/chip/index.js": { "bundled": 867, @@ -24,16 +24,16 @@ } }, "shared-components/loadingSpinner/index.js": { - "bundled": 1891, - "minified": 1053, - "gzipped": 456, + "bundled": 1593, + "minified": 801, + "gzipped": 371, "treeshaked": { "rollup": { - "code": 757, + "code": 239, "import_statements": 194 }, "webpack": { - "code": 1943 + "code": 1300 } } }, @@ -52,16 +52,16 @@ } }, "shared-components/field/style.js": { - "bundled": 35818, - "minified": 35300, - "gzipped": 4680, + "bundled": 35878, + "minified": 35360, + "gzipped": 4663, "treeshaked": { "rollup": { - "code": 2100, + "code": 2104, "import_statements": 297 }, "webpack": { - "code": 3405 + "code": 3409 } } }, @@ -94,13 +94,13 @@ } }, "shared-components/toggle/index.js": { - "bundled": 1780, - "minified": 998, - "gzipped": 519, + "bundled": 1757, + "minified": 983, + "gzipped": 517, "treeshaked": { "rollup": { - "code": 179, - "import_statements": 145 + "code": 302, + "import_statements": 268 }, "webpack": { "code": 1346 @@ -136,16 +136,16 @@ } }, "shared-components/button/constants.js": { - "bundled": 543, - "minified": 472, - "gzipped": 243, + "bundled": 551, + "minified": 480, + "gzipped": 241, "treeshaked": { "rollup": { - "code": 233, + "code": 241, "import_statements": 116 }, "webpack": { - "code": 1299 + "code": 1307 } } }, @@ -206,7 +206,7 @@ } }, "shared-components/radioButton/index.js": { - "bundled": 2182, + "bundled": 1994, "minified": 1051, "gzipped": 515, "treeshaked": { @@ -263,15 +263,15 @@ }, "shared-components/field/index.js": { "bundled": 2767, - "minified": 1475, - "gzipped": 663, + "minified": 1477, + "gzipped": 661, "treeshaked": { "rollup": { - "code": 1236, + "code": 1238, "import_statements": 407 }, "webpack": { - "code": 2543 + "code": 2545 } } }, @@ -500,9 +500,9 @@ } }, "shared-components/dropdown/index.js": { - "bundled": 3419, - "minified": 1710, - "gzipped": 746, + "bundled": 3526, + "minified": 1751, + "gzipped": 760, "treeshaked": { "rollup": { "code": 527, @@ -600,7 +600,7 @@ "shared-components/optionButton/index.js": { "bundled": 2186, "minified": 1442, - "gzipped": 635, + "gzipped": 633, "treeshaked": { "rollup": { "code": 511, @@ -612,16 +612,16 @@ } }, "shared-components/accordion/thumbnails/index.js": { - "bundled": 1283, - "minified": 682, - "gzipped": 345, + "bundled": 1158, + "minified": 568, + "gzipped": 295, "treeshaked": { "rollup": { - "code": 236, - "import_statements": 205 + "code": 55, + "import_statements": 55 }, "webpack": { - "code": 1714 + "code": 1105 } } }, @@ -670,7 +670,7 @@ "shared-components/chip/style.js": { "bundled": 16114, "minified": 15713, - "gzipped": 2631, + "gzipped": 2630, "treeshaked": { "rollup": { "code": 1082, @@ -726,7 +726,7 @@ "shared-components/tooltip/index.js": { "bundled": 5372, "minified": 2529, - "gzipped": 1027, + "gzipped": 1028, "treeshaked": { "rollup": { "code": 642, @@ -780,16 +780,16 @@ } }, "shared-components/dropdown/desktopDropdown.js": { - "bundled": 11265, - "minified": 9429, - "gzipped": 3676, + "bundled": 8930, + "minified": 7409, + "gzipped": 3158, "treeshaked": { "rollup": { - "code": 2049, - "import_statements": 502 + "code": 226, + "import_statements": 226 }, "webpack": { - "code": 3387 + "code": 1421 } } }, @@ -808,9 +808,9 @@ } }, "shared-components/container/style.js": { - "bundled": 31493, - "minified": 30716, - "gzipped": 4150, + "bundled": 31365, + "minified": 30588, + "gzipped": 4133, "treeshaked": { "rollup": { "code": 1264, @@ -822,30 +822,30 @@ } }, "shared-components/button/shared-components/loader/index.js": { - "bundled": 1667, - "minified": 928, - "gzipped": 451, + "bundled": 1307, + "minified": 611, + "gzipped": 338, "treeshaked": { "rollup": { - "code": 274, - "import_statements": 169 + "code": 91, + "import_statements": 91 }, "webpack": { - "code": 1984 + "code": 1184 } } }, "shared-components/typography/index.js": { - "bundled": 92224, - "minified": 91435, - "gzipped": 6106, + "bundled": 92303, + "minified": 91514, + "gzipped": 6077, "treeshaked": { "rollup": { - "code": 2274, + "code": 2277, "import_statements": 245 }, "webpack": { - "code": 3619 + "code": 3622 } } }, @@ -864,16 +864,16 @@ } }, "shared-components/dropdown/mobileDropdown.js": { - "bundled": 2066, - "minified": 1127, - "gzipped": 538, + "bundled": 1437, + "minified": 668, + "gzipped": 379, "treeshaked": { "rollup": { - "code": 393, - "import_statements": 214 + "code": 96, + "import_statements": 96 }, "webpack": { - "code": 1455 + "code": 1183 } } }, @@ -1004,16 +1004,16 @@ } }, "shared-components/carousel/style.js": { - "bundled": 46192, - "minified": 45530, - "gzipped": 5103, + "bundled": 46209, + "minified": 45547, + "gzipped": 5097, "treeshaked": { "rollup": { - "code": 2500, + "code": 2501, "import_statements": 158 }, "webpack": { - "code": 3677 + "code": 3678 } } }, @@ -1102,44 +1102,44 @@ } }, "shared-components/dropdown/style.js": { - "bundled": 60736, - "minified": 59748, - "gzipped": 5975, + "bundled": 60840, + "minified": 59852, + "gzipped": 5936, "treeshaked": { "rollup": { - "code": 2301, + "code": 2305, "import_statements": 298 }, "webpack": { - "code": 3607 + "code": 3611 } } }, "shared-components/selectorButton/style.js": { - "bundled": 50248, - "minified": 49458, - "gzipped": 5446, + "bundled": 50392, + "minified": 49602, + "gzipped": 5484, "treeshaked": { "rollup": { - "code": 2079, + "code": 2087, "import_statements": 251 }, "webpack": { - "code": 3376 + "code": 3384 } } }, "shared-components/optionButton/style.js": { - "bundled": 57450, - "minified": 56362, - "gzipped": 4869, + "bundled": 57502, + "minified": 56414, + "gzipped": 4881, "treeshaked": { "rollup": { - "code": 2201, + "code": 2205, "import_statements": 352 }, "webpack": { - "code": 3522 + "code": 3526 } } }, @@ -1186,16 +1186,16 @@ } }, "shared-components/accordion/style.js": { - "bundled": 39686, - "minified": 38687, - "gzipped": 4851, + "bundled": 39738, + "minified": 38739, + "gzipped": 4822, "treeshaked": { "rollup": { - "code": 2636, + "code": 2640, "import_statements": 299 }, "webpack": { - "code": 3904 + "code": 3908 } } }, @@ -1242,16 +1242,16 @@ } }, "shared-components/carousel/arrow/index.js": { - "bundled": 1764, - "minified": 1030, - "gzipped": 440, + "bundled": 1558, + "minified": 851, + "gzipped": 386, "treeshaked": { "rollup": { - "code": 352, - "import_statements": 317 + "code": 193, + "import_statements": 193 }, "webpack": { - "code": 2079 + "code": 1360 } } }, @@ -1284,16 +1284,16 @@ } }, "shared-components/accordion/thumbnails/style.js": { - "bundled": 11200, - "minified": 10980, - "gzipped": 2266, + "bundled": 11245, + "minified": 11025, + "gzipped": 2283, "treeshaked": { "rollup": { - "code": 884, + "code": 889, "import_statements": 190 }, "webpack": { - "code": 2040 + "code": 2045 } } }, diff --git a/src/shared-components/loadingSpinner/__snapshots__/test.tsx.snap b/src/shared-components/loadingSpinner/__snapshots__/test.tsx.snap index 9dfeb5eef..7724a017b 100644 --- a/src/shared-components/loadingSpinner/__snapshots__/test.tsx.snap +++ b/src/shared-components/loadingSpinner/__snapshots__/test.tsx.snap @@ -65,7 +65,7 @@ exports[` UI snapshots renders the correct css with custom pro display: block; height: 20px; width: 20px; - background-color: #FFFFFF; + background-color: #ffffff; border-radius: 50%; opacity: 0; -webkit-animation-name: animation-0; @@ -101,17 +101,17 @@ exports[` UI snapshots renders the correct css with custom pro > From 8e789ff7e6b12372aa60f413a79803ec3f84778a Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Tue, 27 Oct 2020 15:35:08 -0300 Subject: [PATCH 06/12] accept null as value --- src/shared-components/dropdown/desktopDropdown.tsx | 6 +++--- src/shared-components/dropdown/index.tsx | 8 ++++---- src/shared-components/dropdown/mobileDropdown.tsx | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/shared-components/dropdown/desktopDropdown.tsx b/src/shared-components/dropdown/desktopDropdown.tsx index 715ea2614..9f91e1fe2 100644 --- a/src/shared-components/dropdown/desktopDropdown.tsx +++ b/src/shared-components/dropdown/desktopDropdown.tsx @@ -27,7 +27,7 @@ type DesktopDropdownProps = { options: OptionType[]; optionsContainerMaxHeight: string; textAlign: 'left' | 'center'; - value?: string; + value?: string | number | null; }; export const DesktopDropdown = ({ @@ -94,7 +94,7 @@ export const DesktopDropdown = ({ isOpen={isOpen} optionsContainerMaxHeight={optionsContainerMaxHeight} role="menu" - aria-activedescendant={value} + aria-activedescendant={value as string} aria-hidden={!isOpen} > {options.map((option) => { @@ -106,7 +106,7 @@ export const DesktopDropdown = ({ ) => void; options: OptionType[]; textAlign: 'left' | 'center'; - value?: string | number; + value?: string | number | null; }; /** From e9ee08d59d4743cb29d9b9d8cf1c9b832b5bb484 Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Tue, 27 Oct 2020 15:36:48 -0300 Subject: [PATCH 07/12] udpate snapshot --- .size-snapshot.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/.size-snapshot.json b/.size-snapshot.json index 3db95fde0..9d594acae 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,13 +1,13 @@ { "bundle.js": { - "bundled": 1134588, - "minified": 1068360, - "gzipped": 102472 + "bundled": 1134614, + "minified": 1068395, + "gzipped": 102461 }, "bundle.umd.js": { - "bundled": 1143503, - "minified": 1043590, - "gzipped": 98381 + "bundled": 1143527, + "minified": 1043625, + "gzipped": 98369 }, "shared-components/chip/index.js": { "bundled": 867, @@ -500,9 +500,9 @@ } }, "shared-components/dropdown/index.js": { - "bundled": 3526, - "minified": 1751, - "gzipped": 760, + "bundled": 3504, + "minified": 1738, + "gzipped": 757, "treeshaked": { "rollup": { "code": 527, @@ -780,8 +780,8 @@ } }, "shared-components/dropdown/desktopDropdown.js": { - "bundled": 8930, - "minified": 7409, + "bundled": 8978, + "minified": 7457, "gzipped": 3158, "treeshaked": { "rollup": { From 1102695a305fa2ec64d6bbf6a1e0722bf28d4c44 Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Tue, 27 Oct 2020 15:39:54 -0300 Subject: [PATCH 08/12] Update src/shared-components/chip/style.ts Co-authored-by: Michael Altamirano --- src/shared-components/chip/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared-components/chip/style.ts b/src/shared-components/chip/style.ts index a2e22297d..6a860f5ad 100644 --- a/src/shared-components/chip/style.ts +++ b/src/shared-components/chip/style.ts @@ -14,7 +14,7 @@ export const ChipText = styled.span` `; const defaultStyle = css` - background-color: ${COLORS.disabled}; + background-color: ${COLORS.defaultBackground}; ${ChipText} { color: ${COLORS.primary}; } From 2f9c0cdc3f64b88a3cde4b92cf6fd391c47c0f9d Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Tue, 27 Oct 2020 17:58:07 -0300 Subject: [PATCH 09/12] dropdwon refactor --- .../dropdown/desktopDropdown.tsx | 26 +++++------ src/shared-components/dropdown/index.tsx | 46 +++++++++++-------- .../dropdown/mobileDropdown.tsx | 16 ++++--- src/shared-components/dropdown/test.tsx | 24 +++++----- src/utils/allowNullPropType/index.ts | 5 -- src/utils/allowNullPropType/test.tsx | 39 ---------------- stories/dropdown/index.stories.tsx | 11 +++-- 7 files changed, 68 insertions(+), 99 deletions(-) delete mode 100644 src/utils/allowNullPropType/index.ts delete mode 100644 src/utils/allowNullPropType/test.tsx diff --git a/src/shared-components/dropdown/desktopDropdown.tsx b/src/shared-components/dropdown/desktopDropdown.tsx index 9f91e1fe2..0ff802bbd 100644 --- a/src/shared-components/dropdown/desktopDropdown.tsx +++ b/src/shared-components/dropdown/desktopDropdown.tsx @@ -20,14 +20,14 @@ type DesktopDropdownProps = { closeDropdown: () => void; currentOption?: OptionType; isOpen: boolean; - onOptionClick: ( + onDesktopSelectChange: ( event: React.MouseEvent | React.KeyboardEvent, ) => void; - onSelectClick: () => void; options: OptionType[]; optionsContainerMaxHeight: string; textAlign: 'left' | 'center'; - value?: string | number | null; + toggleDropdown: () => void; + value?: string | number; }; export const DesktopDropdown = ({ @@ -35,11 +35,11 @@ export const DesktopDropdown = ({ closeDropdown, currentOption, isOpen, - onOptionClick, - onSelectClick, + onDesktopSelectChange, options, optionsContainerMaxHeight, textAlign, + toggleDropdown, value, }: DesktopDropdownProps) => { const { initialFocus, resetFocus } = useResetFocus(); @@ -47,14 +47,14 @@ export const DesktopDropdown = ({ const handleKeyDown = (event: React.KeyboardEvent) => { // This key handler allows users to open the dropdown options via the keyboard if (event.key === 'Enter') { - onSelectClick(); + toggleDropdown(); } }; const handleOptionKeydown = (event: React.KeyboardEvent) => { // This allows users to select an option via the enter key if (event.key === 'Enter') { - onOptionClick(event); + onDesktopSelectChange(event); resetFocus(); } }; @@ -68,7 +68,7 @@ export const DesktopDropdown = ({ > - {options.map((option) => { + {options.map((option, index) => { const { value: optionValue, disabled, label, ...rest } = option; return ( { + const toggleDropdown = () => { setIsOpen((prevIsOpen) => !prevIsOpen); }; const closeDropdown = () => setIsOpen(false); - const onSelectChange = (event: React.ChangeEvent) => { + const onMobileSelectChange = ( + event: React.ChangeEvent, + ) => { const { target } = event; const { value: nextValue, selectedOptions } = target; - if (selectedOptions && selectedOptions.length) { const { label } = selectedOptions[0]; onChange({ value: nextValue, label }); @@ -68,17 +68,27 @@ export const Dropdown = ({ closeDropdown(); }; - const onOptionClick = ( + const onDesktopSelectChange = ( event: React.MouseEvent | React.KeyboardEvent, ) => { - const target = event.currentTarget; - if (target.hasAttribute('disabled')) { + const { currentTarget } = event; + if (currentTarget.hasAttribute('disabled')) { return; } - const nextValue = target.getAttribute('value') as string; - const label = target.innerText; - onChange({ value: nextValue, label }); + // Next Value may be returned as null if the value of
  • is undefined. We want to cast to the real value of undefined + const nextValue = currentTarget.getAttribute('value') || undefined; + const selectedOption = options.find((option) => { + if (nextValue === undefined && option.value === undefined) { + return true; + } + // This covers numbers and strings.
  • value is always returned as string + return `${option.value}` === nextValue; + }); + + if (selectedOption) { + onChange(selectedOption); + } closeDropdown(); }; @@ -86,7 +96,7 @@ export const Dropdown = ({ return ( ); @@ -124,7 +134,5 @@ Dropdown.propTypes = { ).isRequired, optionsContainerMaxHeight: PropTypes.string, textAlign: PropTypes.oneOf(['left', 'center']), - value: allowNullPropType( - PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - ), + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }; diff --git a/src/shared-components/dropdown/mobileDropdown.tsx b/src/shared-components/dropdown/mobileDropdown.tsx index f2cbb4dce..475592511 100644 --- a/src/shared-components/dropdown/mobileDropdown.tsx +++ b/src/shared-components/dropdown/mobileDropdown.tsx @@ -7,10 +7,10 @@ import { OptionType } from '.'; type MobileDropdownProps = { borderRadius: string; - onSelectChange: (event: React.ChangeEvent) => void; + onMobileSelectChange: (event: React.ChangeEvent) => void; options: OptionType[]; textAlign: 'left' | 'center'; - value?: string | number | null; + value?: string | number; }; /** @@ -20,7 +20,7 @@ type MobileDropdownProps = { */ export const MobileDropdown = ({ borderRadius, - onSelectChange, + onMobileSelectChange, options, textAlign, value, @@ -33,9 +33,9 @@ export const MobileDropdown = ({ textAlign, })} value={value || ''} - onChange={onSelectChange} + onChange={onMobileSelectChange} > - {options.map((option) => { + {options.map((option, index) => { let isDisabled = option.disabled; // Covers the case where default value is disabled @@ -45,7 +45,11 @@ export const MobileDropdown = ({ } return ( - ); diff --git a/src/shared-components/dropdown/test.tsx b/src/shared-components/dropdown/test.tsx index 43537948e..5efbc516a 100644 --- a/src/shared-components/dropdown/test.tsx +++ b/src/shared-components/dropdown/test.tsx @@ -41,7 +41,7 @@ describe('', () => { const tree = renderer .create( undefined} + onMobileSelectChange={() => undefined} borderRadius="4px" options={options} textAlign="left" @@ -60,7 +60,7 @@ describe('', () => { , @@ -77,14 +77,14 @@ describe('', () => { const wrapper = shallow( undefined} currentOption={{ value: 'test1', label: 'Test1' }} + isOpen={false} + onDesktopSelectChange={() => undefined} + options={options} optionsContainerMaxHeight="250px" - onSelectClick={() => null} - closeDropdown={() => null} - onOptionClick={() => null} textAlign="left" - isOpen={false} + toggleDropdown={() => undefined} />, ); @@ -101,10 +101,10 @@ describe('', () => { borderRadius="4px" options={options} currentOption={{ value: 'test1', label: 'Test1' }} - onSelectClick={spy} + toggleDropdown={spy} optionsContainerMaxHeight="250px" - closeDropdown={() => null} - onOptionClick={() => null} + closeDropdown={() => undefined} + onDesktopSelectChange={() => undefined} textAlign="left" isOpen={false} />, @@ -123,10 +123,10 @@ describe('', () => { borderRadius="4px" options={options} currentOption={{ value: 'test1', label: 'Test1' }} - onOptionClick={spy} + onDesktopSelectChange={spy} isOpen optionsContainerMaxHeight="250px" - onSelectClick={() => null} + toggleDropdown={() => null} closeDropdown={() => null} textAlign="left" />, diff --git a/src/utils/allowNullPropType/index.ts b/src/utils/allowNullPropType/index.ts deleted file mode 100644 index 851cf55e7..000000000 --- a/src/utils/allowNullPropType/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default (wrapper: any) => ( - props: any, - propName: string, - ...rest: any[] -) => (props[propName] === null ? null : wrapper(props, propName, ...rest)); diff --git a/src/utils/allowNullPropType/test.tsx b/src/utils/allowNullPropType/test.tsx deleted file mode 100644 index 5d6bdf5bd..000000000 --- a/src/utils/allowNullPropType/test.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { shallow } from 'enzyme'; - -import allowNullPropType from './index'; - -type AllowedProps = { text?: string | null }; -const Test = ({ text }: AllowedProps) =>

    {text || 'Some text'}

    ; - -Test.propTypes = { - text: allowNullPropType(PropTypes.string.isRequired), -}; - -/* eslint-disable no-console */ - -describe('allowNullPropType', () => { - it('raises an error if no prop is passed in', () => { - console.error = jest.fn(); - shallow(); - - expect(console.error).toHaveBeenCalled(); - }); - - it('does not raise error with null prop', () => { - console.error = jest.fn(); - shallow(); - - expect(console.error).not.toHaveBeenCalled(); - }); - - it('does not raise error with normal prop', () => { - console.error = jest.fn(); - shallow(); - - expect(console.error).not.toHaveBeenCalled(); - }); -}); - -/* eslint-enable no-console */ diff --git a/stories/dropdown/index.stories.tsx b/stories/dropdown/index.stories.tsx index dad608ffe..4ce67e9f2 100644 --- a/stories/dropdown/index.stories.tsx +++ b/stories/dropdown/index.stories.tsx @@ -23,10 +23,10 @@ const DesktopContainer = styled(DropdownContainer)` `; const options = [ - { value: '1', label: 'First option' }, - { value: '2', label: 'Second option (disabled)', disabled: true }, - { value: '3', label: 'Third option' }, - { value: '4', label: 'Fourth option' }, + { value: 1, label: 'Number value' }, + { value: 2, label: 'Second option (disabled)', disabled: true }, + { value: undefined, label: 'Undefined value' }, + { value: '4', label: 'String value' }, ]; export const Desktop = () => { @@ -66,7 +66,8 @@ export const Mobile = () => { borderRadius="4px" value={selectedOption} options={options} - onSelectChange={onChange} + onMobileSelectChange={onChange} + textAlign="left" /> ); From 5179ca78ca34e215e39e086cebdf068ed369305b Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Wed, 28 Oct 2020 10:09:41 -0300 Subject: [PATCH 10/12] feedback changes --- src/shared-components/dropdown/desktopDropdown.tsx | 2 +- stories/dropdown/index.stories.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/shared-components/dropdown/desktopDropdown.tsx b/src/shared-components/dropdown/desktopDropdown.tsx index 0ff802bbd..2b22d2dff 100644 --- a/src/shared-components/dropdown/desktopDropdown.tsx +++ b/src/shared-components/dropdown/desktopDropdown.tsx @@ -94,7 +94,7 @@ export const DesktopDropdown = ({ isOpen={isOpen} optionsContainerMaxHeight={optionsContainerMaxHeight} role="menu" - aria-activedescendant={`${value}`} + aria-activedescendant={value ? `${value}` : undefined} aria-hidden={!isOpen} > {options.map((option, index) => { diff --git a/stories/dropdown/index.stories.tsx b/stories/dropdown/index.stories.tsx index 4ce67e9f2..7527a6231 100644 --- a/stories/dropdown/index.stories.tsx +++ b/stories/dropdown/index.stories.tsx @@ -23,10 +23,10 @@ const DesktopContainer = styled(DropdownContainer)` `; const options = [ - { value: 1, label: 'Number value' }, + { value: 1, label: 'First option' }, { value: 2, label: 'Second option (disabled)', disabled: true }, - { value: undefined, label: 'Undefined value' }, - { value: '4', label: 'String value' }, + { value: '3', label: 'Third option' }, + { value: '4', label: 'Fourth option' }, ]; export const Desktop = () => { From 9b1ea240c4f6ab7a6e8036c533d84c1d331769cf Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Wed, 28 Oct 2020 10:12:47 -0300 Subject: [PATCH 11/12] update snapshot --- .size-snapshot.json | 46 ++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/.size-snapshot.json b/.size-snapshot.json index 9d594acae..0e2d60d28 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,13 +1,13 @@ { "bundle.js": { - "bundled": 1134614, - "minified": 1068395, - "gzipped": 102461 + "bundled": 1134971, + "minified": 1068509, + "gzipped": 102542 }, "bundle.umd.js": { - "bundled": 1143527, - "minified": 1043625, - "gzipped": 98369 + "bundled": 1143870, + "minified": 1043787, + "gzipped": 98462 }, "shared-components/chip/index.js": { "bundled": 867, @@ -500,16 +500,16 @@ } }, "shared-components/dropdown/index.js": { - "bundled": 3504, - "minified": 1738, - "gzipped": 757, + "bundled": 3801, + "minified": 1702, + "gzipped": 738, "treeshaked": { "rollup": { - "code": 527, - "import_statements": 325 + "code": 474, + "import_statements": 275 }, "webpack": { - "code": 1653 + "code": 1555 } } }, @@ -668,16 +668,16 @@ } }, "shared-components/chip/style.js": { - "bundled": 16114, - "minified": 15713, - "gzipped": 2630, + "bundled": 16195, + "minified": 15794, + "gzipped": 2627, "treeshaked": { "rollup": { - "code": 1082, + "code": 1091, "import_statements": 251 }, "webpack": { - "code": 2316 + "code": 2325 } } }, @@ -780,9 +780,9 @@ } }, "shared-components/dropdown/desktopDropdown.js": { - "bundled": 8978, - "minified": 7457, - "gzipped": 3158, + "bundled": 9185, + "minified": 7615, + "gzipped": 3358, "treeshaked": { "rollup": { "code": 226, @@ -864,9 +864,9 @@ } }, "shared-components/dropdown/mobileDropdown.js": { - "bundled": 1437, - "minified": 668, - "gzipped": 379, + "bundled": 1492, + "minified": 700, + "gzipped": 400, "treeshaked": { "rollup": { "code": 96, From 4796e877be9e806b576f5816700fe1e85b9eebca Mon Sep 17 00:00:00 2001 From: Diego Fortes Date: Wed, 28 Oct 2020 11:27:08 -0300 Subject: [PATCH 12/12] reword prop comments --- src/shared-components/dropdown/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared-components/dropdown/index.tsx b/src/shared-components/dropdown/index.tsx index 88cda10d5..4d2056761 100644 --- a/src/shared-components/dropdown/index.tsx +++ b/src/shared-components/dropdown/index.tsx @@ -29,7 +29,7 @@ type DropdownProps = { optionsContainerMaxHeight?: string; textAlign?: 'left' | 'center'; /** - * The currently selected option. Can be initially `undefined` + * The currently selected option */ value?: string | number; };