= {
+ component: Highlight,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'The code wrapper: renders a `` block and runs ' +
+ 'highlight.js over it. This is what the shared code theme styles (surface, ' +
+ 'border, syntax palette). Toggle the theme in the toolbar to QA light vs dark; ' +
+ '`className` is the highlight.js language.',
+ },
+ },
+ layout: 'padded',
+ },
+ title: 'Components/Highlight',
+}
+
+export default meta
+
+type Story = StoryObj
+
+const js = `// Initialise the client
+import flagsmith from 'flagsmith'
+
+flagsmith.init({
+ environmentID: 'YOUR_ENVIRONMENT_KEY',
+ onChange: () => {
+ const bannerSize = flagsmith.getValue('banner_size')
+ },
+})`
+
+const ts = `import { useFlags } from 'flagsmith/react'
+
+type FlagName = 'banner_size' | 'my_feature'
+
+const flags = useFlags(['banner_size'])
+const size: number = flags.banner_size.value ?? 0`
+
+const json = `{
+ "flags": [
+ { "feature": "banner_size", "enabled": true, "value": 42 },
+ { "feature": "my_feature", "enabled": false, "value": null }
+ ]
+}`
+
+const yaml = `flags:
+ - feature: banner_size
+ enabled: true
+ value: 42`
+
+// Mirrors the React SDK snippet in code-help: markup tags inside JavaScript.
+const jsx = `export function HomePage() {
+ const flags = useFlags(['banner_size'])
+ return (
+
+
+
+ )
+}`
+
+export const JavaScript: Story = {
+ args: { children: js, className: 'javascript', forceExpanded: true },
+}
+
+export const TypeScript: Story = {
+ args: { children: ts, className: 'typescript', forceExpanded: true },
+}
+
+export const Json: Story = {
+ args: { children: json, className: 'json', forceExpanded: true },
+}
+
+export const Yaml: Story = {
+ args: { children: yaml, className: 'yaml', forceExpanded: true },
+}
+
+export const Jsx: Story = {
+ args: { children: jsx, className: 'javascript', forceExpanded: true },
+}
+
+// Embedded variant: transparent, for code whose container owns the surface.
+export const Embedded: Story = {
+ args: {
+ children: js,
+ className: 'javascript',
+ embedded: true,
+ forceExpanded: true,
+ },
+}
diff --git a/frontend/web/components/CodeHelp.tsx b/frontend/web/components/CodeHelp.tsx
index ad2dbb87e052..47959a888382 100644
--- a/frontend/web/components/CodeHelp.tsx
+++ b/frontend/web/components/CodeHelp.tsx
@@ -144,7 +144,6 @@ const SnippetItem: FC = ({
/>
{
+ if (this.state.focus) return this.state.value
+ if (this.props.children) return { ...this.state.value }
+ return this.props.disabled ? defaultDisabledValue : defaultValue
+ }
+
render() {
const {
children,
className,
- disabled,
element: Element,
+ embedded,
innerHTML,
} = this.props
const props = { className, ref: this.setEl }
@@ -125,23 +134,8 @@ class Highlight extends React.Component {
return {children}
}
- const html = this.props.preventEscape
- ? this.state.focus
- ? this.state.value
- : this.props.children
- ? { ...this.state.value }
- : disabled
- ? defaultDisabledValue
- : defaultValue
- : escapeHtml(
- this.state.focus
- ? this.state.value
- : this.props.children
- ? { ...this.state.value }
- : disabled
- ? defaultDisabledValue
- : defaultValue,
- )
+ const raw = this.getRawHtml()
+ const html = escapeHtml(raw)
return (
= ({ code, language = 'bash' }) => (
-
+
{code}
diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/CodeCard.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/CodeCard.tsx
index 270897ec8742..c0faddc9e182 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/CodeCard.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/CodeCard.tsx
@@ -47,7 +47,7 @@ const CodeCard: FC = ({
-
+
{code}