@ilo-org/react 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @ilo-org/react
 
+## 0.6.0
+
+### Minor Changes
+
+- 0f45a7aae: Add Social Media component and use in Footer
+
+### Patch Changes
+
+- Updated dependencies [0f45a7aae]
+- Updated dependencies [0f45a7aae]
+- Updated dependencies [0f45a7aae]
+- Updated dependencies [2f6b0e73f]
+  - @ilo-org/themes@0.2.0
+  - @ilo-org/styles@0.5.0
+  - @ilo-org/icons-react@0.0.21
+
 ## 0.5.1
 
 ### Patch Changes

package/lib/cjs/components/Footer/Footer.js

@@ -5,6 +5,8 @@ var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var classNames = require('classnames');
 var components_LinkList_LinkList = require('../LinkList/LinkList.js');
 var components_Button_Button = require('../Button/Button.js');
+var components_SocialMedia_SocialMedia = require('../SocialMedia/SocialMedia.js');
+require('../SocialMedia/index.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
@@ -12,12 +14,11 @@ require('../Link/Link.js');
 require('../Icon/Icon.js');
 require('@ilo-org/icons-react');
 
-const Footer = ({ className, logo, tagline, subtagline, address, linkgroup, socials, subscribe, legal, secondarylinks, anchorlink, }) => {
+const Footer = ({ className, logo, tagline, subtagline, address, linkgroup, socialmedia, subscribe, legal, secondarylinks, anchorlink, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--footer`;
     const footerClasses = classNames(className, baseClass);
-    return (jsxRuntime.jsxs("footer", Object.assign({ className: footerClasses }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--main` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: "site--info" }, { children: [jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }), jsxRuntime.jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: tagline })), jsxRuntime.jsx("h4", Object.assign({ className: `${baseClass}--subhead` }, { children: subtagline }))] })), address && (jsxRuntime.jsx("div", Object.assign({ className: "address" }, { children: address.map((line, i) => (jsxRuntime.jsx("p", Object.assign({ className: "address--line" }, { children: line }), i))) }))), linkgroup && (jsxRuntime.jsx("nav", Object.assign({ className: "links" }, { children: jsxRuntime.jsx(components_LinkList_LinkList, { linkgroup: linkgroup, theme: "dark" }) }))), (socials || subscribe) && (jsxRuntime.jsxs("div", Object.assign({ className: "connect" }, { children: [socials && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h5", Object.assign({ className: "social--headline" }, { children: socials === null || socials === void 0 ? void 0 : socials.headline })), jsxRuntime.jsx("ul", Object.assign({ className: "social--links" }, { children: socials.links &&
-                                            socials.links.map((link, index) => (jsxRuntime.jsx("li", Object.assign({ className: "social--links--item" }, { children: jsxRuntime.jsx("a", Object.assign({ className: `social--links--link ${link.type}`, href: link.url }, { children: link.type })) }), index))) }))] })), subscribe && (jsxRuntime.jsx(components_Button_Button, { label: subscribe === null || subscribe === void 0 ? void 0 : subscribe.label, url: subscribe === null || subscribe === void 0 ? void 0 : subscribe.url, type: "primary", size: "large", target: "_blank" }))] })))] })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--secondary` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "legal" }, { children: legal })), secondarylinks && (jsxRuntime.jsx("nav", Object.assign({ className: "secondarylinks" }, { children: jsxRuntime.jsx("ul", Object.assign({ className: "secondarylinks--list" }, { children: secondarylinks.map((link, i) => (jsxRuntime.jsx("li", Object.assign({ className: "secondarylinks--list--item" }, { children: jsxRuntime.jsx("a", Object.assign({ href: link.url, className: "secondarylinks--list--link" }, { children: link === null || link === void 0 ? void 0 : link.label }), i) })))) })) }))), jsxRuntime.jsx("a", Object.assign({ href: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.url, className: "anchorlink" }, { children: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.label }))] }))] })));
+    return (jsxRuntime.jsxs("footer", Object.assign({ className: footerClasses }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--main` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: "site--info" }, { children: [jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }), jsxRuntime.jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: tagline })), jsxRuntime.jsx("h4", Object.assign({ className: `${baseClass}--subhead` }, { children: subtagline }))] })), address && (jsxRuntime.jsx("div", Object.assign({ className: "address" }, { children: address.map((line, i) => (jsxRuntime.jsx("p", Object.assign({ className: "address--line" }, { children: line }), i))) }))), linkgroup && (jsxRuntime.jsx("nav", Object.assign({ className: "links" }, { children: jsxRuntime.jsx(components_LinkList_LinkList, { linkgroup: linkgroup, theme: "dark" }) }))), (socialmedia || subscribe) && (jsxRuntime.jsxs("div", Object.assign({ className: "connect" }, { children: [socialmedia && (jsxRuntime.jsx("div", Object.assign({ className: "social--links" }, { children: jsxRuntime.jsx(components_SocialMedia_SocialMedia, Object.assign({}, socialmedia, { theme: "dark" })) }))), subscribe && (jsxRuntime.jsx(components_Button_Button, { label: subscribe === null || subscribe === void 0 ? void 0 : subscribe.label, url: subscribe === null || subscribe === void 0 ? void 0 : subscribe.url, type: "primary", size: "large", target: "_blank" }))] })))] })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--secondary` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "legal" }, { children: legal })), secondarylinks && (jsxRuntime.jsx("nav", Object.assign({ className: "secondarylinks" }, { children: jsxRuntime.jsx("ul", Object.assign({ className: "secondarylinks--list" }, { children: secondarylinks.map((link, i) => (jsxRuntime.jsx("li", Object.assign({ className: "secondarylinks--list--item" }, { children: jsxRuntime.jsx("a", Object.assign({ href: link.url, className: "secondarylinks--list--link" }, { children: link === null || link === void 0 ? void 0 : link.label }), i) })))) })) }))), jsxRuntime.jsx("a", Object.assign({ href: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.url, className: "anchorlink" }, { children: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.label }))] }))] })));
 };
 
 module.exports = Footer;

package/lib/cjs/components/Footer/index.js

@@ -12,6 +12,8 @@ require('../Button/Button.js');
 require('../Link/Link.js');
 require('../Icon/Icon.js');
 require('@ilo-org/icons-react');
+require('../SocialMedia/SocialMedia.js');
+require('../SocialMedia/index.js');
 
 
 

package/lib/cjs/components/SocialMedia/SocialMedia.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+require('react');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+
+const SocialMedia = ({ className, theme = "light", justify = "start", headline, icons, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    // Classes to be applied to the outer element
+    const baseClass = `${prefix}--social-media`;
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const justifyClass = `${baseClass}__justify__${justify}`;
+    const classes = classNames(baseClass, themeClass, justifyClass, className);
+    // Classes to be applied to inner elements
+    const headlineClass = `${baseClass}--headline`;
+    const listClass = `${baseClass}--list`;
+    const listItemClass = `${listClass}--item`;
+    const iconClass = `${listItemClass}--icon`;
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classes }, { children: [headline && jsxRuntime.jsx("h5", Object.assign({ className: headlineClass }, { children: headline })), jsxRuntime.jsx("ul", Object.assign({ className: listClass }, { children: icons.map((item) => (jsxRuntime.jsx("li", Object.assign({ className: listItemClass }, { children: jsxRuntime.jsx("a", Object.assign({ title: item.label, className: classNames(iconClass, `${iconClass}__${item.icon}`), href: item.url }, { children: item.label })) })))) }))] })));
+};
+
+module.exports = SocialMedia;

package/lib/cjs/components/SocialMedia/index.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var components_SocialMedia_SocialMedia = require('./SocialMedia.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+const defaultArgs = {
+    headline: "Follow us on social media",
+    theme: "light",
+    justify: "start",
+    icons: [
+        {
+            icon: "facebook",
+            url: "https://www.facebook.com/ilo.org",
+            label: "Facebook",
+        },
+        {
+            icon: "twitter",
+            url: "https://twitter.com/#!/ilo",
+            label: "Twitter",
+        },
+        {
+            icon: "instagram",
+            url: "https://www.instagram.com/ilo.org/",
+            label: "Instagram",
+        },
+        {
+            icon: "linkedin",
+            url: "https://www.linkedin.com/company/international-labour-organization-ilo",
+            label: "LinkedIn",
+        },
+        {
+            icon: "youtube",
+            url: "https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA",
+            label: "YouTube",
+        },
+        {
+            icon: "tiktok",
+            url: "https://www.tiktok.com/@ilo",
+            label: "TikTok",
+        },
+        {
+            icon: "flickr",
+            url: "https://www.flickr.com/photos/ilopictures/albums",
+            label: "TikTok",
+        },
+    ],
+};
+Object.assign(Object.assign({}, defaultArgs), { theme: "dark" });
+Object.assign(Object.assign({}, defaultArgs), { justify: "center" });
+
+exports.SocialMedia = components_SocialMedia_SocialMedia;
+exports.defaultArgs = defaultArgs;

package/lib/cjs/components/index.js

@@ -72,6 +72,8 @@ require('../VideoPlayer-d576de50.js');
 require('../utils/hoursMinutesSeconds.js');
 require('screenfull');
 require('@ilo-org/icons-react');
+require('./SocialMedia/SocialMedia.js');
+require('./SocialMedia/index.js');
 require('./Logo/Logo.js');
 require('./List/ListItem.js');
 

package/lib/cjs/index.js

@@ -72,6 +72,8 @@ require('./components/Hero/HeroCard.js');
 require('./VideoPlayer-d576de50.js');
 require('./utils/hoursMinutesSeconds.js');
 require('screenfull');
+require('./components/SocialMedia/SocialMedia.js');
+require('./components/SocialMedia/index.js');
 require('./components/Logo/Logo.js');
 require('./components/List/ListItem.js');
 

package/lib/esm/components/Footer/Footer.js

@@ -1,8 +1,10 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import classNames from 'classnames';
 import LinkList from '../LinkList/LinkList.js';
 import Button from '../Button/Button.js';
+import SocialMedia from '../SocialMedia/SocialMedia.js';
+import '../SocialMedia/index.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
@@ -10,12 +12,11 @@ import '../Link/Link.js';
 import '../Icon/Icon.js';
 import '@ilo-org/icons-react';
 
-const Footer = ({ className, logo, tagline, subtagline, address, linkgroup, socials, subscribe, legal, secondarylinks, anchorlink, }) => {
+const Footer = ({ className, logo, tagline, subtagline, address, linkgroup, socialmedia, subscribe, legal, secondarylinks, anchorlink, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--footer`;
     const footerClasses = classNames(className, baseClass);
