Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: evolve Kangaroo visual approach #857

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

feat: evolve Kangaroo visual approach #857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9da905b
fix: switch sides
Fupete Aug 29, 2023
493c931
Merge branch 'main' into feat-evolve-kangaroo-visual-approach
Fupete Sep 4, 2023
a5d74f0
Merge branch 'main' into feat-evolve-kangaroo-visual-approach
Fupete Feb 21, 2024
26a9d8f
fix: typo
Fupete Feb 21, 2024
8d06bfa
feat: styling all
Fupete Feb 21, 2024
4f49bb8
fix: lint
Fupete Feb 21, 2024
0e3bb4a
Merge branch 'main' into feat-evolve-kangaroo-visual-approach
Fupete Feb 21, 2024
8923200
fix: dropdown width and scss lint
Fupete Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 61 additions & 32 deletions src/components/kangaroo/kangaroo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -24,7 +25,6 @@ function Kangaroo({
}) {
const styles = classNames("kangaroo px-3", { "px-lg-5": !noPadding });
const colorStyle = classNames({ [`text-${color}`]: color });

const tagsLabelStyle = classNames(
"text-uppercase tag-small-size",
colorStyle,
Expand All @@ -37,8 +37,15 @@ function Kangaroo({
{titleSr}
</h2>
)}
<div className="kangaroo-wrapper py-4 d-lg-flex justify-content-between align-items-top">
<div className="left-zone">
<div className="kangaroo-wrapper row py-4 d-lg-flex justify-content-between align-items-center">
{dropdown && (
<div className="left-zone d-flex col-12 col-lg-4 mb-4 mb-lg-0">
<div className="dropdown-zone mt-4 mt-lg-0">
<Dropdown {...dropdown} />
</div>
</div>
)}
<div className="right-zone d-flex flex-column col-12 col-lg-8">
{navposition && (
<div className="navposition-wrapper">
<NavPosition {...navposition} />
Expand All @@ -54,29 +61,58 @@ function Kangaroo({
<NavPosition {...eventInfo} />
</div>
)}
{otherInfo && (
<div className="other-info-wrapper">
<NavPosition {...otherInfo} />
{personalInfo || eventInfo || (otherInfo && tagsLabel) ? (
<div>
<MetaCollapse label="Più informazioni" labelClose="Chiudi">
{otherInfo && (
<div className="other-info-wrapper">
<NavPosition {...otherInfo} />
</div>
)}
{tagsLabel && tags && tags.length > 0 && (
<div className="pills-wrapper d-md-flex align-items-start pt-3 pt-md-2">
<div className="d-flex title-wrapper align-items-center mb-2 mb-lg-0 text-uppercase flex-shrink-0">
<Icon {...icon} addonClasses="me-3" />
<span className={tagsLabelStyle}>
<strong>{tagsLabel}</strong>
</span>
</div>
<div className="chips ms-md-3 mb-2 mb-lg-0">
{tags.map((tag, index) => (
<Chip
key={`chip-${index}`}
label={tag}
size="lg"
color="primary"
/>
))}
</div>
</div>
)}
</MetaCollapse>
</div>
)}
{tagsLabel && tags && tags.length > 0 && (
<div className="pills-wrapper d-md-flex align-items-start pt-3 pt-md-2">
<div className="d-flex title-wrapper align-items-center mb-2 mb-lg-0 text-uppercase flex-shrink-0">
<Icon {...icon} addonClasses="me-3" />
<span className={tagsLabelStyle}>
<strong>{tagsLabel}</strong>
</span>
</div>
<div className="chips ms-md-3 mb-2 mb-lg-0">
{tags.map((tag, index) => (
<Chip
key={`chip-${index}`}
label={tag}
size="lg"
color="primary"
/>
))}
</div>
) : (
<div>
{tagsLabel && tags && tags.length > 0 && (
<div className="pills-wrapper d-md-flex align-items-start pt-3 pt-md-2">
<div className="d-flex title-wrapper align-items-center mb-2 mb-lg-0 text-uppercase flex-shrink-0">
<Icon {...icon} addonClasses="me-3" />
<span className={tagsLabelStyle}>
<strong>{tagsLabel}</strong>
</span>
</div>
<div className="chips ms-md-3 mb-2 mb-lg-0">
{tags.map((tag, index) => (
<Chip
key={`chip-${index}`}
label={tag}
size="lg"
color="primary"
/>
))}
</div>
</div>
)}
</div>
)}
{tagsDesignSystemLabel &&
Expand All @@ -103,13 +139,6 @@ function Kangaroo({
</div>
)}
</div>
{dropdown && (
<div className="right-zone col-12 col-lg-4 d-flex flex-lg-row-reverse pt-3 pb-4">
<div className="dropdwon-zone mt-4 mt-lg-0">
<Dropdown {...dropdown} />
</div>
</div>
)}
</div>
</section>
);
Expand Down
86 changes: 45 additions & 41 deletions src/components/kangaroo/kangaroo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +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;
}
}
.dropdwon-zone {
.btn {
font-size: var(--kangaroo-title-font-size);
text-transform: uppercase;
}
}
}

.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;
}
}

.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;
}
}
}


Expand All @@ -61,10 +75,9 @@
// }

}
//Small tablet ------------------------------------------------------------------------------------------
@include media-breakpoint-up(sm) {

}
//Small tablet ------------------------------------------------------------------------------------------
@include media-breakpoint-up(sm) {}

//Tablet portrait ---------------------------------------------------------------------------------------
@include media-breakpoint-up(md) {
Expand All @@ -78,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;
}
}
}
Expand All @@ -99,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) {}
63 changes: 63 additions & 0 deletions src/components/meta-collapse/meta-collapse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React, { useRef, useEffect, useState } from "react";
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 (
<div className="meta-collapse">
<button
href="#"
type="button"
onClick={collapseToggle}
className="read-more mt-3 mb-3 d-inline-flex p-0 btn btn-dropdown dropdown-toggle"
aria-expanded="false"
aria-controls={id}
>
<span className="more-text">{label}</span>
<span className="less-text">{labelClose}</span>
<Icon {...icon} />
</button>
<div ref={collRef} className="collapse" id={id}>
{children}
</div>
</div>
);
}

export default MetaCollapse;
26 changes: 26 additions & 0 deletions src/components/meta-collapse/meta-collapse.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
Loading