@sphereon/ui-components.ssi-react 0.4.1-next.183 → 0.4.1-next.186

package/dist/components/fields/SSICheckbox/index.d.ts

@@ -1,13 +1,17 @@
 import { CSSProperties, FC, ReactNode } from 'react';
+import { GradientProperties } from '@sphereon/ui-components.core';
+import { Position } from '../../../types';
 export interface IProps {
     onValueChange?: (isChecked: boolean) => Promise<void>;
     initialValue?: boolean;
     isChecked?: boolean;
     label?: string | ReactNode;
+    labelPosition?: Position;
     disabled?: boolean;
     backgroundColor?: string;
     borderColor?: string;
     selectedColor?: string;
+    gradient?: GradientProperties;
     labelColor?: string;
     checkmarkColor?: string;
     style?: CSSProperties;

package/dist/components/fields/SSICheckbox/index.js

@@ -1,9 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { OpacityStyleEnum, fontColors, selectionElementColors } from '@sphereon/ui-components.core';
+import { OpacityStyleEnum, elementColors, fontColors, gradientsColors } from '@sphereon/ui-components.core';
 import { SSICheckboxContainerStyled as Container, SSICheckboxLabelContainerStyled as LabelCaption, SSICheckboxSelectedContainerStyled as SelectedContainer, SSICheckboxUnselectedContainerStyled as UnselectedContainer, } from '../../../styles/components';
+const flexDirectionMap = {
+    right: 'row',
+    left: 'row-reverse',
+    top: 'column-reverse',
+    bottom: 'column',
+};
 const SSICheckbox = (props) => {
-    const { backgroundColor, borderColor = selectionElementColors.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElementColors.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark, style, } = props;
+    const { backgroundColor, borderColor = elementColors.lightGrey, disabled = false, initialValue = false, label, labelPosition = 'right', selectedColor, gradient = gradientsColors[100], labelColor = fontColors.dark, checkmarkColor = '#FFFFFF', style, } = props;
     const [isChecked, setChecked] = React.useState(initialValue);
     const value = props.isChecked !== undefined ? props.isChecked : isChecked;
     const onValueChange = async () => {
@@ -16,6 +22,18 @@ const SSICheckbox = (props) => {
         }
         setChecked(!isChecked);
     };
-    return (_jsxs(Container, { onClick: onValueChange, style: { ...style, ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: [value ? (_jsx(SelectedContainer, { style: { backgroundColor: selectedColor, border: `1px solid ${borderColor}` } })) : (_jsx(UnselectedContainer, { style: { backgroundColor, border: `1px solid ${borderColor}` } })), label && (typeof label === 'string' ? _jsx(LabelCaption, { style: { color: labelColor }, children: label }) : label)] }));
+    const selectedBackground = gradient
+        ? `linear-gradient(172deg, ${gradient.primaryColor} 0%, ${gradient.secondaryColor} 100%)`
+        : selectedColor;
+    return (_jsxs(Container, { onClick: onValueChange, style: {
+            ...style,
+            flexDirection: flexDirectionMap[labelPosition],
+            ...(disabled && { opacity: OpacityStyleEnum.DISABLED, cursor: 'not-allowed' }),
+        }, role: "checkbox", "aria-checked": value, tabIndex: 0, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onValueChange();
+            }
+        }, children: [value ? (_jsx(SelectedContainer, { style: { background: selectedBackground, border: 'none' }, children: _jsx("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 5L4.5 8.5L11 1.5", stroke: checkmarkColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : (_jsx(UnselectedContainer, { style: { backgroundColor, border: `2px solid ${borderColor}` } })), label && (typeof label === 'string' ? _jsx(LabelCaption, { style: { color: labelColor }, children: label }) : label)] }));
 };
 export default SSICheckbox;

package/dist/components/views/SSITabView/SSITabViewHeader/index.js

@@ -1,12 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITabViewHeaderTitleCaptionStyled as TitleCaption, } from '../../../../styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTabBarStyled as TabBar, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITabViewHeaderTitleCaptionStyled as TitleCaption, SSITabViewHeaderActiveIndicatorStyled as ActiveIndicator, SSITabViewHeaderDividerStyled as Divider, } from '../../../../styles';
 const SSITabViewHeader = (props) => {
     const { navigationState, onRouteChange } = props;
-    return (_jsx(Container, { children: navigationState.routes.map((value) => {
-            const isActiveRoute = value.key === navigationState.activeRoute;
-            return (_jsx(TitleContainer, { onClick: () => onRouteChange(value.key), style: {
-                    ...(isActiveRoute && { borderBottom: `2px solid #7276F7`, alignSelf: 'stretch' }),
-                }, children: _jsx(TitleCaption, { style: { fontWeight: !isActiveRoute ? '400' : '600' }, children: value.title }) }, value.key));
-        }) }));
+    return (_jsxs(Container, { role: "tablist", children: [_jsx(TabBar, { children: navigationState.routes.map((value) => {
+                    const isActiveRoute = value.key === navigationState.activeRoute;
+                    return (_jsxs(TitleContainer, { onClick: () => onRouteChange(value.key), role: "tab", "aria-selected": isActiveRoute, children: [_jsx(TitleCaption, { style: { fontWeight: isActiveRoute ? 600 : 400 }, children: value.title }), isActiveRoute && _jsx(ActiveIndicator, {})] }, value.key));
+                }) }), _jsx(Divider, {})] }));
 };
 export default SSITabViewHeader;

package/dist/components/views/SSITabView/index.d.ts

@@ -1,7 +1,11 @@
-import { FC } from 'react';
-import { TabViewRoute } from '@sphereon/ui-components.core';
+import { FC, ReactNode } from 'react';
+type SSITabViewRoute = {
+    key: string;
+    title: string;
+    content: ReactNode;
+};
 type Props = {
-    routes: Array<TabViewRoute>;
+    routes: Array<SSITabViewRoute>;
     activeRoute?: string;
     onRouteChange?: (key: string) => Promise<void>;
 };

package/dist/components/views/SSITabView/index.js

@@ -1,28 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useState } from 'react';
+import { useState } from 'react';
 import SSITabViewHeader from './SSITabViewHeader';
 import { SSITabViewContainerStyled as Container } from '../../../styles';
-const Tab = (props) => {
-    return _jsx(Fragment, { children: props.children });
-};
 const SSITabView = (props) => {
     const { routes = [] } = props;
-    const [activeRoute, setActiveRoute] = useState(props.activeRoute ?? (routes.length > 0 ? routes[0].key : ""));
-    const [content, setContent] = useState();
-    useEffect(() => {
-        routes.forEach((route) => {
-            if (route.key === activeRoute) {
-                setContent(route.content);
-            }
-        });
-    }, [routes, activeRoute]);
+    const [activeRoute, setActiveRoute] = useState(props.activeRoute ?? (routes.length > 0 ? routes[0].key : ''));
+    const activeContent = routes.find((route) => route.key === activeRoute)?.content;
     const onRouteChange = async (key) => {
         setActiveRoute(key);
         props.onRouteChange?.(key);
     };
-    return (_jsxs(Container, { children: [_jsx(SSITabViewHeader, { navigationState: {
-                    routes,
-                    activeRoute,
-                }, onRouteChange: onRouteChange }), _jsx(Tab, { children: content })] }));
+    return (_jsxs(Container, { children: [_jsx(SSITabViewHeader, { navigationState: { routes, activeRoute }, onRouteChange: onRouteChange }), _jsx("div", { role: "tabpanel", children: activeContent })] }));
 };
 export default SSITabView;

package/dist/styles/components/components/SSICheckbox/index.js

@@ -3,23 +3,26 @@ import { SSITextH2Styled } from '../../../fonts';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
 export const SSICheckboxContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   cursor: pointer;
 `;
 export const SSICheckboxUnselectedContainerStyled = styled.div `
   width: 18px;
-  aspect-ratio: 1;
-  border-radius: 4px;
-  border-width: 1px;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 2px;
 `;
 export const SSICheckboxSelectedContainerStyled = styled.div `
   width: 18px;
-  aspect-ratio: 1;
-  border-radius: 4px;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 2px;
+  display: flex;
   align-items: center;
   justify-content: center;
 `;
 export const SSICheckboxLabelContainerStyled = styled(SSITextH2Styled) `
   display: flex;
   flex-wrap: wrap;
+  font-size: 14px;
 `;

package/dist/styles/components/components/SSITabView/index.js

@@ -3,4 +3,5 @@ export const SSITabViewContainerStyled = styled.div `
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  width: 100%;
 `;

package/dist/styles/components/components/SSITabViewHeader/index.d.ts

@@ -1,5 +1,7 @@
 import type { IStyledComponent } from 'styled-components';
-import { SSITextH3Styled } from '../../../fonts';
 export declare const SSITabViewHeaderContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SSITabViewHeaderTabBarStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const SSITabViewHeaderTitleContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const SSITabViewHeaderTitleCaptionStyled: typeof SSITextH3Styled;
+export declare const SSITabViewHeaderTitleCaptionStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SSITabViewHeaderActiveIndicatorStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SSITabViewHeaderDividerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

package/dist/styles/components/components/SSITabViewHeader/index.js

@@ -1,15 +1,40 @@
 import styled from 'styled-components';
-import { SSITextH3Styled } from '../../../fonts';
+import { elementColors, fontColors } from '@sphereon/ui-components.core';
+import { SSITextH3Css } from '../../../css';
 export const SSITabViewHeaderContainerStyled = styled.div `
   display: flex;
-  flex-direction: row;
-  gap: 84px;
-  margin-left: 66px;
+  flex-direction: column;
+  width: 100%;
+`;
+export const SSITabViewHeaderTabBarStyled = styled.div `
+  display: flex;
+  height: 48px;
 `;
 export const SSITabViewHeaderTitleContainerStyled = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  height: 48px;
   cursor: pointer;
+`;
+export const SSITabViewHeaderTitleCaptionStyled = styled.div `
+  ${SSITextH3Css};
   display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+  height: 100%;
+  color: ${fontColors.dark};
+`;
+export const SSITabViewHeaderActiveIndicatorStyled = styled.div `
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(172deg, #7276f7 0%, #7c40e8 100%);
 `;
-export const SSITabViewHeaderTitleCaptionStyled = styled(SSITextH3Styled) `
-  margin-top: auto;
+export const SSITabViewHeaderDividerStyled = styled.div `
+  width: 100%;
+  height: 1px;
+  background-color: ${elementColors.lightGrey};
 `;

package/dist/types/index.d.ts

@@ -6,3 +6,4 @@ export * from './field';
 export * from './view';
 export * from './icon';
 export * from './jsonForms';
+export * from './position';

package/dist/types/index.js

@@ -6,3 +6,4 @@ export * from './field';
 export * from './view';
 export * from './icon';
 export * from './jsonForms';
+export * from './position';

package/dist/types/position/index.d.ts

@@ -1 +1,2 @@
 export type Direction = 'down' | 'up';
+export type Position = 'left' | 'right' | 'top' | 'bottom';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.4.1-next.183+a3ea620",
+  "version": "0.4.1-next.186+8f34f58",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -50,7 +50,7 @@
     "@mui/x-date-pickers": "^8.18.0",
     "@sphereon/ssi-sdk.data-store-types": "0.37.0",
     "@sphereon/ssi-types": "0.37.0",
-    "@sphereon/ui-components.core": "0.4.1-next.183+a3ea620",
+    "@sphereon/ui-components.core": "0.4.1-next.186+8f34f58",
     "@tanstack/react-table": "^8.9.3",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
@@ -72,5 +72,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "a3ea620f95d823f6a2447e49d0eab3fca7ec32a0"
+  "gitHead": "8f34f589c1358a54d7e34624611aa6352982d84c"
 }