@scality/core-ui 0.118.0 → 0.119.0

package/src/lib/components/vegachartv2/VegaChartV2.component.tsx

@@ -1,15 +1,8 @@
 // @ts-nocheck
-import React, {
-  useEffect,
-  useContext,
-  useRef,
-  useLayoutEffect,
-  useMemo,
-} from 'react';
+import React, { useEffect, useRef, useLayoutEffect, useMemo } from 'react';
 import * as vega from 'vega';
 import vegaEmbed, { Result } from 'vega-embed';
-import { ThemeContext, createGlobalStyle } from 'styled-components';
-import { getThemePropSelector } from '../../utils';
+import { createGlobalStyle, css, useTheme } from 'styled-components';
 import { useCursorX, SyncedCursorChartsContext } from './SyncedCursorCharts';
 import { TooltipHandlerWithPaint } from '../linetemporalchart/tooltip';
 export const TOP = 'top';
@@ -33,29 +26,35 @@ https://github.com/vega/vega-tooltip/blob/master/docs/customizing_your_tooltip.m
 */
 const VegaTooltipTheme = createGlobalStyle`
   #vg-tooltip-element.vg-tooltip.custom-theme {
-    padding: 8px;
-    position: fixed;
-    z-index: 1000;
-    width: calc(100vw/6);
-    font-family: 'Lato';
-    font-size: 12px;
-    border-radius: 3px;
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
-    color: ${getThemePropSelector('textPrimary')};
-    background-color: ${getThemePropSelector('backgroundLevel1')};
-    border: 1px solid ${getThemePropSelector('border')};
-    // customize the title
-    h2 {
-      color: ${getThemePropSelector('textPrimary')};
-      margin-bottom: 10px;
-      font-size: 12px;
-    }
-    table {
-      width: 100%;
-    }
-    table tr td.key {
-      color: ${getThemePropSelector('textSecondary')};
-    }
+    ${(props) => {
+      const { theme } = props;
+      return css`
+        padding: 8px;
+        position: fixed;
+        z-index: 1000;
+        width: calc(100vw / 6);
+        font-family: 'Lato';
+        font-size: 12px;
+        border-radius: 3px;
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+        color: ${theme.textPrimary};
+        background-color: ${theme.backgroundLevel1};
+        border: 1px solid ${theme.border};
+        // customize the title
+        h2 {
+          color: ${theme.textPrimary};
+          margin-bottom: 10px;
+          font-size: 12px;
+        }
+        table {
+          width: 100%;
+        }
+        table tr td.key {
+          color: ${theme.textSecondary};
+        }
+      `;
+    }}
+    
   }
 `;
 
