chore: make class name convention to bem format

Adslot · Jul 25, 2019 · 14ad3e3 · 14ad3e3
1 parent 64fdaf2
commit 14ad3e3
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 18 deletions.
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -44,9 +44,11 @@ rules:
   force-pseudo-nesting: 0
 
   # Name Formats
-  # TODO: When inline linting is supported set as error (https://github.com/sasstools/sass-lint/pull/402) and ignore
-  # in Select.scss
-  class-name-format: 1
+  class-name-format:
+    - 2
+    -
+      allow-leading-underscore: false
+      convention: hyphenatedbem
   function-name-format: 2
   mixin-name-format: 2
   placeholder-name-format: 2

diff --git a/src/components/adslot-ui/VerticalNavigation/index.jsx b/src/components/adslot-ui/VerticalNavigation/index.jsx
@@ -81,7 +81,7 @@ class VerticalNavigation extends React.Component {
         { 'aui--vertical-navigation-component__menu-item-is-active': index === activeTabIndex },
       ]);
       menuList.push(
-        <div key={`menu-item-${index}`} className={classNames} onClick={child.props.onClick}>
+        <div key={`menu-item-${_.uniqueId()}`} className={classNames} onClick={child.props.onClick}>
           {child.props.content({ isCollapsed })}
         </div>
       );

diff --git a/www/examples/VerticalNavigationExample.jsx b/www/examples/VerticalNavigationExample.jsx
@@ -19,26 +19,42 @@ class VerticalNavigationExample extends React.PureComponent {
 
   handleMenuClick = tabName => () => this.setState({ activeTab: tabName });
 
-  renderMenu1 = ({ isCollapsed }) => (
-    <MenuContent
-      {...{
-        isCollapsed,
-        label: 'Product Details 1',
-        icon: isCollapsed ? <div className="burger-icon" /> : <div className="product-details-icon" />,
-      }}
-    />
-  );
-
   render() {
     return (
       <VerticalNav isCollapsed={this.state.isCollapsed} onClick={this.handleCollapse}>
         <VerticalNav.MenuItem
           onClick={this.handleMenuClick('Tab 1')}
           isActive={this.state.activeTab === 'Tab 1'}
-          content={this.renderMenu1}
+          content={({ isCollapsed }) => (
+            <MenuContent
+              {...{
+                isCollapsed,
+                label: 'Product Details 1',
+                icon: isCollapsed ? <div className="burger-icon" /> : <div className="product-details-icon" />,
+              }}
+            />
+          )}
           dts="test-menu-tab-1"
         >
-          this is a content
+          Culpa amet dolore ea tempor. Enim non culpa enim quis. Culpa proident in et est minim ullamco fugiat
+          exercitation non ea. Sint voluptate amet magna velit ipsum labore sint commodo consequat. Aliquip tempor
+          commodo ullamco elit deserunt incididunt ipsum do. <br />
+          <br />
+          Ea incididunt deserunt commodo consequat do non elit ea labore. Laborum irure mollit laborum nostrud ipsum ea.
+          Cupidatat pariatur dolore fugiat occaecat elit eiusmod eu esse aliqua ut laborum occaecat nisi nisi. Sint
+          veniam excepteur voluptate laboris. Anim duis id ea irure est laborum. <br />
+          <br />
+          Aute adipisicing fugiat cillum exercitation. Cillum tempor laboris cillum sit in cillum mollit dolor fugiat
+          culpa amet aliquip. Velit qui laboris enim sunt officia tempor et id dolor mollit deserunt enim. <br />
+          <br />
+          Ipsum culpa do ea ut. Laboris aute Lorem ipsum anim. Exercitation velit cillum nisi ex anim aliqua amet
+          pariatur consequat est ut sit fugiat deserunt. Magna non minim occaecat sunt cillum eiusmod ex. <br />
+          <br />
+          Minim labore culpa proident dolor ad nulla. Proident exercitation Lorem esse quis deserunt. Amet pariatur
+          cillum et sit officia pariatur fugiat quis duis. Eiusmod duis veniam minim anim ex. Aute ipsum consequat
+          commodo sint nostrud eu fugiat nulla enim veniam veniam reprehenderit reprehenderit deserunt. Incididunt non
+          mollit fugiat et fugiat sunt veniam minim eu velit. Minim quis incididunt aliqua duis ut dolor occaecat magna
+          est.
         </VerticalNav.MenuItem>
         <VerticalNav.MenuItem
           onClick={this.handleMenuClick('Tab 2')}
@@ -53,7 +69,17 @@ class VerticalNavigationExample extends React.PureComponent {
             />
           )}
         >
-          this is another content
+          Reprehenderit velit nulla consequat duis. Nisi commodo esse magna eiusmod cillum laboris laboris nisi Lorem
+          voluptate. Ut culpa occaecat enim aliqua magna in id et sunt laborum nostrud esse deserunt. <br />
+          <br />
+          Occaecat cillum culpa occaecat nulla laboris tempor in mollit exercitation id pariatur nisi. Tempor cupidatat
+          est ad reprehenderit veniam. In id do dolore officia esse nostrud consequat anim Lorem deserunt sint fugiat.
+          Dolor minim minim sint ut laborum. Laborum est labore minim cillum do nisi. Elit eu aliqua et qui. Culpa quis
+          magna exercitation est. <br />
+          <br />
+          Est aliquip nostrud voluptate tempor ea commodo. Sint voluptate elit minim cillum nostrud mollit qui ullamco
+          pariatur deserunt incididunt labore eiusmod reprehenderit. In ut minim laborum Lorem amet ipsum enim nulla ex
+          laboris. Lorem in culpa ut exercitation fugiat elit ut velit.
         </VerticalNav.MenuItem>
       </VerticalNav>
     );
@@ -67,7 +93,15 @@ const exampleProps = {
   <VerticalNav.MenuItem
     onClick={this.handleMenuClick('Tab 1')}
     isActive={this.state.activeTab === 'Tab 1'}
-    content={this.renderMenu1}
+    content={({ isCollapsed }) => (
+      <MenuContent
+        {...{
+          isCollapsed,
+          label: 'Product Details 1',
+          icon: isCollapsed ? <div className="burger-icon" /> : <div className="product-details-icon" />,
+        }}
+      />
+    )}
     dts="test-menu-tab-1"
   >
     this is a content
@@ -88,6 +122,14 @@ const exampleProps = {
     this is another content
   </VerticalNav.MenuItem>
 </VerticalNav>
+
+// Rendering menu item, can be customized for expanded and collapsed mode
+<VerticalNav.MenuItem
+  content={({ isCollapsed }) => isCollapsed ? <div>Collapsed</div> : <div>Expanded</div>}
+  ...
+>
+  some tab content
+</VerticalNav.MenuItem>
   `,
   propTypeSectionArray: [
     {