Merging develop

stories/Container.js

@@ -20,7 +20,7 @@ export const createContainer = ({ title, linkLabel, linkUrl, headerBorder }) =>
       containerHeader.appendChild(containerTitle)
     }
 
-    if (linkLabel) {
+    if (linkLabel || linkUrl) {
       const containerLink = createLink({ label: linkLabel, url: linkUrl })
       containerHeader.appendChild(containerLink)
     }

stories/PlanCard.js

@@ -0,0 +1,71 @@
+import { addClasses } from '../utilities/classes-names'
+import { createButton } from './Button'
+
+export const createPlanCard = ({
+  title,
+  price,
+  priceSubtitle,
+  planSpecs,
+  buttonLabel,
+  buttonOnClick,
+  buttonColor,
+  pro
+}) => {
+  const planCard = document.createElement('div')
+  planCard.className = 'sb-plan-card'
+
+  // Plan Card Info
+
+  const planCardInfo = document.createElement('div')
+  planCardInfo.className = addClasses(['sb-plan-card__info'])
+
+  const planCardTitle = document.createElement('h3')
+  planCardTitle.className = addClasses([
+    'sb-plan-card__title',
+    'sb-title',
+    pro ? 'sb-title--pro' : ''
+  ])
+  planCardTitle.innerText = title
+  planCardInfo.appendChild(planCardTitle)
+
+  const planCardPrice = document.createElement('p')
+  planCardPrice.className = addClasses(['sb-plan-card__price'])
+  planCardPrice.innerText = price
+  planCardInfo.appendChild(planCardPrice)
+
+  const planCardPriceSubtitle = document.createElement('p')
+  planCardPriceSubtitle.className = addClasses(['sb-plan-card__price-subtitle'])
+  planCardPriceSubtitle.innerText = priceSubtitle
+  planCardInfo.appendChild(planCardPriceSubtitle)
+
+  planSpecs.forEach((spec) => {
+    const planCardSpec = document.createElement('div')
+    planCardSpec.className = addClasses(['sb-plan-card__spec'])
+    const planCardSpecIcon = document.createElement('span')
+    planCardSpecIcon.className = addClasses([`check-${buttonColor}`])
+    const planCardSpecText = document.createElement('p')
+    planCardSpecText.innerText = spec
+    planCardSpec.appendChild(planCardSpecIcon)
+    planCardSpec.appendChild(planCardSpecText)
+    planCardInfo.appendChild(planCardSpec)
+  })
+
+
+  planCard.appendChild(planCardInfo)
+
+  // Plan Card Footer
+
+  const planCardFooter = document.createElement('div')
+  planCardFooter.className = addClasses(['sb-plan-card__footer'])
+
+  const planButton = createButton({ label: buttonLabel, onClick: buttonOnClick })
+  planButton.className = addClasses([
+    planButton.className,
+    'sb-plan-card__button',
+    `sb-plan-card__button--${buttonColor}`
+  ])
+  planCardFooter.appendChild(planButton)
+  planCard.appendChild(planCardFooter)
+
+  return planCard
+}

stories/PlanCard.stories.js

@@ -0,0 +1,39 @@
+import { createPlanCard } from './PlanCard'
+
+export default {
+  title: 'Components/PlanCard',
+  argTypes: {
+    title: { control: 'text' },
+    price: { control: 'text' },
+    priceSubtitle: { control: 'text' },
+    planSpecs: { control: 'object' },
+    buttonLabel: { control: 'text' },
+    buttonOnClick: { control: 'text' },
+    pro: { control: 'boolean' },
+    buttonColor: {
+      control: { type: 'select' },
+      options: ['pink', 'orange', 'orangered']
+    }
+  }
+}
+
+const Template = ({ ...args }) => {
+  return createPlanCard({ ...args })
+}
+
+export const PlanCard = Template.bind({})
+PlanCard.args = {
+  title: 'Starter',
+  price: 'Free',
+  priceSubtitle: 'Forever',
+  planSpecs: [
+    'Dorem ipsum dolor sit amet',
+    'Worem ipsum dolor',
+    'Dorem ipsum dolor sit amet',
+    'Worem ipsum dolor'
+  ],
+  buttonLabel: 'SIGN UP',
+  buttonUrl: '#',
+  pro: false,
+  buttonColor: 'pink'
+}

stories/PricingData.js

@@ -0,0 +1,32 @@
+import { addClasses } from '../utilities/classes-names'
+
+export const createPricingData = ({ title, data }) => {
+  const pricingData = document.createElement('div')
+  pricingData.className = 'sb-pricing-data'
+
+  const pricingDataTitle = document.createElement('h2')
+  pricingDataTitle.className = addClasses(['sb-pricing-data__title', 'sb-title'])
+  pricingDataTitle.innerText = title
+  pricingData.appendChild(pricingDataTitle)
+
+  const pricingDataNumbers = document.createElement('div')
+  pricingDataNumbers.className = 'sb-pricing-data__numbers'
+
+  data.forEach((item) => {
+    const pricingDataNumbersItem = document.createElement('div')
+    pricingDataNumbersItem.className = 'sb-pricing-data__item'
+    const pricingDataNumbersItemName = document.createElement('p')
+    pricingDataNumbersItemName.className = 'sb-pricing-data__item-name'
+    pricingDataNumbersItemName.innerText = item.name
+    const pricingDataNumbersItemNumber = document.createElement('p')
+    pricingDataNumbersItemNumber.className = 'sb-pricing-data__item-number'
+    pricingDataNumbersItemNumber.innerText = item.number
+    pricingDataNumbersItem.appendChild(pricingDataNumbersItemName)
+    pricingDataNumbersItem.appendChild(pricingDataNumbersItemNumber)
+    pricingDataNumbers.appendChild(pricingDataNumbersItem)
+  })
+
+  pricingData.appendChild(pricingDataNumbers)
+
+  return pricingData
+}

stories/PricingData.stories.js

@@ -0,0 +1,40 @@
+import { createPricingData } from './PricingData'
+
+export default {
+  title: 'Components/PricingData',
+  argTypes: {
+    title: { control: 'text' },
+    data: { control: 'object' }
+  }
+}
+
+const Template = ({ label, ...args }) => {
+  return createPricingData({ label, ...args })
+}
+
+export const PricingData = Template.bind({})
+PricingData.args = {
+  title: `Join an exceptional community of fashion professionals.`,
+  data: [
+    {
+      name: 'Talent Agencies',
+      number: '700+'
+    },
+    {
+      name: 'Brands & Magazines, Professionals',
+      number: '3,400+'
+    },
+    {
+      name: 'Accredited Models & Artists',
+      number: '27,000+'
+    },
+    {
+      name: 'Monthly Visitors',
+      number: '1.1m'
+    },
+    {
+      name: 'Social Followers',
+      number: '2m+'
+    }
+  ]
+}

stories/PricingPage.js

@@ -0,0 +1,149 @@
+import { addClasses } from '../utilities/classes-names'
+import { createTextMedia } from './TextMedia'
+import { createTable } from './Table'
+import { createSection } from './Section'
+import { createPlanCard } from './PlanCard'
+import { createPricingData } from './PricingData'
+import { createContainer } from './Container'
+
+export const createPricingPage = ({ label }) => {
+  const pricingPage = createSection({ title: undefined, noPaddingLg: true })
+  pricingPage.className = addClasses([pricingPage.className, 'sb-pricing-page'])
+
+  const textMedia = createTextMedia({
+    title: 'Fashion like a Pro',
+    mainTitle: true,
+    text: 'Borem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora.',
+    buttonLabel: 'Test',
+    videoSrc:
+      'https://wedistill.io/uploads/videos/processed/33/Cold2520Winter2520Dream-HD3_1.mp4.mp4',
+    onClick: () => {}
+  })
+  pricingPage.appendChild(textMedia)
+
+  const table = createTable()
+  pricingPage.appendChild(table)
+
+  const textMedia2 = createTextMedia({
+    title: 'Fashion like a Pro',
+    text: 'Borem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora.',
+    buttonLabel: 'Test',
+    imgSrc:
+      'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80',
+    onClick: () => {},
+    reverseOrderMobile: true
+  })
+  pricingPage.appendChild(textMedia2)
+
+  const textMedia3 = createTextMedia({
+    title: 'Fashion like a Pro',
+    text: 'Borem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora.',
+    buttonLabel: 'Test',
+    imgSrc:
+      'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80',
+    onClick: () => {},
+    reverseOrderMobile: true
+  })
+  pricingPage.appendChild(textMedia3)
+
+  const pricingData = createPricingData({
+    title: `Join an exceptional community of fashion professionals.`,
+    data: [
+      {
+        name: 'Talent Agencies',
+        number: '700+'
+      },
+      {
+        name: 'Brands & Magazines, Professionals',
+        number: '3,400+'
+      },
+      {
+        name: 'Accredited Models & Artists',
+        number: '27,000+'
+      },
+      {
+        name: 'Monthly Visitors',
+        number: '1.1m'
+      },
+      {
+        name: 'Social Followers',
+        number: '2m+'
+      }
+    ]
+  })
+
+  pricingPage.appendChild(pricingData)
+
+  // Cards
+
+  const planCards = document.createElement('div')
+  planCards.className = addClasses([
+    'sb-pricing-page__plan-cards',
+    'sb-grid',
+    'sb-plan-card-container'
+  ])
+
+  const planCardsTitle = document.createElement('h2')
+  planCardsTitle.className = addClasses(['sb-title', 'sb-title--center'])
+  planCardsTitle.innerText = 'Become a Models Member Today.'
+  planCardsTitle.className = addClasses([planCardsTitle.className, 'span-full'])
+  planCards.appendChild(planCardsTitle)
+
+  const planCard1 = createPlanCard({
+    title: 'Starter',
+    price: 'Free',
+    priceSubtitle: 'Forever',
+    planSpecs: [
+      'Dorem ipsum dolor sit amet',
+      'Worem ipsum dolor',
+      'Dorem ipsum dolor sit amet',
+      'Worem ipsum dolor'
+    ],
+    buttonLabel: 'SIGN UP',
+    buttonUrl: '#',
+    pro: false,
+    buttonColor: 'pink'
+  })
+  planCard1.className = addClasses([planCard1.className, 'span-4', 'sm-span-full'])
+  planCards.appendChild(planCard1)
+
+  const planCard2 = createPlanCard({
+    title: 'Starter',
+    price: '$16.7 / month',
+    priceSubtitle: 'Billed annually or $20 month-to-month',
+    planSpecs: [
+      'Dorem ipsum dolor sit amet',
+      'Worem ipsum dolor',
+      'Dorem ipsum dolor sit amet',
+      'Worem ipsum dolor'
+    ],
+    buttonLabel: 'I AM A PRO',
+    buttonUrl: '#',
+    pro: true,
+    buttonColor: 'orange'
+  })
+  planCard2.className = addClasses([planCard2.className, 'span-4', 'sm-span-full'])
+  planCards.appendChild(planCard2)
+
+  const planCard3 = createPlanCard({
+    title: 'Starter',
+    price: '$17 per user / month',
+    priceSubtitle: 'Billed annually',
+    planSpecs: [
+      'Dorem ipsum dolor sit amet',
+      'Worem ipsum dolor',
+      'Dorem ipsum dolor sit amet',
+      'Worem ipsum dolor'
+    ],
+    buttonLabel: `LET'S TEAM UP`,
+    buttonUrl: '#',
+    pro: true,
+    buttonColor: 'orangered'
+  })
+  planCard3.className = addClasses([planCard3.className, 'span-4', 'sm-span-full'])
+  planCards.appendChild(planCard3)
+
+  pricingPage.appendChild(planCards)
+
+  return pricingPage
+}

stories/PricingPage.stories.js

@@ -0,0 +1,17 @@
+import { createPricingPage } from './PricingPage'
+
+export default {
+  title: 'Examples/PricingPage',
+  argTypes: {
+    label: { control: 'text' }
+  }
+}
+
+const Template = ({ ...args }) => {
+  return createPricingPage({ ...args })
+}
+
+export const PricingPage = Template.bind({})
+PricingPage.args = {
+  label: 'PricingPage'
+}

stories/Section.js

@@ -1,12 +1,24 @@
 import { addClasses } from '../utilities/classes-names'
 
-export const createSection = ({ title }) => {
+export const createSection = ({
+  title = undefined,
+  noPaddingLg = false,
+  noPaddingMd = false,
+  noPaddingSm = false
+}) => {
   const section = document.createElement('div')
-  section.className = 'sb-section'
-  const sectionTitle = document.createElement('h2')
-  sectionTitle.className = 'sb-section__title'
-  sectionTitle.innerHTML = title
-  section.appendChild(sectionTitle)
+  section.className = addClasses([
+    'sb-section',
+    noPaddingLg ? 'sb-section--no-padding-lg' : '',
+    noPaddingMd ? 'sb-section--no-padding-md' : '',
+    noPaddingSm ? 'sb-section--no-padding-sm' : ''
+  ])
+  if (title) {
+    const sectionTitle = document.createElement('h2')
+    sectionTitle.className = 'sb-section__title'
+    sectionTitle.innerHTML = title
+    section.appendChild(sectionTitle)
+  }
 
   return section
 }