feat(Button): accent button added

wfp · Dec 23, 2019 · 556d763 · 556d763
1 parent 48f259c
commit 556d763
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 20 deletions.
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -35,6 +35,7 @@ const Button = ({
     'wfp--btn--icon-only': icon && children === undefined,
     'wfp--btn--primary': kind === 'primary',
     'wfp--btn--danger': kind === 'danger',
+    'wfp--btn--accent': kind === 'accent',
     'wfp--btn--secondary': kind === 'secondary',
     'wfp--btn--navigation': kind === 'navigation',
     'wfp--btn--ghost': kind === 'ghost',

diff --git a/src/components/Button/_button.scss b/src/components/Button/_button.scss
@@ -79,6 +79,22 @@
     );
   }
 
+  .#{$prefix}--btn--accent {
+    @include button-theme(
+      $brand-03,
+      transparent,
+      $text-01,
+      darken($brand-03, 5),
+      $text-01
+    );
+
+    .#{$prefix}--btn__icon,
+    &:hover > .#{$prefix}--btn__icon,
+    &:focus > .#{$prefix}--btn__icon {
+      fill: $text-01;
+    }
+  }
+
   @keyframes slidein {
     from {
       box-shadow: 0 0 0 0px rgba($ui-05, 0.7);

diff --git a/src/documentation/Colours/ColourDocs.js b/src/documentation/Colours/ColourDocs.js
@@ -364,13 +364,13 @@ const ColourDocs = () => {
       <Blockquote title="Usage in JavaScript" code>
         <PrismCode component="pre" className="language-js">
           {`// Import colours as json (needs a json loader)
-          import colors from '@wfp/ui/source/globals/data/colors.json'
+import colors from '@wfp/ui/source/globals/data/colors.json'
 
-          // Import colours as js
-          import colors from '@wfp/ui/source/globals/data/colors.js'
+// Import colours as js
+import colors from '@wfp/ui/source/globals/data/colors.js'
 
-          const barChartColor = colors.navy;
-          `}
+const barChartColor = colors.navy;
+`}
         </PrismCode>
       </Blockquote>
       <p>
@@ -380,12 +380,12 @@ const ColourDocs = () => {
       <Blockquote title="Usage in scss" code>
         <PrismCode component="pre" className="language-css">
           {`// Only use variables
-          @import "~@wfp/ui/source/globals/scss/vars";
+@import "~@wfp/ui/source/globals/scss/vars";
 
-          body {
-          background: $ui-02;
-          }
-          `}
+body {
+  background: $ui-02;
+}
+`}
         </PrismCode>
       </Blockquote>
     </Page>

diff --git a/src/documentation/Colours/ColourList.js b/src/documentation/Colours/ColourList.js
@@ -114,12 +114,14 @@ const colorList = ({ filter }) => {
               <List colon kind="simple">
                 {/*<ListItem>{color.name}</ListItem>
                     <ListItem>{color.scss}</ListItem>*/}
-                    {color.shortDescription && (
-                      <h4 className="wfp--story__sub-heading">
-                        {color.shortDescription}
-                      </h4>
-                    )}
-                <ListItem><strong>Hex:</strong> {color.hex}</ListItem>
+                {color.shortDescription && (
+                  <h4 className="wfp--story__sub-heading">
+                    {color.shortDescription}
+                  </h4>
+                )}
+                <ListItem>
+                  <strong>Hex:</strong> {color.hex}
+                </ListItem>
 
                 {color.css && (
                   <ListItem>

diff --git a/src/documentation/Icons/Icons-story.js b/src/documentation/Icons/Icons-story.js
@@ -129,7 +129,8 @@ storiesOf('Getting started|Core', module)
         For Usage please take a look at the{' '}
         <Link onClick={linkTo('Components|Icon', 'Default')}>Icon</Link>{' '}
         component or{' '}
-        <Link onClick={linkTo(' Getting started|Getting Started', 'Developers')}>
+        <Link
+          onClick={linkTo(' Getting started|Getting Started', 'Developers')}>
           Usage for Developers
         </Link>
         .

diff --git a/src/documentation/Intro/Intro-story.js b/src/documentation/Intro/Intro-story.js
@@ -109,7 +109,7 @@ storiesOf('Getting started|Getting started', module)
             WFP’s commitment to establish and build the brand.
           </p>
           <Button
-            kind="primary"
+            kind="accent"
             icon={iconLightGlyph}
             style={{ marginRight: '0.5em' }}
             onClick={linkTo('Getting started|Getting started', 'Developers')}>

diff --git a/src/globals/data/colors.js b/src/globals/data/colors.js
@@ -141,8 +141,7 @@ const colors = {
     scss: '$interactive-02',
     css: 'color__interactive-02',
     type: 'brand',
-    shortDescription:
-      'Accent colour (recommended)',
+    shortDescription: 'Accent colour (recommended)',
   },
   'ui-01': {
     name: 'ui-01',

diff --git a/src/prop-types/types.js b/src/prop-types/types.js
@@ -4,6 +4,7 @@ export const ButtonTypes = {
   buttonKind: oneOf([
     'primary',
     'secondary',
+    'accent',
     'danger',
     'ghost',
     'inverse',