Merge pull request #266 from Web-Dev-Path/refactor/to-scss-Wrapper

CSS modeules migration for Wrapper Component

Author: Satoshi-Sh

CHANGELOG.md

@@ -173,8 +173,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Member
   - Row
   - Container
+  - Wrapper
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling
 - Reverted the prop name to styles in Container component as the change of the name introduced a styling bug 
 - Rename RowAlignLeft to Row
-- Extracted :root from themes.scss to globals.scss
+- Extracted :root from themes.scss to globals.scss
+- Created a combineClasses function to clean up conditional class handling
+

components/buttons/ButtonLink/index.js

@@ -1,15 +1,13 @@
 import styles from './ButtonLink.module.scss';
+import { combineClasses } from '@/utils/classnames';
 
 export default function ButtonLink({
   link,
   children,
   customBtnClass,
   openNewTab,
 }) {
-  const buttonClass = customBtnClass
-    ? `${styles.buttonLink} ${styles[customBtnClass]}`
-    : styles.buttonLink;
-
+  const buttonClass = combineClasses(styles.buttonLink, customBtnClass, styles);
   return (
     <a
       href={link}

components/containers/Wrapper/Wrapper.module.scss

@@ -0,0 +1,7 @@
+.wrapper {
+  padding: 1rem 0;
+
+  &.primary__accent {
+    background-color: var(--color-primary-accent);
+  }
+}

components/containers/Wrapper/index.js

@@ -1,5 +1,7 @@
-import S from './styles';
+import styles from './Wrapper.module.scss';
+import { combineClasses } from '@/utils/classnames';
 
 export default function Wrapper({ customClass, children }) {
-  return <S.Wrapper $colorVarient={customClass}>{children}</S.Wrapper>;
+  const wrapperClass = combineClasses(styles.wrapper, customClass, styles);
+  return <div className={wrapperClass}>{children}</div>;
 }

components/containers/Wrapper/styles.js

@@ -7,6 +7,7 @@
   --color-grey: #d9d9d9;
   --color-white: #ffffff;
   --color-light-bg: #8cd5e8;
+  --color-primary-accent: #ffcc4c;
   --color-primary-content: #292929;
   --color-transparent: transparent;
   --color-box-shadow: rgba(0, 0, 0, 0.08);

styles/globals.scss

@@ -0,0 +1,5 @@
+export function combineClasses(baseClass, customClassName, styles) {
+  return customClassName && styles[customClassName]
+    ? `${baseClass} ${styles[customClassName]}`
+    : baseClass;
+}