diff --git a/packages/components/README.md b/packages/components/README.md index 2e0d0a62c..f2587c1a4 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -1,32 +1,5 @@ -# mittwald Flow Components +# @mittwald/flow-next-components -> ⚠️ **EARLY DEVELOPMENT — STABILITY NOTICE** -> -> This project is in **early development** stage, and we do not offer any -> stability guarantees of any kind. We welcome you to give this project a try -> and we're looking forward for any feedback on this project in this stage of -> development. However, please do not rely on any inputs or outputs of this -> project to remain stable. - -## Installing - -With npm: - -```shell -$ npm install @mittwald/flow-next-components -``` - -With Yarn: - -```shell -$ yarn add @mittwald/flow-next-components -``` - -## Import styles - -You have to import the bundled stylesheet in order to get the correct component -styles. The stylesheet can be imported from: - -``` -@mittwald/flow-next-components/styles -``` +This package is part of +[Flow – mittwald design system](https://mittwald.github.io/flow/). See the +homepage for more details. diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md index 9637e769c..3d3956ca1 100644 --- a/packages/design-tokens/README.md +++ b/packages/design-tokens/README.md @@ -1,23 +1,5 @@ -# mittwald Flow Components +# @mittwald/flow-next-design-tokens -> ⚠️ **EARLY DEVELOPMENT — STABILITY NOTICE** -> -> This project is in **early development** stage, and we do not offer any -> stability guarantees of any kind. We welcome you to give this project a try -> and we're looking forward for any feedback on this project in this stage of -> development. However, please do not rely on any inputs or outputs of this -> project to remain stable. - -## Installing - -With npm: - -```shell -$ npm install @mittwald/flow-next-design-tokens -``` - -With Yarn: - -```shell -$ yarn add @mittwald/flow-next-design-tokens -``` +This package is part of +[Flow – mittwald design system](https://mittwald.github.io/flow/). See the +homepage for more details. diff --git a/packages/docs/src/app/_components/layout/MainContent/MainContent.module.css b/packages/docs/src/app/_components/layout/MainContent/MainContent.module.css index a9b917b15..8f247031f 100644 --- a/packages/docs/src/app/_components/layout/MainContent/MainContent.module.css +++ b/packages/docs/src/app/_components/layout/MainContent/MainContent.module.css @@ -1,3 +1,7 @@ .heading { margin-bottom: var(--size-rem--l); } + +.description { + margin-bottom: var(--size-rem--l); +} diff --git a/packages/docs/src/content/01-getting-started/installation/index.mdx b/packages/docs/src/content/01-getting-started/installation/index.mdx index 7f1f29e5d..e1cabbe61 100644 --- a/packages/docs/src/content/01-getting-started/installation/index.mdx +++ b/packages/docs/src/content/01-getting-started/installation/index.mdx @@ -2,6 +2,14 @@ description: Welcome to the Flow documentation! --- +> Early development & stability notice +> +> This project is in **early development** stage, and we do not offer any +> stability guarantees of any kind. We welcome you to give this project a try +> and we're looking forward for any feedback on this project in this stage of +> development. However, please do not rely on any inputs or outputs of this +> project to remain stable. + ## Installing the Flow React Component Library The Flow React Component Library can be installed using a package manager like diff --git a/packages/docs/src/lib/liveCode/dynamicImports.ts b/packages/docs/src/lib/liveCode/dynamicImports.ts index a18d1639d..94878fa66 100644 --- a/packages/docs/src/lib/liveCode/dynamicImports.ts +++ b/packages/docs/src/lib/liveCode/dynamicImports.ts @@ -2,10 +2,10 @@ /* auto-generated file */ import { ImportMapping } from "@/lib/liveCode/types"; import { lazy } from "react"; -import { faStar as I6 } from "@fortawesome/free-regular-svg-icons/faStar"; -import { faSnowboarding as I10 } from "@fortawesome/free-solid-svg-icons/faSnowboarding"; -import { faSnowplow as I11 } from "@fortawesome/free-solid-svg-icons/faSnowplow"; -import { faCirclePlay as I16 } from "@fortawesome/free-solid-svg-icons/faCirclePlay"; +import { faCirclePlay as I6 } from "@fortawesome/free-solid-svg-icons/faCirclePlay"; +import { faStar as I8 } from "@fortawesome/free-regular-svg-icons/faStar"; +import { faSnowboarding as I11 } from "@fortawesome/free-solid-svg-icons/faSnowboarding"; +import { faSnowplow as I12 } from "@fortawesome/free-solid-svg-icons/faSnowplow"; export const liveCodeEditorGlobalImports: ImportMapping = { "Avatar:@mittwald/flow-next-components/Avatar": lazy(() => import("@mittwald/flow-next-components/Avatar")), @@ -14,15 +14,15 @@ export const liveCodeEditorGlobalImports: ImportMapping = { "Badge:@mittwald/flow-next-components/Badge": lazy(() => import("@mittwald/flow-next-components/Badge")), "Text:@mittwald/flow-next-components/Text": lazy(() => import("@mittwald/flow-next-components/Text")), "Icon:@mittwald/flow-next-components/Icon": lazy(() => import("@mittwald/flow-next-components/Icon")), -"faStar:@fortawesome/free-regular-svg-icons/faStar": I6, +"faCirclePlay:@fortawesome/free-solid-svg-icons/faCirclePlay": I6, "Button:@mittwald/flow-next-components/Button": lazy(() => import("@mittwald/flow-next-components/Button")), +"faStar:@fortawesome/free-regular-svg-icons/faStar": I8, "Checkbox:@mittwald/flow-next-components/Checkbox": lazy(() => import("@mittwald/flow-next-components/Checkbox")), "Heading:@mittwald/flow-next-components/Heading": lazy(() => import("@mittwald/flow-next-components/Heading")), -"faSnowboarding:@fortawesome/free-solid-svg-icons/faSnowboarding": I10, -"faSnowplow:@fortawesome/free-solid-svg-icons/faSnowplow": I11, +"faSnowboarding:@fortawesome/free-solid-svg-icons/faSnowboarding": I11, +"faSnowplow:@fortawesome/free-solid-svg-icons/faSnowplow": I12, "Label:@mittwald/flow-next-components/Label": lazy(() => import("@mittwald/flow-next-components/Label")), "Link:@mittwald/flow-next-components/Link": lazy(() => import("@mittwald/flow-next-components/Link")), "Note:@mittwald/flow-next-components/Note": lazy(() => import("@mittwald/flow-next-components/Note")), -"Content:@mittwald/flow-next-components/Content": lazy(() => import("@mittwald/flow-next-components/Content")), -"faCirclePlay:@fortawesome/free-solid-svg-icons/faCirclePlay": I16, +"Content:@mittwald/flow-next-components/Content": lazy(() => import("@mittwald/flow-next-components/Content")), }; \ No newline at end of file diff --git a/packages/docs/src/lib/mdx/components/MdxFileView/customComponents.tsx b/packages/docs/src/lib/mdx/components/MdxFileView/customComponents.tsx index 70d172485..efa20cac0 100644 --- a/packages/docs/src/lib/mdx/components/MdxFileView/customComponents.tsx +++ b/packages/docs/src/lib/mdx/components/MdxFileView/customComponents.tsx @@ -1,6 +1,9 @@ import styles from "./customComponents.module.css"; import Heading from "@mittwald/flow-next-components/Heading"; import { MDXComponents } from "mdx/types"; +import Note from "@mittwald/flow-next-components/Note"; +import Content from "@mittwald/flow-next-components/Content"; +import React, { Children, isValidElement } from "react"; export const customComponents: MDXComponents = { pre: ({ children }) => 
{children}
, @@ -9,6 +12,15 @@ export const customComponents: MDXComponents = { p: ({ children }) =>

{children}

, + blockquote: ({ children }) => ( + + {Children.toArray(children).find(isValidElement)} + + {Children.toArray(children).filter(isValidElement).slice(1)} + + + ), + h2: ({ children }) => ( {children} diff --git a/packages/stylesheet/README.md b/packages/stylesheet/README.md index 28a5cd30b..4a46c2be6 100644 --- a/packages/stylesheet/README.md +++ b/packages/stylesheet/README.md @@ -1,23 +1,5 @@ -# mittwald Flow Components +# @mittwald/flow-next-stylesheet -> ⚠️ **EARLY DEVELOPMENT — STABILITY NOTICE** -> -> This project is in **early development** stage, and we do not offer any -> stability guarantees of any kind. We welcome you to give this project a try -> and we're looking forward for any feedback on this project in this stage of -> development. However, please do not rely on any inputs or outputs of this -> project to remain stable. - -## Installing - -With npm: - -```shell -$ npm install @mittwald/flow-next-stylesheet -``` - -With Yarn: - -```shell -$ yarn add @mittwald/flow-next-stylesheet -``` +This package is part of +[Flow – mittwald design system](https://mittwald.github.io/flow/). See the +homepage for more details.