diff --git a/libs/blocks/CHANGELOG.md b/libs/blocks/CHANGELOG.md index 5958069fd..827ccd163 100644 --- a/libs/blocks/CHANGELOG.md +++ b/libs/blocks/CHANGELOG.md @@ -2,6 +2,8 @@ This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver). +## [0.53.0](https://github.com/deriv-com/deriv-com-v2/compare/blocks-0.52.0...blocks-0.53.0) (2023-12-20) + ## [0.52.0](https://github.com/deriv-com/deriv-com-v2/compare/blocks-0.51.0...blocks-0.52.0) (2023-12-18) diff --git a/libs/blocks/package.json b/libs/blocks/package.json index 52bf74bac..124862c26 100644 --- a/libs/blocks/package.json +++ b/libs/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@deriv-com/blocks", - "version": "0.52.0", + "version": "0.53.0", "main": "./index.js", "exports": { ".": { diff --git a/libs/blocks/src/lib/live-market/tab/tab.stories.tsx b/libs/blocks/src/lib/live-market/tab/tab.stories.tsx index cf930fe37..9c8aa5055 100644 --- a/libs/blocks/src/lib/live-market/tab/tab.stories.tsx +++ b/libs/blocks/src/lib/live-market/tab/tab.stories.tsx @@ -26,9 +26,9 @@ export const Default: Story = { disclaimer="*Prices are used for currency conversion and are published for reference only. Prices shown on our website are indicative and for reference only." link={{ href: '/', content: 'More forex' }} tabs={[ - { children: 'Forex' }, - { children: 'Derived Indices' }, - { children: 'Etfs' }, + { content: 'Forex' }, + { content: 'Derived Indices' }, + { content: 'Etfs' }, ]} > , - instrument: 'GBP/USD', + instrument: 'EUR/USD DFX 10 Index', changePercentage: '+0.11%', status: 'down', bidPrice: '1.24112', diff --git a/libs/blocks/src/lib/platform/tab/tab.stories.tsx b/libs/blocks/src/lib/platform/tab/tab.stories.tsx index 9d9440205..28e89b228 100644 --- a/libs/blocks/src/lib/platform/tab/tab.stories.tsx +++ b/libs/blocks/src/lib/platform/tab/tab.stories.tsx @@ -22,11 +22,7 @@ export const Default: Story = { header="Header here" description="desciption here description here" className="bg-background-primary-base" - tabs={[ - { children: 'All' }, - { children: 'CFDs' }, - { children: 'Options' }, - ]} + tabs={[{ content: 'All' }, { content: 'CFDs' }, { content: 'Options' }]} > = ({ className={qtMerge( 'flex flex-col', 'rounded-xl', - 'h-[262px] w-[286px]', + 'h-[284px] w-[296px]', 'bg-background-primary-container', 'p-general-xl', 'gap-gap-xl', className, )} > -
+
{instrumentIcon} diff --git a/libs/components/src/lib/tab/base/index.tsx b/libs/components/src/lib/tab/base/index.tsx index 07fb1da0d..87bde6f1d 100644 --- a/libs/components/src/lib/tab/base/index.tsx +++ b/libs/components/src/lib/tab/base/index.tsx @@ -5,10 +5,14 @@ import { cloneElement, isValidElement, } from 'react'; -import { Tab } from '@deriv/quill-design'; +import { Tab, qtJoin } from '@deriv/quill-design'; + +type TabTrigger = Omit, 'children'> & { + content: ReactNode; +}; export interface TabProps { - tabs: ComponentProps[]; + tabs: TabTrigger[]; className?: string; children: ReactNode; } @@ -17,9 +21,13 @@ export const TabBase = ({ tabs, children, className }: TabProps) => { return ( - {tabs.map(({ children, ...rest }, i) => ( - - {children} + {tabs.map(({ content, className, ...rest }, i) => ( + + {content} ))} diff --git a/libs/components/src/lib/tab/base/tab.stories.tsx b/libs/components/src/lib/tab/base/tab.stories.tsx index c6c16dce5..6e6eb1bde 100644 --- a/libs/components/src/lib/tab/base/tab.stories.tsx +++ b/libs/components/src/lib/tab/base/tab.stories.tsx @@ -14,9 +14,9 @@ export const Default: Story = { return (
Home Tab