use standard bem for styling

textkernel · Dec 8, 2021 · bff4f01 · bff4f01
1 parent 98c2cf1
commit bff4f01
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 23 deletions.
diff --git a/src/components/DatePicker/CalendarHeader/CalendarHeader.scss b/src/components/DatePicker/CalendarHeader/CalendarHeader.scss
@@ -1,21 +1,21 @@
-.container {
+.CalendarHeader {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
-}
 
-.navButton {
-    width: 33px;
-    height: 33px;
-}
+    &__navButton {
+        width: 33px;
+        height: 33px;
+    }
 
-.select {
-    margin-left: var(--spacing-normal);
-    background-color: var(--color-background);
-    border: 0;
-    font-size: var(--font-size-normal);
+    &__select {
+        margin-left: var(--spacing-normal);
+        background-color: var(--color-background);
+        border: 0;
+        font-size: var(--font-size-normal);
 
-    &:focus {
-        outline: none;
+        &:focus {
+            outline: none;
+        }
     }
 }
diff --git a/src/components/DatePicker/CalendarHeader/CalendarHeader.tsx b/src/components/DatePicker/CalendarHeader/CalendarHeader.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
 import { ImArrowLeft2, ImArrowRight2 } from 'react-icons/im';
+import { bem } from '../../../utils';
 import { Button } from '../../Buttons';
 import { Text } from '../../Text';
 import styles from './CalendarHeader.scss';
@@ -12,6 +13,8 @@ interface Props extends ReactDatePickerCustomHeaderProps {
     years: number[];
 }
 
+const { block, elem } = bem('CalendarHeader', styles);
+
 export const CalendarHeader: React.FC<Props> = (props) => {
     const {
         monthsNames,
@@ -25,11 +28,11 @@ export const CalendarHeader: React.FC<Props> = (props) => {
     } = props;
 
     return (
-        <div className={styles.container}>
+        <div {...block()}>
             <Button
                 onClick={decreaseMonth}
                 disabled={prevMonthButtonDisabled}
-                className={styles.navButton}
+                {...elem('navButton')}
             >
                 <ImArrowLeft2 />
             </Button>
@@ -38,7 +41,7 @@ export const CalendarHeader: React.FC<Props> = (props) => {
                     {monthsNames[date.getMonth()]}
                 </Text>
                 <select
-                    className={styles.select}
+                    {...elem('select')}
                     value={date.getFullYear()}
                     onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}
                 >
@@ -52,7 +55,7 @@ export const CalendarHeader: React.FC<Props> = (props) => {
             <Button
                 onClick={increaseMonth}
                 disabled={nextMonthButtonDisabled}
-                className={styles.navButton}
+                {...elem('navButton')}
             >
                 <ImArrowRight2 />
             </Button>

diff --git a/src/components/DatePicker/CalendarHeader/__tests__/__snapshots__/CalendarHeader.spec.js.snap b/src/components/DatePicker/CalendarHeader/__tests__/__snapshots__/CalendarHeader.spec.js.snap
@@ -38,10 +38,10 @@ exports[`CalendarHeader should render correctly 1`] = `
   }
 >
   <div
-    className="container"
+    className="CalendarHeader"
   >
     <Button
-      className="navButton"
+      className="CalendarHeader__navButton"
       context="neutral"
       disabled={false}
       isBlock={false}
@@ -51,7 +51,7 @@ exports[`CalendarHeader should render correctly 1`] = `
       type="button"
     >
       <button
-        className="Button Button--context_neutral navButton"
+        className="Button Button--context_neutral CalendarHeader__navButton"
         disabled={false}
         onClick={[MockFunction]}
         type="button"
@@ -104,7 +104,7 @@ exports[`CalendarHeader should render correctly 1`] = `
         </span>
       </Text>
       <select
-        className="select"
+        className="CalendarHeader__select"
         onChange={[Function]}
         value={2021}
       >
@@ -171,7 +171,7 @@ exports[`CalendarHeader should render correctly 1`] = `
       </select>
     </div>
     <Button
-      className="navButton"
+      className="CalendarHeader__navButton"
       context="neutral"
       disabled={false}
       isBlock={false}
@@ -181,7 +181,7 @@ exports[`CalendarHeader should render correctly 1`] = `
       type="button"
     >
       <button
-        className="Button Button--context_neutral navButton"
+        className="Button Button--context_neutral CalendarHeader__navButton"
         disabled={false}
         onClick={[MockFunction]}
         type="button"