Design Tokens Manager - Makes some implementation tweaks and layout i…

…mprovements (#4479)

* Adds a scale generator to Design Tokens Manager

* added scale to token script and layout improvements

* tweaks to scale creation method

* remove scale to tokens script

design-tokens-manager/src/routes/Scaler/ControlPane.jsx

@@ -36,7 +36,7 @@ export const ControlPane = ({ defaultValues, values, setValues, ...rest }) => {
 
   const BASE_OPTIONS = [4, 6, 8, 12, 16, 18, 24];
   const FACTOR_OPTIONS = [1.2, 1.25, 1.333, 1.414, 1.5, 1.618, 2];
-  const STEP_OPTIONS = [7, 8, 9, 10, 11, 12, 13, 14, 15];
+  const STEP_OPTIONS = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
 
   return (
     <Box
@@ -54,30 +54,34 @@ export const ControlPane = ({ defaultValues, values, setValues, ...rest }) => {
         <Form value={values} onChange={onChange}>
           <Box width={{ min: 'xsmall', max: 'small' }}>
             <FormField
-              htmlFor="base"
+              htmlFor="base__input"
               name="base"
               label="Base unit"
               help="Foundation unit for the scale"
             >
               <Select id="base" name="base" options={BASE_OPTIONS} />
             </FormField>
             <FormField
-              htmlFor="nearest"
+              htmlFor="nearest__input"
               name="nearest"
               label="Grid unit"
               help="Scale steps will be rounded to the nearest grid unit"
             >
               <Select id="nearest" name="nearest" options={BASE_OPTIONS} />
             </FormField>
-            <FormField htmlFor="factor" name="factor" label="Scale ratio">
+            <FormField
+              htmlFor="factor__input"
+              name="factor"
+              label="Scale ratio"
+            >
               <Select
                 id="factor"
                 name="factor"
                 // TO DO: Make a create option version of this
                 options={FACTOR_OPTIONS}
               />
             </FormField>
-            <FormField label="Steps" htmlFor="steps" name="steps">
+            <FormField label="Steps" htmlFor="steps__input" name="steps">
               <Select id="steps" name="steps" options={STEP_OPTIONS} />
             </FormField>
           </Box>

design-tokens-manager/src/routes/Scaler/Results.jsx

@@ -1,39 +1,61 @@
 import { useEffect, useState } from 'react';
-import { Box, Text } from 'grommet';
+import { Box, Button, Text } from 'grommet';
+import { Copy, Tasks } from 'grommet-icons';
 
 const roundToNearest = (value, nearest) => {
   return Math.round(value / nearest) * nearest;
 };
 
 const createScale = (base, factor, steps, nearest) => {
-  // TO DO: Refactor this to be more efficient
+  const stepsAbove = Math.ceil(steps / 2);
+  const stepsBelow = Math.floor(steps / 2);
+  const values = [];
+  for (let i = 0; i < stepsAbove; i++) {
+    values.push(roundToNearest(base * Math.pow(factor, i), nearest || base));
+  }
+  for (let i = 1; i < stepsBelow; i++) {
+    values.push(Math.round(base / Math.pow(factor, i)));
+  }
 
-  const array = new Array(steps * 3).fill(0);
-  const result = array
-    .map((_, index) => {
-      return roundToNearest(Math.pow(factor, index) * base, nearest || base);
-    })
+  const result = values
     .reduce((acc, value) => {
       if (!acc.includes(value)) {
         acc.push(value);
       }
       return acc;
     }, [])
-    .splice(0, steps);
+    .sort((a, b) => a - b);
 
-  // add values below the base to results, down to 0
-  for (let i = base; i >= 0; i--) {
-    const value = Math.floor(base / Math.pow(factor, i));
+  return result;
+};
 
-    if (!result.includes(value)) {
-      result.push(value);
-    }
-  }
+const defaultCopyTip = 'Copy scale to clipboard';
 
-  return result.sort((a, b) => a - b);
+const CopyButton = ({ scale, ...rest }) => {
+  const [copyTip, setCopyTip] = useState(defaultCopyTip);
+
+  const onCopy = () => {
+    const duration = 2000;
+    navigator.clipboard.writeText(`${JSON.stringify(scale, null, 2)}`);
+    setCopyTip('Copied!');
+    const timer = setTimeout(() => {
+      setCopyTip(defaultCopyTip);
+    }, duration);
+    return () => clearTimeout(timer);
+  };
+
+  return (
+    <Button
+      a11yTitle={copyTip}
+      tip={copyTip}
+      icon={<Copy aria-hidden="true" />}
+      onClick={onCopy}
+      {...rest}
+    />
+  );
 };
 
-export const Results = ({ base, factor, steps, nearest, ...rest }) => {
+export const Results = ({ base, factor, steps, nearest, setOpen, ...rest }) => {
   const [scale, setScale] = useState([]);
 
   useEffect(() => {
@@ -42,22 +64,45 @@ export const Results = ({ base, factor, steps, nearest, ...rest }) => {
   }, [base, factor, steps, nearest]);
 
   return (
-    <Box fill gap="xsmall" {...rest}>
-      {scale &&
-        scale.map((value, index) => {
-          return (
-            <Box key={value} direction="row" align="center" gap="medium">
-              <Box align="end" width={{ min: 'xxsmall' }}>
-                <Text key={index}>{value}px</Text>
+    <Box
+      fill
+      direction="row"
+      justify="between"
+      height={{ min: 'medium' }}
+      {...rest}
+    >
+      <Box
+        direction="row"
+        align="end"
+        alignSelf="center"
+        cssGap
+        gap="medium"
+        wrap
+      >
+        {scale &&
+          scale.map((value, index) => {
+            return (
+              <Box key={value} align="center" gap="xsmall">
+                <Box
+                  background="brand"
+                  width={`${value}px`}
+                  height={`${value}px`}
+                />
+                <Text key={index} size="small">
+                  {value}px
+                </Text>
               </Box>
-              <Box
-                background="brand"
-                width={`${value}px`}
-                height={`${value}px`}
-              />
-            </Box>
-          );
-        })}
+            );
+          })}
+      </Box>
+      <Box gap="xsmall" flex={false}>
+        <Button
+          tip="Open scale settings"
+          icon={<Tasks aria-hidden="true" />}
+          onClick={setOpen}
+        />
+        <CopyButton scale={scale} />
+      </Box>
     </Box>
   );
 };

design-tokens-manager/src/routes/Scaler/index.jsx

@@ -5,15 +5,16 @@ import { Results } from './Results';
 
 const defaultValues = {
   base: 8,
-  steps: 10,
+  steps: 20,
   factor: 1.333,
-  nearest: 8,
+  nearest: 4,
   'spacing-factor': 0,
   'type-factor': 0,
 };
 
 export const Scaler = () => {
   const [values, setValues] = useState(defaultValues);
+  const [controlsOpen, setControlsOpen] = useState(true);
 
   return (
     <Page pad={{ bottom: 'xlarge' }}>
@@ -22,7 +23,7 @@ export const Scaler = () => {
           title="Scale generator"
           subtitle="Explore dimension scaling options by adjusting scale settings."
         />
-        <Box direction="row" gap="large">
+        <Box direction="row" gap="small">
           <Results
             base={values.base}
             factor={values.factor}
@@ -31,13 +32,24 @@ export const Scaler = () => {
             background="background-front"
             round="medium"
             pad="medium"
+            setOpen={() => setControlsOpen(!controlsOpen)}
           />
-          <ControlPane
-            defaultValues={defaultValues}
-            values={values}
-            setValues={setValues}
-            alignSelf="start"
-          />
+          {controlsOpen && (
+            <ControlPane
+              defaultValues={defaultValues}
+              values={values}
+              setValues={setValues}
+              alignSelf="start"
+              animation={
+                controlsOpen
+                  ? [
+                      { type: 'fadeIn', duration: 250, delay: 0 },
+                      { type: 'zoomIn', delay: 0, duration: 500 },
+                    ]
+                  : undefined
+              }
+            />
+          )}
         </Box>
       </PageContent>
     </Page>