From aa7d3e280a68cd716b3ab0a377fb7684000c8e8c Mon Sep 17 00:00:00 2001 From: flippedcoder Date: Tue, 2 Jun 2026 12:09:47 -0500 Subject: [PATCH 1/7] chore(components): grouped RelatedRead files in a folder --- .../info/{ => RelatedRead}/RelatedRead.js | 18 ++++-------------- .../{ => RelatedRead}/RelatedRead.module.css | 0 .../info/{ => RelatedRead}/RelatedReadList.js | 0 3 files changed, 4 insertions(+), 14 deletions(-) rename src/components/info/{ => RelatedRead}/RelatedRead.js (83%) rename src/components/info/{ => RelatedRead}/RelatedRead.module.css (100%) rename src/components/info/{ => RelatedRead}/RelatedReadList.js (100%) diff --git a/src/components/info/RelatedRead.js b/src/components/info/RelatedRead/RelatedRead.js similarity index 83% rename from src/components/info/RelatedRead.js rename to src/components/info/RelatedRead/RelatedRead.js index 8d8791f37d..9737432cb7 100644 --- a/src/components/info/RelatedRead.js +++ b/src/components/info/RelatedRead/RelatedRead.js @@ -2,6 +2,8 @@ import React from "react"; import clsx from "clsx"; import Link from "@docusaurus/Link"; import { v4 as uuidv4 } from "uuid"; + +import { LANGUAGE_ICONS } from "../constants"; import styles from "./RelatedRead.module.css"; const archetypeClasses = { @@ -10,18 +12,6 @@ const archetypeClasses = { "feature-summary": "archetype-tag-feature-summary", }; -const languageIcons = { - Go: "/img/sdks/svgs/golang.svg", - Java: "/img/sdks/svgs/java.svg", - PHP: "/img/sdks/svgs/php.svg", - Python: "/img/sdks/svgs/python.svg", - TypeScript: "/img/sdks/svgs/typescript.svg", - ".NET": "/img/sdks/svgs/dotnet.svg", - Ruby: "/img/sdks/svgs/ruby.svg", - Rust: "/img/sdks/svgs/rust.svg", - "Temporal CLI": "/img/assets/terminal.svg", -}; - const encyclopediaIcon = "/img/assets/link-preview-icon.svg"; function getTagClass(tag) { @@ -29,9 +19,9 @@ function getTagClass(tag) { } function getLanguageIcon(text) { - for (const lang in languageIcons) { + for (const lang in LANGUAGE_ICONS) { if (text.includes(lang)) { - return languageIcons[lang]; + return LANGUAGE_ICONS[lang]; } } return null; diff --git a/src/components/info/RelatedRead.module.css b/src/components/info/RelatedRead/RelatedRead.module.css similarity index 100% rename from src/components/info/RelatedRead.module.css rename to src/components/info/RelatedRead/RelatedRead.module.css diff --git a/src/components/info/RelatedReadList.js b/src/components/info/RelatedRead/RelatedReadList.js similarity index 100% rename from src/components/info/RelatedReadList.js rename to src/components/info/RelatedRead/RelatedReadList.js From 93dc058943261775685d9f1160413eb146a95f77 Mon Sep 17 00:00:00 2001 From: flippedcoder Date: Tue, 2 Jun 2026 12:10:46 -0500 Subject: [PATCH 2/7] feat(components): added new ReleaseNoteHeader component and example implementation --- .../activities/standalone-activities.mdx | 10 +- src/components/index.js | 5 +- .../ReleaseNoteHeader/ReleaseNoteHeader.js | 118 ++++++++++++++++++ .../ReleaseNoteHeader.module.css | 109 ++++++++++++++++ src/components/info/constants.js | 11 ++ 5 files changed, 246 insertions(+), 7 deletions(-) create mode 100644 src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.js create mode 100644 src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.module.css create mode 100644 src/components/info/constants.js diff --git a/docs/develop/python/activities/standalone-activities.mdx b/docs/develop/python/activities/standalone-activities.mdx index 724e127d2c..7e1a56ffbf 100644 --- a/docs/develop/python/activities/standalone-activities.mdx +++ b/docs/develop/python/activities/standalone-activities.mdx @@ -19,12 +19,12 @@ tags: description: Execute Activities independently without a Workflow using the Temporal Python SDK. --- -:::tip SUPPORT, STABILITY, and DEPENDENCY INFO +import { ReleaseNoteHeader } from '@site/src/components'; -Temporal Python SDK support for [Standalone Activities](/standalone-activity) is at -[Public Preview](/evaluate/development-production-features/release-stages#public-preview). - -::: + Standalone Activities are Activities that run independently, without being orchestrated by a Workflow. Instead of starting an Activity from within a Workflow Definition, you start a Standalone diff --git a/src/components/index.js b/src/components/index.js index 9c82476efc..07152382b8 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -19,8 +19,9 @@ export { default as ZoomingImage } from './images/ZoomingImage'; // Information components export { default as DiscoverableDisclosure } from './info/DiscoverableDisclosure'; export { default as ToolTipTerm } from './info/ToolTipTerm'; -export { RelatedReadContainer, RelatedReadItem } from './info/RelatedRead'; -export { default as RelatedReadList } from './info/RelatedReadList'; +export { RelatedReadContainer, RelatedReadItem } from './info/RelatedRead/RelatedRead'; +export { default as RelatedReadList } from './info/RelatedRead/RelatedReadList'; +export { default as ReleaseNoteHeader } from './info/ReleaseNoteHeader/ReleaseNoteHeader'; // Extra export export { default } from './elements/SdkTabs'; diff --git a/src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.js b/src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.js new file mode 100644 index 0000000000..74b0816bdd --- /dev/null +++ b/src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.js @@ -0,0 +1,118 @@ +// src/components/info/ReleaseNoteHeader/index.js + +import React from "react"; +import clsx from "clsx"; +import { LANGUAGE_ICONS } from "../constants"; +import SdkSvg from '../../elements/SdkSvgs/SdkSvg'; +import styles from "./ReleaseNoteHeader.module.css"; + +export const RELEASE_TYPES = { + prerelease: { + label: "Pre-release", + descriptionLink: "/evaluate/development-production-features/release-stages#pre-release", + backgroundColor: "var(--release-prerelease-bg)", + borderColor: "var(--release-prerelease-border)", + textColor: "var(--release-prerelease-text)", + }, + publicPreview: { + label: "Public Preview", + descriptionLink: "/evaluate/development-production-features/release-stages#public-preview", + backgroundColor: "var(--release-public-preview-bg)", + borderColor: "var(--release-public-preview-border)", + textColor: "var(--release-public-preview-text)", + }, + generalAvailability: { + label: "General Availability", + descriptionLink: "/evaluate/development-production-features/release-stages#general-availability", + backgroundColor: "var(--release-ga-bg)", + borderColor: "var(--release-ga-border)", + textColor: "var(--release-ga-text)", + }, +}; + +const LANGUAGE_TO_SDK_SVG = { + ".NET": "dotnetBlock", + "Go": "goLangBlock", + "Java": "javaBlock", + "PHP": "phpBlock", + "Python": "pythonBlock", + "Ruby": "rubyBlock", + "Rust": "rustBlock", + "TypeScript": "typeScriptBlock", +} + +function getTheme(type, overrides = {}) { + return { + ...(RELEASE_TYPES[type] || RELEASE_TYPES.generalAvailability), + ...Object.fromEntries( + Object.entries(overrides).filter(([, value]) => value !== undefined) + ), + }; +} + +export default function ReleaseNoteHeader({ + // type can be "prerelease", "publicPreview", or "generalAvailability" + type = "generalAvailability", + // If there is anything specific to say about the release, it can be passed here. It can also be a link if href is provided. + text, + // If text is a link, this is where the link can be passed. + href, + // These are the supported languages for the release. If provided, icons for these languages will be shown. + languages = [], + // If you want to override the default label for the release type, you can pass it here. This is useful for cases like "generalAvailability" where you might want to just say "Stable". + label, +}) { + const theme = getTheme(type); + + const releaseLabel = label || theme.label; + + const style = { + "--release-note-background": theme.backgroundColor, + "--release-note-border": theme.borderColor, + "--release-note-text": theme.textColor, + }; + + return ( + + ); +} \ No newline at end of file diff --git a/src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.module.css b/src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.module.css new file mode 100644 index 0000000000..803ea5ab8a --- /dev/null +++ b/src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.module.css @@ -0,0 +1,109 @@ +:root { + /* Pre-release */ + --release-prerelease-bg: #fef3c7; + --release-prerelease-border: #f59e0b; + --release-prerelease-text: #111827; + + /* Public Preview */ + --release-public-preview-bg: #eff6ff; + --release-public-preview-border: #8b5cf6; + --release-public-preview-text: #111827; + + /* General Availability */ + --release-ga-bg: #f5f3ff; + --release-ga-border: #3b82f6; + --release-ga-text: #111827; +} + +[data-theme="dark"] { + /* Pre-release */ + --release-prerelease-bg: #422006; + --release-prerelease-border: #fbbf24; + --release-prerelease-text: #e6f6e6; + + /* Public Preview */ + --release-public-preview-bg: #2e1065; + --release-public-preview-border: #a78bfa; + --release-public-preview-text: #e6f6e6; + + /* General Availability */ + --release-ga-bg: #172554; + --release-ga-border: #60a5fa; + --release-ga-text: #e6f6e6; +} + +.releaseNoteHeader { + display: flex; + gap: 0.875rem; + margin: 0 0 1.5rem; + padding: 1rem; + border: 1px solid var(--release-note-border); + border-radius: 0.75rem; + background: var(--release-note-background); + color: var(--release-note-text); +} + +.accent { + width: 0.25rem; + border-radius: 999px; + background: var(--release-note-border); +} + +.meta { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + align-items: center; +} + +.pill { + font-weight: 700; + font-size: 0.8rem; + text-transform: uppercase; +} + +.text { + margin: 0.35rem 0 0; +} + +.headerRow { + display: flex; + justify-content: space-between; + gap: 1rem; + align-items: flex-start; +} + +.languages { + display: flex; + flex-wrap: wrap; + gap: 0.375rem; + margin: 0; + padding: 0; + list-style: none; + align-items: center; +} + +.languageIcon svg { + width: 100%; + height: 100%; + display: block; +} + +.language { + display: flex; + align-items: center; + gap: 0.25rem; + margin-top: 10px; +} + +.supportedLanguages { + display: flex; + align-items: center; + gap: 0.5rem; +} + +@media (max-width: 640px) { + .headerRow { + flex-direction: column; + } +} \ No newline at end of file diff --git a/src/components/info/constants.js b/src/components/info/constants.js new file mode 100644 index 0000000000..1b32faa8ba --- /dev/null +++ b/src/components/info/constants.js @@ -0,0 +1,11 @@ +export const LANGUAGE_ICONS = { + Go: "/img/sdks/svgs/golang.svg", + Java: "/img/sdks/svgs/java.svg", + PHP: "/img/sdks/svgs/php.svg", + Python: "/img/sdks/svgs/python.svg", + TypeScript: "/img/sdks/svgs/typescript.svg", + ".NET": "/img/sdks/svgs/dotnet.svg", + Ruby: "/img/sdks/svgs/ruby.svg", + Rust: "/img/sdks/svgs/rust.svg", + "Temporal CLI": "/img/assets/terminal.svg", +}; \ No newline at end of file From abe9228e123ce19fb78414ae4ad324b86b1edeb0 Mon Sep 17 00:00:00 2001 From: flippedcoder Date: Wed, 3 Jun 2026 11:40:20 -0500 Subject: [PATCH 3/7] feat(components): updated ReleaseNoteHeader component to use child elements --- .../ReleaseNoteHeader/ReleaseNoteHeader.js | 37 +++++++++---------- .../ReleaseNoteHeader.module.css | 4 ++ 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.js b/src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.js index 74b0816bdd..11d42e2d4f 100644 --- a/src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.js +++ b/src/components/info/ReleaseNoteHeader/ReleaseNoteHeader.js @@ -53,9 +53,9 @@ function getTheme(type, overrides = {}) { export default function ReleaseNoteHeader({ // type can be "prerelease", "publicPreview", or "generalAvailability" type = "generalAvailability", - // If there is anything specific to say about the release, it can be passed here. It can also be a link if href is provided. - text, - // If text is a link, this is where the link can be passed. + // If there is anything specific to say about the release, it can be passed as a child to the component. It can also be a link if href is provided. + children, + // If child is a link, this is where the link can be passed. href, // These are the supported languages for the release. If provided, icons for these languages will be shown. languages = [], @@ -81,7 +81,6 @@ export default function ReleaseNoteHeader({ data-release-type={type} >