@scm-manager/ui-core 3.0.0-20240024-101702

package/src/base/layout/tabs/TabsList.tsx

@@ -0,0 +1,41 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { HTMLAttributes } from "react";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import classNames from "classnames";
+
+/**
+ * @beta
+ * @since 2.47.0
+ */
+const TabsList = React.forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(({ children, ...props }, ref) => (
+  <RadixTabs.List className={classNames("tabs", /* required for focus-outline */ "p-1")}>
+    <ul {...props} ref={ref}>
+      {children}
+    </ul>
+  </RadixTabs.List>
+));
+
+export default TabsList;

package/src/base/layout/templates/data-page/DataPage.stories.tsx

@@ -0,0 +1,201 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from "react";
+import {
+  DataPageHeader,
+  DataPageHeaderCreateButton,
+  DataPageHeaderSetting,
+  DataPageHeaderSettingField,
+  DataPageHeaderSettingLabel,
+  DataPageHeaderSettings,
+} from "./DataPageHeader";
+import { Select } from "../../../forms";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Loading, Subtitle, Title } from "../../../misc";
+import { ErrorNotification, Notification } from "../../../notifications"
+import { Button, Icon } from "../../../buttons";
+import { CardListBox, CardListCard } from "../../card-list/CardList";
+import CardRow, { SecondaryRow, TertiaryRow } from "../../card/CardRow";
+import CardTitle from "../../card/CardTitle";
+import { Link } from "react-router-dom";
+import StoryRouter from "storybook-react-router";
+import { CardDetail, CardDetailLabel, CardDetails, CardDetailTag } from "../../card/CardDetail";
+
+export default {
+  title: "Data Page Template",
+  component: DataPageHeader,
+  decorators: [StoryRouter()],
+} as ComponentMeta<typeof DataPageHeader>;
+
+// @ts-ignore Storybook is not cooperating
+export const Example: ComponentStory<{ error: Error; isLoading: boolean; isEmpty: boolean }> = ({
+  error,
+  isLoading,
+  isEmpty,
+}: any) => {
+  let content;
+  if (error) {
+    content = <ErrorNotification error={error} />;
+  } else if (isLoading) {
+    content = <Loading />;
+  } else if (isEmpty) {
+    content = <Notification type="info">There is no data, consider adjusting the filters</Notification>;
+  } else {
+    content = (
+      <CardListBox>
+        <CardListCard avatar={<Icon>trash</Icon>} action={<Icon>ellipsis-v</Icon>}>
+          <CardRow>
+            <CardTitle>
+              <Link to="/item">
+                The title may contain a link but most importantly does not contain any information except the "display
+                name" of the entity. It is also text-only
+              </Link>
+            </CardTitle>
+          </CardRow>
+          <SecondaryRow>
+            This contains more important details about the card, but not quite as important as the title.
+          </SecondaryRow>
+          <TertiaryRow>This contains less important information about the card</TertiaryRow>
+          <CardRow>
+            <CardDetails>
+              <CardDetail>
+                <CardDetailLabel>Tags are great for numbers.</CardDetailLabel>
+                <CardDetailTag>7/3</CardDetailTag>
+              </CardDetail>
+              <CardDetail>
+                {({ labelId }) => (
+                  <>
+                    <CardDetailLabel id={labelId}>
+                      Interactive details need 'is-relative' and 'aria-labelledby'
+                    </CardDetailLabel>
+                    <Button aria-labelledby={labelId} className="is-relative has-background-transparent is-borderless">
+                      <Icon>edit</Icon>
+                    </Button>
+                  </>
+                )}
+              </CardDetail>
+            </CardDetails>
+          </CardRow>
+        </CardListCard>
+        <CardListCard avatar={<Icon>users</Icon>} action={<Icon>ellipsis-v</Icon>}>
+          <CardRow>
+            <CardTitle>
+              <Link to="/item">
+                We can also enter insane text without whitespace
+                ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
+              </Link>
+            </CardTitle>
+          </CardRow>
+          <SecondaryRow>
+            SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM
+          </SecondaryRow>
+          <TertiaryRow>
+            SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM
+          </TertiaryRow>
+          <CardRow>
+            <CardDetails>
+              <CardDetail>
+                <CardDetailLabel>SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM</CardDetailLabel>
+                <CardDetailTag>7/3</CardDetailTag>
+              </CardDetail>
+              <CardDetail>
+                {({ labelId }) => (
+                  <>
+                    <CardDetailLabel id={labelId}>SCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCMSCM</CardDetailLabel>
+                    <Button aria-labelledby={labelId} className="is-relative has-background-transparent is-borderless">
+                      <Icon>trash</Icon>
+                    </Button>
+                  </>
+                )}
+              </CardDetail>
+            </CardDetails>
+          </CardRow>
+        </CardListCard>
+      </CardListBox>
+    );
+  }
+
+  return (
+    <>
+      <Title>My Page</Title>
+      <Subtitle subtitle="All the data" />
+      <DataPageHeader>
+        <DataPageHeaderSettings>
+          <DataPageHeaderSetting>
+            {({ formFieldId }) => (
+              <>
+                <DataPageHeaderSettingLabel htmlFor={formFieldId}>Filter by</DataPageHeaderSettingLabel>
+                <DataPageHeaderSettingField>
+                  <Select
+                    id={formFieldId}
+                    options={[
+                      {
+                        label: "Yes",
+                        value: 1,
+                      },
+                      {
+                        label: "No",
+                        value: 0,
+                      },
+                    ]}
+                  />
+                </DataPageHeaderSettingField>
+              </>
+            )}
+          </DataPageHeaderSetting>
+          <DataPageHeaderSetting>
+            {({ formFieldId }) => (
+              <>
+                <DataPageHeaderSettingLabel htmlFor={formFieldId}>Sort by</DataPageHeaderSettingLabel>
+                <DataPageHeaderSettingField>
+                  <Select
+                    id={formFieldId}
+                    options={[
+                      {
+                        label: "Blue",
+                        value: 1,
+                      },
+                      {
+                        label: "Red",
+                        value: 0,
+                      },
+                    ]}
+                  />
+                </DataPageHeaderSettingField>
+              </>
+            )}
+          </DataPageHeaderSetting>
+        </DataPageHeaderSettings>
+        <DataPageHeaderCreateButton to="/mydata/create">Create New Data</DataPageHeaderCreateButton>
+      </DataPageHeader>
+      {content}
+    </>
+  );
+};
+Example.args = {
+  error: undefined,
+  isLoading: false,
+  isEmpty: false,
+};

