@sphereon/ui-components.ssi-react 0.1.2-next.13 → 0.1.2-next.19

package/dist/components/assets/icons/SSIAddIcon/index.d.ts

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
 export interface IProps {
     size?: number;
     color?: string;
+    style?: CSSProperties;
 }
 declare const SSIAddIcon: FC<IProps>;
 export default SSIAddIcon;

package/dist/components/assets/icons/SSIAddIcon/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const SSIAddIcon = (props) => {
-    const { size = 16, color = fontColors.dark } = props;
-    return (_jsx("div", { style: { width: size, aspectRatio: 1, display: 'flex' }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 0.5C7.65483 0.5 7.375 0.779833 7.375 1.125V7.37503H1.125C0.779812 7.37503 0.5 7.65484 0.5 8.00003C0.5 8.34519 0.779812 8.62502 1.125 8.62502H7.375V14.875C7.375 15.2202 7.65483 15.5 8 15.5C8.34519 15.5 8.625 15.2202 8.625 14.875V8.62502H14.875C15.2202 8.62502 15.5 8.34519 15.5 8.00003C15.5 7.65484 15.2202 7.37503 14.875 7.37503H8.625V1.125C8.625 0.779833 8.34519 0.5 8 0.5Z", fill: color }) }) }));
+    const { size = 16, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width: size, aspectRatio: 1, display: 'flex' }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 0.5C7.65483 0.5 7.375 0.779833 7.375 1.125V7.37503H1.125C0.779812 7.37503 0.5 7.65484 0.5 8.00003C0.5 8.34519 0.779812 8.62502 1.125 8.62502H7.375V14.875C7.375 15.2202 7.65483 15.5 8 15.5C8.34519 15.5 8.625 15.2202 8.625 14.875V8.62502H14.875C15.2202 8.62502 15.5 8.34519 15.5 8.00003C15.5 7.65484 15.2202 7.37503 14.875 7.37503H8.625V1.125C8.625 0.779833 8.34519 0.5 8 0.5Z", fill: color }) }) }));
 };
 export default SSIAddIcon;

package/dist/components/buttons/SSIPrimaryButton/index.d.ts

@@ -1,10 +1,11 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
 import { ButtonIconsEnum } from '../../../types';
 export type Props = {
     caption: string;
     onClick: () => Promise<void>;
     icon?: ButtonIconsEnum;
     disabled?: boolean;
+    style?: CSSProperties;
 };
 declare const SSIPrimaryButton: FC<Props>;
 export default SSIPrimaryButton;

package/dist/components/buttons/SSIPrimaryButton/index.js

@@ -4,15 +4,20 @@ import SSIAddIcon from '../../assets/icons/SSIAddIcon';
 import { SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles/components';
 import { ButtonIconsEnum } from '../../../types';
 const SSIPrimaryButton = (props) => {
-    const { caption, icon, onClick } = props;
-    return (_jsxs(Container, { onClick: onClick, children: [icon && getIcon(icon, fontColors.light), _jsx(Caption, { children: caption })] }));
-};
-const getIcon = (icon, color) => {
-    switch (icon) {
-        case ButtonIconsEnum.ADD:
-            return _jsx(SSIAddIcon, { color: color });
-        default:
-            return _jsx("div", {});
-    }
+    const { caption, icon, onClick, disabled = false, style = {} } = props;
+    const getIcon = (icon, color) => {
+        switch (icon) {
+            case ButtonIconsEnum.ADD:
+                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
+            default:
+                return _jsx("div", {});
+        }
+    };
+    const onClicked = async () => {
+        if (!disabled) {
+            await onClick();
+        }
+    };
+    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: 0.5 }) }, onClick: onClicked, children: [icon && getIcon(icon, fontColors.light), _jsx(Caption, { style: { ...(disabled && { opacity: 0.5 }) }, children: caption })] }));
 };
 export default SSIPrimaryButton;

package/dist/components/buttons/SSISecondaryButton/index.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, FC } from 'react';
+import { ButtonIconsEnum } from '../../../types';
+export type Props = {
+    caption: string;
+    onClick: () => Promise<void>;
+    icon?: ButtonIconsEnum;
+    disabled?: boolean;
+    style?: CSSProperties;
+};
+declare const SSISecondaryButton: FC<Props>;
+export default SSISecondaryButton;

