---
# System prepended metadata

title: Sideproject Time - Design System

---

# Sideproject Time - Design System

Issue: https://github.com/hausgold/designsystem-web/issues/615
## Done
### Fixed: Jest does not render portals 
(https://github.com/hausgold/designsystem-web/issues/525)

- This PR adds a createPortal mock for Jest. This makes Jest render portals as usual; which fixes the issue that those elements were rendered outside of Jest's container.

- It also adds a simple snapshot test for the Drawer:
> 
>     Note: The change in setup.ts @ 6d69f2a (see here) made it so that not only the first child was snapshotted, but everything inside Jest's container. This was necessary so we're able to snapshot portal'ed elements - they create more than one element. This updated all other snapshots, too, and in some cases, there were parts missing which now got added to the snapshot. Oops..
> 
>     But: Notably, Menu, Drawer and Menu no
>     w properly render in snapshots.

### Added: New component generator 
(https://github.com/hausgold/designsystem-web/issues/62)

- It basically only needs to create a new component with CSF or MDX documentation as well as the basic test. That'd already help massively when creating new components!

Libs:

http://www.hygen.io/
https://plopjs.com/
https://www.npmjs.com/package/slush


### Add Storysource 
(https://github.com/hausgold/designsystem-web/issues/616)

- Gewünscht ist ein extra Tab neben Abtract im Designsystem, der den SourceCode zu jeder Story zeigt
![](https://i.imgur.com/zYPbXna.png)

- Lösung: Storybook Source https://storybook.js.org/addons/@storybook/addon-storysource
1. npm install
2. Konfiguration mit Typescript
.storybook/main.js
```javascript
      name: '@storybook/addon-storysource',
      options: {
        loaderOptions: {
          parser: 'typescript',
        },
   
```
![](https://i.imgur.com/km7lBC7.png)

![](https://i.imgur.com/3EatQrw.png)

---

## WIP
### Create aliases and clean up exports 
(https://github.com/hausgold/designsystem-web/issues/395)

- consistent file structure like so for all components:
```
components/
  Foo/
   index.tsx
   Foo.tsx
   Foo.test.tsx
   SubFoo.tsx
   SubFoo.test.tsx
   useFoo.ts
   useFoo.test.ts
```
- all named instead of default exports ->  `[object Object]` is now replaced with the right component name 

### Added scales doc to theme pages 
(https://github.com/hausgold/designsystem-web/pull/619)
![](https://i.imgur.com/Gsxg899.png)
