From 96443857fe0ab4199faf5b976a82079b11217e08 Mon Sep 17 00:00:00 2001
From: Jonny Scholes <jonnyscholes@gmail.com>
Date: Thu, 7 Mar 2019 11:00:59 +1100
Subject: [PATCH 01/11] Start breaking scss up into multiple files and start
 BEM-ification

---
 .storybook/config.js                     |  2 +-
 example/example.scss                     |  8 ++--
 package.json                             |  2 +-
 src/AddButton.js                         |  2 +-
 src/BlocksContainer.js                   |  2 +-
 src/StructChildField.js                  |  2 +-
 src/scss/_config.scss                    | 24 ++++++++++
 src/scss/components/c-sf-add-button.scss | 32 +++++++++++++
 src/scss/components/c-sf-container.scss  | 54 +++++++++++++++++++++
 src/{ => scss}/index.scss                | 61 +++---------------------
 10 files changed, 126 insertions(+), 63 deletions(-)
 create mode 100644 src/scss/_config.scss
 create mode 100644 src/scss/components/c-sf-add-button.scss
 create mode 100644 src/scss/components/c-sf-container.scss
 rename src/{ => scss}/index.scss (83%)

diff --git a/.storybook/config.js b/.storybook/config.js
index 0126cd9..bf23bbb 100644
--- a/.storybook/config.js
+++ b/.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);
diff --git a/example/example.scss b/example/example.scss
index ffb3b59..d364b48 100644
--- a/example/example.scss
+++ b/example/example.scss
@@ -3,12 +3,12 @@ body {
   padding: 15px;
 }
 
