@pega/cosmos-react-build 2.0.0-dev.20.0 → 2.0.0-dev.21.0

package/lib/components/FlowModeller/Connector.js

@@ -1,89 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, defaultThemeProp, Flex, Icon, Label, useConsolidatedRef, useElement, useI18n, useTheme } from '@pega/cosmos-react-core';
-export const StyledWrapper = styled.div(({ withLabel }) => {
-    return css `
-    width: 17.5rem;
-    ${withLabel
-        ? css `
-          height: 6rem;
-        `
-        : css `
-          height: 4.5rem;
-        `}
-    align-self: center;
-  `;
-});
-StyledWrapper.defaultProps = defaultThemeProp;
-export const StyledConnector = styled.div `
-  width: 2rem;
-  align-self: center;
-  height: 100%;
-  svg {
-    width: 100%;
-  }
-`;
-StyledConnector.defaultProps = defaultThemeProp;
-export const StyledButtonWrapper = styled.div `
-  height: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  position: relative;
-`;
-StyledButtonWrapper.defaultProps = defaultThemeProp;
-export const StyledDot = styled.div(({ theme }) => {
-    return css `
-    top: -3rem;
-    position: absolute;
-    color: ${theme.base.colors.slate.medium};
-  `;
-});
-StyledDot.defaultProps = defaultThemeProp;
-export const StyledButton = styled(Button)(({ theme, active }) => {
-    return css `
-    opacity: 0;
-    top: -3.25rem;
-    border: 0;
-    color: ${theme.base.colors.black};
-    background: ${theme.base.colors.white};
-    ${active &&
-        css `
-      box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};
-      opacity: 1;
-    `}
-    &:hover,
-    &:active,
-    &:focus {
-      opacity: 1;
-      background: ${theme.base.colors.white};
-    }
-  `;
-});
-StyledButton.defaultProps = defaultThemeProp;
-export const StyledLabelWrapper = styled.div `
-  position: relative;
-  width: 100%;
-`;
-StyledLabelWrapper.defaultProps = defaultThemeProp;
-export const StyledLabel = styled(Label)(({ theme }) => {
-    return css `
-    padding: calc(0.5 * ${theme.base.spacing});
-    border-radius: 0.25rem;
-    position: absolute;
-    bottom: -2.25rem;
-    background: ${theme.base.colors.slate.medium};
-    color: ${theme.base.colors.white};
-  `;
-});
-StyledLabel.defaultProps = defaultThemeProp;
-const Connector = forwardRef(({ label, onAddClick, active = false }, ref) => {
-    const theme = useTheme();
-    const t = useI18n();
-    const [, setButtonEl] = useElement();
-    const buttonRef = useConsolidatedRef(ref, setButtonEl);
-    return (_jsx(_Fragment, { children: _jsxs(Flex, { as: StyledWrapper, withLabel: !!label, container: { alignItems: 'center', direction: 'column' }, children: [label && (_jsx(Flex, { as: StyledLabelWrapper, container: { justify: 'center' }, children: _jsx(StyledLabel, { children: label }, void 0) }, void 0)), _jsx(Flex, { "aria-disabled": 'true', as: StyledConnector, children: _jsx("svg", { children: _jsx("path", { strokeWidth: '2', stroke: theme.base.colors.slate.light, d: 'M 16 0 v100' }, void 0) }, void 0) }, void 0), _jsxs(Flex, { as: StyledButtonWrapper, children: [_jsx(StyledDot, { children: _jsx(Icon, { name: 'circle-solid' }, void 0) }, void 0), _jsx(StyledButton, { label: t('add_noun', [t('node').toLowerCase()]), active: active, icon: true, onClick: onAddClick, ref: buttonRef, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0)] }, void 0) }, void 0));
-});
-export default Connector;
-//# sourceMappingURL=Connector.js.map

package/lib/components/FlowModeller/Connector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  Label,\n  useConsolidatedRef,\n  useElement,\n  useI18n,\n  useTheme\n} from '@pega/cosmos-react-core';\n\nexport interface ConnectorProps {\n  /** Unique id of connector */\n  id: string;\n  /** Label for connector if there */\n  label?: string;\n  /** Node id which connector should connect to */\n  targetNodeId?: string;\n  /** Callback for adding the nodes */\n  onAddClick?: () => void;\n  /** Ref of the connector */\n  ref?: Ref<HTMLButtonElement>;\n  /** Boolean if the button on the connector is active */\n  active?: boolean;\n}\n\nexport const StyledWrapper = styled.div<{ withLabel: boolean }>(({ withLabel }) => {\n  return css`\n    width: 17.5rem;\n    ${withLabel\n      ? css`\n          height: 6rem;\n        `\n      : css`\n          height: 4.5rem;\n        `}\n    align-self: center;\n  `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledConnector = styled.div`\n  width: 2rem;\n  align-self: center;\n  height: 100%;\n  svg {\n    width: 100%;\n  }\n`;\n\nStyledConnector.defaultProps = defaultThemeProp;\n\nexport const StyledButtonWrapper = styled.div`\n  height: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  position: relative;\n`;\n\nStyledButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDot = styled.div(({ theme }) => {\n  return css`\n    top: -3rem;\n    position: absolute;\n    color: ${theme.base.colors.slate.medium};\n  `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)<{ active: ConnectorProps }>(({ theme, active }) => {\n  return css`\n    opacity: 0;\n    top: -3.25rem;\n    border: 0;\n    color: ${theme.base.colors.black};\n    background: ${theme.base.colors.white};\n    ${active &&\n    css`\n      box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};\n      opacity: 1;\n    `}\n    &:hover,\n    &:active,\n    &:focus {\n      opacity: 1;\n      background: ${theme.base.colors.white};\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledLabelWrapper = styled.div`\n  position: relative;\n  width: 100%;\n`;\n\nStyledLabelWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Label)(({ theme }) => {\n  return css`\n    padding: calc(0.5 * ${theme.base.spacing});\n    border-radius: 0.25rem;\n    position: absolute;\n    bottom: -2.25rem;\n    background: ${theme.base.colors.slate.medium};\n    color: ${theme.base.colors.white};\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nconst Connector: FunctionComponent<ConnectorProps & ForwardProps> = forwardRef(\n  (\n    { label, onAddClick, active = false }: PropsWithoutRef<ConnectorProps>,\n    ref: ConnectorProps['ref']\n  ) => {\n    const theme = useTheme();\n    const t = useI18n();\n    const [, setButtonEl] = useElement<HTMLButtonElement>();\n    const buttonRef = useConsolidatedRef(ref, setButtonEl);\n\n    return (\n      <>\n        <Flex\n          as={StyledWrapper}\n          withLabel={!!label}\n          container={{ alignItems: 'center', direction: 'column' }}\n        >\n          {label && (\n            <Flex as={StyledLabelWrapper} container={{ justify: 'center' }}>\n              <StyledLabel>{label}</StyledLabel>\n            </Flex>\n          )}\n          <Flex aria-disabled='true' as={StyledConnector}>\n            <svg>\n              <path strokeWidth='2' stroke={theme.base.colors.slate.light} d='M 16 0 v100' />\n            </svg>\n          </Flex>\n\n          <Flex as={StyledButtonWrapper}>\n            <StyledDot>\n              <Icon name='circle-solid' />\n            </StyledDot>\n            <StyledButton\n              label={t('add_noun', [t('node').toLowerCase()])}\n              active={active}\n              icon\n              onClick={onAddClick}\n              ref={buttonRef}\n            >\n              <Icon name='plus' />\n            </StyledButton>\n          </Flex>\n        </Flex>\n      </>\n    );\n  }\n);\n\nexport default Connector;\n"]}