design-system-toolkit/packages/site/views/_data/materialIcons.js at b27c2dc44594cc777af7c047cce869c5df6a7494 · ourfuturehealth/design-system-toolkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
const path = require("node:path");

const manifestPath = path.join(
  __dirname,
  "../../../toolkit/assets/icons/manifest.json",
);
const manifest = require(manifestPath);

const categoryOrder = [
  "DataValidation",
  "Action",
  "Arrows",
  "Graphical",
  "Stepper",
  "Socials",
];

// Custom sort: logical groupings for better usability
const icons = [...manifest.icons];

// Define logical orderings for each category
const categoryOrders = {
  DataValidation: [
    // Positive/Success
    "Done",
    "CheckCircle",
    "CheckCircleOutline",
    // Negative/Cancel
    "Close",
    "Cancel",
    "CancelOutlined",
    // Add/Remove
    "AddCircle",
    "RemoveCircle",
  ],
  Action: [
    "Search",
    // Account
    "AccountCircle",
    "AccountCircleOutlined",
    // Favorites
    "Favorite",
    "FavoriteBorderOutlined",
    // Calendar
    "CalendarToday",
    "CalendarTodayOutlined",
    // Other actions
    "FileDownloadOutlined",
    "Launch",
  ],
  Arrows: [
    // Horizontal navigation
    "ChevronRight",
    "ChevronLeft",
    "East",
    "West",
    // Vertical expand/collapse
    "ExpandMore",
    "ExpandLess",
    "UnfoldMore",
    "UnfoldLess",
    // Special arrows
    "ArrowCircleRight",
    "ArrowCircleRightColour",
  ],
  Graphical: [
    // Location/Places
    "FamilyHome",
    "WorkOutlined",
    "HospitalOutlined",
    "FmdGoodOutlined",
    // Health/Medical
    "HealthCrossOutlined",
    "HealthAndSafetyOutlined",
    "TestTubeOutlined",
    // Lists
    "ListAltOutlined",
    "ListAltCheckedOutlined",
    // Time
    "AccessTime",
    "WatchLater",
    // Info
    "InfoOutlined",
  ],
  Socials: [
    // Group each platform with its hover state
    "LinkedIn",
    "LinkedInHover",
    "X",
    "XHover",
    "Facebook",
    "FacebookHover",
    "Youtube",
    "YoutubeHover",
    "Instagram",
    "InstagramHover",
    "Tiktok",
    "TiktokHover",
  ],
};

const iconsByCategory = categoryOrder
  .map((category) => {
    const categoryIcons = icons.filter((icon) => icon.category === category);

    // Stepper: preserve manifest order (numerical LooksZero-LooksNine)
    if (category === "Stepper") {
      // No sorting needed
    } else if (categoryOrders[category]) {
      // Use custom logical order for categories with defined orderings
      categoryIcons.sort((a, b) => {
        const indexA = categoryOrders[category].indexOf(a.name);
        const indexB = categoryOrders[category].indexOf(b.name);
        return indexA - indexB;
      });
    } else {
      // Fallback to alphabetical for any unconfigured categories
      categoryIcons.sort((a, b) => a.name.localeCompare(b.name));
    }

    return {
      category,
      icons: categoryIcons,
    };
  })
  .filter((group) => group.icons.length > 0);

module.exports = {
  total: icons.length,
  spritePath: "/assets/icons/icon-sprite.svg",
  sizeOptions: manifest.sizeOptions,
  iconsByCategory,
};