[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"HfUgoFDQVvZtBGu97l9APSweypTJHdp8BPsJK5iX7Po":75,"klAKUqGoTFYOPpKlEM29VzxSVuaIpx7-EffeHNPfeX0":206,"_apollo:default":248},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":117,"postContentElements":13,"evergreen":13,"tags":142,"postWpBody":172,"wpHeaderImage":176,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":189,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":175,"wpYoastHead":199,"author":200},"NodeWpPost","739","Storybook, die bessere Kitchensink?",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1678174724,"UTC","+00:00","2023-03-07T07:38:44+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1676881211,"2023-02-20T08:20:11+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/storybook-die-bessere-kitchensink",[94,101,108,113],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","Storybook, die bessere Kitchensink? | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/storybook-die-bessere-kitchensink","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":109,"tag":96,"attributes":114},{"__typename":111,"property":115,"content":116},"og:image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/styles/meta_og_image/public/wp-migration/wordpress-media-image/2023/02/BLOG_Storybook_v01_SHARING-1204x630px.jpg?h=3ecc83bb&itok=82u_XaPB",{"__typename":118,"id":119,"name":120,"path":121,"status":20,"weight":122,"description":123,"langcode":127,"changed":128,"metatag":131},"TermCategories","7","Technologie","/kategorie/technologie",0,{"__typename":124,"processed":125,"format":126},"Text","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen. ","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":129,"timezone":85,"offset":86,"time":130},1713772777,"2024-04-22T07:59:37+00:00",[132,135,139],{"__typename":95,"tag":96,"attributes":133},{"__typename":98,"name":99,"content":134},"Technologie | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":136},{"__typename":98,"name":137,"content":138},"description","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen.",{"__typename":102,"tag":103,"attributes":140},{"__typename":105,"href":141,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/technologie",[143,148,152,156,160,164,168],{"__typename":144,"id":145,"name":146,"path":147,"weight":122},"TermTags","325","design","/tag/design",{"__typename":144,"id":149,"name":150,"path":151,"weight":122},"371","Dokumentation","/tag/dokumentation",{"__typename":144,"id":153,"name":154,"path":155,"weight":122},"458","Feature","/tag/feature",{"__typename":144,"id":157,"name":158,"path":159,"weight":122},"925","OpenSource","/tag/opensource",{"__typename":144,"id":161,"name":162,"path":163,"weight":122},"1018","Projekt","/tag/projekt",{"__typename":144,"id":165,"name":166,"path":167,"weight":122},"1243","Storybook","/tag/storybook",{"__typename":144,"id":169,"name":170,"path":171,"weight":122},"1387","Usecase","/tag/usecase",{"__typename":173,"processed":174,"format":126,"summary":175},"TextSummary","\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Die Idee hinter \u003Ca href=\"https://storybook.js.org/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook\u003C/a> ist, das Entwickeln von Komponenten zu vereinfachen und übersichtlicher zu gestalten und das ganze isoliert von jeglicher Business Logic. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Storybook ist ein Open Source Tool, welches in ein Projekt integriert wird und so koexistiert. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Storybook existiert schon seit mehreren Jahren und wird laufend weiterentwickelt. Die aktuell (stable) Version liegt derzeit bei 6, wobei sich Version 7 schon in der Pre-Release Phase befindet und voraussichtlich in den nächsten Wochen bis Monaten (als stable Version) verfügbar sein wird. Es gibt die Dokumentation sowohl für pures JavaScript, als auch für die gängigsten JavaScript Frameworks, wie zum Beispiel Angular, Vue oder React.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Für jede Komponente, die ein Teil von Storybook sein soll, legen wir eine “.stories”-Datei an. In dieser definieren wir dann Stories mit Mock-Daten, die wir gern testen möchten. In den “.stories”-Dateien wird definiert, wie die Komponente heißt, die in Storybook hinzugefügt werden soll, welche Werte zum Testen zur Verfügung stehen sollen und wie Kombinationen aus Komponenten (auch das ist möglich) miteinander zusammenspielen sollen.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>Konkret sieht das dann in unserem Fall so aus:\u003C/strong>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"wide-center col-xsmall-12 col-medium-8 col-medium-offset-2 \">\n            \n\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"a1de9478-7e51-4e9d-89a8-e297e3246ab4\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw.webp?itok=MsbY29ZL 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw.webp?itok=YivMxYj0 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1439\" height=\"898\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw.webp?itok=v8_gmdch 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw.webp?itok=3xvP_i0d 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"639\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw.webp?itok=8_TRQOtN 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw.webp?itok=IHF22Dfx 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"465\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw.webp?itok=wCeiFoIM 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw.webp?itok=CdqBdz4N 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"300\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw.webp?itok=WqmX_zDj 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw.webp?itok=osTW_YIy 2x\" type=\"image/webp\" width=\"1439\" height=\"898\">\n                  \u003Cimg loading=\"lazy\" width=\"1439\" height=\"898\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw.webp.jpg?itok=osTW_YIy\" alt=\"5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw\" title=\"5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n\u003Cfigcaption>Storybook in einem Angular-Projekt\u003C/figcaption>\n\u003C/figure>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Die Beschreibungen, Namen und Standardwerte der Inputs holt sich Storybook ganz magisch 😉 selbst aus dem Code. Et voilà, die Komponente kann in Storybook getestet werden. Werte können direkt im Browser geändert werden und deren Verhalten und Aussehen getestet werden.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cstrong>Im Browser schaut das ganze dann so aus:\u003C/strong>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"wide-center col-xsmall-12 col-medium-8 col-medium-offset-2 \">\n            \n\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"6fd88406-9143-401d-926b-bd4301af21fe\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc.webp?itok=dMaDnOnn 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc.webp?itok=LE13E0PE 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1273\" height=\"699\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc.webp?itok=ZDxRK_6z 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc.webp?itok=QcBjh6LF 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"562\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc.webp?itok=d2KFOcSI 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc.webp?itok=5l4Tq02o 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"409\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc.webp?itok=OjLuRXqP 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc.webp?itok=FE8y9a0B 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"264\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc.webp?itok=Knekfi3Q 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc.webp?itok=C5Qe76bi 2x\" type=\"image/webp\" width=\"1273\" height=\"699\">\n                  \u003Cimg loading=\"lazy\" width=\"1273\" height=\"699\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc.webp.jpg?itok=C5Qe76bi\" alt=\"YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc\" title=\"YEFip-9lSc5DBcfiTvEeBc5lDmqrkyBdkft-5dZb3j8iEFD62iuKoHJl_xqoHuS8rMHn_zTQiA88CITZ-Zg41ADgb73zGghsSDkWN3aR7p7_fHOp2zyvxM5xYz_zHgXac8MaMjLmhincjMDCZgy1MYc\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n\u003Cfigcaption>Storybook im Browser – man kann hier beispielsweise die verschiedenen Buttontypen (primary, secondary) auswählen und der Button spiegelt das direkt wider.\u003C/figcaption>\n\u003C/figure>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch1>Unsere Erfahrungen\u003C/h1>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Es sind die verschiedensten Frameworks gut verständlich dokumentiert,  dadurch ist Storybook schnell aufgesetzt und es kann ohne viel Aufwand gleich damit gestartet werden.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Durch den Einsatz von Storybook nehmen wir uns automatisch mehr Zeit, Komponenten und deren Features genau durchzudenken. Komponenten werden zunächst am Reißbrett gedacht, ohne sich zu sehr mit den speziellen Anforderungen für die App aufzuhalten. Das hat uns automatisch dazu gebracht, die Komponenten granularer zu denken und so aufs Wesentliche zu reduzieren und mehr auf Wiederverwendbarkeit zu achten. Im zweiten Schritt kann dann noch genauer überlegt werden, wie die Komponenten für die spezielleren Einsatzzwecke erweitert werden müssen oder ob dafür weitere Komponenten nötig sind.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Uns passiert es oft, dass im Laufe eines Projekts das Kommentieren des Codes vernachlässigt wird und wir uns dann Monate später beim Weiterentwickeln ärgern, dass Kommentare fehlen. Da Storybook Kommentare von Datenfeldern erkennt und als Beschreibung darstellt, laufen wir weniger Gefahr, das Kommentieren zu vernachlässigen. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Wenn wir an die Weiterentwicklung von Projekten denken, dann sehen wir den größten Vorteil von Storybook darin, Anpassungen und deren Auswirkungen von Komponenten effizienter testen zu können. Denn durch die verschiedenen Stories, die im Vorfeld angelegt wurden, kann so jeder Use Case durchgetestet werden. Vor allem auch Use Cases, die nicht oft vorkommen und daher leicht übersehen werden können. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Zum Beispiel soll eine Komponente, die mehrere Status hat, die die Darstellung jener Komponente beeinflussen, weiterentwickelt werden. Angenommen, es kommt ein neuer Status dazu, durch den Änderungen am Layout notwendig sind. Durch die schon vorher definierten Use Cases (bzw. Storys), kann jetzt Story für Story kontrolliert werden, ob und welche Auswirkungen die Änderungen auf die Komponente haben.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch1>Zusammenarbeit mit Design\u003C/h1>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Bevor wir Entwickler:innen mit dem Programmieren loslegen, bekommen wir von unseren Designer:innen einen Style Guide. Dieser definiert unter anderem das zu verwendende Farbschema, Typographie und Spacing-System. Das sieht dann zum Beispiel so aus:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"wide-center col-xsmall-12 col-medium-8 col-medium-offset-2 \">\n            \n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"4af519dc-a9c3-41e3-b63f-e1bd39c32aee\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA.webp?itok=hj_FD_aS 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA.webp?itok=AjN5-2Qs 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"669\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA.webp?itok=cC2QzIk6 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA.webp?itok=CugOJB-b 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"476\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA.webp?itok=CQEgPE8e 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA.webp?itok=4VHxTXgC 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"346\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA.webp?itok=xWNtw0_M 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA.webp?itok=yu4DDshh 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"223\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA.webp?itok=YHRW3ll8 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA.webp?itok=MCk144hU 2x\" type=\"image/webp\" width=\"1600\" height=\"743\">\n                  \u003Cimg loading=\"lazy\" width=\"1600\" height=\"743\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA.webp.jpg?itok=MCk144hU\" alt=\"143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA\" title=\"143GKOwYQ2cYF5Qh-GeB2yMRA7JIvcCnnkV9mj0Uu0w6ccGsNwR9iDguTaputmxexk-lspdbAPyUCXbGXiDoYpP-EylicHbRMzpwgjAkFiwnRq5kV5pi9b_vl90AtBGK7cf9L_OlOQpfWUeweGrMWTA\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"wide-center col-xsmall-12 col-medium-8 col-medium-offset-2 \">\n            \n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"bb69e2ab-ff4c-45bb-8406-1367a62a716f\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk.webp?itok=u7rrOvxQ 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk.webp?itok=OX1tRaSI 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"858\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk.webp?itok=Vl3vkEfY 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk.webp?itok=w3r8gxt4 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"610\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk.webp?itok=UlkCgyNR 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk.webp?itok=AowmrJGr 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"444\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk.webp?itok=25jcwWeT 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk.webp?itok=CaPbV5lx 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"286\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk.webp?itok=T7TYPpoV 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk.webp?itok=R_sQeEMQ 2x\" type=\"image/webp\" width=\"1600\" height=\"953\">\n                  \u003Cimg loading=\"lazy\" width=\"1600\" height=\"953\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk.webp.jpg?itok=R_sQeEMQ\" alt=\"OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk\" title=\"OEkwn8kZOGxK7DQzSLfqFuX_cBPxwtPSxf6cjlxcGBsRVqg2OuoMuptgEciXnQC_SKrSy3LKUIHAg66Ca0ZMleTE4LdW3GpKNQUfGiFIx_I4996sjO7YkuH1wsvmXkIX2XpI45_V4DuLcSbN1wAISUk\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>Aber nicht nur das, im Style Guide sind ebenfalls alle Komponenten und deren Zustände  genauestens beschrieben. Hier ein kleiner Auszug wie so etwas aussieht:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Genau da kommt Storybook zum Einsatz. Mithilfe von Storybook entwickeln wir die Komponenten genau nach Vorgabe des Style Guides. Zusätzlich gibt es laufende Abstimmungen mit unseren Designer:innen während der gesamten Entwicklungszeit, um sicherzugehen, dass die Komponenten genauso aussehen und genauso funktionieren, wie von unseren Designer:innen konzipiert. Diese Kombination aus Dokumentation und Abstimmungen zwischen den Abteilungen hilft uns enorm bei der Qualitätssicherung.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch1>Fazit \u003C/h1>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Für mich hat Storybook nur Vorteile. Es verbessert die technische Dokumentation, hilft bei der Weiterentwicklung von Projekten (oder Teilen davon), hilft bei der Abstimmung mit anderen Teilen des Teams oder das Übergeben des Projekts an Kolleg:innen, hilft langfristig die \u003Cem>technical debt\u003C/em> zu reduzieren, hilft bei der Qualitätssicherung und beim Testen, … . Wie man sieht, könnte ich noch ewig so weitermachen ;).\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Deshalb ist für mich Storybook die bessere Kitchensink.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Hast du schon mit Storybook gearbeitet? Welche Erfahrungen hast du mit Storybook gemacht?\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n","Unsere Erfahrungen mit Storybook und was wir davon halten.",{"__typename":177,"id":178,"excludeFromScreenreader":13,"mediaImage":179,"name":185,"path":188,"status":20},"MediaImage","382",{"__typename":180,"url":181,"width":182,"height":183,"alt":184,"title":185,"size":186,"mime":187},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2023/02/BLOG_STORYBOOK_TITEL-2880x1300px-scaled.jpg",2560,1156,"Headerbild zu Blogartikel Storybook","BLOG_STORYBOOK_TITEL-2880x1300px",903566,"image/jpeg","/media/382/edit",{"__typename":177,"id":190,"excludeFromScreenreader":13,"mediaImage":191,"name":196,"path":198,"status":20},"383",{"__typename":180,"url":192,"width":193,"height":194,"alt":195,"title":196,"size":197,"mime":187},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2023/02/BLOG_Storybook_v01_SHARING-1204x630px.jpg",1204,630,"Sharebild Blogartikel Storybook","BLOG_Storybook_v01_SHARING-1204x630px",781315,"/media/383/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"description\" content=\"Unsere Erfahrungen mit Storybook und was wir davon halten. Die Idee hinter Storybook ist, das Entwickeln von Komponenten zu vereinfachen und übersichtlicher zu gestalten und das ganze isoliert von jeglicher Business Logic.\" />\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/storybook-die-bessere-kitchensink/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Storybook, die bessere Kitchensink? - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Unsere Erfahrungen mit Storybook und was wir davon halten. Die Idee hinter Storybook ist, das Entwickeln von Komponenten zu vereinfachen und übersichtlicher zu gestalten und das ganze isoliert von jeglicher Business Logic.\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/storybook-die-bessere-kitchensink/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2023-02-20T09:20:11+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2023-03-07T08:38:44+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://lh6.googleusercontent.com/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"4 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/storybook-die-bessere-kitchensink/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://lh6.googleusercontent.com/5CFTRPWf9QVMssqaBRuUx4_pinNd8z8r2duJhkdq_urZ4yQJ4iFnwLxrhUtGrTQwULMKYTBdXG4QNcOkQmQUzLf64NWDnhAkJi8rSvNN4kp1UbD1pqAMDurax_N4fjCCGdHHhrxnjZNql8FqJOPPkvw\"},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/storybook-die-bessere-kitchensink/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/storybook-die-bessere-kitchensink/\",\"name\":\"Storybook, die bessere Kitchensink? - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/storybook-die-bessere-kitchensink/#primaryimage\"},\"datePublished\":\"2023-02-20T09:20:11+00:00\",\"dateModified\":\"2023-03-07T08:38:44+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/2a2e428a0a0a66124c61af2d13130f71\"},\"description\":\"Unsere Erfahrungen mit Storybook und was wir davon halten. Die Idee hinter Storybook ist, das Entwickeln von Komponenten zu vereinfachen und \\u00fcbersichtlicher zu gestalten und das ganze isoliert von jeglicher Business Logic.\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/storybook-die-bessere-kitchensink/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/2a2e428a0a0a66124c61af2d13130f71\",\"name\":\"Nicole Pepelko\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/f14ad00350a5119bbe33f50d69a52c9f?s=96&d=mm&r=g\",\"caption\":\"Nicole Pepelko\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":201,"id":202,"myRole":203,"name":204,"nickname":205},"User","17","Female Dev Power","nicole-pepelko","Nicole Pepelko",{"latestKnowhow":207},[208,223,236],{"__typename":79,"id":209,"title":210,"path":211,"wpTeaserText":212,"wpPromotedTeaserImage":13,"wpHeaderImage":213},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":177,"id":214,"excludeFromScreenreader":13,"mediaImage":215,"name":221,"path":222,"status":20},"3364",{"__typename":180,"url":216,"width":217,"height":218,"alt":219,"title":13,"size":220,"mime":187},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":224,"title":225,"path":226,"wpTeaserText":227,"wpPromotedTeaserImage":13,"wpHeaderImage":228},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":177,"id":229,"excludeFromScreenreader":13,"mediaImage":230,"name":234,"path":235,"status":20},"3355",{"__typename":180,"url":231,"width":217,"height":218,"alt":232,"title":13,"size":233,"mime":187},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":237,"title":238,"path":239,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":240},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":177,"id":241,"excludeFromScreenreader":21,"mediaImage":242,"name":246,"path":247,"status":20},"3303",{"__typename":180,"url":243,"width":217,"height":218,"alt":244,"title":13,"size":245,"mime":187},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":249,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":250,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":254,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":257,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":260,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":263,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":266,"Menu:nuxt-main-menu":269,"ROOT_QUERY":283,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":299,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":302,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":305,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":308,"Menu:footer":311,"TermCategories:7":321,"TermTags:325":332,"TermTags:371":333,"TermTags:458":334,"TermTags:925":335,"TermTags:1018":336,"TermTags:1243":337,"TermTags:1387":338,"MediaImage:382":339,"MediaImage:383":341,"User:17":343,"NodeWpPost:739":344,"MediaImage:3364":381,"NodeWpPost:1619":383,"MediaImage:3355":386,"NodeWpPost:1616":388,"MediaImage:3303":391,"NodeWpPost:1606":393},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",251,"internal",20,"expanded",21,"attributes",253],{"__ref":252},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",255,"internal",20,"expanded",21,"attributes",256],{"__ref":252},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",258,"internal",20,"expanded",21,"attributes",259],{"__ref":252},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",261,"internal",20,"expanded",21,"attributes",262],{"__ref":252},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",264,"internal",20,"expanded",21,"attributes",265],{"__ref":252},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",267,"internal",20,"expanded",21,"attributes",268],{"__ref":252},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",270],[271,273,275,277,279,281],{"__ref":272},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":274},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":276},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":278},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":280},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":282},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",284,"menu({\"name\":\"NUXT_MAIN_MENU\"})",285,"menu({\"name\":\"FOOTER\"})",287,"route({\"path\":\"/blog/storybook-die-bessere-kitchensink\"})",289,"latestKnowhow({\"excludeId\":\"739\",\"limit\":3})",292],"Query",{"__ref":286},"Menu:nuxt-main-menu",{"__ref":288},"Menu:footer",["null","__typename",77,"entity",290],{"__ref":291},"NodeWpPost:739",[293,295,297],{"__ref":294},"NodeWpPost:1619",{"__ref":296},"NodeWpPost:1616",{"__ref":298},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",300,"internal",20,"expanded",21,"attributes",301],{"__ref":252},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",303,"internal",20,"expanded",21,"attributes",304],{"__ref":252},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",306,"internal",20,"expanded",21,"attributes",307],{"__ref":252},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",309,"internal",21,"expanded",21,"attributes",310],{"__ref":252},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",312],[313,315,317,319],{"__ref":314},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":316},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":318},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":320},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",118,"id",119,"name",120,"path",121,"status",20,"weight",122,"description",322,"langcode",323,"changed",324,"metatag",325],["null","__typename",124,"processed",125,"format",126],{"__ref":252},["null","__typename",83,"timestamp",129,"timezone",85,"offset",86,"time",130],[326,328,330],["null","__typename",95,"tag",96,"attributes",327],["null","__typename",98,"name",99,"content",134],["null","__typename",95,"tag",96,"attributes",329],["null","__typename",98,"name",137,"content",138],["null","__typename",102,"tag",103,"attributes",331],["null","__typename",105,"href",141,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",144,"id",145,"name",146,"path",147,"weight",122],["null","__typename",144,"id",149,"name",150,"path",151,"weight",122],["null","__typename",144,"id",153,"name",154,"path",155,"weight",122],["null","__typename",144,"id",157,"name",158,"path",159,"weight",122],["null","__typename",144,"id",161,"name",162,"path",163,"weight",122],["null","__typename",144,"id",165,"name",166,"path",167,"weight",122],["null","__typename",144,"id",169,"name",170,"path",171,"weight",122],["null","__typename",177,"id",178,"excludeFromScreenreader",13,"mediaImage",340,"name",185,"path",188,"status",20],["null","__typename",180,"url",181,"width",182,"height",183,"alt",184,"title",185,"size",186,"mime",187],["null","__typename",177,"id",190,"excludeFromScreenreader",13,"mediaImage",342,"name",196,"path",198,"status",20],["null","__typename",180,"url",192,"width",193,"height",194,"alt",195,"title",196,"size",197,"mime",187],["null","__typename",201,"id",202,"myRole",203,"name",204,"nickname",205],["null","__typename",79,"id",80,"title",81,"changed",345,"created",346,"langcode",347,"path",92,"promote",21,"status",20,"sticky",21,"metatag",348,"category",357,"contentElements",13,"evergreen",13,"tags",359,"wpBody",374,"wpHeaderImage",375,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",377,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",175,"wpYoastHead",199,"author",379],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":252},[349,351,353,355],["null","__typename",95,"tag",96,"attributes",350],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",352],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",354],["null","__typename",111,"property",112,"content",81],["null","__typename",109,"tag",96,"attributes",356],["null","__typename",111,"property",115,"content",116],{"__ref":358},"TermCategories:7",[360,362,364,366,368,370,372],{"__ref":361},"TermTags:325",{"__ref":363},"TermTags:371",{"__ref":365},"TermTags:458",{"__ref":367},"TermTags:925",{"__ref":369},"TermTags:1018",{"__ref":371},"TermTags:1243",{"__ref":373},"TermTags:1387",["null","__typename",173,"processed",174,"format",126,"summary",175],{"__ref":376},"MediaImage:382",{"__ref":378},"MediaImage:383",{"__ref":380},"User:17",["null","__typename",177,"id",214,"excludeFromScreenreader",13,"mediaImage",382,"name",221,"path",222,"status",20],["null","__typename",180,"url",216,"width",217,"height",218,"alt",219,"title",13,"size",220,"mime",187],["null","__typename",79,"id",209,"title",210,"path",211,"wpTeaserText",212,"wpPromotedTeaserImage",13,"wpHeaderImage",384],{"__ref":385},"MediaImage:3364",["null","__typename",177,"id",229,"excludeFromScreenreader",13,"mediaImage",387,"name",234,"path",235,"status",20],["null","__typename",180,"url",231,"width",217,"height",218,"alt",232,"title",13,"size",233,"mime",187],["null","__typename",79,"id",224,"title",225,"path",226,"wpTeaserText",227,"wpPromotedTeaserImage",13,"wpHeaderImage",389],{"__ref":390},"MediaImage:3355",["null","__typename",177,"id",241,"excludeFromScreenreader",21,"mediaImage",392,"name",246,"path",247,"status",20],["null","__typename",180,"url",243,"width",217,"height",218,"alt",244,"title",13,"size",245,"mime",187],["null","__typename",79,"id",237,"title",238,"path",239,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",394],{"__ref":395},"MediaImage:3303"]