Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-viewer-react/src/components/controls/Button/Button.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+
+import { Button } from './Button';
+
+export default {
+  title: 'CATEGORY_HERE/Button',
+  component: Button,
+  argTypes: {}
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Common = Template.bind({});
+Common.args = {};

packages/noodl-viewer-react/src/components/controls/Button/Button.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+
+import Layout from '../../../layout';
+import Utils from '../../../nodes/controls/utils';
+import { Noodl, Slot } from '../../../types';
+
+export interface ButtonProps extends Noodl.ReactProps {
+  enabled: boolean;
+  buttonType: 'button' | 'submit';
+
+  textStyle: Noodl.TextStyle;
+
+  useLabel: boolean;
+  label: string;
+  labelSpacing: string;
+  labeltextStyle: Noodl.TextStyle;
+
+  useIcon: boolean;
+  iconPlacement: 'left' | 'right';
+  iconSpacing: string;
+  iconSourceType: 'image' | 'icon';
+  iconImageSource: Noodl.Image;
+  iconIconSource: Noodl.Icon;
+  iconSize: string;
+  iconColor: Noodl.Color;
+
+  onClick: () => void;
+
+  children: Slot;
+}
+
+export function Button(props: ButtonProps) {
+  let style: React.CSSProperties = { ...props.style };
+  Layout.size(style, props);
+  Layout.align(style, props);
+
+  if (props.textStyle !== undefined) {
+    // Apply text style
+    style = Object.assign({}, props.textStyle, style);
+    style.color = props.noodlNode.context.styles.resolveColor(style.color);
+  }
+
+  function _renderIcon() {
+    const iconStyle: React.CSSProperties = {};
+
+    if (props.useLabel) {
+      if (props.iconPlacement === 'left' || props.iconPlacement === undefined) {
+        iconStyle.marginRight = props.iconSpacing;
+      } else {
+        iconStyle.marginLeft = props.iconSpacing;
+      }
+    }
+
+    if (props.iconSourceType === 'image' && props.iconImageSource !== undefined) {
+      iconStyle.width = props.iconSize;
+      iconStyle.height = props.iconSize;
+      return <img alt="" src={props.iconImageSource} style={iconStyle} />;
+    } else if (props.iconSourceType === 'icon' && props.iconIconSource !== undefined) {
+      iconStyle.fontSize = props.iconSize;
+      iconStyle.color = props.iconColor;
+
+      if (props.iconIconSource.codeAsClass === true) {
+        return (
+          <span className={[props.iconIconSource.class, props.iconIconSource.code].join(' ')} style={iconStyle}></span>
+        );
+      } else {
+        return (
+          <span className={props.iconIconSource.class} style={iconStyle}>
+            {props.iconIconSource.code}
+          </span>
+        );
+      }
+    }
+
+    return null;
+  }
+
+  let className = 'ndl-controls-button';
+  if (props.className) className = className + ' ' + props.className;
+
+  let content = null;
+
+  if (props.useLabel && props.useIcon) {
+    content = (
+      <>
+        {props.iconPlacement === 'left' ? _renderIcon() : null}
+        {String(props.label)}
+        {props.iconPlacement === 'right' ? _renderIcon() : null}
+      </>
+    );
+  } else if (props.useLabel) {
+    content = String(props.label);
+  } else if (props.useIcon) {
+    content = _renderIcon();
+  }
+
+  return (
+    <button
+      className={className}
+      disabled={!props.enabled}
+      {...Utils.controlEvents(props)}
+      type={props.buttonType}
+      style={style}
+      onClick={props.onClick}
+    >
+      {content}
+      {props.children}
+    </button>
+  );
+}

packages/noodl-viewer-react/src/components/controls/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';