Rewrite of react button to engulf new button tokens (#43)

* Start rewrite of react button to engulf tokens

* fixed after,before position

* ignore .env's

* Added focus with outline for now

* Added disabled styling

* Updates to alignment and offset calculation

* Added unit type to token values

Author: Michael Marszalek

.gitignore

@@ -2,3 +2,4 @@ dist
 .cache
 node_modules
 pnpm-debug.log
+.env

apps/figma-broker/files/desktop-ui/buttons.js

@@ -9,16 +9,23 @@ import * as R from 'ramda'
 
 const fallback = {}
 
+const rootFontSize = 16
+
+const px = (unit) => `${unit}px`
+const em = (unit) => `${unit}em`
+const rem = (unit) => `${unit}rem`
+
 const buildProps = (states) => {
   let buttonProps = {}
 
   const pressed = R.find(withName('pressed'), states)
   const hovered = R.find(withName('hover'), states)
   const focused = R.find(withName('focused'), states)
   const enabled = R.find(withName('enabled'), states)
+  const disabled = R.find(withName('disabled'), states)
 
-  if (enabled) {
-    const components = enabled.children
+  if (enabled || disabled) {
+    const components = (enabled || disabled).children
     const button = R.find(withName('button'), components)
     const label = R.find(withName('label'), components)
     const spacing = R.filter(withName('spacing'), components)
@@ -27,44 +34,53 @@ const buildProps = (states) => {
     if (button) {
       const button_ = R.head(button.children)
       const { cornerRadius, strokeWeight, absoluteBoundingBox } = button_
-      const {height} = absoluteBoundingBox
+      const { height } = absoluteBoundingBox
       const fill = button_.fills.find(withType('solid')) || fallback
       const stroke = button_.strokes.find(withType('solid')) || fallback
 
       buttonProps = {
         ...buttonProps,
-        cornerRadius,
-        height,
+        height: px(height),
         background: colortoRgba(fill.color),
-        borderColor: colortoRgba(stroke.color),
-        borderWidth: strokeWeight,
+        border: {
+          color: colortoRgba(stroke.color),
+          width: px(strokeWeight),
+          radius: px(cornerRadius),
+        },
       }
     }
 
     if (label) {
       const {
-        fontPostScriptName,
+        fontFamily,
         fontSize,
         fontWeight,
         letterSpacing,
-        lineHeightPx,
+        textAlignHorizontal = 'center',
+        lineHeightPercentFontSize,
       } = label.style
+      const fill = label.fills.find(withType('solid')) || fallback
 
+      const fontSizeRem = (fontSize / rootFontSize).toFixed(3)
+      const lineHeightEm = (lineHeightPercentFontSize / 100).toFixed(3)
+      const letterSpacingEm = (letterSpacing / fontSizeRem).toFixed(3)
       buttonProps = {
         ...buttonProps,
+        color: colortoRgba(fill.color),
         typography: {
-          font: fontPostScriptName,
-          fontSize,
+          fontFamily,
+          fontSize: rem(fontSizeRem),
           fontWeight,
-          letterSpacing,
-          lineHeight: lineHeightPx,
+          letterSpacing: letterSpacing ? em(letterSpacingEm) : 0,
+          lineHeight: em(lineHeightEm),
+          textAlign: R.toLower(textAlignHorizontal),
         },
       }
     }
 
     if (spacing.length > 0) {
       // Spacing can be used in any form, so we create an object
-      // with names prefixed with "Spacing" in figma
+      // with names prefixed with "Spacing" in figma´
       const spacingProps = R.reduce(
         (acc, val) => {
           const spacer = R.head(val.children)
@@ -76,7 +92,7 @@ const buildProps = (states) => {
             )
             return {
               ...acc,
-              [name]: spacingValue,
+              [name]: px(spacingValue),
             }
           }
           return acc
@@ -94,10 +110,12 @@ const buildProps = (states) => {
     if (clickbounds) {
       const clickbound = R.head(clickbounds.children)
       const { height } = clickbound.absoluteBoundingBox
+      const clickboundOffset = (height - parseInt(buttonProps.height, 10)) / 2
 
       buttonProps = {
         ...buttonProps,
-        clickbound: height,
+        clickbound: px(height),
+        clickboundOffset: px(clickboundOffset),
       }
     }
   }
@@ -117,8 +135,8 @@ const buildProps = (states) => {
         focus: {
           type: focusStyle,
           color: colortoRgba(stroke.color),
-          width: dashWidth,
-          gap: dashGap,
+          width: px(dashWidth),
+          gap: px(dashGap),
         },
       }
     }

apps/figma-broker/files/desktop-ui/index.js

@@ -14,6 +14,25 @@ export const makeDesktopComponents = (figmaPages) => {
           name: 'buttons-primary',
           value: makeButtonsComponent(data),
         })
+        break;
+      case 'buttons secondary color':
+        components.push({
+          name: 'buttons-secondary',
+          value: makeButtonsComponent(data),
+        })
+        break;
+      case 'buttons danger color':
+        components.push({
+          name: 'buttons-danger',
+          value: makeButtonsComponent(data),
+        })
+        break;
+      case 'buttons disabled':
+        components.push({
+          name: 'buttons-disabled',
+          value: makeButtonsComponent(data),
+        })
+        break;
       default:
         break
     }

apps/storybook-react/stories/Button.stories.jsx

@@ -1,5 +1,46 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { Button } from '@eds-ui/core-react'
+import './button.css'
 
-storiesOf('Button', module).add('with text', () => <Button>Button</Button>)
+storiesOf('Button', module).add('Demo', () => (
+  <div className="btn-container">
+    <h1>Variations</h1>
+
+    <div className="btn-group">
+      <h2>Contained (default)</h2>
+      <Button>Primary</Button>
+      <Button color="secondary">Secondary</Button>
+      <Button color="danger">Danger</Button>
+      <Button disabled>Disabled</Button>
+    </div>
+
+    <div className="btn-group">
+      <h2>Outlined</h2>
+      <Button variant="outlined">Primary</Button>
+      <Button variant="outlined" color="secondary">
+        Secondary
+      </Button>
+      <Button variant="outlined" color="danger">
+        Danger
+      </Button>
+      <Button variant="outlined" disabled>
+        Disabled
+      </Button>
+    </div>
+
+    <div className="btn-group">
+      <h2>Ghost</h2>
+      <Button variant="ghost">Primary</Button>
+      <Button variant="ghost" color="secondary">
+        Secondary
+      </Button>
+      <Button variant="ghost" color="danger">
+        Danger
+      </Button>
+      <Button variant="ghost" disabled>
+        Disabled
+      </Button>
+    </div>
+  </div>
+))

apps/storybook-react/stories/button.css

@@ -0,0 +1,10 @@
+.btn-container {
+  margin: 32px;
+}
+
+.btn-group {
+  margin-top: 48px;
+}
+.btn-group > button {
+  margin-right: 32px;
+}