-.children-container .block > .block-container > .content-container > .content.full {
+.streamfield-container .block > .block-container > .content-container > .content.full {
     padding: 0;
 }
 
-.children-container .block > .block-container > .content-container > .content.full input,
-.children-container .block > .block-container > .content-container > .content.full textarea {
+.streamfield-container .block > .block-container > .content-container > .content.full input,
+.streamfield-container .block > .block-container > .content-container > .content.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 {
+.streamfield-container .block > .block-container > .content-container > .content.full input {
   font-size: 30px;
 }
 
diff --git a/package.json b/package.json
index 13d0b38..9e16c70 100644
--- a/package.json
+++ b/package.json
@@ -125,7 +125,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",
diff --git a/src/AddButton.js b/src/AddButton.js
index cc7e072..c681ea7 100644
--- a/src/AddButton.js
+++ b/src/AddButton.js
@@ -111,7 +111,7 @@ class AddButton extends React.Component {
     const button = (
       <button onClick={this.toggle} title={labels.add}
               className={classNames(
-                'add', visible && 'visible',
+                'c-sf-add-button', visible && 'visible',
                 (this.state.open && this.hasChoice) && 'close')}
               dangerouslySetInnerHTML={{__html: icons.add}}>
       </button>
diff --git a/src/BlocksContainer.js b/src/BlocksContainer.js
index 4a78b0c..675b1fb 100644
--- a/src/BlocksContainer.js
+++ b/src/BlocksContainer.js
@@ -60,7 +60,7 @@ class BlocksContainer extends React.Component {
         {(provided, snapshot) => (
           <div ref={provided.innerRef}
                className={classNames(
-                 'children-container',
+                 'streamfield-container',
                  snapshot.isDraggingOver && 'is-dragging',
                  gutteredAdd && 'guttered-add')}>
             <AddButton fieldId={fieldId} parentId={id}
diff --git a/src/StructChildField.js b/src/StructChildField.js
index a27df38..baa1cd8 100644
--- a/src/StructChildField.js
+++ b/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} />
diff --git a/src/scss/_config.scss b/src/scss/_config.scss
new file mode 100644
index 0000000..02b6cb5
--- /dev/null
+++ b/src/scss/_config.scss
@@ -0,0 +1,24 @@
+$grid-gutter-width: 30px;
+$header-padding: 8px;
+$block-vertical-padding: 3px;
+$block-full-padding: $block-vertical-padding 0;
+$add-button-size: 34px;
+$add-button-font-size: 28px;
+$children-container-padding: $add-button-size / 2;
+$action-font-size: 15px;
+$add-transition-duration: 0.3s;
+$hover-transition-duration: 0.3s;
+$bounce-transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+$border-radius: 3px;
+$teal: #007d7e;
+$header-text-color-focus: #4d4d4d;
+$header-text-color: #888888;
+$block-border-color: #e6e6e6;
+$block-border-color-focus: #bbbbbb;
+$block-hover-background: #f5f5f5;
+$error-color: #cd3238;
+$error-border-color: #dbc7c8;
+$error-border-color-focus: #cdb2b3;
+$error-background-color: #fbefef;
+$screen-xs-max: 799px;
+$screen-sm-min: 800px;
diff --git a/src/scss/components/c-sf-add-button.scss b/src/scss/components/c-sf-add-button.scss
new file mode 100644
index 0000000..7796fe2
--- /dev/null
+++ b/src/scss/components/c-sf-add-button.scss
@@ -0,0 +1,32 @@
+.c-sf-add-button {
+  width: 100%;
+  height: $add-button-size;
+  appearance: none;
+  border: none;
+  color: $teal;
+  font-weight: bold;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  outline: none;
+  backface-visibility: hidden;
+  overflow: hidden;  // Makes the rotated i box not clickable.
+  user-select: none;
+  opacity: 0;
+  transition: opacity $hover-transition-duration ease-in-out;
+  pointer-events: none;
+  &.visible {
+    opacity: 1;
+    pointer-events: unset;
+  }
+  i {
+    display: block;
+    transition: transform $add-transition-duration $bounce-transition-timing;
+    font-style: normal;
+    font-size: $add-button-font-size;
+    line-height: $add-button-font-size;
+  }
+  &.close i {
+    transform: rotate(45deg);
+  }
+}
diff --git a/src/scss/components/c-sf-container.scss b/src/scss/components/c-sf-container.scss
new file mode 100644
index 0000000..d504dad
--- /dev/null
+++ b/src/scss/components/c-sf-container.scss
@@ -0,0 +1,54 @@
+.c-sf-container {
+  position: relative;
+  padding: $children-container-padding 0;
+  transition: padding $hover-transition-duration ease-in-out;
+  &__add {
+    width: 100%;
+    height: $add-button-size;
+    appearance: none;
+    border: none;
+    color: $teal;
+    font-weight: bold;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+    outline: none;
+    backface-visibility: hidden;
+    overflow: hidden;  // Makes the rotated i box not clickable.
+    user-select: none;
+    opacity: 0;
+    transition: opacity $hover-transition-duration ease-in-out;
+    pointer-events: none;
+    i {
+      display: block;
+      transition: transform $add-transition-duration $bounce-transition-timing;
+      font-style: normal;
+      font-size: $add-button-font-size;
+      line-height: $add-button-font-size;
+    }
+    &.visible {
+      opacity: 1;
+      pointer-events: unset;
+    }
+    &.close i {
+      transform: rotate(45deg);
+    }
+  }
+
+  &.guttered-add {
+    @media (min-width: $screen-sm-min) {
+      padding-left: $add-button-size;
+      button.add {
+        position: absolute;
+        width: $add-button-size;
+        transform: translate(-100%, -50%);
+      }
+    }
+  }
+  &.is-dragging {
+    button.add.visible {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}
diff --git a/src/index.scss b/src/scss/index.scss
similarity index 83%
rename from src/index.scss
rename to src/scss/index.scss
index 64a242d..628990f 100644
--- a/src/index.scss
+++ b/src/scss/index.scss
@@ -23,27 +23,12 @@ $error-background-color: #fbefef;
 $screen-xs-max: 799px;
 $screen-sm-min: 800px;
 
-.children-container {
-  position: relative;
-  padding: $children-container-padding 0
-           $children-container-padding 0;
-  transition: padding $hover-transition-duration ease-in-out;
-  &.guttered-add {
-    @media (min-width: $screen-sm-min) {
-      padding-left: $add-button-size;
-      button.add {
-        position: absolute;
-        width: $add-button-size;
-        transform: translate(-100%, -50%);
-      }
-    }
-  }
-  &.is-dragging {
-    button.add.visible {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
+@import 'config';
+
+@import 'components/c-sf-container';
+@import 'components/c-sf-add-button';
+
+
   .block {
     position: relative;
     display: flex;
@@ -212,38 +197,7 @@ $screen-sm-min: 800px;
       }
     }
   }
-  button.add {
-    width: 100%;
-    height: $add-button-size;
-    appearance: none;
-    border: none;
-    color: $teal;
-    font-weight: bold;
-    background: none;
-    padding: 0;
-    cursor: pointer;
-    outline: none;
-    backface-visibility: hidden;
-    overflow: hidden;  // Makes the rotated i box not clickable.
-    user-select: none;
-    opacity: 0;
-    transition: opacity $hover-transition-duration ease-in-out;
-    pointer-events: none;
-    &.visible {
-      opacity: 1;
-      pointer-events: unset;
-    }
-    i {
-      display: block;
-      transition: transform $add-transition-duration $bounce-transition-timing;
-      font-style: normal;
-      font-size: $add-button-font-size;
-      line-height: $add-button-font-size;
-    }
-    &.close i {
-      transform: rotate(45deg);
-    }
-  }
+
 
   label {
     display: block;
@@ -304,4 +258,3 @@ $screen-sm-min: 800px;
       }
     }
   }
-}

From 2c0d8f903dda2ca438d49dd8e0b6744a561650bf Mon Sep 17 00:00:00 2001
From: Jonny Scholes <jonnyscholes@gmail.com>
Date: Thu, 7 Mar 2019 18:35:36 +1100
Subject: [PATCH 02/11] Add stylelint and editorconfig from main Wagtail
 project for consistency

---
 .editorconfig     | 21 +++++++++++++
 .stylelintrc.yaml | 79 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  3 ++
 3 files changed, 103 insertions(+)
 create mode 100644 .editorconfig
 create mode 100644 .stylelintrc.yaml

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..752cc48
--- /dev/null
+++ b/.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
diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml
new file mode 100644
index 0000000..e5ddbeb
--- /dev/null
+++ b/.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
diff --git a/package.json b/package.json
index 9e16c70..74a8517 100644
--- a/package.json
+++ b/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": [

From 444199c9e26b458a1ba1f8fc8fcd2b5fc9a0b9ca Mon Sep 17 00:00:00 2001
From: Jonny Scholes <jonnyscholes@gmail.com>
Date: Thu, 7 Mar 2019 18:36:18 +1100
Subject: [PATCH 03/11] Break out rest of primary components

---
 example/example.scss                    |  10 +-
 src/AddButton.js                        |  10 +-
 src/Block.js                            |   4 +-
 src/BlocksContainer.js                  |   2 +-
 src/scss/components/c-sf-add-panel.scss |  10 +
 src/scss/components/c-sf-block.scss     | 206 +++++++++++++++++++++
 src/scss/components/c-sf-button.scss    |  23 +++
 src/scss/components/c-sf-container.scss |  22 +++
 src/scss/index.scss                     | 236 +-----------------------
 9 files changed, 278 insertions(+), 245 deletions(-)
 create mode 100644 src/scss/components/c-sf-add-panel.scss
 create mode 100644 src/scss/components/c-sf-block.scss
 create mode 100644 src/scss/components/c-sf-button.scss

diff --git a/example/example.scss b/example/example.scss
index d364b48..f61bab1 100644
--- a/example/example.scss
+++ b/example/example.scss
@@ -3,12 +3,12 @@ body {
   padding: 15px;
 }
 
-.streamfield-container .block > .block-container > .content-container > .content.full {
-    padding: 0;
+.c-sf-block .content-container .content.full {
+  padding: 0;
 }
 
-.streamfield-container .block > .block-container > .content-container > .content.full input,
-.streamfield-container .block > .block-container > .content-container > .content.full textarea {
+.c-sf-block .content-container .content.full input,
+.c-sf-block .content-container .content.full textarea {
   display: block;
   min-width: 100%;
   max-width: 100%;
@@ -18,7 +18,7 @@ body {
   outline: none;
 }
 
-.streamfield-container .block > .block-container > .content-container > .content.full input {
+.c-sf-block .content-container .content.full input {
   font-size: 30px;
 }
 
diff --git a/src/AddButton.js b/src/AddButton.js
index c681ea7..cb919ab 100644
--- a/src/AddButton.js
+++ b/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}
     } />;
   }
@@ -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>
diff --git a/src/Block.js b/src/Block.js
index 6ed21ff..6a9a6ef 100644
--- a/src/Block.js
+++ b/src/Block.js
@@ -110,7 +110,7 @@ class Block extends React.Component {
       layout, isSimpleLayout, fieldId, id, parentId, index, hasError,
       collapsible, sortable, canAdd,
     } = this.props;
-    const className = `block${hasError ? ' has-error' : ''}`;
+    const className = `c-sf-block${hasError ? ' has-error' : ''}`;
     if (sortable) {
       return (
         <Draggable draggableId={id} index={index}
@@ -119,7 +119,7 @@ class Block extends React.Component {
             <article className={className}
                      ref={provided.innerRef}
                      {...provided.draggableProps}>
-              <div className={`block-container ${layout}`}>
+              <div className={`c-sf-block__inner ${layout}`}>
                 <BlockHeader fieldId={fieldId} blockId={id}
                              collapsibleBlock={collapsible}
                              sortableBlock={sortable}
diff --git a/src/BlocksContainer.js b/src/BlocksContainer.js
index 675b1fb..0bf43d4 100644
--- a/src/BlocksContainer.js
+++ b/src/BlocksContainer.js
@@ -60,7 +60,7 @@ class BlocksContainer extends React.Component {
         {(provided, snapshot) => (
           <div ref={provided.innerRef}
                className={classNames(
-                 'streamfield-container',
+                 'c-sf-container',
                  snapshot.isDraggingOver && 'is-dragging',
                  gutteredAdd && 'guttered-add')}>
             <AddButton fieldId={fieldId} parentId={id}
diff --git a/src/scss/components/c-sf-add-panel.scss b/src/scss/components/c-sf-add-panel.scss
new file mode 100644
index 0000000..d9bf603
--- /dev/null
+++ b/src/scss/components/c-sf-add-panel.scss
@@ -0,0 +1,10 @@
+.c-sf-add-panel {
+  position: relative;
+  padding: $grid-gutter-width / 4;
+  background: #EEEEEE;
+  border-radius: $border-radius;
+  user-select: none;
+  &__group-title {
+    margin: $grid-gutter-width / 4 $grid-gutter-width / 4 0;
+  }
+}
diff --git a/src/scss/components/c-sf-block.scss b/src/scss/components/c-sf-block.scss
new file mode 100644
index 0000000..8b5d3d2
--- /dev/null
+++ b/src/scss/components/c-sf-block.scss
@@ -0,0 +1,206 @@
+.c-sf-block {
+    $c-root: &;
+    position: relative;
+    display: flex;
+    padding: $block-full-padding;
+
+    &.has-error {
+        #{$c-root}__inner {
+            border-color: $error-border-color;
+
+            > header {
+                background: $error-background-color;
+            }
+
+            > .content-container > .content {
+                border-color: $error-border-color;
+            }
+        }
+
+        &:hover,
+        &:focus,
+        &:focus-within {
+            #{$c-root}__inner {
+                border-color: $error-border-color-focus;
+
+                > header {
+                    background: $error-background-color;
+                }
+
+                > .content-container > .content {
+                    border-color: $error-border-color-focus;
+                }
+            }
+        }
+    }
+
+    &__inner {
+        flex: 1 1 auto;
+        width: 0; // Trick to prevent overflow from the title.
+        border: 1px solid $block-border-color;
+        border-radius: $border-radius;
+        background: white;
+        transition: border-color $hover-transition-duration ease-in-out;
+        transition-property: border-color, box-shadow;
+
+        &.SIMPLE {
+            display: flex;
+            flex-flow: row nowrap;
+
+            > header {
+                position: relative;
+                flex: 0 0 auto;
+                padding: $header-padding;
+
+                h3 {
+                    position: sticky;
+                    top: $grid-gutter-width / 4;
+                    bottom: $grid-gutter-width / 4;
+                }
+            }
+
+            > .content-container {
+                flex: 1 1 auto;
+                display: flex;
+                flex-flow: column nowrap;
+                justify-content: space-around;
+                width: 0; // Trick to prevent content from overflowing, while
+                // allowing for some overflow, like Draftail tooltips.
+            }
+
+            > aside {
+                display: flex;
+                flex-flow: column nowrap;
+                align-items: flex-end;
+
+                .block-type {
+                    margin: 0 $header-padding $header-padding $header-padding;
+                }
+            }
+        }
+
+        &.COLLAPSIBLE {
+            overflow: hidden;
+
+            > header {
+                h3 {
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+
+                    .type-icon {
+                        margin-right: $header-padding;
+                    }
+                }
+
+                > aside {
+                    flex: 0 0 auto;
+                }
+            }
+        }
+
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-left: $header-padding;
+            user-select: none;
+            transition: background-color $hover-transition-duration ease-in-out;
+            cursor: default;
+
+            &.collapsible {
+                cursor: pointer;
+            }
+
+            &.sortable {
+                cursor: grab;
+            }
+
+            h3 {
+                display: inline-block;
+                flex: 1 1 auto;
+                margin: 0;
+                color: $header-text-color;
+                vertical-align: middle;
+
+                .type-icon {
+                    color: $header-text-color;
+                    transition: color $hover-transition-duration ease-in-out;
+                }
+            }
+        }
+
+        header,
+        & {
+            .block-type {
+                margin-right: $header-padding * 2;
+                text-transform: uppercase;
+                text-align: right;
+                font-size: 80%;
+                line-height: 100%;
+                color: $header-text-color;
+                vertical-align: middle;
+                user-select: none;
+            }
+
+            > aside > .actions {
+                white-space: nowrap;
+
+                > button {
+                    appearance: none;
+                    border: none;
+                    padding: $header-padding;
+                    background: none;
+                    cursor: pointer;
+                    color: $header-text-color;
+                    opacity: 1;
+                    transition: opacity $hover-transition-duration ease-in-out;
+                    transition-property: opacity, color;
+                    font-size: $action-font-size;
+
+                    i {
+                        font-style: normal;
+                    }
+
+                    &[disabled] {
+                        opacity: 0.2;
+                        pointer-events: none;
+                    }
+                }
+            }
+        }
+
+        .content-container > .content {
+            padding: 12px;
+        }
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-within {
+        #{$c-root}__inner {
+            border-color: $block-border-color-focus;
+            box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
+
+            > header {
+                background: $block-hover-background;
+
+                h3 {
+                    color: $header-text-color-focus;
+
+                    .type-icon {
+                        color: $header-text-color-focus;
+                    }
+                }
+
+                > aside > .actions > button {
+                    color: $header-text-color-focus;
+                }
+            }
+
+            > .content-container > .content {
+                border-color: $block-border-color-focus;
+            }
+        }
+    }
+}
diff --git a/src/scss/components/c-sf-button.scss b/src/scss/components/c-sf-button.scss
new file mode 100644
index 0000000..3188da6
--- /dev/null
+++ b/src/scss/components/c-sf-button.scss
@@ -0,0 +1,23 @@
+.c-sf-button {
+  margin: $grid-gutter-width / 4;
+  appearance: none;
+  background: $teal;
+  color: white;
+  padding: 0;
+  border: none;
+  border-radius: $border-radius;
+  outline: none;
+  cursor: pointer;
+  overflow: hidden;
+  &__icon,
+  &__label {
+    display: inline-block;
+    padding: 6px 8px;
+  }
+  &__icon {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+  &__label {
+    text-transform: uppercase;
+  }
+}
diff --git a/src/scss/components/c-sf-container.scss b/src/scss/components/c-sf-container.scss
index d504dad..c50ec46 100644
--- a/src/scss/components/c-sf-container.scss
+++ b/src/scss/components/c-sf-container.scss
@@ -51,4 +51,26 @@
       pointer-events: none;
     }
   }
+
+  // TODO: Remove these references to classes that are styled by core Wagtail CSS. The best
+  // opportunity for this is propably as part of Wagtails general CSS overhaul. -@jonnyscholes
+  .field {
+    + .field {
+      padding-top: $grid-gutter-width / 2;
+    }
+    &__label {
+      display: block;
+      font-weight: bold;
+      margin-bottom: $grid-gutter-width / 4;
+    }
+    &.required > label::after {
+      content: '*';
+      color: #cd3238;
+      font-weight: 700;
+      display: inline-block;
+      margin-left: .5em;
+      line-height: 1em;
+      font-size: 13px;
+    }
+  }
 }
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 628990f..014221b 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -25,236 +25,8 @@ $screen-sm-min: 800px;
 
 @import 'config';
 
-@import 'components/c-sf-container';
 @import 'components/c-sf-add-button';
-
-
-  .block {
-    position: relative;
-    display: flex;
-    padding: $block-full-padding;
-    &.has-error {
-      > .block-container {
-        border-color: $error-border-color;
-        > header {
-          background: $error-background-color;
-        }
-        > .content-container > .content {
-          border-color: $error-border-color;
-        }
-      }
-      &:hover, &:focus, &:focus-within {
-        > .block-container {
-          border-color: $error-border-color-focus;
-          > header {
-            background: $error-background-color;
-          }
-          > .content-container > .content {
-            border-color: $error-border-color-focus;
-          }
-        }
-      }
-    }
-    > .block-container {
-      flex: 1 1 auto;
-      width: 0;  // Trick to prevent overflow from the title.
-      border: 1px solid $block-border-color;
-      border-radius: $border-radius;
-      background: white;
-      transition: border-color $hover-transition-duration ease-in-out;
-      transition-property: border-color, box-shadow;
-      &.SIMPLE {
-        display: flex;
-        flex-flow: row nowrap;
-        > header {
-          position: relative;
-          flex: 0 0 auto;
-          padding: $header-padding;
-          h3 {
-            position: sticky;
-            top: $grid-gutter-width / 4;
-            bottom: $grid-gutter-width / 4;
-          }
-        }
-        > .content-container {
-          flex: 1 1 auto;
-          display: flex;
-          flex-flow: column nowrap;
-          justify-content: space-around;
-          width: 0;  // Trick to prevent content from overflowing, while
-                     // allowing for some overflow, like Draftail tooltips.
-        }
-        > aside {
-          display: flex;
-          flex-flow: column nowrap;
-          align-items: flex-end;
-          .block-type {
-            margin: 0 $header-padding $header-padding $header-padding;
-          }
-        }
-      }
-      &.COLLAPSIBLE {
-        overflow: hidden;
-        > header {
-          h3 {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            .type-icon {
-              margin-right: $header-padding;
-            }
-          }
-          > aside {
-            flex: 0 0 auto;
-          }
-        }
-      }
-      > header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-left: $header-padding;
-        user-select: none;
-        transition: background-color $hover-transition-duration ease-in-out;
-        cursor: default;
-        &.collapsible {
-          cursor: pointer;
-        }
-        &.sortable {
-          cursor: grab;
-        }
-        h3 {
-          display: inline-block;
-          flex: 1 1 auto;
-          margin: 0;
-          color: $header-text-color;
-          vertical-align: middle;
-          .type-icon {
-            color: $header-text-color;
-            transition: color $hover-transition-duration ease-in-out;
-          }
-        }
-      }
-      > header, & {
-        .block-type {
-          margin-right: $header-padding * 2;
-          text-transform: uppercase;
-          text-align: right;
-          font-size: 80%;
-          line-height: 100%;
-          color: $header-text-color;
-          vertical-align: middle;
-          user-select: none;
-        }
-        > aside > .actions {
-          white-space: nowrap;
-          > button {
-            appearance: none;
-            border: none;
-            padding: $header-padding;
-            background: none;
-            cursor: pointer;
-            color: $header-text-color;
-            opacity: 1;
-            transition: opacity $hover-transition-duration ease-in-out;
-            transition-property: opacity, color;
-            font-size: $action-font-size;
-
-            i {
-              font-style: normal;
-            }
-
-            &[disabled] {
-              opacity: 0.2;
-              pointer-events: none;
-            }
-          }
-        }
-      }
-      > .content-container > .content {
-        padding: 12px;
-      }
-    }
-    &:hover, &:focus, &:focus-within {
-      > .block-container {
-        border-color: $block-border-color-focus;
-        box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, .1);
-        > header {
-          background: $block-hover-background;
-          h3 {
-            color: $header-text-color-focus;
-            .type-icon {
-              color: $header-text-color-focus;
-            }
-          }
-          > aside > .actions > button {
-            color: $header-text-color-focus;
-          }
-        }
-        > .content-container > .content {
-          border-color: $block-border-color-focus;
-        }
-      }
-    }
-  }
-
-
-  label {
-    display: block;
-    font-weight: bold;
-    + label {
-      margin-top: $grid-gutter-width / 2;
-    }
-  }
-
-  .field {
-    + .field {
-      padding-top: $grid-gutter-width / 2;
-    }
-    label {
-      margin-bottom: $grid-gutter-width / 4;
-    }
-    &.required > label::after {
-      content: '*';
-      color: #cd3238;
-      font-weight: 700;
-      display: inline-block;
-      margin-left: .5em;
-      line-height: 1em;
-      font-size: 13px;
-    }
-  }
-
-
-  .add-panel {
-    position: relative;
-    padding: $grid-gutter-width / 4;
-    background: #EEEEEE;
-    border-radius: $border-radius;
-    user-select: none;
-    .group-name {
-      margin: $grid-gutter-width / 4 $grid-gutter-width / 4 0;
-    }
-    button.type {
-      margin: $grid-gutter-width / 4;
-      appearance: none;
-      background: $teal;
-      color: white;
-      padding: 0;
-      border: none;
-      border-radius: $border-radius;
-      outline: none;
-      cursor: pointer;
-      overflow: hidden;
-      .icon, .label {
-        display: inline-block;
-        padding: 6px 8px;
-      }
-      .icon {
-        background-color: rgba(0, 0, 0, 0.2);
-      }
-      .label {
-        text-transform: uppercase;
-      }
-    }
-  }
+@import 'components/c-sf-add-panel';
+@import 'components/c-sf-button';
+@import 'components/c-sf-block';
+@import 'components/c-sf-container';

From a10902c6ceb8c0de07b02cce55badc3b3a638c25 Mon Sep 17 00:00:00 2001
From: Jonny Scholes <jonnyscholes@gmail.com>
Date: Thu, 7 Mar 2019 18:48:51 +1100
Subject: [PATCH 04/11] Make block component shallower

---
 src/Block.js                            |   6 +-
 src/scss/components/c-sf-block.scss     | 277 +++++++++++-------------
 src/scss/components/c-sf-container.scss | 149 +++++++------
 3 files changed, 217 insertions(+), 215 deletions(-)

diff --git a/src/Block.js b/src/Block.js
index 6a9a6ef..8b7a224 100644
--- a/src/Block.js
+++ b/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 = `c-sf-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={`c-sf-block__inner ${layout}`}>
+              <div className={blockClassName}>
                 <BlockHeader fieldId={fieldId} blockId={id}
                              collapsibleBlock={collapsible}
                              sortableBlock={sortable}
diff --git a/src/scss/components/c-sf-block.scss b/src/scss/components/c-sf-block.scss
index 8b5d3d2..593e6a8 100644
--- a/src/scss/components/c-sf-block.scss
+++ b/src/scss/components/c-sf-block.scss
@@ -1,206 +1,193 @@
 .c-sf-block {
-    $c-root: &;
-    position: relative;
-    display: flex;
-    padding: $block-full-padding;
+    flex: 1 1 auto;
+    width: 0; // Trick to prevent overflow from the title.
+    border: 1px solid $block-border-color;
+    border-radius: $border-radius;
+    background: white;
+    transition: border-color $hover-transition-duration ease-in-out;
+    transition-property: border-color, box-shadow;
 
     &.has-error {
-        #{$c-root}__inner {
-            border-color: $error-border-color;
+        border-color: $error-border-color;
 
-            > header {
-                background: $error-background-color;
-            }
+        > header {
+            background: $error-background-color;
+        }
 
-            > .content-container > .content {
-                border-color: $error-border-color;
-            }
+        > .content-container > .content {
+            border-color: $error-border-color;
         }
 
         &:hover,
         &:focus,
         &:focus-within {
-            #{$c-root}__inner {
-                border-color: $error-border-color-focus;
+            border-color: $error-border-color-focus;
 
-                > header {
-                    background: $error-background-color;
-                }
+            > header {
+                background: $error-background-color;
+            }
 
-                > .content-container > .content {
-                    border-color: $error-border-color-focus;
-                }
+            > .content-container > .content {
+                border-color: $error-border-color-focus;
             }
         }
     }
 
-    &__inner {
-        flex: 1 1 auto;
-        width: 0; // Trick to prevent overflow from the title.
-        border: 1px solid $block-border-color;
-        border-radius: $border-radius;
-        background: white;
-        transition: border-color $hover-transition-duration ease-in-out;
-        transition-property: border-color, box-shadow;
+    &.SIMPLE {
+        display: flex;
+        flex-flow: row nowrap;
 
-        &.SIMPLE {
-            display: flex;
-            flex-flow: row nowrap;
+        > header {
+            position: relative;
+            flex: 0 0 auto;
+            padding: $header-padding;
 
-            > header {
-                position: relative;
-                flex: 0 0 auto;
-                padding: $header-padding;
-
-                h3 {
-                    position: sticky;
-                    top: $grid-gutter-width / 4;
-                    bottom: $grid-gutter-width / 4;
-                }
+            h3 {
+                position: sticky;
+                top: $grid-gutter-width / 4;
+                bottom: $grid-gutter-width / 4;
             }
+        }
 
-            > .content-container {
-                flex: 1 1 auto;
-                display: flex;
-                flex-flow: column nowrap;
-                justify-content: space-around;
-                width: 0; // Trick to prevent content from overflowing, while
-                // allowing for some overflow, like Draftail tooltips.
-            }
+        > .content-container {
+            flex: 1 1 auto;
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: space-around;
+            width: 0; // Trick to prevent content from overflowing, while
+            // allowing for some overflow, like Draftail tooltips.
+        }
 
-            > aside {
-                display: flex;
-                flex-flow: column nowrap;
-                align-items: flex-end;
+        > aside {
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: flex-end;
 
-                .block-type {
-                    margin: 0 $header-padding $header-padding $header-padding;
-                }
+            .block-type {
+                margin: 0 $header-padding $header-padding $header-padding;
             }
         }
+    }
 
-        &.COLLAPSIBLE {
-            overflow: hidden;
+    &.COLLAPSIBLE {
+        overflow: hidden;
 
-            > header {
-                h3 {
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-
-                    .type-icon {
-                        margin-right: $header-padding;
-                    }
-                }
+        > header {
+            h3 {
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
 
-                > aside {
-                    flex: 0 0 auto;
+                .type-icon {
+                    margin-right: $header-padding;
                 }
             }
+
+            > aside {
+                flex: 0 0 auto;
+            }
         }
+    }
 
-        header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding-left: $header-padding;
-            user-select: none;
-            transition: background-color $hover-transition-duration ease-in-out;
-            cursor: default;
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-left: $header-padding;
+        user-select: none;
+        transition: background-color $hover-transition-duration ease-in-out;
+        cursor: default;
+
+        &.collapsible {
+            cursor: pointer;
+        }
 
-            &.collapsible {
-                cursor: pointer;
-            }
+        &.sortable {
+            cursor: grab;
+        }
 
-            &.sortable {
-                cursor: grab;
-            }
+        h3 {
+            display: inline-block;
+            flex: 1 1 auto;
+            margin: 0;
+            color: $header-text-color;
+            vertical-align: middle;
 
-            h3 {
-                display: inline-block;
-                flex: 1 1 auto;
-                margin: 0;
+            .type-icon {
                 color: $header-text-color;
-                vertical-align: middle;
-
-                .type-icon {
-                    color: $header-text-color;
-                    transition: color $hover-transition-duration ease-in-out;
-                }
+                transition: color $hover-transition-duration ease-in-out;
             }
         }
+    }
 
-        header,
-        & {
-            .block-type {
-                margin-right: $header-padding * 2;
-                text-transform: uppercase;
-                text-align: right;
-                font-size: 80%;
-                line-height: 100%;
+    header,
+    & {
+        .block-type {
+            margin-right: $header-padding * 2;
+            text-transform: uppercase;
+            text-align: right;
+            font-size: 80%;
+            line-height: 100%;
+            color: $header-text-color;
+            vertical-align: middle;
+            user-select: none;
+        }
+
+        > aside > .actions {
+            white-space: nowrap;
+
+            > button {
+                appearance: none;
+                border: none;
+                padding: $header-padding;
+                background: none;
+                cursor: pointer;
                 color: $header-text-color;
-                vertical-align: middle;
-                user-select: none;
-            }
+                opacity: 1;
+                transition: opacity $hover-transition-duration ease-in-out;
+                transition-property: opacity, color;
+                font-size: $action-font-size;
 
-            > aside > .actions {
-                white-space: nowrap;
+                i {
+                    font-style: normal;
+                }
 
-                > button {
-                    appearance: none;
-                    border: none;
-                    padding: $header-padding;
-                    background: none;
-                    cursor: pointer;
-                    color: $header-text-color;
-                    opacity: 1;
-                    transition: opacity $hover-transition-duration ease-in-out;
-                    transition-property: opacity, color;
-                    font-size: $action-font-size;
-
-                    i {
-                        font-style: normal;
-                    }
-
-                    &[disabled] {
-                        opacity: 0.2;
-                        pointer-events: none;
-                    }
+                &[disabled] {
+                    opacity: 0.2;
+                    pointer-events: none;
                 }
             }
         }
+    }
 
-        .content-container > .content {
-            padding: 12px;
-        }
+    .content-container > .content {
+        padding: 12px;
     }
 
     &:hover,
     &:focus,
     &:focus-within {
-        #{$c-root}__inner {
-            border-color: $block-border-color-focus;
-            box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
+        border-color: $block-border-color-focus;
+        box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
 
-            > header {
-                background: $block-hover-background;
+        > header {
+            background: $block-hover-background;
 
-                h3 {
-                    color: $header-text-color-focus;
-
-                    .type-icon {
-                        color: $header-text-color-focus;
-                    }
-                }
+            h3 {
+                color: $header-text-color-focus;
 
-                > aside > .actions > button {
+                .type-icon {
                     color: $header-text-color-focus;
                 }
             }
 
-            > .content-container > .content {
-                border-color: $block-border-color-focus;
+            > aside > .actions > button {
+                color: $header-text-color-focus;
             }
         }
+
+        > .content-container > .content {
+            border-color: $block-border-color-focus;
+        }
     }
 }
diff --git a/src/scss/components/c-sf-container.scss b/src/scss/components/c-sf-container.scss
index c50ec46..e1884b3 100644
--- a/src/scss/components/c-sf-container.scss
+++ b/src/scss/components/c-sf-container.scss
@@ -1,76 +1,91 @@
 .c-sf-container {
-  position: relative;
-  padding: $children-container-padding 0;
-  transition: padding $hover-transition-duration ease-in-out;
-  &__add {
-    width: 100%;
-    height: $add-button-size;
-    appearance: none;
-    border: none;
-    color: $teal;
-    font-weight: bold;
-    background: none;
-    padding: 0;
-    cursor: pointer;
-    outline: none;
-    backface-visibility: hidden;
-    overflow: hidden;  // Makes the rotated i box not clickable.
-    user-select: none;
-    opacity: 0;
-    transition: opacity $hover-transition-duration ease-in-out;
-    pointer-events: none;
-    i {
-      display: block;
-      transition: transform $add-transition-duration $bounce-transition-timing;
-      font-style: normal;
-      font-size: $add-button-font-size;
-      line-height: $add-button-font-size;
-    }
-    &.visible {
-      opacity: 1;
-      pointer-events: unset;
-    }
-    &.close i {
-      transform: rotate(45deg);
-    }
-  }
+    position: relative;
+    padding: $children-container-padding 0;
+    transition: padding $hover-transition-duration ease-in-out;
 
-  &.guttered-add {
-    @media (min-width: $screen-sm-min) {
-      padding-left: $add-button-size;
-      button.add {
-        position: absolute;
-        width: $add-button-size;
-        transform: translate(-100%, -50%);
-      }
+    &__block-container {
+        position: relative;
+        display: flex;
+        padding: $block-full-padding;
     }
-  }
-  &.is-dragging {
-    button.add.visible {
-      opacity: 0;
-      pointer-events: none;
+
+    &__add {
+        width: 100%;
+        height: $add-button-size;
+        appearance: none;
+        border: 0 none;
+        color: $teal;
+        font-weight: bold;
+        background: none;
+        padding: 0;
+        cursor: pointer;
+        outline: none;
+        backface-visibility: hidden;
+        overflow: hidden; // Makes the rotated i box not clickable.
+        user-select: none;
+        opacity: 0;
+        transition: opacity $hover-transition-duration ease-in-out;
+        pointer-events: none;
+
+        i {
+            display: block;
+            transition: transform $add-transition-duration
+                $bounce-transition-timing;
+            font-style: normal;
+            font-size: $add-button-font-size;
+            line-height: $add-button-font-size;
+        }
+
+        &.visible {
+            opacity: 1;
+            pointer-events: unset;
+        }
+
+        &.close i {
+            transform: rotate(45deg);
+        }
     }
-  }
 
-  // TODO: Remove these references to classes that are styled by core Wagtail CSS. The best
-  // opportunity for this is propably as part of Wagtails general CSS overhaul. -@jonnyscholes
-  .field {
-    + .field {
-      padding-top: $grid-gutter-width / 2;
+    &.guttered-add {
+        @media (min-width: $screen-sm-min) {
+            padding-left: $add-button-size;
+
+            button.add {
+                position: absolute;
+                width: $add-button-size;
+                transform: translate(-100%, -50%);
+            }
+        }
     }
-    &__label {
-      display: block;
-      font-weight: bold;
-      margin-bottom: $grid-gutter-width / 4;
+
+    &.is-dragging {
+        button.add.visible {
+            opacity: 0;
+            pointer-events: none;
+        }
     }
-    &.required > label::after {
-      content: '*';
-      color: #cd3238;
-      font-weight: 700;
-      display: inline-block;
-      margin-left: .5em;
-      line-height: 1em;
-      font-size: 13px;
+
+    // TODO: Remove these references to classes that are styled by core Wagtail CSS. The best
+    // opportunity for this is propably as part of Wagtails general CSS overhaul. -@jonnyscholes
+    .field {
+        + .field {
+            padding-top: $grid-gutter-width / 2;
+        }
+
+        &__label {
+            display: block;
+            font-weight: bold;
+            margin-bottom: $grid-gutter-width / 4;
+        }
+
+        &.required > label::after {
+            content: '*';
+            color: #cd3238;
+            font-weight: 700;
+            display: inline-block;
+            margin-left: 0.5em;
+            line-height: 1em;
+            font-size: 13px;
+        }
     }
-  }
 }

From d467aaaaae10ca3f0c1c3966ece8e986395bca0c Mon Sep 17 00:00:00 2001
From: Jonny Scholes <jonnyscholes@gmail.com>
Date: Thu, 7 Mar 2019 20:41:26 +1100
Subject: [PATCH 05/11] More block component restructuring.

---
 example/example.scss                |   8 +-
 src/BlockActions.js                 |  18 ++-
 src/BlockContent.js                 |   6 +-
 src/BlockHeader.js                  |  17 +--
 src/scss/components/c-sf-block.scss | 200 +++++++++++++---------------
 5 files changed, 117 insertions(+), 132 deletions(-)

diff --git a/example/example.scss b/example/example.scss
index f61bab1..d3ee5dc 100644
--- a/example/example.scss
+++ b/example/example.scss
@@ -3,12 +3,12 @@ body {
   padding: 15px;
 }
 
-.c-sf-block .content-container .content.full {
+.c-sf-block .c-sf-block__content-inner.full {
   padding: 0;
 }
 
-.c-sf-block .content-container .content.full input,
-.c-sf-block .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;
 }
 
-.c-sf-block .content-container .content.full input {
+.c-sf-block .c-sf-block__content-inner.full input {
   font-size: 30px;
 }
 
diff --git a/src/BlockActions.js b/src/BlockActions.js
index bee5fb5..f321654 100644
--- a/src/BlockActions.js
+++ b/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>
           :
diff --git a/src/BlockContent.js b/src/BlockContent.js
index 9698f9b..20fe899 100644
--- a/src/BlockContent.js
+++ b/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>
diff --git a/src/BlockHeader.js b/src/BlockHeader.js
index 4a0000c..8fa45da 100644
--- a/src/BlockHeader.js
+++ b/src/BlockHeader.js
@@ -85,7 +85,7 @@ 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>
     );
@@ -93,20 +93,20 @@ class BlockHeader extends React.Component {
       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',
+              className={classNames('c-sf-block__header',
+                                    collapsibleBlock && 'collapsible',
                                     sortableBlock && 'sortable')}>
         {content}
-      </header>
+      </div>
     );
   }
 }
diff --git a/src/scss/components/c-sf-block.scss b/src/scss/components/c-sf-block.scss
index 593e6a8..af830aa 100644
--- a/src/scss/components/c-sf-block.scss
+++ b/src/scss/components/c-sf-block.scss
@@ -7,29 +7,95 @@
     transition: border-color $hover-transition-duration ease-in-out;
     transition-property: border-color, box-shadow;
 
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-left: $header-padding;
+        user-select: none;
+        transition: background-color $hover-transition-duration ease-in-out;
+        cursor: default;
+
+        &.collapsible {
+            cursor: pointer;
+        }
+
+        &.sortable {
+            cursor: grab;
+        }
+
+        &__title {
+            display: inline-block;
+            flex: 1 1 auto;
+            margin: 0;
+            color: $header-text-color;
+            vertical-align: middle;
+
+            &__icon {
+                color: currentColor;
+                transition: color $hover-transition-duration ease-in-out;
+            }
+        }
+    }
+
+    &__content {
+        &-inner {
+            padding: 12px;
+        }
+    }
+
+    &__actions {
+        white-space: nowrap;
+
+        &__single {
+            appearance: none;
+            border: 0 none;
+            padding: $header-padding;
+            background: none;
+            cursor: pointer;
+            color: $header-text-color;
+            opacity: 1;
+            transition: opacity $hover-transition-duration ease-in-out;
+            transition-property: opacity, color;
+            font-size: $action-font-size;
+
+            i {
+                font-style: normal;
+            }
+
+            &[disabled] {
+                opacity: 0.2;
+                pointer-events: none;
+            }
+        }
+    }
+
+    &__type {
+        margin-right: $header-padding * 2;
+        text-transform: uppercase;
+        text-align: right;
+        font-size: 80%;
+        line-height: 100%;
+        color: $header-text-color;
+        vertical-align: middle;
+        user-select: none;
+    }
+
     &.has-error {
         border-color: $error-border-color;
 
-        > header {
+        > .c-sf-block__header {
             background: $error-background-color;
         }
 
-        > .content-container > .content {
-            border-color: $error-border-color;
-        }
-
         &:hover,
         &:focus,
         &:focus-within {
             border-color: $error-border-color-focus;
 
-            > header {
+            > .c-sf-block__header {
                 background: $error-background-color;
             }
-
-            > .content-container > .content {
-                border-color: $error-border-color-focus;
-            }
         }
     }
 
@@ -37,19 +103,19 @@
         display: flex;
         flex-flow: row nowrap;
 
-        > header {
+        > .c-sf-block__header {
             position: relative;
             flex: 0 0 auto;
             padding: $header-padding;
 
-            h3 {
+            .c-sf-block__header__title {
                 position: sticky;
                 top: $grid-gutter-width / 4;
                 bottom: $grid-gutter-width / 4;
             }
         }
 
-        > .content-container {
+        > .c-sf-block__content {
             flex: 1 1 auto;
             display: flex;
             flex-flow: column nowrap;
@@ -58,12 +124,12 @@
             // allowing for some overflow, like Draftail tooltips.
         }
 
-        > aside {
+        > .c-sf-block__aside {
             display: flex;
             flex-flow: column nowrap;
             align-items: flex-end;
 
-            .block-type {
+            .c-sf-block__type {
                 margin: 0 $header-padding $header-padding $header-padding;
             }
         }
@@ -72,122 +138,36 @@
     &.COLLAPSIBLE {
         overflow: hidden;
 
-        > header {
-            h3 {
+        > .c-sf-block__header {
+            .c-sf-block__header__title {
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;
-
-                .type-icon {
-                    margin-right: $header-padding;
-                }
-            }
-
-            > aside {
-                flex: 0 0 auto;
             }
-        }
-    }
-
-    header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-left: $header-padding;
-        user-select: none;
-        transition: background-color $hover-transition-duration ease-in-out;
-        cursor: default;
-
-        &.collapsible {
-            cursor: pointer;
-        }
-
-        &.sortable {
-            cursor: grab;
-        }
-
-        h3 {
-            display: inline-block;
-            flex: 1 1 auto;
-            margin: 0;
-            color: $header-text-color;
-            vertical-align: middle;
 
-            .type-icon {
-                color: $header-text-color;
-                transition: color $hover-transition-duration ease-in-out;
+            .c-sf-block__header__title__icon {
+                margin-right: $header-padding;
             }
-        }
-    }
 
-    header,
-    & {
-        .block-type {
-            margin-right: $header-padding * 2;
-            text-transform: uppercase;
-            text-align: right;
-            font-size: 80%;
-            line-height: 100%;
-            color: $header-text-color;
-            vertical-align: middle;
-            user-select: none;
-        }
-
-        > aside > .actions {
-            white-space: nowrap;
-
-            > button {
-                appearance: none;
-                border: none;
-                padding: $header-padding;
-                background: none;
-                cursor: pointer;
-                color: $header-text-color;
-                opacity: 1;
-                transition: opacity $hover-transition-duration ease-in-out;
-                transition-property: opacity, color;
-                font-size: $action-font-size;
-
-                i {
-                    font-style: normal;
-                }
-
-                &[disabled] {
-                    opacity: 0.2;
-                    pointer-events: none;
-                }
+            > .c-sf-block__aside {
+                flex: 0 0 auto;
             }
         }
     }
 
-    .content-container > .content {
-        padding: 12px;
-    }
-
     &:hover,
     &:focus,
     &:focus-within {
         border-color: $block-border-color-focus;
         box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
 
-        > header {
+        > .c-sf-block__header {
             background: $block-hover-background;
 
-            h3 {
+            .c-sf-block__header__title,
+            .c-sf-block__actions__single {
                 color: $header-text-color-focus;
-
-                .type-icon {
-                    color: $header-text-color-focus;
-                }
             }
-
-            > aside > .actions > button {
-                color: $header-text-color-focus;
-            }
-        }
-
-        > .content-container > .content {
-            border-color: $block-border-color-focus;
         }
     }
 }

From 2367973c7bda02ebe9f3d2d5abd5b2b7436f68c9 Mon Sep 17 00:00:00 2001
From: Jonny Scholes <jonnyscholes@gmail.com>
Date: Thu, 7 Mar 2019 20:57:30 +1100
Subject: [PATCH 06/11] Add some todos for c-sf-block

---
 src/scss/components/c-sf-block.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/scss/components/c-sf-block.scss b/src/scss/components/c-sf-block.scss
index af830aa..d73b703 100644
--- a/src/scss/components/c-sf-block.scss
+++ b/src/scss/components/c-sf-block.scss
@@ -1,3 +1,12 @@
+// TODO: Reduce nesting further.
+// Theres quite a lot of nesting in here which makes parsing some segments difficult.
+// Some of this is to deal with the fact that .c-sf-block can contain many .c-sf-block's and so is
+// legitimate. However the new classes adequately sanitise streamfield only CSS so am leaving this for
+// now to avoid blocking the release of the new Streamfield. -@jonnyscholes
+
+// TODO: Consider visually moving .c-sf-block__type and .c-sf-block__actions based on COLLAPSIBLE vs
+// SIMPLE vs default instead of moving HTML around. -@jonnyscholes
+
 .c-sf-block {
     flex: 1 1 auto;
     width: 0; // Trick to prevent overflow from the title.

From 536d11fec0c92bc4036967b14c198e16c8b99222 Mon Sep 17 00:00:00 2001
From: Jonny Scholes <jonnyscholes@gmail.com>
Date: Thu, 7 Mar 2019 22:34:30 +1100
Subject: [PATCH 07/11] Tweaks to match designs in wagtail core

---
 src/scss/_config.scss               | 2 +-
 src/scss/components/c-sf-block.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/scss/_config.scss b/src/scss/_config.scss
index 02b6cb5..c84fb56 100644
--- a/src/scss/_config.scss
+++ b/src/scss/_config.scss
@@ -5,7 +5,7 @@ $block-full-padding: $block-vertical-padding 0;
 $add-button-size: 34px;
 $add-button-font-size: 28px;
 $children-container-padding: $add-button-size / 2;
-$action-font-size: 15px;
+$action-font-size: 18px;
 $add-transition-duration: 0.3s;
 $hover-transition-duration: 0.3s;
 $bounce-transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
diff --git a/src/scss/components/c-sf-block.scss b/src/scss/components/c-sf-block.scss
index d73b703..77327bf 100644
--- a/src/scss/components/c-sf-block.scss
+++ b/src/scss/components/c-sf-block.scss
@@ -68,8 +68,12 @@
             transition-property: opacity, color;
             font-size: $action-font-size;
 
+
             i {
                 font-style: normal;
+                &:before {
+                    margin: 0;
+                }
             }
 
             &[disabled] {

From fd26b1e148ced8ec40ca5b7e97a510b181009a3f Mon Sep 17 00:00:00 2001
From: Jonny Scholes <jonnyscholes@gmail.com>
Date: Thu, 7 Mar 2019 22:34:49 +1100
Subject: [PATCH 08/11] Fix example

---
 public/example.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/example.scss b/public/example.scss
index ffb3b59..d3ee5dc 100644
--- a/public/example.scss
+++ b/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;
 }
 

From 6a1914c42e134df80e5b353191b092e16c3d1c93 Mon Sep 17 00:00:00 2001
From: Jonny Scholes <jonnyscholes@gmail.com>
Date: Fri, 8 Mar 2019 08:42:55 +1100
Subject: [PATCH 09/11] Remove some defunkt duped code. Move all state classes
 to is-/has- state classes.

---
 src/AddButton.js                         |  4 +-
 src/BlockHeader.js                       |  4 +-
 src/BlocksContainer.js                   |  2 +-
 src/scss/components/c-sf-add-button.scss | 63 +++++++++++++-----------
 src/scss/components/c-sf-block.scss      | 15 ++++--
 src/scss/components/c-sf-container.scss  | 43 ++--------------
 6 files changed, 51 insertions(+), 80 deletions(-)

diff --git a/src/AddButton.js b/src/AddButton.js
index cb919ab..386cc4c 100644
--- a/src/AddButton.js
+++ b/src/AddButton.js
@@ -111,8 +111,8 @@ class AddButton extends React.Component {
     const button = (
       <button onClick={this.toggle} title={labels.add}
               className={classNames(
-                'c-sf-add-button', 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>
     );
diff --git a/src/BlockHeader.js b/src/BlockHeader.js
index 8fa45da..9e60dee 100644
--- a/src/BlockHeader.js
+++ b/src/BlockHeader.js
@@ -151,8 +151,8 @@ class BlockHeader extends React.Component {
       <div ref={dragHandleRef}  onClick={this.toggle}
               {...dragHandleProps}
               className={classNames('c-sf-block__header',
-                                    collapsibleBlock && 'collapsible',
-                                    sortableBlock && 'sortable')}>
+                                    collapsibleBlock && 'is-collapsible',
+                                    sortableBlock && 'is-sortable')}>
         {content}
       </div>
     );
diff --git a/src/BlocksContainer.js b/src/BlocksContainer.js
index 0bf43d4..cde5b87 100644
--- a/src/BlocksContainer.js
+++ b/src/BlocksContainer.js
@@ -62,7 +62,7 @@ class BlocksContainer extends React.Component {
                className={classNames(
                  '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))}
diff --git a/src/scss/components/c-sf-add-button.scss b/src/scss/components/c-sf-add-button.scss
index 7796fe2..8aaa332 100644
--- a/src/scss/components/c-sf-add-button.scss
+++ b/src/scss/components/c-sf-add-button.scss
@@ -1,32 +1,35 @@
 .c-sf-add-button {
-  width: 100%;
-  height: $add-button-size;
-  appearance: none;
-  border: none;
-  color: $teal;
-  font-weight: bold;
-  background: none;
-  padding: 0;
-  cursor: pointer;
-  outline: none;
-  backface-visibility: hidden;
-  overflow: hidden;  // Makes the rotated i box not clickable.
-  user-select: none;
-  opacity: 0;
-  transition: opacity $hover-transition-duration ease-in-out;
-  pointer-events: none;
-  &.visible {
-    opacity: 1;
-    pointer-events: unset;
-  }
-  i {
-    display: block;
-    transition: transform $add-transition-duration $bounce-transition-timing;
-    font-style: normal;
-    font-size: $add-button-font-size;
-    line-height: $add-button-font-size;
-  }
-  &.close i {
-    transform: rotate(45deg);
-  }
+    width: 100%;
+    height: $add-button-size;
+    appearance: none;
+    border: 0 none;
+    color: $teal;
+    font-weight: bold;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+    outline: none;
+    backface-visibility: hidden;
+    overflow: hidden; // Makes the rotated i box not clickable.
+    user-select: none;
+    opacity: 0;
+    transition: opacity $hover-transition-duration ease-in-out;
+    pointer-events: none;
+
+    i {
+        display: block;
+        transition: transform $add-transition-duration $bounce-transition-timing;
+        font-style: normal;
+        font-size: $add-button-font-size;
+        line-height: $add-button-font-size;
+    }
+
+    &.is-visible {
+        opacity: 1;
+        pointer-events: unset;
+    }
+
+    &.is-closed i {
+        transform: rotate(45deg);
+    }
 }
diff --git a/src/scss/components/c-sf-block.scss b/src/scss/components/c-sf-block.scss
index 77327bf..f98acb8 100644
--- a/src/scss/components/c-sf-block.scss
+++ b/src/scss/components/c-sf-block.scss
@@ -1,11 +1,16 @@
-// TODO: Reduce nesting further.
+// TODO: Reduce nesting further by splitting out more components.
+//
 // Theres quite a lot of nesting in here which makes parsing some segments difficult.
 // Some of this is to deal with the fact that .c-sf-block can contain many .c-sf-block's and so is
-// legitimate. However the new classes adequately sanitise streamfield only CSS so am leaving this for
+// legitimate. A lot of these would ideally be their own components (eg the actions) however there
+// is a lot of interdependancy of the elements because of COLLAPSIBLE vs SIMPLE vs default which
+// makes this hard without fairly intensive rethinking of the HTML.
+//
+// However, the new classes adequately sanitise streamfield only CSS so am leaving this for
 // now to avoid blocking the release of the new Streamfield. -@jonnyscholes
 
 // TODO: Consider visually moving .c-sf-block__type and .c-sf-block__actions based on COLLAPSIBLE vs
-// SIMPLE vs default instead of moving HTML around. -@jonnyscholes
+// SIMPLE vs default using CSS only instead of moving HTML around. -@jonnyscholes
 
 .c-sf-block {
     flex: 1 1 auto;
@@ -25,11 +30,11 @@
         transition: background-color $hover-transition-duration ease-in-out;
         cursor: default;
 
-        &.collapsible {
+        &.is-collapsible {
             cursor: pointer;
         }
 
-        &.sortable {
+        &.is-sortable {
             cursor: grab;
         }
 
diff --git a/src/scss/components/c-sf-container.scss b/src/scss/components/c-sf-container.scss
index e1884b3..1698c79 100644
--- a/src/scss/components/c-sf-container.scss
+++ b/src/scss/components/c-sf-container.scss
@@ -9,48 +9,11 @@
         padding: $block-full-padding;
     }
 
-    &__add {
-        width: 100%;
-        height: $add-button-size;
-        appearance: none;
-        border: 0 none;
-        color: $teal;
-        font-weight: bold;
-        background: none;
-        padding: 0;
-        cursor: pointer;
-        outline: none;
-        backface-visibility: hidden;
-        overflow: hidden; // Makes the rotated i box not clickable.
-        user-select: none;
-        opacity: 0;
-        transition: opacity $hover-transition-duration ease-in-out;
-        pointer-events: none;
-
-        i {
-            display: block;
-            transition: transform $add-transition-duration
-                $bounce-transition-timing;
-            font-style: normal;
-            font-size: $add-button-font-size;
-            line-height: $add-button-font-size;
-        }
-
-        &.visible {
-            opacity: 1;
-            pointer-events: unset;
-        }
-
-        &.close i {
-            transform: rotate(45deg);
-        }
-    }
-
-    &.guttered-add {
+    &--add-in-gutter {
         @media (min-width: $screen-sm-min) {
             padding-left: $add-button-size;
 
-            button.add {
+            .c-sf-add-button {
                 position: absolute;
                 width: $add-button-size;
                 transform: translate(-100%, -50%);
@@ -59,7 +22,7 @@
     }
 
     &.is-dragging {
-        button.add.visible {
+        .c-sf-add-button.visible {
             opacity: 0;
             pointer-events: none;
         }

From d12bf588581004dbb3d5f5d3294d5ed84288a087 Mon Sep 17 00:00:00 2001
From: Jonny Scholes <jonnyscholes@gmail.com>
Date: Fri, 8 Mar 2019 09:22:09 +1100
Subject: [PATCH 10/11] Pass some classNames as plain strings

---
 src/Block.js       | 2 +-
 src/BlockHeader.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Block.js b/src/Block.js
index 8b7a224..325005d 100644
--- a/src/Block.js
+++ b/src/Block.js
@@ -116,7 +116,7 @@ class Block extends React.Component {
         <Draggable draggableId={id} index={index}
                    type={`${fieldId}-${parentId}`}>
           {(provided, snapshot) => (
-            <article className={`c-sf-container__block-container`}
+            <article className="c-sf-container__block-container"
                      ref={provided.innerRef}
                      {...provided.draggableProps}>
               <div className={blockClassName}>
diff --git a/src/BlockHeader.js b/src/BlockHeader.js
index 9e60dee..a0e7f7a 100644
--- a/src/BlockHeader.js
+++ b/src/BlockHeader.js
@@ -134,7 +134,7 @@ class BlockHeader extends React.Component {
     let content;
     if (isSimpleLayout) {
       content = (
-        <div className={'c-sf-block__header__title'} dangerouslySetInnerHTML={{__html: icon ? icon : icons.grip}} />
+        <div className="c-sf-block__header__title" dangerouslySetInnerHTML={{__html: icon ? icon : icons.grip}} />
       );
     } else {
       content = (

From 74548ab97cfdfcaae347b872d06fdb504e239aa9 Mon Sep 17 00:00:00 2001
From: Jonny Scholes <jonnyscholes@gmail.com>
Date: Fri, 8 Mar 2019 11:15:09 +1100
Subject: [PATCH 11/11] Bring some styles in from the wagtail core streamfield
 css

---
 src/scss/_config.scss                |  2 +-
 src/scss/components/c-sf-button.scss | 44 +++++++++++++++-------------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/scss/_config.scss b/src/scss/_config.scss
index c84fb56..4880c0d 100644
--- a/src/scss/_config.scss
+++ b/src/scss/_config.scss
@@ -1,5 +1,5 @@
 $grid-gutter-width: 30px;
-$header-padding: 8px;
+$header-padding: 6px 8px;
 $block-vertical-padding: 3px;
 $block-full-padding: $block-vertical-padding 0;
 $add-button-size: 34px;
diff --git a/src/scss/components/c-sf-button.scss b/src/scss/components/c-sf-button.scss
index 3188da6..ea2896c 100644
--- a/src/scss/components/c-sf-button.scss
+++ b/src/scss/components/c-sf-button.scss
@@ -1,23 +1,25 @@
 .c-sf-button {
-  margin: $grid-gutter-width / 4;
-  appearance: none;
-  background: $teal;
-  color: white;
-  padding: 0;
-  border: none;
-  border-radius: $border-radius;
-  outline: none;
-  cursor: pointer;
-  overflow: hidden;
-  &__icon,
-  &__label {
-    display: inline-block;
-    padding: 6px 8px;
-  }
-  &__icon {
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-  &__label {
-    text-transform: uppercase;
-  }
+    margin: $grid-gutter-width / 4;
+    appearance: none;
+    background: $teal;
+    padding: 0;
+    border: 0 none;
+    border-radius: $border-radius;
+    outline: none;
+    cursor: pointer;
+    overflow: hidden;
+
+    &__icon,
+    &__label {
+        display: inline-block;
+
+        // Fixes for label elements getting global `label` styles from Wagtail -@jonnyscholes
+        color: white;
+        font-weight: normal;
+    }
+
+    &__label {
+        padding: 6px 8px;
+        text-transform: uppercase;
+    }
 }