-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
content(feat): launch design system .italia v1 (1429)
--------- Co-authored-by: Daniele Nolè <102873965+danielenole@users.noreply.github.com>
- Loading branch information
1 parent
f2f4b39
commit bb1d911
Showing
18 changed files
with
1,003 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| import classNames from "classnames"; | ||
| import * as React from "react"; | ||
| import "./section-media.scss"; | ||
| import Button from "../button/button"; | ||
| import CookieRemove from "../cookieremove/cookieremove"; | ||
| import MediaPlayer from "../media-player/media-player"; | ||
|
|
||
| function SectionMedia({ | ||
| title, | ||
| hiddenSectionTitle, | ||
| headingLevel, | ||
| text, | ||
| buttons, | ||
| full, | ||
| centered, | ||
| fullColumn, | ||
| paddingLeft, | ||
| background, | ||
| components, | ||
| menu, | ||
| noSpace, | ||
| id, | ||
| }) { | ||
| const SwitchComponents = { | ||
| CookieRemove, | ||
| MediaPlayer, | ||
| }; | ||
|
|
||
| // heading level | ||
| let HLevel; | ||
| if (headingLevel) { | ||
| HLevel = `h${headingLevel}`; | ||
| } else { | ||
| HLevel = `h2`; | ||
| } | ||
|
|
||
| const container = classNames({ | ||
| "fullcolumn-editorial": fullColumn, | ||
| "container-xxl": !fullColumn, | ||
| }); | ||
|
|
||
| const row = classNames({ | ||
| row: !fullColumn, | ||
| "flex-lg-row-reverse": menu && !fullColumn, | ||
| }); | ||
|
|
||
| const grid = classNames({ | ||
| "col-12 g-0": full && !fullColumn, | ||
| "col-md-10 offset-md-1 col-lg-8 offset-lg-0": full && menu && !fullColumn, | ||
| "col-12 col-md-10 offset-md-1 col-lg-7 offset-lg-1": !full && !fullColumn, | ||
| "m-auto": !full && centered && !fullColumn, | ||
| }); | ||
|
|
||
| const styles = classNames("section-media", { | ||
| [`bg-${background}`]: background, | ||
| "py-0": noSpace, | ||
| "text-white": background === "dark", | ||
| "ps-lg-4 ps-xl-5": paddingLeft, | ||
| }); | ||
|
|
||
| const titleStyles = classNames({ | ||
| "mb-1": text, | ||
| "mb-0": !text, | ||
| "visually-hidden": hiddenSectionTitle, | ||
| }); | ||
|
|
||
| const textContainerStyles = "text-container px-3 px-lg-5 text-center pb-5"; | ||
| const textStyles = "text-container mb-5 d-flex justify-content-center"; | ||
| const textStylesP = "lead font-sans-serif mb-auto text-center"; | ||
|
|
||
| // buttons | ||
| let ButtonsRender; | ||
| if (buttons) { | ||
| ButtonsRender = buttons.map((btn, index) => ( | ||
| <Button key={`button-${index}`} {...btn} /> | ||
| )); | ||
| } | ||
|
|
||
| // xxx a11y downgrade if title is not set, quick fix to review asap | ||
| if (!title) { | ||
| // eslint-disable-next-line no-param-reassign | ||
| id = undefined; | ||
| } | ||
|
|
||
| return ( | ||
| <section className={styles} aria-labelledby={id}> | ||
| <div className={container}> | ||
| <div className={row}> | ||
| <div className={grid}> | ||
| <div> | ||
| <div className={textContainerStyles}> | ||
| {title && ( | ||
| <HLevel className={titleStyles} id={id}> | ||
| {title} | ||
| </HLevel> | ||
| )} | ||
| {text && ( | ||
| <div className={textStyles}> | ||
| <p className={textStylesP}>{text}</p> | ||
| </div> | ||
| )} | ||
| {ButtonsRender && ( | ||
| <div className="buttons-wrapper mt-5"> | ||
| <div>{ButtonsRender}</div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| <div className="img-container"> | ||
| {components?.map((item, index) => { | ||
| const Switcher = SwitchComponents[item.name]; | ||
| return <Switcher key={`switcher-${index}`} {...item} />; | ||
| })} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| export default SectionMedia; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| @import "../../scss/bootstrap-breakpoints"; | ||
|
|
||
| .section-media { | ||
| padding-top: var(--section-editorial-y-padding); | ||
| padding-bottom: var(--section-editorial-y-padding); | ||
|
|
||
| &.bg-primary-light { | ||
| background-color: var(--color-primary-light); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| //Mobile only ------------------------------------------------------------------------------------------ | ||
| @include media-breakpoint-down(sm) {} | ||
|
|
||
| //Small tablet ------------------------------------------------------------------------------------------ | ||
| @include media-breakpoint-up(sm) {} | ||
|
|
||
| //Tablet portrait --------------------------------------------------------------------------------------- | ||
| @include media-breakpoint-up(md) {} | ||
|
|
||
| //Tablet landscape -------------------------------------------------------------------------------------- | ||
| @include media-breakpoint-up(lg) { | ||
| .section-media { | ||
| padding-top: var(--section-editorial-y-padding-desk); | ||
| padding-bottom: var(--section-editorial-y-padding-desk); | ||
|
|
||
| &.highlight-big { | ||
| .img-container { | ||
| width: 50%; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .design-system .section-media { | ||
|
|
||
| h2, | ||
| .text-container p { | ||
| width: 75%; | ||
| } | ||
|
|
||
| .content h2 { | ||
| width: inherit; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| //Laptop ------------------------------------------------------------------------------------------------ | ||
| @include media-breakpoint-up(xl) { | ||
| .section-media { | ||
| &.highlight-big { | ||
| .img-container { | ||
| width: 50%; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| //Desktop ----------------------------------------------------------------------------------------------- | ||
| @include media-breakpoint-up(xxl) {} | ||
|
|
||
| //Hover states ------------------------------------------------------------------------------------------ | ||
| @media (hover: hover) {} | ||
|
|
||
| //Transitions (A11y reduced motion disabled) ------------------------------------------------------------ | ||
| @media screen and (prefers-reduced-motion: no-preference) {} |
Oops, something went wrong.