@20minutes/hela 0.1.32 → 0.1.34

package/dist/components/atoms/Skeleton/Skeleton.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+import { FlexProps } from '../../../components';
+export interface SkeletonProps extends FlexProps {
     variant: 'button' | 'icon' | 'connexion';
 }
 export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/components/atoms/Typography/Heading/Heading.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { HeadingSizeType, TypeWithMediaQueriesType } from '../../../../types';
+import { TypographyProps } from '../Typography';
+export declare type HeadingProps<C extends React.ElementType = 'h1'> = TypographyProps<C> & {
+    size?: HeadingSizeType | TypeWithMediaQueriesType<HeadingSizeType>;
+};
+export declare const Heading: <C extends React.ElementType<any> = "h1">({ as, size, children, ...typographyProps }: HeadingProps<C>) => React.ReactElement<any, any> | null;

package/dist/components/atoms/Typography/Heading/index.d.ts

@@ -0,0 +1 @@
+export * from './Heading';

package/dist/components/atoms/Typography/Text/Text.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextSizeType, TypeWithMediaQueriesType } from '../../../../types';
+import { TypographyProps } from '../Typography';
+export declare type TextProps<C extends React.ElementType = 'p'> = TypographyProps<C> & {
+    size?: TextSizeType | TypeWithMediaQueriesType<TextSizeType>;
+};
+export declare const Text: <C extends React.ElementType<any> = "p">({ as, size, children, ...typographyProps }: TextProps<C>) => React.ReactElement<any, any> | null;

package/dist/components/atoms/Typography/Text/index.d.ts

@@ -0,0 +1 @@
+export * from './Text';

package/dist/components/atoms/Typography/Typography.d.ts

@@ -1,8 +1,5 @@
-import * as React from 'react';
-import { ColorSchemeTheme } from '../../../types';
-export interface TypographyProps<HTMLElementType> extends React.HTMLAttributes<Partial<HTMLElementType>> {
-    as?: keyof HTMLElementType;
-    color?: ColorSchemeTheme;
-    children?: React.ReactNode;
-}
-export declare const Typography: React.FC<TypographyProps<JSX.IntrinsicElements>>;
+import React from 'react';
+import { BoxProps } from '../../../components';
+import type { TypographySystemProps } from '../../../types';
+export declare type TypographyProps<C extends React.ElementType = 'p'> = BoxProps<C> & TypographySystemProps;
+export declare const Typography: <C extends React.ElementType<any>>({ as, children, ...boxProps }: TypographyProps<C>) => React.ReactElement<any, any> | null;

package/dist/components/molecules/Card/CardExtraLarge/CardExtraLarge.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { CardHeaderProps, SignatureProps, SocialBarProps } from '../../../../components';
+import { CardHeaderProps, FlexProps, SignatureProps, SocialBarProps } from '../../../../components';
 import { LayoutType } from '../../../../types';
