@pega/cosmos-react-wss 3.0.0-dev.18.1 → 3.0.0-dev.20.0

package/lib/components/QuickCreate/QuickCreate.d.ts

@@ -0,0 +1,17 @@
+import { Ref, FunctionComponent, MouseEventHandler } from 'react';
+import { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export interface QuickCreateAction {
+    label: string;
+    icon?: string;
+    onClick: MouseEventHandler;
+}
+export interface QuickCreateProps extends BaseProps, NoChildrenProp {
+    heading: string;
+    actions: QuickCreateAction[];
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const StyledQuickCreate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledQuickCreateButton: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const QuickCreate: FunctionComponent<QuickCreateProps & ForwardProps>;
+export default QuickCreate;
+//# sourceMappingURL=QuickCreate.d.ts.map

package/lib/components/QuickCreate/QuickCreate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickCreate.d.ts","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,GAAG,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG9E,OAAO,EACL,SAAS,EAIT,YAAY,EAGZ,cAAc,EAIf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,yGAI7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mLAelC,CAAC;AAYH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAkCnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/QuickCreate/QuickCreate.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, defaultThemeProp, Flex, Grid, Icon, StyledIcon, Text, useTheme } from '@pega/cosmos-react-core';
+export const StyledQuickCreate = styled.div `
+  & > ul {
+    list-style: none;
+  }
+`;
+export const StyledQuickCreateButton = styled(Button)(({ theme }) => {
+    return css `
+    width: 100%;
+    height: 6rem;
+    padding: calc(${theme.base.spacing} * 2);
+    border-radius: calc(${`${theme.base['border-radius']} * ${theme.base['border-radius']}`});
+    justify-content: start;
+    text-align: start;
+
+    & ${StyledIcon} {
+      width: 1em;
+      height: 1em;
+      flex-shrink: 0;
+    }
+  `;
+});
+StyledQuickCreateButton.defaultProps = defaultThemeProp;
+const StyledButtonText = styled.span `
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  line-height: 1.5;
+`;
+const QuickCreate = forwardRef(({ heading, actions, ...restProps }, ref) => {
+    const theme = useTheme();
+    return (_jsxs(Flex, { ...restProps, container: { direction: 'column', gap: 2 }, as: StyledQuickCreate, ref: ref, children: [_jsx(Text, { variant: 'h2', children: heading }), _jsx(Grid, { as: 'ul', container: {
+                    gap: 1,
+                    cols: `repeat(auto-fill, minmax(min(${theme.base['content-width'].sm}, 100%), 1fr))`
+                }, children: actions.map(({ label, icon, onClick }) => {
+                    return (_jsx("li", { children: _jsx(StyledQuickCreateButton, { onClick: onClick, variant: 'primary', children: _jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, as: 'span', children: [icon && _jsx(Icon, { name: icon }), _jsx(StyledButtonText, { children: label })] }) }) }, label));
+                }) })] }));
+});
+export default QuickCreate;
+//# sourceMappingURL=QuickCreate.js.map

