18 | {shadowLevels.map((level) => (
19 |
28 | );
29 | }
30 |
31 | export default ShadowsDemo;
32 |
--------------------------------------------------------------------------------
/src/assets/icons/Close-URL.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/Info-Tooltip.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/burger-menu.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/assets/icons/caret_down.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/check.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/circle-quarters.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/close.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/close_circle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/close_simple.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/error.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/fi-rr-copy.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/fi-sr-phone-call.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/left-arrow.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/assets/icons/right-arrow.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/assets/icons/search.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/astro-env.d.ts:
--------------------------------------------------------------------------------
1 | import type { Locals } from './types/locals';
2 |
3 | declare module 'astro' {
4 | interface AstroGlobal {
5 | locals: Locals;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/tokens/ColorPreview.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { ColorPreview } from './ColorPreview';
3 |
4 | const meta: Meta
24 |
26 | ))}
27 | Sombra {level.toUpperCase()}
25 |{text}
; 9 | } 10 | 11 | export default TextContent; 12 | -------------------------------------------------------------------------------- /src/library/component/atoms/text-content/types/IProps.ts: -------------------------------------------------------------------------------- 1 | export interface IProps { 2 | spacing?: 'compact' | 'default' | 'spacious'; 3 | weight?: 'regular' | 'medium' | 'semibold'; 4 | size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; 5 | text: string; 6 | } 7 | -------------------------------------------------------------------------------- /src/library/component/atoms/text-title/TextTitle.tsx: -------------------------------------------------------------------------------- 1 | import type { IProps } from './types/IProps'; 2 | import styles from './TextTitle.module.scss'; 3 | 4 | function TextTitle({ text, size = 'lg', weight = 'regular', spacing = 'default' }: IProps) { 5 | const classNames = [styles.title, styles[size], styles[weight], styles[spacing]].join(' '); 6 | 7 | return{text}
; 8 | } 9 | 10 | export default TextTitle; 11 | -------------------------------------------------------------------------------- /src/library/component/atoms/text-title/types/IProps.ts: -------------------------------------------------------------------------------- 1 | export interface IProps { 2 | spacing?: 'compact' | 'default' | 'spacious'; 3 | weight?: 'regular' | 'medium' | 'semibold'; 4 | size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; 5 | text: string; 6 | } 7 | -------------------------------------------------------------------------------- /src/library/component/molecules/icon-text-stat/types/IProps.ts: -------------------------------------------------------------------------------- 1 | import type React from 'react'; 2 | import type { IconName } from './iconMap'; 3 | 4 | export interface IProps { 5 | title: string; 6 | mainValue: string | number; 7 | subValue?: string | number; 8 | variant?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error'; 9 | size?: 'small' | 'medium' | 'large'; 10 | border?: 'sharp' | 'soft'; 11 | icon?: IconName; 12 | description?: string; 13 | onClick?: () => void; 14 | className?: string; 15 | children?: React.ReactNode; 16 | } 17 | -------------------------------------------------------------------------------- /src/library/component/molecules/icon-text-stat/types/iconMap.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ArrowUpward, 3 | ArrowDownward, 4 | Warning, 5 | CheckCircle, 6 | Error as ErrorIcon, 7 | } from '@mui/icons-material'; 8 | import HighlightOffIcon from '@mui/icons-material/HighlightOff'; 9 | 10 | export const iconMap = { 11 | close: HighlightOffIcon, 12 | up: ArrowUpward, 13 | down: ArrowDownward, 14 | warning: Warning, 15 | success: CheckCircle, 16 | error: ErrorIcon, 17 | }; 18 | 19 | export type IconName = keyof typeof iconMap; 20 | -------------------------------------------------------------------------------- /src/library/component/molecules/phone-dropdown/types/IProps.ts: -------------------------------------------------------------------------------- 1 | export interface ICountry { 2 | code: string; 3 | name: string; 4 | flag: string; 5 | dialCode: string; 6 | } 7 | 8 | export interface IProps { 9 | label?: string; 10 | value?: string; 11 | onChange?: (countryCode: string, phoneNumber: string) => void; 12 | countries?: ICountry[]; 13 | placeholder?: string; 14 | error?: boolean; 15 | helperText?: string; 16 | disabled?: boolean; 17 | className?: string; 18 | defaultCountry?: string; 19 | size?: 'small' | 'medium' | 'large'; 20 | border?: 'rounded' | 'straight'; 21 | } 22 | -------------------------------------------------------------------------------- /src/library/component/molecules/text-arrangement/types/IProps.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; 4 | export type LayoutType = 'featured' | 'columns' | 'cards' | 'standard'; 5 | export type AlignmentType = 'left' | 'center' | 'right' | 'justified'; 6 | export type SpacingType = 'default' | 'compact' | 'spacious'; 7 | 8 | export interface ContentType { 9 | title: string; 10 | text: string; 11 | } 12 | 13 | export interface IProps { 14 | titleSize?: SizeType; 15 | layout?: LayoutType; 16 | alignment?: AlignmentType; 17 | titleSpacing?: SpacingType; 18 | contentSpacing?: SpacingType; 19 | contentSize?: SizeType; 20 | showBadge?: boolean; 21 | content: ContentType; 22 | responsive?: boolean; 23 | className?: string; 24 | children?: React.ReactNode; 25 | } 26 | -------------------------------------------------------------------------------- /src/library/component/molecules/user-text-card/types/IProps.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from 'react'; 2 | 3 | export interface IProps { 4 | avatar: string | ReactNode; 5 | userName: string; 6 | userHandle?: string; 7 | content: string | ReactNode; 8 | timestamp?: string | Date; 9 | actions?: { label: string; onClick: () => void }[]; 10 | variant?: 'default' | 'compact' | 'expanded'; 11 | isVerified?: boolean; 12 | onClick: () => void; 13 | className?: string; 14 | isChecked: boolean; 15 | onCheckChange?: (checked: boolean) => void; 16 | } 17 | -------------------------------------------------------------------------------- /src/middleware/auth.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-unresolved 2 | import { defineMiddleware } from 'astro:middleware'; 3 | 4 | export const auth = defineMiddleware((context, next) => { 5 | return next(); 6 | }); 7 | -------------------------------------------------------------------------------- /src/middleware/errors.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-unresolved 2 | import { defineMiddleware } from 'astro:middleware'; 3 | import type { Config } from '../types/config'; 4 | 5 | export const errors = defineMiddleware(async (context, next) => { 6 | const defineErrorPages: Config = { 7 | path: '/errors', 8 | }; 9 | const { redirect } = context; 10 | const errorMapping: RecordOPENSCIENCE V 0.1.2
13 |{variant}
; 8 | } 9 | 10 | export default AuthorLabel; 11 | -------------------------------------------------------------------------------- /src/ui/components/atoms/Author-Label/types/IProps.ts: -------------------------------------------------------------------------------- 1 | export interface IProps { 2 | variant?: string; 3 | } 4 | -------------------------------------------------------------------------------- /src/ui/components/atoms/Default-Input/types/DefaultInputProps.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export interface DefaultInputProps extends React.InputHTMLAttributes
18 |
20 | );
21 | }
22 |
23 | export default ArticleDescription;
24 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/article-description/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children?: React.ReactNode;
5 | article: string;
6 | variant?: 'default' | 'bold' | 'italic' | 'underline' | 'highlight';
7 | }
8 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/article-title/ArticleTitle.tsx:
--------------------------------------------------------------------------------
1 | import styles from './ArticleTitle.module.scss';
2 | import type { IProps } from './types/IProps';
3 |
4 | function ArticleTitle({ title, variant }: IProps) {
5 | const getTextStyle = () => {
6 | if (variant === 'primary') {
7 | return styles['article-title__text--primary'];
8 | }
9 | if (variant === 'secondary') {
10 | return styles['article-title__text--secondary'];
11 | }
12 | return '';
13 | };
14 |
15 | const textStyle = getTextStyle();
16 | return (
17 | {article}
19 |
18 |
20 | );
21 | }
22 |
23 | export default ArticleTitle;
24 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/article-title/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | title: string;
3 | variant?: 'default' | 'primary' | 'secondary';
4 | }
5 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/badges/Icon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CircleQuarters from '../../../../assets/icons/circle-quarters.svg?react';
3 | import Close from '../../../../assets/icons/Close-URL.svg?react';
4 |
5 | interface IconProps {
6 | className?: string;
7 | style?: React.CSSProperties;
8 | }
9 |
10 | export function IconCircleQuarters({ className, style }: IconProps) {
11 | return {title}
19 |
10 | {icon && (
11 |
19 | );
20 | }
21 |
22 | export default ButtonLabel;
23 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/button-label/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | variant?: 'primary' | 'secondary' | 'tertiary';
6 | icon?: string;
7 | }
8 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/button-number/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | variant?: 'filled' | 'outline' | 'ghost';
6 | shape?: 'square' | 'rounded' | 'circle';
7 | size?: 'small' | 'medium' | 'large';
8 | inactive?: boolean;
9 | selected?: boolean;
10 | }
11 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/button-with-variants/ButtonWithVariants.tsx:
--------------------------------------------------------------------------------
1 | import styles from './ButtonWithVariants.module.scss';
2 | import type { IProps } from './types/IProps';
3 |
4 | function ButtonWithVariants({ children, variant = 'primary', onClick }: IProps) {
5 | const variantClass = styles[`button-variant--${variant}`];
6 | return (
7 |
10 | );
11 | }
12 |
13 | export default ButtonWithVariants;
14 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/button-with-variants/types/IProps.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | variant?: 'primary' | 'secondary' | 'tertiary';
6 | onClick?: () => void;
7 | }
8 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/button-year/ButtonYear.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import ButtonYear from './ButtonYear';
3 |
4 | const meta = {
5 | title: 'ui/components/atoms/button-year',
6 | component: ButtonYear,
7 | argTypes: {
8 | onClick: {
9 | action: 'click',
10 | },
11 | variant: {
12 | control: 'select',
13 | },
14 | },
15 | } as Meta; 9 | } 10 | 11 | export default Divider; 12 | -------------------------------------------------------------------------------- /src/ui/components/atoms/divider/types/IProps.ts: -------------------------------------------------------------------------------- 1 | export interface IProps { 2 | variant: 'solid' | 'dotted' | 'dashed'; 3 | } 4 | -------------------------------------------------------------------------------- /src/ui/components/atoms/error-message/ErrorMessage.tsx: -------------------------------------------------------------------------------- 1 | import styles from './ErrorMessage.module.scss'; 2 | import type { IProps } from './types/IProps'; 3 | 4 | function ErrorMessage(props: IProps) { 5 | const { code, title, message, redirectTo, linkText, messageinit, messagefinish } = props; 6 | const isServerError = code === 500; 7 | 8 | return ( 9 |
10 |
21 | );
22 | }
23 |
24 | export default ErrorMessage;
25 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/error-message/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | code: number;
3 | title: string;
4 | message: string;
5 | redirectTo: string;
6 | linkText?: string;
7 | messageinit?: string;
8 | messagefinish?: string;
9 | }
10 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/hero-banner/HeroBanner.tsx:
--------------------------------------------------------------------------------
1 | import styles from './HeroBanner.module.scss';
2 | import type { IProps } from './types/IProps';
3 |
4 | function HeroBanner({ backgroundImage, alt, children, className }: IProps) {
5 | return (
6 | {code}
11 |{title}
12 |{message}
13 |14 | {messageinit} 15 | 16 | {linkText} 17 | 18 | {messagefinish} 19 |
20 |
7 | 
8 |
12 | );
13 | }
14 |
15 | export default HeroBanner;
16 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/hero-banner/__mock__/imgs/Rectangle10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ditmar/OpenScience/f659c7b51d989fcf64d754bfa76615a642856447/src/ui/components/atoms/hero-banner/__mock__/imgs/Rectangle10.png
--------------------------------------------------------------------------------
/src/ui/components/atoms/hero-banner/__mock__/imgs/Rectangle11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ditmar/OpenScience/f659c7b51d989fcf64d754bfa76615a642856447/src/ui/components/atoms/hero-banner/__mock__/imgs/Rectangle11.png
--------------------------------------------------------------------------------
/src/ui/components/atoms/hero-banner/__mock__/imgs/Rectangle12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ditmar/OpenScience/f659c7b51d989fcf64d754bfa76615a642856447/src/ui/components/atoms/hero-banner/__mock__/imgs/Rectangle12.png
--------------------------------------------------------------------------------
/src/ui/components/atoms/hero-banner/__mock__/imgs/Rectangle17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ditmar/OpenScience/f659c7b51d989fcf64d754bfa76615a642856447/src/ui/components/atoms/hero-banner/__mock__/imgs/Rectangle17.png
--------------------------------------------------------------------------------
/src/ui/components/atoms/hero-banner/__mock__/imgs/Rectangle6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ditmar/OpenScience/f659c7b51d989fcf64d754bfa76615a642856447/src/ui/components/atoms/hero-banner/__mock__/imgs/Rectangle6.png
--------------------------------------------------------------------------------
/src/ui/components/atoms/hero-banner/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | backgroundImage: string;
5 | alt?: string;
6 | children: React.ReactNode;
7 | className: string;
8 | }
9 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/icon-button/IconButton.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../globals/variables';
2 | @import '../../../../globals/mixins';
3 |
4 | .button__share {
5 | background: $ads-primary-main;
6 | border: none;
7 | height: 2.8rem;
8 | padding: 0.1rem;
9 | width: 3rem;
10 |
11 | @include respond-to('small') {
12 | height: 2rem;
13 | width: 2rem;
14 | }
15 |
16 | @include respond-to('medium') {
17 | height: 3rem;
18 | width: 2.5rem;
19 | }
20 |
21 | @include respond-to('large') {
22 | height: 4rem;
23 | width: 4rem;
24 | }
25 |
26 | @include respond-to('extra-large') {
27 | height: 6rem;
28 | width: 5.2rem;
29 | }
30 | }
31 |
32 | .button__icons svg {
33 | display: flexbox;
34 | height: 80%;
35 | width: 80%;
36 | }
37 |
38 | .button__share:hover {
39 | background: $ads-secondary-main;
40 | }
41 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/icon-button/IconButton.tsx:
--------------------------------------------------------------------------------
1 | import './IconButton.scss';
2 | import type { IProps } from './types/IProps';
3 | import { Icon } from '../../../utils/svg-icons/icons';
4 |
5 | function IconButton(props: IProps) {
6 | const { icon, color } = props;
7 | const colorFont = `logo--${color as string}`;
8 | return (
9 |
12 | );
13 | }
14 | export default IconButton;
15 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/icon-button/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children?: React.ReactNode;
5 | variant?: string;
6 | icon?: string;
7 | color?: 'primary' | 'secondary';
8 | onClick?: () => void;
9 | }
10 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/icon-upload/IconUpload.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj } from '@storybook/react';
2 | import IconUpload from './IconUpload';
3 | import icon_upload_default from '../../../../assets/icons/icon-upload-default.svg?raw';
4 | import icon_upload_primary from '../../../../assets/icons/icon-upload-primary.svg?raw';
5 |
6 | const meta = {
7 | title: 'ui/components/atoms/icon-upload',
8 | component: IconUpload,
9 | argTypes: {
10 | onClick: {
11 | action: 'click',
12 | },
13 | },
14 | };
15 |
16 | export default meta;
17 |
18 | type Story = StoryObj
9 |
11 | {children}
10 | 15 | {formattedDate} 16 |
17 | ); 18 | } 19 | 20 | export default LabelDate; 21 | -------------------------------------------------------------------------------- /src/ui/components/atoms/label-date/types/IProps.ts: -------------------------------------------------------------------------------- 1 | export interface IProps { 2 | date: Date; 3 | overflow?: boolean; 4 | } 5 | -------------------------------------------------------------------------------- /src/ui/components/atoms/label-date/utils/dateFormatter.ts: -------------------------------------------------------------------------------- 1 | export const formatDate = (date: Date): string => { 2 | const month = date.toLocaleString('es-ES', { month: 'long' }); 3 | const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1); 4 | const day = date.getDate().toString(); 5 | const year = date.getFullYear().toString(); 6 | return `${capitalizedMonth} ${day} | ${year}`; 7 | }; 8 | -------------------------------------------------------------------------------- /src/ui/components/atoms/label-featured-articles/types/IProps.ts: -------------------------------------------------------------------------------- 1 | export interface IProps { 2 | text?: string; 3 | ColorVariant?: 'main' | 'primary' | 'secondary'; 4 | } 5 | -------------------------------------------------------------------------------- /src/ui/components/atoms/label-recent-articles/LabelRecentsArticles.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../globals/variables'; 2 | @import '../../../../globals/mixins'; 3 | 4 | .label-recents-articles { 5 | background-color: $ads-background-main; 6 | display: inline-block; 7 | font-family: Montserrat, sans-serif; 8 | font-size: 1.875rem; 9 | font-weight: $ads-font-weight-second; 10 | padding: 0.625rem 1.25rem; 11 | 12 | &--primary { 13 | color: $ads-secondary-main; 14 | } 15 | 16 | &--secondary { 17 | color: $ads-primary-main; 18 | } 19 | 20 | @include respond-to('small') { 21 | font-size: 1.5rem; 22 | padding: 0.5rem 1rem; 23 | } 24 | 25 | @include respond-to('medium') { 26 | font-size: 1.75rem; 27 | padding: 0.625rem 1.25rem; 28 | } 29 | 30 | @include respond-to('large') { 31 | font-size: 1.875rem; 32 | padding: 0.625rem 1.25rem; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/ui/components/atoms/label-recent-articles/LabelRecentsArticles.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react'; 2 | import '../../../../globals/_variables.scss'; 3 | import LabelRecentsArticles from './LabelRecentsArticles'; 4 | 5 | const meta: Meta
10 | {text}
11 |
12 | );
13 | }
14 |
15 | export default LabelRecentsArticles;
16 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-recent-articles/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | text?: string;
3 | color?: 'primary' | 'secondary' | 'tertiary';
4 | }
5 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-ref/LabelRef.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import LabelRef from './LabelRef';
3 |
4 | describe('Testing LabelRef React Component', () => {
5 | test('should render with default text', () => {
6 | render(
9 |
12 | );
13 | }
14 |
15 | export default LabelRef;
16 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-ref/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | variant: 'default' | 'secondary';
6 | }
7 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-references/LabelReferences.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import LabelReferences from './LabelReferences';
3 | import '../../../../globals/_variables.scss';
4 |
5 | const meta: MetaR
10 |{children}
11 |
13 | {text}
14 |
15 | );
16 | }
17 |
18 | export default LabelReferences;
19 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-references/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | text?: string;
3 | colorVariant?: 'primary' | 'main';
4 | }
5 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-resources-page/LabelResourcesPage.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import LabelResourcesPage from './LabelResourcesPage';
3 |
4 | const meta: Meta
9 | {text}
10 |
11 | );
12 | }
13 |
14 | export default LabelResourcesPage;
15 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-resources-page/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | text?: string;
3 | }
4 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-share/Share.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import Share from './Share';
3 | import '../../../../globals/_variables.scss';
4 | import share from '../../../../assets/icons/share.svg?raw';
5 |
6 | const meta: Meta
11 | {icon &&
14 | );
15 | }
16 |
17 | export default Share;
18 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-share/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | text?: string;
3 | colorVariant?: 'primary' | 'main';
4 | icon: string;
5 | }
6 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-variables/Variables.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import Variables from './Variables';
3 | import '../../../../globals/_variables.scss';
4 |
5 | const meta: Meta
15 | {href ? (
16 |
17 | {text}
18 |
19 | ) : (
20 | {text}
21 | )}
22 |
23 | );
24 | }
25 |
26 | export default Variables;
27 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-variables/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | text?: string;
3 | colorVariant?: 'primary' | 'main' | 'secondary';
4 | href?: string;
5 | }
6 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-vol/LabelVol.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../globals/breakpoints';
2 | @import '../../../../globals/mixins';
3 | @import '../../../../globals/variables';
4 |
5 | .volumen {
6 | color: $ads-text-main;
7 | font-family: Arial, Helvetica, sans-serif;
8 | font-size: $ads-size-main;
9 | font-weight: $ads-font-weight;
10 | width: fit-content;
11 |
12 | &:hover {
13 | color: $ads-text-main-hover;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-vol/LabelVol.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import Volumen from './LabelVol';
3 |
4 | const meta: Meta8 | {volumen} {id} 9 |
10 | ); 11 | } 12 | export default Volumen; 13 | -------------------------------------------------------------------------------- /src/ui/components/atoms/label-vol/types/IProps.ts: -------------------------------------------------------------------------------- 1 | export interface IProps { 2 | volumen: string; 3 | id: number; 4 | } 5 | -------------------------------------------------------------------------------- /src/ui/components/atoms/label-volumes/LabelVolumes.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react'; 2 | import '../../../../globals/_variables.scss'; 3 | import LabelVolumes from './LabelVolumes'; 4 | 5 | const meta: Meta
13 | {text}
14 |
15 | );
16 | }
17 |
18 | export default LabelVolumes;
19 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/label-volumes/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | text?: string;
3 | color?: 'primary' | 'secondary' | 'tertiary';
4 | }
5 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/logo-footer/LogoFooter.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../globals/variables';
2 | @import '../../../../globals/mixins';
3 |
4 | .logo-icon svg {
5 | height: 4.5rem;
6 | width: 11.875rem;
7 | }
8 |
9 | .logo {
10 | display: grid;
11 | height: 4.5rem;
12 | width: 11.875rem;
13 |
14 | &.primary {
15 | background-color: $ads-tertiary-main;
16 | }
17 |
18 | &.secondary {
19 | background-color: $ads-background-main;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/logo-footer/LogoFooter.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import '../../../../globals/_variables.scss';
3 | import logo from '../../../../assets/icons/logo.svg?raw';
4 | import LogoFooter from './LogoFooter';
5 |
6 | const meta: Meta
11 | {icon &&
13 | );
14 | }
15 |
16 | export default LogoFooter;
17 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/logo-footer/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | icon?: string;
3 | color?: 'primary' | 'secondary';
4 | }
5 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/logo/logo.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import Logo from './logo';
3 | import '../../../../globals/_variables.scss';
4 | import image from '../../../../assets/icons/logo.svg';
5 |
6 | const logoImage = image as unknown as string;
7 |
8 | const meta: Meta
11 | 
12 |
13 |
14 |
9 |
13 |
14 | );
15 | }
16 | export default Button;
17 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/navbar/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | icon?: string;
6 | }
7 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/ol-bullet/OLBullet.tsx:
--------------------------------------------------------------------------------
1 | import styles from './OLBullet.module.scss';
2 | import type { IProps } from './types/IProps';
3 |
4 | function OLBullet(props: IProps) {
5 | const { shape = 'square', size = 'md', active = false } = props;
6 |
7 | const bulletClass = `
8 | ${styles['ol-bullet']}
9 | ${styles[`ol-bullet--${shape}`]}
10 | ${styles[`ol-bullet--${size}`]}
11 | ${active ? styles['ol-bullet--active'] : ''}
12 | `.trim();
13 |
14 | return ;
15 | }
16 |
17 | export default OLBullet;
18 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/ol-bullet/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | shape?: 'square' | 'rounded' | 'circle';
3 | size?: 'sm' | 'md' | 'lg';
4 | active?: boolean;
5 | }
6 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/ol-item/OLItem.tsx:
--------------------------------------------------------------------------------
1 | import styles from './OLItem.module.scss';
2 | import type { OLItemProps } from './types/IProps';
3 |
4 | function OLItem({ value, shape = 'square', size = 'md', active = false }: OLItemProps) {
5 | const olItemClass = `
6 | ${styles['ol-item']}
7 | ${styles[`ol-item--${shape}`]}
8 | ${styles[`ol-item--${size}`]}
9 | ${active ? styles['ol-item--active'] : ''}
10 | `.trim();
11 |
12 | return (
13 |
14 | {value}
15 |
16 | );
17 | }
18 |
19 | export default OLItem;
20 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/ol-item/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface OLItemProps {
2 | value: number | string;
3 | shape?: 'square' | 'rounded' | 'circle';
4 | size?: 'sm' | 'md' | 'lg';
5 | active?: boolean;
6 | }
7 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/phone-input/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | value: string;
3 | onChange: (value: string) => void;
4 | placeholder?: string;
5 | label?: string;
6 | variant?: 'default' | 'focus' | 'error' | 'disabled';
7 | size?: 'small' | 'medium' | 'large';
8 | borderRadius?: 'none' | 'small' | 'full';
9 | showCloseIcon?: boolean;
10 | onCloseClick?: () => void;
11 | onCopyClick?: () => void;
12 | showHintText?: boolean;
13 | hintText?: string;
14 | className?: string;
15 |
16 | // Nuevo: Código de país
17 | countryCode?: string; // Ej: "+591"
18 | onCountryChange?: (code: string) => void;
19 | }
20 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/phone-input/types/countryCodes.ts:
--------------------------------------------------------------------------------
1 | export const countryCodes = [
2 | { code: '+1', name: 'Estados Unidos' },
3 | { code: '+54', name: 'Argentina' },
4 | { code: '+55', name: 'Brasil' },
5 | { code: '+591', name: 'Bolivia' },
6 | { code: '+34', name: 'España' },
7 | ];
8 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/points-divider/PointsDivider.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './PointsDivider.module.scss';
3 | import type { DividerProps } from './types/IProps';
4 |
5 | function PointsDivider(props: DividerProps) {
6 | const { color = 'primary', size = 'small', variant = 'solid' } = props;
7 |
8 | return (
9 |
14 | {variant === 'points' && (
15 | <>
16 |
17 |
18 |
19 |
20 | )}
21 |
22 | );
23 | }
24 |
25 | export default PointsDivider;
26 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/points-divider/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface DividerProps {
2 | color?: 'primary' | 'secondary' | 'tertiary';
3 | size?: 'small' | 'medium' | 'large';
4 | variant?: 'solid-line' | 'segmented-line' | 'points';
5 | }
6 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/primary-buttons/PrimaryButtons.tsx:
--------------------------------------------------------------------------------
1 | import styles from './PrimaryButtons.module.scss';
2 | import type { IProps } from './types/IProps';
3 |
4 | function PrimaryButtons(props: IProps) {
5 | const { children, variant, onClick } = props;
6 | const buttonClass = `${styles['buttons-primary__button']} ${
7 | styles[`buttons-primary__button--${variant}`]
8 | }`;
9 | const labelClass = styles['buttons-primary__label'];
10 | return (
11 |
12 |
15 |
16 | );
17 | }
18 | export default PrimaryButtons;
19 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/primary-buttons/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | variant: 'primary' | 'secondary' | 'tertiary';
6 | onClick?: () => void;
7 | }
8 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/publish-button/PublishButton.tsx:
--------------------------------------------------------------------------------
1 | import styles from './PublishButton.module.scss';
2 | import type { IProps } from './types/IProps';
3 |
4 | function PublishButton(props: IProps) {
5 | const { children, variant, onClick } = props;
6 | return (
7 |
8 |
16 |
17 | );
18 | }
19 | export default PublishButton;
20 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/publish-button/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | variant: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
6 | onClick?: () => void;
7 | }
8 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/reference-information/Reference.test.jsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import ReferenceAPA from './Reference.tsx';
3 |
4 | describe('Testing ReferenceAPA React Component', () => {
5 | test('should render with correct reference', () => {
6 | const referenceText =
7 | '1 A. Gessain, E. Nakoune, Y. Yazdanpanah, Monkeypox. N. Engl. J. Med. 387, 1783–1793 (2022)';
8 | render(
10 | 
11 |
16 | );
17 | }
18 |
19 | export default Thumbnail;
20 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle27.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ditmar/OpenScience/f659c7b51d989fcf64d754bfa76615a642856447/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle27.png
--------------------------------------------------------------------------------
/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle28.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ditmar/OpenScience/f659c7b51d989fcf64d754bfa76615a642856447/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle28.png
--------------------------------------------------------------------------------
/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle29.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ditmar/OpenScience/f659c7b51d989fcf64d754bfa76615a642856447/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle29.png
--------------------------------------------------------------------------------
/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle30.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ditmar/OpenScience/f659c7b51d989fcf64d754bfa76615a642856447/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle30.png
--------------------------------------------------------------------------------
/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle31.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ditmar/OpenScience/f659c7b51d989fcf64d754bfa76615a642856447/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle31.png
--------------------------------------------------------------------------------
/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ditmar/OpenScience/f659c7b51d989fcf64d754bfa76615a642856447/src/ui/components/atoms/thumbnail/__mock__/imgs/Rectangle32.png
--------------------------------------------------------------------------------
/src/ui/components/atoms/thumbnail/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | pathImage: string;
3 | alt?: string;
4 | }
5 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/typography-paragraph/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | text?: string;
3 | size?: 'extra-small' | 'small' | 'medium-size' | 'large' | 'extra-large';
4 | weight?: 'light' | 'regular' | 'medium' | 'semi-bold' | 'bold';
5 | color?: 'dark' | 'white';
6 | textDecoration?: 'none-line' | 'underline' | 'line-through';
7 | italic?: boolean;
8 | }
9 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/url-input/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | value: string;
3 | onChange: (value: string) => void;
4 | placeholder?: string;
5 | label?: string;
6 | variant?: 'default' | 'focus' | 'error' | 'disabled';
7 | size?: 'small' | 'medium' | 'large';
8 | borderRadius?: 'none' | 'small' | 'full';
9 | showCloseIcon?: boolean;
10 | onCloseClick?: () => void;
11 | onCopyClick?: () => void;
12 | showHintText?: boolean;
13 | hintText?: string;
14 | className?: string;
15 | }
16 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/variable-button/VariableButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './variableButton.module.scss';
3 | import type { IProps } from './types/IProps';
4 | import { Icon } from '../../../utils/svg-icons/icons';
5 |
6 | function VariableButton(props: IProps) {
7 | const { icon, onClick } = props;
8 | return (
9 |
12 | );
13 | }
14 |
15 | export default VariableButton;
16 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/variable-button/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children?: React.ReactNode;
5 | icon?: string;
6 | onClick?: () => void;
7 | }
8 |
--------------------------------------------------------------------------------
/src/ui/components/atoms/variable-button/variableButton.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import VariableButton from './VariableButton';
3 | import PdfIcon from '../../../../assets/icons/pdf.svg?raw';
4 | import LinkIcon from '../../../../assets/icons/share.svg?raw';
5 |
6 | const meta = {
7 | title: 'ui/components/atoms/variable-button',
8 | component: VariableButton,
9 | argTypes: {
10 | onClick: {
11 | action: 'click',
12 | },
13 | },
14 | } as Meta
12 | {' '}
13 | {/* Contenido del overlay */}
14 |
15 |
15 |
20 | );
21 | }
22 |
23 | export default LoginPage;
24 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/LoginPage/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | icon?: string | null;
3 | color?: 'primary' | 'secondary';
4 | onClick?: () => void;
5 | }
6 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/article-publish/ArticlePublish.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../globals/variables';
2 | @import '../../../../globals/mixins';
3 |
4 | .article-publish {
5 | align-items: center;
6 | display: flex;
7 | flex-direction: column;
8 | justify-content: center;
9 | text-align: center;
10 | }
11 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/article-publish/ArticlePublish.tsx:
--------------------------------------------------------------------------------
1 | import type { IProps } from './types/IProps';
2 | import styles from './ArticlePublish.module.scss';
3 |
4 | function ArticlePublish(props: IProps) {
5 | const { children } = props;
6 |
7 | return
17 | INICIAR
18 |
19 | {children}
;
8 | }
9 |
10 | export default ArticlePublish;
11 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/article-publish/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | }
6 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/article/Article.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import Article from './Article';
3 |
4 | const meta: Meta{children}
;
7 | }
8 |
9 | export default FeaturedArticle;
10 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/featured-article/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | onClick?: () => void;
6 | text?: string;
7 | icon?: string;
8 | size?: 'small' | 'medium' | 'large';
9 | variant: 'default' | 'primary' | 'secondary ' | 'solid-line' | 'points' | 'main';
10 | color?: 'primary' | 'secondary' | 'tertiary';
11 | ColorVariant?: 'main' | 'primary' | 'secondary';
12 | article: string;
13 | date: Date;
14 | }
15 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/footer-variables/FooterVariables.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import FooterVariables from './FooterVariables';
3 | import '../../../../globals/_variables.scss';
4 |
5 | const meta: Meta
9 | {children}
10 |
13 |
14 | {children1} 15 | 18 |
19 | );
20 | }
21 | export default Location;
22 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/location-variable/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | icon?: string;
5 | icon1?: string;
6 | children: React.ReactNode;
7 | children1: React.ReactNode;
8 | variant: 'solid' | 'dotted' | 'dashed';
9 | }
10 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/login-register-buttons/LoginRegisterButton.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../globals/variables';
2 | @import '../../../../globals/mixins';
3 |
4 | .auth-buttons {
5 | display: flex;
6 | gap: 1rem;
7 | }
8 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/login-register-buttons/LoginRegisterButton.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import LoginRegisterButtons from './LoginRegisterButtons';
3 | import PrimaryButtons from '../../atoms/primary-buttons/PrimaryButtons';
4 |
5 | describe('LoginRegisterButtons Component', () => {
6 | test('should render both buttons', () => {
7 | render(
8 | 14 | {children1} 15 | 18 |
{children}
;
7 | }
8 |
9 | export default LoginRegisterButtons;
10 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/login-register-buttons/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | onClick?: () => void;
6 | }
7 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/magnifying-glass/MagnifyingGlass.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import '../../../../globals/_variables.scss';
3 | import magnifyingglass from '../../../../assets/icons/magnifyingglass.svg?raw';
4 | import MagnifyingGlass from './MagnifyingGlass';
5 |
6 | const meta = {
7 | title: 'ui/components/molecules/magnifying-glass',
8 | component: MagnifyingGlass,
9 | argTypes: {
10 | onClick: {
11 | action: 'click',
12 | },
13 | variant: {
14 | control: { type: 'select' },
15 | options: ['solid', 'dotted', 'dashed'],
16 | },
17 | },
18 | } as Meta
10 |
13 |
14 | );
15 | }
16 | export default MagnifyingGlass;
17 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/magnifying-glass/style.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../globals/variables';
2 | @import '../../../../globals/mixins';
3 | @import '../../../../globals/fonts';
4 |
5 | .glass {
6 | align-items: center;
7 | display: flex;
8 | flex-direction: column;
9 | justify-content: center;
10 | }
11 |
12 | .disguise {
13 | background-color: transparent;
14 | border: none;
15 | margin-left: 94%;
16 | margin-top: -0.4rem;
17 | }
18 |
19 | .button__icons--glass svg {
20 | height: 1.125rem;
21 | width: 1.125rem;
22 |
23 | @include respond-to('medium') {
24 | height: 2rem;
25 | width: 2rem;
26 | }
27 |
28 | @include respond-to('extra-large') {
29 | height: 2rem;
30 | width: 2rem;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/magnifying-glass/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children?: React.ReactNode;
5 | icon: string;
6 | variant: 'solid' | 'dotted' | 'dashed';
7 | onClick?: () => void;
8 | }
9 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/network-login/network-login.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import logo from '../../../../assets/icons/logo.svg?raw';
3 | import NetworkLogin from './network-login';
4 |
5 | const meta: Meta
12 |
23 | );
24 | }
25 |
26 | export default RecentArticlesImage;
27 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/recent-articles-image/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | onClick?: () => void;
6 | text?: string;
7 | icon?: string;
8 | size?: 'small' | 'medium' | 'large';
9 | variant: 'default' | 'primary' | 'secondary ' | 'solid-line' | 'points' | 'main';
10 | color?: 'primary' | 'secondary' | 'tertiary';
11 | ColorVariant?: 'main' | 'primary' | 'secondary';
12 | article: string;
13 | date: Date;
14 | pathImage: string;
15 | }
16 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/references/References.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../globals/variables';
2 | @import '../../../../globals/mixins';
3 |
4 | .references {
5 | background-color: $ads-background-desktop;
6 |
7 | a {
8 | color: $ads-text-main-hover;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/references/References.tsx:
--------------------------------------------------------------------------------
1 | import type { IProps } from './types/IProps';
2 | import './References.scss';
3 |
4 | function References(props: IProps) {
5 | const { children } = props;
6 |
7 | return {children}
13 |
14 |
22 | {children}
;
8 | }
9 |
10 | export default References;
11 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/references/types/IProps.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | }
6 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/side-panel/mobile-side-pandel/MSPanel.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import MSPanel from './MSPanel';
3 |
4 | const meta: Meta
16 |
19 | );
20 | }
21 |
22 | export default SPanel;
23 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/side-panel/panel/types/IProps.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | icon?: string | null;
3 | color?: 'primary' | 'secondary';
4 | onClick?: () => void;
5 | }
6 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/volume-box/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | className?: string;
6 | }
7 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/volume-carousel/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface IProps {
4 | children: React.ReactNode;
5 | rightIcon?: string;
6 | leftIcon?: string;
7 | }
8 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/volume-list/VolumeList.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import VolumeList from './VolumeList';
3 |
4 | const meta: Meta
10 |
14 | );
15 | }
16 |
17 | export default Volume;
18 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/volume/types/IProps.ts:
--------------------------------------------------------------------------------
1 | import type { IProps as IThumbnailProps } from 'ui/components/atoms/thumbnail/types/IProps';
2 | import type { IProps as ILabelVolProps } from 'ui/components/atoms/label-vol/types/IProps';
3 | import type { IProps as ILabelDateProps } from 'ui/components/atoms/label-date/types/IProps';
4 |
5 | export interface IProps extends IThumbnailProps, ILabelVolProps, ILabelDateProps {}
6 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/year-list/YearList.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../globals/variables';
2 | @import '../../../../globals/mixins';
3 |
4 | .year-list__wrapper {
5 | display: flex;
6 | flex-direction: column;
7 | justify-content: center;
8 | }
9 |
10 | @include respond-to('medium') {
11 | .year-list__wrapper {
12 | align-items: center;
13 | }
14 | }
15 |
16 | .year-list__container {
17 | display: grid;
18 | grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
19 | margin-top: 1rem;
20 | place-items: center center;
21 | width: 100%;
22 | }
23 |
24 | .year-list__hidden {
25 | display: none;
26 | }
27 |
28 | @include respond-to('medium') {
29 | .year-list__container {
30 | grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/ui/components/molecules/year-list/YearList.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import YearList from './YearList';
3 | import dataMock from './__mock__/datamock.json';
4 |
5 | const meta: Meta
25 |
27 | ),
28 | ],
29 | };
30 |
--------------------------------------------------------------------------------
/src/ui/components/organisms/homepage/HomePage.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { StoryObj, Meta } from '@storybook/react';
2 | import HomePage from './HomePage';
3 |
4 | const meta: Meta
10 | {DynamicComponent ? (
11 | // eslint-disable-next-line react/jsx-props-no-spreading
12 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/ui/utils/vite-svgr/Loader.tsx:
--------------------------------------------------------------------------------
1 | import { Box, CircularProgress } from '@mui/material';
2 | import ThemeWrapper from '../../../style-library/core/ThemeProvider';
3 |
4 | export function Loader() {
5 | return (
6 |