package/dist/components/buttons/SSISecondaryButton/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { gradientColors } from '@sphereon/ui-components.core';
+import SSIAddIcon from '../../assets/icons/SSIAddIcon';
+import { SSISecondaryButtonCaptionStyled as Caption, SSISecondaryButtonContainerStyled as Container, } from '../../../styles/components';
+import { ButtonIconsEnum } from '../../../types';
+const SSISecondaryButton = (props) => {
+    const { caption, icon, onClick, disabled = false, style = {} } = props;
+    const getIcon = (icon, color) => {
+        switch (icon) {
+            case ButtonIconsEnum.ADD:
+                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
+            default:
+                return _jsx("div", {});
+        }
+    };
+    const onClicked = async () => {
+        if (!disabled) {
+            await onClick();
+        }
+    };
+    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: 0.5 }) }, onClick: onClicked, children: [icon && getIcon(icon, gradientColors['100']), _jsx(Caption, { style: { ...(disabled && { opacity: 0.5 }) }, children: caption })] }));
+};
+export default SSISecondaryButton;

package/dist/index.d.ts

@@ -16,6 +16,7 @@ import SSITableViewHeader from './components/views/SSITableView/SSITableViewHead
 import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
+import SSISecondaryButton from './components/buttons/SSISecondaryButton';
 export * from './types';
 export * from './styles/components/fonts';
-export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };

package/dist/index.js

@@ -16,6 +16,7 @@ import SSITableViewHeader from './components/views/SSITableView/SSITableViewHead
 import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
+import SSISecondaryButton from './components/buttons/SSISecondaryButton';
 export * from './types';
 export * from './styles/components/fonts';
-export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };

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

@@ -8,6 +8,6 @@ export const SSIPrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled)
   justify-content: center;
   align-items: center;
   gap: 8px;
-  padding: 6px 8px 6px 8px;
+  padding: 9px 6px 9px 6px;
   cursor: pointer;
 `;

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

@@ -0,0 +1,2 @@
+export declare const SSISecondaryButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSISecondaryButtonCaptionStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { SSIRoundedContainerStyled } from '../../containers';
+import { gradientColors } from '@sphereon/ui-components.core';
+import { SSITextH3Styled } from "../../fonts";
+export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 6px 9px 6px;
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    background: linear-gradient(135deg, #7276F7, #7C40E8) border-box;
+    -webkit-mask:
+            linear-gradient(#fff 0 0) padding-box,
+            linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+  }
+`;
+export const SSISecondaryButtonCaptionStyled = styled(SSITextH3Styled) `
+  background: ${gradientColors['100']};
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;

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

@@ -33,4 +33,5 @@ export const SSITableViewHeaderCellContainerStyled = styled.th `
   padding: 20px 16px 20px 16px;
   background-color: ${backgroundColors.primaryLight};
   color: ${fontColors.lightGrey};
+  text-align: left;
 `;

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

@@ -1,6 +1,7 @@
 export * from './SSICardView';
 export * from './SSIStatusLabel';
 export * from './SSIPrimaryButton';
+export * from './SSISecondaryButton';
 export * from './SSIIconButton';
 export * from './SSIDropDownList';
 export * from './SSITypeLabel';

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

@@ -1,6 +1,7 @@
 export * from './SSICardView';
 export * from './SSIStatusLabel';
 export * from './SSIPrimaryButton';
+export * from './SSISecondaryButton';
 export * from './SSIIconButton';
 export * from './SSIDropDownList';
 export * from './SSITypeLabel';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.2-next.13+9f87811",
+  "version": "0.1.2-next.19+2750740",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -28,7 +28,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sphereon/ui-components.core": "0.1.2-next.13+9f87811",
+    "@sphereon/ui-components.core": "0.1.2-next.19+2750740",
     "@tanstack/react-table": "^8.9.3",
     "styled-components": "^5.3.3"
   },
@@ -40,5 +40,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "9f87811aeb9436f1a8ddbb7757aba7eebb1ef855"
+  "gitHead": "27507401b4e734f562cb818d02d2004aea082007"
 }