Skip to content

Commit 758dcc8

Browse files
justintempsjustintemps
committed
feat(react): socialmedia supports bluesky, weibo and wechat
1 parent 47f56d7 commit 758dcc8

File tree

8 files changed

+190
-100
lines changed

8 files changed

+190
-100
lines changed

‎.changeset/quiet-otters-reply.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ilo-org/react": patch
3+
---
4+
5+
**SocialMedia:** Add icons for Bluesky, Weibo and WeChat

‎packages/react/src/components/SocialMedia/SocialMedia.args.ts

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { SocialMediaProps } from "./SocialMedia.props";
2+
3+
export const socialMediaArgs: SocialMediaProps = {
4+
headline: "Follow us on social media",
5+
theme: "light",
6+
justify: "start",
7+
iconSize: "normal",
8+
icons: [
9+
{
10+
icon: "bluesky",
11+
label: "Bluesky",
12+
url: "https://bsky.app/profile/ilo.org",
13+
},
14+
{
15+
icon: "facebook",
16+
url: "https://www.facebook.com/ilo.org",
17+
label: "Facebook",
18+
},
19+
{
20+
icon: "x",
21+
url: "https://x.com/ilo",
22+
label: "x",
23+
},
24+
{
25+
icon: "instagram",
26+
url: "https://www.instagram.com/ilo.org/",
27+
label: "Instagram",
28+
},
29+
{
30+
icon: "linkedin",
31+
url: "https://www.linkedin.com/company/international-labour-organization-ilo",
32+
label: "LinkedIn",
33+
},
34+
{
35+
icon: "youtube",
36+
url: "https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA",
37+
label: "YouTube",
38+
},
39+
{
40+
icon: "tiktok",
41+
url: "https://www.tiktok.com/@ilo",
42+
label: "TikTok",
43+
},
44+
{
45+
icon: "flickr",
46+
url: "https://www.flickr.com/photos/ilopictures/albums",
47+
label: "flickr",
48+
},
49+
{
50+
icon: "wechat",
51+
label: "Wechat",
52+
url: "https://wechat.com",
53+
},
54+
{
55+
icon: "weibo",
56+
label: "Weibo",
57+
url: "https://weibo.com",
58+
},
59+
],
60+
};

‎packages/react/src/components/SocialMedia/SocialMedia.props.ts

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { SocialTypes } from "../../types";
2+
3+
export interface SocialMediaIcons {
4+
/**
5+
* The name of the icon to display
6+
*/
7+
icon: SocialTypes;
8+
9+
/**
10+
* The url to link to
11+
*/
12+
url: string;
13+
14+
/**
15+
* The alt text of the link
16+
*/
17+
label: string;
18+
19+
/**
20+
* An optional className to add to the icon
21+
*/
22+
className?: string;
23+
}
24+
25+
export interface SocialMediaProps {
26+
/**
27+
* An optional headline to display above the icons
28+
*/
29+
headline?: string;
30+
31+
/**
32+
* Specify an optional className to be added to your SocialMedia.
33+
*/
34+
className?: string;
35+
36+
/**
37+
* Specify the theme of the SocialMedia.
38+
*/
39+
theme?: "light" | "dark";
40+
41+
/**
42+
* The justification of the icons
43+
*/
44+
justify?: "start" | "center";
45+
46+
/**
47+
* Specify the icons to display.
48+
*/
49+
icons: SocialMediaIcons[];
50+
51+
/**
52+
* The size of the social media icons
53+
*/
54+
iconSize: "normal" | "large";
55+
}

‎packages/react/src/components/SocialMedia/SocialMedia.tsx

+2-54
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,8 @@
11
import classNames from "classnames";
22
import { forwardRef } from "react";
3-
4-
import { SocialTypes } from "../../types";
3+
import { SocialMediaProps } from "./SocialMedia.props";
54
import { useGlobalSettings } from "../../hooks";
65

