Adding small title to carousels

Author: lukeamarsh

packages/core/.lintstagedrc.yml

@@ -1,2 +1,2 @@
 'src/**/*.js':
-  - flow
+  - flow focus-check

packages/core/src/components/Carousel/Carousel.css

@@ -6,6 +6,14 @@
   margin: 0 0 1.5rem 0;
 }
 
+.title.large {
+  font-size: var(--fontsize-large-ii);
+}
+
+.title.small {
+  font-size: var(--fontsize-large-i);
+} 
+
 .controls {
   display: flex;
   justify-content: space-between;

packages/core/src/components/Carousel/Carousel.js

@@ -11,7 +11,7 @@ import css from './Carousel.css';
 
 type Props = {
   children: Array<React.Node>,
-  title: string,
+  title?: string,
   slidesToShow: number,
   withoutControls: boolean,
   dragging: boolean,
@@ -20,6 +20,7 @@ type Props = {
   accessibilityNextLabel: string,
   accessibilityPrevLabel: string,
   infinite?: boolean,
+  titleSize: 'small' | 'large'
 };
 
 const Carousel = (props: Props) => {
@@ -34,12 +35,16 @@ const Carousel = (props: Props) => {
     accessibilityNextLabel,
     accessibilityPrevLabel,
     infinite,
+    titleSize,
   } = props;
   const [slideIndex, setSlideIndex] = React.useState(0);
 
   const renderTopRightControls = () => (
     <div className={css.controls}>
-      <h2 className={css.title}>{title}</h2>
+      { title && <h2 className={cx(css.title, {
+        [css.small]: titleSize === 'small',
+        [css.large]: titleSize === 'large'
+      })}>{title}</h2> }
       {slidesToShow < children.length && (
         <div className={css.buttons}>
           <BtnContainer
@@ -114,6 +119,7 @@ Carousel.defaultProps = {
   useCenterControls: false,
   accessibilityNextLabel: 'Show next slide',
   accessibilityPrevLabel: 'Show previous slide',
+  titleSize: 'large'
 };
 
 export default Carousel;

packages/core/src/components/MobileCarousel/MobileCarousel.css

@@ -23,9 +23,17 @@
 }
 
 .title {
-  margin: 0 0 1.5rem 0;
   font-family: var(--font-avenir);
-  font-size: var(--fontsize-large-ii);
   font-weight: var(--fontweight-demi);
   letter-spacing: normal;
 }
+
+.title.large {
+  font-size: var(--fontsize-large-ii);
+  margin: 0 0 1.5rem 0;
+}
+
+.title.small {
+  font-size: var(--fontsize-regular);
+  margin: 0 0 1rem 0;
+} 

packages/core/src/components/MobileCarousel/MobileCarousel.js

@@ -2,18 +2,23 @@
 
 import * as React from 'react';
 import shortid from 'shortid';
+import cx from 'classnames';
 
 import css from './MobileCarousel.css';
 
 type Props = {
   children: Array<React.Node>,
-  title: string
+  title: string,
+  titleSize: 'small' | 'large'
 }
 
-const MobileCarousel = ({ children, title }: Props) => {
+const MobileCarousel = ({ children, title, titleSize }: Props) => {
   return (
     <div>
-      <h2 className={css.title}>{title}</h2>
+      { title && <h2 className={cx(css.title, {
+        [css.small]: titleSize === 'small',
+        [css.large]: titleSize === 'large'
+      })}>{title}</h2> }
       <div className={css.slides}>
         {children.map((slide) => (
           <div key={shortid.generate()} className={css.slide}>
@@ -27,6 +32,7 @@ const MobileCarousel = ({ children, title }: Props) => {
 
 MobileCarousel.defaultProps = {
   title: '',
+  titleSize: 'large',
   children: []
 };
 

packages/playground/stories/Carousel.story.js

@@ -35,6 +35,9 @@ storiesOf('Carousel', module)
 .add('With Title', () => (
   <Carousel title="Carousel Title" slidesToShow={4} onChange={action('Slide changed')}>{slides}</Carousel>
 ))
+.add('With small Title', () => (
+  <Carousel titleSize="small" title="Carousel Title" slidesToShow={4} onChange={action('Slide changed')}>{slides}</Carousel>
+))
 .add('With Center controls', () => (
   <Carousel title="Carousel Title" useCenterControls useTopRightControls={false} slidesToShow={4} onChange={action('Slide changed')}>{slides}</Carousel>
 ));

packages/playground/stories/MobileCarousel.story.js

@@ -34,4 +34,7 @@ storiesOf('MobileCarousel', module)
 ))
 .add('With Title', () => (
   <MobileCarousel title="Carousel Title" slidesToShow={4} onChange={action('Slide changed')}>{slides}</MobileCarousel>
+))
+.add('With small Title', () => (
+  <MobileCarousel titleSize="small" title="Carousel Title" slidesToShow={4} onChange={action('Slide changed')}>{slides}</MobileCarousel>
 ));