From abc2f3eebf9d0431e5a9d5b0c458f8abf7ad5d3c Mon Sep 17 00:00:00 2001 From: Tim Auf dem Kampe Date: Wed, 30 Oct 2024 14:34:52 +0100 Subject: [PATCH 01/23] docs(Link): Add Link docs --- .../navigation/link/examples/dark.tsx | 2 +- .../examples/{inline.tsx => disabled.tsx} | 4 +- .../navigation/link/examples/external.tsx | 2 +- .../navigation/link/examples/inlineText.tsx | 2 +- .../navigation/link/examples/light.tsx | 2 +- .../navigation/link/examples/position1.tsx | 15 ++ .../navigation/link/examples/position2.tsx | 15 ++ .../navigation/link/examples/primary.tsx | 3 + .../link/examples/writingExtraDo.tsx | 10 + .../link/examples/writingExtraDont.tsx | 10 + .../link/examples/writingInlineDo.tsx | 7 + .../link/examples/writingInlineDont.tsx | 8 + .../navigation/link/guidelines.mdx | 193 ++++++++++++++++++ .../03-components/navigation/link/index.mdx | 2 +- .../navigation/link/overview.mdx | 74 +++++-- .../LiveCodeEditor/LiveCodeEditor.module.css | 5 + .../LiveCodeEditor/LiveCodeEditor.tsx | 7 +- .../mdx/components/DoAndDont/ExampleTile.tsx | 5 +- .../components/MdxFileView/MdxFileView.tsx | 10 + 19 files changed, 345 insertions(+), 31 deletions(-) rename packages/docs/src/content/03-components/navigation/link/examples/{inline.tsx => disabled.tsx} (63%) create mode 100644 packages/docs/src/content/03-components/navigation/link/examples/position1.tsx create mode 100644 packages/docs/src/content/03-components/navigation/link/examples/position2.tsx create mode 100644 packages/docs/src/content/03-components/navigation/link/examples/primary.tsx create mode 100644 packages/docs/src/content/03-components/navigation/link/examples/writingExtraDo.tsx create mode 100644 packages/docs/src/content/03-components/navigation/link/examples/writingExtraDont.tsx create mode 100644 packages/docs/src/content/03-components/navigation/link/examples/writingInlineDo.tsx create mode 100644 packages/docs/src/content/03-components/navigation/link/examples/writingInlineDont.tsx create mode 100644 packages/docs/src/content/03-components/navigation/link/guidelines.mdx diff --git a/packages/docs/src/content/03-components/navigation/link/examples/dark.tsx b/packages/docs/src/content/03-components/navigation/link/examples/dark.tsx index ec3e3f1da..6522ef225 100644 --- a/packages/docs/src/content/03-components/navigation/link/examples/dark.tsx +++ b/packages/docs/src/content/03-components/navigation/link/examples/dark.tsx @@ -1,5 +1,5 @@ import Link from "@mittwald/flow-react-components/Link"; - Zum Dashboard + Dark ; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/inline.tsx b/packages/docs/src/content/03-components/navigation/link/examples/disabled.tsx similarity index 63% rename from packages/docs/src/content/03-components/navigation/link/examples/inline.tsx rename to packages/docs/src/content/03-components/navigation/link/examples/disabled.tsx index 97914402d..5c5f35e17 100644 --- a/packages/docs/src/content/03-components/navigation/link/examples/inline.tsx +++ b/packages/docs/src/content/03-components/navigation/link/examples/disabled.tsx @@ -1,5 +1,5 @@ import Link from "@mittwald/flow-react-components/Link"; - - Inline link + + Disabled ; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/external.tsx b/packages/docs/src/content/03-components/navigation/link/examples/external.tsx index d765c4d99..08e4ffe06 100644 --- a/packages/docs/src/content/03-components/navigation/link/examples/external.tsx +++ b/packages/docs/src/content/03-components/navigation/link/examples/external.tsx @@ -1,5 +1,5 @@ import Link from "@mittwald/flow-react-components/Link"; - mittwald.de + Externer Link ; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/inlineText.tsx b/packages/docs/src/content/03-components/navigation/link/examples/inlineText.tsx index 599160b1d..7f413766a 100644 --- a/packages/docs/src/content/03-components/navigation/link/examples/inlineText.tsx +++ b/packages/docs/src/content/03-components/navigation/link/examples/inlineText.tsx @@ -2,6 +2,6 @@ import Link from "@mittwald/flow-react-components/Link"; import Text from "@mittwald/flow-react-components/Text"; - Sieh dir unser Onboarding an um + Sieh dir unser Onboarding an, um weitere Informationen zu erhalten. ; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/light.tsx b/packages/docs/src/content/03-components/navigation/link/examples/light.tsx index 8a9e68721..29cf5ed06 100644 --- a/packages/docs/src/content/03-components/navigation/link/examples/light.tsx +++ b/packages/docs/src/content/03-components/navigation/link/examples/light.tsx @@ -1,5 +1,5 @@ import Link from "@mittwald/flow-react-components/Link"; - Zum Dashboard + Light ; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/position1.tsx b/packages/docs/src/content/03-components/navigation/link/examples/position1.tsx new file mode 100644 index 000000000..ae94e3940 --- /dev/null +++ b/packages/docs/src/content/03-components/navigation/link/examples/position1.tsx @@ -0,0 +1,15 @@ +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Link } from "@mittwald/flow-react-components/Link"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { Header } from "@mittwald/flow-react-components/Header"; +import { Text } from "@mittwald/flow-react-components/Text"; + +
+
+ Heading 2 + Textlink +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +
; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/position2.tsx b/packages/docs/src/content/03-components/navigation/link/examples/position2.tsx new file mode 100644 index 000000000..45d55abf0 --- /dev/null +++ b/packages/docs/src/content/03-components/navigation/link/examples/position2.tsx @@ -0,0 +1,15 @@ +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Link } from "@mittwald/flow-react-components/Link"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { Header } from "@mittwald/flow-react-components/Header"; +import { Text } from "@mittwald/flow-react-components/Text"; + +
+
+ Heading 2 +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + Textlink +
; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/primary.tsx b/packages/docs/src/content/03-components/navigation/link/examples/primary.tsx new file mode 100644 index 000000000..a9623e0a9 --- /dev/null +++ b/packages/docs/src/content/03-components/navigation/link/examples/primary.tsx @@ -0,0 +1,3 @@ +import Link from "@mittwald/flow-react-components/Link"; + +Primary; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/writingExtraDo.tsx b/packages/docs/src/content/03-components/navigation/link/examples/writingExtraDo.tsx new file mode 100644 index 000000000..e8aefc89c --- /dev/null +++ b/packages/docs/src/content/03-components/navigation/link/examples/writingExtraDo.tsx @@ -0,0 +1,10 @@ +import { Link } from "@mittwald/flow-react-components/Link"; +import { Text } from "@mittwald/flow-react-components/Text"; + +<> + + Links sind wichte Navigationselemente innerhalb von + Benutzeroberflächen. + + Erfahre mehr über Links +; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/writingExtraDont.tsx b/packages/docs/src/content/03-components/navigation/link/examples/writingExtraDont.tsx new file mode 100644 index 000000000..a17ffed34 --- /dev/null +++ b/packages/docs/src/content/03-components/navigation/link/examples/writingExtraDont.tsx @@ -0,0 +1,10 @@ +import { Link } from "@mittwald/flow-react-components/Link"; +import { Text } from "@mittwald/flow-react-components/Text"; + +<> + + Links sind wichte Navigationselemente innerhalb von + Benutzeroberflächen. + + Erfahre mehr +; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/writingInlineDo.tsx b/packages/docs/src/content/03-components/navigation/link/examples/writingInlineDo.tsx new file mode 100644 index 000000000..1ae854acd --- /dev/null +++ b/packages/docs/src/content/03-components/navigation/link/examples/writingInlineDo.tsx @@ -0,0 +1,7 @@ +import { Link } from "@mittwald/flow-react-components/Link"; +import { Text } from "@mittwald/flow-react-components/Text"; + + + Mit Hilfe des Onboardings kannst du + direkt loslegen. +; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/writingInlineDont.tsx b/packages/docs/src/content/03-components/navigation/link/examples/writingInlineDont.tsx new file mode 100644 index 000000000..861d8d139 --- /dev/null +++ b/packages/docs/src/content/03-components/navigation/link/examples/writingInlineDont.tsx @@ -0,0 +1,8 @@ +import { Link } from "@mittwald/flow-react-components/Link"; +import { Text } from "@mittwald/flow-react-components/Text"; + + + + Mit Hilfe des Onboardings kannst du direkt loslegen. + +; diff --git a/packages/docs/src/content/03-components/navigation/link/guidelines.mdx b/packages/docs/src/content/03-components/navigation/link/guidelines.mdx new file mode 100644 index 000000000..6fefe6af6 --- /dev/null +++ b/packages/docs/src/content/03-components/navigation/link/guidelines.mdx @@ -0,0 +1,193 @@ +# Grundlagen + +## Best practices + +Achte bei Verwendung eines Links darauf, dass... + +- je nach Umgebung der richtige Link gewählt wird. Ein Inline Link wird + automatisch in einem Textblock gesetzt. Bei farbigem Hintergrund muss die + Color Light oder Dark selbst ausgewählt werden. +- Links standardmäßig im gleichen Tab geöffnet werden. User haben dann immer + noch die Möglichkeit, die Links selbstgesteuert in einem neuen Tab zu öffnen. + Bei bestimmten externen Links wird jedoch eine Ausnahme gemacht. (siehe + Externer Link) +- Links nur als Navigationselement gedacht sind. Links können z. B. keine + [Modals](/03-components/overlays/modal) öffnen, keine Aktionen bestätigen und + keine weiteren Informationen aufklappen lassen + ([Accordion](/03-components/structure/accordion)). +- nicht zu viele Links verwendet werden, um den User nicht durch die Anzahl zu + verwirren. +- Links entweder einzeln stehen oder in einen Textblock integriert werden + (Inline Link). Andernfalls ist es für den User schwieriger, den Link zu + erkennen. Beispielsweise sollte ein Link nicht in der Überschrift stehen. + +## Verwendung + +Verwende einen Link, um... + +- den User zu einer neuen Seite zu navigieren. +- auf einen Ankerpunkt auf der Seite für eine Information zu scrollen. +- einen Download zu starten. +- eine externe Seite im selben oder im neuen Tab zu öffnen. + +## Link vs. Button + +Links und [Buttons](/03-components/actions/button) werden häufig verwechselt. Um +die beiden besser unterscheiden zu können, hier ein paar hilfreiche +Anhaltspunkte. + + + + - zu einer anderen Seite zu navigieren. + + - zu einem Anker auf der Seite zu scrollen. + + - eine externe Seite zu öffnen. + + - einen Download zu starten. + + + + - eine Aktion auszuführen oder ein Event zu starten, ohne die Seite zu + verlassen. + + - Formulare zu speichern oder zurückzusetzen. + + - in einem [Modals](/03-components/overlays/modal) oder [OffCanvas](/03-components/overlays/modal) zu navigieren und + Aktionen auszuwählen. + + + + +--- + +# Anwendung + +## Position + +Links sind ein zentrales Navigationselement für die User. Daher sollte deren +Platzierung sorgfältig überlegt werden. Beispiele für geeignete Stellen sind: + +- In einer [Section](/03-components/structure/section) können Links in der + oberen rechten Ecke neben der [Heading](/03-components/content/heading) + platziert werden. Diese Position eignet sich besonders für Links, die + inhaltlich stark mit der Section verbunden sind, und wenn nur ein einzelner + Link benötigt wird. +- Im unteren Bereich einer Section oder eines + [Textblocks](/03-components/content/text) können ein oder mehrere Links + angezeigt werden. Diese sollten sich auf den vorangehenden Text beziehen. +- Inline Links werden direkt im [Text](/03-components/content/text) eingefügt. + + + + Die Section verfügt über einen speziellen Bereich in der Nähe der Heading, + in dem Links platziert werden können. + + + Links können am Ende einer Section oder eines Textblocks angezeigt werden. + + + +--- + +# Inhalt + +## Interner Link + +Interne Links öffnen sich immer im dem Tab, in dem der User sich gerade +befindet. Der User kann jedoch selbst entscheiden, ob er den Link lieber in +einem neuen Tab öffnen möchte. + +## Externer Link + +Externe Links führen den User zu einer Seite außerhalb der Domain. Standardmäßig +werden sie wie andere Links im **selben Tab** geöffnet, sodass der User selbst +entscheiden kann, ob er den Link in einem neuen Tab öffnen möchte. In +Ausnahmefällen sollten externe Links jedoch in einem neuen Tab geöffnet. Öffnet +sich der Link automatisch in einem neuen Tab, muss ein entsprechendes Icon neben +dem Link den User darauf hinweisen. In folgenden Situationen ist es sinnvoll, +den Link in einem **neuen Tab** öffnen zu lassen: + +- **Schwierge Rückkehr**: Wenn die Navigation zurück zur ursprünglichen Seite + erschwert ist, z. B. durch komplexe Navigationsstrukturen, dynamische Inhalte + oder den Verlust von Daten/Prozessen beim Zurücknavigieren +- **Modals oder OffCanvas**: Wenn der Link in einem Modal oder Off-Canvas-Menü + platziert ist, um den Kontext der aktuellen Seite beizubehalten. +- **Workflow-Unterbrechung**: Wenn das Öffnen im selben Tab den Arbeitsfluss des + Users signifikant stören oder unterbrechen würde. + +--- + +# Writing guidelines + +Der **Linktext** ist der wichtigste Bestandteil eines Links. Versuche daher auf +folgendes zu achten: + +- Verwende für Links, die auf dieselbe Seite verweisen, immer denselben Text. + Unterschiedliche Zielseiten sollten unterschiedliche Linktexte haben, um + Verwirrung zu vermeiden. +- Vermeide generische Formulierungen wie „Klick hier“. Der Linktext sollte klar + vermitteln, wohin der Link führt oder was dort zu erwarten ist. +- Formuliere Linktexte so präzise wie möglich, damit sofort erkennbar ist, wohin + der Link führt. Allgemeine Formulierungen wie „Erfahre mehr“ sollten vermieden + werden, da diese oft überflüssig sind. Falls nötig, ergänze „Erfahre mehr“ mit + spezifischen Informationen, z. B. „Erfahre mehr über Flow“. +- Wenn ein Link in einem Satz vorkommt, verlinke nur den Teil des Satzes, der + direkt auf das Ziel hinweist. Der gesamte Satz sollte nicht als Link markiert + werden. Vermeide es, den Link in mehrere kleinere Teile innerhalb des Satzes + aufzuteilen; stattdessen sollte ein zusammenhängender Link innerhalb des + Satzes zu finden sein. +- Halte Linktexte so kurz wie möglich, um Zeilenumbrüche zu vermeiden. Ein + einzelnes Wort oder eine kurze Phrase sind ideal. +- Setze am Ende des Linktextes keinen Punkt. Eine Ausnahme bilden Fragezeichen, + falls sie dem Satzbau entsprechen. + + + + Der Link "Erfahre mehr über Links" kann auch alleine stehend vom User + verstanden werden. + + + Links müssen einzeln verstanden werden. "Erfahre mehr" oder "Klick hier" + sind nicht alleine verständlich. + + + + + + Inline Links sollten so kurz wie möglich, aber so lang sein, dass der User + versteht, wohin sie führen. + + + Markiere keine ganzen Sätze als Inline Link. + + + +# Accessibility + +Achte beim Link darauf, dass er gut von Screenreadern erfasst wird. Ein Link +muss auch isoliert betrachtet verständlich sein. Das ist nicht der Fall, wenn +der Linktext nur „hier klicken“ oder „mehr Informationen“ lautet. Bei Bedarf +sollte ein ARIA-Label hinzugefügt werden, um sicherzustellen, dass der Link +korrekt interpretiert wird, falls der Text allein nicht ausreicht. + +# Color Light und Dark + +Achte bei den Colors Light und Dark auf genügend Kontrast zum Hintergrund. Es +wird empfohlen, die Color in Light zu verwenden, wenn der HSL Lightness-Wert des +Hintergrunds weniger als 50 ist. Die Color Dark wird für Hintergründe empfohlen, +die einen HSL Lightness-Wert von größer als 50 haben. Für beide Colors gilt: Je +weiter der HSL Lightness-Wert von 50 entfernt ist, desto besser ist der +Kontrast. + + + + Die Color Light kommt besonders gut auf sehr dunklen Hintergründen zur + Geltung. Verwende sie auf Hintergründen mit einem HSL Lightness-Wert von + weniger als 50. + + + Color Dark kommt besonders gut auf sehr hellen Hintergründen zur Geltung. + Verwende sie auf Hintergründen mit einem HSL Lightness-Wert von über 50. + + diff --git a/packages/docs/src/content/03-components/navigation/link/index.mdx b/packages/docs/src/content/03-components/navigation/link/index.mdx index 1c711d0e0..981337e2c 100644 --- a/packages/docs/src/content/03-components/navigation/link/index.mdx +++ b/packages/docs/src/content/03-components/navigation/link/index.mdx @@ -5,4 +5,4 @@ description: Zielen genutzt werden. --- - + diff --git a/packages/docs/src/content/03-components/navigation/link/overview.mdx b/packages/docs/src/content/03-components/navigation/link/overview.mdx index 14622f420..c095c82b9 100644 --- a/packages/docs/src/content/03-components/navigation/link/overview.mdx +++ b/packages/docs/src/content/03-components/navigation/link/overview.mdx @@ -1,45 +1,75 @@ -# Beispiel +# Playground - +Verwende ``, um einen Link darzustellen. + + --- -# Mit Icon +## Inline + +Links innerhalb des `` -Tags werden automatisch als Inline Link +gerendert. - + --- -# Inline +## Color -Benutze das `inline` Property wenn du den Link innerhalb eines Textblocks -benutzen möchtest. +Der Link kann in den drei Colors **Primary**, **Light** und **Dark** dargestellt +werden. Light und Dark eignen sich besonders gut für Links auf +farbigen/dekorativen Hintergründen. - + -Links innerhalb der `` Komponente werden automatisch als Inline Link -gerendert. + + + + +**Primary**: Im Standardfall wird die Color Primary verwendet, da das leuchtende +Blau als Hinweis (Signifier) darauf dient, dass es sich um einen anklickbaren +Link handelt. + +**Light**: Verwende die Light-Color bei dunklen Hintergründen mit einem HSL +Lightness-Wert von weniger als 50. - +**Dark**: Verwende die Dark-Color bei hellen, farbigen Hintergründen mit einem +HSL Lightness-Wert von mehr als 50. --- -# Externer Link +# Kombiniere mit ... -Wird auf einem Link `target="_blank"` gesetzt, erhält dieser automatisch ein -`ExternalLinkIcon` um zu verdeutlichen, dass sich der Link in einem neuen Tab -öffnet. +## Icon (Externer Link) - +Rechts neben dem Link kann ein `IconExternalLink` eingefügt werden, um dem User +den Hinweis zu geben, dass es sich um einen externen Link handelt, der in einem +neuen Tab geöffnet wird. Wenn der externe Link keinen neuen Tab öffnet, muss +dieser ohne Icon dargestellt werden. ---- + + +**Externer Link mit Icon:** Der Link öffnet sich in einem neuen Tab. Sollte nur +verwendet werden, wenn der Workflow des Users stark unterbrochen wird oder das +Verlassen der ursprünglichen Seite negative Konsequenzen hat. + +**Externer Link ohne Icon**: Der Link öffnet sich bei einem einfachen Klick im +selben Tab. -# Color Light und Dark +## Icon -## Dark +Links können mit einem Icon versehen werden, um dem User eine zusätzliche +Information zu geben. Hierfür kann das Icon `Icon` direkt in die `` +Component eingefügt werden. + + + +--- - +## States -## Light +Ein Link hat vier verschiedene States: **Default**, **Hover**, **Pressed** und +**Disabled**. - + diff --git a/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css b/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css index f56c16156..ebf629302 100644 --- a/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css +++ b/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css @@ -58,6 +58,11 @@ padding: var(--size-px--l); } +.center { + display: flex; + justify-content: center; +} + .editorContainer { overflow-x: auto; } diff --git a/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx b/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx index 16734dcdc..af3751730 100644 --- a/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx +++ b/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx @@ -22,6 +22,7 @@ export interface LiveCodeEditorProps { zoom?: number; bgColor?: "default" | "dark" | "light"; mobile?: boolean; + alignCenter?: boolean; } // Waiting for https://github.com/FormidableLabs/react-live/issues/339 @@ -40,6 +41,7 @@ const LiveCodeEditor: FC = (props) => { zoom = 1, bgColor, mobile, + alignCenter, } = props; const [editorCollapsed, setEditorCollapsed] = useState( @@ -80,7 +82,10 @@ const LiveCodeEditor: FC = (props) => { className, )} > - + {!editorDisabled && (
diff --git a/packages/docs/src/lib/mdx/components/DoAndDont/ExampleTile.tsx b/packages/docs/src/lib/mdx/components/DoAndDont/ExampleTile.tsx index 007ea9efc..c3d8fac2c 100644 --- a/packages/docs/src/lib/mdx/components/DoAndDont/ExampleTile.tsx +++ b/packages/docs/src/lib/mdx/components/DoAndDont/ExampleTile.tsx @@ -19,10 +19,12 @@ export interface DoAndDontTileProps extends PropsWithChildren { bgColor?: "default" | "dark" | "light"; heading?: string; mobile?: boolean; + alignCenter?: boolean; } export const ExampleTile: FC = (props) => { - const { code, text, type, zoom, bgColor, heading, mobile } = props; + const { code, text, type, zoom, bgColor, heading, mobile, alignCenter } = + props; const headingIcon = type === "do" ? ( @@ -53,6 +55,7 @@ export const ExampleTile: FC = (props) => { zoom={zoom} bgColor={bgColor} mobile={mobile} + alignCenter={alignCenter} /> )} {text && ( diff --git a/packages/docs/src/lib/mdx/components/MdxFileView/MdxFileView.tsx b/packages/docs/src/lib/mdx/components/MdxFileView/MdxFileView.tsx index 3b6a21397..6c2bcde4d 100644 --- a/packages/docs/src/lib/mdx/components/MdxFileView/MdxFileView.tsx +++ b/packages/docs/src/lib/mdx/components/MdxFileView/MdxFileView.tsx @@ -44,6 +44,7 @@ export const MdxFileView: FC = (props) => { mobile, children, heading, + alignCenter, }) => ( = (props) => { bgColor={bgColor} mobile={mobile} heading={heading} + alignCenter={alignCenter} > {children} @@ -66,6 +68,7 @@ export const MdxFileView: FC = (props) => { mobile, children, heading, + alignCenter, }) => ( = (props) => { bgColor={bgColor} mobile={mobile} heading={heading} + alignCenter={alignCenter} > {children} @@ -88,6 +92,7 @@ export const MdxFileView: FC = (props) => { mobile, children, heading, + alignCenter, }) => ( = (props) => { bgColor={bgColor} mobile={mobile} heading={heading} + alignCenter={alignCenter} > {children} @@ -109,6 +115,7 @@ export const MdxFileView: FC = (props) => { mobile, children, heading, + alignCenter, }) => ( = (props) => { bgColor={bgColor} mobile={mobile} heading={heading} + alignCenter={alignCenter} > {children} @@ -130,6 +138,7 @@ export const MdxFileView: FC = (props) => { mobile, children, heading, + alignCenter, }) => ( = (props) => { bgColor={bgColor} mobile={mobile} heading={heading} + alignCenter={alignCenter} > {children} From 76a7ad3d16670a75c8119995dd706b97a22002cc Mon Sep 17 00:00:00 2001 From: Tim Auf dem Kampe Date: Tue, 5 Nov 2024 10:54:59 +0100 Subject: [PATCH 02/23] docs(Link): Update external links information --- .../navigation/link/guidelines.mdx | 26 ++++--------------- .../navigation/link/overview.mdx | 23 +++------------- 2 files changed, 9 insertions(+), 40 deletions(-) diff --git a/packages/docs/src/content/03-components/navigation/link/guidelines.mdx b/packages/docs/src/content/03-components/navigation/link/guidelines.mdx index 6fefe6af6..7b1b5aa0a 100644 --- a/packages/docs/src/content/03-components/navigation/link/guidelines.mdx +++ b/packages/docs/src/content/03-components/navigation/link/guidelines.mdx @@ -28,7 +28,7 @@ Verwende einen Link, um... - den User zu einer neuen Seite zu navigieren. - auf einen Ankerpunkt auf der Seite für eine Information zu scrollen. - einen Download zu starten. -- eine externe Seite im selben oder im neuen Tab zu öffnen. +- eine externe Seite zu öffnen. ## Link vs. Button @@ -92,29 +92,13 @@ Platzierung sorgfältig überlegt werden. Beispiele für geeignete Stellen sind: # Inhalt -## Interner Link +## Interne und externe Links Interne Links öffnen sich immer im dem Tab, in dem der User sich gerade befindet. Der User kann jedoch selbst entscheiden, ob er den Link lieber in -einem neuen Tab öffnen möchte. - -## Externer Link - -Externe Links führen den User zu einer Seite außerhalb der Domain. Standardmäßig -werden sie wie andere Links im **selben Tab** geöffnet, sodass der User selbst -entscheiden kann, ob er den Link in einem neuen Tab öffnen möchte. In -Ausnahmefällen sollten externe Links jedoch in einem neuen Tab geöffnet. Öffnet -sich der Link automatisch in einem neuen Tab, muss ein entsprechendes Icon neben -dem Link den User darauf hinweisen. In folgenden Situationen ist es sinnvoll, -den Link in einem **neuen Tab** öffnen zu lassen: - -- **Schwierge Rückkehr**: Wenn die Navigation zurück zur ursprünglichen Seite - erschwert ist, z. B. durch komplexe Navigationsstrukturen, dynamische Inhalte - oder den Verlust von Daten/Prozessen beim Zurücknavigieren -- **Modals oder OffCanvas**: Wenn der Link in einem Modal oder Off-Canvas-Menü - platziert ist, um den Kontext der aktuellen Seite beizubehalten. -- **Workflow-Unterbrechung**: Wenn das Öffnen im selben Tab den Arbeitsfluss des - Users signifikant stören oder unterbrechen würde. +einem neuen Tab öffnen möchte. Externe Links öffnen sich immer in einem neuen +Tab. Um das Verhalten dem User zu verdeutlichen, muss neben dem Text das Icon +`IconExternalLink` angezeigt werden. --- diff --git a/packages/docs/src/content/03-components/navigation/link/overview.mdx b/packages/docs/src/content/03-components/navigation/link/overview.mdx index c095c82b9..0f785380c 100644 --- a/packages/docs/src/content/03-components/navigation/link/overview.mdx +++ b/packages/docs/src/content/03-components/navigation/link/overview.mdx @@ -43,28 +43,13 @@ HSL Lightness-Wert von mehr als 50. ## Icon (Externer Link) -Rechts neben dem Link kann ein `IconExternalLink` eingefügt werden, um dem User -den Hinweis zu geben, dass es sich um einen externen Link handelt, der in einem -neuen Tab geöffnet wird. Wenn der externe Link keinen neuen Tab öffnet, muss -dieser ohne Icon dargestellt werden. +Rechts neben dem Link kann ein `IconExternalLink` eingefügt werden. Dieses soll +den User darauf hinweisen, dass es sich um einen externen Link handelt, der in +einem neuen Tab geöffnet wird. Das Icon wird auch automatisch neben dem Link +angezeigt, wenn auf dem Link `target="_blank"` gesetzt ist. -**Externer Link mit Icon:** Der Link öffnet sich in einem neuen Tab. Sollte nur -verwendet werden, wenn der Workflow des Users stark unterbrochen wird oder das -Verlassen der ursprünglichen Seite negative Konsequenzen hat. - -**Externer Link ohne Icon**: Der Link öffnet sich bei einem einfachen Klick im -selben Tab. - -## Icon - -Links können mit einem Icon versehen werden, um dem User eine zusätzliche -Information zu geben. Hierfür kann das Icon `Icon` direkt in die `` -Component eingefügt werden. - - - --- ## States From a353b52bb8052852b995194248c26de4b42b92d9 Mon Sep 17 00:00:00 2001 From: Tim Auf dem Kampe Date: Wed, 6 Nov 2024 08:16:15 +0100 Subject: [PATCH 03/23] docs(Link): Revert center prop on LiveCodeEditor --- .../03-components/navigation/link/guidelines.mdx | 4 ++-- .../03-components/navigation/link/index.mdx | 2 +- .../03-components/navigation/link/overview.mdx | 14 +++++++------- .../LiveCodeEditor/LiveCodeEditor.module.css | 5 ----- .../components/LiveCodeEditor/LiveCodeEditor.tsx | 7 +------ .../lib/mdx/components/DoAndDont/ExampleTile.tsx | 5 +---- .../lib/mdx/components/MdxFileView/MdxFileView.tsx | 10 ---------- 7 files changed, 12 insertions(+), 35 deletions(-) diff --git a/packages/docs/src/content/03-components/navigation/link/guidelines.mdx b/packages/docs/src/content/03-components/navigation/link/guidelines.mdx index 7b1b5aa0a..c511f30d4 100644 --- a/packages/docs/src/content/03-components/navigation/link/guidelines.mdx +++ b/packages/docs/src/content/03-components/navigation/link/guidelines.mdx @@ -165,12 +165,12 @@ weiter der HSL Lightness-Wert von 50 entfernt ist, desto besser ist der Kontrast. - + Die Color Light kommt besonders gut auf sehr dunklen Hintergründen zur Geltung. Verwende sie auf Hintergründen mit einem HSL Lightness-Wert von weniger als 50. - + Color Dark kommt besonders gut auf sehr hellen Hintergründen zur Geltung. Verwende sie auf Hintergründen mit einem HSL Lightness-Wert von über 50. diff --git a/packages/docs/src/content/03-components/navigation/link/index.mdx b/packages/docs/src/content/03-components/navigation/link/index.mdx index 981337e2c..1c711d0e0 100644 --- a/packages/docs/src/content/03-components/navigation/link/index.mdx +++ b/packages/docs/src/content/03-components/navigation/link/index.mdx @@ -5,4 +5,4 @@ description: Zielen genutzt werden. --- - + diff --git a/packages/docs/src/content/03-components/navigation/link/overview.mdx b/packages/docs/src/content/03-components/navigation/link/overview.mdx index 0f785380c..73380e0dd 100644 --- a/packages/docs/src/content/03-components/navigation/link/overview.mdx +++ b/packages/docs/src/content/03-components/navigation/link/overview.mdx @@ -2,7 +2,7 @@ Verwende ``, um einen Link darzustellen. - + --- @@ -11,7 +11,7 @@ Verwende ``, um einen Link darzustellen. Links innerhalb des `` -Tags werden automatisch als Inline Link gerendert. - + --- @@ -21,11 +21,11 @@ Der Link kann in den drei Colors **Primary**, **Light** und **Dark** dargestellt werden. Light und Dark eignen sich besonders gut für Links auf farbigen/dekorativen Hintergründen. - + - + - + **Primary**: Im Standardfall wird die Color Primary verwendet, da das leuchtende Blau als Hinweis (Signifier) darauf dient, dass es sich um einen anklickbaren @@ -48,7 +48,7 @@ den User darauf hinweisen, dass es sich um einen externen Link handelt, der in einem neuen Tab geöffnet wird. Das Icon wird auch automatisch neben dem Link angezeigt, wenn auf dem Link `target="_blank"` gesetzt ist. - + --- @@ -57,4 +57,4 @@ angezeigt, wenn auf dem Link `target="_blank"` gesetzt ist. Ein Link hat vier verschiedene States: **Default**, **Hover**, **Pressed** und **Disabled**. - + diff --git a/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css b/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css index ebf629302..f56c16156 100644 --- a/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css +++ b/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css @@ -58,11 +58,6 @@ padding: var(--size-px--l); } -.center { - display: flex; - justify-content: center; -} - .editorContainer { overflow-x: auto; } diff --git a/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx b/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx index af3751730..16734dcdc 100644 --- a/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx +++ b/packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx @@ -22,7 +22,6 @@ export interface LiveCodeEditorProps { zoom?: number; bgColor?: "default" | "dark" | "light"; mobile?: boolean; - alignCenter?: boolean; } // Waiting for https://github.com/FormidableLabs/react-live/issues/339 @@ -41,7 +40,6 @@ const LiveCodeEditor: FC = (props) => { zoom = 1, bgColor, mobile, - alignCenter, } = props; const [editorCollapsed, setEditorCollapsed] = useState( @@ -82,10 +80,7 @@ const LiveCodeEditor: FC = (props) => { className, )} > - + {!editorDisabled && (
diff --git a/packages/docs/src/lib/mdx/components/DoAndDont/ExampleTile.tsx b/packages/docs/src/lib/mdx/components/DoAndDont/ExampleTile.tsx index c3d8fac2c..007ea9efc 100644 --- a/packages/docs/src/lib/mdx/components/DoAndDont/ExampleTile.tsx +++ b/packages/docs/src/lib/mdx/components/DoAndDont/ExampleTile.tsx @@ -19,12 +19,10 @@ export interface DoAndDontTileProps extends PropsWithChildren { bgColor?: "default" | "dark" | "light"; heading?: string; mobile?: boolean; - alignCenter?: boolean; } export const ExampleTile: FC = (props) => { - const { code, text, type, zoom, bgColor, heading, mobile, alignCenter } = - props; + const { code, text, type, zoom, bgColor, heading, mobile } = props; const headingIcon = type === "do" ? ( @@ -55,7 +53,6 @@ export const ExampleTile: FC = (props) => { zoom={zoom} bgColor={bgColor} mobile={mobile} - alignCenter={alignCenter} /> )} {text && ( diff --git a/packages/docs/src/lib/mdx/components/MdxFileView/MdxFileView.tsx b/packages/docs/src/lib/mdx/components/MdxFileView/MdxFileView.tsx index 6c2bcde4d..3b6a21397 100644 --- a/packages/docs/src/lib/mdx/components/MdxFileView/MdxFileView.tsx +++ b/packages/docs/src/lib/mdx/components/MdxFileView/MdxFileView.tsx @@ -44,7 +44,6 @@ export const MdxFileView: FC = (props) => { mobile, children, heading, - alignCenter, }) => ( = (props) => { bgColor={bgColor} mobile={mobile} heading={heading} - alignCenter={alignCenter} > {children} @@ -68,7 +66,6 @@ export const MdxFileView: FC = (props) => { mobile, children, heading, - alignCenter, }) => ( = (props) => { bgColor={bgColor} mobile={mobile} heading={heading} - alignCenter={alignCenter} > {children} @@ -92,7 +88,6 @@ export const MdxFileView: FC = (props) => { mobile, children, heading, - alignCenter, }) => ( = (props) => { bgColor={bgColor} mobile={mobile} heading={heading} - alignCenter={alignCenter} > {children} @@ -115,7 +109,6 @@ export const MdxFileView: FC = (props) => { mobile, children, heading, - alignCenter, }) => ( = (props) => { bgColor={bgColor} mobile={mobile} heading={heading} - alignCenter={alignCenter} > {children} @@ -138,7 +130,6 @@ export const MdxFileView: FC = (props) => { mobile, children, heading, - alignCenter, }) => ( = (props) => { bgColor={bgColor} mobile={mobile} heading={heading} - alignCenter={alignCenter} > {children} From 690c94cb4c4d7c6cedc635bd74699034910737ba Mon Sep 17 00:00:00 2001 From: TimAufdemKampe Date: Wed, 6 Nov 2024 08:10:20 +0000 Subject: [PATCH 04/23] chore(release): bump version to 0.1.0-alpha.332 --- CHANGELOG.md | 9 +++++++++ lerna.json | 2 +- packages/components/CHANGELOG.md | 9 +++++++++ packages/components/package.json | 2 +- packages/design-tokens/CHANGELOG.md | 9 +++++++++ packages/design-tokens/package.json | 2 +- packages/react-tunnel/CHANGELOG.md | 9 +++++++++ packages/react-tunnel/package.json | 2 +- packages/stylesheet/CHANGELOG.md | 9 +++++++++ packages/stylesheet/package.json | 2 +- 10 files changed, 50 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b0e9f7e4b..a1d008a29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.332](https://github.com/mittwald/flow/compare/0.1.0-alpha.331...0.1.0-alpha.332) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-project + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.331](https://github.com/mittwald/flow/compare/0.1.0-alpha.330...0.1.0-alpha.331) (2024-11-06) ### Bug Fixes diff --git a/lerna.json b/lerna.json index 727057b12..e11e81df9 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0-alpha.331" + "version": "0.1.0-alpha.332" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f6b51bfe5..53c0ab7cc 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.332](https://github.com/mittwald/flow/compare/0.1.0-alpha.331...0.1.0-alpha.332) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-react-components + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.331](https://github.com/mittwald/flow/compare/0.1.0-alpha.330...0.1.0-alpha.331) (2024-11-06) ### Bug Fixes diff --git a/packages/components/package.json b/packages/components/package.json index cdb13bc67..106755c97 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-react-components", - "version": "0.1.0-alpha.331", + "version": "0.1.0-alpha.332", "type": "module", "description": "A React implementation of Flow, mittwald’s design system", "homepage": "https://mittwald.github.io/flow", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 29a6f523d..0ab063d44 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.332](https://github.com/mittwald/flow/compare/0.1.0-alpha.331...0.1.0-alpha.332) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-design-tokens + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.331](https://github.com/mittwald/flow/compare/0.1.0-alpha.330...0.1.0-alpha.331) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-design-tokens diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 1d9bc6703..3acac423c 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-design-tokens", - "version": "0.1.0-alpha.331", + "version": "0.1.0-alpha.332", "type": "module", "description": "The design tokens used in Flow, mittwald’s design system", "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens", diff --git a/packages/react-tunnel/CHANGELOG.md b/packages/react-tunnel/CHANGELOG.md index 17c7dcf8b..ad3d6e7f2 100644 --- a/packages/react-tunnel/CHANGELOG.md +++ b/packages/react-tunnel/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.332](https://github.com/mittwald/flow/compare/0.1.0-alpha.331...0.1.0-alpha.332) (2024-11-06) + +**Note:** Version bump only for package @mittwald/react-tunnel + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.331](https://github.com/mittwald/flow/compare/0.1.0-alpha.330...0.1.0-alpha.331) (2024-11-06) **Note:** Version bump only for package @mittwald/react-tunnel diff --git a/packages/react-tunnel/package.json b/packages/react-tunnel/package.json index af8a2f1c0..abe8d491e 100644 --- a/packages/react-tunnel/package.json +++ b/packages/react-tunnel/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/react-tunnel", - "version": "0.1.0-alpha.331", + "version": "0.1.0-alpha.332", "type": "module", "description": "It's like a Portal – but with React components", "keywords": [ diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md index f5317b165..05a1ed458 100644 --- a/packages/stylesheet/CHANGELOG.md +++ b/packages/stylesheet/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.332](https://github.com/mittwald/flow/compare/0.1.0-alpha.331...0.1.0-alpha.332) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-stylesheet + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.331](https://github.com/mittwald/flow/compare/0.1.0-alpha.330...0.1.0-alpha.331) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-stylesheet diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index 36c1227d0..8fb6d5e20 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-stylesheet", - "version": "0.1.0-alpha.331", + "version": "0.1.0-alpha.332", "type": "module", "description": "A collection of CSS classes used in Flow, mittwald's design system.", "homepage": "https://mittwald.github.io/flow", From 1fa455c479c4767b5cd79f3d47512fec6e8633d4 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Wed, 6 Nov 2024 10:31:12 +0100 Subject: [PATCH 05/23] fix(Separator): fix border style --- .../components/src/components/Separator/Separator.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/components/Separator/Separator.module.scss b/packages/components/src/components/Separator/Separator.module.scss index eaaa05960..63fa69b93 100644 --- a/packages/components/src/components/Separator/Separator.module.scss +++ b/packages/components/src/components/Separator/Separator.module.scss @@ -1,4 +1,5 @@ .separator { background-color: var(--separator--color); height: var(--separator--height); + border: none; } From d0a621857cbb36cff3e3ff0a9662ce3225b552ea Mon Sep 17 00:00:00 2001 From: BenniEngel Date: Wed, 6 Nov 2024 14:00:01 +0100 Subject: [PATCH 06/23] style: Adjusted Navigation paddings to make Collapsable and Non Collapsable lists the same (#952) --- .../NavigationGroup.module.scss | 4 +++ .../NavigationGroup/NavigationGroup.tsx | 6 ++++- .../Navigation/stories/Default.stories.tsx | 27 +++++++++++++++++++ .../design-tokens/src/actions/menu-item.yml | 2 +- 4 files changed, 37 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss b/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss index 23d0e00d9..9fd939fd7 100644 --- a/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss +++ b/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss @@ -1,4 +1,7 @@ .navigationGroup { + &:not(.collapsable) ul { + padding: var(--accordion--content-padding); + } &:not(:last-child) { margin-bottom: var(--menu--group-to-group-spacing); } @@ -6,5 +9,6 @@ .label { display: block; margin-block: var(--menu--label-to-group-spacing); + padding-inline-start: var(--accordion--header-padding-x); } } diff --git a/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx b/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx index 2bb6657a0..5d880ca06 100644 --- a/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx +++ b/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx @@ -16,7 +16,11 @@ export interface NavigationGroupProps export const NavigationGroup: FC = (props) => { const { children, className, collapsable, ...rest } = props; - const rootClassName = clsx(styles.navigationGroup, className); + const rootClassName = clsx( + styles.navigationGroup, + collapsable && styles.collapsable, + className, + ); const generatedId = useId(); diff --git a/packages/components/src/components/Navigation/stories/Default.stories.tsx b/packages/components/src/components/Navigation/stories/Default.stories.tsx index 5fb4cdbb4..cc31ee254 100644 --- a/packages/components/src/components/Navigation/stories/Default.stories.tsx +++ b/packages/components/src/components/Navigation/stories/Default.stories.tsx @@ -119,3 +119,30 @@ export const WithCollapsableGroups: Story = { ), }; +export const MixedGroups: Story = { + render: (props) => ( + + + + Dashboard + + Performance + + + + + + Apps + Databases + Domains + + + + + Testsite + Testsite + Testsite + + + ), +}; diff --git a/packages/design-tokens/src/actions/menu-item.yml b/packages/design-tokens/src/actions/menu-item.yml index 16ec40868..d2582b5aa 100644 --- a/packages/design-tokens/src/actions/menu-item.yml +++ b/packages/design-tokens/src/actions/menu-item.yml @@ -4,7 +4,7 @@ menu: group-to-group-spacing: value: "{size-px.m}" label-to-group-spacing: - value: "{size-px.s}" + value: "{size-px.xs}" separator-to-item-spacing: value: "{size-px.s}" From b08cd7b3dc356a44d1f5d86a8e62eff0055501ef Mon Sep 17 00:00:00 2001 From: elmartinezc Date: Wed, 6 Nov 2024 13:03:30 +0000 Subject: [PATCH 07/23] chore(release): bump version to 0.1.0-alpha.333 --- CHANGELOG.md | 12 ++++++++++++ lerna.json | 2 +- packages/components/CHANGELOG.md | 12 ++++++++++++ packages/components/package.json | 2 +- packages/design-tokens/CHANGELOG.md | 9 +++++++++ packages/design-tokens/package.json | 2 +- packages/react-tunnel/CHANGELOG.md | 9 +++++++++ packages/react-tunnel/package.json | 2 +- packages/stylesheet/CHANGELOG.md | 9 +++++++++ packages/stylesheet/package.json | 2 +- 10 files changed, 56 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a1d008a29..26c6c6ad3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.333](https://github.com/mittwald/flow/compare/0.1.0-alpha.332...0.1.0-alpha.333) (2024-11-06) + +### Bug Fixes + +- **Separator:** fix border style + ([1fa455c](https://github.com/mittwald/flow/commit/1fa455c479c4767b5cd79f3d47512fec6e8633d4)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.332](https://github.com/mittwald/flow/compare/0.1.0-alpha.331...0.1.0-alpha.332) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-project diff --git a/lerna.json b/lerna.json index e11e81df9..59b1b48fe 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0-alpha.332" + "version": "0.1.0-alpha.333" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 53c0ab7cc..b13325e38 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.333](https://github.com/mittwald/flow/compare/0.1.0-alpha.332...0.1.0-alpha.333) (2024-11-06) + +### Bug Fixes + +- **Separator:** fix border style + ([1fa455c](https://github.com/mittwald/flow/commit/1fa455c479c4767b5cd79f3d47512fec6e8633d4)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.332](https://github.com/mittwald/flow/compare/0.1.0-alpha.331...0.1.0-alpha.332) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-react-components diff --git a/packages/components/package.json b/packages/components/package.json index 106755c97..05d89f982 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-react-components", - "version": "0.1.0-alpha.332", + "version": "0.1.0-alpha.333", "type": "module", "description": "A React implementation of Flow, mittwald’s design system", "homepage": "https://mittwald.github.io/flow", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 0ab063d44..1e535abb0 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.333](https://github.com/mittwald/flow/compare/0.1.0-alpha.332...0.1.0-alpha.333) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-design-tokens + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.332](https://github.com/mittwald/flow/compare/0.1.0-alpha.331...0.1.0-alpha.332) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-design-tokens diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 3acac423c..ec7a77dc1 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-design-tokens", - "version": "0.1.0-alpha.332", + "version": "0.1.0-alpha.333", "type": "module", "description": "The design tokens used in Flow, mittwald’s design system", "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens", diff --git a/packages/react-tunnel/CHANGELOG.md b/packages/react-tunnel/CHANGELOG.md index ad3d6e7f2..009c36a01 100644 --- a/packages/react-tunnel/CHANGELOG.md +++ b/packages/react-tunnel/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.333](https://github.com/mittwald/flow/compare/0.1.0-alpha.332...0.1.0-alpha.333) (2024-11-06) + +**Note:** Version bump only for package @mittwald/react-tunnel + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.332](https://github.com/mittwald/flow/compare/0.1.0-alpha.331...0.1.0-alpha.332) (2024-11-06) **Note:** Version bump only for package @mittwald/react-tunnel diff --git a/packages/react-tunnel/package.json b/packages/react-tunnel/package.json index abe8d491e..23ddfcf8f 100644 --- a/packages/react-tunnel/package.json +++ b/packages/react-tunnel/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/react-tunnel", - "version": "0.1.0-alpha.332", + "version": "0.1.0-alpha.333", "type": "module", "description": "It's like a Portal – but with React components", "keywords": [ diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md index 05a1ed458..c9acadbe8 100644 --- a/packages/stylesheet/CHANGELOG.md +++ b/packages/stylesheet/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.333](https://github.com/mittwald/flow/compare/0.1.0-alpha.332...0.1.0-alpha.333) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-stylesheet + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.332](https://github.com/mittwald/flow/compare/0.1.0-alpha.331...0.1.0-alpha.332) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-stylesheet diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index 8fb6d5e20..1e985fabd 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-stylesheet", - "version": "0.1.0-alpha.332", + "version": "0.1.0-alpha.333", "type": "module", "description": "A collection of CSS classes used in Flow, mittwald's design system.", "homepage": "https://mittwald.github.io/flow", From f3c72e840ba0370e8b1b0d9282814d8f8c66faca Mon Sep 17 00:00:00 2001 From: BenniEngel Date: Wed, 6 Nov 2024 14:05:22 +0100 Subject: [PATCH 08/23] docs: styleguide header design optimization (#945) --- .idea/.gitignore | 1 + .../docs/assets/Styleguide_Startseite.svg | 47 ++++++++++--------- packages/docs/assets/m-flow_logo.svg | 12 +++++ packages/docs/src/app/layout.module.scss | 21 ++------- packages/docs/src/app/layout.tsx | 9 ++-- 5 files changed, 45 insertions(+), 45 deletions(-) create mode 100644 packages/docs/assets/m-flow_logo.svg diff --git a/.idea/.gitignore b/.idea/.gitignore index 13566b81b..9ed1b039d 100644 --- a/.idea/.gitignore +++ b/.idea/.gitignore @@ -6,3 +6,4 @@ # Datasource local storage ignored files /dataSources/ /dataSources.local.xml +/jsLibraryMappings.xml diff --git a/packages/docs/assets/Styleguide_Startseite.svg b/packages/docs/assets/Styleguide_Startseite.svg index 40569cc74..bfc2c58d5 100644 --- a/packages/docs/assets/Styleguide_Startseite.svg +++ b/packages/docs/assets/Styleguide_Startseite.svg @@ -1,5 +1,5 @@ - + - + - - - + + + - - + + - - + + - + - - - - - + + + + + - - - - + + + + \ No newline at end of file diff --git a/packages/docs/assets/m-flow_logo.svg b/packages/docs/assets/m-flow_logo.svg new file mode 100644 index 000000000..1eae4cb54 --- /dev/null +++ b/packages/docs/assets/m-flow_logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/docs/src/app/layout.module.scss b/packages/docs/src/app/layout.module.scss index 414450df4..a7806283e 100644 --- a/packages/docs/src/app/layout.module.scss +++ b/packages/docs/src/app/layout.module.scss @@ -25,7 +25,7 @@ align-items: center; max-width: 1500px; margin: 0 auto; - padding: var(--size-px--m) var(--size-px--l); + padding: var(--size-px--m) var(--size-px--l) var(--size-px--l); flex-wrap: wrap; gap: var(--size-rem--m); @@ -36,24 +36,16 @@ left: 0; right: 0; height: 250px; - background: var(--primary--color--100); + background: var(--color--hosting-blue--200); position: absolute; z-index: -1; } - - h1 { - margin-right: auto; - } } .homeLink { display: flex; - column-gap: var(--size-rem--s); - align-items: center; -} - -.logo { - color: var(--heading--color); + column-gap: var(--size-rem--m); + align-items: end; } .mainNavigation { @@ -116,7 +108,7 @@ } .header { - padding: var(--size-px--xs) var(--size-px--s); + padding: var(--size-px--xs) var(--size-px--s) var(--size-px--m); row-gap: var(--size-rem--s); } @@ -129,9 +121,6 @@ padding: 0; .homeImage { - margin-left: -1px; - width: calc(100% + 2px); - max-width: calc(100% + 2px); border-bottom-color: var(--separator--color); border-bottom-width: var(--separator--height); border-bottom-style: var(--border-style--default); diff --git a/packages/docs/src/app/layout.tsx b/packages/docs/src/app/layout.tsx index 265748a45..eb925dac0 100644 --- a/packages/docs/src/app/layout.tsx +++ b/packages/docs/src/app/layout.tsx @@ -7,14 +7,14 @@ import React from "react"; import HeaderNavigation from "@/app/_components/layout/HeaderNavigation/HeaderNavigation"; import clsx from "clsx"; import styles from "./layout.module.scss"; -import Heading from "@mittwald/flow-react-components/Heading"; import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; import { LinkProvider } from "@mittwald/flow-react-components/nextjs"; -import { IconMittwald } from "@mittwald/flow-react-components/Icons"; +import logoMittwald from "../../assets/m-flow_logo.svg"; import MainNavigation from "@/app/_components/layout/MainNavigation"; import MobileNavigation from "@/app/_components/layout/MobileNavigation/MobileNavigation"; import { NotificationProvider } from "@mittwald/flow-react-components/NotificationProvider"; import { Link } from "@mittwald/flow-react-components/Link"; +import { Image } from "@mittwald/flow-react-components/Image"; export const metadata: Metadata = { title: "Flow – mittwald Design System", @@ -31,10 +31,7 @@ const RootLayout: FC = async (props) => {
- - - Flow - + Date: Wed, 6 Nov 2024 13:07:35 +0000 Subject: [PATCH 09/23] chore(release): bump version to 0.1.0-alpha.334 --- CHANGELOG.md | 9 +++++++++ lerna.json | 2 +- packages/components/CHANGELOG.md | 9 +++++++++ packages/components/package.json | 2 +- packages/design-tokens/CHANGELOG.md | 9 +++++++++ packages/design-tokens/package.json | 2 +- packages/react-tunnel/CHANGELOG.md | 9 +++++++++ packages/react-tunnel/package.json | 2 +- packages/stylesheet/CHANGELOG.md | 9 +++++++++ packages/stylesheet/package.json | 2 +- 10 files changed, 50 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 26c6c6ad3..b2e5a799c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.334](https://github.com/mittwald/flow/compare/0.1.0-alpha.333...0.1.0-alpha.334) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-project + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.333](https://github.com/mittwald/flow/compare/0.1.0-alpha.332...0.1.0-alpha.333) (2024-11-06) ### Bug Fixes diff --git a/lerna.json b/lerna.json index 59b1b48fe..8315af06a 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0-alpha.333" + "version": "0.1.0-alpha.334" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index b13325e38..5916eb716 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.334](https://github.com/mittwald/flow/compare/0.1.0-alpha.333...0.1.0-alpha.334) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-react-components + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.333](https://github.com/mittwald/flow/compare/0.1.0-alpha.332...0.1.0-alpha.333) (2024-11-06) ### Bug Fixes diff --git a/packages/components/package.json b/packages/components/package.json index 05d89f982..273ad99ad 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-react-components", - "version": "0.1.0-alpha.333", + "version": "0.1.0-alpha.334", "type": "module", "description": "A React implementation of Flow, mittwald’s design system", "homepage": "https://mittwald.github.io/flow", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 1e535abb0..876728687 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.334](https://github.com/mittwald/flow/compare/0.1.0-alpha.333...0.1.0-alpha.334) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-design-tokens + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.333](https://github.com/mittwald/flow/compare/0.1.0-alpha.332...0.1.0-alpha.333) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-design-tokens diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index ec7a77dc1..6dcf4844a 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-design-tokens", - "version": "0.1.0-alpha.333", + "version": "0.1.0-alpha.334", "type": "module", "description": "The design tokens used in Flow, mittwald’s design system", "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens", diff --git a/packages/react-tunnel/CHANGELOG.md b/packages/react-tunnel/CHANGELOG.md index 009c36a01..b9ec44f19 100644 --- a/packages/react-tunnel/CHANGELOG.md +++ b/packages/react-tunnel/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.334](https://github.com/mittwald/flow/compare/0.1.0-alpha.333...0.1.0-alpha.334) (2024-11-06) + +**Note:** Version bump only for package @mittwald/react-tunnel + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.333](https://github.com/mittwald/flow/compare/0.1.0-alpha.332...0.1.0-alpha.333) (2024-11-06) **Note:** Version bump only for package @mittwald/react-tunnel diff --git a/packages/react-tunnel/package.json b/packages/react-tunnel/package.json index 23ddfcf8f..d2e8f0ee6 100644 --- a/packages/react-tunnel/package.json +++ b/packages/react-tunnel/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/react-tunnel", - "version": "0.1.0-alpha.333", + "version": "0.1.0-alpha.334", "type": "module", "description": "It's like a Portal – but with React components", "keywords": [ diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md index c9acadbe8..693bbfc4d 100644 --- a/packages/stylesheet/CHANGELOG.md +++ b/packages/stylesheet/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.334](https://github.com/mittwald/flow/compare/0.1.0-alpha.333...0.1.0-alpha.334) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-stylesheet + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.333](https://github.com/mittwald/flow/compare/0.1.0-alpha.332...0.1.0-alpha.333) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-stylesheet diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index 1e985fabd..d8a43966f 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-stylesheet", - "version": "0.1.0-alpha.333", + "version": "0.1.0-alpha.334", "type": "module", "description": "A collection of CSS classes used in Flow, mittwald's design system.", "homepage": "https://mittwald.github.io/flow", From babe788e29f7f8070bf4537ee73f1849a49ba294 Mon Sep 17 00:00:00 2001 From: BenniEngel Date: Wed, 6 Nov 2024 14:22:59 +0100 Subject: [PATCH 10/23] docs: Refactor Foundation Pages (#950) --- packages/docs/src/app/[...slug]/page.tsx | 33 +++- .../layout/MainContent/MainContent.tsx | 57 +++--- .../layout/TabContent/TabContent.tsx | 35 ---- .../_components/layout/TabContent/index.ts | 3 - .../layout/TopContent/TopContent.tsx | 45 +++++ .../_components/layout/TopContent/index.ts | 3 + .../01-design/05-typography/index.mdx | 77 +------- .../01-design/05-typography/overview.mdx | 74 ++++++++ .../02-structure/01-layout/overview.mdx | 2 + .../02-structure/02-spacing/overview.mdx | 6 +- .../01-sprach-guide/index.mdx | 165 ------------------ .../01-sprach-guide/overview.mdx | 162 +++++++++++++++++ .../02-fehlermeldungen/index.mdx | 149 +--------------- .../02-fehlermeldungen/overview.mdx | 144 +++++++++++++++ 14 files changed, 496 insertions(+), 459 deletions(-) delete mode 100644 packages/docs/src/app/_components/layout/TabContent/TabContent.tsx delete mode 100644 packages/docs/src/app/_components/layout/TabContent/index.ts create mode 100644 packages/docs/src/app/_components/layout/TopContent/TopContent.tsx create mode 100644 packages/docs/src/app/_components/layout/TopContent/index.ts create mode 100644 packages/docs/src/content/02-foundations/01-design/05-typography/overview.mdx create mode 100644 packages/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/overview.mdx create mode 100644 packages/docs/src/content/02-foundations/03-content-guidelines/02-fehlermeldungen/overview.mdx diff --git a/packages/docs/src/app/[...slug]/page.tsx b/packages/docs/src/app/[...slug]/page.tsx index bef7330d2..ad8c7dabe 100644 --- a/packages/docs/src/app/[...slug]/page.tsx +++ b/packages/docs/src/app/[...slug]/page.tsx @@ -1,10 +1,10 @@ -import MainContent from "@/app/_components/layout/MainContent/MainContent"; +import TopContent from "@/app/_components/layout/TopContent/TopContent"; import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; import type { StaticParams } from "@/lib/mdx/MdxFile"; import { LayoutCard } from "@mittwald/flow-react-components/LayoutCard"; import { Tabs } from "@mittwald/flow-react-components/Tabs"; import React from "react"; -import TabContent from "@/app/_components/layout/TabContent/TabContent"; +import MainContent from "@/app/_components/layout/MainContent/MainContent"; import { Link } from "@mittwald/flow-react-components/Link"; import { IconExternalLink } from "@mittwald/flow-react-components/Icons"; @@ -51,27 +51,44 @@ export default async function Page(props: Props) { ); const component = indexMdxFile?.mdxSource.frontmatter.component; + const showTabs = !!developMdxFile || !!guidelinesMdxFile; return ( <> - {indexMdxFile && } + {indexMdxFile && } - {(overviewMdxFile || developMdxFile || guidelinesMdxFile) && ( + {!showTabs && overviewMdxFile && ( + + + + )} + {overviewMdxFile && showTabs && ( {overviewMdxFile && ( - + )} {developMdxFile && ( - + )} {guidelinesMdxFile && ( - + )} )} - {component && ( = (props) => { - const { mdxFile } = props; +export const MainContent: FC = async (props) => { + const { mdxFile, tabTitle, showTabs } = props; - const component = mdxFile.mdxSource.frontmatter.component; - - return ( - <> - - -
- {mdxFile.getTitle()} + const indexFile = await MdxFileFactory.fromFile( + "src/content/" + path.dirname(mdxFile.filename) + "/index.mdx", + ); - {mdxFile.mdxSource.frontmatter.description} + const content = ( +
+ +
+ ); - {component && ( - - GitHub - - - )} - + if (showTabs) { + return ( + + {tabTitle} + {content} + + ); + } - - - - - ); + return <> {content} ; }; export default MainContent; diff --git a/packages/docs/src/app/_components/layout/TabContent/TabContent.tsx b/packages/docs/src/app/_components/layout/TabContent/TabContent.tsx deleted file mode 100644 index 623b270c9..000000000 --- a/packages/docs/src/app/_components/layout/TabContent/TabContent.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import type { FC } from "react"; -import React from "react"; -import type { MdxFile } from "@/lib/mdx/MdxFile"; -import MdxFileView from "@/lib/mdx/components/MdxFileView"; -import { Tab, TabTitle } from "@mittwald/flow-react-components/Tabs"; -import styles from "../../../layout.module.scss"; -import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; -import * as path from "path"; - -interface Props { - mdxFile: MdxFile; - tabTitle: string; -} - -export const TabContent: FC = async (props) => { - const { mdxFile, tabTitle } = props; - - const indexFile = await MdxFileFactory.fromFile( - "src/content/" + path.dirname(mdxFile.filename) + "/index.mdx", - ); - - return ( - - {tabTitle} -
- -
- - ); -}; - -export default TabContent; diff --git a/packages/docs/src/app/_components/layout/TabContent/index.ts b/packages/docs/src/app/_components/layout/TabContent/index.ts deleted file mode 100644 index 8d8f3d171..000000000 --- a/packages/docs/src/app/_components/layout/TabContent/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import TabContent from "@/app/_components/layout/TabContent/TabContent"; - -export default TabContent; diff --git a/packages/docs/src/app/_components/layout/TopContent/TopContent.tsx b/packages/docs/src/app/_components/layout/TopContent/TopContent.tsx new file mode 100644 index 000000000..085a8cf2b --- /dev/null +++ b/packages/docs/src/app/_components/layout/TopContent/TopContent.tsx @@ -0,0 +1,45 @@ +import type { FC } from "react"; +import React from "react"; +import Heading from "@mittwald/flow-react-components/Heading"; +import { Link } from "@mittwald/flow-react-components/Link"; +import { LayoutCard } from "@mittwald/flow-react-components/LayoutCard"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout"; +import { IconExternalLink } from "@mittwald/flow-react-components/Icons"; +import type { MdxFile } from "@/lib/mdx/MdxFile"; +import MdxFileView from "@/lib/mdx/components/MdxFileView"; + +interface Props { + mdxFile: MdxFile; +} + +export const TopContent: FC = (props) => { + const { mdxFile } = props; + + const component = mdxFile.mdxSource.frontmatter.component; + + return ( + <> + + +
+ {mdxFile.getTitle()} + + {mdxFile.mdxSource.frontmatter.description} + + {component && ( + + GitHub + + + )} +
+ + + + + + ); +}; + +export default TopContent; diff --git a/packages/docs/src/app/_components/layout/TopContent/index.ts b/packages/docs/src/app/_components/layout/TopContent/index.ts new file mode 100644 index 000000000..b407ca82b --- /dev/null +++ b/packages/docs/src/app/_components/layout/TopContent/index.ts @@ -0,0 +1,3 @@ +import TopContent from "@/app/_components/layout/TopContent/TopContent"; + +export default TopContent; diff --git a/packages/docs/src/content/02-foundations/01-design/05-typography/index.mdx b/packages/docs/src/content/02-foundations/01-design/05-typography/index.mdx index aca7c12c7..c1554dfa5 100644 --- a/packages/docs/src/content/02-foundations/01-design/05-typography/index.mdx +++ b/packages/docs/src/content/02-foundations/01-design/05-typography/index.mdx @@ -2,77 +2,6 @@ title: Typography --- -# Fonts - -Für Benutzeroberflächen wird hauptsächlich die Font **Inter** verwendet. Sie -wird z. B. in [Headings](/03-components/content/heading), im Body und in den -Components eingesetzt. Im Code wird die Font Size immer in REM angegeben, damit -die Schrift vom User leicht vergrößert werden kann.
Die Line Height -beträgt immer min. 150 % der Höhe der Font. - ---- - -# Headings - -[Headings](/03-components/content/heading) zeichnen sich durch ihre Farbe und -die große Auswahl an verschiedenen Größen zur Strukturierung aus. - -| | REM | PX | Line Height | -| -------------------------------------- | --------- | ----- | ----------- | -| Heading 1 | 2 rem | 32 px | 48 lh | -| Heading 2 | 1,25 rem | 20 px | 30 lh | -| Heading 3 | 1.125 rem | 18 px | 27 lh | -| Heading 4 | 1 rem | 16 px | 24 lh | -| Heading 5 | 1 rem | 16 px | 24 lh | - ---- - -# Text - -Text wird überall auf Benutzeroberflächen verwendet, vom Fließtext bis hin zu -kleinen Hinweisen. Bei Small kann zwischen den Line Heights 21 und 24 gewählt -werden, da gerade 24lh gut in das Layout passt und 21lh für kleinere Höhen -besser geeignet ist. - -| | REM | PX | Line Height | -| ------------------------------- | --------- | ----- | ------------- | -| Text (Body) | 1 rem | 16 px | 24 lh | -| **Text (Body)** | 1 rem | 16 px | 24 lh | -| Text (Small) | 0,875 rem | 14 px | 21 lh / 24 lh | -| **Text (Small)** | 0,875 rem | 14 px | 21 lh / 24 lh | - ---- - -# Label - -[Labels](03-components/content/label) sind durch ihre graue Farbe und -Bold-Darstellung als beschreibendes Element in komplexeren Components gut -erkennbar. - -| | REM | PX | Line Height | -| -------------------- | --------- | ----- | ------------- | -| | 0,875 rem | 14 px | 21 lh / 24 lh | - ---- - -# Links - -Frei stehende [Links](/03-components/navigation/link) werden in Bold -dargestellt. Im Fließtext stehende Links verfügen über einen Unterstrich, um sie -im Text besser erkennen zu können (s. Accessibility). - -| | REM | PX | Line Height | -| ----------------- | --------- | ----- | ----------- | -| Link | 0,875 rem | 14 px | 24 lh | -| [Link]() | 1 rem | 16 px | 24 lh | - ---- - -# Code - -Um Code von der anderen Font abzuheben, wird bei Code **Fira Code** verwendet, -da sie einen eher technisches Aussehen hat. - -| | REM | PX | Line Height | -| ------ | --------- | ----- | ----------- | -| `code` | 0,875 rem | 14 px | 24 lh | +Typography strukturiert den Inhaltsbereich, indem sie eine visuelle Hierarchie +schafft. Darüber hinaus erhöht eine gute Typography die Lesbarkeit und stärkt +die Marke im Erscheinungsbild. diff --git a/packages/docs/src/content/02-foundations/01-design/05-typography/overview.mdx b/packages/docs/src/content/02-foundations/01-design/05-typography/overview.mdx new file mode 100644 index 000000000..561db1702 --- /dev/null +++ b/packages/docs/src/content/02-foundations/01-design/05-typography/overview.mdx @@ -0,0 +1,74 @@ +# Fonts + +Für Benutzeroberflächen wird hauptsächlich die Font **Inter** verwendet. Sie +wird z. B. in [Headings](/03-components/content/heading), im Body und in den +Components eingesetzt. Im Code wird die Font Size immer in REM angegeben, damit +die Schrift vom User leicht vergrößert werden kann.
Die Line Height +beträgt immer min. 150 % der Höhe der Font. + +--- + +# Headings + +[Headings](/03-components/content/heading) zeichnen sich durch ihre Farbe und +die große Auswahl an verschiedenen Größen zur Strukturierung aus. + +| | REM | PX | Line Height | +| -------------------------------------- | --------- | ----- | ----------- | +| Heading 1 | 2 rem | 32 px | 48 lh | +| Heading 2 | 1,25 rem | 20 px | 30 lh | +| Heading 3 | 1.125 rem | 18 px | 27 lh | +| Heading 4 | 1 rem | 16 px | 24 lh | +| Heading 5 | 1 rem | 16 px | 24 lh | + +--- + +# Text + +Text wird überall auf Benutzeroberflächen verwendet, vom Fließtext bis hin zu +kleinen Hinweisen. Bei Small kann zwischen den Line Heights 21 und 24 gewählt +werden, da gerade 24lh gut in das Layout passt und 21lh für kleinere Höhen +besser geeignet ist. + +| | REM | PX | Line Height | +| ------------------------------- | --------- | ----- | ------------- | +| Text (Body) | 1 rem | 16 px | 24 lh | +| **Text (Body)** | 1 rem | 16 px | 24 lh | +| Text (Small) | 0,875 rem | 14 px | 21 lh / 24 lh | +| **Text (Small)** | 0,875 rem | 14 px | 21 lh / 24 lh | + +--- + +# Label + +[Labels](03-components/content/label) sind durch ihre graue Farbe und +Bold-Darstellung als beschreibendes Element in komplexeren Components gut +erkennbar. + +| | REM | PX | Line Height | +| -------------------- | --------- | ----- | ------------- | +| | 0,875 rem | 14 px | 21 lh / 24 lh | + +--- + +# Links + +Frei stehende [Links](/03-components/navigation/link) werden in Bold +dargestellt. Im Fließtext stehende Links verfügen über einen Unterstrich, um sie +im Text besser erkennen zu können (s. Accessibility). + +| | REM | PX | Line Height | +| ----------------- | --------- | ----- | ----------- | +| Link | 0,875 rem | 14 px | 24 lh | +| [Link]() | 1 rem | 16 px | 24 lh | + +--- + +# Code + +Um Code von der anderen Font abzuheben, wird bei Code **Fira Code** verwendet, +da sie einen eher technisches Aussehen hat. + +| | REM | PX | Line Height | +| ------ | --------- | ----- | ----------- | +| `code` | 0,875 rem | 14 px | 24 lh | diff --git a/packages/docs/src/content/02-foundations/02-structure/01-layout/overview.mdx b/packages/docs/src/content/02-foundations/02-structure/01-layout/overview.mdx index 84c8e87ac..3b5a1f9af 100644 --- a/packages/docs/src/content/02-foundations/02-structure/01-layout/overview.mdx +++ b/packages/docs/src/content/02-foundations/02-structure/01-layout/overview.mdx @@ -1,3 +1,5 @@ +# Best Practices + Ein Layout fügt verschiedene Elemente der Benutzeroberfläche zu einer logischen Struktur zusammen. Die folgenden Punkte sind hilfreich, um ein gutes Layout zu erstellen: diff --git a/packages/docs/src/content/02-foundations/02-structure/02-spacing/overview.mdx b/packages/docs/src/content/02-foundations/02-structure/02-spacing/overview.mdx index e3ef3cf06..d91cd6e76 100644 --- a/packages/docs/src/content/02-foundations/02-structure/02-spacing/overview.mdx +++ b/packages/docs/src/content/02-foundations/02-structure/02-spacing/overview.mdx @@ -1,3 +1,5 @@ +# Grundlagen + Die Spacings und generell alle Größen in Flow basieren auf 8-Pixel-Schritten. Da jedoch oft kleinere Spacings als 8px benötigt werden, stehen zusätzlich feinere Abstufungen von 4px und 2px zur Verfügung. Standardmäßig folgen alle Components @@ -6,7 +8,9 @@ Layout hat – sollten die Components [ColumnLayout](/03-components/structure/column-layout) und [Section](/03-components/structure/section) verwendet werden. -## Best practices +--- + +# Best practices Um mit dem Spacing ein harmonisches Layout zu erschaffen, achte auf folgende Punkte: diff --git a/packages/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx b/packages/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx index 2ce84b612..6d1941108 100644 --- a/packages/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx +++ b/packages/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx @@ -5,168 +5,3 @@ title: Sprach-Guide Erfahre, was unsere Sprache auszeichnet und an welchen Leitlinien du dich bei deinen Texten orientieren kannst. Außerdem erklärt unser Glossar alle Begriffe, auf die du im mStudio Kontext treffen kannst. - ---- - -## Wie wir sprechen - -### Technisch aber einfach verständlich - -Wir überzeugen mit Inhalten, nicht mit langen und verschachtelten Erklärungen. -Kurze Sätze, einfacher Satzbau – so bleiben wir jederzeit übersichtlich und -verständlich. - -### Auf Augenhöhe - -Wir drücken uns technisch aber verständlich aus – genau mit der technischen -Tiefe, die dem Nutzer weiterhilft. - -### Aktiv - -Wir machen Technologie zugänglich. Das bietet keinen Raum für Passivität. Dafür -kommunizieren wir aktiv und suchen proaktiv nach den besten Lösungen. So -generieren wir das beste Nutzungserlebnis. - -### Konsistent - -Kunde oder Nutzer? Buchen oder installieren? Ist alles geregelt. Deshalb quäle -dich nicht mit solchen Fragen, sondern verwende die allgemeinen Schreibweisen -des Unternehmens. So generieren wir für unsere Nutzer immer und überall das -gleiche Erlebnis. - -### Glossar - -Sie können sich darauf verlassen, dass wir ihnen in jeder Situation weiterhelfen -– mit einer Sprache, die sie von uns kennen und erwarten. - ---- - -## Leitlinien - -### Aktive Sprache - -Wir agieren aktiv. Das zeigen wir auch in unserer Sprache. Deshalb verzichten -wir auf passive Satzkonstruktionen. - - - Paula hat den Grill angeschmissen. - Der Grill wurde von Paula angeschmissen. - - -### Sie, Du oder Ihr - -Respekt braucht kein „Sie“. Wir reden Nutzer genauso an, wie Kolleg\*innen: mit -einem freundlichen „Du“. Unsere Nutzer reden wir persönlich an, also im -Singular. - -In Mailings und Tickets werden Du, Dein, Deiner, usw. immer großgeschrieben. - - - Du weißt, mittwald hat das beste Hosting für Agenturen. - Ihr wisst, mittwald hat das beste Hosting für Agenturen. - - -### Bindestrich: Wörter koppeln - -Zweisprachige Wortkombinationen werden mit einem Bindestrich gekoppelt. - -Englische Begriffe werden nicht gekoppelt, deutsche Kombinationen werden -zusammengeschrieben. - - - Ein Tarif-Upgrade kommt selten allein. Erst recht im Cloud Hosting. - - Ein Tarif Upgrade allein macht noch keinen Sommer. Auch nicht im - Cloud-Hosting. - - - -Egal ob mittwald Hosting oder mStudio Login – die Regel ist immer die gleiche: -mittwald und Produktnamen werden niemals mit einem Bindestrich an ein anderes -Wort gekoppelt. - -Generell gilt: Im Zweifel für die Lesbarkeit. Macht die korrekte Schreibweise -Probleme (sieht schlecht aus, Umbruch, usw.), missachten wir die Regeln. Das -sollte aber nur die Ausnahme sein. - -### Gendern - -mittwald lebt Gleichberechtigung. Um kurz und prägnant formulieren zu können, -gendern wir jedoch nur dort, wo es Sinn macht, z.B. in Stellenanzeigen. - -An Orten mit wenig Platz, etwa im mStudio oder auf Social Media, verwenden wir -die meist verwendete Schreibweise. - -### KEIN! GRUND! ZU! SCHREIEN!!! - -Was wir tun ist spannend genug. Da braucht es keine Versalien und -Ausrufezeichen. -Wie immer gilt auch hier: Ausnahmen bestätigen die Regel. Danke fürs Lesen! - -## Klare Gliederung - -Dein Text sollte durch Absätze gegliedert sein. Im besten Fall sind diese nicht -länger als 5 Zeilen. Auch Nummerierungen oder Bulletpoints helfen den Lesern, -deinem Text besser zu folgen und Wichtiges schneller wahrzunehmen. - -### Kurze Sätze - -Fass dich kurz. Um Technisches einfach zu formulieren, helfen kurze Sätze. -Faustregel: Satzlänge maximal 1,5 Zeilen. 1 Subjekt pro Satz. - -### mittwald, mStudio und proSpace werden IMMER klein geschrieben - -... auch am Satzanfang. - -### Wichtige Aspekte hervorheben - -Fette zentrale Begriffe, um Wichtiges in den Vordergrund zu stellen. Beschränke -dich dabei auf einzelne Wörter. Ganze Sätze (oder gar Absätze) werden nicht -gefettet. - -### Zahlen - -Um die Lesbarkeit zu steigern, schreiben wir alle Zahlen als Ziffern, auch von 0 -bis 12. - ---- - -## Glossar - -- **Anlegen:** Hinzufügen von Objekten ohne Vertragsposition, die von Grund auf - von den Nutzern erstellt werden müssen. -- **Artikel:** Alle kostenpflichtigen Produkte, z.B. Domains, die hinzugebucht - werden. -- **Buchen:** Beschreibt das kostenpflichtige Bestellen eines Artikels, - Projektes oder Servers. Wird auch als hinzufügen / anlegen / kaufen / - Kaufprozess starten / usw. beschrieben, jeweils ergänzt durch das zu buchende - Objekt (Beispiel: Domain buchen). -- **Installieren:** Siehe anlegen, nur speziell für den Bereich Software (Apps, - Systemsoftware). -- **Kündigen:** Elemente, die an einer vertraglichen Verbindlichkeit hängen, - müssen gekündigt werden (Ausnahme: Domains). -- **Löschen:** Elemente, die nicht an einer vertraglichen Verbindlichkeit - hängen, werden gelöscht (Ausnahme: Domains). -- **Nutzer:** Wir reden im mStudio immer vom Nutzer oder der Organisation. Den - Begriff "Kunde" verwenden wir nicht. -- **Organisation:** In der Organisation werden alle wichtigen - Zahlungsinformationen sowie Vertragspartnerdaten hinterlegt. Server und - Einzelprojekte sind immer einer Organisation zugeordnet. -- **Projekt:** Das Projekt beinhaltet alle Komponenten zum Betreiben eines - Webprojektes. Bspw. Apps, Domains, Datenbanken, E-Mail-Postfächer etc. -- **Ressourcen:** Beschreibt die Kombination aus vCPU/RAM (Flavour) und - Speicherplatz. -- **Server:** Ein Server ist einer Organisation zugeordnet und dient zur - Verwaltung des Speicherplatzes und der Ressourcen. Auf einem Server können, - solange die technischen Limits nicht überschritten werden, unbegrenzt viele - Projekte angelegt werden. -- **Ticket:** Schriftliche Anfrage eines Nutzers. -- **Übersicht:** Eine Liste beliebiger Objekte (z.B. Artikel, Domains, Projekte, - E-Mail-Adressen, Apps, …). -- **USt.:** Alle Preise, die dem Nutzer in der finalen Buchungsübersicht - angezeigt werden, werden in Netto und Brutto dargestellt. Dabei werden die - Bruttowerte mit dem Zusatz “inkl. USt.” dargestellt. -- **Vertragspartner:** Eine natürliche oder juristische Person, die mit uns - einen Vertrag abgeschlossen hat (es gibt nicht zwangsläufig einen Nutzer, der - mit dieser Person übereinstimmt). -- **Zahlungsart:** Auswahl der Optionen, wie Produkte bezahlt werden können. diff --git a/packages/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/overview.mdx b/packages/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/overview.mdx new file mode 100644 index 000000000..23ce5f76f --- /dev/null +++ b/packages/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/overview.mdx @@ -0,0 +1,162 @@ +## Wie wir sprechen + +### Technisch aber einfach verständlich + +Wir überzeugen mit Inhalten, nicht mit langen und verschachtelten Erklärungen. +Kurze Sätze, einfacher Satzbau – so bleiben wir jederzeit übersichtlich und +verständlich. + +### Auf Augenhöhe + +Wir drücken uns technisch aber verständlich aus – genau mit der technischen +Tiefe, die dem Nutzer weiterhilft. + +### Aktiv + +Wir machen Technologie zugänglich. Das bietet keinen Raum für Passivität. Dafür +kommunizieren wir aktiv und suchen proaktiv nach den besten Lösungen. So +generieren wir das beste Nutzungserlebnis. + +### Konsistent + +Kunde oder Nutzer? Buchen oder installieren? Ist alles geregelt. Deshalb quäle +dich nicht mit solchen Fragen, sondern verwende die allgemeinen Schreibweisen +des Unternehmens. So generieren wir für unsere Nutzer immer und überall das +gleiche Erlebnis. + +### Glossar + +Sie können sich darauf verlassen, dass wir ihnen in jeder Situation weiterhelfen +– mit einer Sprache, die sie von uns kennen und erwarten. + +--- + +## Leitlinien + +### Aktive Sprache + +Wir agieren aktiv. Das zeigen wir auch in unserer Sprache. Deshalb verzichten +wir auf passive Satzkonstruktionen. + + + Paula hat den Grill angeschmissen. + Der Grill wurde von Paula angeschmissen. + + +### Sie, Du oder Ihr + +Respekt braucht kein „Sie“. Wir reden Nutzer genauso an, wie Kolleg\*innen: mit +einem freundlichen „Du“. Unsere Nutzer reden wir persönlich an, also im +Singular. + +In Mailings und Tickets werden Du, Dein, Deiner, usw. immer großgeschrieben. + + + Du weißt, mittwald hat das beste Hosting für Agenturen. + Ihr wisst, mittwald hat das beste Hosting für Agenturen. + + +### Bindestrich: Wörter koppeln + +Zweisprachige Wortkombinationen werden mit einem Bindestrich gekoppelt. + +Englische Begriffe werden nicht gekoppelt, deutsche Kombinationen werden +zusammengeschrieben. + + + Ein Tarif-Upgrade kommt selten allein. Erst recht im Cloud Hosting. + + Ein Tarif Upgrade allein macht noch keinen Sommer. Auch nicht im + Cloud-Hosting. + + + +Egal ob mittwald Hosting oder mStudio Login – die Regel ist immer die gleiche: +mittwald und Produktnamen werden niemals mit einem Bindestrich an ein anderes +Wort gekoppelt. + +Generell gilt: Im Zweifel für die Lesbarkeit. Macht die korrekte Schreibweise +Probleme (sieht schlecht aus, Umbruch, usw.), missachten wir die Regeln. Das +sollte aber nur die Ausnahme sein. + +### Gendern + +mittwald lebt Gleichberechtigung. Um kurz und prägnant formulieren zu können, +gendern wir jedoch nur dort, wo es Sinn macht, z.B. in Stellenanzeigen. + +An Orten mit wenig Platz, etwa im mStudio oder auf Social Media, verwenden wir +die meist verwendete Schreibweise. + +### KEIN! GRUND! ZU! SCHREIEN!!! + +Was wir tun ist spannend genug. Da braucht es keine Versalien und +Ausrufezeichen. Wie immer gilt auch hier: Ausnahmen bestätigen die Regel. Danke +fürs Lesen! + +## Klare Gliederung + +Dein Text sollte durch Absätze gegliedert sein. Im besten Fall sind diese nicht +länger als 5 Zeilen. Auch Nummerierungen oder Bulletpoints helfen den Lesern, +deinem Text besser zu folgen und Wichtiges schneller wahrzunehmen. + +### Kurze Sätze + +Fass dich kurz. Um Technisches einfach zu formulieren, helfen kurze Sätze. +Faustregel: Satzlänge maximal 1,5 Zeilen. 1 Subjekt pro Satz. + +### mittwald, mStudio und proSpace werden IMMER klein geschrieben + +... auch am Satzanfang. + +### Wichtige Aspekte hervorheben + +Fette zentrale Begriffe, um Wichtiges in den Vordergrund zu stellen. Beschränke +dich dabei auf einzelne Wörter. Ganze Sätze (oder gar Absätze) werden nicht +gefettet. + +### Zahlen + +Um die Lesbarkeit zu steigern, schreiben wir alle Zahlen als Ziffern, auch von 0 +bis 12. + +--- + +## Glossar + +- **Anlegen:** Hinzufügen von Objekten ohne Vertragsposition, die von Grund auf + von den Nutzern erstellt werden müssen. +- **Artikel:** Alle kostenpflichtigen Produkte, z.B. Domains, die hinzugebucht + werden. +- **Buchen:** Beschreibt das kostenpflichtige Bestellen eines Artikels, + Projektes oder Servers. Wird auch als hinzufügen / anlegen / kaufen / + Kaufprozess starten / usw. beschrieben, jeweils ergänzt durch das zu buchende + Objekt (Beispiel: Domain buchen). +- **Installieren:** Siehe anlegen, nur speziell für den Bereich Software (Apps, + Systemsoftware). +- **Kündigen:** Elemente, die an einer vertraglichen Verbindlichkeit hängen, + müssen gekündigt werden (Ausnahme: Domains). +- **Löschen:** Elemente, die nicht an einer vertraglichen Verbindlichkeit + hängen, werden gelöscht (Ausnahme: Domains). +- **Nutzer:** Wir reden im mStudio immer vom Nutzer oder der Organisation. Den + Begriff "Kunde" verwenden wir nicht. +- **Organisation:** In der Organisation werden alle wichtigen + Zahlungsinformationen sowie Vertragspartnerdaten hinterlegt. Server und + Einzelprojekte sind immer einer Organisation zugeordnet. +- **Projekt:** Das Projekt beinhaltet alle Komponenten zum Betreiben eines + Webprojektes. Bspw. Apps, Domains, Datenbanken, E-Mail-Postfächer etc. +- **Ressourcen:** Beschreibt die Kombination aus vCPU/RAM (Flavour) und + Speicherplatz. +- **Server:** Ein Server ist einer Organisation zugeordnet und dient zur + Verwaltung des Speicherplatzes und der Ressourcen. Auf einem Server können, + solange die technischen Limits nicht überschritten werden, unbegrenzt viele + Projekte angelegt werden. +- **Ticket:** Schriftliche Anfrage eines Nutzers. +- **Übersicht:** Eine Liste beliebiger Objekte (z.B. Artikel, Domains, Projekte, + E-Mail-Adressen, Apps, …). +- **USt.:** Alle Preise, die dem Nutzer in der finalen Buchungsübersicht + angezeigt werden, werden in Netto und Brutto dargestellt. Dabei werden die + Bruttowerte mit dem Zusatz “inkl. USt.” dargestellt. +- **Vertragspartner:** Eine natürliche oder juristische Person, die mit uns + einen Vertrag abgeschlossen hat (es gibt nicht zwangsläufig einen Nutzer, der + mit dieser Person übereinstimmt). +- **Zahlungsart:** Auswahl der Optionen, wie Produkte bezahlt werden können. diff --git a/packages/docs/src/content/02-foundations/03-content-guidelines/02-fehlermeldungen/index.mdx b/packages/docs/src/content/02-foundations/03-content-guidelines/02-fehlermeldungen/index.mdx index 009019c1a..adbca9fc7 100644 --- a/packages/docs/src/content/02-foundations/03-content-guidelines/02-fehlermeldungen/index.mdx +++ b/packages/docs/src/content/02-foundations/03-content-guidelines/02-fehlermeldungen/index.mdx @@ -2,147 +2,8 @@ title: Fehlermeldungen --- -# Best Practices - -- Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems. -- Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und - handlungsorientiert sind. -- Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren. -- Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem - Umfang und ihrer Dringlichkeit. - ---- - -# Grundlagen - -## Kurz und hilfreich - -Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es -gilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch, -dass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen. - - - - - - -## Verständliche Sprache auf Augenhöhe - -Wähle eine Sprache, die dem Kontext der jeweiligen Benutzeroberfläche -entspricht. Fehlermeldungen müssen klar und verständlich formuliert sein. In -bestimmten Fällen kann dabei eine etwas technischere Sprache hilfreich sein. - - - - - - -## Schuldzuweisungen vermeiden - -Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die -Fehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln, -anstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken. - - - - - - -## Fehler eingestehen, Verständnis erleichtern - -Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als -"wir" und den Nutzer als "du" beziehen. So werden die Fragen "Wo ist etwas -schiefgegangen?" und "Wer muss handeln, um es zu beheben?" einfach und -verständlich beantwortet. - - - - - - -## Keine ungerechtfertigten Entschuldigungen - -Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer -erscheinen lassen und vom wichtigen Teil der Nachricht ablenken. -Entschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den -Verlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des -Problems ausführen muss. - - - - - Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten. - - - - - Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld - trägt. - - - - - -## Wahrscheinlichsten Fehler nennen - -Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben -ist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben, -wie der wahrscheinlichste Grund zu beheben ist. - - - - - - -## Nicht zu spezifisch - -Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist -es nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder -Ordner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der -Benutzeroberfläche finden kann. - - - - - - -## Aktiv schreiben - -Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern. - - - - - - -## Positiv formulieren - -Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte -Begriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...) -zu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes -getan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für -die es keine direkte Lösung gibt, nicht immer möglich ist. - - - - - +Fehler entstehen, wenn User auf unerwartete Ergebnisse stoßen – das führt oft zu +Frustration, Verwirrung und zusätzlichem Aufwand. Daher ist der beste Fehler +der, der gar nicht erst auftritt. Sollte dennoch ein Fehler auftreten, muss die +Fehlermeldung klar, hilfreich und leicht verständlich formuliert sein, um den +User bestmöglich zu unterstützen. diff --git a/packages/docs/src/content/02-foundations/03-content-guidelines/02-fehlermeldungen/overview.mdx b/packages/docs/src/content/02-foundations/03-content-guidelines/02-fehlermeldungen/overview.mdx new file mode 100644 index 000000000..e8a313995 --- /dev/null +++ b/packages/docs/src/content/02-foundations/03-content-guidelines/02-fehlermeldungen/overview.mdx @@ -0,0 +1,144 @@ +# Best Practices + +- Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems. +- Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und + handlungsorientiert sind. +- Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren. +- Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem + Umfang und ihrer Dringlichkeit. + +--- + +# Grundlagen + +## Kurz und hilfreich + +Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es +gilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch, +dass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen. + + + + + + +## Verständliche Sprache auf Augenhöhe + +Wähle eine Sprache, die dem Kontext der jeweiligen Benutzeroberfläche +entspricht. Fehlermeldungen müssen klar und verständlich formuliert sein. In +bestimmten Fällen kann dabei eine etwas technischere Sprache hilfreich sein. + + + + + + +## Schuldzuweisungen vermeiden + +Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die +Fehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln, +anstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken. + + + + + + +## Fehler eingestehen, Verständnis erleichtern + +Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als +"wir" und den Nutzer als "du" beziehen. So werden die Fragen "Wo ist etwas +schiefgegangen?" und "Wer muss handeln, um es zu beheben?" einfach und +verständlich beantwortet. + + + + + + +## Keine ungerechtfertigten Entschuldigungen + +Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer +erscheinen lassen und vom wichtigen Teil der Nachricht ablenken. +Entschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den +Verlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des +Problems ausführen muss. + + + + + Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten. + + + + + Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld + trägt. + + + + + +## Wahrscheinlichsten Fehler nennen + +Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben +ist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben, +wie der wahrscheinlichste Grund zu beheben ist. + + + + + + +## Nicht zu spezifisch + +Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist +es nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder +Ordner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der +Benutzeroberfläche finden kann. + + + + + + +## Aktiv schreiben + +Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern. + + + + + + +## Positiv formulieren + +Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte +Begriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...) +zu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes +getan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für +die es keine direkte Lösung gibt, nicht immer möglich ist. + + + + + From dc1a90c6889e2f5dd06fefb11d9e416e4d25607e Mon Sep 17 00:00:00 2001 From: Lisa18289 Date: Wed, 6 Nov 2024 13:25:11 +0000 Subject: [PATCH 11/23] chore(release): bump version to 0.1.0-alpha.335 --- CHANGELOG.md | 9 +++++++++ lerna.json | 2 +- packages/components/CHANGELOG.md | 9 +++++++++ packages/components/package.json | 2 +- packages/design-tokens/CHANGELOG.md | 9 +++++++++ packages/design-tokens/package.json | 2 +- packages/react-tunnel/CHANGELOG.md | 9 +++++++++ packages/react-tunnel/package.json | 2 +- packages/stylesheet/CHANGELOG.md | 9 +++++++++ packages/stylesheet/package.json | 2 +- 10 files changed, 50 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b2e5a799c..87cdaf249 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.335](https://github.com/mittwald/flow/compare/0.1.0-alpha.334...0.1.0-alpha.335) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-project + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.334](https://github.com/mittwald/flow/compare/0.1.0-alpha.333...0.1.0-alpha.334) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-project diff --git a/lerna.json b/lerna.json index 8315af06a..787ec516e 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0-alpha.334" + "version": "0.1.0-alpha.335" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5916eb716..23bb787a3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.335](https://github.com/mittwald/flow/compare/0.1.0-alpha.334...0.1.0-alpha.335) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-react-components + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.334](https://github.com/mittwald/flow/compare/0.1.0-alpha.333...0.1.0-alpha.334) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-react-components diff --git a/packages/components/package.json b/packages/components/package.json index 273ad99ad..86ba43cf9 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-react-components", - "version": "0.1.0-alpha.334", + "version": "0.1.0-alpha.335", "type": "module", "description": "A React implementation of Flow, mittwald’s design system", "homepage": "https://mittwald.github.io/flow", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 876728687..b329881f1 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.335](https://github.com/mittwald/flow/compare/0.1.0-alpha.334...0.1.0-alpha.335) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-design-tokens + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.334](https://github.com/mittwald/flow/compare/0.1.0-alpha.333...0.1.0-alpha.334) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-design-tokens diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 6dcf4844a..fbd7d7d6f 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-design-tokens", - "version": "0.1.0-alpha.334", + "version": "0.1.0-alpha.335", "type": "module", "description": "The design tokens used in Flow, mittwald’s design system", "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens", diff --git a/packages/react-tunnel/CHANGELOG.md b/packages/react-tunnel/CHANGELOG.md index b9ec44f19..8190f81a9 100644 --- a/packages/react-tunnel/CHANGELOG.md +++ b/packages/react-tunnel/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.335](https://github.com/mittwald/flow/compare/0.1.0-alpha.334...0.1.0-alpha.335) (2024-11-06) + +**Note:** Version bump only for package @mittwald/react-tunnel + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.334](https://github.com/mittwald/flow/compare/0.1.0-alpha.333...0.1.0-alpha.334) (2024-11-06) **Note:** Version bump only for package @mittwald/react-tunnel diff --git a/packages/react-tunnel/package.json b/packages/react-tunnel/package.json index d2e8f0ee6..b4fd7e848 100644 --- a/packages/react-tunnel/package.json +++ b/packages/react-tunnel/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/react-tunnel", - "version": "0.1.0-alpha.334", + "version": "0.1.0-alpha.335", "type": "module", "description": "It's like a Portal – but with React components", "keywords": [ diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md index 693bbfc4d..7b230d00f 100644 --- a/packages/stylesheet/CHANGELOG.md +++ b/packages/stylesheet/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.335](https://github.com/mittwald/flow/compare/0.1.0-alpha.334...0.1.0-alpha.335) (2024-11-06) + +**Note:** Version bump only for package @mittwald/flow-stylesheet + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.334](https://github.com/mittwald/flow/compare/0.1.0-alpha.333...0.1.0-alpha.334) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-stylesheet diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index d8a43966f..5a0893178 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-stylesheet", - "version": "0.1.0-alpha.334", + "version": "0.1.0-alpha.335", "type": "module", "description": "A collection of CSS classes used in Flow, mittwald's design system.", "homepage": "https://mittwald.github.io/flow", From 05437591d71134e87694306c30571aab5b04299f Mon Sep 17 00:00:00 2001 From: Lisa Meyer <84317589+Lisa18289@users.noreply.github.com> Date: Thu, 7 Nov 2024 13:33:34 +0100 Subject: [PATCH 12/23] feat(FileCard): Add Link and Image to FileCard (#957) --- .../components/FileCard/FileCard.module.scss | 48 ++++++++++++-- .../src/components/FileCard/FileCard.tsx | 62 +++++++++---------- .../FileCard/components/Avatar/Avatar.tsx | 30 +++++++++ .../FileCard/components/Avatar/index.ts | 1 + .../components/DeleteButton/DeleteButton.tsx | 31 ++++++++++ .../FileCard/components/DeleteButton/index.ts | 1 + .../FileCard/stories/Default.stories.tsx | 25 +++++++- .../FileCard/stories/EdgeCases.stories.tsx | 20 +++++- .../design-tokens/src/upload/file-card.yml | 5 ++ .../upload/file-card/examples/image.tsx | 8 +++ .../upload/file-card/examples/link.tsx | 8 +++ .../upload/file-card/overview.mdx | 12 ++++ 12 files changed, 212 insertions(+), 39 deletions(-) create mode 100644 packages/components/src/components/FileCard/components/Avatar/Avatar.tsx create mode 100644 packages/components/src/components/FileCard/components/Avatar/index.ts create mode 100644 packages/components/src/components/FileCard/components/DeleteButton/DeleteButton.tsx create mode 100644 packages/components/src/components/FileCard/components/DeleteButton/index.ts create mode 100644 packages/docs/src/content/03-components/upload/file-card/examples/image.tsx create mode 100644 packages/docs/src/content/03-components/upload/file-card/examples/link.tsx diff --git a/packages/components/src/components/FileCard/FileCard.module.scss b/packages/components/src/components/FileCard/FileCard.module.scss index d7db5f757..9f993b0f2 100644 --- a/packages/components/src/components/FileCard/FileCard.module.scss +++ b/packages/components/src/components/FileCard/FileCard.module.scss @@ -3,13 +3,18 @@ border-width: var(--file-card--border-width); border-style: var(--file-card--border-style); border-radius: var(--file-card--corner-radius); - padding-inline: var(--file-card--padding-x); - padding-block: var(--file-card--padding-y); - display: flex; - gap: var(--file-card--spacing); - align-items: center; max-width: 100%; overflow: hidden; + position: relative; + + &:not(:has(.link)), + .link { + display: flex; + align-items: center; + padding-inline: var(--file-card--padding-x); + padding-block: var(--file-card--padding-y); + gap: var(--file-card--spacing); + } .text { display: flex; @@ -29,4 +34,37 @@ font-size: var(--file-card--sub-title-font-size); } } + + &:has(.link) { + display: grid; + grid-template-areas: "content"; + + .link { + flex-grow: 1; + grid-area: content; + overflow: hidden; + + &:hover { + background-color: var(--file-card--background-color--hover); + } + + &[data-pressed] { + background-color: var(--file-card--background-color--pressed); + } + } + + .text { + --button-width: calc( + var(--icon--size--s) + var(--button--padding-s-icon-only) * 2 + ); + padding-right: calc(var(--file-card--spacing) + var(--button-width)); + } + + .deleteButton { + grid-area: content; + margin-right: var(--file-card--padding-x); + justify-self: end; + align-self: center; + } + } } diff --git a/packages/components/src/components/FileCard/FileCard.tsx b/packages/components/src/components/FileCard/FileCard.tsx index 159a3a792..c04db33c9 100644 --- a/packages/components/src/components/FileCard/FileCard.tsx +++ b/packages/components/src/components/FileCard/FileCard.tsx @@ -1,9 +1,6 @@ import React from "react"; -import { Avatar } from "@/components/Avatar"; +import { Avatar } from "./components/Avatar"; import { Text } from "@/components/Text"; -import { IconClose, IconFile } from "@/components/Icon/components/icons"; -import IconImage from "@/components/Icon/components/icons/IconImage"; -import { Button } from "@/components/Button"; import type { PropsWithClassName, PropsWithElementType, @@ -11,17 +8,20 @@ import type { import styles from "./FileCard.module.scss"; import clsx from "clsx"; import { flowComponent } from "@/lib/componentFactory/flowComponent"; -import locales from "./locales/*.locale.json"; -import { useLocalizedStringFormatter } from "react-aria"; import { FileSizeText } from "@/components/FileCard/components/FileSizeText"; +import { Link, type LinkProps } from "@/components/Link"; +import Wrap from "@/components/Wrap"; +import { DeleteButton } from "@/components/FileCard/components/DeleteButton"; export interface FileCardProps extends PropsWithClassName, - PropsWithElementType<"div" | "li"> { + PropsWithElementType<"div" | "li">, + Pick { name: string; type?: string; onDelete?: () => void; sizeInBytes?: number; + imageSrc?: string; } export const FileCard = flowComponent("FileCard", (props) => { @@ -32,40 +32,38 @@ export const FileCard = flowComponent("FileCard", (props) => { name, className, elementType = "div", + onPress, + href, + target, + download, + imageSrc, } = props; const rootClassName = clsx(styles.fileCard, className); const Element = elementType; - const stringFormatter = useLocalizedStringFormatter(locales); - - const avatar = ( - - {type?.includes("image") ? : } - - ); - return ( - {avatar} - - - {name} - - {sizeInBytes && } - - {onDelete && ( - - )} + + + + {name} + + {sizeInBytes && } + + + + {onDelete && } ); }); diff --git a/packages/components/src/components/FileCard/components/Avatar/Avatar.tsx b/packages/components/src/components/FileCard/components/Avatar/Avatar.tsx new file mode 100644 index 000000000..457062f13 --- /dev/null +++ b/packages/components/src/components/FileCard/components/Avatar/Avatar.tsx @@ -0,0 +1,30 @@ +import type { FC } from "react"; +import React from "react"; +import IconImage from "../../../Icon/components/icons/IconImage"; +import { IconFile } from "@/components/Icon/components/icons"; +import { Avatar as AvatarComponent } from "@/components/Avatar"; +import { Image } from "@/components/Image"; + +interface Props { + type?: string; + imageSrc?: string; +} + +export const Avatar: FC = (props) => { + const { type, imageSrc } = props; + + if (imageSrc) { + return ( + + + + ); + } + + return ( + + {type?.startsWith("image") ? : } + + ); +}; +export default Avatar; diff --git a/packages/components/src/components/FileCard/components/Avatar/index.ts b/packages/components/src/components/FileCard/components/Avatar/index.ts new file mode 100644 index 000000000..8d3d546e7 --- /dev/null +++ b/packages/components/src/components/FileCard/components/Avatar/index.ts @@ -0,0 +1 @@ +export * from "./Avatar"; diff --git a/packages/components/src/components/FileCard/components/DeleteButton/DeleteButton.tsx b/packages/components/src/components/FileCard/components/DeleteButton/DeleteButton.tsx new file mode 100644 index 000000000..5990cb852 --- /dev/null +++ b/packages/components/src/components/FileCard/components/DeleteButton/DeleteButton.tsx @@ -0,0 +1,31 @@ +import type { FC } from "react"; +import React from "react"; +import { Button } from "@/components/Button"; +import styles from "@/components/FileCard/FileCard.module.scss"; +import { IconClose } from "@/components/Icon/components/icons"; +import locales from "../../locales/*.locale.json"; +import { useLocalizedStringFormatter } from "react-aria"; + +interface Props { + onDelete: () => void; +} + +export const DeleteButton: FC = (props) => { + const { onDelete } = props; + const stringFormatter = useLocalizedStringFormatter(locales); + + return ( + + ); +}; + +export default DeleteButton; diff --git a/packages/components/src/components/FileCard/components/DeleteButton/index.ts b/packages/components/src/components/FileCard/components/DeleteButton/index.ts new file mode 100644 index 000000000..5ee6de22b --- /dev/null +++ b/packages/components/src/components/FileCard/components/DeleteButton/index.ts @@ -0,0 +1 @@ +export * from "./DeleteButton"; diff --git a/packages/components/src/components/FileCard/stories/Default.stories.tsx b/packages/components/src/components/FileCard/stories/Default.stories.tsx index a614ab24a..6a0a02dc3 100644 --- a/packages/components/src/components/FileCard/stories/Default.stories.tsx +++ b/packages/components/src/components/FileCard/stories/Default.stories.tsx @@ -1,6 +1,8 @@ import type { Meta, StoryObj } from "@storybook/react"; import React from "react"; import { FileCard } from "@/components/FileCard"; +import { dummyText } from "@/lib/dev/dummyText"; +import { action } from "@storybook/addon-actions"; const meta: Meta = { title: "Upload/FileCard", @@ -21,7 +23,28 @@ export const WithSize: Story = { args: { sizeInBytes: 47500 } }; export const WithOnDelete: Story = { args: { onDelete: () => { - console.log("deleted"); + action("onDelete"); }, }, }; + +export const WithLink: Story = { + args: { + href: "#", + }, +}; + +export const WithLinkAndOnDelete: Story = { + args: { + href: "#", + onDelete: () => { + action("onDelete"); + }, + }, +}; + +export const WithImage: Story = { + args: { + imageSrc: dummyText.imageSrc, + }, +}; diff --git a/packages/components/src/components/FileCard/stories/EdgeCases.stories.tsx b/packages/components/src/components/FileCard/stories/EdgeCases.stories.tsx index dcb86430f..5bdddeb8b 100644 --- a/packages/components/src/components/FileCard/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/FileCard/stories/EdgeCases.stories.tsx @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import defaultMeta from "./Default.stories"; import { FileCard } from "@/components/FileCard"; import { dummyText } from "@/lib/dev/dummyText"; +import { action } from "@storybook/addon-actions"; const meta: Meta = { ...defaultMeta, @@ -13,5 +14,22 @@ export default meta; type Story = StoryObj; export const LongName: Story = { - args: { name: dummyText.long, sizeInBytes: 47500 }, + args: { + name: dummyText.long, + sizeInBytes: 47500, + onDelete: () => { + action("onDelete"); + }, + }, +}; + +export const LongNameAndLink: Story = { + args: { + name: dummyText.long, + sizeInBytes: 47500, + onDelete: () => { + action("onDelete"); + }, + href: "#", + }, }; diff --git a/packages/design-tokens/src/upload/file-card.yml b/packages/design-tokens/src/upload/file-card.yml index f86cce5c8..027cfdab1 100644 --- a/packages/design-tokens/src/upload/file-card.yml +++ b/packages/design-tokens/src/upload/file-card.yml @@ -15,3 +15,8 @@ file-card: value: "{neutral-outline-border-color}" sub-title-font-size: value: "{font-size-text.s}" + background-color: + hover: + value: "{neutral-outline-background-color.hover}" + pressed: + value: "{neutral-outline-background-color.pressed}" diff --git a/packages/docs/src/content/03-components/upload/file-card/examples/image.tsx b/packages/docs/src/content/03-components/upload/file-card/examples/image.tsx new file mode 100644 index 000000000..8af030dbf --- /dev/null +++ b/packages/docs/src/content/03-components/upload/file-card/examples/image.tsx @@ -0,0 +1,8 @@ +import FileCard from "@mittwald/flow-react-components/FileCard"; + +; diff --git a/packages/docs/src/content/03-components/upload/file-card/examples/link.tsx b/packages/docs/src/content/03-components/upload/file-card/examples/link.tsx new file mode 100644 index 000000000..9ee840de3 --- /dev/null +++ b/packages/docs/src/content/03-components/upload/file-card/examples/link.tsx @@ -0,0 +1,8 @@ +import FileCard from "@mittwald/flow-react-components/FileCard"; + +; diff --git a/packages/docs/src/content/03-components/upload/file-card/overview.mdx b/packages/docs/src/content/03-components/upload/file-card/overview.mdx index 5a9bb058f..b811de211 100644 --- a/packages/docs/src/content/03-components/upload/file-card/overview.mdx +++ b/packages/docs/src/content/03-components/upload/file-card/overview.mdx @@ -7,3 +7,15 @@ # Mit Delete Button + +--- + +# Mit Link + + + +--- + +# Mit Bild + + From 81a92dbfbd26a6647d12debc27506b3dcd247778 Mon Sep 17 00:00:00 2001 From: Lisa18289 Date: Thu, 7 Nov 2024 12:35:52 +0000 Subject: [PATCH 13/23] chore(release): bump version to 0.1.0-alpha.336 --- CHANGELOG.md | 13 +++++++++++++ lerna.json | 2 +- packages/components/CHANGELOG.md | 13 +++++++++++++ packages/components/package.json | 2 +- packages/design-tokens/CHANGELOG.md | 13 +++++++++++++ packages/design-tokens/package.json | 2 +- packages/react-tunnel/CHANGELOG.md | 9 +++++++++ packages/react-tunnel/package.json | 2 +- packages/stylesheet/CHANGELOG.md | 9 +++++++++ packages/stylesheet/package.json | 2 +- 10 files changed, 62 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 87cdaf249..7e51039c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.336](https://github.com/mittwald/flow/compare/0.1.0-alpha.335...0.1.0-alpha.336) (2024-11-07) + +### Features + +- **FileCard:** Add Link and Image to FileCard + ([#957](https://github.com/mittwald/flow/issues/957)) + ([0543759](https://github.com/mittwald/flow/commit/05437591d71134e87694306c30571aab5b04299f)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.335](https://github.com/mittwald/flow/compare/0.1.0-alpha.334...0.1.0-alpha.335) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-project diff --git a/lerna.json b/lerna.json index 787ec516e..2ea9e26a2 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0-alpha.335" + "version": "0.1.0-alpha.336" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 23bb787a3..380a55dc1 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.336](https://github.com/mittwald/flow/compare/0.1.0-alpha.335...0.1.0-alpha.336) (2024-11-07) + +### Features + +- **FileCard:** Add Link and Image to FileCard + ([#957](https://github.com/mittwald/flow/issues/957)) + ([0543759](https://github.com/mittwald/flow/commit/05437591d71134e87694306c30571aab5b04299f)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.335](https://github.com/mittwald/flow/compare/0.1.0-alpha.334...0.1.0-alpha.335) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-react-components diff --git a/packages/components/package.json b/packages/components/package.json index 86ba43cf9..6623cc9fa 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-react-components", - "version": "0.1.0-alpha.335", + "version": "0.1.0-alpha.336", "type": "module", "description": "A React implementation of Flow, mittwald’s design system", "homepage": "https://mittwald.github.io/flow", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index b329881f1..4a1794fdf 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.336](https://github.com/mittwald/flow/compare/0.1.0-alpha.335...0.1.0-alpha.336) (2024-11-07) + +### Features + +- **FileCard:** Add Link and Image to FileCard + ([#957](https://github.com/mittwald/flow/issues/957)) + ([0543759](https://github.com/mittwald/flow/commit/05437591d71134e87694306c30571aab5b04299f)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.335](https://github.com/mittwald/flow/compare/0.1.0-alpha.334...0.1.0-alpha.335) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-design-tokens diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index fbd7d7d6f..bf9551015 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-design-tokens", - "version": "0.1.0-alpha.335", + "version": "0.1.0-alpha.336", "type": "module", "description": "The design tokens used in Flow, mittwald’s design system", "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens", diff --git a/packages/react-tunnel/CHANGELOG.md b/packages/react-tunnel/CHANGELOG.md index 8190f81a9..6bb3dd5f4 100644 --- a/packages/react-tunnel/CHANGELOG.md +++ b/packages/react-tunnel/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.336](https://github.com/mittwald/flow/compare/0.1.0-alpha.335...0.1.0-alpha.336) (2024-11-07) + +**Note:** Version bump only for package @mittwald/react-tunnel + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.335](https://github.com/mittwald/flow/compare/0.1.0-alpha.334...0.1.0-alpha.335) (2024-11-06) **Note:** Version bump only for package @mittwald/react-tunnel diff --git a/packages/react-tunnel/package.json b/packages/react-tunnel/package.json index b4fd7e848..0ff2d7908 100644 --- a/packages/react-tunnel/package.json +++ b/packages/react-tunnel/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/react-tunnel", - "version": "0.1.0-alpha.335", + "version": "0.1.0-alpha.336", "type": "module", "description": "It's like a Portal – but with React components", "keywords": [ diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md index 7b230d00f..21e5cbdba 100644 --- a/packages/stylesheet/CHANGELOG.md +++ b/packages/stylesheet/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.336](https://github.com/mittwald/flow/compare/0.1.0-alpha.335...0.1.0-alpha.336) (2024-11-07) + +**Note:** Version bump only for package @mittwald/flow-stylesheet + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.335](https://github.com/mittwald/flow/compare/0.1.0-alpha.334...0.1.0-alpha.335) (2024-11-06) **Note:** Version bump only for package @mittwald/flow-stylesheet diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index 5a0893178..b33ec742e 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-stylesheet", - "version": "0.1.0-alpha.335", + "version": "0.1.0-alpha.336", "type": "module", "description": "A collection of CSS classes used in Flow, mittwald's design system.", "homepage": "https://mittwald.github.io/flow", From ce54e53d9162d321272e8cb92b130e67facd2450 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Fri, 8 Nov 2024 08:06:49 +0100 Subject: [PATCH 14/23] fix(Link): dont show icon on unstyled link --- .../components/src/components/Link/Link.tsx | 12 ++----- .../Link/components/LinkIcon/LinkIcon.tsx | 35 +++++++++++++++++++ .../Link/components/LinkIcon/index.ts | 1 + .../components/Link/locales/de-DE.locale.json | 1 + .../components/Link/locales/en-EN.locale.json | 1 + .../Link/stories/Default.stories.tsx | 6 ++++ .../navigation/link/examples/download.tsx | 3 ++ .../navigation/link/examples/icon.tsx | 7 ---- .../navigation/link/overview.mdx | 22 +++++++++--- 9 files changed, 66 insertions(+), 22 deletions(-) create mode 100644 packages/components/src/components/Link/components/LinkIcon/LinkIcon.tsx create mode 100644 packages/components/src/components/Link/components/LinkIcon/index.ts create mode 100644 packages/docs/src/content/03-components/navigation/link/examples/download.tsx delete mode 100644 packages/docs/src/content/03-components/navigation/link/examples/icon.tsx diff --git a/packages/components/src/components/Link/Link.tsx b/packages/components/src/components/Link/Link.tsx index 085631e9c..02e8997c7 100644 --- a/packages/components/src/components/Link/Link.tsx +++ b/packages/components/src/components/Link/Link.tsx @@ -9,9 +9,7 @@ import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent"; import { flowComponent } from "@/lib/componentFactory/flowComponent"; import type { PropsWithClassName } from "@/lib/types/props"; import { linkContext } from "@/components/Link/context"; -import { IconExternalLink } from "@/components/Icon/components/icons"; -import locales from "./locales/*.locale.json"; -import { useLocalizedStringFormatter } from "react-aria"; +import { LinkIcon } from "@/components/Link/components/LinkIcon"; export interface LinkProps extends PropsWithChildren< @@ -64,8 +62,6 @@ export const Link = flowComponent("Link", (props) => { "aria-current": ariaCurrent, } as Record; - const stringFormatter = useLocalizedStringFormatter(locales); - return ( { > {children} - {props.target === "_blank" && ( - - )} + diff --git a/packages/components/src/components/Link/components/LinkIcon/LinkIcon.tsx b/packages/components/src/components/Link/components/LinkIcon/LinkIcon.tsx new file mode 100644 index 000000000..0b16a69be --- /dev/null +++ b/packages/components/src/components/Link/components/LinkIcon/LinkIcon.tsx @@ -0,0 +1,35 @@ +import type { FC } from "react"; +import React from "react"; +import { + IconDownload, + IconExternalLink, +} from "@/components/Icon/components/icons"; +import type { LinkProps } from "@/components/Link"; +import locales from "../../locales/*.locale.json"; +import { useLocalizedStringFormatter } from "react-aria"; + +export const LinkIcon: FC = (props) => { + const { unstyled, target, download } = props; + + const stringFormatter = useLocalizedStringFormatter(locales); + + if (unstyled) { + return null; + } + + if (download) { + return ( + + ); + } + + if (target === "_blank") { + return ( + + ); + } + + return null; +}; + +export default LinkIcon; diff --git a/packages/components/src/components/Link/components/LinkIcon/index.ts b/packages/components/src/components/Link/components/LinkIcon/index.ts new file mode 100644 index 000000000..3fecb141e --- /dev/null +++ b/packages/components/src/components/Link/components/LinkIcon/index.ts @@ -0,0 +1 @@ +export * from "./LinkIcon"; diff --git a/packages/components/src/components/Link/locales/de-DE.locale.json b/packages/components/src/components/Link/locales/de-DE.locale.json index ecb428439..7e3ec1b33 100644 --- a/packages/components/src/components/Link/locales/de-DE.locale.json +++ b/packages/components/src/components/Link/locales/de-DE.locale.json @@ -1,3 +1,4 @@ { + "link.download": "Download", "link.external": "Externer Link" } diff --git a/packages/components/src/components/Link/locales/en-EN.locale.json b/packages/components/src/components/Link/locales/en-EN.locale.json index 4789e78be..a3b5e514d 100644 --- a/packages/components/src/components/Link/locales/en-EN.locale.json +++ b/packages/components/src/components/Link/locales/en-EN.locale.json @@ -1,3 +1,4 @@ { + "link.download": "Download", "link.external": "External link" } diff --git a/packages/components/src/components/Link/stories/Default.stories.tsx b/packages/components/src/components/Link/stories/Default.stories.tsx index 1b7c5334a..b62d9afd3 100644 --- a/packages/components/src/components/Link/stories/Default.stories.tsx +++ b/packages/components/src/components/Link/stories/Default.stories.tsx @@ -71,4 +71,10 @@ export const Light: Story = { export const ExternalLink: Story = { args: { target: "_blank" }, + render: (props) => mittwald.de, +}; + +export const Download: Story = { + args: { target: "_blank", download: true }, + render: (props) => Download file, }; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/download.tsx b/packages/docs/src/content/03-components/navigation/link/examples/download.tsx new file mode 100644 index 000000000..444a13fd5 --- /dev/null +++ b/packages/docs/src/content/03-components/navigation/link/examples/download.tsx @@ -0,0 +1,3 @@ +import Link from "@mittwald/flow-react-components/Link"; + +Rechnung herunterladen; diff --git a/packages/docs/src/content/03-components/navigation/link/examples/icon.tsx b/packages/docs/src/content/03-components/navigation/link/examples/icon.tsx deleted file mode 100644 index 94e4bf950..000000000 --- a/packages/docs/src/content/03-components/navigation/link/examples/icon.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import Link from "@mittwald/flow-react-components/Link"; -import { IconDownload } from "@mittwald/flow-react-components/Icons"; - - - Rechnung herunterladen - -; diff --git a/packages/docs/src/content/03-components/navigation/link/overview.mdx b/packages/docs/src/content/03-components/navigation/link/overview.mdx index 73380e0dd..48a174d2a 100644 --- a/packages/docs/src/content/03-components/navigation/link/overview.mdx +++ b/packages/docs/src/content/03-components/navigation/link/overview.mdx @@ -41,15 +41,27 @@ HSL Lightness-Wert von mehr als 50. # Kombiniere mit ... -## Icon (Externer Link) +## Icon -Rechts neben dem Link kann ein `IconExternalLink` eingefügt werden. Dieses soll -den User darauf hinweisen, dass es sich um einen externen Link handelt, der in -einem neuen Tab geöffnet wird. Das Icon wird auch automatisch neben dem Link -angezeigt, wenn auf dem Link `target="_blank"` gesetzt ist. +Rechts neben dem Link kann ein `Icon` eingefügt werden. + +### Externer Link + +Das `IconExternalLink` soll den User darauf hinweisen, dass es sich um einen +externen Link handelt, der in einem neuen Tab geöffnet wird. Das Icon wird auch +automatisch neben dem Link angezeigt, wenn auf dem Link `target="_blank"` +gesetzt ist. +### Download + +Das `IconDownload` zeigt an, dass es sich um einen download Link handelt. Das +Icon wird automatisch neben dem Link angezeigt, wenn das `download` Property +gesetzt ist. + + + --- ## States From 710a1d17eb5db9bed63236773cb2dc904a816bb2 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Fri, 8 Nov 2024 08:17:12 +0100 Subject: [PATCH 15/23] fix(FileCard): add background to file card --- .../components/src/components/FileCard/FileCard.module.scss | 1 + packages/design-tokens/src/upload/file-card.yml | 2 ++ 2 files changed, 3 insertions(+) diff --git a/packages/components/src/components/FileCard/FileCard.module.scss b/packages/components/src/components/FileCard/FileCard.module.scss index 9f993b0f2..68c056645 100644 --- a/packages/components/src/components/FileCard/FileCard.module.scss +++ b/packages/components/src/components/FileCard/FileCard.module.scss @@ -6,6 +6,7 @@ max-width: 100%; overflow: hidden; position: relative; + background-color: var(--file-card--background-color--default); &:not(:has(.link)), .link { diff --git a/packages/design-tokens/src/upload/file-card.yml b/packages/design-tokens/src/upload/file-card.yml index 027cfdab1..9a9dfc9a4 100644 --- a/packages/design-tokens/src/upload/file-card.yml +++ b/packages/design-tokens/src/upload/file-card.yml @@ -16,6 +16,8 @@ file-card: sub-title-font-size: value: "{font-size-text.s}" background-color: + default: + value: "{neutral.color.100}" hover: value: "{neutral-outline-background-color.hover}" pressed: From 993e4460c66b448b88c5eba2ebd11614c6b68659 Mon Sep 17 00:00:00 2001 From: TimAufdemKampe Date: Fri, 8 Nov 2024 07:46:09 +0000 Subject: [PATCH 16/23] chore(release): bump version to 0.1.0-alpha.337 --- CHANGELOG.md | 14 ++++++++++++++ lerna.json | 2 +- packages/components/CHANGELOG.md | 14 ++++++++++++++ packages/components/package.json | 2 +- packages/design-tokens/CHANGELOG.md | 12 ++++++++++++ packages/design-tokens/package.json | 2 +- packages/react-tunnel/CHANGELOG.md | 9 +++++++++ packages/react-tunnel/package.json | 2 +- packages/stylesheet/CHANGELOG.md | 9 +++++++++ packages/stylesheet/package.json | 2 +- 10 files changed, 63 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e51039c3..893b640b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,20 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.337](https://github.com/mittwald/flow/compare/0.1.0-alpha.336...0.1.0-alpha.337) (2024-11-08) + +### Bug Fixes + +- **FileCard:** add background to file card + ([710a1d1](https://github.com/mittwald/flow/commit/710a1d17eb5db9bed63236773cb2dc904a816bb2)) +- **Link:** dont show icon on unstyled link + ([ce54e53](https://github.com/mittwald/flow/commit/ce54e53d9162d321272e8cb92b130e67facd2450)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.336](https://github.com/mittwald/flow/compare/0.1.0-alpha.335...0.1.0-alpha.336) (2024-11-07) ### Features diff --git a/lerna.json b/lerna.json index 2ea9e26a2..877d023b6 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0-alpha.336" + "version": "0.1.0-alpha.337" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 380a55dc1..17885b221 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,20 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.337](https://github.com/mittwald/flow/compare/0.1.0-alpha.336...0.1.0-alpha.337) (2024-11-08) + +### Bug Fixes + +- **FileCard:** add background to file card + ([710a1d1](https://github.com/mittwald/flow/commit/710a1d17eb5db9bed63236773cb2dc904a816bb2)) +- **Link:** dont show icon on unstyled link + ([ce54e53](https://github.com/mittwald/flow/commit/ce54e53d9162d321272e8cb92b130e67facd2450)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.336](https://github.com/mittwald/flow/compare/0.1.0-alpha.335...0.1.0-alpha.336) (2024-11-07) ### Features diff --git a/packages/components/package.json b/packages/components/package.json index 6623cc9fa..c9f82ea31 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-react-components", - "version": "0.1.0-alpha.336", + "version": "0.1.0-alpha.337", "type": "module", "description": "A React implementation of Flow, mittwald’s design system", "homepage": "https://mittwald.github.io/flow", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 4a1794fdf..5f732d522 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.337](https://github.com/mittwald/flow/compare/0.1.0-alpha.336...0.1.0-alpha.337) (2024-11-08) + +### Bug Fixes + +- **FileCard:** add background to file card + ([710a1d1](https://github.com/mittwald/flow/commit/710a1d17eb5db9bed63236773cb2dc904a816bb2)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.336](https://github.com/mittwald/flow/compare/0.1.0-alpha.335...0.1.0-alpha.336) (2024-11-07) ### Features diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index bf9551015..9884c2472 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-design-tokens", - "version": "0.1.0-alpha.336", + "version": "0.1.0-alpha.337", "type": "module", "description": "The design tokens used in Flow, mittwald’s design system", "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens", diff --git a/packages/react-tunnel/CHANGELOG.md b/packages/react-tunnel/CHANGELOG.md index 6bb3dd5f4..e203c82ba 100644 --- a/packages/react-tunnel/CHANGELOG.md +++ b/packages/react-tunnel/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.337](https://github.com/mittwald/flow/compare/0.1.0-alpha.336...0.1.0-alpha.337) (2024-11-08) + +**Note:** Version bump only for package @mittwald/react-tunnel + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.336](https://github.com/mittwald/flow/compare/0.1.0-alpha.335...0.1.0-alpha.336) (2024-11-07) **Note:** Version bump only for package @mittwald/react-tunnel diff --git a/packages/react-tunnel/package.json b/packages/react-tunnel/package.json index 0ff2d7908..45b0a4bc0 100644 --- a/packages/react-tunnel/package.json +++ b/packages/react-tunnel/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/react-tunnel", - "version": "0.1.0-alpha.336", + "version": "0.1.0-alpha.337", "type": "module", "description": "It's like a Portal – but with React components", "keywords": [ diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md index 21e5cbdba..7a7005381 100644 --- a/packages/stylesheet/CHANGELOG.md +++ b/packages/stylesheet/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.337](https://github.com/mittwald/flow/compare/0.1.0-alpha.336...0.1.0-alpha.337) (2024-11-08) + +**Note:** Version bump only for package @mittwald/flow-stylesheet + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.336](https://github.com/mittwald/flow/compare/0.1.0-alpha.335...0.1.0-alpha.336) (2024-11-07) **Note:** Version bump only for package @mittwald/flow-stylesheet diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index b33ec742e..4f658d61c 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-stylesheet", - "version": "0.1.0-alpha.336", + "version": "0.1.0-alpha.337", "type": "module", "description": "A collection of CSS classes used in Flow, mittwald's design system.", "homepage": "https://mittwald.github.io/flow", From 97c08af3c8b5684fc6a5bf5a04782270173311d0 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Fri, 8 Nov 2024 09:46:49 +0100 Subject: [PATCH 17/23] fix(FileCard): fix padding --- .../src/components/FileCard/FileCard.module.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/components/src/components/FileCard/FileCard.module.scss b/packages/components/src/components/FileCard/FileCard.module.scss index 68c056645..d453c025d 100644 --- a/packages/components/src/components/FileCard/FileCard.module.scss +++ b/packages/components/src/components/FileCard/FileCard.module.scss @@ -54,11 +54,13 @@ } } - .text { - --button-width: calc( - var(--icon--size--s) + var(--button--padding-s-icon-only) * 2 - ); - padding-right: calc(var(--file-card--spacing) + var(--button-width)); + &:has(.deleteButton) { + .text { + --button-width: calc( + var(--icon--size--s) + var(--button--padding-s-icon-only) * 2 + ); + padding-right: calc(var(--file-card--spacing) + var(--button-width)); + } } .deleteButton { From 4c599e130e607a43585cfcc4e42e9bd90017c20d Mon Sep 17 00:00:00 2001 From: elmartinezc Date: Fri, 8 Nov 2024 09:01:32 +0000 Subject: [PATCH 18/23] chore(release): bump version to 0.1.0-alpha.338 --- CHANGELOG.md | 12 ++++++++++++ lerna.json | 2 +- packages/components/CHANGELOG.md | 12 ++++++++++++ packages/components/package.json | 2 +- packages/design-tokens/CHANGELOG.md | 9 +++++++++ packages/design-tokens/package.json | 2 +- packages/react-tunnel/CHANGELOG.md | 9 +++++++++ packages/react-tunnel/package.json | 2 +- packages/stylesheet/CHANGELOG.md | 9 +++++++++ packages/stylesheet/package.json | 2 +- 10 files changed, 56 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 893b640b4..d3c24ff64 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.338](https://github.com/mittwald/flow/compare/0.1.0-alpha.337...0.1.0-alpha.338) (2024-11-08) + +### Bug Fixes + +- **FileCard:** fix padding + ([97c08af](https://github.com/mittwald/flow/commit/97c08af3c8b5684fc6a5bf5a04782270173311d0)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.337](https://github.com/mittwald/flow/compare/0.1.0-alpha.336...0.1.0-alpha.337) (2024-11-08) ### Bug Fixes diff --git a/lerna.json b/lerna.json index 877d023b6..6e7586459 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0-alpha.337" + "version": "0.1.0-alpha.338" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 17885b221..0db06b094 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.338](https://github.com/mittwald/flow/compare/0.1.0-alpha.337...0.1.0-alpha.338) (2024-11-08) + +### Bug Fixes + +- **FileCard:** fix padding + ([97c08af](https://github.com/mittwald/flow/commit/97c08af3c8b5684fc6a5bf5a04782270173311d0)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.337](https://github.com/mittwald/flow/compare/0.1.0-alpha.336...0.1.0-alpha.337) (2024-11-08) ### Bug Fixes diff --git a/packages/components/package.json b/packages/components/package.json index c9f82ea31..ad7635d71 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-react-components", - "version": "0.1.0-alpha.337", + "version": "0.1.0-alpha.338", "type": "module", "description": "A React implementation of Flow, mittwald’s design system", "homepage": "https://mittwald.github.io/flow", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 5f732d522..dc56f068a 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.338](https://github.com/mittwald/flow/compare/0.1.0-alpha.337...0.1.0-alpha.338) (2024-11-08) + +**Note:** Version bump only for package @mittwald/flow-design-tokens + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.337](https://github.com/mittwald/flow/compare/0.1.0-alpha.336...0.1.0-alpha.337) (2024-11-08) ### Bug Fixes diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 9884c2472..b532ebf7a 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-design-tokens", - "version": "0.1.0-alpha.337", + "version": "0.1.0-alpha.338", "type": "module", "description": "The design tokens used in Flow, mittwald’s design system", "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens", diff --git a/packages/react-tunnel/CHANGELOG.md b/packages/react-tunnel/CHANGELOG.md index e203c82ba..a6e24ef49 100644 --- a/packages/react-tunnel/CHANGELOG.md +++ b/packages/react-tunnel/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.338](https://github.com/mittwald/flow/compare/0.1.0-alpha.337...0.1.0-alpha.338) (2024-11-08) + +**Note:** Version bump only for package @mittwald/react-tunnel + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.337](https://github.com/mittwald/flow/compare/0.1.0-alpha.336...0.1.0-alpha.337) (2024-11-08) **Note:** Version bump only for package @mittwald/react-tunnel diff --git a/packages/react-tunnel/package.json b/packages/react-tunnel/package.json index 45b0a4bc0..ae8f3c37a 100644 --- a/packages/react-tunnel/package.json +++ b/packages/react-tunnel/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/react-tunnel", - "version": "0.1.0-alpha.337", + "version": "0.1.0-alpha.338", "type": "module", "description": "It's like a Portal – but with React components", "keywords": [ diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md index 7a7005381..ba1779ee9 100644 --- a/packages/stylesheet/CHANGELOG.md +++ b/packages/stylesheet/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.338](https://github.com/mittwald/flow/compare/0.1.0-alpha.337...0.1.0-alpha.338) (2024-11-08) + +**Note:** Version bump only for package @mittwald/flow-stylesheet + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.337](https://github.com/mittwald/flow/compare/0.1.0-alpha.336...0.1.0-alpha.337) (2024-11-08) **Note:** Version bump only for package @mittwald/flow-stylesheet diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index 4f658d61c..4e8111c46 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-stylesheet", - "version": "0.1.0-alpha.337", + "version": "0.1.0-alpha.338", "type": "module", "description": "A collection of CSS classes used in Flow, mittwald's design system.", "homepage": "https://mittwald.github.io/flow", From 8031c9f0bd2f8c7929cc0cfb8276287afca93510 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Mon, 11 Nov 2024 07:20:30 +0100 Subject: [PATCH 19/23] refactor!: rename IconContractPosition to IconContract --- .../icons/{IconContractPosition.tsx => IconContract.tsx} | 8 ++++---- .../src/components/Icon/components/icons/index.ts | 2 +- packages/components/src/components/Icon/icons.yaml | 2 +- .../03-components/content/icon/examples/decorative.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) rename packages/components/src/components/Icon/components/icons/{IconContractPosition.tsx => IconContract.tsx} (64%) diff --git a/packages/components/src/components/Icon/components/icons/IconContractPosition.tsx b/packages/components/src/components/Icon/components/icons/IconContract.tsx similarity index 64% rename from packages/components/src/components/Icon/components/icons/IconContractPosition.tsx rename to packages/components/src/components/Icon/components/icons/IconContract.tsx index b0d2612c8..1b427096d 100644 --- a/packages/components/src/components/Icon/components/icons/IconContractPosition.tsx +++ b/packages/components/src/components/Icon/components/icons/IconContract.tsx @@ -4,12 +4,12 @@ import React, { ComponentProps, FC } from "react"; import { IconFileInfo as Tabler } from "@tabler/icons-react"; import { Icon } from "@/components/Icon"; -export const IconContractPosition: FC< - Omit, "children"> -> = (props) => ( +export const IconContract: FC, "children">> = ( + props, +) => ( ); -export default IconContractPosition; +export default IconContract; diff --git a/packages/components/src/components/Icon/components/icons/index.ts b/packages/components/src/components/Icon/components/icons/index.ts index 3c51f027d..2dd928f4e 100644 --- a/packages/components/src/components/Icon/components/icons/index.ts +++ b/packages/components/src/components/Icon/components/icons/index.ts @@ -18,7 +18,7 @@ export { IconClose } from "./IconClose"; export { IconCode } from "./IconCode"; export { IconContextMenu } from "./IconContextMenu"; export { IconContractPartner } from "./IconContractPartner"; -export { IconContractPosition } from "./IconContractPosition"; +export { IconContract } from "./IconContract"; export { IconCopy } from "./IconCopy"; export { IconCronjob } from "./IconCronjob"; export { IconCustomer } from "./IconCustomer"; diff --git a/packages/components/src/components/Icon/icons.yaml b/packages/components/src/components/Icon/icons.yaml index 3aeee9884..d4f446e67 100644 --- a/packages/components/src/components/Icon/icons.yaml +++ b/packages/components/src/components/Icon/icons.yaml @@ -16,7 +16,7 @@ Close: X Code: Code ContextMenu: Dots ContractPartner: FileDescription -ContractPosition: FileInfo +Contract: FileInfo Copy: Copy Cronjob: CalendarCheck Customer: Building diff --git a/packages/docs/src/content/03-components/content/icon/examples/decorative.tsx b/packages/docs/src/content/03-components/content/icon/examples/decorative.tsx index 9ec2f6a9e..642f06266 100644 --- a/packages/docs/src/content/03-components/content/icon/examples/decorative.tsx +++ b/packages/docs/src/content/03-components/content/icon/examples/decorative.tsx @@ -5,8 +5,8 @@ import { IconCamera, IconChangelog, IconClock, + IconContract, IconContractPartner, - IconContractPosition, IconCronjob, IconCustomer, IconDashboard, @@ -130,7 +130,7 @@ import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; - + From 1eba6d4b6d6265e829386721382864311394c6f8 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Mon, 11 Nov 2024 07:21:34 +0100 Subject: [PATCH 20/23] refactor!: rename IconContractPosition to IconContract --- .../content/03-components/content/icon/examples/decorative.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/content/03-components/content/icon/examples/decorative.tsx b/packages/docs/src/content/03-components/content/icon/examples/decorative.tsx index 642f06266..de463c802 100644 --- a/packages/docs/src/content/03-components/content/icon/examples/decorative.tsx +++ b/packages/docs/src/content/03-components/content/icon/examples/decorative.tsx @@ -129,7 +129,7 @@ import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; - + From 173e00583645fbfe53f110ddcadef58a7dffa0b8 Mon Sep 17 00:00:00 2001 From: TimAufdemKampe Date: Mon, 11 Nov 2024 07:14:14 +0000 Subject: [PATCH 21/23] chore(release): bump version to 0.1.0-alpha.339 --- CHANGELOG.md | 9 +++++++++ lerna.json | 2 +- packages/components/CHANGELOG.md | 9 +++++++++ packages/components/package.json | 2 +- packages/design-tokens/CHANGELOG.md | 9 +++++++++ packages/design-tokens/package.json | 2 +- packages/react-tunnel/CHANGELOG.md | 9 +++++++++ packages/react-tunnel/package.json | 2 +- packages/stylesheet/CHANGELOG.md | 9 +++++++++ packages/stylesheet/package.json | 2 +- 10 files changed, 50 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d3c24ff64..3e9952834 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.339](https://github.com/mittwald/flow/compare/0.1.0-alpha.338...0.1.0-alpha.339) (2024-11-11) + +**Note:** Version bump only for package @mittwald/flow-project + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.338](https://github.com/mittwald/flow/compare/0.1.0-alpha.337...0.1.0-alpha.338) (2024-11-08) ### Bug Fixes diff --git a/lerna.json b/lerna.json index 6e7586459..eb82d9a13 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0-alpha.338" + "version": "0.1.0-alpha.339" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0db06b094..ee0fe2ee8 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.339](https://github.com/mittwald/flow/compare/0.1.0-alpha.338...0.1.0-alpha.339) (2024-11-11) + +**Note:** Version bump only for package @mittwald/flow-react-components + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.338](https://github.com/mittwald/flow/compare/0.1.0-alpha.337...0.1.0-alpha.338) (2024-11-08) ### Bug Fixes diff --git a/packages/components/package.json b/packages/components/package.json index ad7635d71..0b3bbf08f 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-react-components", - "version": "0.1.0-alpha.338", + "version": "0.1.0-alpha.339", "type": "module", "description": "A React implementation of Flow, mittwald’s design system", "homepage": "https://mittwald.github.io/flow", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index dc56f068a..641af5218 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.339](https://github.com/mittwald/flow/compare/0.1.0-alpha.338...0.1.0-alpha.339) (2024-11-11) + +**Note:** Version bump only for package @mittwald/flow-design-tokens + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.338](https://github.com/mittwald/flow/compare/0.1.0-alpha.337...0.1.0-alpha.338) (2024-11-08) **Note:** Version bump only for package @mittwald/flow-design-tokens diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index b532ebf7a..0c60368ec 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-design-tokens", - "version": "0.1.0-alpha.338", + "version": "0.1.0-alpha.339", "type": "module", "description": "The design tokens used in Flow, mittwald’s design system", "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens", diff --git a/packages/react-tunnel/CHANGELOG.md b/packages/react-tunnel/CHANGELOG.md index a6e24ef49..c8868a45c 100644 --- a/packages/react-tunnel/CHANGELOG.md +++ b/packages/react-tunnel/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.339](https://github.com/mittwald/flow/compare/0.1.0-alpha.338...0.1.0-alpha.339) (2024-11-11) + +**Note:** Version bump only for package @mittwald/react-tunnel + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.338](https://github.com/mittwald/flow/compare/0.1.0-alpha.337...0.1.0-alpha.338) (2024-11-08) **Note:** Version bump only for package @mittwald/react-tunnel diff --git a/packages/react-tunnel/package.json b/packages/react-tunnel/package.json index ae8f3c37a..3a9c2b5e4 100644 --- a/packages/react-tunnel/package.json +++ b/packages/react-tunnel/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/react-tunnel", - "version": "0.1.0-alpha.338", + "version": "0.1.0-alpha.339", "type": "module", "description": "It's like a Portal – but with React components", "keywords": [ diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md index ba1779ee9..32f79e0f5 100644 --- a/packages/stylesheet/CHANGELOG.md +++ b/packages/stylesheet/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.339](https://github.com/mittwald/flow/compare/0.1.0-alpha.338...0.1.0-alpha.339) (2024-11-11) + +**Note:** Version bump only for package @mittwald/flow-stylesheet + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.338](https://github.com/mittwald/flow/compare/0.1.0-alpha.337...0.1.0-alpha.338) (2024-11-08) **Note:** Version bump only for package @mittwald/flow-stylesheet diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index 4e8111c46..e1ab10a1e 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-stylesheet", - "version": "0.1.0-alpha.338", + "version": "0.1.0-alpha.339", "type": "module", "description": "A collection of CSS classes used in Flow, mittwald's design system.", "homepage": "https://mittwald.github.io/flow", From 29bc5f01f151a7889912e24e889ecb2efe3c210a Mon Sep 17 00:00:00 2001 From: Tim Auf dem Kampe Date: Mon, 11 Nov 2024 10:43:48 +0100 Subject: [PATCH 22/23] fix(Notification): Also call onClose handler from notification component props if notification comes from an NotificationProvider --- .../components/NotificationProvider/ControlledNotification.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/components/NotificationProvider/ControlledNotification.tsx b/packages/components/src/components/NotificationProvider/ControlledNotification.tsx index 61d15d2f1..577cf8206 100644 --- a/packages/components/src/components/NotificationProvider/ControlledNotification.tsx +++ b/packages/components/src/components/NotificationProvider/ControlledNotification.tsx @@ -22,6 +22,7 @@ export const ControlledNotification: FC = (props) => { }, onClose: () => { controller.remove(notification.meta.id); + notification.element.props.onClose?.(); }, onFocus: () => { notification.meta.autoCloseTimer.pause(); From d0bfb757872d63bc641954e7321c54c41aa4655e Mon Sep 17 00:00:00 2001 From: TimAufdemKampe Date: Mon, 11 Nov 2024 09:52:55 +0000 Subject: [PATCH 23/23] chore(release): bump version to 0.1.0-alpha.340 --- CHANGELOG.md | 13 +++++++++++++ lerna.json | 2 +- packages/components/CHANGELOG.md | 13 +++++++++++++ packages/components/package.json | 2 +- packages/design-tokens/CHANGELOG.md | 9 +++++++++ packages/design-tokens/package.json | 2 +- packages/react-tunnel/CHANGELOG.md | 9 +++++++++ packages/react-tunnel/package.json | 2 +- packages/stylesheet/CHANGELOG.md | 9 +++++++++ packages/stylesheet/package.json | 2 +- 10 files changed, 58 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e9952834..a1cf067fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.340](https://github.com/mittwald/flow/compare/0.1.0-alpha.339...0.1.0-alpha.340) (2024-11-11) + +### Bug Fixes + +- **Notification:** Also call onClose handler from notification component props + if notification comes from an NotificationProvider + ([29bc5f0](https://github.com/mittwald/flow/commit/29bc5f01f151a7889912e24e889ecb2efe3c210a)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.339](https://github.com/mittwald/flow/compare/0.1.0-alpha.338...0.1.0-alpha.339) (2024-11-11) **Note:** Version bump only for package @mittwald/flow-project diff --git a/lerna.json b/lerna.json index eb82d9a13..9ceabd0ca 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0-alpha.339" + "version": "0.1.0-alpha.340" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index ee0fe2ee8..5827adc2e 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.340](https://github.com/mittwald/flow/compare/0.1.0-alpha.339...0.1.0-alpha.340) (2024-11-11) + +### Bug Fixes + +- **Notification:** Also call onClose handler from notification component props + if notification comes from an NotificationProvider + ([29bc5f0](https://github.com/mittwald/flow/commit/29bc5f01f151a7889912e24e889ecb2efe3c210a)) + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.339](https://github.com/mittwald/flow/compare/0.1.0-alpha.338...0.1.0-alpha.339) (2024-11-11) **Note:** Version bump only for package @mittwald/flow-react-components diff --git a/packages/components/package.json b/packages/components/package.json index 0b3bbf08f..5a6278f59 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-react-components", - "version": "0.1.0-alpha.339", + "version": "0.1.0-alpha.340", "type": "module", "description": "A React implementation of Flow, mittwald’s design system", "homepage": "https://mittwald.github.io/flow", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 641af5218..0bbad30aa 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.340](https://github.com/mittwald/flow/compare/0.1.0-alpha.339...0.1.0-alpha.340) (2024-11-11) + +**Note:** Version bump only for package @mittwald/flow-design-tokens + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.339](https://github.com/mittwald/flow/compare/0.1.0-alpha.338...0.1.0-alpha.339) (2024-11-11) **Note:** Version bump only for package @mittwald/flow-design-tokens diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 0c60368ec..27d68f50f 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-design-tokens", - "version": "0.1.0-alpha.339", + "version": "0.1.0-alpha.340", "type": "module", "description": "The design tokens used in Flow, mittwald’s design system", "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens", diff --git a/packages/react-tunnel/CHANGELOG.md b/packages/react-tunnel/CHANGELOG.md index c8868a45c..770270ec2 100644 --- a/packages/react-tunnel/CHANGELOG.md +++ b/packages/react-tunnel/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.340](https://github.com/mittwald/flow/compare/0.1.0-alpha.339...0.1.0-alpha.340) (2024-11-11) + +**Note:** Version bump only for package @mittwald/react-tunnel + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.339](https://github.com/mittwald/flow/compare/0.1.0-alpha.338...0.1.0-alpha.339) (2024-11-11) **Note:** Version bump only for package @mittwald/react-tunnel diff --git a/packages/react-tunnel/package.json b/packages/react-tunnel/package.json index 3a9c2b5e4..9bb932af9 100644 --- a/packages/react-tunnel/package.json +++ b/packages/react-tunnel/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/react-tunnel", - "version": "0.1.0-alpha.339", + "version": "0.1.0-alpha.340", "type": "module", "description": "It's like a Portal – but with React components", "keywords": [ diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md index 32f79e0f5..ffed58ebf 100644 --- a/packages/stylesheet/CHANGELOG.md +++ b/packages/stylesheet/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.1.0-alpha.340](https://github.com/mittwald/flow/compare/0.1.0-alpha.339...0.1.0-alpha.340) (2024-11-11) + +**Note:** Version bump only for package @mittwald/flow-stylesheet + +# Change Log + +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [0.1.0-alpha.339](https://github.com/mittwald/flow/compare/0.1.0-alpha.338...0.1.0-alpha.339) (2024-11-11) **Note:** Version bump only for package @mittwald/flow-stylesheet diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index e1ab10a1e..747f7ee60 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-stylesheet", - "version": "0.1.0-alpha.339", + "version": "0.1.0-alpha.340", "type": "module", "description": "A collection of CSS classes used in Flow, mittwald's design system.", "homepage": "https://mittwald.github.io/flow",