-    return (jsxs("footer", Object.assign({ className: footerClasses }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--main` }, { children: [jsxs("div", Object.assign({ className: "site--info" }, { children: [jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }), jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: tagline })), jsx("h4", Object.assign({ className: `${baseClass}--subhead` }, { children: subtagline }))] })), address && (jsx("div", Object.assign({ className: "address" }, { children: address.map((line, i) => (jsx("p", Object.assign({ className: "address--line" }, { children: line }), i))) }))), linkgroup && (jsx("nav", Object.assign({ className: "links" }, { children: jsx(LinkList, { linkgroup: linkgroup, theme: "dark" }) }))), (socials || subscribe) && (jsxs("div", Object.assign({ className: "connect" }, { children: [socials && (jsxs(Fragment, { children: [jsx("h5", Object.assign({ className: "social--headline" }, { children: socials === null || socials === void 0 ? void 0 : socials.headline })), jsx("ul", Object.assign({ className: "social--links" }, { children: socials.links &&
-                                            socials.links.map((link, index) => (jsx("li", Object.assign({ className: "social--links--item" }, { children: jsx("a", Object.assign({ className: `social--links--link ${link.type}`, href: link.url }, { children: link.type })) }), index))) }))] })), subscribe && (jsx(Button, { label: subscribe === null || subscribe === void 0 ? void 0 : subscribe.label, url: subscribe === null || subscribe === void 0 ? void 0 : subscribe.url, type: "primary", size: "large", target: "_blank" }))] })))] })), jsxs("div", Object.assign({ className: `${baseClass}--secondary` }, { children: [jsx("div", Object.assign({ className: "legal" }, { children: legal })), secondarylinks && (jsx("nav", Object.assign({ className: "secondarylinks" }, { children: jsx("ul", Object.assign({ className: "secondarylinks--list" }, { children: secondarylinks.map((link, i) => (jsx("li", Object.assign({ className: "secondarylinks--list--item" }, { children: jsx("a", Object.assign({ href: link.url, className: "secondarylinks--list--link" }, { children: link === null || link === void 0 ? void 0 : link.label }), i) })))) })) }))), jsx("a", Object.assign({ href: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.url, className: "anchorlink" }, { children: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.label }))] }))] })));
+    return (jsxs("footer", Object.assign({ className: footerClasses }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--main` }, { children: [jsxs("div", Object.assign({ className: "site--info" }, { children: [jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }), jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: tagline })), jsx("h4", Object.assign({ className: `${baseClass}--subhead` }, { children: subtagline }))] })), address && (jsx("div", Object.assign({ className: "address" }, { children: address.map((line, i) => (jsx("p", Object.assign({ className: "address--line" }, { children: line }), i))) }))), linkgroup && (jsx("nav", Object.assign({ className: "links" }, { children: jsx(LinkList, { linkgroup: linkgroup, theme: "dark" }) }))), (socialmedia || subscribe) && (jsxs("div", Object.assign({ className: "connect" }, { children: [socialmedia && (jsx("div", Object.assign({ className: "social--links" }, { children: jsx(SocialMedia, Object.assign({}, socialmedia, { theme: "dark" })) }))), subscribe && (jsx(Button, { label: subscribe === null || subscribe === void 0 ? void 0 : subscribe.label, url: subscribe === null || subscribe === void 0 ? void 0 : subscribe.url, type: "primary", size: "large", target: "_blank" }))] })))] })), jsxs("div", Object.assign({ className: `${baseClass}--secondary` }, { children: [jsx("div", Object.assign({ className: "legal" }, { children: legal })), secondarylinks && (jsx("nav", Object.assign({ className: "secondarylinks" }, { children: jsx("ul", Object.assign({ className: "secondarylinks--list" }, { children: secondarylinks.map((link, i) => (jsx("li", Object.assign({ className: "secondarylinks--list--item" }, { children: jsx("a", Object.assign({ href: link.url, className: "secondarylinks--list--link" }, { children: link === null || link === void 0 ? void 0 : link.label }), i) })))) })) }))), jsx("a", Object.assign({ href: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.url, className: "anchorlink" }, { children: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.label }))] }))] })));
 };
 
 export { Footer as default };

