Theme generator - logo props watch mode

Author: PatrikMatiasko

src/components/Atomic/Headline/Headline.styles.ts

@@ -70,3 +70,14 @@ export const headline = (theme: ThemeType, type: HeadlineType) => css`
     ${getSizes(type)};
     margin: 0;
 `
+
+export const getProps = (theme: { fontSize?: string; fontStyle?: string; fontWeight?: number; lineHeight?: string }) => css`
+    font-size: ${theme.fontSize};
+    font-style: ${theme.fontStyle ?? 'normal'};
+    font-weight: ${theme.fontWeight};
+    line-height: ${theme.lineHeight};
+`
+
+export const h6 = (theme: ThemeType) => css`
+    ${getProps(get(theme, `Headline.sizes.h6`))};
+`

src/components/Atomic/Headline/Headline.tsx

@@ -8,15 +8,16 @@ const Headline: FC<Props> = (props) => {
     const mergedProps = { ...defaultProps, ...props }
     const HeadlineElement = ({ type, children, ...props }: Props) => createElement(type as string, props, children)
 
-    const { dataTestId, className, ...rest } = mergedProps
+    const { dataTestId, className, type, ...rest } = mergedProps
 
     return (
         <HeadlineElement
             {...rest}
             children={mergedProps.children}
             className={classNames(mergedProps.type, className)}
-            css={[(theme) => styles.headline(theme, mergedProps.type!)]}
+            css={(theme) => [styles.headline(theme, mergedProps.type!), mergedProps.type === 'h6' && styles.h6(theme)]}
             data-test-id={mergedProps.dataTestId}
+            type={mergedProps.type}
         />
     )
 }

src/components/Atomic/Headline/Headline.types.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 
-export type HeadlineType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5'
+export type HeadlineType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
 export type Props = {
     className?: string

src/components/Atomic/_theme/template.ts

@@ -410,7 +410,14 @@ export const getThemeTemplate = (colors: any, logoProps: LogoType) => ({
             borderBottom: colors.neutral200,
         },
         Headline: {
-            color: colors.neutral900,
+            color: colors.primaryDarken,
+            sizes: {
+                h6: {
+                    fontSize: '14px',
+                    lineHeight: '16px',
+                    fontWeight: 600,
+                },
+            },
         },
         Layout: {
             background: colors.neutral000,