Step nav and icon base

README.md

@@ -1,6 +1,6 @@
 # Framer X Build System
 
-> **Note:** Optimized for Framer X v50.
+> **Note:** Optimized for Framer X Beta (171).
 
 <img width="1439" alt="screen shot 2018-08-30 at 3 18 12 pm" src="https://user-images.githubusercontent.com/1121873/44874068-f9f51e80-ac67-11e8-928f-8821212e9cdb.png">
 
@@ -12,14 +12,19 @@ This repository contains a build system to transpile React components into a sel
 2. `cd framerx-build-system && yarn install`
 
 ### Available Commands
+
 #### `yarn build`
+
 Bundles the production codebase into ES6 and copies it into the `/lib` inside Framer X contents.
 
 #### `yarn sync:lib`
+
 Replaces `/lib` inside Framer X contents with the latest version of the build.
 
 #### `yarn sync:src`
+
 replaces the contents of `/src` with the content of the Framer X file.
 
 #### `yarn sync:framerx`
+
 Builds a new Framer X file in case of conflicts or file corruption with the contents of `/lib` and `/src`.

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "framer-x-build-system",
+  "name": "canvas-framer",
   "version": "1.0.0",
   "description": "",
   "main": "lib/index.js",
@@ -41,7 +41,7 @@
     "webpack": "^4.12.2",
     "webpack-cli": "^3.0.8"
   },