package/lib/esm/components/Footer/index.js

@@ -10,3 +10,5 @@ import '../Button/Button.js';
 import '../Link/Link.js';
 import '../Icon/Icon.js';
 import '@ilo-org/icons-react';
+import '../SocialMedia/SocialMedia.js';
+import '../SocialMedia/index.js';

package/lib/esm/components/SocialMedia/SocialMedia.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import 'react';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const SocialMedia = ({ className, theme = "light", justify = "start", headline, icons, }) => {
+    const { prefix } = useGlobalSettings();
+    // Classes to be applied to the outer element
+    const baseClass = `${prefix}--social-media`;
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const justifyClass = `${baseClass}__justify__${justify}`;
+    const classes = classNames(baseClass, themeClass, justifyClass, className);
+    // Classes to be applied to inner elements
+    const headlineClass = `${baseClass}--headline`;
+    const listClass = `${baseClass}--list`;
+    const listItemClass = `${listClass}--item`;
+    const iconClass = `${listItemClass}--icon`;
+    return (jsxs("div", Object.assign({ className: classes }, { children: [headline && jsx("h5", Object.assign({ className: headlineClass }, { children: headline })), jsx("ul", Object.assign({ className: listClass }, { children: icons.map((item) => (jsx("li", Object.assign({ className: listItemClass }, { children: jsx("a", Object.assign({ title: item.label, className: classNames(iconClass, `${iconClass}__${item.icon}`), href: item.url }, { children: item.label })) })))) }))] })));
+};
+
+export { SocialMedia as default };

