Added the figma ds css

BoostryJP · Jan 29, 2020 · ddcbdd3 · ddcbdd3
1 parent c55b9b9
commit ddcbdd3
Show file tree

Hide file tree

Showing 22 changed files with 1,936 additions and 413 deletions.
diff --git a/package.json b/package.json
@@ -14,8 +14,7 @@
 		"framer-motion": "^1.6.17",
 		"react": "^16.8.6",
 		"react-contextmenu": "^2.13.0",
-		"react-dom": "^16.8.6",
-		"react-truncate": "^2.4.0"
+		"react-dom": "^16.8.6"
 	},
 	"devDependencies": {
 		"@types/react": "^16.8.24",

diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx
@@ -1,13 +1,15 @@
 import * as React from "react";
 import { useState } from "react";
-import ErrorPanel from "./ErrorPanel";
+import { AnimatePresence } from "../../../node_modules/framer-motion";
+
 import NodeList from "./NodeList";
 import Preloader from "./Preloader";
 import EmptyState from "./EmptyState";
-import "../styles/reset.css";
+import Panel from "./Panel";
+
+import "../styles/figma.ds.css";
 import "../styles/ui.css";
 import "../styles/empty-state.css";
-import { AnimatePresence } from "../../../node_modules/framer-motion";
 
 const App = ({}) => {
   const [errorArray, setErrorArray] = useState([]);
@@ -204,42 +206,40 @@ const App = ({}) => {
   }, []);
 
   return (
-    <div className="wrapper">
-      <div className="flex-wrapper">
-        <AnimatePresence>
-          {activeNodeIds.length !== 0 ? (
-            <NodeList
-              onErrorUpdate={updateActiveError}
-              onVisibleUpdate={updateVisible}
-              onSelectedListUpdate={updateSelectedList}
-              onRefreshSelection={onRunApp}
-              visibility={isVisible}
-              nodeArray={nodeArray}
-              errorArray={errorArray}
-              ignoredErrorArray={ignoredErrorArray}
-              selectedListItems={selectedListItems}
-              activeNodeIds={activeNodeIds}
-              borderRadiusValues={borderRadiusValues}
-            />
-          ) : timedLoad === false ? (
-            <Preloader />
-          ) : (
-            <EmptyState onHandleRunApp={onRunApp} />
-          )}
-        </AnimatePresence>
-        {Object.keys(activeError).length !== 0 && errorArray.length ? (
-          <ErrorPanel
+    <div className="container">
+      <AnimatePresence>
+        {activeNodeIds.length !== 0 ? (
+          <NodeList
+            onErrorUpdate={updateActiveError}
+            onVisibleUpdate={updateVisible}
+            onSelectedListUpdate={updateSelectedList}
+            onRefreshSelection={onRunApp}
             visibility={isVisible}
-            node={selectedNode}
+            nodeArray={nodeArray}
             errorArray={errorArray}
-            onIgnoredUpdate={updateIgnoredErrors}
-            onIgnoreAll={ignoreAll}
-            ignoredErrors={ignoredErrorArray}
-            onClick={updateVisibility}
-            onSelectedListUpdate={updateSelectedList}
+            ignoredErrorArray={ignoredErrorArray}
+            selectedListItems={selectedListItems}
+            activeNodeIds={activeNodeIds}
+            borderRadiusValues={borderRadiusValues}
           />
-        ) : null}
-      </div>
+        ) : timedLoad === false ? (
+          <Preloader />
+        ) : (
+          <EmptyState onHandleRunApp={onRunApp} />
+        )}
+      </AnimatePresence>
+      {Object.keys(activeError).length !== 0 && errorArray.length ? (
+        <Panel
+          visibility={isVisible}
+          node={selectedNode}
+          errorArray={errorArray}
+          onIgnoredUpdate={updateIgnoredErrors}
+          onIgnoreAll={ignoreAll}
+          ignoredErrors={ignoredErrorArray}
+          onClick={updateVisibility}
+          onSelectedListUpdate={updateSelectedList}
+        />
+      ) : null}
     </div>
   );
 };

