Tweaks/counter bar (#23)

* Styling tweaks related to CounterBar

* Update snapshot

* Add flex-start to outer wrapper

* Add story without counters wrapper

components/counter-bar/src/__snapshots__/test.js.snap

@@ -6,17 +6,21 @@ exports[`CounterBar matches snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
   line-height: 1;
 }
 
 .emotion-6 {
   border: 0px;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   margin: 0 6px 6px 0;
   max-width: 250px;
   outline: none;
@@ -30,6 +34,8 @@ exports[`CounterBar matches snapshot 1`] = `
 
 .emotion-4 {
   display: inline-block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .emotion-0 {
@@ -73,29 +79,22 @@ exports[`CounterBar matches snapshot 1`] = `
 
 .emotion-14 {
   border: 0px;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   margin: 0 6px 6px 0;
   max-width: 250px;
   outline: none;
   padding: 0 8px 0 0;
   background: #ffffff;
   color: #ffffff;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
   background: #6f777b;
 }
 
 .emotion-14:focus {
   outline: solid 4px #ffbf47;
 }
 
-.emotion-14:last-child {
-  margin-right: 0px;
-}
-
 <HashRouter>
   <Router
     history={

components/counter-bar/src/index.js

@@ -8,7 +8,8 @@ import { BLACK, GREY_1, GREY_3, LINK_COLOUR, RED, WHITE, YELLOW } from 'govuk-co
 
 const OuterWrapper = styled('div')({
   display: 'flex',
-  flexWrap: 'nowrap',
+  flexWrap: 'wrap',
+  alignItems: 'flex-start',
   lineHeight: '1',
 });
 
@@ -18,7 +19,7 @@ const TotalWrapper = styled('a')(
       outline: `solid 4px ${YELLOW}`,
     },
     border: '0',
-    flex: '0 0 auto',
+    flex: '1',
     margin: '0 6px 6px 0',
     maxWidth: '250px',
     outline: 'none',
@@ -31,23 +32,17 @@ const TotalWrapper = styled('a')(
   }),
 );
 
-const CountersWrapper = styled('div')(
-  {
-    alignItems: 'flex-start',
-    display: 'flex',
-    marginRight: '-6px',
-    flex: '1',
-    flexWrap: 'wrap',
-  },
-);
+const CountersWrapper = styled('div')({
+  alignItems: 'flex-start',
+  display: 'flex',
+  marginRight: '-6px',
+  flex: '1',
+  flexWrap: 'wrap',
+});
 
 const CounterWrapper = styled(TotalWrapper)(
   {
-    ':last-child': {
-      marginRight: '0',
-    },
     color: WHITE,
-    flex: '1',
   },
   ({ active }) => ({
     background: active ? LINK_COLOUR : GREY_1,
@@ -181,7 +176,7 @@ const CounterWrapper = styled(TotalWrapper)(
  * Use a Link component for the total
  * ```jsx
  * import { HashRouter, Link } from 'react-router-dom';
- * 
+ *
  * <HashRouter>
  *   <CounterBar>
  *     <CounterBar.Total score={15} component={Link} to="/courses?sort=name'/">All counters</CounterBar.Total>
@@ -211,7 +206,7 @@ const CounterWrapper = styled(TotalWrapper)(
  * Use a Link component for a counter
  * ```jsx
  * import { HashRouter, Link } from 'react-router-dom';
- * 
+ *
  * <HashRouter>
  *   <CounterBar>
  *     <CounterBar.Total score={15}>All counters</CounterBar.Total>

components/counter-bar/src/stories.js

@@ -52,6 +52,17 @@ examples.add('Active total', () =>
   </CounterBar>),
 );
 
+examples.add('Without Counters wrapper', () =>
+  (<CounterBar>
+    <CounterBar.Total score={15}>All counters</CounterBar.Total>
+    <CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
+    <CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
+    <CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
+    <CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
+    <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
+  </CounterBar>),
+);
+
 examples.add('Empty counters', () =>
   (<CounterBar>
     <CounterBar.Total score={7}>All counters</CounterBar.Total>

components/result-count-title/src/index.js

@@ -4,11 +4,11 @@ import styled from 'react-emotion';
 
 import ResultCount from '@govuk-frederic/result-count';
 
-const Wrapper = styled('div')(
-  {
-    display: 'inline-block',
-  },
-);
+const Wrapper = styled('div')({
+  display: 'inline-block',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});
 
 const Title = styled('div')({
   display: 'inline-block',
@@ -26,7 +26,7 @@ const Title = styled('div')({
  * ```jsx
  * <ResultCountTitle count={3}>Title</ResultCountTitle>
  * ```
- * 
+ *
  * In black with count value 0
  * ```jsx
  * <ResultCountTitle count={0} countColor="black" countBackgroundColor="#dee0e2">Title</ResultCountTitle>

components/title-result-count/src/index.js

@@ -6,6 +6,8 @@ import ResultCount from '@govuk-frederic/result-count';
 
 const Wrapper = styled('div')({
   display: 'inline-block',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
 });
 
 const Title = styled('div')({
@@ -26,7 +28,7 @@ const Title = styled('div')({
  *  Title Title Title
  * </TitleResultCount>
  * ```
- * 
+ *
  * Counter title with value 0 and override text and background colour.
  * ```jsx
  * <TitleResultCount count={0} countColor="black" countBackgroundColor="#dee0e2">

packages/storybook/package.json

@@ -18,6 +18,7 @@
     "@govuk-frederic/spinner": "^0.0.1",
     "@govuk-frederic/table": "^0.0.1",
     "@govuk-frederic/table-accordion-group": "^0.0.1",
+    "@govuk-frederic/table-of-contents": "^0.0.1",
     "@govuk-frederic/title-result-count": "^0.0.1",
     "@storybook/addon-actions": "^3.4.1",
     "@storybook/addon-knobs": "^3.4.1",