-export interface CardExtraLargeProps {
+export interface CardExtraLargeProps extends FlexProps {
     link: string;
     cardHeaderProps: CardHeaderProps;
     title: string;

package/dist/components/molecules/Card/CardExtraSmall/CardExtraSmall.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { CardHeaderProps, SocialBarProps } from '../../../../components';
-export interface CardExtraSmallProps {
+import { CardHeaderProps, FlexProps, SocialBarProps } from '../../../../components';
+export interface CardExtraSmallProps extends FlexProps {
     link: string;
     cardHeaderProps: CardHeaderProps;
     title: string;

package/dist/components/molecules/Card/CardHeader/CardHeader.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ColorType } from '../../../../types';
-import { BoxProps } from '../../../../components';
-export interface CardHeaderProps extends BoxProps {
+import { FlexProps } from '../../../../components';
+export interface CardHeaderProps extends FlexProps {
     headline: string;
     color?: ColorType;
     subheader?: string;

package/dist/components/molecules/Card/CardLarge/CardLarge.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { SignatureProps, SocialBarProps } from '../../../../components';
+import { FlexProps, SignatureProps, SocialBarProps } from '../../../../components';
 import { ColorType, LayoutType } from '../../../../types';
-export interface CardLargeProps {
+export interface CardLargeProps extends FlexProps {
     link: string;
     headline: string;
     color: ColorType;

package/dist/components/molecules/Card/CardMedium/CardMedium.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { CardHeaderProps, SocialBarProps } from '../../../../components';
+import { CardHeaderProps, FlexProps, SocialBarProps } from '../../../../components';
 import { LayoutType } from '../../../../types';
-export interface CardMediumProps {
+export interface CardMediumProps extends FlexProps {
     link: string;
     cardHeaderProps: CardHeaderProps;
     title: string;

package/dist/components/molecules/Card/CardMostRead/CardMostRead.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { CardHeaderProps } from '../../../../components';
+import { CardHeaderProps, FlexProps } from '../../../../components';
 import { LayoutType } from '../../../../types';
-export interface CardMostReadProps {
+export interface CardMostReadProps extends FlexProps {
     link: string;
     cardHeaderProps: CardHeaderProps;
     cover?: string;

package/dist/components/molecules/Card/CardOverview/CardOverview.d.ts

@@ -1,9 +1,10 @@
+import { FlexProps } from '../../../../components';
 import { ColorType } from '../../../../types';
-export interface CardOverviewProps {
+export interface CardOverviewProps extends FlexProps {
     cover: string;
     link: string;
     headline: string;
     title: string;
     color?: ColorType;
 }
-export declare function CardOverview({ link, cover, headline, title, color }: CardOverviewProps): JSX.Element;
+export declare function CardOverview({ link, cover, headline, title, color, ...flexProps }: CardOverviewProps): JSX.Element;

package/dist/components/molecules/Card/CardSmall/CardSmall.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { CardHeaderProps } from '../../../../components';
+import { CardHeaderProps, FlexProps } from '../../../../components';
 import { LayoutType } from '../../../../types';
-export interface CardSmallProps {
+export interface CardSmallProps extends FlexProps {
     link: string;
     cardHeaderProps: CardHeaderProps;
     title: string;

package/dist/components/molecules/Horoscope/index.d.ts

@@ -1,4 +1,3 @@
 export * from './HoroscopeContent';
-export * from './HoroscopeHomepageContent';
 export * from './HoroscopeTiles';
 export * from './HoroscopeTopicCard';

package/dist/constants/cssProperties/index.d.ts

@@ -1 +1,2 @@
+export * from './typography';
 export * from './flexboxAndGridBox';

package/dist/constants/cssProperties/typography.d.ts

@@ -0,0 +1,7 @@
+export declare const textDecorationList: readonly ["underline", "dotted", "wavy", "overline"];
+export declare const textAlignList: readonly ["left", "center", "right", "justify"];
+export declare const textTransformList: readonly ["capitalize", "uppercase", "lowercase"];
+export declare const fontFamilyTokenNameList: readonly ("oswald" | "source-serif-pro")[];
+export declare const fontWeightTokenNameList: readonly ("regular" | "bold")[];
+export declare const headingSizeTokenNameList: readonly ("xs" | "xxs-2" | "xxs" | "s" | "m" | "l" | "xxl" | "xxl-2" | "xxl-3")[];
+export declare const textSizeTokenNameList: readonly ("xs" | "xxs-2" | "xxs" | "s" | "m" | "l" | "xl" | "xxl")[];

package/dist/constants/systemProps/index.d.ts

@@ -1,5 +1,6 @@
 export * from './spacingSystemProps';
 export * from './colorSystemProps';
+export * from './typographySystemProps';
 export * from './systemProps';
 export * from './flexOrGridItemSystemProps';
 export * from './flexOrGridBoxSystemProps';

package/dist/constants/systemProps/typographySystemProps.d.ts

@@ -0,0 +1,2 @@
+import type { TypographySystemProps } from '../../types';
+export declare const typographySystemProps: Record<keyof TypographySystemProps, string[]>;

package/dist/constants/tokenVariables.d.ts

@@ -118,6 +118,74 @@ export declare const tokenVariables: {
             };
         };
     };
+    'font-family': {
+        base: {
+            value: string;
+        };
+        oswald: {
+            value: string;
+        };
+        'source-serif-pro': {
+            value: string;
+        };
+    };
+    'font-size': {
+        'xxs-3': {
+            value: string;
+        };
+        'xxs-2': {
+            value: string;
+        };
+        xxs: {
+            value: string;
+        };
+        xs: {
+            value: string;
+        };
+        s: {
+            value: string;
+        };
+        m: {
+            value: string;
+        };
+        l: {
+            value: string;
+        };
+        xl: {
+            value: string;
+        };
+        xxl: {
+            value: string;
+        };
+        'xxl-2': {
+            value: string;
+        };
+        'xxl-3': {
+            value: string;
+        };
+        'xxl-4': {
+            value: string;
+        };
+        'xxl-5': {
+            value: string;
+        };
+    };
+    'font-weight': {
+        regular: {
+            value: string;
+        };
+        bold: {
+            value: string;
+        };
+    };
+    'line-height': {
+        base: {
+            value: string;
+        };
+        large: {
+            value: string;
+        };
+    };
     spacing: {
         '0': {
             value: string;
@@ -150,4 +218,118 @@ export declare const tokenVariables: {
             value: string;
         };
     };
+    typography: {
+        heading: {
+            'xxs-2': {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            xxs: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            xs: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            s: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            m: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            l: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            xxl: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            'xxl-2': {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            'xxl-3': {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+        };
+        text: {
+            'xxs-2': {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            xxs: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            xs: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            s: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            m: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+                lineHeight: {
+                    value: string;
+                };
+            };
+            l: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+                lineHeight: {
+                    value: string;
+                };
+            };
+            xl: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+            xxl: {
+                description: string;
+                fontSize: {
+                    value: string;
+                };
+            };
+        };
+    };
 };

package/dist/helpers/systemPropsHelper/index.d.ts

@@ -1,8 +1,9 @@
-export * from './colorSystemClassName';
 export * from './classNameWithModifier';
 export * from './classNamesWithModifiers';
-export * from './spacingSystemClassName';
 export * from './omitSystemProps';
+export * from './colorSystemClassName';
+export * from './spacingSystemClassName';
+export * from './typographySystemClassName';
 export * from './systemClassName';
 export * from './flexOrGridBoxItemClassName';
 export * from './flexOrGridBoxClassName';

package/dist/helpers/systemPropsHelper/typographySystemClassName.d.ts

@@ -0,0 +1,4 @@
+import type { TypographySystemProps } from '../../types';
+export declare const typographySystemClassName: <TProps extends TypographySystemProps>({ textAlign, weight, textTransform, textDecoration, italic, fontFamily, }: TProps & {
+    isHeading?: boolean | undefined;
+}) => string;