diff --git a/src/app/components/EmptyState.tsx b/src/app/components/EmptyState.tsx
@@ -22,13 +22,16 @@ function EmptyState(props) {
         <div className="empty-state__image">
           <img className="layer-icon" src={require("../assets/layers.svg")} />
         </div>
-        <h3 className="empty-state__title">
+        <div className="empty-state__title">
           Select a frame or multiple frames
-        </h3>
+        </div>
       </div>
-      <div className="button button--primary" onClick={onRunApp}>
+      <button
+        className="button button--primary button--full"
+        onClick={onRunApp}
+      >
         Run Design Lint
-      </div>
+      </button>
     </motion.div>
   );
 }

diff --git a/src/app/components/ErrorList.tsx b/src/app/components/ErrorList.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";
-import Truncate from "react-truncate";
 
 function ErrorList(props) {
   // Pass the error we want to ignore back to our parent.
@@ -45,11 +44,7 @@ function ErrorList(props) {
         </span>
       </div>
 
-      {error.value ? (
-        <Truncate line={1} width={248} className="current-value">
-          {error.value}
-        </Truncate>
-      ) : null}
+      {error.value ? <div className="current-value">{error.value}</div> : null}
 
       <ContextMenu id={error.node.id + error.value}>
         <MenuItem

diff --git a/src/app/components/ListItem.tsx b/src/app/components/ListItem.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import classNames from "classnames";
-import Truncate from "react-truncate";
 
 function ListItem(props) {
   const { onClick } = props;
@@ -82,16 +81,10 @@ function ListItem(props) {
         <span className="list-icon">
           <img src={require("../assets/" + node.type.toLowerCase() + ".svg")} />
         </span>
-        <span className="list-name">
-          <Truncate lines={1} width={280}>
-            {node.name}
-          </Truncate>
-        </span>
-        {childErrorsCount >= 1 && (
-          <span className="child-error-count">{/* {childErrorsCount} */}</span>
-        )}
+        <span className="list-name">{node.name}</span>
+        {childErrorsCount >= 1 && <span className="dot"></span>}
         {errorObject.errors.length >= 1 && (
-          <span className="error-count">{errorObject.errors.length}</span>
+          <span className="badge">{errorObject.errors.length}</span>
         )}
       </div>
       {childNodes ? <ul className="sub-list">{childNodes}</ul> : null}

diff --git a/src/app/components/NextButton.tsx b/src/app/components/NextButton.tsx
@@ -19,7 +19,7 @@ function NextButton(props) {
     nextButton = (
       <button
         onClick={selectNext}
-        className="button button--primary button--next"
+        className="button button--primary button--next button--flex"
       >
         Next →
       </button>
@@ -29,7 +29,7 @@ function NextButton(props) {
       <button
         onClick={selectNext}
         disabled
-        className="button button--primary button--disabled button--next"
+        className="button button--primary button--disabled button--next button--flex"
       >
         Next →
       </button>

diff --git a/src/app/components/NodeList.tsx b/src/app/components/NodeList.tsx
@@ -1,9 +1,9 @@
 import * as React from "react";
 import { motion } from "framer-motion";
+
 import ListItem from "./ListItem";
 import TotalErrorCount from "./TotalErrorCount";
 import SettingsPanel from "./SettingsPanel";
-import "../styles/bottom-controls.css";
 
 function NodeList(props) {
   const [panelVisible, setPanelVisible] = React.useState(false);
@@ -87,7 +87,7 @@ function NodeList(props) {
 
     return (
       <motion.div
-        className="flex-wrapper"
+        className="page"
         initial={{ opacity: 0, y: 24 }}
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: -24 }}
@@ -98,50 +98,44 @@ function NodeList(props) {
         }}
       >
         <ul className="list">{listItems}</ul>
-        <TotalErrorCount errorArray={filteredErrorArray} />
-        <div className="bottom-controls-row">
-          <div
-            className="button button--primary"
-            onClick={event => {
-              event.stopPropagation();
-              handleOpenFirstError();
-            }}
-          >
-            Jump to next error →
+        <div className="footer">
+          <TotalErrorCount errorArray={filteredErrorArray} />
+          <div className="actions-row">
+            <button
+              className="icon icon--adjust icon--button"
+              onClick={event => {
+                event.stopPropagation();
+                handlePanelVisible(true);
+              }}
+            ></button>
+            <div className="w12"></div>
+            <button
+              className="button button--secondary"
+              onClick={event => {
+                event.stopPropagation();
+                handleRefreshSelection();
+              }}
+            >
+              Re-run
+            </button>
+            <div className="w12"></div>
+            <button
+              className="button button--primary button--flex"
+              onClick={event => {
+                event.stopPropagation();
+                handleOpenFirstError();
+              }}
+            >
+              Jump to next error →
+            </button>
           </div>
-          <span
-            className="button--control"
-            onClick={event => {
-              event.stopPropagation();
-              handleRefreshSelection();
-            }}
-          >
-            <span className="tooltip">Lint a new set of layers</span>
-            <img
-              className="control-icon"
-              src={require("../assets/refresh.svg")}
-            />
-          </span>
-          <span
-            className="button--control"
-            onClick={event => {
-              event.stopPropagation();
-              handlePanelVisible(true);
-            }}
-          >
-            <span className="tooltip tooltip--settings">Settings</span>
-            <img
-              className="control-icon"
-              src={require("../assets/settings.svg")}
-            />
-          </span>
+          <SettingsPanel
+            panelVisible={panelVisible}
+            onHandlePanelVisible={handlePanelVisible}
+            ignoredErrorArray={props.ignoredErrorArray}
+            borderRadiusValues={props.borderRadiusValues}
+          />
         </div>
-        <SettingsPanel
-          panelVisible={panelVisible}
-          onHandlePanelVisible={handlePanelVisible}
-          ignoredErrorArray={props.ignoredErrorArray}
-          borderRadiusValues={props.borderRadiusValues}
-        />
       </motion.div>
     );
   } else {

diff --git a/src/app/components/ErrorPanel.tsx → src/app/components/Panel.tsx b/src/app/components/ErrorPanel.tsx → src/app/components/Panel.tsx
@@ -1,12 +1,14 @@
 import * as React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
 import ErrorList from "./ErrorList";
 import NextButton from "./NextButton";
 import PrevButton from "./PrevButton";
 import PanelHeader from "./PanelHeader";
-import { motion, AnimatePresence } from "framer-motion";
+
 import "../styles/panel.css";
 
-function ErrorPanel(props) {
+function Panel(props) {
   const isVisible = props.visibility;
   const node = props.node;
 
@@ -158,35 +160,38 @@ function ErrorPanel(props) {
             handleHide={handleChange}
           ></PanelHeader>
 
-          {errors.length ? (
-            <React.Fragment>
-              <h4 className="error-label">Errors — {errors.length}</h4>
-              <ErrorList
-                onIgnoredUpdate={handleIgnoreChange}
-                onIgnoreAll={handleIgnoreAll}
-                onSelectAll={handleSelectAll}
-                errors={errors}
-              />
-            </React.Fragment>
-          ) : (
-            <AnimatePresence>
-              <motion.div
-                initial={{ opacity: 0, y: 10, scale: 0.9 }}
-                animate={{ opacity: 1, y: 0, scale: 1 }}
-                exit={{ opacity: 1, y: -10, scale: 0 }}
-                className="success-message"
-              >
-                <div className="success-shape">
-                  <img
-                    className="success-icon"
-                    src={require("../assets/smile.svg")}
-                  />
-                </div>
-                All errors fixed!
-              </motion.div>
-            </AnimatePresence>
-          )}
-          <div className="button-wrapper">
+          <div className="panel-body">
+            {errors.length ? (
+              <React.Fragment>
+                <div className="error-label">Errors — {errors.length}</div>
+                <ErrorList
+                  onIgnoredUpdate={handleIgnoreChange}
+                  onIgnoreAll={handleIgnoreAll}
+                  onSelectAll={handleSelectAll}
+                  errors={errors}
+                />
+              </React.Fragment>
+            ) : (
+              <AnimatePresence>
+                <motion.div
+                  initial={{ opacity: 0, y: 10, scale: 0.9 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 1, y: -10, scale: 0 }}
+                  className="success-message"
+                >
+                  <div className="success-shape">
+                    <img
+                      className="success-icon"
+                      src={require("../assets/smile.svg")}
+                    />
+                  </div>
+                  All errors fixed in the selection
+                </motion.div>
+              </AnimatePresence>
+            )}
+          </div>
+
+          <div className="panel-footer">
             <PrevButton
               filteredErrorArray={filteredErrorArray}
               onHandleNav={handlePrevNavigation}
@@ -218,4 +223,4 @@ function ErrorPanel(props) {
   );
 }
 
-export default React.memo(ErrorPanel);
+export default React.memo(Panel);