Rename to TextMedia

Author: itsamoreh

components/organisms/FiftyFifty/index.js

@@ -3,23 +3,23 @@ import Container from '@/components/atoms/Container'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
-import styles from './FiftyFifty.module.css'
+import styles from './TextMedia.module.css'
 
 /**
- * Render the FiftyFifty component.
+ * Render the TextMedia component.
  *
- * @param {object} props           FiftyFifty component props.
+ * @param {object} props           TextMedia component props.
  * @param {string} props.body      The body text.
  * @param {string} props.className The className.
  * @param {object} props.cta       The cta object with text and url strings.
  * @param {object} props.image     The image object with url and alt text.
  * @param {string} props.title     The title.
- * @return {Element}               The FiftyFifty component.
+ * @return {Element}               The TextMedia component.
  */
-export default function FiftyFifty({body, className, cta, image, title}) {
+export default function TextMedia({body, className, cta, image, title}) {
   return (
     <Container>
-      <section className={cn(styles.fiftyFifty, className)}>
+      <section className={cn(styles.textMedia, className)}>
         <div className={styles.content}>
           <h1 className={styles.title}>{title}</h1>
           {body && <p className={styles.body}>{body}</p>}
@@ -45,7 +45,7 @@ export default function FiftyFifty({body, className, cta, image, title}) {
   )
 }
 
-FiftyFifty.propTypes = {
+TextMedia.propTypes = {
   body: PropTypes.string,
   className: PropTypes.string,
   cta: PropTypes.shape({
@@ -59,7 +59,7 @@ FiftyFifty.propTypes = {
   title: PropTypes.string
 }
 
-FiftyFifty.defaultProps = {
+TextMedia.defaultProps = {
   title: 'Here is a H2 headline in a bold font.',
   body:
     'Let me tell you a little story about how I went sledging in the Australian Alps, and got lost in the process. Oh what a riot that was, and I nearly lost...',

components/organisms/FiftyFifty/FiftyFifty.js renamed to components/organisms/TextMedia/TextMedia.js

@@ -1,4 +1,4 @@
-.fiftyFifty {
+.textMedia {
   @apply desktop:grid desktop:grid-cols-12 desktop:gap-16;
 
   & .content,

components/organisms/FiftyFifty/FiftyFifty.module.css renamed to components/organisms/TextMedia/TextMedia.module.css

@@ -1,15 +1,15 @@
 import {Canvas, Meta, Story} from '@storybook/addon-docs/blocks'
-import FiftyFifty from './'
+import TextMedia from './'
 
-<Meta title="Components/Molecules/FiftyFifty" component={FiftyFifty} />
+<Meta title="Components/Molecules/TextMedia" component={TextMedia} />
 
 # Component
 
 Use this to display a large CTA, usually at the top of a page.
 
 <Canvas>
   <Story name="Component">
-    <FiftyFifty
+    <TextMedia
       subtitle="Check it out"
       title="New Designs"
       body="Our amazing new design is here! Get it while it's hot, it won't be hot for long... uh oh, already cooling."

components/organisms/FiftyFifty/FiftyFifty.stories.mdx renamed to components/organisms/TextMedia/TextMedia.stories.mdx

@@ -0,0 +1 @@
+export {default} from './TextMedia'