7-
export type SocialMediaIcons = {
8-
/**
9-
* The name of the icon to display
10-
*/
11-
icon: SocialTypes;
12-
13-
/**
14-
* The url to link to
15-
*/
16-
url: string;
17-
18-
/**
19-
* The alt text of the link
20-
*/
21-
label: string;
22-
23-
className?: string;
24-
};
25-
26-
export type SocialMediaProps = {
27-
/**
28-
* An optional headline to display above the icons
29-
*/
30-
headline?: string;
31-
32-
/**
33-
* Specify an optional className to be added to your SocialMedia.
34-
*/
35-
className?: string;
36-
37-
/**
38-
* Specify the theme of the SocialMedia.
39-
*/
40-
theme?: "light" | "dark";
41-
42-
/**
43-
* The justification of the icons
44-
*/
45-
justify?: "start" | "center";
46-
47-
/**
48-
* Specify the icons to display.
49-
*/
50-
icons: SocialMediaIcons[];
51-
52-
/**
53-
* The size of the social media icons
54-
*/
55-
iconSize: "normal" | "large";
56-
};
57-
586
const SocialMedia = forwardRef<HTMLDivElement, SocialMediaProps>(
597
(
608
{
@@ -111,4 +59,4 @@ const SocialMedia = forwardRef<HTMLDivElement, SocialMediaProps>(
11159
}
11260
);
11361

114-
export { SocialMedia };
62+
export default SocialMedia;

‎packages/react/src/components/SocialMedia/index.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
export * from "./SocialMedia";
1+
export { default as SocialMedia } from "./SocialMedia";
2+
export type { SocialMediaProps, SocialMediaIcons } from "./SocialMedia.props";
3+
export { socialMediaArgs } from "./SocialMedia.args";

‎packages/react/src/stories/SocialMedia/SocialMedia.stories.tsx

+6-44
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { Meta, StoryObj } from "@storybook/react";
22

3-
import { SocialMedia, SocialMediaProps } from "../../components/SocialMedia";
3+
import {
4+
SocialMedia,
5+
SocialMediaProps,
6+
socialMediaArgs,
7+
} from "../../components/SocialMedia";
48

59
const meta: Meta<typeof SocialMedia> = {
610
title: "Components/Navigation/SocialMedia",
@@ -17,49 +21,7 @@ const meta: Meta<typeof SocialMedia> = {
1721
};
1822

1923
const Default: StoryObj<SocialMediaProps> = {
20-
args: {
21-
headline: "Follow us on social media",
22-
theme: "light",
23-
justify: "start",
24-
iconSize: "normal",
25-
icons: [
26-
{
27-
icon: "facebook",
28-
url: "https://www.facebook.com/ilo.org",
29-
label: "Facebook",
30-
},
31-
{
32-
icon: "x",
33-
url: "https://x.com/ilo",
34-
label: "x",
35-
},
36-
{
37-
icon: "instagram",
38-
url: "https://www.instagram.com/ilo.org/",
39-
label: "Instagram",
40-
},
41-
{
42-
icon: "linkedin",
43-
url: "https://www.linkedin.com/company/international-labour-organization-ilo",
44-
label: "LinkedIn",
45-
},
46-
{
47-
icon: "youtube",
48-
url: "https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA",
49-
label: "YouTube",
50-
},
51-
{
52-
icon: "tiktok",
53-
url: "https://www.tiktok.com/@ilo",
54-
label: "TikTok",
55-
},
56-
{
57-
icon: "flickr",
58-
url: "https://www.flickr.com/photos/ilopictures/albums",
59-
label: "TikTok",
60-
},
61-
],
62-
},
24+
args: socialMediaArgs,
6325
};
6426

6527
export default meta;

‎packages/react/src/types/index.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,10 @@ export type SocialTypes =
4949
| "linkedin"
5050
| "youtube"
5151
| "tiktok"
52-
| "flickr";
52+
| "flickr"
53+
| "wechat"
54+
| "weibo"
55+
| "bluesky";
5356
export type CardColor = "turquoise" | "green" | "yellow" | "blue";
5457
export type CardSize = "wide" | "standard" | "narrow" | "fluid";
5558
export type CardCornerType = boolean;

‎packages/react/tests/SocialMedia.test.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { render, screen } from "@testing-library/react";
2+
import { describe, it, expect } from "vitest";
3+
import {
4+
SocialMedia,
5+
socialMediaArgs,
6+
SocialMediaProps,
7+
} from "../src/components/SocialMedia";
8+
9+
describe("SocialMedia Component", () => {
10+
it("renders social media icons", () => {
11+
render(<SocialMedia {...socialMediaArgs} />);
12+
expect(screen.getByRole("link", { name: "Bluesky" })).toBeInTheDocument();
13+
expect(screen.getByText("x")).toBeInTheDocument();
14+
});
15+
16+
it("renders with a headline", () => {
17+
render(<SocialMedia {...socialMediaArgs} />);
18+
expect(screen.getByText("Follow us on social media")).toBeInTheDocument();
19+
});
20+
21+
it("applies the correct theme class", () => {
22+
render(<SocialMedia {...socialMediaArgs} />);
23+
const container = screen.getByRole("list").parentElement;
24+
expect(container).toHaveClass("ilo--social-media__theme__light");
25+
});
26+
27+
it("applies the correct justification class", () => {
28+
render(<SocialMedia {...socialMediaArgs} />);
29+
const container = screen.getByRole("list").parentElement;
30+
expect(container).toHaveClass("ilo--social-media__justify__start");
31+
});
32+
33+
it("applies the correct icon size class", () => {
34+
render(<SocialMedia {...socialMediaArgs} />);
35+
const list = screen.getByRole("list");
36+
expect(list).toHaveClass("ilo--social-media--list__size__normal");
37+
});
38+
39+
it("applies custom class names to icons", () => {
40+
const customIcons: SocialMediaProps = {
41+
iconSize: "normal",
42+
icons: [
43+
{
44+
icon: "facebook",
45+
url: "https://facebook.com",
46+
label: "Facebook",
47+
className: "custom-class",
48+
},
49+
],
50+
};
51+
render(<SocialMedia {...customIcons} />);
52+
const iconItem = screen.getByText("Facebook").parentElement;
53+
expect(iconItem).toHaveClass("custom-class");
54+
});
55+
});

0 commit comments

Comments
 (0)