@homefile/components-v2 2.14.31 → 2.14.32

package/dist/components/forms/dynamicForm/fields/TileBodyFields.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { fieldIcons } from '../../../../helpers';
-import { VerticalIcon, TileBodySectionGrid } from '../../..';
+import { VerticalIcon, TileBodySectionGrid, TileBodyDescription, TileBodyPartnerImage } from '../../..';
 export const TileBodyFields = ({ fields }) => {
     return (_jsx(_Fragment, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ children, id, name, type, value, icon }) => {
             const baseProps = {
@@ -13,6 +13,10 @@ export const TileBodyFields = ({ fields }) => {
             switch (type) {
                 case 'tile-body-section-grid':
                     return _jsx(TileBodySectionGrid, { fields: children }, id);
+                case 'tile-body-description':
+                    return _jsx(TileBodyDescription, { description: String(baseProps.value) });
+                case 'tile-body-partner-image':
+                    return _jsx(TileBodyPartnerImage, { imageUrl: String(baseProps.value), partnerName: name });
                 case 'vertical-icon':
                     return (_jsx(VerticalIcon, { icon: baseProps.icon, value: String(baseProps.value) }, id));
                 default:

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyDescription.d.ts

@@ -0,0 +1,3 @@
+export declare const TileBodyDescription: ({ description }: {
+    description: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyDescription.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from '@chakra-ui/react';
+export const TileBodyDescription = ({ description }) => {
+    return (_jsx(Box, { px: "base", py: "4", pb: "0", bg: "lightBlue.1", children: _jsx(Text, { fontSize: "sm", fontWeight: "light", lineHeight: "18px", textAlign: "center", children: description }) }));
+};

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyDescription.tsx

@@ -0,0 +1,16 @@
+import { Box, Text } from '@chakra-ui/react'
+
+export const TileBodyDescription = ({description}: {description: string}) => {
+    return (
+        <Box px="base" py="4" pb="0" bg="lightBlue.1">
+            <Text
+                fontSize="sm"
+                fontWeight="light"
+                lineHeight="18px"
+                textAlign="center"
+            >
+                {description}
+            </Text>
+        </Box>
+    )
+}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyPartnerImage.d.ts

@@ -0,0 +1,2 @@
+import { PartnerImageI } from '../../../../../interfaces';
+export declare const TileBodyPartnerImage: ({ imageUrl, partnerName }: PartnerImageI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyPartnerImage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { PartnerImage } from '../../../..';
+export const TileBodyPartnerImage = ({ imageUrl, partnerName }) => {
+    return (_jsx(Box, { h: "240px", children: _jsx(PartnerImage, { imageUrl: imageUrl, partnerName: partnerName }) }));
+};

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyPartnerImage.tsx

@@ -0,0 +1,11 @@
+import { Box, Flex, Stack, Text } from '@chakra-ui/react'
+import { PartnerImage } from '@/components'
+import { PartnerImageI } from '@/interfaces'
+
+export const TileBodyPartnerImage = ({ imageUrl, partnerName }: PartnerImageI) => {
+    return (
+        <Box h="240px">
+            <PartnerImage imageUrl={imageUrl} partnerName={partnerName} />
+        </Box>
+    )
+}

package/dist/components/forms/dynamicForm/fields/uiFields/index.d.ts

@@ -4,4 +4,6 @@ export * from './TileBodyHeader';
 export * from './TileBodyLogo';
 export * from './TileBodySectionGrid';
 export * from './TileCta';
+export * from './TileBodyDescription';
+export * from './TileBodyPartnerImage';
 export * from './VerticalIcon';

package/dist/components/forms/dynamicForm/fields/uiFields/index.js

@@ -4,4 +4,6 @@ export * from './TileBodyHeader';
 export * from './TileBodyLogo';
 export * from './TileBodySectionGrid';
 export * from './TileCta';
+export * from './TileBodyDescription';
+export * from './TileBodyPartnerImage';
 export * from './VerticalIcon';

package/dist/components/forms/dynamicForm/fields/uiFields/index.ts

@@ -4,4 +4,6 @@ export * from './TileBodyHeader'
 export * from './TileBodyLogo'
 export * from './TileBodySectionGrid'
 export * from './TileCta'
-export * from './VerticalIcon'
+export * from './TileBodyDescription'
+export * from './TileBodyPartnerImage'
+export * from './VerticalIcon'

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -1,6 +1,6 @@
 import { AIGridFieldI, FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
 export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes | HomeItemTypes;
-export type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
+export type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-body-partner-image' | 'tile-body-description' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
 export type HomeItemTypes = 'appliances' | 'images' | 'guidelines' | 'item-related' | 'item-icon-btn';
 export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'book-opened' | 'calc' | 'calendar' | 'check' | 'co2' | 'contact' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'pressure-washer' | 'house' | 'target' | 'title' | 'company' | UIIconTypes;
 export type UIIconTypes = 'sh-pressure' | 'sh-window' | 'sh-roof' | 'sh-lights' | 'sh-gutter' | 'sh-home' | 'sh-house';

package/dist/mocks/partner/dynamicTileForm.mock.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from "../../interfaces";
+export declare const dynamicTileFormMock: ReportI[];

package/dist/mocks/partner/dynamicTileForm.mock.js

@@ -0,0 +1,65 @@
+export const dynamicTileFormMock = [
+    {
+        "id": "stile1p",
+        "name": "",
+        "description": "",
+        "comments": "",
+        "value": "",
+        "type": "tile-body",
+        "visible": true,
+        "children": [
+            {
+                "id": "stilec01",
+                "name": "Shine",
+                "description": "",
+                "comments": "",
+                "value": "https://storage.googleapis.com/homefile-images/shine_logo_updated.png",
+                "type": "tile-body-logo"
+            },
+            {
+                "id": "stilec01test",
+                "name": "Partner Name Here",
+                "description": "",
+                "comments": "",
+                "value": "https://storage.googleapis.com/homefile-images/audreybackgroundimage-update.jpg",
+                "type": "tile-body-partner-image"
+            },
+            {
+                "id": "stilec02test",
+                "name": "Shine",
+                "description": "",
+                "comments": "",
+                "value": "Test description will go here. Test.",
+                "type": "tile-body-description"
+            },
+            {
+                "id": "stile2p",
+                "name": "",
+                "description": "",
+                "comments": "",
+                "value": "",
+                "type": "tile-body-action",
+                "children": [
+                    {
+                        "id": "stilecta1",
+                        "name": "drawer-link",
+                        "description": "",
+                        "comments": "",
+                        "value": "Schedule Service",
+                        "type": "primary-cta",
+                        "link": "stiledf01"
+                    },
+                    {
+                        "id": "stilecta2",
+                        "name": "drawer-link",
+                        "description": "",
+                        "comments": "",
+                        "value": "Request Support",
+                        "type": "secondary-cta",
+                        "link": "stiledf02"
+                    }
+                ]
+            }
+        ]
+    }
+];

package/dist/mocks/partner/index.d.ts

@@ -4,3 +4,4 @@ export * from './details.mock';
 export * from './partnerCatalog.mock';
 export * from './partnerOptions.mock';
 export * from './socialLinks.mock';
+export * from './dynamicTileForm.mock';

package/dist/mocks/partner/index.js

@@ -4,3 +4,4 @@ export * from './details.mock';
 export * from './partnerCatalog.mock';
 export * from './partnerOptions.mock';
 export * from './socialLinks.mock';
+export * from './dynamicTileForm.mock';

package/dist/stories/partner/DynamicTile.stories.d.ts

@@ -0,0 +1,5 @@
+import { DynamicFormI } from '../../interfaces';
+import { Meta } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const DynamicFormTileComponent: (args: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/partner/DynamicTile.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DynamicForm as DynamicFormTile } from '../../components';
+import { dynamicTileFormMock, socialLinksMock, menuMock } from '../../mocks';
+import { Flex } from '@chakra-ui/react';
+export default {
+    title: 'Components/Partner',
+    component: DynamicFormTile,
+    args: {
+        _id: '12',
+        form: dynamicTileFormMock,
+        websiteUrl: 'http://www.homefile.com',
+        socialLinks: socialLinksMock,
+        partnerName: 'Homefile Dynamic',
+        menuItems: menuMock,
+        minimized: false,
+        showTitle: false,
+    },
+    argTypes: {
+        menuItems: {
+            control: { disable: true },
+        },
+    },
+};
+export const DynamicFormTileComponent = (args) => {
+    return (_jsx(Flex, { maxW: '380px', children: _jsx(DynamicFormTile, Object.assign({}, args)) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.14.31",
+  "version": "2.14.32",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/forms/dynamicForm/fields/TileBodyFields.tsx

@@ -1,6 +1,6 @@
 import { fieldIcons } from '@/helpers'
 import { FieldTypesI } from '@/interfaces'
-import { VerticalIcon, TileBodySectionGrid } from '@/components'
+import { VerticalIcon, TileBodySectionGrid, TileBodyDescription, TileBodyPartnerImage } from '@/components'
 
 export const TileBodyFields = ({ fields }: FieldTypesI) => {
   return (
@@ -16,6 +16,10 @@ export const TileBodyFields = ({ fields }: FieldTypesI) => {
         switch (type) {
           case 'tile-body-section-grid':
             return <TileBodySectionGrid key={id} fields={children} />
+          case 'tile-body-description':
+            return <TileBodyDescription description={String(baseProps.value)}/>
+          case 'tile-body-partner-image':
+            return <TileBodyPartnerImage imageUrl={String(baseProps.value)} partnerName={name}/>
           case 'vertical-icon':
             return (
               <VerticalIcon
@@ -24,7 +28,6 @@ export const TileBodyFields = ({ fields }: FieldTypesI) => {
                 value={String(baseProps.value)}
               />
             )
-
           default:
             return null
         }

package/src/components/forms/dynamicForm/fields/uiFields/TileBodyDescription.tsx

@@ -0,0 +1,16 @@
+import { Box, Text } from '@chakra-ui/react'
+
+export const TileBodyDescription = ({description}: {description: string}) => {
+    return (
+        <Box px="base" py="4" pb="0" bg="lightBlue.1">
+            <Text
+                fontSize="sm"
+                fontWeight="light"
+                lineHeight="18px"
+                textAlign="center"
+            >
+                {description}
+            </Text>
+        </Box>
+    )
+}

package/src/components/forms/dynamicForm/fields/uiFields/TileBodyPartnerImage.tsx

@@ -0,0 +1,11 @@
+import { Box, Flex, Stack, Text } from '@chakra-ui/react'
+import { PartnerImage } from '@/components'
+import { PartnerImageI } from '@/interfaces'
+
+export const TileBodyPartnerImage = ({ imageUrl, partnerName }: PartnerImageI) => {
+    return (
+        <Box h="240px">
+            <PartnerImage imageUrl={imageUrl} partnerName={partnerName} />
+        </Box>
+    )
+}

package/src/components/forms/dynamicForm/fields/uiFields/index.ts

@@ -4,4 +4,6 @@ export * from './TileBodyHeader'
 export * from './TileBodyLogo'
 export * from './TileBodySectionGrid'
 export * from './TileCta'
-export * from './VerticalIcon'
+export * from './TileBodyDescription'
+export * from './TileBodyPartnerImage'
+export * from './VerticalIcon'

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -39,6 +39,8 @@ export type UIKindTypes =
   | 'tile-body-header'
   | 'tile-body-section'
   | 'tile-body-section-grid'
+  | 'tile-body-partner-image'
+  | 'tile-body-description'
   | 'tile-form'
   | 'tile-body-action'
   | 'vertical-icon'

package/src/mocks/partner/dynamicTileForm.mock.ts

@@ -0,0 +1,67 @@
+import { ReportI } from "@/interfaces";
+
+export const dynamicTileFormMock: ReportI[] = [
+    {
+        "id": "stile1p",
+        "name": "",
+        "description": "",
+        "comments": "",
+        "value": "",
+        "type": "tile-body",
+        "visible": true,
+        "children": [
+            {
+                "id": "stilec01",
+                "name": "Shine",
+                "description": "",
+                "comments": "",
+                "value": "https://storage.googleapis.com/homefile-images/shine_logo_updated.png",
+                "type": "tile-body-logo"
+            },
+            {
+                "id": "stilec01test",
+                "name": "Partner Name Here",
+                "description": "",
+                "comments": "",
+                "value": "https://storage.googleapis.com/homefile-images/audreybackgroundimage-update.jpg",
+                "type": "tile-body-partner-image"
+            },
+            {
+                "id": "stilec02test",
+                "name": "Shine",
+                "description": "",
+                "comments": "",
+                "value": "Test description will go here. Test.",
+                "type": "tile-body-description"
+            },
+            {
+                "id": "stile2p",
+                "name": "",
+                "description": "",
+                "comments": "",
+                "value": "",
+                "type": "tile-body-action",
+                "children": [
+                    {
+                        "id": "stilecta1",
+                        "name": "drawer-link",
+                        "description": "",
+                        "comments": "",
+                        "value": "Schedule Service",
+                        "type": "primary-cta",
+                        "link": "stiledf01"
+                    },
+                    {
+                        "id": "stilecta2",
+                        "name": "drawer-link",
+                        "description": "",
+                        "comments": "",
+                        "value": "Request Support",
+                        "type": "secondary-cta",
+                        "link": "stiledf02"
+                    }
+                ]
+            }
+        ]
+    }
+]

package/src/mocks/partner/index.ts

@@ -4,3 +4,4 @@ export * from './details.mock'
 export * from './partnerCatalog.mock'
 export * from './partnerOptions.mock'
 export * from './socialLinks.mock'
+export * from './dynamicTileForm.mock'

package/src/stories/partner/DynamicTile.stories.tsx

@@ -0,0 +1,33 @@
+import { DynamicForm as DynamicFormTile } from '@/components'
+import { DynamicFormI } from '@/interfaces'
+import { dynamicTileFormMock, socialLinksMock, menuMock } from '@/mocks'
+import { Meta } from '@storybook/react'
+import { Flex } from '@chakra-ui/react'
+
+export default {
+  title: 'Components/Partner',
+  component: DynamicFormTile,
+  args: {    
+    _id: '12',
+    form: dynamicTileFormMock,
+    websiteUrl: 'http://www.homefile.com',
+    socialLinks: socialLinksMock,
+    partnerName: 'Homefile Dynamic',
+    menuItems: menuMock,
+    minimized: false,
+    showTitle: false,
+  },
+  argTypes: {
+    menuItems: {
+      control: { disable: true },
+    },
+  },
+} as Meta
+
+export const DynamicFormTileComponent = (args: DynamicFormI) => {
+  return (
+    <Flex maxW={'380px'}>
+      <DynamicFormTile {...args} />
+    </Flex>
+  )
+}