Add scaffold of today page, authentication

grommet · Mar 1, 2024 · 8dd564b · 8dd564b
1 parent 1adc73f
commit 8dd564b
Show file tree

Hide file tree

Showing 27 changed files with 922 additions and 481 deletions.
diff --git a/aries-site/src/pages/demo.js b/aries-site/src/pages/demo.js
diff --git a/design-tokens/src/build.js b/design-tokens/src/build.js
@@ -60,6 +60,11 @@ const resolvedMobile = resolveTokens(mobile, primitives);
 
 mkdirSync('./dist');
 
+writeFileSync(
+  './dist/primitives.base.js',
+  `export default ${JSON.stringify(primitives, null, 2)}`,
+);
+
 // do we only want to export resolved ones?
 // is there any value to having the references (for example, figma uses it)
 writeFileSync(
@@ -89,7 +94,8 @@ writeFileSync(
 
 writeFileSync(
   './dist/index.js',
-  `export { default as dark } from './color.dark.js';
+  `export { default as primitives } from './primitives.base.js';
+export { default as dark } from './color.dark.js';
 export { default as light } from './color.light.js';
 export { default as desktop } from './dimension.large.js';
 export { default as mobile } from './dimension.small.js';`,

diff --git a/sandbox/grommet-app/package.json b/sandbox/grommet-app/package.json
@@ -10,7 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "design-tokens": "file:.yalc/design-tokens",
     "grommet": "^2.35.0",
     "grommet-icons": "^4.12.0",
     "grommet-theme-hpe": "^5.2.0",

diff --git a/sandbox/grommet-app/src/App.jsx b/sandbox/grommet-app/src/App.jsx
@@ -1,45 +1,64 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Box, Button, Grommet, Image } from 'grommet';
 import { tokensTheme } from './theme';
 import { Moon, Sun } from 'grommet-icons';
 import Sustainability from './pages/sustainability/index';
 import Home from './pages/index';
+import NextDashboard from './pages/next/index';
+import VisionDashboard from './pages/vision/index';
+import { Login } from './Login';
 
 const App = () => {
   const [darkMode, setDarkMode] = useState(false);
+  const [authenticated, setAuthenticated] = useState(
+    localStorage.getItem('design-tokens-demo') || false,
+  );
+
+  useEffect(() => {
+    if (localStorage.getItem('design-tokens-demo')) setAuthenticated(true);
+  }, []);
+
   return (
     <Grommet
       theme={tokensTheme}
       // background="background-back"
       full="min"
       themeMode={darkMode ? 'dark' : 'light'}
     >
-      <Box
-        direction="row"
-        justify="between"
-        align="center"
-        background="background-front"
-        pad={{ horizontal: 'medium', vertical: 'small' }}
-        border={{ color: 'border-weak', side: 'bottom' }}
-      >
-        <Box height="32px" align="start">
-          <Image
-            src={`/hpe_greenlake_grn_${darkMode ? 'rev' : 'pos'}_rgb.svg`}
-            fit="contain"
-          />
-        </Box>
-        <Button
-          icon={darkMode ? <Moon /> : <Sun />}
-          onClick={() => setDarkMode(!darkMode)}
-        />
-      </Box>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/sustainability" element={<Sustainability />} />
-        </Routes>
-      </BrowserRouter>
+      {authenticated ? (
+        <>
+          <Box
+            direction="row"
+            justify="between"
+            align="center"
+            background="background-front"
+            pad={{ horizontal: 'medium', vertical: 'small' }}
+            border={{ color: 'border-weak', side: 'bottom' }}
+          >
+            <Box height="32px" align="start">
+              <Image
+                src={`/hpe_greenlake_grn_${darkMode ? 'rev' : 'pos'}_rgb.svg`}
+                fit="contain"
+              />
+            </Box>
+            <Button
+              icon={darkMode ? <Moon /> : <Sun />}
+              onClick={() => setDarkMode(!darkMode)}
+            />
+          </Box>
+          <BrowserRouter>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/sustainability" element={<Sustainability />} />
+              <Route path="/next" element={<NextDashboard />} />
+              <Route path="/vision" element={<VisionDashboard />} />
+            </Routes>
+          </BrowserRouter>
+        </>
+      ) : (
+        <Login setAuthenticated={setAuthenticated} />
+      )}
     </Grommet>
   );
 };

diff --git a/sandbox/grommet-app/src/Login.jsx b/sandbox/grommet-app/src/Login.jsx
@@ -0,0 +1,45 @@
+import {
+  Form,
+  FormField,
+  TextInput,
+  Button,
+  Page,
+  PageContent,
+  PageHeader,
+} from 'grommet';
+import PropTypes from 'prop-types';
+
+export const Login = ({ setAuthenticated }) => {
+  return (
+    <Page>
+      <PageContent>
+        <PageHeader
+          title="HPE Design Tokens Demo"
+          subtitle="Please log in to view the designs."
+        />
+        <Form
+          onSubmit={({ value }) => {
+            if (value.password === import.meta.env.VITE_PASSWORD) {
+              localStorage.setItem('design-tokens-demo', 'true');
+              setAuthenticated(true);
+            }
+          }}
+        >
+          <FormField
+            label="Password"
+            name="password"
+            htmlFor="password"
+            contentProps={{ width: 'medium' }}
+          >
+            <TextInput type="password" name="password" id="password" />
+          </FormField>
+          <Button label="Submit" type="submit" kind="primary" />
+        </Form>
+      </PageContent>
+    </Page>
+  );
+};
+
+Login.propTypes = {
+  setAuthenticated: PropTypes.func,
+};
diff --git a/sandbox/grommet-app/src/components/Card/Card.jsx b/sandbox/grommet-app/src/components/Card/Card.jsx
@@ -102,7 +102,9 @@ const DesignSystemCard = ({
             align="start"
             pad={{ bottom: 'medium', horizontal: 'medium' }}
           >
-            <Paragraph margin="none">{description}</Paragraph>
+            <Paragraph margin="none" maxLines={4}>
+              {description}
+            </Paragraph>
             {children}
           </CardBody>
         </Box>

diff --git a/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx b/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx
@@ -35,20 +35,22 @@ export const DashboardCard = ({
     <Card {...rest}>
       <CardHeader align="start">
         <Box direction="row" gap="small" align="start">
-          {icon}
-          <Box gap="xsmall">
+          <Box flex={false}>{icon}</Box>
+          <Box gap="xsmall" flex={false}>
             <Heading level={level} margin="none">
               {title}
             </Heading>
-
             <Text size="small">{subtitle}</Text>
           </Box>
         </Box>
-
-        <LinkNext a11yTitle={`Go to ${title}`} color="brand" />
+        <Box flex={false}>
+          <LinkNext a11yTitle={`Go to ${title}`} color="brand" />
+        </Box>
       </CardHeader>
-      <CardBody pad={{ horizontal: 'medium' }}>{children}</CardBody>
-      <CardFooter>{footer}</CardFooter>
+      {children && (
+        <CardBody pad={{ horizontal: 'medium' }}>{children}</CardBody>
+      )}
+      {footer && <CardFooter>{footer}</CardFooter>}
     </Card>
   );
 };