All files / packages/design-system-2/.storybook/addons/theme-builder/src/utilities font-options.js

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
const FONT_OPTIONS = [
  {
    label: 'Default',
    value: 'default',
    url: 'system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
  },
  {
    label: 'Roboto',
    value: 'roboto',
    url: 'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap',
  },
  {
    label: 'Open Sans',
    value: 'openSans',
    url: 'https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap',
  },
  {
    label: 'Lato',
    value: 'lato',
    url: 'https://fonts.googleapis.com/css?family=Lato:400,700&display=swap',
  },
  {
    label: 'Montserrat',
    value: 'montserrat',
    url: 'https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap',
  },
  // Add more fonts as needed
];
 
/**
 * Loads a font dynamically based on font family value
 * @param {string} fontFamily - The font family value to load
 * @returns {void}
 */
export const loadFont = (fontFamily) => {
  if (!fontFamily) {
    return;
  }
 
  // Find the selected font from FONT_OPTIONS
  const selectedFont = FONT_OPTIONS.find((font) => font.value === fontFamily);
 
  if (!selectedFont) {
    console.warn(`Font not found: ${fontFamily}`);
    return;
  }
 
  if (selectedFont.url) {
    const linkId = `dynamic-font-link-${fontFamily}`;
 
    // Check if link already exists in DOM
    const existingLink = document.getElementById(linkId);
    if (!existingLink) {
      // Create and inject link tag
      const link = document.createElement('link');
      link.id = linkId;
      link.rel = 'stylesheet';
      link.href = selectedFont.url;
      link.setAttribute('data-font-family', fontFamily);
      document.head.appendChild(link);
    }
  }
};
 
/**
 * Removes all dynamic font links from the document
 * @returns {void}
 */
export const removeAllFonts = () => {
  const dynamicFonts = document.querySelectorAll('[id^="dynamic-font-link-"]');
  dynamicFonts.forEach((link) => {
    link.remove();
  });
};
 
/**
 * Gets the font label for a given font value
 * @param {string} fontValue - The font value to get label for
 * @returns {string} The font label or 'Default' if not found
 */
export const getFontLabel = (fontValue) => {
  const font = FONT_OPTIONS.find((option) => option.value === fontValue);
  return font ? font.label : 'Default';
};
 
export const getFontURL = (fontValue) => {
  const font = FONT_OPTIONS.find((option) => option.value === fontValue);
  return font ? font.url : '';
};
 
export default FONT_OPTIONS;