package/lib/esm/components/SocialMedia/index.js

@@ -0,0 +1,54 @@
+export { default as SocialMedia } from './SocialMedia.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const defaultArgs = {
+    headline: "Follow us on social media",
+    theme: "light",
+    justify: "start",
+    icons: [
+        {
+            icon: "facebook",
+            url: "https://www.facebook.com/ilo.org",
+            label: "Facebook",
+        },
+        {
+            icon: "twitter",
+            url: "https://twitter.com/#!/ilo",
+            label: "Twitter",
+        },
+        {
+            icon: "instagram",
+            url: "https://www.instagram.com/ilo.org/",
+            label: "Instagram",
+        },
+        {
+            icon: "linkedin",
+            url: "https://www.linkedin.com/company/international-labour-organization-ilo",
+            label: "LinkedIn",
+        },
+        {
+            icon: "youtube",
+            url: "https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA",
+            label: "YouTube",
+        },
+        {
+            icon: "tiktok",
+            url: "https://www.tiktok.com/@ilo",
+            label: "TikTok",
+        },
+        {
+            icon: "flickr",
+            url: "https://www.flickr.com/photos/ilopictures/albums",
+            label: "TikTok",
+        },
+    ],
+};
+Object.assign(Object.assign({}, defaultArgs), { theme: "dark" });
+Object.assign(Object.assign({}, defaultArgs), { justify: "center" });
+
+export { defaultArgs };

