Merge 2e239f6 into 0b48c22

textkernel · Apr 14, 2020 · 5e8d469 · 5e8d469
2 parents 0b48c22 + 2e239f6
commit 5e8d469
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 33 deletions.
diff --git a/src/components/Teaser/Teaser.tsx b/src/components/Teaser/Teaser.tsx
@@ -3,15 +3,15 @@ import { bem } from '../../utils';
 import { Text } from '../Text';
 import styles from './Teaser.scss';
 
-interface Props extends React.HTMLAttributes<HTMLParagraphElement> {
+interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     /** The title of entity */
-    title: string;
+    title: SingleReactNode;
     /** The subtitle of the entity */
-    subTitle?: string;
+    subTitle?: SingleReactNode;
     /** The location of the entity */
-    location?: string;
+    location?: SingleReactNode;
     /** Details related to the entity */
-    details?: string;
+    details?: SingleReactNode;
 }
 
 const { block, elem } = bem('Teaser', styles);
@@ -20,19 +20,19 @@ export const Teaser: React.FC<Props> = (props) => {
     const { title, subTitle, location, details, ...rest } = props;
 
     return (
-        <p {...rest} {...block(props)}>
-            <span {...elem('titleLine', props)}>
-                <Text inline context="brand" title={title} {...elem('title', props)}>
+        <div {...rest} {...block(props)}>
+            <div {...elem('titleLine', props)}>
+                <Text inline context="brand" {...elem('title', props)}>
                     {title}
                 </Text>
                 {location && (
                     <Text inline context="muted" {...elem('location', props)}>
                         {location}
                     </Text>
                 )}
-            </span>
+            </div>
             {subTitle && (
-                <Text inline context="accent" title={subTitle} {...elem('subTitle', props)}>
+                <Text inline context="accent" {...elem('subTitle', props)}>
                     {subTitle}
                 </Text>
             )}
@@ -41,7 +41,7 @@ export const Teaser: React.FC<Props> = (props) => {
                     {details}
                 </Text>
             )}
-        </p>
+        </div>
     );
 };
 

diff --git a/src/components/Teaser/__tests__/__snapshots__/Teaser.spec.js.snap b/src/components/Teaser/__tests__/__snapshots__/Teaser.spec.js.snap
@@ -7,28 +7,26 @@ exports[`Teaser should render correctly with just a title 1`] = `
   subTitle=""
   title="some title"
 >
-  <p
+  <div
     className="Teaser"
   >
-    <span
+    <div
       className="Teaser__titleLine"
     >
       <Text
         className="Teaser__title"
         context="brand"
         inline={true}
         size="normal"
-        title="some title"
       >
         <span
           className="Text--context_brand Teaser__title"
-          title="some title"
         >
           some title
         </span>
       </Text>
-    </span>
-  </p>
+    </div>
+  </div>
 </Teaser>
 `;
 
@@ -39,22 +37,20 @@ exports[`Teaser should render with all props defined 1`] = `
   subTitle="Organization"
   title="A job title"
 >
-  <p
+  <div
     className="Teaser"
   >
-    <span
+    <div
       className="Teaser__titleLine"
     >
       <Text
         className="Teaser__title"
         context="brand"
         inline={true}
         size="normal"
-        title="A job title"
       >
         <span
           className="Text--context_brand Teaser__title"
-          title="A job title"
         >
           A job title
         </span>
@@ -71,17 +67,15 @@ exports[`Teaser should render with all props defined 1`] = `
           location
         </span>
       </Text>
-    </span>
+    </div>
     <Text
       className="Teaser__subTitle"
       context="accent"
       inline={true}
       size="normal"
-      title="Organization"
     >
       <span
         className="Text--context_accent Teaser__subTitle"
-        title="Organization"
       >
         Organization
       </span>
@@ -97,6 +91,6 @@ exports[`Teaser should render with all props defined 1`] = `
         details about this job
       </span>
     </Text>
-  </p>
+  </div>
 </Teaser>
 `;
diff --git a/stories/Teaser.tsx b/stories/Teaser.tsx
@@ -5,11 +5,14 @@ import { Teaser } from '@textkernel/oneui';
 
 storiesOf('Molecules|Teaser', module)
     .addDecorator(withKnobs)
-    .add('Teaser', () => (
-        <Teaser
-            title={text('Title', 'My first job')}
-            subTitle={text('SubTitle', 'Awsome inc.')}
-            location={text('Location', 'Melbourne')}
-            details={text('Details', 'It was posted here, yesterday')}
-        />
-    ));
+    .add('Teaser', () => {
+        const title = text('Title', 'My first job');
+        return (
+            <Teaser
+                title={<span title={title}>{title}</span>}
+                subTitle={text('SubTitle', 'Awsome inc.')}
+                location={text('Location', 'Melbourne')}
+                details={text('Details', 'It was posted here, yesterday')}
+            />
+        );
+    });