Skip to content

Commit

Permalink
Merge pull request #1868 from smeup/Kup-image-list
Browse files Browse the repository at this point in the history 
Kup image list
  • Loading branch information
@Leonardo-Signorelli
Leonardo-Signorelli authored Apr 17, 2024
2 parents 29ad9c8 + 05619d5 commit 11a35df
Show file tree
Hide file tree
Showing 5 changed files with 362 additions and 17 deletions.
330 changes: 330 additions & 0 deletions packages/ketchup/src/assets/image-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -677,6 +677,336 @@ const data = [
value: 'Guides',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
badgeData: [
{
imageData: {
resource:
'https://ketchup.smeup.com/ketchup-showcase/header_logo_dark.svg',
sizeX: '1.75rem',
sizeY: 'auto',
color: 'var(--kup-text-on-primary-color)',
},
position: 'BL',
},
],
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
badgeData: [
{
imageData: {
resource:
'https://ketchup.smeup.com/ketchup-showcase/header_logo_dark.svg',
sizeX: '1.75rem',
sizeY: 'auto',
color: 'var(--kup-text-on-primary-color)',
},
position: 'BL',
},
],
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://c8.alamy.com/compit/f4j1rh/verticale-di-tronchi-di-alberi-di-boschi-guardando-verso-l-alto-da-terra-con-il-sole-che-splende-attraverso-foglie-f4j1rh.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
cells: {
ROUTE: {
value: 'accordion',
},
},
icon: 'view-sequential',
value: 'Accordion',
visible: true,
},
{
cells: {
ROUTE: {
value: 'accordion',
},
},
icon: 'view-sequential',
value: 'Accordion',
visible: true,
},
{
cells: {
ROUTE: {
value: 'accordion',
},
},
icon: 'view-sequential',
value: 'Accordion',
visible: true,
},
{
cells: {
ROUTE: {
value: 'accordion',
},
},
icon: 'view-sequential',
value: 'Accordion',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://c8.alamy.com/compit/f4j1rh/verticale-di-tronchi-di-alberi-di-boschi-guardando-verso-l-alto-da-terra-con-il-sole-che-splende-attraverso-foglie-f4j1rh.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://c8.alamy.com/compit/f4j1rh/verticale-di-tronchi-di-alberi-di-boschi-guardando-verso-l-alto-da-terra-con-il-sole-che-splende-attraverso-foglie-f4j1rh.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://c8.alamy.com/compit/f4j1rh/verticale-di-tronchi-di-alberi-di-boschi-guardando-verso-l-alto-da-terra-con-il-sole-che-splende-attraverso-foglie-f4j1rh.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://c8.alamy.com/compit/f4j1rh/verticale-di-tronchi-di-alberi-di-boschi-guardando-verso-l-alto-da-terra-con-il-sole-che-splende-attraverso-foglie-f4j1rh.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://c8.alamy.com/compit/f4j1rh/verticale-di-tronchi-di-alberi-di-boschi-guardando-verso-l-alto-da-terra-con-il-sole-che-splende-attraverso-foglie-f4j1rh.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
children: [
{
cells: {
ROUTE: {
value: 'customization',
},
},
icon: 'style',
value: 'Style customization',
visible: true,
},
],
expandable: true,
icon: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
isExpanded: false,
value: 'Guides',
visible: true,
},
{
children: [
{
Expand Down
8 changes: 0 additions & 8 deletions packages/ketchup/src/components/kup-badge/styles/kup-badge-classes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,6 @@
transform: translate(-15%, 15%);
}

:host(.#{$kup-class-top-left}) {
top: 0;
left: 0;
bottom: unset;
right: unset;
transform: translate(15%, 15%);
}

:host(.#{$kup-class-bottom-right}) {
top: unset;
right: 0;
Expand Down
25 changes: 19 additions & 6 deletions packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,8 +259,15 @@ export class KupImageList {
wrapperClass: 'image-list__image',
badgeData: node.badgeData,
};

const image = <FImage {...props}></FImage>;
const label = <div class="image-list__label">{node.value}</div>;

const hasExternalResource =
props.resource.indexOf('.') > -1 ||
props.resource.indexOf('/') > -1 ||
props.resource.indexOf('\\') > -1;

return (
<FCell
cell={{ value: node.value, icon: node.icon, obj: node.obj }}
Expand All @@ -269,12 +276,18 @@ export class KupImageList {
density={FCellPadding.NONE}
row={{ ...node }}
>
<div class="image-list__wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 24 24"
></svg>
<div
class={`image-list__wrapper${
hasExternalResource ? ' images' : ''
}`}
>
{!hasExternalResource && (
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 24 24"
></svg>
)}
{image}
{label}
</div>
Expand Down
Loading

0 comments on commit 11a35df

Please sign in to comment.