package/lib/esm/components/index.js

@@ -70,5 +70,7 @@ import '../VideoPlayer-a5fa87ce.js';
 import '../utils/hoursMinutesSeconds.js';
 import 'screenfull';
 import '@ilo-org/icons-react';
+import './SocialMedia/SocialMedia.js';
+import './SocialMedia/index.js';
 import './Logo/Logo.js';
 import './List/ListItem.js';

package/lib/esm/index.js

@@ -70,5 +70,7 @@ import './components/Hero/HeroCard.js';
 import './VideoPlayer-a5fa87ce.js';
 import './utils/hoursMinutesSeconds.js';
 import 'screenfull';
+import './components/SocialMedia/SocialMedia.js';
+import './components/SocialMedia/index.js';
 import './components/Logo/Logo.js';
 import './components/List/ListItem.js';

package/lib/types/react/src/components/Footer/Footer.props.d.ts

@@ -1,6 +1,6 @@
 import { LinkGroupProps } from "../LinkList/LinkList.props";
 import { LinkProps } from "../LinkList/LinkList.props";
-import { SocialTypes } from "../../types";
+import { SocialMediaProps } from "../SocialMedia";
 export interface FooterProps {
     /**
      * Specify an optional className to be added to your Footer.
@@ -29,7 +29,7 @@ export interface FooterProps {
     /**
      * Specify the links to be displayed in this link group
      */
-    socials?: FooterSocialProps;
+    socialmedia?: SocialMediaProps;
     /**
      * Specify the legal statement for the Footer
      */
@@ -47,24 +47,3 @@ export interface FooterProps {
      */
     anchorlink?: LinkProps;
 }
-interface FooterSocialProps {
-    /**
-     * Specify the headline for social links
-     */
-    headline?: Required<string>;
-    /**
-     * Specify the social links
-     */
-    links?: Required<SocialLinkProps>[];
-}
-interface SocialLinkProps {
-    /**
-     * Specify the type for social link
-     */
-    type?: Required<SocialTypes>;
-    /**
-     * Specify the url for social link
-     */
-    url?: Required<string>;
-}
-export {};

package/lib/types/react/src/components/SocialMedia/SocialMedia.args.d.ts

@@ -0,0 +1,4 @@
+import { SocialMediaProps } from "./SocialMedia.props";
+export declare const defaultArgs: SocialMediaProps;
+export declare const darkArgs: SocialMediaProps;
+export declare const centredArgs: SocialMediaProps;

package/lib/types/react/src/components/SocialMedia/SocialMedia.d.ts

@@ -0,0 +1,3 @@
+import { SocialMediaProps } from "./SocialMedia.props";
+declare const SocialMedia: React.FC<SocialMediaProps>;
+export default SocialMedia;

package/lib/types/react/src/components/SocialMedia/SocialMedia.props.d.ts

@@ -0,0 +1,37 @@
+import { SocialTypes } from "../../types";
+export interface SocialMediaIcons {
+    /**
+     * The name of the icon to display
+     */
+    icon: SocialTypes;
+    /**
+     * The url to link to
+     */
+    url: string;
+    /**
+     * The alt text of the link
+     */
+    label: string;
+}
+export interface SocialMediaProps {
+    /**
+     * An optional headline to display above the icons
+     */
+    headline?: string;
+    /**
+     * Specify an optional className to be added to your SocialMedia.
+     */
+    className?: string;
+    /**
+     * Specify the theme of the SocialMedia.
+     */
+    theme?: "light" | "dark";
+    /**
+     * The justification of the icons
+     */
+    justify?: "start" | "center";
+    /**
+     * Specify the icons to display.
+     */
+    icons: SocialMediaIcons[];
+}

package/lib/types/react/src/components/SocialMedia/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SocialMedia } from "./SocialMedia";
+export type { SocialMediaProps } from "./SocialMedia.props";
+export { defaultArgs } from "./SocialMedia.args";

