diff --git a/package.json b/package.json index 3c836f93f..ca83a9078 100644 --- 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 index 15fd01b1f..584f27503 100644 --- a/src/Routes/FancyProfilePictureRoute/FancyProfilePictureRoute.tsx +++ b/src/Routes/FancyProfilePictureRoute/FancyProfilePictureRoute.tsx @@ -8,64 +8,58 @@ export default function FancyProfilePictureRoute() { return ( - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + - - - - - - + + + + + + ); diff --git a/src/Routes/HeaderRoute/HeaderRoute.tsx b/src/Routes/HeaderRoute/HeaderRoute.tsx index 1d6094e0d..a3f2eb539 100644 --- a/src/Routes/HeaderRoute/HeaderRoute.tsx +++ b/src/Routes/HeaderRoute/HeaderRoute.tsx @@ -79,7 +79,9 @@ const RightSlot = ({ onClick }: { onClick?: () => void }) => {
+ } />
); @@ -102,7 +104,9 @@ const HeaderContent = () => {
+ } />
@@ -164,7 +168,9 @@ export default function HeaderRoute() { + } /> } > @@ -196,8 +202,10 @@ export default function HeaderRoute() {
+ Image={ + + } + >
diff --git a/src/Routes/MiniProfileRoute/MiniProfileroute.tsx b/src/Routes/MiniProfileRoute/MiniProfileroute.tsx index 78703685b..33e3afcf5 100644 --- 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={ + + } /> + } /> + } /> @@ -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={ + + } /> + } /> + } /> @@ -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={ + + } /> + } /> + } /> @@ -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={ + + } /> + } /> + } /> @@ -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={ + + } /> + } /> + } /> diff --git a/src/components/atoms/FancyBox/docu/FancyBox.stories.tsx b/src/components/atoms/FancyBox/docu/FancyBox.stories.tsx index f30bacc5d..a60bc8050 100644 --- 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 = { + } /> diff --git a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts index fe21431b8..10e682c1b 100644 --- a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts +++ b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts @@ -1,4 +1,4 @@ -import React, { ReactElement } from 'react'; +import React from 'react'; import { CSSProp } from 'styled-components'; import { TCssFiltersTypes } from '@/design/designFunctions/createCssFilterString'; @@ -6,7 +6,7 @@ import { TComponentSizesExtended } from '@/types/TComponentSizes'; export type TFancyImageWrapper = { aspectRatio?: string; // e.g. "16/9" - children?: ReactElement; + 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 index 018711669..5630a2b28 100644 --- 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` 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 index 8d4e993e5..c10fca703 100644 --- 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; export const Primary: Story = { render: (args) => , args: { - src: 'https://avatars.githubusercontent.com/u/54409958?v=4', + children: 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', diff --git a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx index 6c14303aa..8ebdb50c2 100644 --- a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx +++ b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx @@ -1,21 +1,37 @@ -import { StyledImage } from './FancyProfilePicture.style'; import { TextAvatar } from '@/components/molecules/TextAvatar'; import { TFancyProfilePictureWithHTMLAttrs } from './TFancyProfilePicture.model'; +import { FancyImageWrapper } from '@/components/atoms/FancyImageWrapper'; // --------------------------------------------------------------------------- // // ProfilePicture component to render with different sizes and border radius // // --------------------------------------------------------------------------- // export default function FancyProfilePicture(props: TFancyProfilePictureWithHTMLAttrs) { - const { borderRadius = 'complete', sizeC = 'md', alt, externalStyle, textAvatarSettings, ...htmlProps } = props; + const { + borderRadius = 'complete', + sizeC = 'md', + nickname = 'User', + externalStyle, + textAvatarSettings, + children, + ...htmlProps + } = props; - return 'src' in htmlProps ? ( - + return children ? ( + + {children} + ) : ( ); diff --git a/src/components/atoms/FancyProfilePicture/TFancyProfilePicture.model.ts b/src/components/atoms/FancyProfilePicture/TFancyProfilePicture.model.ts index 74c7e822e..846985ab9 100644 --- a/src/components/atoms/FancyProfilePicture/TFancyProfilePicture.model.ts +++ b/src/components/atoms/FancyProfilePicture/TFancyProfilePicture.model.ts @@ -1,3 +1,4 @@ +import { ReactElement } from 'react'; import { CSSProp } from 'styled-components'; import { TextAvatar } from '@/components/molecules/TextAvatar'; @@ -10,6 +11,8 @@ export type TFancyProfilePicture = { sizeC?: TSize | string; externalStyle?: CSSProp; textAvatarSettings?: Omit; + nickname?: string; }; -export type TFancyProfilePictureWithHTMLAttrs = TFancyProfilePicture & React.ImgHTMLAttributes; +export type TFancyProfilePictureWithHTMLAttrs = TFancyProfilePicture & + React.HtmlHTMLAttributes & { children?: React.ReactNode }; diff --git a/src/components/atoms/Header/docu/Header.stories.tsx b/src/components/atoms/Header/docu/Header.stories.tsx index 3040f25c6..62184bcd3 100644 --- a/src/components/atoms/Header/docu/Header.stories.tsx +++ b/src/components/atoms/Header/docu/Header.stories.tsx @@ -83,7 +83,9 @@ export const Primary: Story = { alignImage="left" title="@TobiTRy" subTitle="Tobias TRy " - src="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" + Image={ + + } /> @@ -143,7 +145,9 @@ export const Advancedheader: Story = { + } /> } > @@ -185,7 +189,9 @@ export const OutlinedHeader: Story = {
+ } />
diff --git a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx index d52288666..d4083d737 100644 --- a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx +++ b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx @@ -9,14 +9,16 @@ import { TFancyMiniprofileWithHTMLProps } from './TFancyMiniProfile.model'; // ------ The MiniProfile rendes a image with a heading and description ------ // // --------------------------------------------------------------------------- // export default function FancyMiniProfile(props: TFancyMiniprofileWithHTMLProps) { - const { sizeC = 'sm', src, title, subTitle, themeType, layer = 3, alignImage = 'right', ...htmlProps } = props; + const { sizeC = 'sm', Image, title, subTitle, themeType, layer = 3, alignImage = 'right', ...htmlProps } = props; // Define a function to calculate the spacing position for the chip const chipStyle = generateChipStyle({ sizeC, themeType, layer, $alignImage: alignImage }); return ( - + + {Image} + {title && ( diff --git a/src/components/molecules/FancyMiniProfile/TFancyMiniProfile.model.ts b/src/components/molecules/FancyMiniProfile/TFancyMiniProfile.model.ts index 02551cd7e..7a35f39fa 100644 --- a/src/components/molecules/FancyMiniProfile/TFancyMiniProfile.model.ts +++ b/src/components/molecules/FancyMiniProfile/TFancyMiniProfile.model.ts @@ -1,11 +1,12 @@ import { TComponentSizes } from '@/types/TComponentSizes'; import { TLayer } from '@/types/TLayer'; import { TUiColorsNotTransparent } from '@/types/TUiColorsNotTransparent'; +import React from 'react'; export type TFancyMiniprofile = { title?: string; subTitle?: string; - src?: string; + Image: React.ReactElement; sizeC?: TComponentSizes; themeType?: TUiColorsNotTransparent; layer?: TLayer; diff --git a/src/components/molecules/FancyMiniProfile/docu/FancyMiniProfile.stories.tsx b/src/components/molecules/FancyMiniProfile/docu/FancyMiniProfile.stories.tsx index c6d1b1a39..2b95284ed 100644 --- a/src/components/molecules/FancyMiniProfile/docu/FancyMiniProfile.stories.tsx +++ b/src/components/molecules/FancyMiniProfile/docu/FancyMiniProfile.stories.tsx @@ -42,10 +42,10 @@ const meta = { }, options: ['left', 'right'], }, - src: { - description: 'The source URL for the profile image.', + Image: { + description: 'The image to be displayed in the profile card.', control: { - type: 'text', + type: 'object', }, }, shadow: { @@ -67,7 +67,7 @@ export const Primary: Story = { alignImage: 'right', title: 'Hans', subTitle: 'Hans', - src: 'https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg', + Image: , sizeC: 'sm', themeType: 'primary', layer: 3,