From 02660c3c2c384c6159daa6fbc0e9f6aff88c69d7 Mon Sep 17 00:00:00 2001 From: Sami Korpela Date: Fri, 9 Jul 2021 15:24:01 +0300 Subject: [PATCH 1/5] Move implementations from the components level to core on LanguageMenu --- src/core/LanguageMenu/LanguageMenu.tsx | 159 +++++++++++++----- src/core/LanguageMenu/LanguageMenuItem.tsx | 5 +- .../LanguageMenu/LanguageMenuItemLanguage.tsx | 8 +- .../LanguageMenu/LanguageMenuLinkLanguage.tsx | 8 +- 4 files changed, 124 insertions(+), 56 deletions(-) diff --git a/src/core/LanguageMenu/LanguageMenu.tsx b/src/core/LanguageMenu/LanguageMenu.tsx index 9948d36cc..fdca680d4 100644 --- a/src/core/LanguageMenu/LanguageMenu.tsx +++ b/src/core/LanguageMenu/LanguageMenu.tsx @@ -1,22 +1,18 @@ import React, { Component, ReactNode, Fragment } from 'react'; import { default as styled } from 'styled-components'; import classnames from 'classnames'; -import { classnamesValue } from '../../utils/typescript'; -import { - LanguageMenu as CompLanguageMenu, - LanguageMenuProps as CompLanguageMenuProps, - LanguageMenuPopoverItemsProps, - MenuItems as CompMenuItems, - MenuPopover as CompMenuPopover, - MenuPopoverProps as CompMenuPopoverProps, - PRect, -} from '../../components/LanguageMenu/LanguageMenu'; import { - LanguageMenuItemLanguage, - LanguageMenuItemLanguageProps, - LanguageMenuLinkLanguage, - LanguageMenuLinkLanguageProps, -} from './LanguageMenuItem'; + Menu, + MenuButton, + MenuItems, + MenuPopover, + MenuPopoverProps, +} from '@reach/menu-button'; +import { positionDefault } from '@reach/popover'; +import { PRect } from '@reach/rect'; +import { classnamesValue } from '../../utils/typescript'; +import { logger } from '../../utils/logger'; +import { HtmlSpan } from '../../reset/HtmlSpan/HtmlSpan'; import { baseStyles, languageMenuPopoverStyles, @@ -24,6 +20,8 @@ import { import { Icon } from '../Icon/Icon'; +// TODO: class names object +const baseClassName = 'fi-language-menu'; const itemClassName = 'fi-language-menu_item'; const itemLangClassName = 'fi-language-menu-language_item'; const buttonClassName = 'fi-language-menu_button'; @@ -34,10 +32,103 @@ const popoverClassName = 'fi-language-menu_popover'; const popoverLangClassName = 'fi-language-menu-language_popover'; const iconLangClassName = 'fi-language-menu-language_icon'; -export interface LanguageMenuProps extends CompLanguageMenuProps {} +export interface LanguageMenuItemProps { + /** Operation to run on select */ + onSelect: () => void; + /** Item content */ + children: ReactNode; +} + +type SupportedMenuLinkComponent = keyof JSX.IntrinsicElements; + +interface LanguageMenuLinkPropsWithType { + type: 'menulink'; + /** Url to direct to */ + href: string; + /** Item content */ + children: ReactNode; + className?: string; + as?: SupportedMenuLinkComponent; +} + +export interface LanguageMenuLinkProps + extends Omit {} + +export type LanguageMenuPopoverItemsProps = + | LanguageMenuItemProps + | LanguageMenuLinkPropsWithType; +type OptionalLanguageMenuPopoverProps = { + [K in keyof MenuPopoverProps]?: MenuPopoverProps[K]; +}; + +export interface LanguageMenuProps { + /** Name or content of menubutton */ + name: React.ReactNode | ((props: { isOpen: boolean }) => React.ReactNode); + /** Custom classname to extend or customize */ + className?: string; + /** Custom classname to extend or customize */ + languageMenuButtonClassName?: string; + /** Custom classname to apply when menu is open */ + languageMenuOpenButtonClassName?: string; + /** Properties given to LanguageMenu's popover-component, className etc. */ + languageMenuPopoverProps?: OptionalLanguageMenuPopoverProps; + languageMenuPopoverComponent?: React.ComponentType; + /** Menu items: MenuItem or MenuLink */ + children?: + | Array> + | null + | undefined; +} +class BaseLanguageMenu extends Component { + render() { + const { + children, + name, + className, + languageMenuButtonClassName: menuButtonClassName, + languageMenuOpenButtonClassName: menuButtonOpenClassName, + languageMenuPopoverProps: menuPopoverProps = {}, + languageMenuPopoverComponent: MenuPopoverComponentReplace, + ...passProps + } = this.props; + + if (React.Children.count(children) < 1) { + logger.warn(`Menu '${name}' does not contain items`); + return null; + } + return ( + + + {({ isOpen }: { isOpen: boolean }) => ( + + + {name} + + {!!MenuPopoverComponentReplace ? ( + + {children} + + ) : ( + + {children} + + )} + + )} + + + ); + } +} const StyledLanguageMenu = styled((props: LanguageMenuProps) => ( - + ))` ${baseStyles} `; @@ -67,8 +158,6 @@ const languageName = (name: ReactNode) => ( ); -interface LanguageMenuPopoverProps extends CompMenuPopoverProps {} - const LanguageMenuPopoverPosition = ( targetRect: PRect | null, popoverRect: PRect | null, @@ -89,16 +178,20 @@ const LanguageMenuPopoverPosition = ( }; const StyledMenuPopover = styled( - ({ children, ...passProps }: LanguageMenuPopoverProps) => ( - - {children} - + ({ children, ...passProps }: MenuPopoverProps) => ( + + {children} + ), )` ${languageMenuPopoverStyles} `; -class LanguageMenuVariation extends Component { +/** + * + * Use for dropdown menu. + */ +export class LanguageMenu extends Component { render() { const { children, @@ -136,21 +229,3 @@ class LanguageMenuVariation extends Component { ); } } - -/** - * - * Use for dropdown menu. - */ -export class LanguageMenu extends Component { - static languageItem = (props: LanguageMenuItemLanguageProps) => ( - - ); - - static LinkLanguage = (props: LanguageMenuLinkLanguageProps) => ( - - ); - - render() { - return ; - } -} diff --git a/src/core/LanguageMenu/LanguageMenuItem.tsx b/src/core/LanguageMenu/LanguageMenuItem.tsx index d8645663b..9c3804989 100644 --- a/src/core/LanguageMenu/LanguageMenuItem.tsx +++ b/src/core/LanguageMenu/LanguageMenuItem.tsx @@ -1,8 +1,5 @@ import React, { Component } from 'react'; -import { - LanguageMenuItemProps, - LanguageMenuLinkProps, -} from '../../components/LanguageMenu/LanguageMenu'; +import { LanguageMenuItemProps, LanguageMenuLinkProps } from './LanguageMenu'; import { LanguageMenuItemLanguage, LanguageMenuItemLanguageProps, diff --git a/src/core/LanguageMenu/LanguageMenuItemLanguage.tsx b/src/core/LanguageMenu/LanguageMenuItemLanguage.tsx index 6a7664cae..cbfd9abbc 100644 --- a/src/core/LanguageMenu/LanguageMenuItemLanguage.tsx +++ b/src/core/LanguageMenu/LanguageMenuItemLanguage.tsx @@ -1,9 +1,7 @@ import React from 'react'; import classnames from 'classnames'; -import { - MenuItem as CompMenuItem, - LanguageMenuItemProps, -} from '../../components/LanguageMenu/LanguageMenu'; +import { MenuItem } from '@reach/menu-button'; +import { LanguageMenuItemProps } from './LanguageMenu'; export interface LanguageMenuItemLanguageProps extends LanguageMenuItemProps { /** Show item as selected one */ @@ -16,7 +14,7 @@ export const LanguageMenuItemLanguage = ({ className, ...passProps }: LanguageMenuItemLanguageProps) => ( - ( - Date: Mon, 12 Jul 2021 10:25:20 +0300 Subject: [PATCH 2/5] Change LanguageMenu component names and fix styleguidist config --- .styleguidist/styleguidist.sections.js | 4 +- src/core/LanguageMenu/LanguageMenu.test.tsx | 3 +- src/core/LanguageMenu/LanguageMenu.tsx | 6 +-- src/core/LanguageMenu/LanguageMenuItem.tsx | 47 ++++++++----------- .../LanguageMenu/LanguageMenuItemLanguage.tsx | 23 --------- ...enuItemLanguage.md => LanguageMenuLink.md} | 0 ...uLinkLanguage.tsx => LanguageMenuLink.tsx} | 8 ++-- .../LanguageMenu/LanguageMenuLinkLanguage.md | 0 src/core/LanguageMenu/index.tsx | 3 ++ src/index.tsx | 8 +--- 10 files changed, 35 insertions(+), 67 deletions(-) delete mode 100644 src/core/LanguageMenu/LanguageMenuItemLanguage.tsx rename src/core/LanguageMenu/{LanguageMenuItemLanguage.md => LanguageMenuLink.md} (100%) rename src/core/LanguageMenu/{LanguageMenuLinkLanguage.tsx => LanguageMenuLink.tsx} (63%) delete mode 100644 src/core/LanguageMenu/LanguageMenuLinkLanguage.md create mode 100644 src/core/LanguageMenu/index.tsx diff --git a/.styleguidist/styleguidist.sections.js b/.styleguidist/styleguidist.sections.js index cec5fad61..87ddfe225 100644 --- a/.styleguidist/styleguidist.sections.js +++ b/.styleguidist/styleguidist.sections.js @@ -134,8 +134,8 @@ module.exports = { { name: 'LanguageMenu', components: getComponentWithVariants('LanguageMenu')([ - 'LanguageMenuItemLanguage', - 'LanguageMenuLinkLanguage', + 'LanguageMenuItem', + 'LanguageMenuLink', ]), }, { diff --git a/src/core/LanguageMenu/LanguageMenu.test.tsx b/src/core/LanguageMenu/LanguageMenu.test.tsx index 353dca6f1..42d64bff7 100644 --- a/src/core/LanguageMenu/LanguageMenu.test.tsx +++ b/src/core/LanguageMenu/LanguageMenu.test.tsx @@ -2,7 +2,8 @@ import React from 'react'; import { render } from '@testing-library/react'; import { LanguageMenu } from './LanguageMenu'; -import { LanguageMenuItem, LanguageMenuLink } from './LanguageMenuItem'; +import { LanguageMenuItem } from './LanguageMenuItem'; +import { LanguageMenuLink } from './LanguageMenuLink'; import { axeTest } from '../../utils/test/axe'; const doNothing = () => ({}); diff --git a/src/core/LanguageMenu/LanguageMenu.tsx b/src/core/LanguageMenu/LanguageMenu.tsx index fdca680d4..63a13a011 100644 --- a/src/core/LanguageMenu/LanguageMenu.tsx +++ b/src/core/LanguageMenu/LanguageMenu.tsx @@ -32,7 +32,7 @@ const popoverClassName = 'fi-language-menu_popover'; const popoverLangClassName = 'fi-language-menu-language_popover'; const iconLangClassName = 'fi-language-menu-language_icon'; -export interface LanguageMenuItemProps { +export interface LanguageMenuItemBaseProps { /** Operation to run on select */ onSelect: () => void; /** Item content */ @@ -51,11 +51,11 @@ interface LanguageMenuLinkPropsWithType { as?: SupportedMenuLinkComponent; } -export interface LanguageMenuLinkProps +export interface LanguageMenuLinkBaseProps extends Omit {} export type LanguageMenuPopoverItemsProps = - | LanguageMenuItemProps + | LanguageMenuItemBaseProps | LanguageMenuLinkPropsWithType; type OptionalLanguageMenuPopoverProps = { [K in keyof MenuPopoverProps]?: MenuPopoverProps[K]; diff --git a/src/core/LanguageMenu/LanguageMenuItem.tsx b/src/core/LanguageMenu/LanguageMenuItem.tsx index 9c3804989..82b86171f 100644 --- a/src/core/LanguageMenu/LanguageMenuItem.tsx +++ b/src/core/LanguageMenu/LanguageMenuItem.tsx @@ -1,30 +1,23 @@ -import React, { Component } from 'react'; -import { LanguageMenuItemProps, LanguageMenuLinkProps } from './LanguageMenu'; -import { - LanguageMenuItemLanguage, - LanguageMenuItemLanguageProps, -} from './LanguageMenuItemLanguage'; -import { - LanguageMenuLinkLanguage, - LanguageMenuLinkLanguageProps, -} from './LanguageMenuLinkLanguage'; -export { - LanguageMenuItemProps, - LanguageMenuLinkProps, - LanguageMenuItemLanguage, - LanguageMenuItemLanguageProps, - LanguageMenuLinkLanguage, - LanguageMenuLinkLanguageProps, -}; +import React from 'react'; +import classnames from 'classnames'; +import { MenuItem } from '@reach/menu-button'; +import { LanguageMenuItemBaseProps } from './LanguageMenu'; -export class LanguageMenuItem extends Component { - render() { - return ; - } +export interface LanguageMenuItemProps extends LanguageMenuItemBaseProps { + /** Show item as selected one */ + selected?: boolean; + className?: string; } -export class LanguageMenuLink extends Component { - render() { - return ; - } -} +export const LanguageMenuItem = ({ + selected, + className, + ...passProps +}: LanguageMenuItemProps) => ( + +); diff --git a/src/core/LanguageMenu/LanguageMenuItemLanguage.tsx b/src/core/LanguageMenu/LanguageMenuItemLanguage.tsx deleted file mode 100644 index cbfd9abbc..000000000 --- a/src/core/LanguageMenu/LanguageMenuItemLanguage.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import classnames from 'classnames'; -import { MenuItem } from '@reach/menu-button'; -import { LanguageMenuItemProps } from './LanguageMenu'; - -export interface LanguageMenuItemLanguageProps extends LanguageMenuItemProps { - /** Show item as selected one */ - selected?: boolean; - className?: string; -} - -export const LanguageMenuItemLanguage = ({ - selected, - className, - ...passProps -}: LanguageMenuItemLanguageProps) => ( - -); diff --git a/src/core/LanguageMenu/LanguageMenuItemLanguage.md b/src/core/LanguageMenu/LanguageMenuLink.md similarity index 100% rename from src/core/LanguageMenu/LanguageMenuItemLanguage.md rename to src/core/LanguageMenu/LanguageMenuLink.md diff --git a/src/core/LanguageMenu/LanguageMenuLinkLanguage.tsx b/src/core/LanguageMenu/LanguageMenuLink.tsx similarity index 63% rename from src/core/LanguageMenu/LanguageMenuLinkLanguage.tsx rename to src/core/LanguageMenu/LanguageMenuLink.tsx index 133498035..913862b8f 100644 --- a/src/core/LanguageMenu/LanguageMenuLinkLanguage.tsx +++ b/src/core/LanguageMenu/LanguageMenuLink.tsx @@ -1,19 +1,19 @@ import React from 'react'; import classnames from 'classnames'; import { MenuLink } from '@reach/menu-button'; -import { LanguageMenuLinkProps } from './LanguageMenu'; +import { LanguageMenuLinkBaseProps } from './LanguageMenu'; -export interface LanguageMenuLinkLanguageProps extends LanguageMenuLinkProps { +export interface LanguageMenuLinkProps extends LanguageMenuLinkBaseProps { /** Show item as selected one */ selected?: boolean; className?: string; } -export const LanguageMenuLinkLanguage = ({ +export const LanguageMenuLink = ({ selected, className, ...passProps -}: LanguageMenuLinkLanguageProps) => ( +}: LanguageMenuLinkProps) => ( Date: Mon, 12 Jul 2021 10:40:01 +0300 Subject: [PATCH 3/5] Remove LanguageMenu and the whole components level --- src/components/LanguageMenu/LanguageMenu.tsx | 114 ------------------- src/components/README.md | 1 - src/components/index.ts | 9 -- 3 files changed, 124 deletions(-) delete mode 100644 src/components/LanguageMenu/LanguageMenu.tsx delete mode 100644 src/components/README.md delete mode 100644 src/components/index.ts diff --git a/src/components/LanguageMenu/LanguageMenu.tsx b/src/components/LanguageMenu/LanguageMenu.tsx deleted file mode 100644 index 297d1b6f6..000000000 --- a/src/components/LanguageMenu/LanguageMenu.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import React, { Component, ReactNode, Fragment } from 'react'; -import classnames from 'classnames'; -import { HtmlSpan } from '../../reset/HtmlSpan/HtmlSpan'; -import { - Menu, - MenuButton, - MenuItems, - MenuItem, - MenuLink, - MenuPopover, - MenuPopoverProps, -} from '@reach/menu-button'; -import { positionDefault } from '@reach/popover'; -import { PRect } from '@reach/rect'; -import { logger } from '../../utils/logger'; - -export { MenuItems, MenuItem, MenuLink, MenuPopover, MenuPopoverProps, PRect }; - -const baseClassName = 'fi-language-menu'; -export interface LanguageMenuItemProps { - /** Operation to run on select */ - onSelect: () => void; - /** Item content */ - children: ReactNode; -} - -type SupportedMenuLinkComponent = keyof JSX.IntrinsicElements; - -interface LanguageMenuLinkPropsWithType { - type: 'menulink'; - /** Url to direct to */ - href: string; - /** Item content */ - children: ReactNode; - className?: string; - as?: SupportedMenuLinkComponent; -} - -export interface LanguageMenuLinkProps - extends Omit {} - -export type LanguageMenuPopoverItemsProps = - | LanguageMenuItemProps - | LanguageMenuLinkPropsWithType; -type OptionalLanguageMenuPopoverProps = { - [K in keyof MenuPopoverProps]?: MenuPopoverProps[K]; -}; - -export interface LanguageMenuProps { - /** Name or content of menubutton */ - name: React.ReactNode | ((props: { isOpen: boolean }) => React.ReactNode); - /** Custom classname to extend or customize */ - className?: string; - /** Custom classname to extend or customize */ - languageMenuButtonClassName?: string; - /** Custom classname to apply when menu is open */ - languageMenuOpenButtonClassName?: string; - /** Properties given to LanguageMenu's popover-component, className etc. */ - languageMenuPopoverProps?: OptionalLanguageMenuPopoverProps; - languageMenuPopoverComponent?: React.ComponentType; - /** Menu items: MenuItem or MenuLink */ - children?: - | Array> - | null - | undefined; -} - -export class LanguageMenu extends Component { - render() { - const { - children, - name, - className, - languageMenuButtonClassName: menuButtonClassName, - languageMenuOpenButtonClassName: menuButtonOpenClassName, - languageMenuPopoverProps: menuPopoverProps = {}, - languageMenuPopoverComponent: MenuPopoverComponentReplace, - ...passProps - } = this.props; - - if (React.Children.count(children) < 1) { - logger.warn(`Menu '${name}' does not contain items`); - return null; - } - return ( - - - {({ isOpen }: { isOpen: boolean }) => ( - - - {name} - - {!!MenuPopoverComponentReplace ? ( - - {children} - - ) : ( - - {children} - - )} - - )} - - - ); - } -} diff --git a/src/components/README.md b/src/components/README.md deleted file mode 100644 index e647d154d..000000000 --- a/src/components/README.md +++ /dev/null @@ -1 +0,0 @@ -# VRK suomifi-ui-components diff --git a/src/components/index.ts b/src/components/index.ts deleted file mode 100644 index f800e1cb1..000000000 --- a/src/components/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { - LanguageMenu, - LanguageMenuProps, - LanguageMenuPopoverItemsProps, - LanguageMenuItemProps, - LanguageMenuLinkProps as MenuLinkProps, - MenuItem, - MenuLink, -} from './LanguageMenu/LanguageMenu'; From 911968a00e631fefaa6552e8a075b19b897b9ddb Mon Sep 17 00:00:00 2001 From: Sami Korpela Date: Mon, 12 Jul 2021 11:19:00 +0300 Subject: [PATCH 4/5] Change to use class names from object to be more consistent And to help possible future changes to naming of class names. --- src/core/LanguageMenu/LanguageMenu.tsx | 40 +++++++++++++++----------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/src/core/LanguageMenu/LanguageMenu.tsx b/src/core/LanguageMenu/LanguageMenu.tsx index 63a13a011..6b31d3eec 100644 --- a/src/core/LanguageMenu/LanguageMenu.tsx +++ b/src/core/LanguageMenu/LanguageMenu.tsx @@ -20,17 +20,17 @@ import { import { Icon } from '../Icon/Icon'; -// TODO: class names object const baseClassName = 'fi-language-menu'; -const itemClassName = 'fi-language-menu_item'; -const itemLangClassName = 'fi-language-menu-language_item'; -const buttonClassName = 'fi-language-menu_button'; -const buttonOpenClassName = 'fi-language-menu-language_button_open'; -const buttonLangClassName = 'fi-language-menu-language_button'; - -const popoverClassName = 'fi-language-menu_popover'; -const popoverLangClassName = 'fi-language-menu-language_popover'; -const iconLangClassName = 'fi-language-menu-language_icon'; +const languageMenuClassNames = { + item: `${baseClassName}_item`, + itemLang: `${baseClassName}-language_item`, + button: `${baseClassName}_button`, + buttonOpen: `${baseClassName}-language_button_open`, + buttonLang: `${baseClassName}-language_button`, + popover: `${baseClassName}_popover`, + popoverLang: `${baseClassName}-language_popover`, + iconLang: `${baseClassName}-language_icon`, +}; export interface LanguageMenuItemBaseProps { /** Operation to run on select */ @@ -144,7 +144,7 @@ const LanguageMenuPopoverWithProps = ( if (React.isValidElement(child)) { return React.cloneElement(child, { as: 'a', - className: classnames(itemClassName, addClass), + className: classnames(languageMenuClassNames.item, addClass), }); } return child; @@ -154,7 +154,7 @@ const LanguageMenuPopoverWithProps = ( const languageName = (name: ReactNode) => ( {name} - + ); @@ -201,12 +201,15 @@ export class LanguageMenu extends Component { ...passProps } = this.props; const languageMenuButtonClassName = classnames( - buttonClassName, - buttonLangClassName, + languageMenuClassNames.button, + languageMenuClassNames.buttonLang, className, ); const menuPopoverProps = { - className: classnames(popoverClassName, popoverLangClassName), + className: classnames( + languageMenuClassNames.popover, + languageMenuClassNames.popoverLang, + ), }; return ( @@ -215,7 +218,7 @@ export class LanguageMenu extends Component { {...passProps} name={languageName(name)} languageMenuButtonClassName={languageMenuButtonClassName} - languageMenuOpenButtonClassName={buttonOpenClassName} + languageMenuOpenButtonClassName={languageMenuClassNames.buttonOpen} languageMenuPopoverProps={menuPopoverProps} languageMenuPopoverComponent={ !!MenuPopoverComponentProp @@ -223,7 +226,10 @@ export class LanguageMenu extends Component { : StyledMenuPopover } > - {LanguageMenuPopoverWithProps(children, itemLangClassName)} + {LanguageMenuPopoverWithProps( + children, + languageMenuClassNames.itemLang, + )} ); From eea2494e082eb8c5f1884c56fbdf982cd9c5db99 Mon Sep 17 00:00:00 2001 From: Sami Korpela Date: Mon, 12 Jul 2021 15:50:46 +0300 Subject: [PATCH 5/5] Move LanguageMenu components to subfolders and add indexes --- .styleguidist/styleguidist.sections.js | 5 +++-- .../{ => LanguageMenu}/LanguageMenu.baseStyles.tsx | 6 +++--- src/core/LanguageMenu/{ => LanguageMenu}/LanguageMenu.md | 0 .../{ => LanguageMenu}/LanguageMenu.test.tsx | 6 +++--- .../LanguageMenu/{ => LanguageMenu}/LanguageMenu.tsx | 9 ++++----- .../__snapshots__/LanguageMenu.test.tsx.snap | 0 src/core/LanguageMenu/LanguageMenu/index.tsx | 6 ++++++ .../{ => LanguageMenuItem}/LanguageMenuItem.md | 0 .../{ => LanguageMenuItem}/LanguageMenuItem.tsx | 2 +- src/core/LanguageMenu/LanguageMenuItem/index.tsx | 1 + .../{ => LanguageMenuLink}/LanguageMenuLink.md | 0 .../{ => LanguageMenuLink}/LanguageMenuLink.tsx | 2 +- src/core/LanguageMenu/LanguageMenuLink/index.tsx | 1 + 13 files changed, 23 insertions(+), 15 deletions(-) rename src/core/LanguageMenu/{ => LanguageMenu}/LanguageMenu.baseStyles.tsx (95%) rename src/core/LanguageMenu/{ => LanguageMenu}/LanguageMenu.md (100%) rename src/core/LanguageMenu/{ => LanguageMenu}/LanguageMenu.test.tsx (84%) rename src/core/LanguageMenu/{ => LanguageMenu}/LanguageMenu.tsx (96%) rename src/core/LanguageMenu/{ => LanguageMenu}/__snapshots__/LanguageMenu.test.tsx.snap (100%) create mode 100644 src/core/LanguageMenu/LanguageMenu/index.tsx rename src/core/LanguageMenu/{ => LanguageMenuItem}/LanguageMenuItem.md (100%) rename src/core/LanguageMenu/{ => LanguageMenuItem}/LanguageMenuItem.tsx (89%) create mode 100644 src/core/LanguageMenu/LanguageMenuItem/index.tsx rename src/core/LanguageMenu/{ => LanguageMenuLink}/LanguageMenuLink.md (100%) rename src/core/LanguageMenu/{ => LanguageMenuLink}/LanguageMenuLink.tsx (89%) create mode 100644 src/core/LanguageMenu/LanguageMenuLink/index.tsx diff --git a/.styleguidist/styleguidist.sections.js b/.styleguidist/styleguidist.sections.js index 87ddfe225..9403cc076 100644 --- a/.styleguidist/styleguidist.sections.js +++ b/.styleguidist/styleguidist.sections.js @@ -134,8 +134,9 @@ module.exports = { { name: 'LanguageMenu', components: getComponentWithVariants('LanguageMenu')([ - 'LanguageMenuItem', - 'LanguageMenuLink', + 'LanguageMenu/LanguageMenu', + 'LanguageMenuItem/LanguageMenuItem', + 'LanguageMenuLink/LanguageMenuLink', ]), }, { diff --git a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx b/src/core/LanguageMenu/LanguageMenu/LanguageMenu.baseStyles.tsx similarity index 95% rename from src/core/LanguageMenu/LanguageMenu.baseStyles.tsx rename to src/core/LanguageMenu/LanguageMenu/LanguageMenu.baseStyles.tsx index bca353cde..9a17c6f58 100644 --- a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx +++ b/src/core/LanguageMenu/LanguageMenu/LanguageMenu.baseStyles.tsx @@ -1,7 +1,7 @@ import { css } from 'styled-components'; -import { defaultThemeTokens as theme } from '../theme'; -import { element } from '../theme/reset'; -import { absoluteFocus } from '../theme/utils/focus'; +import { defaultThemeTokens as theme } from '../../theme'; +import { element } from '../../theme/reset'; +import { absoluteFocus } from '../../theme/utils/focus'; export const baseStyles = css` & > [data-reach-menu-button].fi-language-menu_button { diff --git a/src/core/LanguageMenu/LanguageMenu.md b/src/core/LanguageMenu/LanguageMenu/LanguageMenu.md similarity index 100% rename from src/core/LanguageMenu/LanguageMenu.md rename to src/core/LanguageMenu/LanguageMenu/LanguageMenu.md diff --git a/src/core/LanguageMenu/LanguageMenu.test.tsx b/src/core/LanguageMenu/LanguageMenu/LanguageMenu.test.tsx similarity index 84% rename from src/core/LanguageMenu/LanguageMenu.test.tsx rename to src/core/LanguageMenu/LanguageMenu/LanguageMenu.test.tsx index 42d64bff7..8753b56fa 100644 --- a/src/core/LanguageMenu/LanguageMenu.test.tsx +++ b/src/core/LanguageMenu/LanguageMenu/LanguageMenu.test.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { render } from '@testing-library/react'; +import { axeTest } from '../../../utils/test/axe'; import { LanguageMenu } from './LanguageMenu'; -import { LanguageMenuItem } from './LanguageMenuItem'; -import { LanguageMenuLink } from './LanguageMenuLink'; -import { axeTest } from '../../utils/test/axe'; +import { LanguageMenuItem } from '../LanguageMenuItem'; +import { LanguageMenuLink } from '../LanguageMenuLink'; const doNothing = () => ({}); diff --git a/src/core/LanguageMenu/LanguageMenu.tsx b/src/core/LanguageMenu/LanguageMenu/LanguageMenu.tsx similarity index 96% rename from src/core/LanguageMenu/LanguageMenu.tsx rename to src/core/LanguageMenu/LanguageMenu/LanguageMenu.tsx index 6b31d3eec..c91418645 100644 --- a/src/core/LanguageMenu/LanguageMenu.tsx +++ b/src/core/LanguageMenu/LanguageMenu/LanguageMenu.tsx @@ -10,16 +10,15 @@ import { } from '@reach/menu-button'; import { positionDefault } from '@reach/popover'; import { PRect } from '@reach/rect'; -import { classnamesValue } from '../../utils/typescript'; -import { logger } from '../../utils/logger'; -import { HtmlSpan } from '../../reset/HtmlSpan/HtmlSpan'; +import { classnamesValue } from '../../../utils/typescript'; +import { logger } from '../../../utils/logger'; +import { HtmlSpan } from '../../../reset/HtmlSpan/HtmlSpan'; +import { Icon } from '../../Icon/Icon'; import { baseStyles, languageMenuPopoverStyles, } from './LanguageMenu.baseStyles'; -import { Icon } from '../Icon/Icon'; - const baseClassName = 'fi-language-menu'; const languageMenuClassNames = { item: `${baseClassName}_item`, diff --git a/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/src/core/LanguageMenu/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap similarity index 100% rename from src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap rename to src/core/LanguageMenu/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap diff --git a/src/core/LanguageMenu/LanguageMenu/index.tsx b/src/core/LanguageMenu/LanguageMenu/index.tsx new file mode 100644 index 000000000..00f4bed22 --- /dev/null +++ b/src/core/LanguageMenu/LanguageMenu/index.tsx @@ -0,0 +1,6 @@ +export { + LanguageMenu, + LanguageMenuProps, + LanguageMenuItemBaseProps, + LanguageMenuLinkBaseProps, +} from './LanguageMenu'; diff --git a/src/core/LanguageMenu/LanguageMenuItem.md b/src/core/LanguageMenu/LanguageMenuItem/LanguageMenuItem.md similarity index 100% rename from src/core/LanguageMenu/LanguageMenuItem.md rename to src/core/LanguageMenu/LanguageMenuItem/LanguageMenuItem.md diff --git a/src/core/LanguageMenu/LanguageMenuItem.tsx b/src/core/LanguageMenu/LanguageMenuItem/LanguageMenuItem.tsx similarity index 89% rename from src/core/LanguageMenu/LanguageMenuItem.tsx rename to src/core/LanguageMenu/LanguageMenuItem/LanguageMenuItem.tsx index 82b86171f..6005375e0 100644 --- a/src/core/LanguageMenu/LanguageMenuItem.tsx +++ b/src/core/LanguageMenu/LanguageMenuItem/LanguageMenuItem.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classnames from 'classnames'; import { MenuItem } from '@reach/menu-button'; -import { LanguageMenuItemBaseProps } from './LanguageMenu'; +import { LanguageMenuItemBaseProps } from '../LanguageMenu'; export interface LanguageMenuItemProps extends LanguageMenuItemBaseProps { /** Show item as selected one */ diff --git a/src/core/LanguageMenu/LanguageMenuItem/index.tsx b/src/core/LanguageMenu/LanguageMenuItem/index.tsx new file mode 100644 index 000000000..dfbeea9a4 --- /dev/null +++ b/src/core/LanguageMenu/LanguageMenuItem/index.tsx @@ -0,0 +1 @@ +export { LanguageMenuItem, LanguageMenuItemProps } from './LanguageMenuItem'; diff --git a/src/core/LanguageMenu/LanguageMenuLink.md b/src/core/LanguageMenu/LanguageMenuLink/LanguageMenuLink.md similarity index 100% rename from src/core/LanguageMenu/LanguageMenuLink.md rename to src/core/LanguageMenu/LanguageMenuLink/LanguageMenuLink.md diff --git a/src/core/LanguageMenu/LanguageMenuLink.tsx b/src/core/LanguageMenu/LanguageMenuLink/LanguageMenuLink.tsx similarity index 89% rename from src/core/LanguageMenu/LanguageMenuLink.tsx rename to src/core/LanguageMenu/LanguageMenuLink/LanguageMenuLink.tsx index 913862b8f..78ab09eb1 100644 --- a/src/core/LanguageMenu/LanguageMenuLink.tsx +++ b/src/core/LanguageMenu/LanguageMenuLink/LanguageMenuLink.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classnames from 'classnames'; import { MenuLink } from '@reach/menu-button'; -import { LanguageMenuLinkBaseProps } from './LanguageMenu'; +import { LanguageMenuLinkBaseProps } from '../LanguageMenu'; export interface LanguageMenuLinkProps extends LanguageMenuLinkBaseProps { /** Show item as selected one */ diff --git a/src/core/LanguageMenu/LanguageMenuLink/index.tsx b/src/core/LanguageMenu/LanguageMenuLink/index.tsx new file mode 100644 index 000000000..b4f6294bd --- /dev/null +++ b/src/core/LanguageMenu/LanguageMenuLink/index.tsx @@ -0,0 +1 @@ +export { LanguageMenuLink, LanguageMenuLinkProps } from './LanguageMenuLink';