Bemify CSS

.editorconfig

@@ -0,0 +1,21 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{css,js,json,py,yml,rst}]
+indent_style = space
+
+[*.{js,py}]
+charset = utf-8
+
+[*.{css,py,scss}]
+indent_size = 4
+
+[*.{js,json,yml}]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.storybook/config.js

@@ -2,7 +2,7 @@ import { configure } from "@storybook/react";
 
 configure(() => {
   require("../example/example.scss");
-  require("../src/index.scss");
+  require("../src/scss/index.scss");
 
   require("../example/index.story");
 }, module);

.stylelintrc.yaml

@@ -0,0 +1,79 @@
+ignoreFiles:
+  - node_modules
+  - public/**/*
+plugins:
+  - stylelint-scss
+# See https://github.com/stylelint/stylelint/blob/master/docs/user-guide/rules.md
+rules:
+  block-closing-brace-newline-after:
+    - always
+    - ignoreAtRules:
+        # Ignore @if … @else in SCSS.
+        - if
+        - else
+  block-no-empty: true
+  block-opening-brace-space-before: always
+  color-hex-case: lower
+  color-hex-length: short
+  color-named: never
+  color-no-invalid-hex: true
+  comment-no-empty: true
+  declaration-bang-space-after: never
+  declaration-bang-space-before: always
+  declaration-block-no-duplicate-properties: true
+  declaration-block-no-redundant-longhand-properties: true
+  declaration-block-single-line-max-declarations: 1
+  declaration-block-trailing-semicolon: always
+  declaration-colon-space-after: always
+  declaration-colon-space-before: never
+  declaration-property-value-blacklist:
+    - /^border/: [none]
+    - severity: error
+  declaration-no-important: true
+  font-family-no-duplicate-names: true
+  function-calc-no-unspaced-operator: true
+  function-comma-space-after: always
+  function-linear-gradient-no-nonstandard-direction: true
+  function-parentheses-space-inside: never
+  function-url-quotes: always
+  indentation:
+    - 4
+    - severity: warning
+  length-zero-no-unit: true
+  max-nesting-depth: 3
+  media-feature-name-no-unknown: true
+  no-empty-source: true
+  no-eol-whitespace: true
+  no-extra-semicolons: true
+  no-missing-end-of-source-newline: true
+  number-no-trailing-zeros: true
+  number-leading-zero: always
+  property-case: lower
+  property-no-unknown: true
+  rule-empty-line-before:
+    - always
+    - except:
+        - after-single-line-comment
+        - first-nested
+  scss/at-import-no-partial-leading-underscore: true
+  scss/at-import-partial-extension-blacklist:
+    - scss
+  scss/at-else-empty-line-before: never
+  selector-no-qualifying-type:
+    - true
+    - ignore:
+        - attribute
+        - class
+  selector-list-comma-newline-after: always
+  selector-max-id: 0
+  selector-pseudo-element-no-unknown: true
+  selector-type-no-unknown: true
+  scss/at-rule-no-unknown: true
+  scss/media-feature-value-dollar-variable: always
+  scss/selector-no-redundant-nesting-selector: true
+  string-no-newline: true
+  string-quotes: single
+  unit-no-unknown: true
+  unit-case: lower
+  value-no-vendor-prefix: true
+  property-no-vendor-prefix: true

example/example.scss

@@ -3,12 +3,12 @@ body {
   padding: 15px;
 }
 
