Merge pull request #378 from anbrue/feature/IconLinkList

Feature/icon link list

src/Project/Sugcon2024/Sugcon/package.json

@@ -38,6 +38,11 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@sitecore-feaas/clientside": "^0.5.5",
     "@sitecore-jss/sitecore-jss-nextjs": "~21.5.3",
     "@sitecore/engage": "^1.4.1",
@@ -114,7 +119,7 @@
     "start:production": "npm-run-all --serial bootstrap next:build next:start",
     "start:watch-components": "ts-node --project tsconfig.scripts.json scripts/generate-component-builder/index.ts --watch",
     "storybook": "storybook dev -p 6006",
-    "prebuild-storybook":"npm run bootstrap",
+    "prebuild-storybook": "npm run bootstrap",
     "build-storybook": "storybook build"
   },
   "eslintConfig": {

src/Project/Sugcon2024/Sugcon/src/assets/sass/components/icon-link-list/_component-icon-link-list.scss

@@ -0,0 +1,38 @@
+@import "@sass/abstracts/mixins";
+@import "@sass/abstracts/vars";
+@import '@fontawesome/scss/mixins';
+@import "@fontawesome/scss/variables";
+
+.icon-link-list {
+    background: $link-list-bg;
+    h1, h2, h3, h4, h5, h6 {
+        @include border-basic(bottom, $link-list-header-border);
+    }
+    >.component-content {
+        ul {
+            background: $link-list-items-bg;
+        }
+        li {
+            background: $link-list-item-bg;
+            display: block;
+            font-size: $font-normal;
+
+            a {
+                display: inline;
+                color: $link-list-item-color;
+                position: relative;
+                padding-left: 10px;
+                font-size: 1.25em;
+                text-decoration: none;
+            }
+
+            .icon-list-link {
+                svg {
+                    height: 1.25em;
+                }
+            }
+        }
+    }
+    @import "../../base/links";
+    @import "../../variants/icon-link-list";
+}

src/Project/Sugcon2024/Sugcon/src/assets/sass/components/icon-link-list/_list-horizontal.scss

@@ -0,0 +1,17 @@
+@import '@sass/abstracts/vars';
+@import '@sass/abstracts/mixins';
+
+.icon-link-list.list-horizontal {
+
+  a {
+    border: none;
+
+    svg {
+      display: inline-block;
+    }
+  }
+  li {
+    display: inline-block;
+    margin-left: $middle-margin;
+  }
+}

src/Project/Sugcon2024/Sugcon/src/assets/sass/components/icon-link-list/index.scss

@@ -0,0 +1,2 @@
+@import "_component-icon-link-list";
+@import "list-horizontal";

src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss

@@ -16,4 +16,5 @@
 @import 'link-list';
 @import 'rich-text';
 @import 'people-grid';
+@import 'icon-link-list';
 

src/Project/Sugcon2024/Sugcon/src/components/List Components/IconLinkList.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Link as JssLink, Text, LinkField, TextField } from '@sitecore-jss/sitecore-jss-nextjs';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { library } = require('@fortawesome/fontawesome-svg-core');
+
+library.add(fas, far, fab);
+
+type IconLinkListProps = {
+  params: { [key: string]: string };
+  fields: {
+    Title: TextField;
+    items: IconLink[];
+  };
+};
+
+type IconLink = {
+  fields: {
+    Link: LinkField;
+    Icon: Icon;
+  };
+};
+
+type Icon = {
+  fields: {
+    CssClass: TextField;
+  };
+};
+
+type IconLinkListItemProps = {
+  key: string;
+  index: number;
+  total: number;
+  field: LinkField;
+  icon: TextField;
+};
+
+const IconLinkListItem = (props: IconLinkListItemProps) => {
+  let className = `item${props.index}`;
+  className += (props.index + 1) % 2 == 0 ? ' even' : ' odd';
+  if (props.index == 0) {
+    className += ' first';
+  }
+  if (props.index + 1 == props.total) {
+    className += ' last';
+  }
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const iconprop: IconProp = props?.icon?.value?.toString() ?? '';
+
+  if (props?.icon?.value) {
+    return (
+      <li className={className}>
+        <div className="field-link">
+          <JssLink field={props.field} className="icon-list-link">
+            <FontAwesomeIcon icon={iconprop} />
+          </JssLink>
+        </div>
+      </li>
+    );
+  }
+
+  return (
+    <li className={className}>
+      <div className="field-link">
+        <JssLink field={props.field} />
+      </div>
+    </li>
+  );
+};
+
+export const Default = (props: IconLinkListProps): JSX.Element => {
+  const styles = `component icon-link-list ${props.params.styles}`.trimEnd();
+  const id = props.params.RenderingIdentifier;
+
+  if (props?.fields?.items?.length > 0) {
+    const list = props?.fields?.items
+      .filter((element: IconLink) => element?.fields?.Link)
+      .map((element: IconLink, key: number) => (
+        <IconLinkListItem
+          index={key}
+          key={`${key}${element.fields.Link}`}
+          total={props.fields.items.length}
+          field={element.fields.Link}
+          icon={element.fields.Icon?.fields?.CssClass}
+        />
+      ));
+
+    return (
+      <div className={styles} id={id ? id : undefined}>
+        <div className="component-content">
+          <Text tag="h3" field={props?.fields?.Title} />
+          <ul>{list}</ul>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles} id={id ? id : undefined}>
+      <div className="component-content">
+        <h3>Icon Link List</h3>
+      </div>
+    </div>
+  );
+};

src/Project/Sugcon2024/items/ContentResolvers/Sugcon2024.yml

@@ -0,0 +1,31 @@
+---
+ID: "7a88c8c7-3676-42da-905a-080c3af91090"
+Parent: "c626493f-1cc3-4986-a701-f28b83d649f7"
+Template: "1404a77a-d5fd-46b3-aa4c-200f3d519979"
+Path: /sitecore/system/Modules/Layout Service/Rendering Contents Resolvers/Sugcon2024
+Languages:
+- Language: en
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20240215T160137Z
+    - ID: "52807595-0f8f-4b20-8d2a-cb71d28c6103"
+      Hint: __Owner
+      Value: |
+        sitecore\x3rLvWVVyq
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\x3rLvWVVyq
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "b8eb5cc6-0ea4-4ee5-a5ae-a7be15cda361"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\x3rLvWVVyq
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240215T160137Z