feat(colours): new colour page and changelog

wfp · Nov 25, 2019 · 2ef611f · 2ef611f
1 parent 8dd71cb
commit 2ef611f
Show file tree

Hide file tree

Showing 18 changed files with 899 additions and 431 deletions.
diff --git a/.storybook/_container.scss b/.storybook/_container.scss
@@ -142,8 +142,8 @@ body {
   background: $brand-03;
 }
 
-.color__interactive-03 {
-  background: $interactive-03;
+.color__interactive-02 {
+  background: $interactive-02;
 }
 
 .color__inverse-01 {

diff --git a/.storybook/wfp-storybook/_wfp-storybook.scss b/.storybook/wfp-storybook/_wfp-storybook.scss
@@ -35,7 +35,7 @@ body,
 .container {
   svg {
     path {
-      fill: $interactive-03;
+      fill: $interactive-02;
     }
   }
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,106 +4,68 @@ All notable changes to this project will be documented in this file. See [standa
 
 # [1.3.0-alpha.30](https://github.com/WFP/UI/compare/v1.3.0-alpha.29...v1.3.0-alpha.30) (2019-11-12)
 
-
 ### Bug Fixes
 
-* **MainNavigation:** search size ([#239](https://github.com/WFP/UI/issues/239)) ([42af6b9](https://github.com/WFP/UI/commit/42af6b9))
-
+- **MainNavigation:** search size ([#239](https://github.com/WFP/UI/issues/239)) ([42af6b9](https://github.com/WFP/UI/commit/42af6b9))
 
-
-<a name="1.2.0-alpha.11"></a>
 # [1.2.0-alpha.11](https://github.com/WFP/UI/compare/v1.2.0-alpha.10...v1.2.0-alpha.11) (2019-03-07)
 
-
 ### Features
 
-* **Card:** Card released ([cb0e025](https://github.com/WFP/UI/commit/cb0e025))
-* **ReactSelect:** example updated ([e3e2636](https://github.com/WFP/UI/commit/e3e2636))
+- **Card:** Card released ([cb0e025](https://github.com/WFP/UI/commit/cb0e025))
+- **ReactSelect:** example updated ([e3e2636](https://github.com/WFP/UI/commit/e3e2636))
 
-
-
-<a name="1.2.0-alpha.10"></a>
 # [1.2.0-alpha.10](https://github.com/WFP/UI/compare/v1.2.0-alpha.9...v1.2.0-alpha.10) (2019-03-06)
 
-
 ### Features
 
-* **DatePicker:** add Calendar icon ([#187](https://github.com/WFP/UI/issues/187)) ([bd52fae](https://github.com/WFP/UI/commit/bd52fae))
-* **StepNavigation:** vertical and small StepNavigation added ([7c5e358](https://github.com/WFP/UI/commit/7c5e358))
-
+- **DatePicker:** add Calendar icon ([#187](https://github.com/WFP/UI/issues/187)) ([bd52fae](https://github.com/WFP/UI/commit/bd52fae))
+- **StepNavigation:** vertical and small StepNavigation added ([7c5e358](https://github.com/WFP/UI/commit/7c5e358))
 
-
-<a name="1.2.0-alpha.9"></a>
 # [1.2.0-alpha.9](https://github.com/WFP/UI/compare/v1.2.0-alpha.8...v1.2.0-alpha.9) (2019-02-28)
 
-
 ### Bug Fixes
 
-* **TablePagination:** page max filter removed ([686779a](https://github.com/WFP/UI/commit/686779a))
-
-
+- **TablePagination:** page max filter removed ([686779a](https://github.com/WFP/UI/commit/686779a))
 
-<a name="1.2.0-alpha.8"></a>
 # [1.2.0-alpha.8](https://github.com/WFP/UI/compare/v1.2.0-alpha.7...v1.2.0-alpha.8) (2019-02-21)
 
-
 ### Features
 
-* **Story:** divider added ([921cf98](https://github.com/WFP/UI/commit/921cf98))
-
-
+- **Story:** divider added ([921cf98](https://github.com/WFP/UI/commit/921cf98))
 
-<a name="1.2.0-alpha.7"></a>
 # [1.2.0-alpha.7](https://github.com/WFP/UI/compare/v1.2.0-alpha.6...v1.2.0-alpha.7) (2019-02-20)
 
-
 ### Features
 
-* **Input:** Shadow on Input elements ([94a79bd](https://github.com/WFP/UI/commit/94a79bd))
-
+- **Input:** Shadow on Input elements ([94a79bd](https://github.com/WFP/UI/commit/94a79bd))
 
-
-<a name="1.2.0-alpha.6"></a>
 # [1.2.0-alpha.6](https://github.com/WFP/UI/compare/v1.2.0-alpha.5...v1.2.0-alpha.6) (2019-02-19)
 
-
 ### Features
 
-* **Icons:** Upgrade to newer version, console.logs removed ([0fb1fe3](https://github.com/WFP/UI/commit/0fb1fe3))
-* **Slider:** OnChange now returns int instead of object ([80a657f](https://github.com/WFP/UI/commit/80a657f))
+- **Icons:** Upgrade to newer version, console.logs removed ([0fb1fe3](https://github.com/WFP/UI/commit/0fb1fe3))
+- **Slider:** OnChange now returns int instead of object ([80a657f](https://github.com/WFP/UI/commit/80a657f))
 
-
-
-<a name="1.2.0-alpha.5"></a>
 # [1.2.0-alpha.5](https://github.com/WFP/UI/compare/v1.2.0-alpha.4...v1.2.0-alpha.5) (2019-02-16)
 
-
 ### Features
 
-* **Select:** example for react-final-form added clean console.log from builds ([a92cb41](https://github.com/WFP/UI/commit/a92cb41))
+- **Select:** example for react-final-form added clean console.log from builds ([a92cb41](https://github.com/WFP/UI/commit/a92cb41))
 
-
-
-<a name="1.2.0-alpha.1"></a>
 # [1.3.0-alpha.1](https://github.com/WFP/UI/compare/v1.3.0-alpha.0...v1.3.0-alpha.1) (2019-02-12)
 
-
 ### Features
 
-* **Changelog:** Added a changelog and better versions ([#182](https://github.com/WFP/UI/issues/182)) ([13ca938](https://github.com/WFP/UI/commit/13ca938))
-* **Mail:** Mail template added ([#181](https://github.com/WFP/UI/issues/181)) ([be22895](https://github.com/WFP/UI/commit/be22895))
-
+- **Changelog:** Added a changelog and better versions ([#182](https://github.com/WFP/UI/issues/182)) ([13ca938](https://github.com/WFP/UI/commit/13ca938))
+- **Mail:** Mail template added ([#181](https://github.com/WFP/UI/issues/181)) ([be22895](https://github.com/WFP/UI/commit/be22895))
 
-
-<a name="1.2.1-alpha.0"></a>
 ## [1.2.1-alpha.0](https://github.com/WFP/UI/compare/v1.2.0...v1.2.1-alpha.0) (2019-02-11)
 
-
 ### Bug Fixes
 
-* **Icons:** View on GitHub now clickable ([#179](https://github.com/WFP/UI/issues/179)) ([66b3b6d](https://github.com/WFP/UI/commit/66b3b6d))
-
+- **Icons:** View on GitHub now clickable ([#179](https://github.com/WFP/UI/issues/179)) ([66b3b6d](https://github.com/WFP/UI/commit/66b3b6d))
 
 ### Features
 
-* **ReadMore:** ReadMore Component refactored ([#180](https://github.com/WFP/UI/issues/180)) ([4fb8b86](https://github.com/WFP/UI/commit/4fb8b86))
+- **ReadMore:** ReadMore Component refactored ([#180](https://github.com/WFP/UI/issues/180)) ([4fb8b86](https://github.com/WFP/UI/commit/4fb8b86))
diff --git a/package.json b/package.json
@@ -213,6 +213,7 @@
     "react-dates": "^18.4.0",
     "react-dom": "^16.10.2",
     "react-final-form": "^4.0.2",
+    "react-markdown": "^4.2.2",
     "react-prism": "^4.3.2",
     "react-redux": "^5.0.7",
     "react-select": "^2.1.1",

diff --git a/src/components/Module/Module.js b/src/components/Module/Module.js
@@ -15,6 +15,10 @@ const propTypes = {
    * Disables the default margin
    */
   noMargin: PropTypes.bool,
+  /**
+   * Use 100% height of parent container
+   */
+  fullHeight: PropTypes.bool,
   /**
    * Light appearance (for white backgrounds)
    */
@@ -72,6 +76,7 @@ const Module = ({
   children,
   className,
   margin,
+  fullHeight,
   noMargin,
   withHover,
   ...other
@@ -80,6 +85,7 @@ const Module = ({
     {
       'wfp--module--dark': dark,
       'wfp--module--no-margin': noMargin,
+      'wfp--module--full-height': fullHeight,
       'wfp--module--margin-xs': margin === 'xs',
       'wfp--module--margin-md': margin === 'md',
       'wfp--module--margin-lg': margin === 'lg',

diff --git a/src/components/Module/_module.scss b/src/components/Module/_module.scss
@@ -117,6 +117,13 @@
     }
   }
 
+  .#{$prefix}--module--full-height {
+    height: 100%;
+    .#{$prefix}--module__inner {
+      height: 100%;
+    }
+  }
+
   .#{$prefix}--module--dark {
     .#{$prefix}--module__inner {
       box-shadow: none;

diff --git a/src/components/Story/_story.scss b/src/components/Story/_story.scss
@@ -79,7 +79,8 @@
       }
     }
 
-    b {
+    b,
+    strong {
       font-weight: 600;
     }
 

diff --git a/src/documentation/BrowserSupport-story.js b/src/documentation/BrowserSupport-story.js
@@ -26,11 +26,22 @@ storiesOf('Design|Guidelines', module)
       <p>Currently the following browsers are supported:</p>
 
       <ul className="wfp--story__list">
-        <li>IE11 (will soon no longer be supported by the WFP UI Kit)</li>
-        <li>IE Edge latest & last four versions</li>
-        <li>Firefox latest & last four versions</li>
-        <li>Chrome latest & last four versions</li>
-        <li>Safari latest & last two versions</li>
+        <li>
+          <b>Microsoft Internet Explorer 11 (IE11)</b> soon no longer be
+          supported by the WFP UI Kit
+        </li>
+        <li>
+          <b>Microsoft Edge</b> latest & last four versions
+        </li>
+        <li>
+          <b>Mozilla Firefox</b> latest & last four versions
+        </li>
+        <li>
+          <b>Google Chrome</b> latest & last four versions
+        </li>
+        <li>
+          <b>Safari</b> latest & last two versions
+        </li>
       </ul>
 
       <p>

diff --git a/src/documentation/Changelog/Changelog-story.js b/src/documentation/Changelog/Changelog-story.js
@@ -0,0 +1,36 @@
+/* eslint-disable no-console */
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import PrismCode from 'react-prism';
+import Page from '../Page';
+import Blockquote from '../../components/Blockquote';
+import Link from '../../components/Link';
+import Changelog from '../../../CHANGELOG.md';
+
+import ReactMarkdown from 'react-markdown';
+import './_changelog.scss';
+
+console.log(Changelog);
+
+storiesOf(' Design|Getting started', module)
+  .addParameters({ options: { showPanel: false, isToolshown: false } })
+  .add("What's new (Changelog)", () => (
+    <Page title="Changelog" subTitle="Latest updates and versions">
+      <Blockquote title="UI Kit 1.3 is available" kind="warning">
+        We've just release the new version of the UI Kit. Get the latest version
+        now. <br />
+        Read the{' '}
+        <Link
+          href="https://github.com/wfp/ui/blob/next/CHANGELOG.md"
+          target="_blank">
+          full changelog
+        </Link>
+      </Blockquote>
+
+      <div className="changelog">
+        <ReactMarkdown source={Changelog} />
+      </div>
+      {/*<div dangerouslySetInnerHTML={createMarkup()} />*/}
+    </Page>
+  ));
diff --git a/src/documentation/Changelog/_changelog.scss b/src/documentation/Changelog/_changelog.scss
@@ -0,0 +1,20 @@
+.changelog {
+  h1 {
+    font-size: 1.3rem;
+    margin-top: 1rem;
+    &:first-child {
+      display: none;
+    }
+  }
+  h3 {
+    margin-top: 1rem;
+    font-size: 1rem;
+  }
+  ul {
+    margin-left: 1.4rem;
+    line-height: 1.8;
+  }
+  li {
+    list-style-type: disc;
+  }
+}
diff --git a/src/documentation/ColourGuidelines-story.js → ...tation/ColourGuidelines-story-outdated.js b/src/documentation/ColourGuidelines-story.js → ...tation/ColourGuidelines-story-outdated.js
@@ -40,7 +40,7 @@ storiesOf('Design|Core', module)
         <ListItem>Semantic colours</ListItem>
       </List>
       <p>
-        Use the <i>70–25–5(60–30–10)</i> rule to create sense of balance and
+        Use the <i>70–25–5 (60–30–10)</i> rule to create sense of balance and
         allow the eye to move comfortably from one focal point to the next.
       </p>
       <img