Merge pull request #14 from BrahimS/shared-ui/stories

test(stories): fix headings and more

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"liveshare.accessibility.soundsEnabled": false
+}

shared-ui/src/lib/Footer/index.stories.tsx

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Footer } from './index';
 
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-
 const meta: Meta<typeof Footer> = {
 	component: Footer,
 	title: 'Footer',
@@ -13,16 +10,6 @@ type Story = StoryObj<typeof Footer>;
 
 export const Primary = {
 	args: {
-		children: '',
-	},
-};
-
-export const Heading: Story = {
-	args: {
-		children: '',
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		expect(canvas.getByText(/Welcome to Footer!/gi)).toBeTruthy();
+		children: 'This is a footer',
 	},
 };

shared-ui/src/lib/Grid/ContainerWrapper.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ContainerWrapper, ContainerWrapperProps } from '../styles';
 
 export const Container = ({
-	size,
+	size = 'xl',
 	padding,
 	children,
 	style,

shared-ui/src/lib/Head/index.stories.tsx

@@ -13,20 +13,8 @@ type Story = StoryObj<typeof Head>;
 
 export const Primary = {
 	args: {
-		title: '',
-		description: '',
-		keywords: '',
-	},
-};
-
-export const Heading: Story = {
-	args: {
-		title: '',
-		description: '',
-		keywords: '',
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		expect(canvas.getByText(/Welcome to Head!/gi)).toBeTruthy();
+		title: 'This is the app title',
+		description: 'this is the app description',
+		keywords: 'keyword1, keyword2, keyword3',
 	},
 };

shared-ui/src/lib/Headings/index.stories.tsx

@@ -10,20 +10,61 @@ const meta: Meta<typeof Heading> = {
 export default meta;
 type Story = StoryObj<typeof Heading>;
 
-export const Primary = {
+export const H1: Story = {
 	args: {
-		as: '',
-		children: '',
-		style: '',
-		color: '',
-		role: '',
-		props: '',
+		as: 'h1',
+		children: 'Welcome to Heading!',
+		style: { fontFamily: 'sans-serif' },
+		color: 'red',
+		role: 'heading',
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		expect(canvas.getByText(/Welcome to Heading!/gi)).toBeTruthy();
 	},
 };
-
-export const H1: Story = {
+export const H2: Story = {
 	args: {
-		as: 'h1',
+		as: 'h2',
+		children: 'Welcome to Heading!',
+		style: { fontFamily: 'sans-serif' },
+		color: 'red',
+		role: 'heading',
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		expect(canvas.getByText(/Welcome to Heading!/gi)).toBeTruthy();
+	},
+};
+export const H3: Story = {
+	args: {
+		as: 'h3',
+		children: 'Welcome to Heading!',
+		style: { fontFamily: 'sans-serif' },
+		color: 'red',
+		role: 'heading',
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		expect(canvas.getByText(/Welcome to Heading!/gi)).toBeTruthy();
+	},
+};
+export const H4: Story = {
+	args: {
+		as: 'h4',
+		children: 'Welcome to Heading!',
+		style: { fontFamily: 'sans-serif' },
+		color: 'red',
+		role: 'heading',
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		expect(canvas.getByText(/Welcome to Heading!/gi)).toBeTruthy();
+	},
+};
+export const H5: Story = {
+	args: {
+		as: 'h5',
 		children: 'Welcome to Heading!',
 		style: { fontFamily: 'sans-serif' },
 		color: 'red',