@uob-web-and-digital/component-library 0.0.75 → 0.0.76

package/dist/components/molecules/Tab/Tab.d.ts

@@ -22,6 +22,21 @@ export interface TabProps {
      * Is the tab active
      */
     isActive: boolean;
+    /**
+     * Does the tab have the focus state
+     */
+    hasFocus: boolean;
+    /**
+     * if enabled this will add a hash value to the URL to aid navigation and linking
+     * e.g. if you name the block modules and each tab is name term-[1,2,3] etc
+     * a hash of '#modules-term-1' will be added to the URL when the user clicks a tab or
+     * navigates a tab using the keyboard
+     */
+    enableHashNavigation?: boolean;
+    /**
+     * If used, the name of the parent tabs block
+     */
+    tabsBlockName?: string;
     /**
      * The ref for the top of the tab list
      */
@@ -35,4 +50,4 @@ export interface TabProps {
      */
     handleKeyboardNavigation: (e: KeyboardEvent) => void;
 }
-export default function Tab({ id, theme, inverse, tabItem, isActive, handleClick, handleKeyboardNavigation: handleKeyboardNavigation }: TabProps): ReactElement | null;
+export default function Tab({ id, theme, inverse, tabItem, isActive, hasFocus, tabsBlockName, handleClick, handleKeyboardNavigation: handleKeyboardNavigation }: TabProps): ReactElement | null;

package/dist/components/organisms/TabsBlock/TabsBlock.d.ts

@@ -37,5 +37,16 @@ export interface TabsBlockProps {
      * use CSS rules instead of these spacing props
      */
     removeBottomPadding?: boolean;
+    /**
+     * a unique name to help identify the tab block on a page with multiple tab blocks
+     */
+    name?: string;
+    /**
+     * if enabled this will add a hash value to the URL to aid navigation and linking
+     * e.g. if you name the block modules and each tab is name term-[1,2,3] etc
+     * a hash of '#modules-term-1' will be added to the URL when the user clicks a tab or
+     * navigates a tab using the keyboard
+     */
+    enableHashNavigation?: boolean;
 }
-export default function TabsBlock({ theme, inverse, title, description, tabItems, fullWidth, htmlTag, removeBottomPadding }: TabsBlockProps): ReactElement | null;
+export default function TabsBlock({ theme, inverse, title, description, tabItems, fullWidth, htmlTag, removeBottomPadding, name, enableHashNavigation }: TabsBlockProps): ReactElement | null;

package/dist/components/organisms/TabsBlock/TabsBlock.stories.d.ts

@@ -15,6 +15,7 @@ export default meta;
 type Story = StoryObj<typeof TabsBlock>;
 export declare const Default: Story;
 export declare const LightOrInverse: Story;
+export declare const WithHashNavigation: Story;
 export declare const WithoutHeadingOrDescription: Story;
 export declare const WithoutDescription: Story;
 export declare const OneButton: Story;

package/dist/index.d.ts

@@ -1384,8 +1384,19 @@ interface TabsBlockProps {
      * use CSS rules instead of these spacing props
      */
     removeBottomPadding?: boolean;
+    /**
+     * a unique name to help identify the tab block on a page with multiple tab blocks
+     */
+    name?: string;
+    /**
+     * if enabled this will add a hash value to the URL to aid navigation and linking
+     * e.g. if you name the block modules and each tab is name term-[1,2,3] etc
+     * a hash of '#modules-term-1' will be added to the URL when the user clicks a tab or
+     * navigates a tab using the keyboard
+     */
+    enableHashNavigation?: boolean;
 }
-declare function TabsBlock({ theme, inverse, title, description, tabItems, fullWidth, htmlTag, removeBottomPadding }: TabsBlockProps): ReactElement | null;
+declare function TabsBlock({ theme, inverse, title, description, tabItems, fullWidth, htmlTag, removeBottomPadding, name, enableHashNavigation }: TabsBlockProps): ReactElement | null;
 
 interface TextWithBackgroundProps {
     /**