From f49ac09f57aa79bf2c27fe6a7ae7e6ffcf93869a Mon Sep 17 00:00:00 2001 From: gnxcode Date: Thu, 8 Feb 2024 11:26:46 -0500 Subject: [PATCH 1/2] Feat: add new variant documentation in tab --- docs/navigation/tabs.mdx | 68 +++++++++++++++++++--- package-lock.json | 14 ++--- package.json | 2 +- src/modules/docs/navigation/TabsCustom.tsx | 28 +++++---- 4 files changed, 87 insertions(+), 25 deletions(-) diff --git a/docs/navigation/tabs.mdx b/docs/navigation/tabs.mdx index 9e2c21e..30957b6 100644 --- a/docs/navigation/tabs.mdx +++ b/docs/navigation/tabs.mdx @@ -115,7 +115,7 @@ With the prop you can customize the font size of the
-#### TextColor +#### TextColor With the prop you can customize the color of the first tab @@ -143,7 +143,7 @@ With the prop you can customize the color of the fi
-#### Witdh +#### Witdh With the prop you can customize the size of the TabGroup @@ -171,7 +171,7 @@ With the prop you can customize the size of the TabGrou
-#### IndicatorColor +#### IndicatorColor With the prop you can customize the color of the line below the active tab @@ -199,7 +199,7 @@ With the prop you can customize the color of t
-#### WideLine +#### WideLine With the prop you can customize the width of the line under the active tab @@ -227,7 +227,7 @@ With the prop you can customize the width of the lin
-#### DisabledText +#### DisabledText With the prop you can customize a message for disabled tabs @@ -253,7 +253,7 @@ With the prop you can customize a message for di `} /> -#### Hidden +#### Hidden With the prop you can hide the tab @@ -281,6 +281,57 @@ With the prop you can hide the tab
+##### Tab Custom + +With the variant you can customize the appearance of the tabs. you can do so using the props: child ClassName, className, tabWidth textDisabledColor and others. + + + + + + + + + + + + + + + + + + + + + +`} /> + +
+

