Improvement/artesca 11222 remove UI details

package.json

@@ -33,18 +33,18 @@
     "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@storybook/addon-actions": "^7.6.6",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-mdx-gfm": "^7.6.6",
-    "@storybook/addon-storyshots": "^7.6.6",
-    "@storybook/addon-storysource": "^7.6.6",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/manager-api": "^7.6.6",
-    "@storybook/react": "^7.6.6",
-    "@storybook/react-webpack5": "^7.6.6",
+    "@storybook/addon-actions": "^7.6.14",
+    "@storybook/addon-essentials": "^7.6.14",
+    "@storybook/addon-links": "^7.6.14",
+    "@storybook/addon-mdx-gfm": "^7.6.14",
+    "@storybook/addon-storyshots": "^7.6.14",
+    "@storybook/addon-storysource": "^7.6.14",
+    "@storybook/blocks": "^7.6.14",
+    "@storybook/manager-api": "^7.6.14",
+    "@storybook/react": "^7.6.14",
+    "@storybook/react-webpack5": "^7.6.14",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^7.6.6",
+    "@storybook/theming": "^7.6.14",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^8.0.1",
@@ -75,7 +75,7 @@
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.0",
     "source-map-explorer": "^2.0.1",
-    "storybook": "^7.6.6",
+    "storybook": "^7.6.14",
     "typescript": "^5.3.2"
   },
   "husky": {
@@ -100,7 +100,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@js-temporal/polyfill": "^0.4.4",
-    "@storybook/preview-api": "^7.6.6",
+    "@storybook/preview-api": "^7.6.14",
     "framer-motion": "^4.1.17",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",

src/lib/icons/branding-logo.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+const Logo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="49"
+    height="49"
+    viewBox="0 0 49 49"
+  >
+    <path
+      fill="#3d9bd6"
+      d="M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z"
+    />
+    <path
+      fill="#007664"
+      d="M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z"
+    />
+    <path
+      fill="#ee4642"
+      d="M21.16 44.25V37h3.99v7.25l5.16-2.92 2 3.36-5.17 2.92a7.9 7.9 0 0 1-7.88 0L14 44.69l1.99-3.36z"
+    />
+    <path
+      fill="#2aad8e"
+      d="M40.43 13.28L34 16.9l1.99 3.36 6.44-3.62v5.83h3.99v-5.92c0-1.33-.37-2.65-1.09-3.8a8.82 8.82 0 0 0-2.9-2.83L37.17 7l-1.99 3.36z"
+    />
+    <path
+      fill="#d71d4f"
+      d="M4.99 32.84l6.43-3.63 2 3.36-6.44 3.63 5.17 2.91-2 3.36-5.25-2.92a7.6 7.6 0 0 1-2.81-2.82A7.1 7.1 0 0 1 1 32.92V27h3.99z"
+    />
+    <path
+      fill="#9e2569"
+      d="M4.08 16.64l6.43 3.62 2-3.36-6.44-3.62 5.17-2.92-2-3.36-5.25 2.92a8.72 8.72 0 0 0-2.9 2.83A7.16 7.16 0 0 0 0 16.64v5.92h3.99z"
+    />
+    <path
+      fill="#f79836"
+      d="M40.34 36.2L34 32.57l1.99-3.36 6.44 3.63V27h3.99v5.92c0 1.33-.37 2.57-1.09 3.81a8.69 8.69 0 0 1-2.9 2.82l-5.26 2.92-1.99-3.36z"
+    />
+    <path fill="#007664" d="M24 15v8.22l7.34-4.06z" />
+    <path fill="#9e2569" d="M23.25 15L16 19.16l7.25 4.06z" />
+    <path fill="#d71d4f" d="M22.25 25.07L15 21v8.13z" />
+    <path fill="#2aad8e" d="M24 24.98l7.25 4.07V21z" />
+    <path fill="#ee4642" d="M23.16 26L16 30.07l7.16 4.15z" />
+    <path fill="#f79836" d="M24 26v8.22l7.25-4.15z" />
+  </svg>
+);
+
+export { Logo };

stories/card.stories.tsx

