diff --git a/.github/workflows/pc-update.yml b/.github/workflows/pc-update.yml index 4ebf75c23..cac69934e 100644 --- a/.github/workflows/pc-update.yml +++ b/.github/workflows/pc-update.yml @@ -1,9 +1,8 @@ - name: Publiccode.yml update on: schedule: - - cron: '30 17 * * *' + - cron: '30 17 * * *' workflow_dispatch: @@ -21,5 +20,5 @@ jobs: uses: peter-evans/create-pull-request@v3 if: failure() with: - title: "chore: update software version ${{ steps.pva.outputs.version }} and date in publiccode.yml" + title: 'chore: update software version ${{ steps.pva.outputs.version }} and date in publiccode.yml' branch: feature/publiccode-${{ steps.pva.outputs.version }} diff --git a/CHANGELOG.md b/CHANGELOG.md index cc2333f4d..eabbf7e50 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,4 +38,3 @@ * numeric input component ([d4a299c](https://github.com/italia/design-react-kit/commit/d4a299cb43ad138352deab45d552bd33a3be3b19)) - diff --git a/README.EN.md b/README.EN.md index 72fe6503b..d03b726f3 100644 --- a/README.EN.md +++ b/README.EN.md @@ -126,9 +126,9 @@ yarn install react react-dom 👉🏻 You can contribute to the library in various ways: -* With your own code, taking charge of an issue among those open and not already assigned among [the issues](https://github.com/italia/design-react-kit/issues) of React Kit (even a comment on the issue to notify the desire to take charge). -* By reporting bugs or improvements to the React Kit [official repository](https://github.com/italia/design-react-kit/). -* By writing to us on the [dedicated channel](https://developersitalia.slack.com/messages/C04J92F9XM2/) of Slack. +- With your own code, taking charge of an issue among those open and not already assigned among [the issues](https://github.com/italia/design-react-kit/issues) of React Kit (even a comment on the issue to notify the desire to take charge). +- By reporting bugs or improvements to the React Kit [official repository](https://github.com/italia/design-react-kit/). +- By writing to us on the [dedicated channel](https://developersitalia.slack.com/messages/C04J92F9XM2/) of Slack. ## How to contribute with your own code diff --git a/README.md b/README.md index bc53fb323..b8ca7f4d6 100644 --- a/README.md +++ b/README.md @@ -126,14 +126,14 @@ yarn install react react-dom 👉🏻 È possibile contribuire alla libreria in vari modi: -* Con il proprio codice, prendendo in carico una issue tra quelle aperte e non già assegnate tra [le issue](https://github.com/italia/design-react-kit/issues) di React Kit (è sufficiente anche un commento sulla issue per notificare la volontà di presa in carico). -* Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-react-kit/) di React Kit. -* Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04J92F9XM2/) di Slack. +- Con il proprio codice, prendendo in carico una issue tra quelle aperte e non già assegnate tra [le issue](https://github.com/italia/design-react-kit/issues) di React Kit (è sufficiente anche un commento sulla issue per notificare la volontà di presa in carico). +- Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-react-kit/) di React Kit. +- Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04J92F9XM2/) di Slack. ## Come contribuire con il codice Vorresti dare una mano su Design React Kit? **Sei nel posto giusto!** - + Se non l'hai già fatto, inizia spendendo qualche minuto per approfondire la tua conoscenza sulle [linee guida di design per i servizi web della PA](https://design-italia.readthedocs.io/it/stable/index.html), e fai riferimento alle [indicazioni su come contribuire a Design React Kit](https://github.com/italia/design-react-kit/blob/main/CONTRIBUTING.md). @@ -146,11 +146,11 @@ I requisiti minimi del tuo ambiente locale devono essere: - Yarn Clona il repository ed esegui `yarn` per installare le dipendenze. -Quindi esegui +Quindi esegui ```sh yarn storybook:serve -``` +``` per avviare il server di sviluppo. diff --git a/src/Dropdown/Dropdown.tsx b/src/Dropdown/Dropdown.tsx new file mode 100644 index 000000000..e74b34839 --- /dev/null +++ b/src/Dropdown/Dropdown.tsx @@ -0,0 +1,35 @@ +import React, { ElementType, FC, HTMLAttributes } from 'react'; +import classNames from 'classnames'; + +export interface DropdownProps extends HTMLAttributes { + tag?: ElementType; + inNavbar?: boolean; + textCenter?: boolean; + /** Classi aggiuntive da usare per il componente Button */ + className?: string; + testId?: string; +} + +export const Dropdown: FC = ({ + className, + testId, + tag, + children, + inNavbar, + textCenter, + ...attributes +}) => { + const classes = classNames(className, { + dropdown: true, + 'text-center': textCenter, + 'nav-item': inNavbar + }); + + const Tag = tag !== undefined ? tag : 'div'; + + return ( + + {children} + + ); +}; diff --git a/src/Dropdown/DropdownMenu.tsx b/src/Dropdown/DropdownMenu.tsx new file mode 100644 index 000000000..fdbe5509e --- /dev/null +++ b/src/Dropdown/DropdownMenu.tsx @@ -0,0 +1,20 @@ +import React, { FC, HTMLAttributes } from 'react'; +import classNames from 'classnames'; + +export interface DropdownMenuProps extends HTMLAttributes { + /** Classi aggiuntive da usare per il componente Button */ + className?: string; + testId?: string; +} + +export const DropdownMenu: FC = ({ className, testId, children, ...attributes }) => { + const classes = classNames(className, { + 'dropdown-menu': true + }); + + return ( +
+ {children} +
+ ); +}; diff --git a/src/Dropdown/DropdownToggle.tsx b/src/Dropdown/DropdownToggle.tsx new file mode 100644 index 000000000..e2a0096b2 --- /dev/null +++ b/src/Dropdown/DropdownToggle.tsx @@ -0,0 +1,63 @@ +import React, { ElementType, FC, HTMLAttributes, useEffect, useRef } from 'react'; +import classNames from 'classnames'; +import { Dropdown } from 'bootstrap-italia'; +import { Icon } from '../Icon/Icon'; +import { Button } from '../Button/Button'; + +export interface DropdownToggleProps extends HTMLAttributes { + caret?: boolean; + tag?: ElementType; + color?: string; + inNavbar?: boolean; + /** Classi aggiuntive da usare per il componente Button */ + className?: string; + testId?: string; +} + +export const DropdownToggle: FC = ({ + className, + testId, + children, + caret, + tag = 'button', + inNavbar, + color, + ...attributes +}) => { + const toggleRef = useRef(null); + + const Tag = tag === 'a' || inNavbar ? 'a' : Button; + + useEffect(() => { + if (toggleRef.current) { + new Dropdown(toggleRef.current as HTMLAnchorElement & HTMLButtonElement); + } + }); + const classes = classNames(className, { + 'btn-dropdown': Tag === 'a' && !inNavbar, + 'dropdown-toggle': true, + 'nav-link': inNavbar + }); + const iconClasses = classNames({ + 'icon-expand': true, + 'icon-sm': !inNavbar, + 'icon-xs': inNavbar, + 'ms-1': inNavbar, + 'icon-light': Tag.valueOf() !== 'a' ? true : false + }); + return ( + + {children} + {caret === true ? : null} + + ); +}; diff --git a/src/Megamenu/MegamenuItem.tsx b/src/Megamenu/MegamenuItem.tsx index 5394af400..6ead4555e 100644 --- a/src/Megamenu/MegamenuItem.tsx +++ b/src/Megamenu/MegamenuItem.tsx @@ -1,38 +1,28 @@ -import React, { FC, HTMLAttributes, useRef } from 'react'; -import { DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap'; +import React, { FC, HTMLAttributes } from 'react'; +import { Dropdown } from '../Dropdown/Dropdown'; +import { DropdownMenu } from '../Dropdown/DropdownMenu'; +import { DropdownToggle } from '../Dropdown/DropdownToggle'; import classNames from 'classnames'; -import { Icon } from '../Icon/Icon'; export interface MegamenuItemProps extends HTMLAttributes { /** Etichetta del megamenu visibile all'interno della barra di navigazione */ itemName: string; - /** Classi aggiuntive da usare per il componente UncontrolledDropdown */ + /** Classi aggiuntive da usare per il componente Dropdown */ className?: string; } export const MegamenuItem: FC = ({ itemName, className, children, ...attributes }) => { const classes = classNames(className, 'megamenu'); - const [isOpen, setShowButton] = React.useState(false); - const toggleRef = useRef(null); - const toggleClasses = classNames('px-lg-2', 'px-xl-3', { - show: isOpen - }); - const setMegamenuButtonClass = () => { - //setShowButton(contact); - if (toggleRef && toggleRef.current) { - setShowButton(toggleRef.current.context.isOpen); - } - }; + const toggleClasses = classNames('px-lg-2', 'px-xl-3'); return ( - - + + {itemName} -
{children}
 - + ); }; diff --git a/src/index.tsx b/src/index.tsx index 8ddbbfefe..7638dee5d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -8,13 +8,8 @@ export { NavItem, NavLink, BreadcrumbItem, - ButtonDropdown, ButtonGroup, ButtonToolbar, - Dropdown, - DropdownItem, - DropdownMenu, - DropdownToggle, Fade, CardLink, CardGroup, @@ -47,9 +42,7 @@ export { ListGroupItemText, ListGroupItemHeading, UncontrolledAlert, - UncontrolledButtonDropdown, UncontrolledCollapse, - UncontrolledDropdown, UncontrolledTooltip, Util } from 'reactstrap'; @@ -88,6 +81,9 @@ export { CardSignature } from './Card/CardSignature'; export { CardFooterCTA } from './Card/CardFooterCTA'; export { CardReadMore } from './Card/CardReadMore'; export { Collapse } from './Collapse/Collapse'; +export { DropdownMenu } from './Dropdown/DropdownMenu'; +export { DropdownToggle } from './Dropdown/DropdownToggle'; +export { Dropdown } from './Dropdown/Dropdown'; export { GridItem, GridItemText, GridItemTextWrapper, GridList, GridRow } from './Grid/index'; export { Header } from './Header/Header'; export { Headers } from './Header/Headers'; @@ -176,6 +172,9 @@ export type { CardTagsHeaderProps } from './Card/CardTagsHeader'; export type { CardSignatureProps } from './Card/CardSignature'; export type { CardFooterCTAProps } from './Card/CardFooterCTA'; export type { CardReadMoreProps } from './Card/CardReadMore'; +export { DropdownMenuProps } from './Dropdown/DropdownMenu'; +export { DropdownToggleProps } from './Dropdown/DropdownToggle'; +export { DropdownProps } from './Dropdown/Dropdown'; export type { GridItemProps, GridItemTextProps, @@ -259,10 +258,6 @@ export type { ButtonDropdownProps, ButtonGroupProps, ButtonToolbarProps, - DropdownProps, - DropdownItemProps, - DropdownMenuProps, - DropdownToggleProps, FadeProps, CardLinkProps, CardGroupProps, @@ -295,9 +290,7 @@ export type { ListGroupItemTextProps, ListGroupItemHeadingProps, UncontrolledAlertProps, - UncontrolledButtonDropdownProps, UncontrolledCollapseProps, - UncontrolledDropdownProps, UncontrolledTooltipProps } from 'reactstrap'; export type { useNavScrollArgs, useNavScrollResult, RegisterOptions, ChangesType } from 'react-use-navscroll'; diff --git a/stories/Avatar/AvatarGroupsOverlapping.stories.tsx b/stories/Avatar/AvatarGroupsOverlapping.stories.tsx index af7dd4fe6..26d62e061 100644 --- a/stories/Avatar/AvatarGroupsOverlapping.stories.tsx +++ b/stories/Avatar/AvatarGroupsOverlapping.stories.tsx @@ -5,7 +5,7 @@ import { AvatarGroupContainer, Icon, LinkListItem, - UncontrolledDropdown, + Dropdown, LinkList, DropdownMenu, DropdownToggle @@ -65,16 +65,8 @@ export const SmallOverlappingAvatars = () => {
  • - - +
    • @@ -145,16 +137,8 @@ export const MediumOverlaidAvatars = () => {
  • - - +
    • diff --git a/stories/Dropdown/Dropdown.stories.tsx b/stories/Dropdown/Dropdown.stories.tsx index 5bbeddb90..5d64eea7f 100644 --- a/stories/Dropdown/Dropdown.stories.tsx +++ b/stories/Dropdown/Dropdown.stories.tsx @@ -1,15 +1,11 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem, LinkList, LinkListItem, ButtonGroup } from '../../src'; +import { Dropdown, DropdownMenu, DropdownToggle, LinkList, LinkListItem, ButtonGroup } from '../../src'; export const _VarianteBottoni = () => { - const [openFirst, toggleFirst] = useState(false); - const [openSecond, toggleSecond] = useState(false); - const [openThird, toggleThird] = useState(false); - return ( - toggleFirst(!openFirst)}> + Apri dropdown @@ -21,7 +17,7 @@ export const _VarianteBottoni = () => { - toggleSecond(!openSecond)}> + Apri dropdown @@ -33,7 +29,7 @@ export const _VarianteBottoni = () => { - toggleThird(!openThird)}> + Apri dropdown @@ -54,11 +50,9 @@ export default { }; export const _Esempi = () => { - const [open, toggle] = useState(false); - return (
    - toggle(!open)}> + Apri dropdown @@ -75,12 +69,10 @@ export const _Esempi = () => { }; export const _Link = () => { - const [open, toggle] = useState(false); - return (
    - toggle(!open)}> - + + Apri dropdown diff --git a/stories/Dropdown/DropdownMenu.stories.tsx b/stories/Dropdown/DropdownMenu.stories.tsx index 3668cd57f..1ab04725d 100644 --- a/stories/Dropdown/DropdownMenu.stories.tsx +++ b/stories/Dropdown/DropdownMenu.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { DropdownMenu, DropdownItem, Icon, LinkList, LinkListItem } from '../../src'; +import { DropdownMenu, Icon, LinkList, LinkListItem } from '../../src'; export const _MenuVociAttive = () => (
    diff --git a/stories/Header/CompleteHeader/basic.tsx b/stories/Header/CompleteHeader/basic.tsx index 63e1afc1d..f9786c49c 100644 --- a/stories/Header/CompleteHeader/basic.tsx +++ b/stories/Header/CompleteHeader/basic.tsx @@ -8,7 +8,6 @@ import { Col, DropdownToggle, DropdownMenu, - DropdownItem, Header, Headers, HeaderContent, @@ -24,7 +23,7 @@ import { NavItem, NavLink, HeaderBrand, - UncontrolledDropdown, + Dropdown, MegamenuItem, MegamenuHighlightColumn } from '../../../src'; @@ -36,10 +35,9 @@ const SlimHeaderFullResponsive = ({ theme }: ThemeType) => { Ente appartenenza - - + + ITA - @@ -55,7 +53,7 @@ const SlimHeaderFullResponsive = ({ theme }: ThemeType) => { - +