Skip to content

Commit

Permalink
chore: prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfranzke
mfranzke committed Jan 2, 2025
1 parent 5869466 commit 6359a17
Showing 1 changed file with 23 additions and 20 deletions.
43 changes: 23 additions & 20 deletions docs/research/footer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@

## Overview

| Design System | Component | Comment |
| ------------- |:-----------------------------------------------------------------------------------------:|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| [Atlassian Design System](https://bitbucket.org/atlassian/atlaskit/src/master/) | ❌ | -- |
| [Bootstrap](https://github.com/twbs/bootstrap) | ❌ | -- |
| [GitHub Primer](https://github.com/primer/css) | ❌ | -- |
| [GitLab Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com) | ❌ | -- |
| [HP Enterprise Grommet](https://github.com/grommet/grommet) | [footer](https://v2.grommet.io/footer) | Simple container with alignment, padding, fill... Does not offer any layout like columns. |
| [IBM Carbon](https://github.com/carbon-design-system/carbon) | ❌ | -- |
| [Material UI](https://github.com/mui/material-ui) | ❌ | -- |
| [MongoDB.design](https://github.com/mongodb/design) | ❌ | -- |
| [Porsche Design System](https://github.com/porsche-design-system/porsche-design-system) | ❌ | -- |
| [SBB Lyne](https://github.com/lyne-design-system/lyne-components) | [footer](https://lyne-storybook.app.sbb.ch/?path=/docs/elements-sbb-footer--docs) | Footer is a simple wrapper that provides a slot to add any layouts and components. Nice: the footer is often displayed with the sbb-clock component (a stylised, animated station clock). |
| [Shopify Polaris](https://github.com/Shopify/polaris) | ❌ | -- |
| [SNCF Design System](https://gitlab.com/SNCF/wcs) | ❌ | -- |
| [Telefonica Mistica](https://github.com/Telefonica/mistica-web) | ❌ | |
| [Telekom Scale](https://github.com/telekom/scale) | [footer](https://telekom.github.io/scale/?path=/docs/components-telekom-footer--standard) | Footer contains a Telekom logo. There are slots for a legal line and a list of links. |
| [Washington Post Design System](https://build.washingtonpost.com/) | ❌ | |
| Design System | Component | Comment |
| --------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Atlassian Design System](https://bitbucket.org/atlassian/atlaskit/src/master/) | ❌ | -- |
| [Bootstrap](https://github.com/twbs/bootstrap) | ❌ | -- |
| [GitHub Primer](https://github.com/primer/css) | ❌ | -- |
| [GitLab Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com) | ❌ | -- |
| [HP Enterprise Grommet](https://github.com/grommet/grommet) | [footer](https://v2.grommet.io/footer) | Simple container with alignment, padding, fill... Does not offer any layout like columns. |
| [IBM Carbon](https://github.com/carbon-design-system/carbon) | ❌ | -- |
| [Material UI](https://github.com/mui/material-ui) | ❌ | -- |
| [MongoDB.design](https://github.com/mongodb/design) | ❌ | -- |
| [Porsche Design System](https://github.com/porsche-design-system/porsche-design-system) | ❌ | -- |
| [SBB Lyne](https://github.com/lyne-design-system/lyne-components) | [footer](https://lyne-storybook.app.sbb.ch/?path=/docs/elements-sbb-footer--docs) | Footer is a simple wrapper that provides a slot to add any layouts and components. Nice: the footer is often displayed with the sbb-clock component (a stylised, animated station clock). |
| [Shopify Polaris](https://github.com/Shopify/polaris) | ❌ | -- |
| [SNCF Design System](https://gitlab.com/SNCF/wcs) | ❌ | -- |
| [Telefonica Mistica](https://github.com/Telefonica/mistica-web) | ❌ | |
| [Telekom Scale](https://github.com/telekom/scale) | [footer](https://telekom.github.io/scale/?path=/docs/components-telekom-footer--standard) | Footer contains a Telekom logo. There are slots for a legal line and a list of links. |
| [Washington Post Design System](https://build.washingtonpost.com/) | ❌ | |

## Conclusion

Expand All @@ -39,26 +39,29 @@ The assumption here is that footers are often very individually structured, so t
🧠 _Should the contents of the footer be transferred exclusively as data per property? Or are the contents mainly assembled "manually" via various (sub)components?_

#### data props only

**Pro**

- easier to use for devs
- the integrity of the footer is guaranteed. a standardised look is maintained.

**Contra**

- not consistent with the approach of existing components
- not very flexible
- links cannot be customised, which may be necessary depending on the framework

#### (sub)components only

**Pro**

- flexible in use
- standardised use within the DST
- structure of the footer is represented in the template

**Contra**

- devs must strictly follow the docs to build a footer
- there are no active guides, such as code completion or type checking, when using the footer component
- potentially more errors are possible
- devs need to write more code in the template



0 comments on commit 6359a17

Please sign in to comment.