@@ -17,13 +17,6 @@ const colors = Object.keys(brand).filter((color) => !/RGB/.test(color));
 export default {
   title: 'Components/Data Display/Card',
   component: Card,
-  decorators: [
-    (story) => (
-      <Wrapper style={{ minHeight: '10vh', padding: '3rem' }}>
-        {story()}
-      </Wrapper>
-    ),
-  ],
   argTypes: {
     status: {
       options: ['healthy', 'warning', 'critical'],
@@ -79,7 +72,7 @@ export const Playground = {
     ...defaultPropsCard,
     children: [
       <CardHeader>
-        <div>RINGXcore</div>
+        <div>Capacity usage</div>
       </CardHeader>,
       <CardBodyContainer>
         <CardBody>{defaultBody}</CardBody>
@@ -103,7 +96,7 @@ export const NormalCards = {
     ...defaultPropsCard,
     children: [
       <CardHeader>
-        <div>RINGXcore</div>
+        <div>Capacity usage</div>
       </CardHeader>,
       <CardBodyContainer>
         <CardBody>{defaultBody}</CardBody>
@@ -154,7 +147,7 @@ export const NoBody = {
     status: 'critical',
     children: (
       <CardHeader>
-        <div>RINGXcore</div>
+        <div>Capacity usage</div>
       </CardHeader>
     ),
   },
@@ -174,7 +167,7 @@ export const MultipleBodies = {
     status: 'critical',
     children: [
       <CardHeader>
-        <div>RINGXcore</div>
+        <div>Capacity usage</div>
       </CardHeader>,
       <CardBodyContainer>
         <CardBody>{defaultBody}</CardBody>

stories/color.mdx

@@ -6,7 +6,7 @@ import { coreUIAvailableThemes } from '../src/lib/style/theme';
 
 # Colors
 
-## Artesca Dark
+## A-Dark
 
 <ColorPalette>
   {
@@ -18,7 +18,7 @@ import { coreUIAvailableThemes } from '../src/lib/style/theme';
 
 </ColorPalette>
 
-## Artesca Light
+## A-Light
 
 <ColorPalette>
   {
@@ -30,7 +30,7 @@ import { coreUIAvailableThemes } from '../src/lib/style/theme';
 
 </ColorPalette>
 
-## Ring Dark
+## R-Dark
 
 <ColorPalette>
   {

stories/layout.stories.tsx

@@ -22,65 +22,16 @@ const HeaderComponent = styled.div`
   background: #ff9c54;
   flex: 1;
   color: black;
-}`;
-
-export const Layout2SimplestV2 = {
-  args: {
-    children: (
-      <AppContainer>
-        <AppContainer.ContextContainer background="backgroundLevel1">
-          <>Context bar</>
-        </AppContainer.ContextContainer>
-        <AppContainer.OverallSummary noPadding>
-          <Stack withSeparators={true} gap="r32">
-            <Stack gap="r20">
-              <Icon name="Account" size="2x" withWrapper />
-              <Stack direction="vertical" gap="r4">
-                <Text variant="Larger">6 Accounts</Text>
-                <Text variant="Smaller" color="textSecondary">
-                  for this instance
-                </Text>
-              </Stack>
-            </Stack>
-            <Stack gap="r32">
-              <Stack>
-                <Icon name={'Check-circle'} color={'statusHealthy'} />
-                <Text color="textSecondary">Replication</Text>
-              </Stack>
-              <Stack>
-                <Icon name={'Check-circle'} color={'statusHealthy'} />
-                <Text color="textSecondary">Expiration</Text>
-              </Stack>
-              <Stack>
-                <Icon name={'Check-circle'} color={'statusHealthy'} />
-                <Text color="textSecondary">Transition</Text>
-              </Stack>
-            </Stack>
-            <Stack direction="vertical" gap="r4">
-              <Stack gap="r4">
-                <Text isEmphazed>Active Alerts</Text>
-                <TextBadge text="0" variant="infoPrimary" />
-              </Stack>
-              <Text variant="Smaller" color="textSecondary">
-                No active alerts
-              </Text>
-            </Stack>
-          </Stack>
-        </AppContainer.OverallSummary>
-        <AppContainer.MainContent>Main content</AppContainer.MainContent>
-      </AppContainer>
-    ),
-  },
-};
+`;
 
 export const Layout2Simplest = {
   render: () => {
     return (
       <Layout2
         headerNavigation={
-          // <HeaderComponent>
-          <h3>Header navigation</h3>
-          // </HeaderComponent>
+          <HeaderComponent>
+            <h3>Header navigation</h3>
+          </HeaderComponent>
         }
       >
         <AppContainer>
@@ -92,33 +43,33 @@ export const Layout2Simplest = {
               <Stack gap="r20">
                 <Icon name="Account" size="2x" withWrapper />
                 <Stack direction="vertical" gap="r4">
-                  <Text variant="Larger">6 Accounts</Text>
+                  <Text variant="Larger">Title</Text>
                   <Text variant="Smaller" color="textSecondary">
-                    for this instance
+                    subtitle
                   </Text>
                 </Stack>
               </Stack>
               <Stack gap="r32">
                 <Stack>
                   <Icon name={'Check-circle'} color={'statusHealthy'} />
-                  <Text color="textSecondary">Replication</Text>
+                  <Text color="textSecondary">Status 1</Text>
                 </Stack>
                 <Stack>
                   <Icon name={'Check-circle'} color={'statusHealthy'} />
-                  <Text color="textSecondary">Expiration</Text>
+                  <Text color="textSecondary">Status 2</Text>
                 </Stack>
                 <Stack>
                   <Icon name={'Check-circle'} color={'statusHealthy'} />
-                  <Text color="textSecondary">Transition</Text>
+                  <Text color="textSecondary">Status 3</Text>
                 </Stack>
               </Stack>
               <Stack direction="vertical" gap="r4">
                 <Stack gap="r4">
-                  <Text isEmphazed>Active Alerts</Text>
+                  <Text isEmphazed>Alerts</Text>
                   <TextBadge text="0" variant="infoPrimary" />
                 </Stack>
                 <Text variant="Smaller" color="textSecondary">
-                  No active alerts
+                  No alerts
                 </Text>
               </Stack>
             </Stack>

stories/navbar.stories.tsx

@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
 import { Link } from '../src/lib/components/text/Text.component';
 import { InlineInput } from '../src/lib';
 import { Stack } from '../src/lib/spacing';
+import { Logo } from '../src/lib/icons/branding-logo';
 
 const tabs = [
   {
@@ -86,8 +87,8 @@ const rightActions = [
     icon: <i className="fas fa-th" />,
     items: [
       {
-        label: 'Hyperdrive UI',
-        onClick: action('Hyperdrive UI clicked'),
+        label: 'App 1',
+        onClick: action('App 1 clicked'),
       },
     ],
   },
@@ -143,6 +144,7 @@ export default {
     productName: 'Hardware UI',
     rightActions,
     tabs,
+    logo: <Logo />,
   },
 };
 

stories/spacing.stories.tsx

@@ -19,7 +19,7 @@ export const Playground = {
   render: (args) => (
     <Stack {...args}>
       <Icon name="Account" size="2x" color="infoPrimary" withWrapper />
-      <LargerText>6 Accounts</LargerText>
+      <LargerText>My Title</LargerText>
     </Stack>
   ),
 };
@@ -41,30 +41,30 @@ export const StackStory = {
             <Stack gap="r20">
               <Icon name="Account" size="2x" color="infoPrimary" withWrapper />
               <Stack direction="vertical" gap="r4">
-                <LargerText>6 Accounts</LargerText>
-                <SmallerSecondaryText>for this instance</SmallerSecondaryText>
+                <LargerText>Title</LargerText>
+                <SmallerSecondaryText>Subtitle</SmallerSecondaryText>
               </Stack>
             </Stack>
             <Stack gap="r32">
               <Stack>
                 <Icon name={'Check-circle'} color={'statusHealthy'} />
-                <SecondaryText>Replication</SecondaryText>
+                <SecondaryText>Status 1</SecondaryText>
               </Stack>
               <Stack>
                 <Icon name={'Check-circle'} color={'statusHealthy'} />
-                <SecondaryText>Expiration</SecondaryText>
+                <SecondaryText>Status 2</SecondaryText>
               </Stack>
               <Stack>
                 <Icon name={'Check-circle'} color={'statusHealthy'} />
-                <SecondaryText>Transition</SecondaryText>
+                <SecondaryText>Status 3</SecondaryText>
               </Stack>
             </Stack>
             <Stack direction="vertical" gap="r4">
               <Stack gap="r4">
-                <EmphaseText>Active Alerts</EmphaseText>
+                <EmphaseText>Alerts</EmphaseText>
                 <TextBadge text="0" variant="infoPrimary" />
               </Stack>
-              <SmallerSecondaryText>No active alerts</SmallerSecondaryText>
+              <SmallerSecondaryText>No alerts</SmallerSecondaryText>
             </Stack>
           </Stack>
         </div>