fix: remove double props occurrence on the Heading

Author: Haider Alshamma

src/Type/Headings.story.tsx

@@ -1,33 +1,19 @@
 import React from "react";
 import { Text, Heading1, Heading2, Heading3, Heading4, StatusIndicator } from "../index";
+import { Flex } from "../Flex";
 
 export default {
   title: "Components/Headings",
 };
 
-export const _Heading1 = () => <Heading1>Heading 1</Heading1>;
-
-_Heading1.story = {
-  name: "Heading1",
-};
-
-export const _Heading2 = () => <Heading2>Heading 2</Heading2>;
-
-_Heading2.story = {
-  name: "Heading2",
-};
-
-export const _Heading3 = () => <Heading3>Heading 3</Heading3>;
-
-_Heading3.story = {
-  name: "Heading3",
-};
-
-export const _Heading4 = () => <Heading4>Heading 4</Heading4>;
-
-_Heading4.story = {
-  name: "Heading4",
-};
+export const Headings = () => (
+  <Flex flexDirection="column">
+    <Heading1>Heading 1</Heading1>
+    <Heading2>Heading 2</Heading2>
+    <Heading3>Heading 3</Heading3>
+    <Heading4>Heading 4</Heading4>
+  </Flex>
+);
 
 export const WithACustomMargin = () => (
   <>

src/Type/Headings.tsx

@@ -1,11 +1,10 @@
 import styled from "styled-components";
 import { addStyledProps } from "../StyledProps";
-import Text from "./Text";
+import Text, { TextProps } from "./Text";
 
-export const Heading1 = styled(Text).attrs((props) => ({
+export const Heading1 = styled(Text).attrs(() => ({
   as: "h1",
-  ...props,
-}))(
+}))<TextProps>(
   ({ theme }) => ({
     fontSize: theme.fontSizes.heading1,
     lineHeight: theme.lineHeights.heading1,
@@ -16,9 +15,8 @@ export const Heading1 = styled(Text).attrs((props) => ({
   addStyledProps
 );
 
-export const Heading2 = styled(Text).attrs((props) => ({
+export const Heading2 = styled(Text).attrs(() => ({
   as: "h2",
-  ...props,
 }))(
   ({ theme }) => ({
     fontSize: theme.fontSizes.heading2,
@@ -30,9 +28,8 @@ export const Heading2 = styled(Text).attrs((props) => ({
   addStyledProps
 );
 
-export const Heading3 = styled(Text).attrs((props) => ({
-  as: "h3",
-  ...props,
+export const Heading3 = styled(Text).attrs(() => ({
+  as: "h4",
 }))(
   ({ theme }) => ({
     fontSize: theme.fontSizes.heading3,
@@ -44,9 +41,8 @@ export const Heading3 = styled(Text).attrs((props) => ({
   addStyledProps
 );
 
-export const Heading4 = styled(Text).attrs((props) => ({
+export const Heading4 = styled(Text).attrs(() => ({
   as: "h4",
-  ...props,
 }))(
   ({ theme }) => ({
     fontSize: theme.fontSizes.heading4,

src/Type/Text.tsx

@@ -1,7 +1,6 @@
 import styled, { CSSObject } from "styled-components";
 import type { DefaultNDSThemeType } from "../theme.type";
 import { addStyledProps, StyledProps } from "../StyledProps";
-const getAttrs = (inline?: boolean) => (inline ? { as: "span" } : null);
 
 export type TextProps = React.HTMLAttributes<HTMLParagraphElement> & {
   inline?: boolean;
@@ -22,18 +21,20 @@ export type TextProps = React.HTMLAttributes<HTMLParagraphElement> & {
   fontSize?: string;
 } & StyledProps & { theme?: DefaultNDSThemeType };
 
-const Text = styled.p.attrs<TextProps>((props: TextProps) => getAttrs(props.inline))<TextProps>(
-  ({ disabled, textTransform, theme }: TextProps): CSSObject => ({
+const Text = styled.p<TextProps>(
+  ({ disabled, textTransform, inline, theme }): CSSObject => ({
     textTransform,
     color: "currentColor",
     marginTop: 0,
     marginBottom: 0,
     fontSize: theme.fontSizes.medium,
     lineHeight: theme.lineHeights.base,
     opacity: disabled ? "0.7" : undefined,
+    display: inline ? "inline" : undefined,
   }),
   addStyledProps
 );
+
 Text.defaultProps = {
   inline: false,
   disabled: false,