From 9da905b16cf3daf23abcfbfb986f68827fda5b7d Mon Sep 17 00:00:00 2001 From: Daniele T Date: Tue, 29 Aug 2023 10:08:15 +0200 Subject: [PATCH 1/5] fix: switch sides --- src/components/kangaroo/kangaroo.js | 68 ++++++++++++++--------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/src/components/kangaroo/kangaroo.js b/src/components/kangaroo/kangaroo.js index 772a39a55b..398f234965 100644 --- a/src/components/kangaroo/kangaroo.js +++ b/src/components/kangaroo/kangaroo.js @@ -26,35 +26,42 @@ function Kangaroo({ const styles = "kangaroo px-3" + `${noPadding ? ' ' : ' px-lg-5'}` - const colorStyle = `${color ? ` text-${ color}` : ''}` + const colorStyle = `${color ? ` text-${color}` : ''}` - const tagsLabelStyle = `text-uppercase small ${ colorStyle}` + const tagsLabelStyle = `text-uppercase small ${colorStyle}` return (
{titleSr &&

{titleSr}

}
-
- {navposition && -
- -
- } - {personalInfo && -
- -
- } - {eventInfo && -
- -
- } - {otherInfo && -
- -
- } + {dropdown && +
+
+ +
+
+ } +
+ {navposition && +
+ +
+ } + {personalInfo && +
+ +
+ } + {eventInfo && +
+ +
+ } + {otherInfo && +
+ +
+ } {(tagsLabel && tags) && (tags.length > 0) &&
@@ -63,8 +70,8 @@ function Kangaroo({
{tags.map((tag, index) => ( - - ))} + + ))}
} @@ -76,20 +83,13 @@ function Kangaroo({
{tagsDesignSystem.map((tag, index) => ( - - ))} + + ))}
}
- {dropdown && -
-
- -
-
- }
) From 26a9d8f125788aa22243fbcb589e959f71015749 Mon Sep 17 00:00:00 2001 From: Daniele T Date: Wed, 21 Feb 2024 10:28:07 +0100 Subject: [PATCH 2/5] fix: typo --- src/components/kangaroo/kangaroo.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/kangaroo/kangaroo.js b/src/components/kangaroo/kangaroo.js index adbe493c9b..3c5c075894 100644 --- a/src/components/kangaroo/kangaroo.js +++ b/src/components/kangaroo/kangaroo.js @@ -37,35 +37,35 @@ function Kangaroo({ )}
- {dropdown && + {dropdown && (
- } + )}
- {navposition && + {navposition && (
- } - {personalInfo && + )} + {personalInfo && (
- } - {eventInfo && + )} + {eventInfo && (
- } - {otherInfo && + )} + {otherInfo && (
- } - {(tagsLabel && tags) && (tags.length > 0) && + )} + {tagsLabel && tags && tags.length > 0 && (
From 8d06bfa9a9f3fd7980d4d6866c8abf64ec155710 Mon Sep 17 00:00:00 2001 From: Daniele T Date: Wed, 21 Feb 2024 11:53:18 +0100 Subject: [PATCH 3/5] feat: styling all --- src/components/kangaroo/kangaroo.js | 83 ++++++++++++------- src/components/kangaroo/kangaroo.scss | 16 ++-- src/components/meta-collapse/meta-collapse.js | 67 +++++++++++++++ .../meta-collapse/meta-collapse.scss | 26 ++++++ 4 files changed, 159 insertions(+), 33 deletions(-) create mode 100644 src/components/meta-collapse/meta-collapse.js create mode 100644 src/components/meta-collapse/meta-collapse.scss diff --git a/src/components/kangaroo/kangaroo.js b/src/components/kangaroo/kangaroo.js index 3c5c075894..5641f6c468 100644 --- a/src/components/kangaroo/kangaroo.js +++ b/src/components/kangaroo/kangaroo.js @@ -5,6 +5,7 @@ import Icon from "../icon/icon"; import Chip from "../chip/chip"; import Dropdown from "../dropdown/dropdown"; import NavPosition from "../nav-position/nav-position"; +import MetaCollapse from "../meta-collapse/meta-collapse"; function Kangaroo({ id, @@ -36,15 +37,15 @@ function Kangaroo({ {titleSr} )} -
+
{dropdown && ( -
-
+
+
)} -
+
{navposition && (
@@ -60,31 +61,57 @@ function Kangaroo({
)} - {otherInfo && ( -
- -
- )} - {tagsLabel && tags && tags.length > 0 && ( -
-
- - - {tagsLabel} - -
-
- {tags.map((tag, index) => ( - - ))} + {(personalInfo || eventInfo || otherInfo && tagsLabel) ?
+ + {otherInfo && ( +
+ +
+ )} + {tagsLabel && tags && tags.length > 0 && ( +
+
+ + + {tagsLabel} + +
+
+ {tags.map((tag, index) => ( + + ))} +
+
+ )} + +
:
+ {tagsLabel && tags && tags.length > 0 && ( +
+
+ + + {tagsLabel} + +
+
+ {tags.map((tag, index) => ( + + ))} +
-
- )} + )} +
+ } {tagsDesignSystemLabel && tagsDesignSystem && tagsDesignSystem.length > 0 && ( diff --git a/src/components/kangaroo/kangaroo.scss b/src/components/kangaroo/kangaroo.scss index 8c27799dcc..ccdea5c3f6 100644 --- a/src/components/kangaroo/kangaroo.scss +++ b/src/components/kangaroo/kangaroo.scss @@ -8,10 +8,15 @@ margin-bottom: 0; } } - .dropdwon-zone { - .btn { + .dropdown-zone { + .btn-dropdown { + padding: 12px 24px; + box-shadow: inset 0 0 0 2px hsl(210, 100%, 40%); + // border-width: 2px; + // border-style: solid; + border-radius: 4px; font-size: var(--kangaroo-title-font-size); - text-transform: uppercase; + // text-transform: uppercase; } } .nav-position { @@ -39,11 +44,12 @@ background-color: var(--kangaroo-tags-hover-color); } .chip-label { - color: var(--kangaroo-negative-element-color) + color: var(--kangaroo-negative-element-color); } } .btn-dropdown { - color: var(--kangaroo-negative-element-color) + color: var(--kangaroo-negative-element-color); + box-shadow: inset 0 0 0 2px white; } } } diff --git a/src/components/meta-collapse/meta-collapse.js b/src/components/meta-collapse/meta-collapse.js new file mode 100644 index 0000000000..01eca806ec --- /dev/null +++ b/src/components/meta-collapse/meta-collapse.js @@ -0,0 +1,67 @@ +import React, { useRef, useEffect, useState } from "react"; +import ReactMarkdown from "react-markdown"; + +import { Collapse } from "bootstrap-italia"; + +import Icon from "../icon/icon"; + +import "./meta-collapse.scss"; + +function MetaCollapse({ label, labelClose, children }) { + const icon = { + icon: "sprites.svg#it-expand", + size: "sm", + align: "middle", + color: "primary", + hidden: true, + addonClasses: "ms-2", + }; + + const collRef = useRef(null); + const collObjRef = useRef(null); + + const [id, setId] = useState("meta-collapse-"); + + const toggleAria = (element) => { + const ariaAttr = element.getAttribute("aria-expanded"); + let newVal = "true"; + if (ariaAttr === "true") { + newVal = "false"; + } + element.setAttribute("aria-expanded", newVal); + }; + const collapseToggle = (evt) => { + evt.preventDefault(); + if (collObjRef.current) { + collObjRef.current.toggle(); + toggleAria(evt.currentTarget); + } + }; + + useEffect(() => { + collObjRef.current = new Collapse(collRef.current, { toggle: false }); + setId(`meta-collapse-${new Date().getTime()}`); + }, []); + + return ( +
+ +
+ {children} +
+
+ ); +} + +export default MetaCollapse; diff --git a/src/components/meta-collapse/meta-collapse.scss b/src/components/meta-collapse/meta-collapse.scss new file mode 100644 index 0000000000..bf19d6b064 --- /dev/null +++ b/src/components/meta-collapse/meta-collapse.scss @@ -0,0 +1,26 @@ +.meta-collapse { + .read-more { + text-transform: none; + letter-spacing: 0; + font-size: 1rem; + .less-text { + display: none; + } + .icon { + transition: transform 0.3s; + width: 24px !important; + height: 24px !important; + } + &[aria-expanded="true"] { + .icon { + transform: scaleY(-1); + } + .less-text { + display: inline; + } + .more-text { + display: none; + } + } + } +} From 4f49bb8ba60a20d096d3d31efccbad3ba02c0d67 Mon Sep 17 00:00:00 2001 From: Daniele T Date: Wed, 21 Feb 2024 11:59:22 +0100 Subject: [PATCH 4/5] fix: lint --- src/components/kangaroo/kangaroo.js | 65 ++++++++++--------- src/components/meta-collapse/meta-collapse.js | 4 -- 2 files changed, 34 insertions(+), 35 deletions(-) diff --git a/src/components/kangaroo/kangaroo.js b/src/components/kangaroo/kangaroo.js index 5641f6c468..c8bb3885cc 100644 --- a/src/components/kangaroo/kangaroo.js +++ b/src/components/kangaroo/kangaroo.js @@ -61,13 +61,38 @@ function Kangaroo({
)} - {(personalInfo || eventInfo || otherInfo && tagsLabel) ?
- - {otherInfo && ( -
- -
- )} + {personalInfo || eventInfo || (otherInfo && tagsLabel) ? ( +
+ + {otherInfo && ( +
+ +
+ )} + {tagsLabel && tags && tags.length > 0 && ( +
+
+ + + {tagsLabel} + +
+
+ {tags.map((tag, index) => ( + + ))} +
+
+ )} + +
+ ) : ( +
{tagsLabel && tags && tags.length > 0 && (
@@ -88,30 +113,8 @@ function Kangaroo({
)} - -
:
- {tagsLabel && tags && tags.length > 0 && ( -
-
- - - {tagsLabel} - -
-
- {tags.map((tag, index) => ( - - ))} -
-
- )} -
- } +
+ )} {tagsDesignSystemLabel && tagsDesignSystem && tagsDesignSystem.length > 0 && ( diff --git a/src/components/meta-collapse/meta-collapse.js b/src/components/meta-collapse/meta-collapse.js index 01eca806ec..bc4ba0bd70 100644 --- a/src/components/meta-collapse/meta-collapse.js +++ b/src/components/meta-collapse/meta-collapse.js @@ -1,10 +1,6 @@ import React, { useRef, useEffect, useState } from "react"; -import ReactMarkdown from "react-markdown"; - import { Collapse } from "bootstrap-italia"; - import Icon from "../icon/icon"; - import "./meta-collapse.scss"; function MetaCollapse({ label, labelClose, children }) { From 8923200223c7523715faa2d9978ca81f2f7925ef Mon Sep 17 00:00:00 2001 From: Daniele T Date: Wed, 21 Feb 2024 18:41:03 +0100 Subject: [PATCH 5/5] fix: dropdown width and scss lint --- src/components/kangaroo/kangaroo.scss | 80 +++++++++++++-------------- 1 file changed, 39 insertions(+), 41 deletions(-) diff --git a/src/components/kangaroo/kangaroo.scss b/src/components/kangaroo/kangaroo.scss index ccdea5c3f6..82b4658d50 100644 --- a/src/components/kangaroo/kangaroo.scss +++ b/src/components/kangaroo/kangaroo.scss @@ -1,57 +1,65 @@ @import "../../scss/bootstrap-breakpoints"; .kangaroo { - .title-wrapper { + .title-wrapper { h2 { font-size: var(--kangaroo-title-font-size); font-weight: 600; margin-bottom: 0; } - } - .dropdown-zone { - .btn-dropdown { + } + + .dropdown-zone { + .btn-dropdown { padding: 12px 24px; box-shadow: inset 0 0 0 2px hsl(210, 100%, 40%); // border-width: 2px; // border-style: solid; border-radius: 4px; - font-size: var(--kangaroo-title-font-size); - // text-transform: uppercase; - } - } + font-size: var(--kangaroo-title-font-size); + // text-transform: uppercase; + } + } + .nav-position { .container-xxl { padding-left: 0; padding-right: 0; } } + .chip.chip-lg { min-width: 66px; } + .tag-small-size { font-size: 1rem; } } .bg-primary { - .kangaroo { - .chip.chip-primary { - border-color: var(--kangaroo-negative-element-color); - &:active { - border-color: var(--kangaroo-negative-element-color); - } + .kangaroo { + .chip.chip-primary { + border-color: var(--kangaroo-negative-element-color); + + &:active { + border-color: var(--kangaroo-negative-element-color); + } + &:hover { background-color: var(--kangaroo-tags-hover-color); } - .chip-label { - color: var(--kangaroo-negative-element-color); - } - } - .btn-dropdown { - color: var(--kangaroo-negative-element-color); + + .chip-label { + color: var(--kangaroo-negative-element-color); + } + } + + .btn-dropdown { + color: var(--kangaroo-negative-element-color); box-shadow: inset 0 0 0 2px white; - } - } + } + } } @@ -67,10 +75,9 @@ // } } -//Small tablet ------------------------------------------------------------------------------------------ -@include media-breakpoint-up(sm) { -} +//Small tablet ------------------------------------------------------------------------------------------ +@include media-breakpoint-up(sm) {} //Tablet portrait --------------------------------------------------------------------------------------- @include media-breakpoint-up(md) { @@ -84,12 +91,10 @@ //Tablet landscape -------------------------------------------------------------------------------------- @include media-breakpoint-up(lg) { .kangaroo { - .right-zone { - // text-align: right; - // width:33.33% + .kangaroo { .dropdown-menu { - width:14rem; - + min-width: 14rem; + max-width: 16rem; } } } @@ -105,20 +110,13 @@ } //Laptop ------------------------------------------------------------------------------------------------ -@include media-breakpoint-up(xl) { - - -} +@include media-breakpoint-up(xl) {} //Desktop ----------------------------------------------------------------------------------------------- -@include media-breakpoint-up(xxl) { - -} +@include media-breakpoint-up(xxl) {} //Hover states ------------------------------------------------------------------------------------------ -@media (hover: hover) { -} +@media (hover: hover) {} //Transitions (A11y reduced motion disabled) ------------------------------------------------------------ -@media screen and (prefers-reduced-motion: no-preference) { -} +@media screen and (prefers-reduced-motion: no-preference) {} \ No newline at end of file