package/lib/types/react/src/types/index.d.ts

@@ -25,7 +25,7 @@ export type NotificationTypes = "error" | "info" | "success" | "warning";
 export type PositionTypes = "top" | "bottom" | "left" | "right";
 export type SizeTypes = "small" | "medium" | "large";
 export type TagTypes = "anchor" | "display" | "button";
-export type SocialTypes = "instagram" | "facebook" | "twitter" | "youtube";
+export type SocialTypes = "facebook" | "twitter" | "instagram" | "linkedin" | "youtube" | "tiktok" | "flickr";
 export type CardColor = "turquoise" | "green" | "yellow" | "blue";
 export type CardSize = "wide" | "standard" | "narrow";
 export type CardCornerType = "cornercut" | "corner";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -74,9 +74,9 @@
     "react-transition-group": "^4.4.1",
     "@ilo-org/brand-assets": "0.1.0",
     "@ilo-org/fonts": "0.1.0",
-    "@ilo-org/icons-react": "0.0.20",
-    "@ilo-org/styles": "0.4.0",
-    "@ilo-org/themes": "0.1.16",
+    "@ilo-org/icons-react": "0.0.21",
+    "@ilo-org/styles": "0.5.0",
+    "@ilo-org/themes": "0.2.0",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {

package/src/components/Footer/Footer.args.ts

@@ -1,5 +1,6 @@
 import { FooterProps } from "./Footer.props";
 import ilo_logo_white from "@ilo-org/brand-assets/logo_en_horizontal_white.svg";
+import { darkArgs as socialMediaArgs } from "../SocialMedia/SocialMedia.args";
 
 const basic: FooterProps = {
   className: "footer",
@@ -42,27 +43,7 @@ const basic: FooterProps = {
       ],
     },
   ],
