From 0654dc8c8ef220e647c8f3587e6d2a36e120e2ce Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Sun, 3 Dec 2023 22:16:00 +0100 Subject: [PATCH] update: structore of components --- .../FancyLoadingSpinner.model.ts | 33 +++--- .../FancyLoadingSpinner.stories.tsx | 32 +++++- .../FancyLoadingSpinner.tsx | 4 +- .../FancyProfilePicture.style.tsx | 41 +------ .../FancyProfilePicture.tsx | 3 +- .../atoms/FancyProfilePicture/sizeSettings.ts | 39 +++++++ .../atoms/FancySVGAtom/FancySVGAtom.style.tsx | 39 +++++++ .../atoms/FancySVGAtom/FancySVGAtom.tsx | 41 +------ .../atoms/FancyVideo/FancyVideo.tsx | 20 ++-- .../atoms/FancyXButton/FancyXButton.tsx | 47 ++++---- .../ImageVideoOverlay.style.tsx | 100 +++++++++++++++++ .../ImageVideoOverlay/ImageVideoOverlay.tsx | 101 +----------------- .../atoms/InputUnderline/InputUnderline.tsx | 54 ++++++---- .../atoms/ListDivider/ListDivider.style.tsx | 4 +- 14 files changed, 304 insertions(+), 254 deletions(-) create mode 100644 src/components/atoms/FancyProfilePicture/sizeSettings.ts create mode 100644 src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx create mode 100644 src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.style.tsx diff --git a/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts b/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts index 2b8fc00ae..539d2ac2b 100644 --- a/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts +++ b/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts @@ -10,18 +10,17 @@ import { TLayer } from '@/interface/TLayer'; // ------------------------------------------------- // // Define a function to generate the border for the spinner interface IGenerateBorder { - size: string; + $size: string; theme: TTheme; - themeType?: TThemeTypesNotTransparent; - layer?: TLayer; + $themeType?: TThemeTypesNotTransparent; + $layer?: TLayer; } - -const generateBorder = ({ size, theme }: IGenerateBorder): CSSProp => { +const generateBorder = ({ $size, theme, $layer, $themeType = 'accent' }: IGenerateBorder): CSSProp => { return css` - border-top: ${size} solid transparent; - border-right: ${size} solid ${theme.colors.accent[0]}; - border-bottom: ${size} solid transparent; - border-left: ${size} solid ${theme.colors.accent[0]}; + border-top: ${$size} solid transparent; + border-right: ${$size} solid ${theme.colors[$themeType][$layer || 0]}; + border-bottom: ${$size} solid transparent; + border-left: ${$size} solid ${theme.colors.accent[$themeType][$layer || 0]}; `; }; @@ -49,9 +48,16 @@ export const SpinnerContainer = styled.div<{ $size?: keyof typeof sizes }>` justify-content: center; `; +interface IStyledFancyLoadingSpinner { + $size: keyof typeof sizes; + theme: TTheme; + $themeType?: TThemeTypesNotTransparent; + $layer?: TLayer; +} // Define a styled component for the inner spinner -export const StyledInnerSpinner = styled.div<{ $size?: keyof typeof sizes; theme: TTheme }>` - ${({ $size, theme }) => generateBorder({ size: $size ? sizes[$size].thicknessInner : sizes.md.thickness, theme })} +export const StyledInnerSpinner = styled.div` + ${({ $size, theme, $themeType, $layer }) => + generateBorder({ $size: $size ? sizes[$size].thicknessInner : sizes.md.thickness, theme, $themeType, $layer })} animation: ${reverseSpinner} 2s infinite ease-in-out; border-radius: 50%; width: 80%; @@ -59,8 +65,9 @@ export const StyledInnerSpinner = styled.div<{ $size?: keyof typeof sizes; theme `; // Define a styled component for the outer spinner -export const StyledFancyLoadingSpinner = styled.div<{ $size?: keyof typeof sizes; $thickness?: string; theme: TTheme }>` - ${({ $size, theme }) => generateBorder({ size: $size ? sizes[$size].thickness : sizes.md.thickness, theme })} +export const StyledFancyLoadingSpinner = styled.div` + ${({ $size, theme, $themeType, $layer }) => + generateBorder({ $size: $size ? sizes[$size].thickness : sizes.md.thickness, theme, $themeType, $layer })} position: absolute; animation: ${spinner} 2s infinite ease-in-out; border-radius: 50%; diff --git a/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.stories.tsx b/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.stories.tsx index dc7542d39..c594f0819 100644 --- a/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.stories.tsx +++ b/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.stories.tsx @@ -16,7 +16,31 @@ const meta = { }, // Define arguments for the story - argTypes: {}, + argTypes: { + themeType: { + description: 'The theme type of the component.', + control: { + type: 'select', + options: ['primary', 'secondary', 'accent', 'neutral'], + }, + }, + size: { + description: 'The size of the component.', + control: { + type: 'select', + options: ['xs', 'sm', 'md', 'lg', 'xl'], + }, + }, + layer: { + description: 'The layer of the component.', + control: { + type: 'range', + min: 0, + max: 10, + step: 1, + }, + }, + }, // Add tags to the story tags: ['autodocs'], @@ -30,7 +54,11 @@ type Story = StoryObj; // Define the primary story export const Primary: Story = { render: (args) => , - args: {}, + args: { + themeType: 'accent', + size: 'md', + layer: 0, + }, parameters: { docs: { description: { diff --git a/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.tsx b/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.tsx index 8681802d1..1dd1ab595 100644 --- a/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.tsx +++ b/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.tsx @@ -13,10 +13,10 @@ interface IFancyLoadingSpinner { themeType?: TThemeTypesNotTransparent; layer?: TLayer; } -export default function FancyLoadingSpinner({ size = 'md' }: IFancyLoadingSpinner) { +export default function FancyLoadingSpinner({ size = 'md', themeType, layer }: IFancyLoadingSpinner) { return ( - + ); diff --git a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.style.tsx b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.style.tsx index 452026b22..5af71e1a0 100644 --- a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.style.tsx +++ b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.style.tsx @@ -1,47 +1,9 @@ import { styled } from 'styled-components'; -import { IFancyProfilePicture } from './FancyProfilePicture'; import { TThemeTypes } from '@/interface/TUiColors'; import { TLayer } from '@/interface/TLayer'; import { TTheme } from '@/interface/TTheme'; - -// Set the border based on the prop -type TBorderRadius = IFancyProfilePicture['rounded']; -const getBorderRadius = (borderRadius: TBorderRadius) => { - switch (borderRadius) { - case 'sm': - return '10%'; - case 'md': - return '20%'; - case 'lg': - return '30%'; - case 'complete': - return '50%'; - default: - return ''; - } -}; - -// Set size based on prop -export type TSize = 'sm' | 'md' | 'lg' | 'xxs' | 'xs' | 'xl' | 'xxl'; -const sizeConfig: Record = { - xxs: '24px', - xs: '32px', - sm: '48px', - md: '96px', - lg: '128px', - xl: '192px', - xxl: '256px', - default: '100px', -}; - -const getSize = (size: TSize | string) => { - // Check if the size is a percentage value - if (typeof size === 'string' && size.endsWith('%')) return size; - - // Return the size from the config or default if not found - return sizeConfig[size] || sizeConfig['default']; -}; +import { TBorderRadius, TSize, getBorderRadius, getSize } from './sizeSettings'; // Styled img component export const StyledImage = styled.img<{ $rounded: TBorderRadius; $size: TSize | string }>` @@ -62,7 +24,6 @@ interface IPlaceholderProps { $themeType?: TThemeTypes; $layer?: TLayer; } - export const Placeholder = styled.div` border-radius: ${({ $rounded }) => getBorderRadius($rounded)}; width: ${({ $size }) => getSize($size)}; diff --git a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx index d3c080503..1a82d5458 100644 --- a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx +++ b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx @@ -1,10 +1,11 @@ import React from 'react'; -import { Placeholder, StyledImage, TSize } from './FancyProfilePicture.style'; +import { Placeholder, StyledImage } from './FancyProfilePicture.style'; import { TThemeTypes } from '@/interface/TUiColors'; import { TLayer } from '@/interface/TLayer'; import { Typography } from '../Typography'; import { TTypography } from '@/interface/TTypography'; +import { TSize } from './sizeSettings'; // generate the text size based on the size prop const getTextSize = (size: TSize | string): TTypography => { diff --git a/src/components/atoms/FancyProfilePicture/sizeSettings.ts b/src/components/atoms/FancyProfilePicture/sizeSettings.ts new file mode 100644 index 000000000..553d808c7 --- /dev/null +++ b/src/components/atoms/FancyProfilePicture/sizeSettings.ts @@ -0,0 +1,39 @@ +import { IFancyProfilePicture } from './FancyProfilePicture'; + +// Set the border based on the prop +export type TBorderRadius = IFancyProfilePicture['rounded']; +export const getBorderRadius = (borderRadius: TBorderRadius) => { + switch (borderRadius) { + case 'sm': + return '10%'; + case 'md': + return '20%'; + case 'lg': + return '30%'; + case 'complete': + return '50%'; + default: + return ''; + } +}; + +// Set size based on prop +export type TSize = 'sm' | 'md' | 'lg' | 'xxs' | 'xs' | 'xl' | 'xxl'; +const sizeConfig: Record = { + xxs: '24px', + xs: '32px', + sm: '48px', + md: '96px', + lg: '128px', + xl: '192px', + xxl: '256px', + default: '100px', +}; + +export const getSize = (size: TSize | string) => { + // Check if the size is a percentage value + if (typeof size === 'string' && size.endsWith('%')) return size; + + // Return the size from the config or default if not found + return sizeConfig[size] || sizeConfig['default']; +}; diff --git a/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx b/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx new file mode 100644 index 000000000..83834f958 --- /dev/null +++ b/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx @@ -0,0 +1,39 @@ +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent'; +import { TTheme } from '@/interface/TTheme'; +import { TThemeTypes } from '@/interface/TUiColors'; +import { styled } from 'styled-components'; +import { IStyledSVGAtom, sizes } from './FancySVGAtom.model'; + +interface ICalcIconColor { + theme: TTheme; + $isActive?: boolean; + $errorMessage?: string | undefined; + $themeType: TThemeTypes; + $layer?: number; +} +// calculate the color of the icon based on the props and the theme +const calcIconColor = ({ theme, $isActive, $errorMessage, $themeType, $layer }: ICalcIconColor): string => { + if (!$errorMessage) { + return $isActive ? theme.colors.accent[0] : getBackgroundColor({ theme, $themeType, $layer }); + } else { + return theme.colors.error[0]; + } +}; + +export const StyledSVG = styled.i` + display: flex; + justify-content: center; + font-style: normal; + align-items: center; + width: ${({ $size }) => sizes[$size!]}; + aspect-ratio: 1/1; + color: ${({ $isActive, $errorMessage, $isPassive, theme, $themeType = 'secondary', $layer = 0 }) => + !$isPassive && calcIconColor({ theme, $isActive, $errorMessage, $layer, $themeType })}; + ${({ $externalStyle }) => $externalStyle}; + will-change: transform; + + svg { + width: 100%; + height: 100%; + } +`; diff --git a/src/components/atoms/FancySVGAtom/FancySVGAtom.tsx b/src/components/atoms/FancySVGAtom/FancySVGAtom.tsx index 63dd2e4e5..e2ced20cc 100644 --- a/src/components/atoms/FancySVGAtom/FancySVGAtom.tsx +++ b/src/components/atoms/FancySVGAtom/FancySVGAtom.tsx @@ -1,44 +1,7 @@ import React from 'react'; -import { styled } from 'styled-components'; -import { ISVGAtomProps, IStyledSVGAtom, sizes } from './FancySVGAtom.model'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; -import { TTheme } from '@/interface/TTheme'; - -interface ICalcIconColor { - theme: TTheme; - $isActive?: boolean; - $errorMessage?: string | undefined; - $themeType: TThemeTypes; - $layer?: number; -} - -const calcIconColor = ({ theme, $isActive, $errorMessage, $themeType, $layer }: ICalcIconColor): string => { - if (!$errorMessage) { - return $isActive ? theme.colors.accent[0] : getBackgroundColor({ theme, $themeType, $layer }); - } else { - return theme.colors.error[0]; - } -}; - -const StyledSVG = styled.i` - display: flex; - justify-content: center; - font-style: normal; - align-items: center; - width: ${({ $size }) => sizes[$size!]}; - aspect-ratio: 1/1; - color: ${({ $isActive, $errorMessage, $isPassive, theme, $themeType = 'secondary', $layer = 0 }) => - !$isPassive && calcIconColor({ theme, $isActive, $errorMessage, $layer, $themeType })}; - ${({ $externalStyle }) => $externalStyle}; - will-change: transform; - - svg { - width: 100%; - height: 100%; - } -`; +import { ISVGAtomProps } from './FancySVGAtom.model'; +import { StyledSVG } from './FancySVGAtom.style'; // --------------------------------------------------------------------------- // // --------- This is a wrapper for SVGs to wrap them and style them ---------- // diff --git a/src/components/atoms/FancyVideo/FancyVideo.tsx b/src/components/atoms/FancyVideo/FancyVideo.tsx index 4a39e4171..0dbe081f4 100644 --- a/src/components/atoms/FancyVideo/FancyVideo.tsx +++ b/src/components/atoms/FancyVideo/FancyVideo.tsx @@ -3,15 +3,6 @@ import { styled } from 'styled-components'; import { isAspectRatioValid } from '@/utils/validations/isAspectRatioValid'; -// Define a styled video component using styled-components -const StyledVideo = styled.video<{ $aspectRatio?: string; $darken?: boolean }>` - object-fit: cover; - width: 100%; - height: auto; - ${({ $aspectRatio }) => ($aspectRatio ? `aspect-ratio: ${$aspectRatio};` : '')} - filter: ${({ $darken }) => ($darken ? 'brightness(0.5)' : 'none')}; -`; - // Define the props for the FancyVideo component export interface IFancyVideo { src: string; @@ -49,3 +40,14 @@ export default function FancyVideo(props: IFancyVideo) { ); } + +// ------------------------------------------- // +// ------- The style for the component ------- // +// ------------------------------------------- // +const StyledVideo = styled.video<{ $aspectRatio?: string; $darken?: boolean }>` + object-fit: cover; + width: 100%; + height: auto; + ${({ $aspectRatio }) => ($aspectRatio ? `aspect-ratio: ${$aspectRatio};` : '')} + filter: ${({ $darken }) => ($darken ? 'brightness(0.5)' : 'none')}; +`; diff --git a/src/components/atoms/FancyXButton/FancyXButton.tsx b/src/components/atoms/FancyXButton/FancyXButton.tsx index 6f8565abe..984dd1a2d 100644 --- a/src/components/atoms/FancyXButton/FancyXButton.tsx +++ b/src/components/atoms/FancyXButton/FancyXButton.tsx @@ -2,21 +2,38 @@ import React from 'react'; import { styled } from 'styled-components'; import Color from 'color'; -import { fontSize } from '../../../design/theme/designSizes'; -import simpleColorTransition from '../../../design/designFunctions/simpleColorTransition/simpleTransition'; +import { fontSize } from '@/design/theme/designSizes'; +import { simpleColorTransition } from '@/design/designFunctions/simpleColorTransition'; import { TThemeTypesNotTransparent } from '@/interface/TThemeTypesNotTransparent'; import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; import { TTheme } from '@/interface/TTheme'; -type FancyXButtonDesign = TThemeTypesNotTransparent; +// --------------------------------------------------------------------------- // +// --------------- The main Component for the X Close Button------- ---------- // +// --------------------------------------------------------------------------- // +interface IFancyXButton { + onClick?: () => void; + themeType?: TThemeTypesNotTransparent; + layer?: TLayer; +} +export default function FancyXButton({ onClick, themeType, layer }: IFancyXButton) { + //check wich design comes in and add the right color object uiColor or systemMessages to the button + return ( + + x + + ); +} +// ------------------------------------------- // +// ------- The style for the component ------- // +// ------------------------------------------- // interface IStyledFancyXButton { - $themeType?: FancyXButtonDesign; + $themeType?: TThemeTypesNotTransparent; $layer?: TLayer; theme: TTheme; } - const StyledFancyXButton = styled.button` padding: 0 ${({ theme }) => theme.spacing.sm} ${({ theme }) => theme.spacing.xxs}; background: none; @@ -32,21 +49,3 @@ const StyledFancyXButton = styled.button` color: ${({ $themeType = 'accent', $layer, theme }) => Color(getBackgroundColor({ $themeType, $layer, theme })).darken(0.1).hex()}; } `; - -// --------------------------------------------------------------------------- // -// --------------- The main Component for the X Close Button------- ---------- // -// --------------------------------------------------------------------------- // -interface IFancyXButton { - onClick?: () => void; - themeType?: FancyXButtonDesign; - layer?: TLayer; -} -export default function FancyXButton({ onClick, themeType, layer }: IFancyXButton) { - //check wich design comes in and add the right color object uiColor or systemMessages to the button - - return ( - - x - - ); -} diff --git a/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.style.tsx b/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.style.tsx new file mode 100644 index 000000000..f05d6f0ea --- /dev/null +++ b/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.style.tsx @@ -0,0 +1,100 @@ +import { TTheme } from '@/interface/TTheme'; +import { css, styled } from 'styled-components'; + +import { textShadow } from '@/design/designFunctions/shadows/shadows'; + +// Define the gradient options for the overlay +const gradientOptions = { + start: 'rgba(0,0,0,0.4) 0%', + end: 'rgba(0,0,0,0) 40%', +}; + +// Define a styled wrapper component using styled-components +export const Wrapper = styled.div` + position: relative; + overflow: hidden; + line-height: 0; + pointer-events: none; +`; + +// Define a styled overlay component using styled-components +export const Overlay = styled.div<{ $position: string }>` + position: absolute; + width: 100%; + height: 100%; + pointer-events: none; + + ${({ $position }) => { + switch ($position) { + case 'top-left': + return css` + background: linear-gradient(135deg, ${gradientOptions.start}, ${gradientOptions.end}); + `; + case 'top-right': + return css` + background: linear-gradient(225deg, ${gradientOptions.start}, ${gradientOptions.end}); + `; + case 'center': + return css` + background: radial-gradient(ellipse 75% 50% at center, ${gradientOptions.start}, ${gradientOptions.end}); + `; + case 'bottom-left': + return css` + background: linear-gradient(45deg, ${gradientOptions.start}, ${gradientOptions.end}); + `; + case 'bottom-right': + return css` + background: linear-gradient(325deg, ${gradientOptions.start}, ${gradientOptions.end}); + `; + default: + return ''; + } + }}; +`; + +// Define a styled text wrapper component using styled-components +export const TextWrapper = styled.div<{ $position: string; theme: TTheme }>` + position: absolute; + z-index: 1; + padding: ${({ theme }) => theme.spacing.md}; + pointer-events: none; + ${textShadow.lg} + + ${({ $position }) => { + switch ($position) { + case 'top-left': + return css` + text-align: left; + top: 0; + left: 0; + `; + case 'top-right': + return css` + text-align: right; + top: 0; + right: 0; + `; + case 'center': + return css` + text-align: center; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + `; + case 'bottom-left': + return css` + text-align: left; + bottom: 0; + left: 0; + `; + case 'bottom-right': + return css` + text-align: right; + bottom: 0; + right: 0; + `; + default: + return ''; + } + }}; +`; diff --git a/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.tsx b/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.tsx index 7835e87ac..365c23eb9 100644 --- a/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.tsx +++ b/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.tsx @@ -1,104 +1,6 @@ import React from 'react'; -import { styled, css } from 'styled-components'; -import { textShadow } from '../../../design/designFunctions/shadows/shadows'; -import { TTheme } from '@/interface/TTheme'; - -// Define the gradient options for the overlay -const gradientOptions = { - start: 'rgba(0,0,0,0.4) 0%', - end: 'rgba(0,0,0,0) 40%', -}; - -// Define a styled wrapper component using styled-components -const Wrapper = styled.div` - position: relative; - overflow: hidden; - line-height: 0; - pointer-events: none; -`; - -// Define a styled overlay component using styled-components -const Overlay = styled.div<{ $position: string }>` - position: absolute; - width: 100%; - height: 100%; - pointer-events: none; - - ${({ $position }) => { - switch ($position) { - case 'top-left': - return css` - background: linear-gradient(135deg, ${gradientOptions.start}, ${gradientOptions.end}); - `; - case 'top-right': - return css` - background: linear-gradient(225deg, ${gradientOptions.start}, ${gradientOptions.end}); - `; - case 'center': - return css` - background: radial-gradient(ellipse 75% 50% at center, ${gradientOptions.start}, ${gradientOptions.end}); - `; - case 'bottom-left': - return css` - background: linear-gradient(45deg, ${gradientOptions.start}, ${gradientOptions.end}); - `; - case 'bottom-right': - return css` - background: linear-gradient(325deg, ${gradientOptions.start}, ${gradientOptions.end}); - `; - default: - return ''; - } - }}; -`; - -// Define a styled text wrapper component using styled-components -const TextWrapper = styled.div<{ $position: string; theme: TTheme }>` - position: absolute; - z-index: 1; - padding: ${({ theme }) => theme.spacing.md}; - pointer-events: none; - ${textShadow.lg} - - ${({ $position }) => { - switch ($position) { - case 'top-left': - return css` - text-align: left; - top: 0; - left: 0; - `; - case 'top-right': - return css` - text-align: right; - top: 0; - right: 0; - `; - case 'center': - return css` - text-align: center; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - `; - case 'bottom-left': - return css` - text-align: left; - bottom: 0; - left: 0; - `; - case 'bottom-right': - return css` - text-align: right; - bottom: 0; - right: 0; - `; - default: - return ''; - } - }}; -`; +import { Overlay, TextWrapper, Wrapper } from './ImageVideoOverlay.style'; // Define the possible positions for the overlay export type TPositions = 'top-left' | 'top-right' | 'center' | 'bottom-left' | 'bottom-right'; @@ -109,7 +11,6 @@ interface IImageVideoOverlay { textChildren?: React.ReactNode; position?: TPositions; } - // --------------------------------------------------------------------------- // // ----------- The Definition for the ImageVideoOverlay Component ------------ // // --------------------------------------------------------------------------- // diff --git a/src/components/atoms/InputUnderline/InputUnderline.tsx b/src/components/atoms/InputUnderline/InputUnderline.tsx index 5f8e2885f..bdbc72314 100644 --- a/src/components/atoms/InputUnderline/InputUnderline.tsx +++ b/src/components/atoms/InputUnderline/InputUnderline.tsx @@ -1,12 +1,33 @@ import React from 'react'; import { styled, css } from 'styled-components'; -import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model'; +import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; import { TThemeTypes } from '@/interface/TUiColors'; import { TLayer } from '@/interface/TLayer'; import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; import { TTheme } from '@/interface/TTheme'; +// Define the props for the FancyInputUnderline component +interface IFancyUnderline { + colorState?: 'error' | 'active' | 'default'; + isActive?: boolean; + autoWidth?: boolean; + themeType?: TThemeTypes; + layer?: TLayer; +} +// --------------------------------------------------------------------------- // +// --------- The underline for the input components with state style --------- // +// --------------------------------------------------------------------------- // +export default function FancyInputUnderline(props: IFancyUnderline) { + const { colorState = 'default', isActive, autoWidth, layer = 4, themeType } = props; + + // Render the FancyInputUnderline component with the appropriate props + return ; +} + +// ------------------------------------------- // +// ------- The style for the component ------- // +// ------------------------------------------- // // Define the styled component for the underline type IStyledUnderline = IStyledPrefixAndPicker; const UnderLine = styled.i` @@ -30,9 +51,16 @@ const UnderLine = styled.i` opacity: ${({ $isActive }) => ($isActive ? 1 : 0)}; height: 100%; background: ${({ $colorState, theme }) => { - if ($colorState === 'error') return css`linear-gradient(90deg, ${theme.colors.error[1]}, ${theme.colors.error[0]})`; - if ($colorState === 'active') return css`linear-gradient(90deg, ${theme.colors.accent[1]}, ${theme.colors.accent[0]})`; - if ($colorState === 'default') return css`linear-gradient(90deg, ${theme.colors.secondary[0]}, ${theme.colors.secondary[4]})`; + switch ($colorState) { + case 'error': + return css`linear-gradient(90deg, ${theme.colors.error[1]}, ${theme.colors.error[0]})`; + case 'active': + return css`linear-gradient(90deg, ${theme.colors.accent[1]}, ${theme.colors.accent[0]})`; + case 'default': + return css`linear-gradient(90deg, ${theme.colors.secondary[0]}, ${theme.colors.secondary[4]})`; + default: + return ''; + } }}; // Define the transition styles for the gradient overlay @@ -40,21 +68,3 @@ const UnderLine = styled.i` transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96); } `; - -// Define the props for the FancyInputUnderline component -interface IFancyUnderline { - colorState?: 'error' | 'active' | 'default'; - isActive?: boolean; - autoWidth?: boolean; - themeType?: TThemeTypes; - layer?: TLayer; -} -// --------------------------------------------------------------------------- // -// --------- The underline for the input components with state style --------- // -// --------------------------------------------------------------------------- // -export default function FancyInputUnderline(props: IFancyUnderline) { - const { colorState = 'default', isActive, autoWidth, layer = 4, themeType } = props; - - // Render the FancyInputUnderline component with the appropriate props - return ; -} diff --git a/src/components/atoms/ListDivider/ListDivider.style.tsx b/src/components/atoms/ListDivider/ListDivider.style.tsx index 49776c637..89794050f 100644 --- a/src/components/atoms/ListDivider/ListDivider.style.tsx +++ b/src/components/atoms/ListDivider/ListDivider.style.tsx @@ -1,7 +1,7 @@ import { css, styled } from 'styled-components'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; -import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; +import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; import { IListDivider } from './ListDivider.model'; import { TTheme } from '@/interface/TTheme';