@@ -73,42 +72,36 @@ function VegaChartInternal(
 ) {
   // $FlowFixMe
   const { cursorX, setCursorX } = useCursorX();
-  const themeContext = useContext(ThemeContext);
-  // the background color of the view
-  const seriesBackgroundColor =
-    themeContext && themeContext.brand
-      ? themeContext.brand.backgroundLevel1
-      : themeContext.backgroundLevel1;
-  const brandText =
-    themeContext && themeContext.brand
-      ? themeContext.brand.textPrimary
-      : themeContext.textPrimary;
+  const currentTheme = useTheme();
   const themeConfig = {
     config: {
-      background: 'transparent',
+      background: currentTheme.backgroundLevel1,
       axis: {
-        labelColor: brandText,
-        titleColor: brandText,
+        labelColor: currentTheme.textSecondary,
+        titleColor: currentTheme.textSecondary,
         grid: false,
         domainColor: 'transparent',
       },
       title: {
-        color: brandText,
+        color: currentTheme.buttonDelete,
         font: 'Lato',
       },
       view: {
         stroke: 'transparent',
-        fill: seriesBackgroundColor,
+        fill: currentTheme.backgroundLevel1,
       },
       // the headers provide a title and labels for faceted plots.
       header: {
-        labelColor: brandText,
+        labelColor: currentTheme.textPrimary,
       },
       // the label of max/min
       text: {
-        color: brandText,
+        color: currentTheme.textPrimary,
         font: 'Lato',
       },
+      legend: {
+        labelColor: currentTheme.textSecondary,
+      },
     },
   };
   const themedSpec = { ...spec, ...themeConfig };
@@ -195,7 +188,8 @@ function VegaChartInternal(
         vegaInstance.current.view.finalize();
       }
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vegaDOMInstance]);
+  }, [vegaDOMInstance, currentTheme]);
+
   useLayoutEffect(() => {
     if (vegaInstance.current) {
       const view = vegaInstance.current.view;
@@ -205,6 +199,7 @@ function VegaChartInternal(
       tooltipHandler.paint(); // to repaint the tooltip
     }
   }, [formatTooltip, vegaInstance, onHover]);
+
   useLayoutEffect(() => {
     if (vegaInstance.current) {
       const view = vegaInstance.current.view;
@@ -227,6 +222,7 @@ function VegaChartInternal(
     JSON.stringify(themedSpec.data.values),
     vegaInstance,
   ]);
+
   useLayoutEffect(() => {
     if (vegaInstance.current && themedSpec.params) {
       const view = vegaInstance.current.view;
@@ -269,6 +265,7 @@ function VegaChartInternal(
       ref={vegaDOMInstance}
       style={{
         width: '100%',
+        border: `${currentTheme.backgroundLevel3} 1px solid`,
       }}
     >
       <VegaTooltipTheme />

package/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 };

package/src/lib/index.ts

@@ -6,7 +6,6 @@ export { Button } from './components/button/Button.component';
 export { Checkbox } from './components/checkbox/Checkbox.component';
 export { Chips } from './components/chips/Chips.component';
 export { Dropdown } from './components/dropdown/Dropdown.component';
-export { Input } from './components/input/Input.component';
 export { LOADER_SIZE } from './components/constants';
 export { Layout } from './components/layout/Layout.component';
 export { Loader } from './components/loader/Loader.component';

package/src/lib/style/theme.ts

@@ -90,25 +90,25 @@ export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
   },
   artescaLight: {
     statusHealthy: '#009E93',
-    statusHealthyRGB: '43,171,81',
+    statusHealthyRGB: '0, 158, 147',
     statusWarning: '#E77B00',
-    statusWarningRGB: '252,138,50',
+    statusWarningRGB: '231, 123, 0',
     statusCritical: '#C10004',
-    statusCriticalRGB: '232,72,85,1',
-    selectedActive: '#90D0FF',
+    statusCriticalRGB: '193, 0, 4',
+    selectedActive: '#63A9D4',
     highlight: '#E3F2FD',
-    border: '#999999',
-    buttonPrimary: '#9DA6EC',
-    buttonSecondary: '#CACFE3',
+    border: '#A9A9A9',
+    buttonPrimary: '#ABB4F5',
+    buttonSecondary: '#B8BCCD',
     buttonDelete: '#FFCDD2',
     infoPrimary: '#5C486D',
-    infoSecondary: '#EBE3F1',
-    backgroundLevel1: '#F9F9FB',
-    backgroundLevel2: '#F3F3F5',
-    backgroundLevel3: '#EAEAEC',
-    backgroundLevel4: '#FAFAF8',
-    textPrimary: '#101010',
-    textSecondary: '#515170',
+    infoSecondary: '#E2D0E2',
+    backgroundLevel1: '#FCFCFC',
+    backgroundLevel2: '#F0F0F4',
+    backgroundLevel3: '#E4E6EC',
+    backgroundLevel4: '#FAFAF6',
+    textPrimary: '#0D0D0D',
+    textSecondary: '#4F506D',
     textTertiary: '#DFDFDF', // TO CHECK
     textReverse: '#EAEAEA',
     textLink: '#1349C5',
@@ -119,7 +119,7 @@ export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
     statusWarning: '#FC8A32',
     statusWarningRGB: '252,138,50',
     statusCritical: '#E84855',
-    statusCriticalRGB: '232,72,85,1',
+    statusCriticalRGB: '232,72,85',
     selectedActive: '#2196F3',
     highlight: '#1A3C75',
     border: '#313131',

package/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>

package/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>
   {

package/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>

package/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 />,
   },
 };
 

package/stories/searchinput.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { SearchInput } from '../src/lib/components/searchinput/SearchInput.component';
 import { Wrapper, Title } from './common';
@@ -84,3 +84,23 @@ export const Default = {
     );
   },
 };
+export const Debounce = {
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Wrapper>
+        <SearchInput
+          placeholder="Search"
+          value={value}
+          disableToggle
+          onReset={action('on input reset')}
+          onChange={(e) => {
+            setValue(e.target.value);
+            action('debounce')(`${e.target} changed`);
+          }}
+          {...args}
+        />
+      </Wrapper>
+    );
+  },
+};

package/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>

package/stories/steppers.stories.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { Steppers } from '../src/lib/components/steppers/Steppers.component';
 import { action } from '@storybook/addon-actions';
 import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
-import { Wrapper } from './common';
 const steps = [
   {
-    title: 'Node Registered',
+    title: 'Step 1',
     content: (
       <Button
         variant="secondary"
@@ -13,10 +12,10 @@ const steps = [
         onClick={action('Button Apply Click')}
       />
     ),
-    'data-cy': 'Node_Registered',
+    'data-cy': 'Step_1',
   },
   {
-    title: 'Deploy Salt Minion on node',
+    title: 'Step 2',
     inProgress: false,
     content: (
       <Button
@@ -25,10 +24,10 @@ const steps = [
         onClick={action('Button Apply Click')}
       />
     ),
-    'data-cy': 'Deploy_Salt',
+    'data-cy': 'Step_2',
   },
   {
-    title: 'Add node to Workload Plane',
+    title: 'Step 3',
     error: false,
     content: (
       <Button
@@ -37,10 +36,10 @@ const steps = [
         onClick={action('Button Apply Click')}
       />
     ),
-    'data-cy': 'Add_Node_WP',
+    'data-cy': 'Step_3',
   },
   {
-    title: 'Add node to Control Plane',
+    title: 'Step 4',
     content: (
       <Button
         label="Apply"
@@ -48,10 +47,10 @@ const steps = [
         onClick={action('Button Apply Click')}
       />
     ),
-    'data-cy': 'Add_Node_CP',
+    'data-cy': 'Step_4',
   },
   {
-    title: 'Extend etcd cluster to node',
+    title: 'Step 5',
     content: (
       <Button
         label="Apply"
@@ -59,12 +58,12 @@ const steps = [
         onClick={action('Button Apply Click')}
       />
     ),
-    'data-cy': 'Extend_Node',
+    'data-cy': 'Step_5',
   },
 ];
 const stepsWithProgress = [...steps];
 stepsWithProgress[1] = {
-  title: 'Deploy Salt Minion on node',
+  title: 'Step 2',
   inProgress: true,
   content: (
     <Button
@@ -73,11 +72,11 @@ stepsWithProgress[1] = {
       onClick={action('Button Apply Click')}
     />
   ),
-  'data-cy': 'Deploy_Salt',
+  'data-cy': 'Step_2',
 };
 const stepsWithError = [...steps];
 stepsWithError[2] = {
-  title: 'Add node to Workload Plane',
+  title: 'Step 3',
   error: true,
   content: (
     <Button
@@ -86,7 +85,7 @@ stepsWithError[2] = {
       onClick={action('Button Apply Click')}
     />
   ),
-  'data-cy': 'Add_Node_WP',
+  'data-cy': 'Step_3',
 };
 export default {
   title: 'Components/Progress & loading/Steppers',