FullPageWizard components & cleanup

plgd-dev · Apr 4, 2024 · c7bb826 · c7bb826
1 parent 56e2326
commit c7bb826
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 2 deletions.
diff --git a/src/components/Atomic/_theme/siemens.ts b/src/components/Atomic/_theme/siemens.ts
@@ -517,6 +517,12 @@ const theme = {
             description: {
                 color: colorsSiemens.neutral500,
             },
+            groupHeadline: {
+                color: colorsSiemens.primary,
+            },
+            headline: {
+                color: colorsSiemens.primary,
+            },
             leftCol: {
                 background: colorsSiemens.neutral900,
             },

diff --git a/src/components/Atomic/_theme/template.ts b/src/components/Atomic/_theme/template.ts
@@ -530,6 +530,12 @@ export const getThemeTemplate = (colors: any, logoProps: LogoType) => ({
             description: {
                 color: colors.neutral900,
             },
+            groupHeadline: {
+                color: colors.primaryDarken,
+            },
+            headline: {
+                color: colors.primaryDarken,
+            },
             leftCol: {
                 background: colors.light,
             },

diff --git a/src/components/Templates/FullPageWizard/Components.styles.ts b/src/components/Templates/FullPageWizard/Components.styles.ts
@@ -32,3 +32,25 @@ export const subHeadline = (theme: ThemeType) => css`
 export const noBorder = css`
     border-top: none;
 `
+
+export const headline = (theme: ThemeType) => css`
+    font-family: ${get(theme, `Global.fontSecondary`)};
+    color: ${getTheme(theme, `FullPageWizard.headline.color`)};
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 54px;
+    letter-spacing: -1.5px;
+    margin: 0 0 24px 0;
+`
+
+export const groupHeadline = (theme: ThemeType) => css`
+    font-family: ${get(theme, `Global.fontSecondary`)};
+    color: ${getTheme(theme, `FullPageWizard.groupHeadline.color`)};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 150%;
+    letter-spacing: -0.5px;
+    margin: 32px 0 16px 0;
+`
diff --git a/src/components/Templates/FullPageWizard/Components.tsx b/src/components/Templates/FullPageWizard/Components.tsx
@@ -11,6 +11,19 @@ export type SubHeadlineProps = {
     noBorder?: boolean
 }
 
+export type HeadlineProps = {
+    children: string
+}
+
+export type GroupHeadlineProps = {
+    children: string
+    noBorder?: boolean
+}
+
 export const Description: FC<DescriptionProps> = (props) => <p css={[styles.description, props.large && styles.descriptionLarge]}>{props.children}</p>
 
 export const SubHeadline: FC<SubHeadlineProps> = (props) => <h2 css={[styles.subHeadline, props.noBorder && styles.noBorder]}>{props.children}</h2>
+
+export const Headline: FC<HeadlineProps> = (props) => <h1 css={[styles.headline]}>{props.children}</h1>
+
+export const GroupHeadline: FC<GroupHeadlineProps> = (props) => <h3 css={[styles.groupHeadline]}>{props.children}</h3>
diff --git a/src/components/Templates/FullPageWizard/FullPageWizard.tsx b/src/components/Templates/FullPageWizard/FullPageWizard.tsx
@@ -11,7 +11,7 @@ import IconDone from './assets/IconDone'
 import IconCloseCircle from '../../Atomic/Icon/components/IconCloseCircle'
 import { convertSize } from '../../Atomic'
 import { ComponentType, Props } from './FullPageWizard.types'
-import { Description, SubHeadline } from './Components'
+import { Description, SubHeadline, Headline, GroupHeadline } from './Components'
 
 const FullPageWizard: ComponentType<Props> = (props) => {
     const { children, title, i18n, steps, activeStep, onStepChange, onClose, visitedStep } = props
@@ -79,5 +79,7 @@ const FullPageWizard: ComponentType<Props> = (props) => {
 FullPageWizard.displayName = 'FullPageWizard'
 FullPageWizard.Description = Description
 FullPageWizard.SubHeadline = SubHeadline
+FullPageWizard.Headline = Headline
+FullPageWizard.GroupHeadline = GroupHeadline
 
 export default FullPageWizard
diff --git a/src/components/Templates/FullPageWizard/FullPageWizard.types.ts b/src/components/Templates/FullPageWizard/FullPageWizard.types.ts
@@ -1,9 +1,11 @@
 import { FC, ReactNode } from 'react'
-import { DescriptionProps, SubHeadlineProps } from './Components'
+import { DescriptionProps, HeadlineProps, SubHeadlineProps, GroupHeadlineProps } from './Components'
 
 export interface ComponentType<P> extends FC<P> {
     Description: FC<DescriptionProps>
+    Headline: FC<HeadlineProps>
     SubHeadline: FC<SubHeadlineProps>
+    GroupHeadline: FC<GroupHeadlineProps>
 }
 
 export type Props = {