package/src/base/layout/templates/data-page/DataPageHeader.tsx

@@ -0,0 +1,100 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import withClasses from "../../_helpers/with-classes";
+import React, { HTMLAttributes } from "react";
+import classNames from "classnames";
+import { useAriaId } from "../../../helpers";
+import { LinkButton } from "../../../buttons";
+
+/**
+ * @beta
+ * @since 2.47.0
+ */
+export const DataPageHeader = withClasses("div", [
+  "is-flex",
+  "is-flex-wrap-wrap",
+  "is-justify-content-space-between",
+  "mb-3",
+  "has-row-gap-2",
+  "has-column-gap-4",
+]);
+
+/**
+ * @beta
+ * @since 2.47.0
+ */
+export const DataPageHeaderSettings = withClasses("div", [
+  "is-flex",
+  "is-flex-wrap-wrap",
+  "is-align-items-center",
+  "has-row-gap-2",
+  "has-column-gap-4",
+  "is-flex-grow-1",
+  "is-flex-shrink-1",
+  "is-flex-basis-0",
+]);
+
+type DataPageHeaderSettingProps = HTMLAttributes<HTMLDivElement> & {
+  children?: React.ReactNode | ((props: { formFieldId: string }) => React.ReactNode);
+};
+
+/**
+ * @beta
+ * @since 2.47.0
+ */
+export const DataPageHeaderSetting = React.forwardRef<HTMLSpanElement, DataPageHeaderSettingProps>(
+  ({ className, children, ...props }, ref) => {
+    const formFieldId = useAriaId();
+    return (
+      <span {...props} className={classNames(className, "is-flex", "is-align-items-center", "has-gap-2")} ref={ref}>
+        {typeof children === "function" ? children({ formFieldId }) : children}
+      </span>
+    );
+  }
+);
+
+/**
+ * @beta
+ * @since 2.47.0
+ */
+export const DataPageHeaderSettingLabel = withClasses("label", [
+  "is-flex",
+  "is-align-items-center",
+  "is-text-wrap-no-wrap",
+]);
+
+/**
+ * @beta
+ * @since 2.47.0
+ */
+export const DataPageHeaderSettingField = React.Fragment;
+
+/**
+ * @beta
+ * @since 2.47.0
+ */
+export const DataPageHeaderCreateButton = withClasses(LinkButton, ["is-flex-grow-0", "is-flex-shrink-0"], {
+  variant: "primary",
+});

