@via-profit/ui-kit 0.1.6 → 0.1.7

package/Surface/SurfaceContainer.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
 const StyledSurfaceContainer = styled_1.default.div `
   display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
   box-sizing: border-box;
@@ -25,9 +26,14 @@ const StyledSurfaceContainer = styled_1.default.div `
   box-shadow: ${({ theme }) => `0 0.5em 2em -0.8em ${theme.color.surface.darken(100).alpha(0.4).toString()}`};
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
   font-size: 1em;
+
+  ${({ $rounded }) => $rounded &&
+    (0, react_2.css) `
+      border-radius: 100%;
+    `}
 `;
 const SurfaceContainer = (props, ref) => {
-    const { inline, children } = props, nativeProps = __rest(props, ["inline", "children"]);
-    return (react_1.default.createElement(StyledSurfaceContainer, Object.assign({ "$inline": inline }, nativeProps, { ref: ref }), children));
+    const { inline, children, rounded, noPadding } = props, nativeProps = __rest(props, ["inline", "children", "rounded", "noPadding"]);
+    return (react_1.default.createElement(StyledSurfaceContainer, Object.assign({ "$inline": inline, "$rounded": rounded, "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(SurfaceContainer);

package/Surface/SurfaceContent.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 export type SurfaceContentProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly noPadding?: boolean | undefined;
+    readonly rounded?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceContent.js

@@ -22,11 +22,20 @@ const StyledContent = styled_1.default.div `
   overflow: auto;
   ${({ $noPadding }) => (typeof $noPadding === 'undefined' || $noPadding === false) &&
     (0, react_2.css) `
+      overflow: visible;
       padding: 1.4rem 1rem 1rem 1rem;
     `}
+
+  ${({ $rounded, $noPadding }) => $rounded &&
+    (0, react_2.css) `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: ${$noPadding ? '0' : '1rem'};
+    `}
 `;
 const SurfaceContent = (props, ref) => {
-    const { children, noPadding } = props, nativeProps = __rest(props, ["children", "noPadding"]);
-    return (react_1.default.createElement(StyledContent, Object.assign({ "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
+    const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);
+    return (react_1.default.createElement(StyledContent, Object.assign({ "$noPadding": noPadding, "$rounded": rounded }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(SurfaceContent);

package/Surface/SurfaceFooter.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 export type SurfaceFooterProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly noPadding?: boolean | undefined;
+    readonly rounded?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceFooter.js

@@ -20,12 +20,12 @@ const StyledFooter = styled_1.default.div `
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  padding: 1rem;
+  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem')};
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 `;
 const SurfaceFooter = (props, ref) => {
-    const { children } = props, nativeProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(StyledFooter, Object.assign({}, nativeProps, { ref: ref }), children));
+    const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);
+    return (react_1.default.createElement(StyledFooter, Object.assign({ "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(SurfaceFooter);

package/Surface/SurfaceHeader.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 export type SurfaceHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly noPadding?: boolean | undefined;
+    readonly rounded?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceHeader.js

@@ -24,7 +24,7 @@ const StyledHeader = styled_1.default.div `
   border-top-right-radius: inherit;
 `;
 const SurfaceHeader = (props, ref) => {
-    const { children, noPadding } = props, nativeProps = __rest(props, ["children", "noPadding"]);
+    const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);
     return (react_1.default.createElement(StyledHeader, Object.assign({ "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(SurfaceHeader);

package/Surface/SurfaceSubheader.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 export type SurfaceSubheaderProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly noPadding?: boolean | undefined;
+    readonly rounded?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceSubheader.js

@@ -23,7 +23,7 @@ const StyledHeader = styled_1.default.div `
   color: ${({ theme }) => theme.color.textSecondary.toString()};
 `;
 const SurfaceSubheader = (props, ref) => {
-    const { children, noPadding } = props, nativeProps = __rest(props, ["children", "noPadding"]);
+    const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);
     return (react_1.default.createElement(StyledHeader, Object.assign({ "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(SurfaceSubheader);

package/Surface/index.js

@@ -44,7 +44,7 @@ const SurfaceSubheader_1 = __importDefault(require("./SurfaceSubheader"));
 const SurfaceContent_1 = __importDefault(require("./SurfaceContent"));
 const SurfaceFooter_1 = __importDefault(require("./SurfaceFooter"));
 const Surface = (props, ref) => {
-    const { children, header, subheader, footer, inline, noPadding, overrides } = props, nativeProps = __rest(props, ["children", "header", "subheader", "footer", "inline", "noPadding", "overrides"]);
+    const { children, header, subheader, footer, inline, noPadding, rounded, overrides } = props, nativeProps = __rest(props, ["children", "header", "subheader", "footer", "inline", "noPadding", "rounded", "overrides"]);
     const hasFooter = typeof footer !== 'undefined' && footer !== null;
     const hasHeader = typeof header !== 'undefined' && header !== null;
     const hasSubheader = typeof subheader !== 'undefined' && subheader !== null;
@@ -58,10 +58,10 @@ const Surface = (props, ref) => {
     if (!hasHeader && hasSubheader) {
         console.warn(`[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header`);
     }
-    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { inline: inline, noPadding: noPadding, ref: ref }),
-        hasHeader && React.createElement(overridesMap.Header, { noPadding: noPadding }, header),
-        hasSubheader && (React.createElement(overridesMap.Subheader, { noPadding: noPadding }, subheader)),
-        React.createElement(overridesMap.Content, { noPadding: noPadding }, children),
-        hasFooter && React.createElement(overridesMap.Footer, { noPadding: noPadding }, footer)));
+    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { inline: inline, noPadding: noPadding, rounded: rounded, ref: ref }),
+        hasHeader && (React.createElement(overridesMap.Header, { noPadding: noPadding, rounded: rounded }, header)),
+        hasSubheader && (React.createElement(overridesMap.Subheader, { noPadding: noPadding, rounded: rounded }, subheader)),
+        React.createElement(overridesMap.Content, { noPadding: noPadding, rounded: rounded }, children),
+        hasFooter && (React.createElement(overridesMap.Footer, { noPadding: noPadding, rounded: rounded }, footer))));
 };
 exports.default = React.forwardRef(Surface);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "UI Kit",
   "repository": {
     "type": "git",