@eightshift/frontend-libs

{ "$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/component.json", "componentName": "wrapper", "title": "Wrapper", "componentClass": "wrapper", "example": { "attributes": { "wrapperId": "This a custom ID", "wrapperBgColorType": "project", "wrapperBgColorProject": "white", "wrapperUse": true, "wrapperSimple": false, "wrapperUseShowControl": true, "wrapperNoControls": false, "wrapperParentClass": "", "wrapperWidthLarge": 12, "wrapperOffsetLarge": 1, "wrapperHideLarge": false, "wrapperIsFullWidthLarge": true, "wrapperSpacingTopLarge": 1, "wrapperSpacingBottomLarge": 1, "wrapperSpacingTopInLarge": 1, "wrapperDividerTopLarge": true, "wrapperDividerColor": "black" } }, "attributes": { "wrapperUseInner": { "type": "boolean", "default": true }, "wrapperUse": { "type": "boolean", "default": true }, "wrapperUseShowControl": { "type": "boolean", "default": true }, "wrapperSimpleShowControl": { "type": "boolean", "default": true }, "wrapperNoControls": { "type": "boolean", "default": false }, "wrapperSimple": { "type": "boolean", "default": false }, "wrapperParentClass": { "type": "string" }, "uniqueWrapperId": { "type": "string" }, "wrapperOnlyOutput": { "type": "boolean", "default": false }, "wrapperId": { "type": "string" }, "wrapperAnchorId": { "type": "string" }, "wrapperMinWidth": { "type": "integer", "default": 1 }, "wrapperGetGridInfo": { "type": "boolean", "default": false }, "wrapperTag": { "type": "string", "default": "div" }, "wrapperBgColorType": { "type": "string", "default": "project" }, "wrapperBgColorProject": { "type": "string" }, "wrapperBgColorGradient": { "type": "string" }, "wrapperBgColorGradientBlendMode": { "type": "string" }, "wrapperBgColorGradientRepeat": { "type": "string" }, "wrapperBgColorGradientPosition": { "type": "string" }, "wrapperBgColorGradientSize": { "type": "string" }, "wrapperWidthLarge": { "type": "integer", "default": 12 }, "wrapperWidthDesktop": { "type": "integer" }, "wrapperWidthTablet": { "type": "integer" }, "wrapperWidthMobile": { "type": "integer", "default": 12 }, "wrapperOffsetLarge": { "type": "integer", "default": 1 }, "wrapperOffsetDesktop": { "type": "integer" }, "wrapperOffsetTablet": { "type": "integer" }, "wrapperOffsetMobile": { "type": "integer", "default": 1 }, "wrapperSpacingTopLarge": { "type": "integer", "default": 0 }, "wrapperSpacingTopDesktop": { "type": "integer" }, "wrapperSpacingTopTablet": { "type": "integer" }, "wrapperSpacingTopMobile": { "type": "integer" }, "wrapperSpacingBottomLarge": { "type": "integer", "default": 40 }, "wrapperSpacingBottomDesktop": { "type": "integer" }, "wrapperSpacingBottomTablet": { "type": "integer" }, "wrapperSpacingBottomMobile": { "type": "integer" }, "wrapperSpacingLeftLarge": { "type": "integer", "default": 0 }, "wrapperSpacingLeftDesktop": { "type": "integer" }, "wrapperSpacingLeftTablet": { "type": "integer" }, "wrapperSpacingLeftMobile": { "type": "integer" }, "wrapperSpacingRightLarge": { "type": "integer", "default": 0 }, "wrapperSpacingRightDesktop": { "type": "integer" }, "wrapperSpacingRightTablet": { "type": "integer" }, "wrapperSpacingRightMobile": { "type": "integer" }, "wrapperSpacingLeftInLarge": { "type": "integer", "default": 0 }, "wrapperSpacingLeftInDesktop": { "type": "integer" }, "wrapperSpacingLeftInTablet": { "type": "integer" }, "wrapperSpacingLeftInMobile": { "type": "integer" }, "wrapperSpacingRightInLarge": { "type": "integer", "default": 0 }, "wrapperSpacingRightInDesktop": { "type": "integer" }, "wrapperSpacingRightInTablet": { "type": "integer" }, "wrapperSpacingRightInMobile": { "type": "integer" }, "wrapperSpacingTopInLarge": { "type": "integer", "default": 0 }, "wrapperSpacingTopInDesktop": { "type": "integer" }, "wrapperSpacingTopInTablet": { "type": "integer" }, "wrapperSpacingTopInMobile": { "type": "integer" }, "wrapperSpacingBottomInLarge": { "type": "integer", "default": 0 }, "wrapperSpacingBottomInDesktop": { "type": "integer" }, "wrapperSpacingBottomInTablet": { "type": "integer" }, "wrapperSpacingBottomInMobile": { "type": "integer" }, "wrapperRoundedCornersLarge": { "type": "integer", "default": 0 }, "wrapperRoundedCornersDesktop": { "type": "integer" }, "wrapperRoundedCornersTablet": { "type": "integer" }, "wrapperRoundedCornersMobile": { "type": "integer" }, "wrapperDividerColor": { "type": "string" }, "wrapperDividerTopLarge": { "type": "boolean", "default": false }, "wrapperDividerTopDesktop": { "type": "boolean" }, "wrapperDividerTopTablet": { "type": "boolean" }, "wrapperDividerTopMobile": { "type": "boolean" }, "wrapperDividerBottomLarge": { "type": "boolean", "default": false }, "wrapperDividerBottomDesktop": { "type": "boolean" }, "wrapperDividerBottomTablet": { "type": "boolean" }, "wrapperDividerBottomMobile": { "type": "boolean" }, "wrapperDividerLeftLarge": { "type": "boolean", "default": false }, "wrapperDividerLeftDesktop": { "type": "boolean" }, "wrapperDividerLeftTablet": { "type": "boolean" }, "wrapperDividerLeftMobile": { "type": "boolean" }, "wrapperDividerRightLarge": { "type": "boolean", "default": false }, "wrapperDividerRightDesktop": { "type": "boolean" }, "wrapperDividerRightTablet": { "type": "boolean" }, "wrapperDividerRightMobile": { "type": "boolean" }, "wrapperHideLarge": { "type": "boolean", "default": false }, "wrapperHideDesktop": { "type": "boolean" }, "wrapperHideTablet": { "type": "boolean" }, "wrapperHideMobile": { "type": "boolean" }, "wrapperIsFullWidthLarge": { "type": "boolean", "default": false }, "wrapperIsFullWidthDesktop": { "type": "boolean" }, "wrapperIsFullWidthTablet": { "type": "boolean" }, "wrapperIsFullWidthMobile": { "type": "boolean", "default": false }, "wrapperHideOverflowHLarge": { "type": "boolean", "default": false }, "wrapperHideOverflowHDesktop": { "type": "boolean" }, "wrapperHideOverflowHTablet": { "type": "boolean" }, "wrapperHideOverflowHMobile": { "type": "boolean" }, "wrapperHideOverflowVLarge": { "type": "boolean", "default": false }, "wrapperHideOverflowVDesktop": { "type": "boolean" }, "wrapperHideOverflowVTablet": { "type": "boolean" }, "wrapperHideOverflowVMobile": { "type": "boolean" } }, "options": { "wrapperBgColorProject": [ "primary700", "primary500", "primary300", "black", "gray900", "gray800", "gray700", "gray600", "gray500", "gray400", "gray300", "gray200", "gray100", "white" ], "wrapperDividerColor": [ "primary700", "primary500", "primary300", "black", "gray900", "gray800", "gray700", "gray300", "gray200", "gray100", "white" ], "widths": { "min": 1, "max": 12, "fullMax": 14, "step": 1 }, "wrapperTag": [ { "value": "div", "label": "<div>" }, { "value": "section", "label": "<section>" }, { "value": "aside", "label": "<aside>" }, { "value": "article", "label": "<article>" } ], "breakpoints": [ "large", "desktop", "tablet", "mobile" ], "wrapperSectionSpacing": { "min": -300, "max": 300, "step": 1 }, "wrapperSectionInnerSpacing": { "min": 0, "max": 300, "step": 1 }, "wrapperRoundedCorners": { "min": 0, "max": 100, "step": 1 } }, "responsiveAttributes": { "wrapperWidth": { "large": "wrapperWidthLarge", "desktop": "wrapperWidthDesktop", "tablet": "wrapperWidthTablet", "mobile": "wrapperWidthMobile" }, "wrapperOffset": { "large": "wrapperOffsetLarge", "desktop": "wrapperOffsetDesktop", "tablet": "wrapperOffsetTablet", "mobile": "wrapperOffsetMobile" }, "wrapperSpacingTop": { "large": "wrapperSpacingTopLarge", "desktop": "wrapperSpacingTopDesktop", "tablet": "wrapperSpacingTopTablet", "mobile": "wrapperSpacingTopMobile" }, "wrapperSpacingBottom": { "large": "wrapperSpacingBottomLarge", "desktop": "wrapperSpacingBottomDesktop", "tablet": "wrapperSpacingBottomTablet", "mobile": "wrapperSpacingBottomMobile" }, "wrapperSpacingLeft": { "large": "wrapperSpacingLeftLarge", "desktop": "wrapperSpacingLeftDesktop", "tablet": "wrapperSpacingLeftTablet", "mobile": "wrapperSpacingLeftMobile" }, "wrapperSpacingRight": { "large": "wrapperSpacingRightLarge", "desktop": "wrapperSpacingRightDesktop", "tablet": "wrapperSpacingRightTablet", "mobile": "wrapperSpacingRightMobile" }, "wrapperSpacingLeftIn": { "large": "wrapperSpacingLeftInLarge", "desktop": "wrapperSpacingLeftInDesktop", "tablet": "wrapperSpacingLeftInTablet", "mobile": "wrapperSpacingLeftInMobile" }, "wrapperSpacingRightIn": { "large": "wrapperSpacingRightInLarge", "desktop": "wrapperSpacingRightInDesktop", "tablet": "wrapperSpacingRightInTablet", "mobile": "wrapperSpacingRightInMobile" }, "wrapperSpacingTopIn": { "large": "wrapperSpacingTopInLarge", "desktop": "wrapperSpacingTopInDesktop", "tablet": "wrapperSpacingTopInTablet", "mobile": "wrapperSpacingTopInMobile" }, "wrapperSpacingBottomIn": { "large": "wrapperSpacingBottomInLarge", "desktop": "wrapperSpacingBottomInDesktop", "tablet": "wrapperSpacingBottomInTablet", "mobile": "wrapperSpacingBottomInMobile" }, "wrapperDividerTop": { "large": "wrapperDividerTopLarge", "desktop": "wrapperDividerTopDesktop", "tablet": "wrapperDividerTopTablet", "mobile": "wrapperDividerTopMobile" }, "wrapperDividerBottom": { "large": "wrapperDividerBottomLarge", "desktop": "wrapperDividerBottomDesktop", "tablet": "wrapperDividerBottomTablet", "mobile": "wrapperDividerBottomMobile" }, "wrapperDividerLeft": { "large": "wrapperDividerLeftLarge", "desktop": "wrapperDividerLeftDesktop", "tablet": "wrapperDividerLeftTablet", "mobile": "wrapperDividerLeftMobile" }, "wrapperDividerRight": { "large": "wrapperDividerRightLarge", "desktop": "wrapperDividerRightDesktop", "tablet": "wrapperDividerRightTablet", "mobile": "wrapperDividerRightMobile" }, "wrapperHide": { "large": "wrapperHideLarge", "desktop": "wrapperHideDesktop", "tablet": "wrapperHideTablet", "mobile": "wrapperHideMobile" }, "wrapperIsFullWidth": { "large": "wrapperIsFullWidthLarge", "desktop": "wrapperIsFullWidthDesktop", "tablet": "wrapperIsFullWidthTablet", "mobile": "wrapperIsFullWidthMobile" }, "wrapperRoundedCorners": { "large": "wrapperRoundedCornersLarge", "desktop": "wrapperRoundedCornersDesktop", "tablet": "wrapperRoundedCornersTablet", "mobile": "wrapperRoundedCornersMobile" }, "wrapperHideOverflowH": { "large": "wrapperHideOverflowHLarge", "desktop": "wrapperHideOverflowHDesktop", "tablet": "wrapperHideOverflowHTablet", "mobile": "wrapperHideOverflowHMobile" }, "wrapperHideOverflowV": { "large": "wrapperHideOverflowVLarge", "desktop": "wrapperHideOverflowVDesktop", "tablet": "wrapperHideOverflowVTablet", "mobile": "wrapperHideOverflowVMobile" } }, "variables": { "wrapperBgColorProject": [ { "variable": { "wrapper-bg-color-project": "var(--global-colors-%value%)" } } ], "wrapperBgColorGradient": [ { "variable": { "wrapper-bg-color-gradient": "%value%" } } ], "wrapperDividerColor": [ { "variable": { "wrapper-divider-color": "var(--global-colors-%value%)" } } ], "wrapperWidth": [ { "inverse": true, "variable": { "wrapper-width": "%value%" } } ], "wrapperOffset": [ { "inverse": true, "variable": { "wrapper-offset": "%value%" } } ], "wrapperSpacingTop": [ { "inverse": true, "variable": { "wrapper-spacing-top": "%value%" } } ], "wrapperSpacingBottom": [ { "inverse": true, "variable": { "wrapper-spacing-bottom": "%value%" } } ], "wrapperSpacingLeft": [ { "inverse": true, "variable": { "wrapper-spacing-left": "%value%" } } ], "wrapperSpacingRight": [ { "inverse": true, "variable": { "wrapper-spacing-right": "%value%" } } ], "wrapperSpacingLeftIn": [ { "inverse": true, "variable": { "wrapper-spacing-left-in": "%value%" } } ], "wrapperSpacingRightIn": [ { "inverse": true, "variable": { "wrapper-spacing-right-in": "%value%" } } ], "wrapperSpacingTopIn": [ { "inverse": true, "variable": { "wrapper-spacing-top-in": "%value%" } } ], "wrapperSpacingBottomIn": [ { "inverse": true, "variable": { "wrapper-spacing-bottom-in": "%value%" } } ], "wrapperDividerTop": { "true": [ { "inverse": true, "variable": { "wrapper-divider-top": "1px solid var(--wrapper-divider-color)" } } ], "false": [ { "inverse": true, "variable": { "wrapper-divider-top": "none" } } ] }, "wrapperDividerBottom": { "true": [ { "inverse": true, "variable": { "wrapper-divider-bottom": "1px solid var(--wrapper-divider-color)" } } ], "false": [ { "inverse": true, "variable": { "wrapper-divider-bottom": "none" } } ] }, "wrapperDividerLeft": { "true": [ { "inverse": true, "variable": { "wrapper-divider-left": "1px solid var(--wrapper-divider-color)" } } ], "false": [ { "inverse": true, "variable": { "wrapper-divider-left": "none" } } ] }, "wrapperDividerRight": { "true": [ { "inverse": true, "variable": { "wrapper-divider-right": "1px solid var(--wrapper-divider-color)" } } ], "false": [ { "inverse": true, "variable": { "wrapper-divider-right": "none" } } ] }, "wrapperHide": { "true": [ { "inverse": true, "variable": { "wrapper-display": "none" } } ], "false": [ { "inverse": true, "variable": { "wrapper-display": "var(--wrapper-display-type, grid)" } } ] }, "wrapperIsFullWidth": { "true": [ { "inverse": true, "variable": { "wrapper-is-full-width": "1", "wrapper-start-offset": "0", "wrapper-end-offset": "0" } } ], "false": [ { "inverse": true, "variable": { "wrapper-is-full-width": "0", "wrapper-start-offset": "1", "wrapper-end-offset": "0" } } ] }, "wrapperSimple": { "true": [ { "variable": { "wrapper-display-type": "block" } } ], "false": [ { "variable": { "wrapper-display-type": "grid" } } ] }, "wrapperRoundedCorners": [ { "inverse": true, "variable": { "wrapper-rounded-corners": "%value%" } } ], "wrapperHideOverflowH": { "true": [ { "inverse": true, "variable": { "wrapper-overflow-x": "hidden" } } ] }, "wrapperHideOverflowV": { "true": [ { "inverse": true, "variable": { "wrapper-overflow-y": "hidden" } } ] } }, "variablesEditor": { "wrapperHide": { "true": [ { "inverse": true, "variable": { "wrapper-display-opacity": "0.5", "wrapper-display": "var(--wrapper-display-type, grid)" } } ], "false": [ { "inverse": true, "variable": { "wrapper-display-opacity": "1" } } ] } }, "configPresets": [ { "name": "Full-width", "icon" : "width", "attributes": { "wrapperUse": true, "wrapperSimple": false, "wrapperWidthLarge": 14, "wrapperOffsetLarge": 1, "wrapperIsFullWidthLarge": true } }, { "name": "Padded & rounded", "icon" : "wrapperSimple", "attributes": { "wrapperUse": true, "wrapperSimple": false, "wrapperBgColorProject": "gray100", "wrapperSpacingTopInLarge": 20, "wrapperSpacingBottomInLarge": 20, "wrapperSpacingLeftInLarge": 20, "wrapperSpacingRightInLarge": 20, "wrapperRoundedCornersLarge": 10 } } ] }