search

c4a8-web / shared-components

Storybook driven shared web components.
1 stars 1 forks source link

Hero Refactoring // Konsolidierung #154

Open Listor opened 2 months ago

Listor commented 2 months ago

Um die Anforderungen an die Hero Komponente zu besprechen, hier ein Ticket mit meiner Analyse, als Diskussionsgrundlage.

Hero Requirements

Listor commented 2 months ago
Listor commented 2 months ago

Akzeptanzkriterien:

  1. Konfiguration:
    • Standardmäßig nimmt die Komponente den Raum des Inhalts ein und zentriert diesen vertikal.
    • Der Hintergrund kann farbig, als Bild, SVG oder Lottie-Animation gestaltet sein, wobei die Breite prozentual einstellbar ist.
    • Optional kann eine Animation über beide Spalten hinweg eingefügt werden (Text-Icon-Animation wie auf Karriereseite)
  2. Layout:
    • Die Komponente besteht aus zwei Spalten (Standard: 8 Einheiten für Text, 4 für Bilder/Animationen), deren Breite anpassbar ist.
    • Inhaltsoptionen für die Textspalte: Overline, Headline, Subline, CTA-Liste.
    • Das Element in der Bildspalte ist standardmäßig oben positioniert (mobil immer oben?) und kann auch mittig oder unten angeordnet werden.
  3. Styling:
    • Textelemente können in 'Hell Light' für bessere Lesbarkeit auf verschiedenen Hintergründen angezeigt werden.
    • Die Inhalte der ersten Spalte skalieren fluid bis zu einer maximalen Größe.

@lenadaflis @kristinrolfes wie machen wir es mit der Positionen in der Bildspalte mobil? Soll dort auch das Element an die Position, die eingestellt ist oder an eine feste Position?

Die Thematik mit dem Back Button steht auch noch im Raum:

Der optionale Back Button. https://c4a8-web.github.io/shared-components/?path=/story/components-hero--hero-text-image-study der ist von der Position im Moment identisch mit dem Button auf den Detailseiten. also auch eher oben ausgerichtet. wenn wir jetzt den inhalt zentrieren, beißt sich das ja mit dem zurück button. Die frage ob wir ihn überhaupt brauchen oder wie wir dort mit der Position umgehen?

Listor commented 2 months ago
Listor commented 2 weeks ago

Der neue Hero ist jetzt mal auf der Karriere Seite eingebunden:

https://chartreuse-sky.cloudvent.net/de/karriere

@cakageka @lenadaflis @KristinRolfes

Was meint ihr?

KristinRolfes commented 2 weeks ago

Hi @Listor, sieht gut aus! Das Scrollverhalten ist nach wie vor sehr flatterig (aber auch der alte Hero auf der Karriere Seite)

Listor commented 2 weeks ago

Meinst du das der Container sticky bleibt? Das hat Nichts mit der Komponente zu tun.

KristinRolfes commented 2 weeks ago

@Listor, ich ich weiß, ist mir nur dabei wieder aufgefallen.

Listor commented 2 weeks ago

Für die Scroll Thematik warte ich eigentlich noch darauf, dass Safari das Feature hier umsetzt:

https://caniuse.com/mdn-css_properties_scroll-timeline

Dann bekommen wir glaube ich eine sehr weiches Scroll Erlebnis hin. Hab ich noch auf dem Schirm, aber die Abdeckung ist leider auch noch im Firefox nicht gegeben.

cakageka commented 2 weeks ago

@Listor Ich gehe davon aus, dass wir überprüfen sollen, ob uns etwas auffällt, das dort nicht hingehört, richtig? Das Einzige, was mir auffällt, ist, dass die gelbe Overline jetzt weiter läuft als zuvor. Tatsächlich scheint sie mir etwas zu lang zu sein.

Listor commented 2 weeks ago

@cakageka genau und ob das generell zu den Anforderungen passt. Die Laufweite sehe ich mir an, die läuft tatsächlich weiter.

Visuell ist es leicht anders, durch die abgestimmten Anforderungen.

Listor commented 2 weeks ago

Passt jetzt. Ist auch auf der Young Professionals eingebaut:

https://chartreuse-sky.cloudvent.net/de/young-professionals

Listor commented 1 week ago

@KristinRolfes @lenadaflis mir ist noch eine Frage zur mobilen Shape gekommen.

image

Hier im Beispiel ist die Shape ja oben verortet. Wenn ich diese nun unten verorte, was passiert dann mobil?

Ist dort die Shape immer oben oder in diesem Fall unter dem Content? Oder verhält es sich ganz anders?

KristinRolfes commented 1 week ago

@Listor, haben wir diese Beispiel gerade irgendwo online?

Listor commented 1 week ago

@KristinRolfes nee die Infos habe ich aus Figma gezogen.

Sitze gerade an der Positionierung und bin dabei über die Fragen gestolpert, weil ich sonst noch nicht weiß, wie ich es umsetzen sollte.

KristinRolfes commented 1 week ago

Ich stelle uns für Montag einen kurzen Termin ein, dann können wir die Optionen durchsprechen.

KristinRolfes commented 1 day ago

Doku nach Termin:

Mobil gehen wir mit kleinem Shape oben rechts um unser Corporate Design mitzunehmen. Große Bilder sind zudem zwischen Headline und Einführungstext möglich, jedoch optional. Anwendung bei z.B. Security Auge, Animationen im Karrierebereich etc.

Transitions bei Seitenwechsel in unserem Corporate Design können wir uns prinzipiell auch vorstellen, das Thema ist jedoch von einigen technischen Voraussetzungen abhängig und entsprechend nach hinten verschoben

Grobes Transition Beispiel als Reminder für später: https://dribbble.com/shots/3467342-Palmers-Hero