-  "author": "Datadog DesignOps Team <slack@#designops>",
+  "author": "Liz Shaw",
   "license": "UNLICENSED",
   "dependencies": {
     "@types/classnames": "^2.2.6",

src/code/Checkbox.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import styled, { css } from "styled-components"
 import { Frame, addPropertyControls, ControlType } from "framer"
 import { IconCheck, colors } from "./canvas"
-import utils from "./Utils"
+//import utils from "./Utils"
 
 // TODO: Transfer controller code to this file
 //import { controller } from "./App";
@@ -43,11 +43,11 @@ const CheckboxWrapper = styled.div`
             props.checked ? colors.Calypso : colors.Battleship};
         color: ${colors.Battleship};
         position: relative;
-        input[type="checkbox"] {
-            ${utils.screenReaderStyles}
-        }
+
     `
-
+/*input[type="checkbox"] {
+            ${utils.screenReaderStyles}
+        }*/
 export function Checkbox(props) {
     const { checked, onValueChange, textLabel, ...rest } = props
 

src/code/Controls/Button.tsx

@@ -0,0 +1,295 @@
+import * as React from "react";
+import { useEffect, createElement, memo } from "react";
+import styled, { css } from "styled-components";
+import { Frame, addPropertyControls, ControlType, RenderTarget } from "framer";
+import { colors } from "../canvas";
+import { omit } from "../utils/omit";
+import {
+  eventTriggerProps,
+  keyEventTriggerProps,
+  automaticEventTriggerProps,
+  eventTriggerPropertyControls,
+} from "../controls";
+import { sanitizePropName } from "../utils/propNameHelpers";
+import { actions } from "../store/globalStore";
+import { extractEventHandlersFromProps } from "../utils/extractEventHandlersFromProps";
+
+const StyledButton = styled.button`
+    font-family: 'AvenirNext-DemiBold'; // TODO: pull out font from user selection
+    cursor: pointer;
+    line-height: 1;
+    font-size: 14px;
+    transition: all .15s ease-out;
+    font-smoothing: auto;
+    display: inline-block;
+
+    // Buttons
+    ${({ use }) =>
+      use &&
+      !use.includes("link") &&
+      css`
+        -webkit-appearance: button;
+        border-radius: 3px;
+        padding: 12px 24px;
+        white-space: nowrap;
+        border-radius: 0.1875rem;
+        border: 1px solid ${colors.Lorax};
+        text-shadow: 0 0 1px transparent;
+      `}
+
+    // Links
+    ${({ use }) =>
+      use &&
+      use.includes("link") &&
+      css`
+        -webkit-appearance: none;
+        font-weight: normal;
+      `}
+
+    // Primary button
+    ${({ use }) =>
+      use === "primary" &&
+      css`
+        color: ${colors.Olaf};
+        background-color: ${colors.Lorax};
+        &:hover {
+          background-color: ${colors.BUTTON_PRIMARY_HOVER_FILL};
+        }
+        &:active {
+          background-color: ${colors["Lorax Dark"]};
+          border-color: ${colors["Lorax Dark"]};
+        }
+      `}
+
+    // TODO: replace
+    &.hidden {
+        opacity: 0;
+    }
+
+    ${({ use }) =>
+      use === "secondary" &&
+      css`
+        background-color: ${colors.Olaf};
+        border-color: ${colors.Lorax};
+        color: ${colors.Lorax};
+      `}
+    ${({ disabled }) =>
+      disabled &&
+      css`
+        opacity: 0.3;
+        pointer-events: none;
+      `}
+`;
+
+function _Button(props) {
+  const {
+    textLabel,
+    use,
+    leadingIcon,
+    trailingIcon,
+    additionalClassName,
+    children,
+    target,
+    ...rest
+  } = props;
+  const sanitizedTarget = sanitizePropName(target);
+
+  if (RenderTarget.current() === RenderTarget.thumbnail) {
+    return <ButtonActionThumbnail />;
+  }
+
+  const {
+    getSwitchStateIndex,
+    setSwitchStateIndex,
+    registerSwitchStates,
+    getAllSwitchStates,
+  } = actions;
+
+  // Extract event handlers from props
+  let [
+    eventHandlers,
+    keyEvents,
+    automaticEvents,
+  ] = extractEventHandlersFromProps(
+    props,
+    {
+      getSwitchStateIndex,
+      setSwitchStateIndex,
+      registerSwitchStates,
+      getAllSwitchStates,
+    },
+    sanitizedTarget
+  );
+
+  const automaticEventProps = Object.keys(props)
+    .filter((prop) => automaticEventTriggerProps.indexOf(prop) !== -1)
+    .map((prop) => props[prop]);
+
+  // execute automatic (delay) event triggers
+  useEffect(() => {
+    if (RenderTarget.current() !== RenderTarget.preview) {
+      return;
+    }
+
+    const timeouts = automaticEvents.map(({ handler }) => handler());
+
+    return () => {
+      timeouts.forEach(clearTimeout);
+    };
+  }, [...automaticEventProps, sanitizedTarget, props.id]);
+
+  const child = children && React.Children.toArray(children)[0];
+
+  return (
+    <StyledButton
+      use={use}
+      {...eventHandlers}
+      {...omit(rest, eventTriggerProps)}
+      // TODO: Rethink className as prop
+      className={additionalClassName}
+      //{...rest}
+      // style={{
+      //     color: "#fff",
+      //     fontSize: 16,
+      //     fontWeight: 600,
+      // }}
+    >
+      {leadingIcon} {textLabel} {trailingIcon}
+    </StyledButton>
+  );
+}
+
+_Button.displayName = "Button";
+
+const __Button = memo(_Button);
+
+export const Button = (props) => <__Button {...props} />;
+
+Button.defaultProps = {
+  height: 44,
+  width: 112,
+  textLabel: "Continue",
+  target: "sharedSwitch",
+  isInteractive: true,
+  // Can add margin, padding, etc.
+  // Force conversation & collaboration
+};
+
+addPropertyControls(Button, {
+  textLabel: {
+    title: "Label",
+    type: ControlType.String,
+    defaultValue: "Next",
+  },
+  use: {
+    type: ControlType.Enum,
+    defaultValue: "primary",
+    options: [
+      "link",
+      "link-dark",
+      "primary",
+      "secondary",
+      "tertiary",
+      "tertiary-light",
+      "destructive",
+    ],
+    optionTitles: [
+      "Link to another page",
+      "Link to another page (on dark)",
+      "Primary, most frequent page action",
+      "Alternate action",
+      "Tertiary action",
+      "Tertiary action (light)",
+      "Deleting, disconnecting, or other unrevertable actions",
+    ],
+  },
+  size: {
+    type: ControlType.Enum,
+    defaultValue: "default",
+    options: ["default", "small", "extra-small"],
+    optionTitles: ["Default", "Small", "Extra Small"],
+  },
+  // TODO: Appearance instead of disabled
+  disabled: {
+    title: "Disabled",
+    type: ControlType.Boolean,
+    defaultValue: false,
+  },
+  leadingIcon: {
+    type: ControlType.ComponentInstance,
+  },
+  trailingIcon: {
+    type: ControlType.ComponentInstance,
+  },
+  children: {
+    type: ControlType.ComponentInstance,
+    title: "Appearance",
+  },
+  target: {
+    type: ControlType.String,
+    title: "Switch",
+    defaultValue: "sharedSwitch",
+  },
+  ...eventTriggerPropertyControls,
+});
+
+// ---------------------- Thumbnail -----------------------
+
+function ButtonActionThumbnail() {
+  return <Button textLabel="My Button" />;
+}
+/*
+
+
+import * as React from "react"
+import { Frame, addPropertyControls, ControlType } from "framer"
+
+// Open Preview: Command + P
+// Learn more: https://framer.com/api
+
+export function MyButton(props) {
+    const { text, tint, onTap, ...rest } = props
+
+    return (
+        <Frame
+            {...rest}
+            background={tint}
+            onTap={onTap}
+            whileHover={{
+                scale: 1.1,
+            }}
+            style={{
+                color: "#fff",
+                fontSize: 16,
+                fontWeight: 600,
+            }}
+        >
+            {text}
+        </Frame>
+    )
+}
+
+MyButton.defaultProps = {
+    height: 128,
+    width: 240,
+    text: "Get started!",
+    tint: "#0099ff",
+}
+
+// Learn more: https://framer.com/api/property-controls/
+addPropertyControls(MyButton, {
+    text: {
+        title: "Text",
+        type: ControlType.String,
+        defaultValue: "Hello Framer!",
+    },
+    tint: {
+        title: "Tint",
+        type: ControlType.Color,
+        defaultValue: "#0099ff",
+    },
+    onTap: {
+        type: ControlType.EventHandler,
+    },
+})
+*/