Repository: marigold-ui/marigold
Pull request #2568 (2022-10-17 11:01:39)

feat: improve headline with align and color property

sarahgm: why can't I add a changeset 🤔
sebald: > why can't I add a changeset 🤔

😵‍💫 You can do it via CLI too "pnpm changeset add" I think 

Patch:
diff --git a/.changeset/quick-trains-cough.md b/.changeset/quick-trains-cough.md
new file mode 100644
index 000000000..2bd3ca69a
--- /dev/null
+++ b/.changeset/quick-trains-cough.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+feat: improve headline with align and color property
diff --git a/docs/src/pages/components/headline.mdx b/docs/src/pages/components/headline.mdx
index fca5249ea..23c9201db 100644
--- a/docs/src/pages/components/headline.mdx
+++ b/docs/src/pages/components/headline.mdx
@@ -42,6 +42,18 @@ import { Headline } from '@marigold/components';
       description: 'Set a different level from theme, values are from 1 - 6.',
       default: `1`,
     },
+    {
+      property: 'align',
+      type: 'string',
+      description: 'Set the align of the headline.'
+      default: 'none'
+    },
+    {
+      property: 'color',
+      type:"string",
+      description:"Set the color of the headline",
+      default: 'currentColor'
+    }
   ]}
 />
 
diff --git a/packages/components/src/Headline/Headline.stories.tsx b/packages/components/src/Headline/Headline.stories.tsx
index 1959453dc..68044a20b 100644
--- a/packages/components/src/Headline/Headline.stories.tsx
+++ b/packages/components/src/Headline/Headline.stories.tsx
@@ -24,6 +24,23 @@ export default {
       },
       description: 'The size of the headline',
     },
+    align: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set the text-align of the component',
+    },
+    color: {
+      control: {
+        type: 'text',
+      },
+      description: 'Text color',
+      table: {
+        defaultValue: {
+          summary: 'inherit',
+        },
+      },
+    },
   },
 } as Meta;
 
diff --git a/packages/components/src/Headline/Headline.tsx b/packages/components/src/Headline/Headline.tsx
index 42e388b94..c6d826e37 100644
--- a/packages/components/src/Headline/Headline.tsx
+++ b/packages/components/src/Headline/Headline.tsx
@@ -4,6 +4,7 @@ import {
   useComponentStyles,
   ThemeComponentProps,
   ThemeExtension,
+  CSSObject,
 } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
@@ -18,6 +19,8 @@ export interface HeadlineProps
     ComponentProps<'h1'> {
   children?: ReactNode;
   level?: '1' | '2' | '3' | '4' | '5' | '6';
+  align?: CSSObject['textAlign'];
+  color?: string;
 }
 
 // Component
@@ -26,6 +29,8 @@ export const Headline = ({
   children,
   variant,
   size,
+  align,
+  color,
   level = '1',
   ...props
 }: HeadlineProps) => {
@@ -34,7 +39,11 @@ export const Headline = ({
     size: size ?? `level-${level}`,
   });
   return (
-    <Box as={`h${level}`} {...props} css={styles}>
+    <Box
+      as={`h${level}`}
+      {...props}
+      css={[styles, { color, textAlign: align }]}
+    >
       {children}
     </Box>
   );


Test patch:
diff --git a/packages/components/src/Headline/Headline.test.tsx b/packages/components/src/Headline/Headline.test.tsx
index 1cf50f86c..cbfb7f2f9 100644
--- a/packages/components/src/Headline/Headline.test.tsx
+++ b/packages/components/src/Headline/Headline.test.tsx
@@ -105,3 +105,23 @@ test('headline accepts a variant', () => {
   const headline = screen.getByTestId('headline');
   expect(headline).toHaveStyle(`color: white`);
 });
+
+test('headline accepts align property', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Headline data-testid="headline" align="center" />
+    </ThemeProvider>
+  );
+  const headline = screen.getByTestId('headline');
+  expect(headline).toHaveStyle(`textAlign: center`);
+});
+
+test('headline accepts color property', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Headline data-testid="headline" color="red" />
+    </ThemeProvider>
+  );
+  const headline = screen.getByTestId('headline');
+  expect(headline).toHaveStyle(`color: red`);
+});