Add FiftyFifty component and story

Author: itsamoreh

components/organisms/FiftyFifty/FiftyFifty.js

@@ -0,0 +1,75 @@
+import Button from '@/components/atoms/Button'
+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'
+
+/**
+ * Render the FiftyFifty component.
+ *
+ * @param {object} props           FiftyFifty 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.
+ */
+export default function FiftyFifty({body, className, cta, image, title}) {
+  return (
+    <Container>
+      <section className={cn(styles.fiftyFifty, className)}>
+        <div className={styles.content}>
+          <h1 className={styles.title}>{title}</h1>
+          {body && <p className={styles.body}>{body}</p>}
+          {cta && (
+            <Button
+              className={styles.button}
+              url={cta.url ? cta.url : null}
+              text={cta.text ? cta.text : null}
+              type="primary"
+              size="md"
+            />
+          )}
+        </div>
+        <div className={styles.media}>
+          {image && image.url && (
+            <div className={styles.imageWrap}>
+              <img src={image.url} alt={image.alt} />
+            </div>
+          )}
+        </div>
+      </section>
+    </Container>
+  )
+}
+
+FiftyFifty.propTypes = {
+  body: PropTypes.string,
+  className: PropTypes.string,
+  cta: PropTypes.shape({
+    text: PropTypes.string,
+    url: PropTypes.string
+  }),
+  image: PropTypes.shape({
+    url: PropTypes.string,
+    alt: PropTypes.string
+  }),
+  title: PropTypes.string
+}
+
+FiftyFifty.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...',
+  cta: {
+    text: 'Learn More',
+    url: '#'
+  },
+  image: {
+    url:
+      'https://images.unsplash.com/photo-1611458181887-e4a588329222?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
+    alt: 'Bridge over river'
+  }
+}

components/organisms/FiftyFifty/FiftyFifty.module.css

@@ -0,0 +1,30 @@
+.fiftyFifty {
+  @apply desktop:grid desktop:grid-cols-12 desktop:gap-16;
+
+  & .content,
+  & .media {
+    @apply col-span-6 p-16 flex flex-col items-start justify-center;
+  }
+
+  & .content {
+    & .title {
+      @apply mb-8 text-h2 font-secondary;
+    }
+
+    & .body {
+      @apply mb-24 font-primary text-body text-grey-light;
+    }
+  }
+
+  & .media {
+    & .imageWrap {
+      @apply relative h-0 w-full rounded-largest bg-black bg-opacity-20;
+
+      padding-top: 67.58%; /* Aspect ratio box - https://css-tricks.com/aspect-ratio-boxes */
+    }
+
+    & img {
+      @apply absolute top-0 left-0 w-full h-full object-cover rounded-largest;
+    }
+  }
+}

components/organisms/FiftyFifty/FiftyFifty.stories.mdx

@@ -0,0 +1,20 @@
+import {Canvas, Meta, Story} from '@storybook/addon-docs/blocks'
+import FiftyFifty from './'
+
+<Meta title="Components/Molecules/FiftyFifty" component={FiftyFifty} />
+
+# Component
+
+Use this to display a large CTA, usually at the top of a page.
+
+<Canvas>
+  <Story name="Component">
+    <FiftyFifty
+      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."
+      backgroundImage="https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60"
+      cta={{icon: 'arrowRight', text: 'Take a look'}}
+    />
+  </Story>
+</Canvas>

components/organisms/FiftyFifty/index.js

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