Merge branch 'main' into chore/properties-required-indicator

* main: (23 commits) chore(release): bump version to 0.1.0-alpha.340 fix(Notification): Also call onClose handler from notification component props if notification comes from an NotificationProvider chore(release): bump version to 0.1.0-alpha.339 refactor!: rename IconContractPosition to IconContract refactor!: rename IconContractPosition to IconContract chore(release): bump version to 0.1.0-alpha.338 fix(FileCard): fix padding chore(release): bump version to 0.1.0-alpha.337 fix(FileCard): add background to file card fix(Link): dont show icon on unstyled link chore(release): bump version to 0.1.0-alpha.336 feat(FileCard): Add Link and Image to FileCard (#957) chore(release): bump version to 0.1.0-alpha.335 docs: Refactor Foundation Pages (#950) chore(release): bump version to 0.1.0-alpha.334 docs: styleguide header design optimization (#945) chore(release): bump version to 0.1.0-alpha.333 style: Adjusted Navigation paddings to make Collapsable and Non Collapsable lists the same (#952) fix(Separator): fix border style chore(release): bump version to 0.1.0-alpha.332 ...
mittwald · Nov 11, 2024 · 27262ee · 27262ee
2 parents 7064e89 + d0bfb75
commit 27262ee
Show file tree

Hide file tree

Showing 73 changed files with 1,608 additions and 602 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,106 @@
 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
+
+# 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
+
+- **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
+
+- **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
+
+- **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
+
+# 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
+
+# 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
+
+- **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
+
+# 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
@@ -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.340"
 }
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -3,6 +3,106 @@
 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
+
+# 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
+
+- **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
+
+- **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
+
+- **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
+
+# 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
+
+# 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
+
+- **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
+
+# 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
@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.331",
+  "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/components/src/components/FileCard/FileCard.module.scss b/packages/components/src/components/FileCard/FileCard.module.scss
@@ -3,13 +3,19 @@
   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;
+  background-color: var(--file-card--background-color--default);
+
+  &: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 +35,39 @@
       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);
+      }
+    }
+
+    &: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 {
+      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
@@ -1,27 +1,27 @@
 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,
 } from "@/lib/types/props";
 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<LinkProps, "onPress" | "href" | "target" | "download"> {
   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 = (
-    <Avatar color="blue">
-      {type?.includes("image") ? <IconImage /> : <IconFile />}
-    </Avatar>
-  );
-
   return (
     <Element className={rootClassName}>
-      {avatar}
-      <span className={styles.text}>
-        <Text className={styles.title}>
-          <b>{name}</b>
-        </Text>
-        {sizeInBytes && <FileSizeText sizeInBytes={sizeInBytes} />}
-      </span>
-      {onDelete && (
-        <Button
-          aria-label={stringFormatter.format(`fileCard.delete`)}
-          size="s"
-          variant="plain"
-          color="secondary"
-          onPress={onDelete}
+      <Wrap if={href || onPress}>
+        <Link
+          className={styles.link}
+          unstyled
+          href={href}
+          onPress={onPress}
+          target={target}
+          download={download}
         >
-          <IconClose />
-        </Button>
-      )}
+          <Avatar type={type} imageSrc={imageSrc} />
+          <span className={styles.text}>
+            <Text className={styles.title}>
+              <b>{name}</b>
+            </Text>
+            {sizeInBytes && <FileSizeText sizeInBytes={sizeInBytes} />}
+          </span>
+        </Link>
+      </Wrap>
+      {onDelete && <DeleteButton onDelete={onDelete} />}
     </Element>
   );
 });