Change css modules to BEM and update example application

sandstreamdev · Jun 21, 2020 · 35e3dc5 · 35e3dc5
1 parent 27445bf
commit 35e3dc5
Show file tree

Hide file tree

Showing 36 changed files with 434 additions and 407 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@
 [![Actions Status](https://github.com/sandstreamdev/react-swipeable-list/workflows/Node%20CI/badge.svg)](https://github.com/sandstreamdev/react-swipeable-list/actions)
 [![codecov](https://codecov.io/gh/sandstreamdev/react-swipeable-list/branch/master/graph/badge.svg)](https://codecov.io/gh/sandstreamdev/react-swipeable-list)
 ![GitHub Release Date](https://img.shields.io/github/release-date/sandstreamdev/react-swipeable-list)
-[![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-14-orange.svg?style=flat-square)](#contributors-)
 
 ## React Swipeable List component
 

diff --git a/examples/src/app.module.css → examples/src/App.css b/examples/src/app.module.css → examples/src/App.css
@@ -1,37 +1,23 @@
-body,
-h3,
-h5 {
-  margin: 0;
-}
-
 body {
   /* prettier-ignore */
   font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   line-height: 1.7;
+  margin: 0;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin-left: 16px;
-  margin-right: 16px;
+.page-content__title {
+  font-size: 19px;
+  font-weight: bold;
+  margin-top: 17px;
+  margin-bottom: 0;
 }
 
-h1 {
-  display: block;
-  font-size: 1.17em;
-  margin-block-start: 1em;
-  margin-block-end: 1em;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
+.page-content__subtitle {
+  font-size: 13px;
   font-weight: bold;
-  margin-bottom: 0;
-  text-align: center;
 }
 
-footer {
+.footer {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -40,27 +26,24 @@ footer {
   margin-top: auto;
 }
 
-a {
-  text-decoration: none;
-}
-
-footer a,
-footer a:visited {
+.footer__link,
+.footer__link:visited {
   color: #0275d8;
+  text-decoration: none;
 }
 
-footer a:hover {
+.footer__link:hover {
   color: #0275d8;
   text-decoration: underline;
 }
 
-.testApp {
+.application {
   display: flex;
   flex-direction: column;
   height: 100vh;
 }
 
-.example {
+.page-content {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -70,88 +53,37 @@ footer a:hover {
   -webkit-overflow-scrolling: touch;
 }
 
-.listContainer {
-  width: 100%;
-  margin: 24px 0;
-  border-top: 1px solid gray;
-  border-bottom: 1px solid gray;
-}
-
-.listItem {
-  border-bottom: 1px solid #c4c4c4;
-  height: 32px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 4px 8px;
-  user-select: none;
-  cursor: pointer;
-}
-
-.contentLeft {
-  background-color: red;
-  color: white;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 4px;
-}
-
-.contentRight {
-  composes: contentLeft; /* stylelint-disable-line value-keyword-case */
-  background-color: green;
-  justify-content: flex-end;
-}
-
-.actionInfo {
+.page__action--title {
   padding: 0 8px;
   font-weight: 600;
   font-size: 14px;
 }
 
-.actionInfoValue {
+.page__action--value {
   font-size: 12px;
   padding-bottom: 4px;
 }
 
-.complexListContainer {
-  width: 100%;
-  height: 180px;
-  min-height: 180px;
-  border-top: 1px solid gray;
-  border-bottom: 1px solid gray;
-  margin: 24px 0;
-}
-
-select {
+.page__select {
   height: 32px;
   padding: 4px;
   margin: 8px 16px;
   font-size: 16px;
   align-self: stretch;
 }
 
-select:focus {
+.page__select:focus {
   outline: none;
 }
 
-button {
+.page__button {
   height: 32px;
   padding: 4px 8px;
   margin: 8px 16px;
   font-size: 16px;
 }
 
-.switcher {
-  align-self: auto;
-}
-
-.switcherRow {
-  padding-top: 8px;
-}
-
-.summary {
+.page__summary {
   padding: 16px 0;
   display: flex;
   flex-direction: column;
@@ -200,13 +132,13 @@ button {
   }
 
   /* The screen (or content) of the device */
-  .smartphone .content {
+  .smartfone__content {
     width: 360px;
     height: 640px;
     background: white;
   }
 
-  footer {
+  .smartfone__footer {
     padding: 56px 0;
     margin-top: unset;
   }

diff --git a/examples/src/App.js b/examples/src/App.js
@@ -1,13 +1,11 @@
 import React, { PureComponent } from 'react';
 import { enumerable } from '@sandstreamdev/std/object';
 
-import BasicList from './basic/List';
-import ComplexList from './complex/List';
-import SizeToContentList from './size-to-content/List';
-import AnimationsList from './animations/List';
-import StyledList from './styled/List';
-
-import styles from './app.module.css';
+import BasicExample from './basic/BasicExample';
+import ComplexExample from './complex/ComplexExample';
+import SizeToContentExample from './size-to-content/SizeToContentExample';
+import AnimationsExample from './animations/AnimationsExample';
+import StyledExample from './styled/StyledExample';
 
 const ExampleType = enumerable(
   'BASIC',
@@ -42,15 +40,15 @@ class App extends PureComponent {
 
     switch (selectedExample) {
       case ExampleType.BASIC:
-        return <BasicList />;
+        return <BasicExample />;
       case ExampleType.COMPLEX:
-        return <ComplexList />;
+        return <ComplexExample />;
       case ExampleType.SIZE_TO_CONTENT:
-        return <SizeToContentList />;
+        return <SizeToContentExample />;
       case ExampleType.ANIMATIONS:
-        return <AnimationsList />;
+        return <AnimationsExample />;
       case ExampleType.STYLED:
-        return <StyledList />;
+        return <StyledExample />;
     }
 
     return null;
@@ -64,10 +62,16 @@ class App extends PureComponent {
     const { selectedExample } = this.state;
 
     return (
-      <div className={styles.example}>
-        <h1>react-swipeable-list example</h1>
-        <h5>(try also mobile view in dev tools for touch events)</h5>
-        <select value={selectedExample} onChange={this.handleSelectExample}>
+      <div className="page-content">
+        <div className="page-content__title">react-swipeable-list example</div>
+        <div className="page-content__subtitle">
+          (try also mobile view in dev tools for touch events)
+        </div>
+        <select
+          className="page__select"
+          value={selectedExample}
+          onChange={this.handleSelectExample}
+        >
           {Examples.map(item => (
             <option key={item.id} value={item.id}>
               {item.text}

diff --git a/examples/src/animations/AnimationsExample.css b/examples/src/animations/AnimationsExample.css
@@ -0,0 +1,36 @@
+.animations-swipeable-list__container {
+  width: 100%;
+  margin: 24px 0;
+  outline-color: gray;
+  outline-style: solid;
+  outline-width: 1px 0;
+}
+
+.animations__switcher {
+  align-self: auto;
+}
+
+.animations__switcher-row {
+  padding-top: 8px;
+}
+
+.my-node-exit {
+  opacity: 1;
+}
+
+.my-node-exit-active {
+  opacity: 0;
+  max-height: 0;
+  transition: max-height 1000ms, opacity 1500ms;
+}
+
+.my-node-enter {
+  opacity: 0;
+  max-height: 0;
+}
+
+.my-node-enter-active {
+  opacity: 1;
+  max-height: 1000px;
+  transition: max-height 4000ms, opacity 1500ms;
+}