From 87f54fb9e03cb9c59f7e3da5cd62152a13f3a26d Mon Sep 17 00:00:00 2001 From: Kuba Orlik Date: Wed, 13 Nov 2024 15:54:33 +0100 Subject: [PATCH] ordered pictogram tiles Summary: Ref T2922 Reviewers: kuba-orlik Subscribers: jenkins-user Maniphest Tasks: T2922 Differential Revision: https://hub.sealcode.org/D1521 --- src/back/global_styles/vars.css | 45 ++++++ .../ordered-pictogram-tiles.css | 144 ++++++++++++++++++ .../ordered-pictogram-tiles.jdd.tsx | 62 ++++++++ 3 files changed, 251 insertions(+) create mode 100644 src/back/global_styles/vars.css create mode 100644 src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css create mode 100644 src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.jdd.tsx diff --git a/src/back/global_styles/vars.css b/src/back/global_styles/vars.css new file mode 100644 index 0000000..32d3c97 --- /dev/null +++ b/src/back/global_styles/vars.css @@ -0,0 +1,45 @@ +:root { + --default-font-color: #222; + + --secondary: #55a4b4; + --secondary-light-01: #a4d2db; + --secondary-dark-01: #5294a1; + --secondary-dark-02: #3c7c88; + + --alto-gray: #e0e0e0; + --dove-gray: #6f6e6e; + --faint-gray: #ededed; + + --main: #6d4477; + + --main-dark-01: #62386c; + --main-dark-02: #56335d; + --main-dark-03: #4a2a52; + --main-dark-04: #55335d; + + --main-light-01: #744d7e; + --main-light-02: #8b7192; + --main-light-03: #a686af; + --main-bg-text: #fff; + + --main-bg-text-secondary: hsl(286.4, 15.5%, 86.2%); + --main-dark-02-bg-secondary: #b5a2ba; + + --wild-sand: #f6f6f6; + --london-hue: #beadc3; + + --wild-sand-bg-text: #000; + + --white-bg-text: #6f6e6e; + --white-bg-text-secondary: #000; + --white-bg-text-gray: #565656; + --white-bg-link: #404f6e; + --white-on-darker-bg-text: #fff; + + /*px / 24 = N rem*/ + --container-width: 50rem; + + /* Fonts */ + --font-sans-serif: "Inter UI", sans-serif; + --font-slab-serif: "Zilla Slab", serif; +} diff --git a/src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css b/src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css new file mode 100644 index 0000000..9c2faea --- /dev/null +++ b/src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css @@ -0,0 +1,144 @@ +.pictogram-tiles { + max-width: var(--container-width); + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 2rem; + grid-auto-rows: minmax(7rem, auto); + grid-row-gap: 1rem; + margin: 1rem auto; + padding: 0 1rem; +} + +.pictogram-tiles__tile { + grid-row: span 2; + list-style: none; +} + +.pictogram-tiles__tile:nth-child(even) { + grid-column: 1; +} + +.pictogram-tiles__tile:nth-child(odd) { + grid-column: 2; +} +.pictogram-tiles__tile:only-child { + grid-column: 1 / span 2; + max-width: 23rem; + margin: 0 auto; +} + +.pictogram-tiles__content { + padding: 2rem; +} + +.pictogram-tiles__upperSection { + display: flex; + justify-content: space-between; +} +.pictogram-tiles__upperSection span { + font-family: var(--font-sans-serif); + font-weight: 800; + font-size: 1.5rem; + height: fit-content; + padding-bottom: 1rem; + position: relative; +} +.pictogram-tiles__upperSection span::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + background-color: #000000; + opacity: 25%; +} +.pictogram-tiles__upperSection img { + align-self: flex-start; +} + +.pictogram-tiles__tile--purple a { + color: var(--white-on-darker-bg-text); +} + +.pictogram-tiles__tile--white a { + color: var(--main); +} + +.pictogram-tiles__lowerSection h3 { + grid-row: 1; + font-size: 1rem; + line-height: 1.25rem; + font-family: var(--font-slab-serif); + font-weight: 400; + align-self: center; +} + +.pictogram-tiles__lowerSection p { + grid-row: 2; + font-family: var(--font-sans-serif); + color: var(--dove-gray); +} + +.pictogram-tiles__tile--purple { + background-color: var(--main); +} + +.pictogram-tiles__tile--white { + background-color: white; + box-shadow: 0.5rem 0.5rem 0 0 rgba(0, 0, 0, 0.06); +} + +.pictogram-tiles__tile--purple .pictogram-tiles__upperSection span { + color: var(--main-bg-text); + border-color: hsl(287.3, 13.1%, 50.8%); +} + +.pictogram-tiles__tile--white .pictogram-tiles__upperSection span { + color: var(--main); + border-color: #e0e0e0; +} + +.pictogram-tiles__tile--purple .pictogram-tiles__lowerSection h3 { + color: var(--main-bg-text); +} +.pictogram-tiles__tile--purple .pictogram-tiles__lowerSection p { + color: var(--main-bg-text-secondary); +} + +.pictogram-tiles__tile--white .pictogram-tiles__lowerSection { + .pictogram-tiles__tile--white .pictogram-tiles__lowerSection p { + color: var(--dove-gray); + } +} + +@container (max-width: 880px) { + .pictogram-tiles { + display: block; + grid-template-columns: auto; + } + .pictogram-tiles__tile { + max-width: 21rem; + margin: 0 auto; + } + .pictogram-tiles__tile:nth-child(odd) { + grid-column: auto; + } + + .pictogram-tiles__tile:nth-child(even) { + grid-column: auto; + } +} + +@container (max-width: 440px) { + .pictogram-tiles { + padding: 0; + } + .pictogram-tiles__content { + padding: 2rem 1rem; + } + + .pictogram-tiles__tile--white { + box-shadow: none; + } +} diff --git a/src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.jdd.tsx b/src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.jdd.tsx new file mode 100644 index 0000000..61e812e --- /dev/null +++ b/src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.jdd.tsx @@ -0,0 +1,62 @@ +import type { FlatTemplatable } from "tempstream"; +import { TempstreamJSX } from "tempstream"; +import type { ComponentToHTMLArgs } from "@sealcode/jdd"; +import { Component, ComponentArguments } from "@sealcode/jdd"; + +const component_arguments = { + elements: new ComponentArguments.List( + new ComponentArguments.Structured({ + color: new ComponentArguments.Enum(["purple", "white"]), + iconPath: new ComponentArguments.Image(), + iconAlt: new ComponentArguments.ShortText(), + title: new ComponentArguments.ShortText(), + description: new ComponentArguments.Markdown(), + }) + ), +} as const; + +export class OrderedPictogramTiles extends Component { + getArguments() { + return component_arguments; + } + + toHTML({ + args: { elements }, + jdd_context: { render_image, render_markdown, language }, + }: ComponentToHTMLArgs): FlatTemplatable { + return ( +
+
    + {elements.map((element, index) => ( +
  1. +
    +
    + + {(index + 1).toLocaleString("en-US", { + minimumIntegerDigits: 2, + useGrouping: false, + })} + + {render_image(element.iconPath, { + container: { + height: 200, + width: 200, + objectFit: "cover", + }, + alt: element.iconAlt, + })} +
    +
    +

    {element.title}

    + {render_markdown(language, element.description)} +
    +
    +
    2. + ))} +
+
+ ); + } +}