-  socials: {
-    headline: "Social Links Headline",
-    links: [
-      {
-        type: "instagram",
-        url: "https://www.instagram.com/iloinfo/",
-      },
-      {
-        type: "facebook",
-        url: "https://www.facebook.com/ILO.ORG/",
-      },
-      {
-        type: "twitter",
-        url: "https://twitter.com/ILO/",
-      },
-      {
-        type: "youtube",
-        url: "https://youtube.com/@ILO/featured/",
-      },
-    ],
-  },
+  socialmedia: socialMediaArgs,
   subscribe: {
     label: "Subscribe",
     url: "https://www.ilo.org",

package/src/components/Footer/Footer.props.ts

@@ -1,6 +1,6 @@
 import { LinkGroupProps } from "../LinkList/LinkList.props";
 import { LinkProps } from "../LinkList/LinkList.props";
-import { SocialTypes } from "../../types";
+import { SocialMediaProps } from "../SocialMedia";
 
 export interface FooterProps {
   /**
@@ -36,7 +36,7 @@ export interface FooterProps {
   /**
    * Specify the links to be displayed in this link group
    */
-  socials?: FooterSocialProps;
+  socialmedia?: SocialMediaProps;
 
   /**
    * Specify the legal statement for the Footer
@@ -58,27 +58,3 @@ export interface FooterProps {
    */
   anchorlink?: LinkProps;
 }
-
-interface FooterSocialProps {
-  /**
-   * Specify the headline for social links
-   */
-  headline?: Required<string>;
-
-  /**
-   * Specify the social links
-   */
-  links?: Required<SocialLinkProps>[];
-}
-
-interface SocialLinkProps {
-  /**
-   * Specify the type for social link
-   */
-  type?: Required<SocialTypes>;
-
-  /**
-   * Specify the url for social link
-   */
-  url?: Required<string>;
-}

package/src/components/Footer/Footer.tsx

@@ -4,6 +4,7 @@ import classnames from "classnames";
 import { FooterProps } from "./Footer.props";
 import { LinkList } from "../LinkList";
 import { Button } from "../Button";
+import { SocialMedia } from "../SocialMedia";
 
 const Footer: FC<FooterProps> = ({
   className,
@@ -12,7 +13,7 @@ const Footer: FC<FooterProps> = ({
   subtagline,
   address,
   linkgroup,
-  socials,
+  socialmedia,
   subscribe,
   legal,
   secondarylinks,
@@ -45,25 +46,12 @@ const Footer: FC<FooterProps> = ({
             <LinkList linkgroup={linkgroup} theme="dark"></LinkList>
           </nav>
         )}
-        {(socials || subscribe) && (
+        {(socialmedia || subscribe) && (
           <div className="connect">
-            {socials && (
-              <>
-                <h5 className="social--headline">{socials?.headline}</h5>
-                <ul className="social--links">
-                  {socials.links &&
-                    socials.links.map((link, index) => (
-                      <li className="social--links--item" key={index}>
-                        <a
-                          className={`social--links--link ${link.type}`}
-                          href={link.url}
-                        >
-                          {link.type}
-                        </a>
-                      </li>
-                    ))}
-                </ul>
-              </>
+            {socialmedia && (
+              <div className="social--links">
+                <SocialMedia {...socialmedia} theme="dark" />
+              </div>
             )}
             {subscribe && (
               <Button

package/src/components/SocialMedia/SocialMedia.args.ts

@@ -0,0 +1,54 @@
+import { SocialMediaProps } from "./SocialMedia.props";
+
+export const defaultArgs: SocialMediaProps = {
+  headline: "Follow us on social media",
+  theme: "light",
+  justify: "start",
+  icons: [
+    {
+      icon: "facebook",
+      url: "https://www.facebook.com/ilo.org",
+      label: "Facebook",
+    },
+    {
+      icon: "twitter",
+      url: "https://twitter.com/#!/ilo",
+      label: "Twitter",
+    },
+    {
+      icon: "instagram",
+      url: "https://www.instagram.com/ilo.org/",
+      label: "Instagram",
+    },
+    {
+      icon: "linkedin",
+      url: "https://www.linkedin.com/company/international-labour-organization-ilo",
+      label: "LinkedIn",
+    },
+    {
+      icon: "youtube",
+      url: "https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA",
+      label: "YouTube",
+    },
+    {
+      icon: "tiktok",
+      url: "https://www.tiktok.com/@ilo",
+      label: "TikTok",
+    },
+    {
+      icon: "flickr",
+      url: "https://www.flickr.com/photos/ilopictures/albums",
+      label: "TikTok",
+    },
+  ],
+};
+
+export const darkArgs: SocialMediaProps = {
+  ...defaultArgs,
+  theme: "dark",
+};
+
+export const centredArgs: SocialMediaProps = {
+  ...defaultArgs,
+  justify: "center",
+};

package/src/components/SocialMedia/SocialMedia.props.ts

@@ -0,0 +1,45 @@
+import { SocialTypes } from "../../types";
+
+export interface SocialMediaIcons {
+  /**
+   * The name of the icon to display
+   */
+  icon: SocialTypes;
+
+  /**
+   * The url to link to
+   */
+  url: string;
+
+  /**
+   * The alt text of the link
+   */
+  label: string;
+}
+
+export interface SocialMediaProps {
+  /**
+   * An optional headline to display above the icons
+   */
+  headline?: string;
+
+  /**
+   * Specify an optional className to be added to your SocialMedia.
+   */
+  className?: string;
+
+  /**
+   * Specify the theme of the SocialMedia.
+   */
+  theme?: "light" | "dark";
+
+  /**
+   * The justification of the icons
+   */
+  justify?: "start" | "center";
+
+  /**
+   * Specify the icons to display.
+   */
+  icons: SocialMediaIcons[];
+}

package/src/components/SocialMedia/SocialMedia.tsx

@@ -0,0 +1,46 @@
+import classnames from "classnames";
+import { useGlobalSettings } from "../../hooks";
+import { SocialMediaProps } from "./SocialMedia.props";
+
+const SocialMedia: React.FC<SocialMediaProps> = ({
+  className,
+  theme = "light",
+  justify = "start",
+  headline,
+  icons,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  // Classes to be applied to the outer element
+  const baseClass = `${prefix}--social-media`;
+  const themeClass = `${baseClass}__theme__${theme}`;
+  const justifyClass = `${baseClass}__justify__${justify}`;
+  const classes = classnames(baseClass, themeClass, justifyClass, className);
+
+  // Classes to be applied to inner elements
+  const headlineClass = `${baseClass}--headline`;
+  const listClass = `${baseClass}--list`;
+  const listItemClass = `${listClass}--item`;
+  const iconClass = `${listItemClass}--icon`;
+
+  return (
+    <div className={classes}>
+      {headline && <h5 className={headlineClass}>{headline}</h5>}
+      <ul className={listClass}>
+        {icons.map((item) => (
+          <li className={listItemClass}>
+            <a
+              title={item.label}
+              className={classnames(iconClass, `${iconClass}__${item.icon}`)}
+              href={item.url}
+            >
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default SocialMedia;

package/src/components/SocialMedia/index.ts

@@ -0,0 +1,3 @@
+export { default as SocialMedia } from "./SocialMedia";
+export type { SocialMediaProps } from "./SocialMedia.props";
+export { defaultArgs } from "./SocialMedia.args";

package/src/types/index.ts

@@ -49,7 +49,14 @@ export type NotificationTypes = "error" | "info" | "success" | "warning";
 export type PositionTypes = "top" | "bottom" | "left" | "right";
 export type SizeTypes = "small" | "medium" | "large";
 export type TagTypes = "anchor" | "display" | "button";
-export type SocialTypes = "instagram" | "facebook" | "twitter" | "youtube";
+export type SocialTypes =
+  | "facebook"
+  | "twitter"
+  | "instagram"
+  | "linkedin"
+  | "youtube"
+  | "tiktok"
+  | "flickr";
 export type CardColor = "turquoise" | "green" | "yellow" | "blue";
 export type CardSize = "wide" | "standard" | "narrow";
 export type CardCornerType = "cornercut" | "corner";