Rebeka DekanyandAntoine Clausse
ee8a9d9caf
* Add foundations and migrations docs * Add storybook/addon-designs version 8.2.1 * Test Figma link * Refactor Modal stories * Create figmaDesignUrl * Create foundations * Create feature flags docs * Create Storybook builds docs * Add storybook/addon-designs version 8.2.1 * Test Figma link * Add an example of Story with split-tests within the Storybook guidelines (#27260) * Add FormatCurrency demo in feature-flags.mdx * Add syntax highlight to code samples * Update stories with figmaDesignUrl * Figma access token * Use OLButton * Hide control for children and footer * Add primitive colors * Use useSplitTest instead * Update cloud builds docs with `storybook-push-trigger` * Make Foundations the default story --------- Co-authored-by: Antoine Clausse <antoine.clausse@overleaf.com> GitOrigin-RevId: 0729759803f190d89cf543d087eea86265b725f1
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import { useSplitTest } from '@/shared/context/split-test-context'
|
|
import { withSplitTests } from '../../../.storybook/utils/with-split-tests'
|
|
|
|
const FormatCurrency = () => {
|
|
const { variant } = useSplitTest('local-ccy-format')
|
|
const formatCurrency = (amount: number, narrowSymbol: boolean) => {
|
|
return variant === 'enabled'
|
|
? new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: 'USD',
|
|
currencyDisplay: narrowSymbol ? 'narrowSymbol' : 'name',
|
|
}).format(amount)
|
|
: `USD ${amount}`
|
|
}
|
|
return (
|
|
<div>
|
|
<strong>Variant:</strong> {JSON.stringify(variant)}
|
|
<br />
|
|
<strong>Long:</strong> {formatCurrency(1234.56, false)}
|
|
<br />
|
|
<strong>Short:</strong> {formatCurrency(1234.56, true)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const config = {
|
|
title: 'Storybook Guideline / Feature Flags', // Must match MDX title exactly
|
|
component: FormatCurrency,
|
|
}
|
|
|
|
export default {
|
|
...config,
|
|
...withSplitTests(config, ['local-ccy-format'], {
|
|
'local-ccy-format': {
|
|
description: 'Use local currency formatting',
|
|
control: { type: 'radio' as const },
|
|
options: ['default', 'enabled'],
|
|
},
|
|
}),
|
|
tags: ['!dev'], // hides in the sidebar
|
|
}
|
|
|
|
export const Story = {}
|