Merge pull request #404 from Infineon/403-documentation-footer

Documentation: footer

packages/components/src/components/footer/Usage.mdx

@@ -0,0 +1,85 @@
+import { Meta  } from '@storybook/blocks';
+import * as FooterStories from './footer.stories';
+
+import FooterDefaultAnatomy from '../../../public-storybook/images/footer/footer-default-anatomy.png';
+import FooterLarge from '../../../public-storybook/images/footer/footer-large.png';
+import FooterMedium from '../../../public-storybook/images/footer/footer-medium.png';
+import FooterSmall from '../../../public-storybook/images/footer/footer-small.png';
+import FooterMobile from '../../../public-storybook/images/footer/footer-mobile.png';
+import FooterSidebar from '../../../public-storybook/images/footer/footer-sidebar.png';
+
+<Meta of={FooterStories} />
+
+
+# Footer
+The application's footer is an area located at the bottom of every page on a website, below the main body content.
+> The footer content must be aligned with the legal department.
+
+## Anatomy
+<img src={FooterDefaultAnatomy} alt="Footer Anatomy" />
+
+
+**Container (1)**\
+Overall container that holds the entire footer.
+
+
+**Title (2)**\
+Used to summarize the belonging footer links. The title itself is non-clickable and is just for information purposes.
+
+
+**Footer Link (3)**\
+Selected footer links which improve the overall user experience. The component that have been used here is the link component.
+
+
+**Footer Link Group (4)**\
+A group of footer links.
+
+
+**Logo (5)**\
+The Infineon logo which, when clicked, refers to the application home page.
+
+
+**Copyright information (6)**\
+Copyright information clarifies that the content on the website belongs to the owner or creator.
+
+
+**Social Media (7)**\
+A selection of social media channels can be displayed here.
+
+
+**Divider (8)**\
+Divides the legal part with the user centered part.
+
+
+**Legal Links (9)**\
+Necessary links like Imprint, Terms of use or Privacy policy. 
+
+
+## Variants
+
+### Large
+This footer is the most extensive footer, which includes up to 20 additional links to logo, social media and imprint, etc. Of course, fewer links can also be used. This footer is used for extensive as well as marketing websites.
+<img src={FooterLarge} alt="Footer Large" />
+
+### Medium
+The medium footer is our default variant and includes the minimum legal requirements as well as social media links and the Infineon logo. This footer is used if no further links are to be displayed. This footer is useful for internal applications.
+<img src={FooterMedium} alt="Footer Medium" />
+
+### Small
+The small footer should be seen as the standard for all applications. This footer offers the minimum legal requirements such as imprint and terms. For applications like internal dashboards without a marketing aspect without further links we recommend this footer.
+> If there is sidebar navigation in dashboard applications, the sidebar footer should be used instead.
+
+<img src={FooterSmall} alt="Footer Small" />
+
+### Sidebar Footer
+The sidebar footer is specially designed for dashboards with a sidebar. The sidebar is aligned with the left edge of the browser and the sidebar footer sits directly below it. it is also sticky, which means that the sidebar content scrolls away underneath it.
+<img src={FooterSidebar} alt="Footer Sidebar" width="50%" />
+
+## Mobile
+The mobile footer variants should be displayed `<1024px`.
+<img src={FooterMobile} alt="Footer Anatomy" />
+
+
+***
+Check out the Figma component: **[Footer](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=16471-10482&mode=design&t=u8DM3Kg38GVrn9Ka-4)**
+***