package/src/base/misc/Image.tsx

@@ -0,0 +1,32 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { ImgHTMLAttributes } from "react";
+import { urls } from "@scm-manager/ui-api";
+
+const Image = React.forwardRef<HTMLImageElement, ImgHTMLAttributes<HTMLImageElement> & { src: string }>(
+  ({ src, alt, ...props }, ref) => (
+    <img src={src?.startsWith("http") ? src : urls.withContextPath(src)} {...props} ref={ref} alt={alt} />
+  )
+);
+export default Image;

package/src/base/misc/Level.tsx

@@ -0,0 +1,40 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+
+type Props = HTMLAttributes<HTMLDivElement> & {
+  left?: ReactNode;
+  right?: ReactNode;
+};
+
+const Level = React.forwardRef<HTMLDivElement, Props>(({ right, left, children, className, ...props }, ref) => (
+  <div className={classNames("level", className)} {...props} ref={ref}>
+    <div className="level-left">{left}</div>
+    {children ? <div className="level-item">{children}</div> : null}
+    <div className="level-right">{right}</div>
+  </div>
+));
+
+export default Level;

package/src/base/misc/Loading.tsx

@@ -0,0 +1,64 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { HTMLAttributes } from "react";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
+import Image from "./Image";
+
+const Wrapper = styled.div`
+  min-height: 256px;
+`;
+
+const FixedSizedImage = styled(Image)`
+  width: 128px;
+  height: 128px;
+`;
+
+const Loading = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & { message?: string }>(
+  ({ message, children, className, ...props }, ref) => {
+    const [t] = useTranslation("commons");
+    return (
+      <Wrapper
+        className={classNames(
+          "is-flex",
+          "is-flex-direction-column",
+          "is-justify-content-center",
+          "is-align-items-center",
+          className
+        )}
+        {...props}
+        ref={ref}
+      >
+        <FixedSizedImage className="mb-3" src="/images/loading.svg" alt={t("loading.alt")} />
+        <p className="has-text-centered">
+          {message}
+          {children}
+        </p>
+      </Wrapper>
+    );
+  }
+);
+
+export default Loading;

package/src/base/misc/SubSubtitle.tsx

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { HTMLAttributes } from "react";
+import classNames from "classnames";
+
+const SubSubtitle = React.forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, children, ...props }, ref) =>
+    children ? (
+      <h3 className={classNames("is-size-5", className)} ref={ref} {...props}>
+        {children}
+      </h3>
+    ) : null
+);
+
+export default SubSubtitle;

package/src/base/misc/Subtitle.tsx

@@ -0,0 +1,37 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { HTMLAttributes } from "react";
+import classNames from "classnames";
+
+const Subtitle = React.forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & { subtitle?: string }>(
+  ({ subtitle, className, children, ...props }, ref) =>
+    !(subtitle || children) ? null : (
+      <h2 className={classNames("subtitle", className)} {...props} ref={ref}>
+        {subtitle}
+        {children}
+      </h2>
+    )
+);
+
+export default Subtitle;

package/src/base/misc/Title.tsx

@@ -0,0 +1,56 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { HTMLAttributes, useEffect } from "react";
+import classNames from "classnames";
+
+type Props = {
+  title?: string;
+  customPageTitle?: string;
+  preventRefreshingPageTitle?: boolean;
+};
+const Title = React.forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & Props>(
+  ({ title, customPageTitle, preventRefreshingPageTitle, children, className, ...props }, ref) => {
+    useEffect(() => {
+      if (!preventRefreshingPageTitle) {
+        if (customPageTitle) {
+          document.title = customPageTitle;
+        } else if (title) {
+          document.title = title;
+        }
+      }
+    }, [title, preventRefreshingPageTitle, customPageTitle]);
+
+    if (children || title) {
+      return (
+        <h1 className={classNames("title", className)} {...props} ref={ref}>
+          {title}
+          {children}
+        </h1>
+      );
+    }
+    return null;
+  }
+);
+
+export default Title;

package/src/base/misc/index.ts

@@ -0,0 +1,30 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export { default as Image } from "./Image";
+export { default as Loading } from "./Loading";
+export { default as Subtitle } from "./Subtitle";
+export { default as Title } from "./Title";
+export { default as SubSubtitle } from "./SubSubtitle";
+export { default as Level } from "./Level";