superdesk-ui-framework 4.0.37 → 4.0.39

package/app-typescript/components/Card.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+interface IProps extends Pick<React.CSSProperties, 'paddingBlock'> {
+    children: React.ReactNode;
+    paddingBase: '0' | '1' | '2' | '3' | '4';
+    paddingBlock?: React.CSSProperties['paddingBlock'];
+    paddingBlockStart?: React.CSSProperties['paddingBlockStart'];
+    paddingBlockEnd?: React.CSSProperties['paddingBlockEnd'];
+    paddingInline?: React.CSSProperties['paddingInline'];
+    paddingInlineStart?: React.CSSProperties['paddingInlineStart'];
+    paddingInlineEnd?: React.CSSProperties['paddingInlineEnd'];
+}
+
+export class Card extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <div
+                style={{
+                    width: '100%',
+                    background: 'var(--sd-item__main-Bg)',
+                    borderRadius: 'var(--b-radius--medium)',
+                    padding: `calc( ${this.props.paddingBase} * var(--base-increment))`,
+                    boxShadow: 'var(--sd-shadow--z2)',
+                    paddingBlock: this.props.paddingBlock,
+                    paddingBlockStart: this.props.paddingBlockStart,
+                    paddingBlockEnd: this.props.paddingBlockEnd,
+                    paddingInline: this.props.paddingInline,
+                    paddingInlineStart: this.props.paddingInlineStart,
+                    paddingInlineEnd: this.props.paddingInlineEnd,
+                }}
+            >
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/app-typescript/index.ts

@@ -9,6 +9,7 @@ export { SelectWithTemplate } from './components/SelectWithTemplate';
 export { WithPagination } from './components/WithPagination';
 export { Popover } from './components/Popover';
 export { Label } from './components/Label';
+export { Card } from './components/Card';
 export { Badge } from './components/Badge';
 export { Alert } from './components/Alert';
 export { AvatarWrapper } from './components/avatar/avatar-wrapper';

package/dist/components/Card.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import {Card} from '../../../app-typescript/components/Card';
+
+export default class CardDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Card</h2>
+
+                <Markup.ReactMarkupCodePreview>{`
+                    <Card paddingBase="1">
+                        card content
+                    </Card>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <Card paddingBase="1">
+                    card content
+                </Card>
+            </section>
+        )
+    }
+}

package/dist/components/Index.tsx

@@ -86,6 +86,7 @@ import { OpacityUtilitiesDoc } from './utilities/OpacityUtilities';
 import { ObjectFitUtilitiesDoc } from './utilities/ObjectFitUtilities';
 import { ObjectPositionUtilitiesDoc } from './utilities/ObjectPositionUtilities';
 import LoaderDoc from './Loader';
+import CardDoc from './Card';
 
 
 interface IPages {
@@ -104,6 +105,10 @@ const pages: IPages = {
     basicComponents: {
         name: 'Basic Components',
         items: {
+            'card': {
+                name: 'Card',
+                component: CardDoc,
+            },
             'buttons': {
                 name: 'Buttons',
                 component: ButtonsDoc,