Merge pull request #287 from TobiTRy/update--FancyProfilePicture-to-u…

…se-ist-with-own-image-Tage-like-nextimage Update fancy profile picture to use ist with own image tage like nextimage
TobiTRy · May 8, 2024 · 28a3544 · 28a3544
2 parents fb9881f + ec17725
commit 28a3544
Show file tree

Hide file tree

Showing 14 changed files with 165 additions and 102 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "name": "TobiTRy"
   },
   "private": false,
-  "version": "0.4.4",
+  "version": "0.4.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/Routes/FancyProfilePictureRoute/FancyProfilePictureRoute.tsx b/src/Routes/FancyProfilePictureRoute/FancyProfilePictureRoute.tsx
@@ -8,64 +8,58 @@ export default function FancyProfilePictureRoute() {
   return (
     <DesignWrapper>
       <DesignArea title="ProfilePictures">
-        <FancyProfilePicture
-          sizeC="xxs"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-        />
-        <FancyProfilePicture
-          sizeC="xs"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-        />
-        <FancyProfilePicture
-          sizeC="sm"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-        />
-        <FancyProfilePicture
-          sizeC="md"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-        />
-        <FancyProfilePicture
-          sizeC="lg"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-        />
-        <FancyProfilePicture
-          sizeC="xl"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-        />
-        <FancyProfilePicture
-          sizeC="xxl"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-        />
+        <FancyProfilePicture sizeC="xxs">
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        </FancyProfilePicture>
+
+        <FancyProfilePicture sizeC="xs">
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        </FancyProfilePicture>
+
+        <FancyProfilePicture sizeC="sm">
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        </FancyProfilePicture>
+
+        <FancyProfilePicture sizeC="md">
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        </FancyProfilePicture>
+
+        <FancyProfilePicture sizeC="lg">
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        </FancyProfilePicture>
+
+        <FancyProfilePicture sizeC="xl">
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        </FancyProfilePicture>
+
+        <FancyProfilePicture sizeC="xxl">
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        </FancyProfilePicture>
       </DesignArea>
       <DesignArea title="ProfilePictures borderRadius">
-        <FancyProfilePicture
-          sizeC="sm"
-          borderRadius="sm"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-        />
-        <FancyProfilePicture
-          sizeC="md"
-          borderRadius="md"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-        />
-        <FancyProfilePicture
-          sizeC="lg"
-          borderRadius="lg"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-        />
-        <FancyProfilePicture
-          sizeC="xl"
-          borderRadius="complete"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-        />
+        <FancyProfilePicture sizeC="sm" borderRadius="sm">
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        </FancyProfilePicture>
+
+        <FancyProfilePicture sizeC="md" borderRadius="md">
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        </FancyProfilePicture>
+
+        <FancyProfilePicture sizeC="lg" borderRadius="lg">
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        </FancyProfilePicture>
+
+        <FancyProfilePicture sizeC="xl" borderRadius="complete">
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        </FancyProfilePicture>
       </DesignArea>
       <DesignArea title="ProfilePictures Avatar">
-        <FancyProfilePicture sizeC="xxs" borderRadius="sm" alt="Hi" />
-        <FancyProfilePicture sizeC="xs" borderRadius="sm" alt="Hi" />
-        <FancyProfilePicture sizeC="sm" borderRadius="sm" alt="Hi" />
-        <FancyProfilePicture sizeC="md" borderRadius="md" alt="Hi" />
-        <FancyProfilePicture sizeC="lg" borderRadius="lg" alt="Hi" />
-        <FancyProfilePicture sizeC="xl" borderRadius="complete" alt="Hi" />
+        <FancyProfilePicture sizeC="xxs" borderRadius="sm" nickname="Hi" />
+        <FancyProfilePicture sizeC="xs" borderRadius="sm" nickname="Hi" />
+        <FancyProfilePicture sizeC="sm" borderRadius="sm" nickname="Hi" />
+        <FancyProfilePicture sizeC="md" borderRadius="md" nickname="Hi" />
+        <FancyProfilePicture sizeC="lg" borderRadius="lg" nickname="Hi" />
+        <FancyProfilePicture sizeC="xl" borderRadius="complete" nickname="Hi" />
       </DesignArea>
     </DesignWrapper>
   );

diff --git a/src/Routes/HeaderRoute/HeaderRoute.tsx b/src/Routes/HeaderRoute/HeaderRoute.tsx
@@ -79,7 +79,9 @@ const RightSlot = ({ onClick }: { onClick?: () => void }) => {
     <div onClick={onClick} style={{ display: 'flex', alignItems: 'center' }}>
       <FancyMiniProfile
         title="@TobiTRy"
-        src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+        Image={
+          <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+        }
       />
     </div>
   );
@@ -102,7 +104,9 @@ const HeaderContent = () => {
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', width: '100%' }}>
         <FancyMiniProfile
           title="@TobiTRy"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+          Image={
+            <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+          }
         />
       </div>
     </HeaderContentWrapper>
@@ -164,7 +168,9 @@ export default function HeaderRoute() {
                   <FancyMiniProfile
                     sizeC={'sm'}
                     title="mooin"
-                    src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+                    Image={
+                      <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+                    }
                   />
                 }
               ></FancyPopover>
@@ -196,8 +202,10 @@ export default function HeaderRoute() {
             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', width: '100%' }}>
               <FancyMiniProfile
                 title="@TobiTRy"
-                src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
-              />
+                Image={
+                  <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+                }
+              ></FancyMiniProfile>
             </div>
           </div>
         </Header>

diff --git a/src/Routes/MiniProfileRoute/MiniProfileroute.tsx b/src/Routes/MiniProfileRoute/MiniProfileroute.tsx
@@ -15,20 +15,26 @@ export default function MiniProfileroute() {
               sizeC="sm"
               alignImage="right"
               title="TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
             <FancyMiniProfile
               sizeC="md"
               alignImage="right"
               title="TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
             <FancyMiniProfile
               sizeC="lg"
               alignImage="right"
               title="TobiTRy"
               subTitle="@TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
           </div>
         </DesignArea>
@@ -38,20 +44,26 @@ export default function MiniProfileroute() {
               sizeC="sm"
               alignImage="left"
               title="TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
             <FancyMiniProfile
               sizeC="md"
               alignImage="left"
               title="TobiTRy"
               subTitle="@TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
             <FancyMiniProfile
               sizeC="lg"
               alignImage="left"
               title="TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
           </div>
         </DesignArea>
@@ -62,20 +74,26 @@ export default function MiniProfileroute() {
               sizeC={'sm'}
               title="TobiTRy"
               subTitle="@TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
             <FancyMiniProfile
               alignImage="right"
               sizeC={'sm'}
               title="TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
             <FancyMiniProfile
               alignImage="right"
               sizeC={'sm'}
               title="TobiTRy"
               subTitle="@TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
           </div>
         </DesignArea>
@@ -86,20 +104,26 @@ export default function MiniProfileroute() {
               sizeC={'md'}
               title="TobiTRy"
               subTitle="@TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
             <FancyMiniProfile
               alignImage="right"
               sizeC={'md'}
               title="TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
             <FancyMiniProfile
               alignImage="right"
               sizeC={'md'}
               title="TobiTRy"
               subTitle="@TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
           </div>
         </DesignArea>
@@ -110,21 +134,27 @@ export default function MiniProfileroute() {
               sizeC={'lg'}
               title="TobiTRy"
               subTitle="@TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
             <FancyMiniProfile
               alignImage="right"
               sizeC={'lg'}
               title="TobiTRy"
               subTitle="@TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
             <FancyMiniProfile
               alignImage="right"
               sizeC={'lg'}
               title="TobiTRy"
               subTitle="@TobiTRy"
-              src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              Image={
+                <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+              }
             />
           </div>
         </DesignArea>

diff --git a/src/components/atoms/FancyBox/docu/FancyBox.stories.tsx b/src/components/atoms/FancyBox/docu/FancyBox.stories.tsx
@@ -129,7 +129,9 @@ export const Header: Story = {
         <FancyMiniProfile
           alignImage="left"
           title="@TobiTRy"
-          src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+          Image={
+            <img src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" />
+          }
         />
       </div>
     </FancyBox>

diff --git a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts
@@ -1,12 +1,12 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { CSSProp } from 'styled-components';
 
 import { TCssFiltersTypes } from '@/design/designFunctions/createCssFilterString';
 import { TComponentSizesExtended } from '@/types/TComponentSizes';
 
 export type TFancyImageWrapper = {
   aspectRatio?: string; // e.g. "16/9"
-  children?: ReactElement<HTMLImageElement>;
+  children?: React.ReactNode;
   filter?: TCssFiltersTypes;
   externalStyle?: CSSProp;
   borderRadius?: string;

diff --git a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx
@@ -46,6 +46,7 @@ export const ImageWrapper = styled.div<TStyledImage & { theme: TTheme }>`
   transition: filter 0.3s;
   filter: ${({ $filter }) => $filter && createCssFilterString($filter)};
   aspect-ratio: ${({ $aspectRatio }) => ($aspectRatio ? `${$aspectRatio};` : '')};
+  line-height: 0;
 
   img {
     width: 100%;

diff --git a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.stories.tsx b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.stories.tsx
@@ -32,15 +32,15 @@ const meta = {
       control: { type: 'select' },
       options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
     },
-    src: {
-      control: { type: 'text' },
-      description: 'The source of the image.',
+    children: {
+      control: { type: 'object' },
+      description: 'The children of the image.',
     },
-    alt: {
+    nickname: {
       control: { type: 'text' },
       description: 'The alt text of the image is used as a placeholder if no image is provided.',
       table: {
-        defaultValue: { summary: 'Profile' },
+        defaultValue: { summary: 'User' },
       },
     },
     externalStyle: {
@@ -66,10 +66,10 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   render: (args) => <FancyProfilePicture {...args} />,
   args: {
-    src: 'https://avatars.githubusercontent.com/u/54409958?v=4',
+    children: <img src="https://avatars.githubusercontent.com/u/54409958?v=4" alt="profile" />,
     borderRadius: 'complete',
     sizeC: 'md',
-    alt: '',
+    nickname: 'User',
   },
 };
 
@@ -78,7 +78,7 @@ export const Avatar: Story = {
   args: {
     borderRadius: 'complete',
     sizeC: 'md',
-    alt: '',
+    nickname: 'User',
     textAvatarSettings: {
       sizeC: 'md',
       borderRadius: 'complete',