package/lib/components/QuickCreate/QuickCreate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickCreate.js","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA6C,MAAM,OAAO,CAAC;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,MAAM,EACN,gBAAgB,EAChB,IAAI,EAEJ,IAAI,EACJ,IAAI,EAEJ,UAAU,EACV,IAAI,EACJ,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAcjC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI1C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,OAAO,GAAG,CAAA;;;oBAGQ,KAAK,CAAC,IAAI,CAAC,OAAO;0BACZ,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE;;;;QAInF,UAAU;;;;;GAKf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;CAMnC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,EAAoB,EAAE,GAA4B,EAAE,EAAE;IACrF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,iBAAiB,EACrB,GAAG,EAAE,GAAG,aAER,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,EACnC,KAAC,IAAI,IACH,EAAE,EAAC,IAAI,EACP,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,IAAI,EAAE,gCAAgC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,gBAAgB;iBACrF,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;oBACxC,OAAO,CACL,uBACE,KAAC,uBAAuB,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,YAC1D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAC,MAAM,aACzD,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EAC7B,KAAC,gBAAgB,cAAE,KAAK,GAAoB,IACvC,GACiB,IANnB,KAAK,CAOT,CACN,CAAC;gBACJ,CAAC,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, Ref, FunctionComponent, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  Button,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  NoChildrenProp,\n  StyledIcon,\n  Text,\n  useTheme\n} from '@pega/cosmos-react-core';\n\nexport interface QuickCreateAction {\n  label: string;\n  icon?: string;\n  onClick: MouseEventHandler;\n}\n\nexport interface QuickCreateProps extends BaseProps, NoChildrenProp {\n  heading: string;\n  actions: QuickCreateAction[];\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledQuickCreate = styled.div`\n  & > ul {\n    list-style: none;\n  }\n`;\n\nexport const StyledQuickCreateButton = styled(Button)(({ theme }) => {\n  return css`\n    width: 100%;\n    height: 6rem;\n    padding: calc(${theme.base.spacing} * 2);\n    border-radius: calc(${`${theme.base['border-radius']} * ${theme.base['border-radius']}`});\n    justify-content: start;\n    text-align: start;\n\n    & ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledQuickCreateButton.defaultProps = defaultThemeProp;\n\nconst StyledButtonText = styled.span`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  line-height: 1.5;\n`;\n\nconst QuickCreate: FunctionComponent<QuickCreateProps & ForwardProps> = forwardRef(\n  ({ heading, actions, ...restProps }: QuickCreateProps, ref: QuickCreateProps['ref']) => {\n    const theme = useTheme();\n    return (\n      <Flex\n        {...restProps}\n        container={{ direction: 'column', gap: 2 }}\n        as={StyledQuickCreate}\n        ref={ref}\n      >\n        <Text variant='h2'>{heading}</Text>\n        <Grid\n          as='ul'\n          container={{\n            gap: 1,\n            cols: `repeat(auto-fill, minmax(min(${theme.base['content-width'].sm}, 100%), 1fr))`\n          }}\n        >\n          {actions.map(({ label, icon, onClick }) => {\n            return (\n              <li key={label}>\n                <StyledQuickCreateButton onClick={onClick} variant='primary'>\n                  <Flex container={{ gap: 2, alignItems: 'center' }} as='span'>\n                    {icon && <Icon name={icon} />}\n                    <StyledButtonText>{label}</StyledButtonText>\n                  </Flex>\n                </StyledQuickCreateButton>\n              </li>\n            );\n          })}\n        </Grid>\n      </Flex>\n    );\n  }\n);\n\nexport default QuickCreate;\n"]}

package/lib/components/QuickCreate/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './QuickCreate';
+export { QuickCreateProps } from './QuickCreate';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/QuickCreate/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QuickCreate/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/QuickCreate/index.js

@@ -0,0 +1,2 @@
+export { default } from './QuickCreate';
+//# sourceMappingURL=index.js.map

package/lib/components/QuickCreate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/QuickCreate/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './QuickCreate';\nexport { QuickCreateProps } from './QuickCreate';\n"]}

package/lib/index.d.ts

@@ -1,3 +1,5 @@
 export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
+export { default as QuickCreate } from './components/QuickCreate';
+export * from './components/QuickCreate';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}

package/lib/index.js

@@ -1,4 +1,6 @@
 // This file is autogenerated. Any changes will be overwritten.
 export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
+export { default as QuickCreate } from './components/QuickCreate';
+export * from './components/QuickCreate';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as QuickCreate } from './components/QuickCreate';\nexport * from './components/QuickCreate';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-wss",
-  "version": "3.0.0-dev.18.1",
+  "version": "3.0.0-dev.20.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,7 +20,7 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.18.1",
+    "@pega/cosmos-react-core": "3.0.0-dev.20.0",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",
@@ -34,7 +34,8 @@
     "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@storybook/theming": "^6.4.19",
+    "@testing-library/react": "^12.1.3",
     "enzyme": "^3.11.0",
-    "typescript": "~4.6.2"
+    "typescript": "~4.7.2"
   }
 }