From 24e0ea3ddf6e3752386fc3ad65a463fea865604d Mon Sep 17 00:00:00 2001
From: Luke Denton <luke.denton@aligent.com.au>
Date: Sun, 23 Feb 2020 15:46:01 +1030
Subject: [PATCH] Update cms.js to use CSS Modules

Includes removing an import of the prop type `number`, which wasn't being used anywhere.
Elected to only accept `heading` as a property in the `classes` prop as that is the only class that is going to be used. Even though there is a cms.css file in the same directory, it wasn't being used previously, therefore I don't know what its purpose is, so I'm just playing it safe and leaving the code base as unchanged from my direct change.
---
 packages/venia-ui/lib/RootComponents/CMS/cms.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/venia-ui/lib/RootComponents/CMS/cms.js b/packages/venia-ui/lib/RootComponents/CMS/cms.js
index d45c1cb351..7f742d119d 100644
--- a/packages/venia-ui/lib/RootComponents/CMS/cms.js
+++ b/packages/venia-ui/lib/RootComponents/CMS/cms.js
@@ -1,14 +1,18 @@
 import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
 import { useQuery } from '@apollo/react-hooks';
 import cmsPageQuery from '../../queries/getCmsPage.graphql';
 import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
 import RichContent from '../../components/RichContent';
-import { number } from 'prop-types';
 import CategoryList from '../../components/CategoryList';
 import { Meta, Title } from '../../components/Head';
+import { mergeClasses } from "../../classify";
+
+import defaultClasses from './cms.css';
 
 const CMSPage = props => {
     const { id } = props;
+    const classes = mergeClasses(defaultClasses, props.classes);
     const { loading, error, data } = useQuery(cmsPageQuery, {
         variables: {
             id: Number(id),
@@ -34,7 +38,7 @@ const CMSPage = props => {
     const { content_heading, title } = data.cmsPage;
 
     const headingElement = content_heading !== '' ? (
-        <h1 className="cms__content-heading">
+        <h1 className={classes.heading}>
             {content_heading}
         </h1>
     ) : null;
@@ -69,7 +73,10 @@ const CMSPage = props => {
 };
 
 CMSPage.propTypes = {
-    id: number
+    id: number,
+    classes: shape({
+        heading: string
+    })
 };
 
 export default CMSPage;