technology tile jdd

Summary:
T2929

technology tile jdd

Reviewers: #reviewers, kuba-orlik

Reviewed By: #reviewers, kuba-orlik

Subscribers: kuba-orlik, jenkins-user

Differential Revision: https://hub.sealcode.org/D1580

src/back/jdd-components/technology-tile/technology-tile.css

@@ -0,0 +1,24 @@
+.technology-tile {
+	.img-container {
+		height: 144px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 0 0 1px var(--alto-gray);
+		background-color: white;
+	}
+
+	picture {
+		background: inherit !important;
+		max-width: 50%;
+
+		img {
+			filter: grayscale(50%);
+			transition: filter 200ms;
+		}
+	}
+}
+
+.technology-tile:hover picture {
+	filter: none;
+}

src/back/jdd-components/technology-tile/technology-tile.jdd.tsx

@@ -0,0 +1,39 @@
+import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+
+const component_arguments = {
+	name: new ComponentArguments.ShortText(),
+	image_with_alt: new ComponentArguments.Structured({
+		image: new ComponentArguments.Image(),
+		alt: new ComponentArguments.ShortText(),
+	}),
+	title: new ComponentArguments.ShortText(),
+} as const;
+
+export class TechnologyTile extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	async toHTML({
+		args: { name, image_with_alt, title },
+		classes,
+		jdd_context: { render_image },
+	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+		return (
+			<div class={[`technology-tile technology-tile--${name}`, ...classes]}>
+				{image_with_alt.image ? (
+					<div class="img-container">
+						{render_image(image_with_alt.image, {
+							sizesAttr: "100vw",
+							alt: title || image_with_alt.alt || name,
+						})}
+					</div>
+				) : (
+					<span style="padding:1rem">{name}</span>
+				)}
+			</div>
+		);
+	}
+}

src/global-styles/colors.css

@@ -0,0 +1,29 @@
+html {
+	--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.4deg 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;
+}

src/global-styles/config.css

@@ -0,0 +1,9 @@
+html {
+	--navbar-height: 96px;
+	--navbar-mobile-height: 72px;
+	--navbar-mobile-breakpoint: 900px;
+	--focus-color: hsl(214deg 33% 88%);
+	--font-sans-serif: "Inter UI", sans-serif;
+	--font-slab-serif: "Zilla Slab", serif;
+	--container-width: 1200px;
+}