fix header font size and table label color

Author: roshni73

packages/go-ui-storybook/src/stories/Alert.stories.tsx

@@ -32,7 +32,7 @@ export const Info: Story = {
         name: 'info',
         type: 'info',
         nonDismissable: true,
-        description: 'This alert provides informative details to the user.',
+        title: 'This alert provides informative details to the user.',
     },
     parameters: {
         design: {
@@ -48,7 +48,7 @@ export const Success: Story = {
         name: 'success',
         type: 'success',
         nonDismissable: true,
-        description: 'This alert indicates a successful operation or task.',
+        title: 'This alert indicates a successful operation or task.',
     },
     parameters: {
         design: {
@@ -64,7 +64,7 @@ export const Warning : Story = {
         name: 'warning',
         type: 'warning',
         nonDismissable: true,
-        description: 'This alert warns the user about potential issues or risks.',
+        title: 'This alert warns the user about potential issues or risks.',
     },
 };
 
@@ -73,7 +73,7 @@ export const Danger : Story = {
         name: 'danger',
         type: 'danger',
         nonDismissable: true,
-        description: 'This alert indicates a dangerous or potentially harmful situation.',
+        title: 'This alert indicates a dangerous or potentially harmful situation.',
     },
     parameters: {
         design: {
@@ -88,7 +88,7 @@ export const NonDismissable: Story = {
     args: {
         name: 'danger',
         type: 'danger',
-        description: 'This alert indicates a dangerous or potentially harmful situation.',
+        title: 'This alert indicates a dangerous or potentially harmful situation.',
         nonDismissable: true,
     },
 };

packages/go-ui-storybook/src/stories/Breadcrumbs.stories.tsx

@@ -1,10 +1,26 @@
+import { ArrowDropRightLineIcon } from '@ifrc-go/icons';
 import type {
     Meta,
     StoryObj,
 } from '@storybook/react';
 
 import Breadcrumbs from './Breadcrumbs';
 
+interface Datum {
+    id: number;
+    label: string;
+}
+
+const data: Datum[] = [
+    { id: 1, label: 'Home' },
+    { id: 2, label: 'Africa' },
+    { id: 3, label: 'Benin' },
+];
+
+const keySelector = (datum: Datum) => datum.id;
+const labelSelector = (datum: Datum) => datum.label;
+const rendererParams = () => ({});
+
 type Story = StoryObj<typeof Breadcrumbs>;
 
 const meta: Meta<typeof Breadcrumbs> = {
@@ -25,7 +41,13 @@ export default meta;
 
 export const Default: Story = {
     args: {
-        children: ['Home', 'Africa', 'Angola'],
+        data,
+        keySelector,
+        labelSelector,
+        rendererParams,
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        renderer: (props) => <div {...props} />,
+        separator: <ArrowDropRightLineIcon />,
     },
 };
 

packages/go-ui-storybook/src/stories/Breadcrumbs.tsx

@@ -3,7 +3,9 @@ import {
     BreadcrumbsProps,
 } from '@ifrc-go/ui';
 
-function Breadcrumbs(props: BreadcrumbsProps) {
+function Breadcrumbs<KEY, DATUM, RENDERER_PROPS extends { children: React.ReactNode }>(
+    props: BreadcrumbsProps<KEY, DATUM, RENDERER_PROPS>,
+) {
     return (
         <PureBreadcrumbs {...props} /> // eslint-disable-line react/jsx-props-no-spreading
     );

packages/go-ui-storybook/src/stories/Header.stories.tsx

@@ -31,7 +31,7 @@ export const Default: Story = {
     args: {
         heading: 'Overview of the International Federation of Red Cross and Red Crescent Societies (IFRC)',
         headingDescription: 'The International Federation of Red Cross and Red Crescent Societies (IFRC) is the world’s largest humanitarian network.',
-        headingLevel: 2,
+        headingLevel: 1,
         headingContainerClassName: 'header-children',
     },
 };

packages/go-ui-storybook/src/stories/Table.stories.tsx

@@ -277,6 +277,7 @@ export const Default: Story = {
         filtered: false,
         pending: false,
         headersHidden: false,
+        headerRowClassName: 'table-header-row',
     },
 };
 
@@ -287,6 +288,7 @@ export const WithHeadersHidden: Story = {
         keySelector,
         caption: 'Animal Information Dataset',
         headersHidden: true,
+        headerRowClassName: 'table-header-row',
     },
 };
 
@@ -297,6 +299,7 @@ export const WithFixedColumnWidth: Story = {
         keySelector,
         caption: 'All columns utilize fixed width formatting.',
         fixedColumnWidth: true,
+        headerRowClassName: 'table-header-row',
     },
 };
 
@@ -307,5 +310,6 @@ export const WithResizableColumn: Story = {
         keySelector,
         caption: 'You can utilize the header column to adjust the width of each column.',
         resizableColumn: true,
+        headerRowClassName: 'table-header-row',
     },
 };

packages/go-ui-storybook/src/stories/index.css

@@ -177,4 +177,7 @@
 .table-link:hover {
     color: var(--go-ui-color-primary-red);
 }
+.table-header-row {
+    background:var(--go-ui-color-primary-gray-10);
+}
 

packages/ui/src/components/Heading/styles.module.css

@@ -4,7 +4,6 @@
     margin: 0;
     line-height: var(--line-height);
     font-size: var(--font-size);
-    font-weight: 500;
 
     &.modal-font-weight {
         font-weight: var(--go-ui-font-weight-medium);