-.children-container .block > .block-container > .content-container > .content.full {
-    padding: 0;
+.c-sf-block .c-sf-block__content-inner.full {
+  padding: 0;
 }
 
-.children-container .block > .block-container > .content-container > .content.full input,
-.children-container .block > .block-container > .content-container > .content.full textarea {
+.c-sf-block .c-sf-block__content-inner.full input,
+.c-sf-block .c-sf-block__content-inner.full textarea {
   display: block;
   min-width: 100%;
   max-width: 100%;
@@ -18,7 +18,7 @@ body {
   outline: none;
 }
 
-.children-container .block > .block-container > .content-container > .content.full input {
+.c-sf-block .c-sf-block__content-inner.full input {
   font-size: 30px;
 }
 

package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
+    "prettier-stylelint": "^0.4.2",
     "react-animate-height": "^2.0.7",
     "react-beautiful-dnd": "^10.0.2",
     "uuid": "^3.3.2"
@@ -69,6 +70,8 @@
     "sass": "^1.16.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
+    "stylelint": "^8.4.0",
+    "stylelint-scss": "^2.2.0",
     "webpack-bundle-analyzer": "^3.0.3"
   },
   "browserslist": [
@@ -125,7 +128,7 @@
     }
   },
   "scripts": {
-    "build": "rollup -c && build-storybook -c .storybook -s example -o public && sass src/index.scss | npx postcss --use autoprefixer --no-map > dist/react-streamfield.css",
+    "build": "rollup -c && build-storybook -c .storybook -s example -o public && sass src/scss/index.scss | npx postcss --use autoprefixer --no-map > dist/react-streamfield.css",
     "start": "start-storybook -c .storybook -s example -p 9001",
     "test": "jest",
     "test:watch": "jest --watch",

public/example.scss

@@ -3,12 +3,12 @@ body {
   padding: 15px;
 }
 
-.children-container .block > .block-container > .content-container > .content.full {
-    padding: 0;
+.c-sf-block .c-sf-block__content-inner.full {
+  padding: 0;
 }
 
-.children-container .block > .block-container > .content-container > .content.full input,
-.children-container .block > .block-container > .content-container > .content.full textarea {
+.c-sf-block .c-sf-block__content-inner.full input,
+.c-sf-block .c-sf-block__content-inner.full textarea {
   display: block;
   min-width: 100%;
   max-width: 100%;
@@ -18,7 +18,7 @@ body {
   outline: none;
 }
 
-.children-container .block > .block-container > .content-container > .content.full input {
+.c-sf-block .c-sf-block__content-inner.full input {
   font-size: 30px;
 }
 

src/AddButton.js

@@ -86,7 +86,7 @@ class AddButton extends React.Component {
     if (isNA(icon)) {
       return null;
     }
-    return <span className="icon" dangerouslySetInnerHTML={
+    return <span className="c-sf-button__icon" dangerouslySetInnerHTML={
       {__html: icon}
     } />;
   }
@@ -111,8 +111,8 @@ class AddButton extends React.Component {
     const button = (
       <button onClick={this.toggle} title={labels.add}
               className={classNames(
-                'add', visible && 'visible',
-                (this.state.open && this.hasChoice) && 'close')}
+                'c-sf-add-button', visible && 'is-visible',
+                (this.state.open && this.hasChoice) && 'is-closed')}
               dangerouslySetInnerHTML={{__html: icons.add}}>
       </button>
     );
@@ -121,16 +121,16 @@ class AddButton extends React.Component {
         <>
           {button}
           <AnimateHeight height={this.panelHeight} easing="ease-in-out"
-                         contentClassName="add-panel">
+                         contentClassName="c-sf-add-panel">
             {Object.entries(this.groupedBlockDefinitions).map(
               ([group, blockDefinitions]) => (
                 <div key={group}>
-                  {group ? <h4 className="group-name">{group}</h4> : null}
+                  {group ? <h4 className="c-sf-add-panel__group-title">{group}</h4> : null}
                   {blockDefinitions.map(blockDefinition =>
                     <button key={blockDefinition.key} onClick={this.addHandler}
-                            value={blockDefinition.key} className="type">
+                            value={blockDefinition.key} className="c-sf-button">
                       {this.getIcon(blockDefinition)}
-                      <span className="label">{getLabel(blockDefinition)}</span>
+                      <span className="c-sf-button__label">{getLabel(blockDefinition)}</span>
                     </button>
                   )}
                 </div>

src/Block.js

@@ -110,16 +110,16 @@ class Block extends React.Component {
       layout, isSimpleLayout, fieldId, id, parentId, index, hasError,
       collapsible, sortable, canAdd,
     } = this.props;
-    const className = `block${hasError ? ' has-error' : ''}`;
+    const blockClassName = `c-sf-block ${layout} ${hasError ? 'has-error' : ''}`;
     if (sortable) {
       return (
         <Draggable draggableId={id} index={index}
                    type={`${fieldId}-${parentId}`}>
           {(provided, snapshot) => (
-            <article className={className}
+            <article className="c-sf-container__block-container"
                      ref={provided.innerRef}
                      {...provided.draggableProps}>
-              <div className={`block-container ${layout}`}>
+              <div className={blockClassName}>
                 <BlockHeader fieldId={fieldId} blockId={id}
                              collapsibleBlock={collapsible}
                              sortableBlock={sortable}

src/BlockActions.js

@@ -110,27 +110,31 @@ class BlockActions extends React.Component {
       icons, labels,
     } = this.props;
     return (
-      <aside>
-        <div className="actions">
+      <aside className="c-sf-block__aside">
+        <div className="c-sf-block__actions">
           {sortableBlock ?
             <>
-              <button onClick={this.moveUpHandler}
+              <button className="c-sf-block__actions__single"
+                      onClick={this.moveUpHandler}
                       title={labels.moveUp} disabled={this.isFirst}
                       dangerouslySetInnerHTML={{__html: icons.moveUp}} />
-              <button onClick={this.moveDownHandler}
+              <button className="c-sf-block__actions__single"
+                      onClick={this.moveDownHandler}
                       title={labels.moveDown} disabled={this.isLast}
                       dangerouslySetInnerHTML={{__html: icons.moveDown}} />
             </>
             :
             null}
-          <button onClick={this.duplicateHandler}
+          <button className="c-sf-block__actions__single"
+                  onClick={this.duplicateHandler}
                   title={labels.duplicate} disabled={!canDuplicate}
                   dangerouslySetInnerHTML={{__html: icons.duplicate}} />
-          <button onClick={this.deleteHandler} title={labels.delete}
+          <button className="c-sf-block__actions__single"
+                  onClick={this.deleteHandler} title={labels.delete}
                   dangerouslySetInnerHTML={{__html: icons.delete}} />
         </div>
         {isSimpleLayout ?
-          <span className="block-type">
+          <span className="c-sf-block__type">
             {getLabel(blockDefinition)}
           </span>
           :

src/BlockContent.js

@@ -68,18 +68,18 @@ class BlockContent extends React.Component {
   render() {
     const {isSimpleLayout, blockDefinition, collapsible} = this.props;
     const content = this.html;
-    const className = classNames('content', blockDefinition.className);
+    const className = classNames('c-sf-block__content-inner', blockDefinition.className);
     if (collapsible && !isSimpleLayout) {
       return (
         <AnimateHeight height={this.height} easing="ease-in-out"
-                       className="content-container"
+                       className="c-sf-block__content"
                        contentClassName={className}>
           {content}
         </AnimateHeight>
       );
     }
     return (
-      <div className="content-container">
+      <div className="c-sf-block__content">
         <div className={className}>
           {content}
         </div>

src/BlockHeader.js

@@ -85,28 +85,28 @@ class BlockHeader extends React.Component {
     const title = this.title;
     let icon = this.props.blockDefinition.icon;
     const blockType = (
-      <span className="block-type">
+      <span className="c-sf-block__type">
         {getLabel(this.props.blockDefinition)}
       </span>
     );
     if (isNA(icon)) {
       return blockType;
     }
 
-    icon = <span className="type-icon"
+    icon = <span className="c-sf-block__header__title__icon"
                  dangerouslySetInnerHTML={{__html: icon}} />;
 
     if (title) {
       return (
         <>
-          <h3>{icon}{title}</h3>
+          <h3 className="c-sf-block__header__title">{icon}{title}</h3>
           {blockType}
         </>
       );
     }
     return (
       <span>
-        <h3>{icon}{title}</h3>
+        <h3 className="c-sf-block__header__title">{icon}{title}</h3>
         {blockType}
       </span>
     );
@@ -134,7 +134,7 @@ class BlockHeader extends React.Component {
     let content;
     if (isSimpleLayout) {
       content = (
-        <h3 dangerouslySetInnerHTML={{__html: icon ? icon : icons.grip}} />
+        <div className="c-sf-block__header__title" dangerouslySetInnerHTML={{__html: icon ? icon : icons.grip}} />
       );
     } else {
       content = (
@@ -148,12 +148,13 @@ class BlockHeader extends React.Component {
       );
     }
     return (
-      <header ref={dragHandleRef}  onClick={this.toggle}
+      <div ref={dragHandleRef}  onClick={this.toggle}
               {...dragHandleProps}
-              className={classNames(collapsibleBlock && 'collapsible',
-                                    sortableBlock && 'sortable')}>
+              className={classNames('c-sf-block__header',
+                                    collapsibleBlock && 'is-collapsible',
+                                    sortableBlock && 'is-sortable')}>
         {content}
-      </header>
+      </div>
     );
   }
 }

src/BlocksContainer.js

@@ -60,9 +60,9 @@ class BlocksContainer extends React.Component {
         {(provided, snapshot) => (
           <div ref={provided.innerRef}
                className={classNames(
-                 'children-container',
+                 'c-sf-container',
                  snapshot.isDraggingOver && 'is-dragging',
-                 gutteredAdd && 'guttered-add')}>
+                 gutteredAdd && 'c-sf-container--add-in-gutter')}>
             <AddButton fieldId={fieldId} parentId={id}
                        open={blocksIds.length === 0} visible={canAdd} />
             {blocksIds.map(blockId => this.renderBlock(blockId, canAdd))}

src/StructChildField.js

@@ -32,7 +32,7 @@ class StructChildField extends React.Component {
     return (
       <div className={classNames('field',
                                  !!blockDefinition.required && 'required')}>
-        <label htmlFor={getFieldName(blockId)}>
+        <label className='field__label' htmlFor={getFieldName(blockId)}>
           {getLabel(blockDefinition)}
         </label>
         <FieldInput fieldId={fieldId} blockId={blockId} />