@@ -291,12 +342,15 @@ With the prop you can hide the tab dataTable={[ { title: 'orientation', default: 'horizontal', types: ['vertical', 'horizontal'] }, { title: 'wideLine', default: 3.2, types: ['number'] }, - { title: 'variant', default: 'primary', types: ['primary', 'secondary'] }, + { title: 'variant', default: 'primary', types: ['primary', 'secondary', 'tertiary'] }, { title: 'value', default: 0, types: ['number'] }, { title: 'disabledText', default: null, types: ['string'] }, { title: 'fontSize', default: null, types: ['base', 'xs', 'sm', 'lg', 'xl'] }, { title: 'width', default: null, types: ['number'] }, + { title: 'tabWidth', default: null, types: ['number'] }, + { title: 'tabMinWidth', default: null, types: ['number'] }, { title: 'textColor', default: null, types: ['string'] }, + { title: 'textDisabledColor', default: '#D1D5DB', types: ['string'] }, { title: 'indicatorColor', default: null, types: ['string'] }, { title: 'className', default: null, types: ['string'] }, { title: 'childClassName', default: null, types: ['string'] }, diff --git a/package-lock.json b/package-lock.json index 9e6eade..cf0fed2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@algolia/autocomplete-core": "^1.8.3", "@docsearch/react": "^3.5.1", "@vercel/analytics": "^1.0.1", - "dd360-ds": "6.20.1", + "dd360-ds": "https://pkg.csb.dev/dd3tech/bui/commit/519a144f/dd360-ds", "dd360-utils": "18.1.0", "gray-matter": "^4.0.3", "i18next": "^22.4.9", @@ -1525,9 +1525,10 @@ "dev": true }, "node_modules/dd360-ds": { - "version": "6.20.1", - "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.20.1.tgz", - "integrity": "sha512-1UUu9wKHao7KZhPEc275+A80PVZ7g9Cgcm8+SGDMtSYMyY96L2fjnZGRZou/5Q3P+ODsksXnQf2TEAG1ZFh1XQ==", + "version": "6.22.1", + "resolved": "https://pkg.csb.dev/dd3tech/bui/commit/519a144f/dd360-ds", + "integrity": "sha512-ZtCM5qOhY4A4LoZ1TV2sGbFp1XEzlOT9xPv9ffbE3DUM6WhkfZpipResY4L3/ViHiKyBZjxZ4Ci/6SAb9hs4dA==", + "license": "MIT", "dependencies": { "@heroicons/react": "^1.0.5", "@popperjs/core": "2.11.7", @@ -8005,9 +8006,8 @@ "dev": true }, "dd360-ds": { - "version": "6.20.1", - "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.20.1.tgz", - "integrity": "sha512-1UUu9wKHao7KZhPEc275+A80PVZ7g9Cgcm8+SGDMtSYMyY96L2fjnZGRZou/5Q3P+ODsksXnQf2TEAG1ZFh1XQ==", + "version": "https://pkg.csb.dev/dd3tech/bui/commit/519a144f/dd360-ds", + "integrity": "sha512-ZtCM5qOhY4A4LoZ1TV2sGbFp1XEzlOT9xPv9ffbE3DUM6WhkfZpipResY4L3/ViHiKyBZjxZ4Ci/6SAb9hs4dA==", "requires": { "@heroicons/react": "^1.0.5", "@popperjs/core": "2.11.7", diff --git a/package.json b/package.json index c6cb680..292dc76 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@algolia/autocomplete-core": "^1.8.3", "@docsearch/react": "^3.5.1", "@vercel/analytics": "^1.0.1", - "dd360-ds": "6.20.1", + "dd360-ds": "https://pkg.csb.dev/dd3tech/bui/commit/519a144f/dd360-ds", "dd360-utils": "18.1.0", "gray-matter": "^4.0.3", "i18next": "^22.4.9", diff --git a/src/modules/docs/navigation/TabsCustom.tsx b/src/modules/docs/navigation/TabsCustom.tsx index 7bc96f7..9deaac7 100644 --- a/src/modules/docs/navigation/TabsCustom.tsx +++ b/src/modules/docs/navigation/TabsCustom.tsx @@ -2,7 +2,7 @@ import { Tab, TabGroup } from 'dd360-ds' import { useState } from 'react' const TabsCustom = ({ option }: { option: string }) => { - const [variant, setVariant] = useState<'primary' | 'secondary'>('primary') + const [variant, setVariant] = useState<'primary' | 'secondary' | 'tertiary'>('primary') const [orientation, setOrientation] = useState<'vertical' | 'horizontal'>( 'horizontal' ) @@ -31,7 +31,7 @@ const TabsCustom = ({ option }: { option: string }) => { checked={variant === 'primary'} className="cursor-pointer" name="variant" - onClick={() => setVariant('primary')} + onChange={() => setVariant('primary')} type="radio" /> @@ -39,10 +39,18 @@ const TabsCustom = ({ option }: { option: string }) => { checked={variant === 'secondary'} className="cursor-pointer" name="variant" - onClick={() => setVariant('secondary')} + onChange={() => setVariant('secondary')} type="radio" /> + setVariant('tertiary')} + type="radio" + /> + )} @@ -52,7 +60,7 @@ const TabsCustom = ({ option }: { option: string }) => { checked={orientation === 'horizontal'} className="cursor-pointer" name="orientation" - onClick={() => setOrientation('horizontal')} + onChange={() => setOrientation('horizontal')} type="radio" /> @@ -60,7 +68,7 @@ const TabsCustom = ({ option }: { option: string }) => { checked={orientation === 'vertical'} className="cursor-pointer" name="orientation" - onClick={() => setOrientation('vertical')} + onChange={() => setOrientation('vertical')} type="radio" /> @@ -73,7 +81,7 @@ const TabsCustom = ({ option }: { option: string }) => { checked={fontSize === 'xs'} className="cursor-pointer" name="size" - onClick={() => setFontSize('xs')} + onChange={() => setFontSize('xs')} type="radio" /> @@ -81,7 +89,7 @@ const TabsCustom = ({ option }: { option: string }) => { checked={fontSize === 'sm'} className="cursor-pointer" name="size" - onClick={() => setFontSize('sm')} + onChange={() => setFontSize('sm')} type="radio" /> @@ -89,7 +97,7 @@ const TabsCustom = ({ option }: { option: string }) => { checked={fontSize === 'base'} className="cursor-pointer" name="size" - onClick={() => setFontSize('base')} + onChange={() => setFontSize('base')} type="radio" /> @@ -97,7 +105,7 @@ const TabsCustom = ({ option }: { option: string }) => { checked={fontSize === 'lg'} className="cursor-pointer" name="size" - onClick={() => setFontSize('lg')} + onChange={() => setFontSize('lg')} type="radio" /> @@ -105,7 +113,7 @@ const TabsCustom = ({ option }: { option: string }) => { checked={fontSize === 'xl'} className="cursor-pointer" name="size" - onClick={() => setFontSize('xl')} + onChange={() => setFontSize('xl')} type="radio" /> From ccb671802133cd9accd966d9b0adec2b5c8a0976 Mon Sep 17 00:00:00 2001 From: genixxavier Date: Thu, 8 Feb 2024 16:41:42 +0000 Subject: [PATCH 2/2] [ci]: format code --- src/modules/docs/navigation/TabsCustom.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/modules/docs/navigation/TabsCustom.tsx b/src/modules/docs/navigation/TabsCustom.tsx index 9deaac7..054e464 100644 --- a/src/modules/docs/navigation/TabsCustom.tsx +++ b/src/modules/docs/navigation/TabsCustom.tsx @@ -2,7 +2,9 @@ import { Tab, TabGroup } from 'dd360-ds' import { useState } from 'react' const TabsCustom = ({ option }: { option: string }) => { - const [variant, setVariant] = useState<'primary' | 'secondary' | 'tertiary'>('primary') + const [variant, setVariant] = useState<'primary' | 'secondary' | 'tertiary'>( + 'primary' + ) const [orientation, setOrientation] = useState<'vertical' | 'horizontal'>( 'horizontal' )