City-of-Helsinki · timwessman · Dec 18, 2024 · Dec 2, 2024 · Dec 2, 2024 · Dec 2, 2024
diff --git a/site/gatsby-node.js b/site/gatsby-node.js
@@ -39,20 +39,17 @@ exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
         crypto: require.resolve('crypto-browserify'),
       },
     },
-    /*
+    cache: false,
     optimization: {
       splitChunks: {
         chunks: 'initial',
         minChunks: 2,
-        minSize: 10000000,
-        maxSize: 0,
         cacheGroups: {
           default: false,
           vendors: false,
         },
       },
     },
-    */
   });
 };
 
@@ -100,7 +97,7 @@ exports.createPages = async ({ actions, graphql }) => {
       const pageTemplate = require.resolve('./src/components/ContentLayoutWrapper.js');
       const contentPath = './src/docs/' + node.parent.relativePath.replace('site/src/docs/', '');
 
-      console.log('createPage() ' + gitRemote + ' ' + contentPath);
+      console.log('createPage() ' + (gitRemote ? gitRemote : 'latest') + ' ' + contentPath);
 
       const pageContent = gitRemote
         ? require.resolve(`./.cache/gatsby-source-git/docs-${gitRemote}/${node.parent.relativePath}`)

diff --git a/site/package.json b/site/package.json
@@ -78,7 +78,7 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "yarn lint && gatsby build",
+    "build": "yarn lint && NODE_OPTIONS='--max_old_space_size=8192' gatsby build",
     "develop": "gatsby develop -o",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "gatsby develop -o",

diff --git a/site/src/components/AnchorLink.js b/site/src/components/AnchorLink.js
@@ -18,9 +18,9 @@ export const AnchorLink = ({ anchor, children, path }) => {
 };
 
 AnchorLink.propTypes = {
-  children: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
   href: PropTypes.string,
-  path: PropTypes.string.isRequired,
+  path: PropTypes.string,
 };
 
 export default AnchorLink;
diff --git a/site/src/components/layout.js b/site/src/components/layout.js
@@ -349,7 +349,7 @@ const Layout = ({ location, children, pageContext }) => {
                 defaultOpenMainLevels={[...Array(uiSubMenuLinks.length).keys()]}
                 id="side-navigation"
                 toggleButtonLabel="Navigate to page"
-                ariaLabel={`${currentMenuItem.name}`}
+                aria-label={`${currentMenuItem.name}`}
               >
                 {uiSubMenuLinks.map(({ name, link, prefixedLink, uiId, withDivider, subLevels }) => {
                   const hasSubLevels = subLevels.length > 0;

diff --git a/site/src/docs/components/accordion/code.mdx b/site/src/docs/components/accordion/code.mdx
@@ -131,7 +131,7 @@ import { Accordion, Card, IconAngleDown, IconAngleUp, Button, Select, useAccordi
       </Button>
       <Card border aria-label="Advanced filters" style={{ marginTop: 'var(--spacing-m)' }} {...contentProps}>
         <Select
-          multiselect
+          multiSelect
           label="Filter by event category"
           placeholder="No selected categories"
           options={[{ label: 'Culture & arts' }, { label: 'Sports' }, { label: 'Museums' }, { label: 'Music' }]}
@@ -140,7 +140,7 @@ import { Accordion, Card, IconAngleDown, IconAngleUp, Button, Select, useAccordi
           style={{ maxWidth: '360px' }}
         />
         <Select
-          multiselect
+          multiSelect
           label="Filter by event location"
           placeholder="No selected locations"
           options={[

diff --git a/site/src/docs/components/accordion/index.mdx b/site/src/docs/components/accordion/index.mdx
@@ -119,7 +119,7 @@ export const AccordionExample = () => {
       </Button>
       <Card border aria-label="Advanced filters" style={{ marginTop: 'var(--spacing-m)' }} {...contentProps}>
         <Select
-          multiselect
+          multiSelect
           label="Filter by event category"
           placeholder="No selected categories"
           options={[{ label: 'Culture & arts' }, { label: 'Sports' }, { label: 'Museums' }, { label: 'Music' }]}
@@ -128,7 +128,7 @@ export const AccordionExample = () => {
           style={{ maxWidth: '360px' }}
         />
         <Select
-          multiselect
+          multiSelect
           label="Filter by event location"
           placeholder="No selected locations"
           options={[

diff --git a/site/src/docs/components/accordion/tabs.mdx b/site/src/docs/components/accordion/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Accordion
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/breadcrumb/scss.mdx b/site/src/docs/components/breadcrumb/scss.mdx
@@ -18,7 +18,7 @@ Styles of the `Breadcrumb` are exported as SCSS mixins and are reusable anywhere
 
 | Mixin         | Description                                           | Arguments                                                                   |
 | ------------- | ----------------------------------------------------- | --------------------------------------------------------------------------- |
-| `breadcrumb`  | The root mixin to output all or only selected styles. | See <AnchorLink anchor="parameters-of-the-root-mixin">Table 2</AnchorLink>. |
+| `breadcrumb`  | The root mixin to output all or only selected styles. | See <AnchorLink anchor="parameters-of-the-breadcrumb-mixin">Table 2</AnchorLink>. |
 | `base`        | Outputs the base styles.                              | -                                                                           |
 | `active`      | Outputs the styles of the active variation.           | -                                                                           |
 | `mobile`      | Outputs the styles of the mobile variation.           | -                                                                           |

diff --git a/site/src/docs/components/breadcrumb/tabs.mdx b/site/src/docs/components/breadcrumb/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Breadcrumb
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/button/scss.mdx b/site/src/docs/components/button/scss.mdx
@@ -18,7 +18,7 @@ Styles of the `Button` are exported as SCSS mixins and are reusable anywhere.
 
 | Mixin                             | Description                                           | Arguments                                                                   |
 | --------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------- |
-| `button`                          | The root mixin to output all or only selected styles. | See <AnchorLink anchor="parameters-of-the-root-mixin">Table 2</AnchorLink>. |
+| `button`                          | The root mixin to output all or only selected styles. | See <AnchorLink anchor="parameters-of-the-button-mixin">Table 2</AnchorLink>. |
 | `base`                            | Outputs the base styles.                              | -                                                                           |
 | `icon`                            | Outputs the styles of the icon element.               | -                                                                           |
 | `small`                           | Outputs the styles of the small variation.            | -                                                                           |

diff --git a/site/src/docs/components/button/tabs.mdx b/site/src/docs/components/button/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Button
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/card/tabs.mdx b/site/src/docs/components/card/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Card
 
-<div class="status-label-description">
+<div className="status-label-description">
 <StatusLabel type="info">Stable</StatusLabel>
 <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
 <StatusLabelTooltip/>

diff --git a/site/src/docs/components/checkbox/scss.mdx b/site/src/docs/components/checkbox/scss.mdx
@@ -18,7 +18,7 @@ Styles of the `Checkbox` are exported as SCSS mixins and are reusable anywhere.
 
 | Mixin               | Description                                                 | Arguments                                                                   |
 | ------------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------- |
-| `checkbox`          | The root mixin to output all or only selected styles.       | See <AnchorLink anchor="parameters-of-the-root-mixin">Table 2</AnchorLink>. |
+| `checkbox`          | The root mixin to output all or only selected styles.       | See <AnchorLink anchor="parameters-of-the-checkbox-mixin">Table 2</AnchorLink>. |
 | `base`              | Outputs the base styles.                                    | -                                                                           |
 | `input`             | Outputs the styles of the input element.                    | -                                                                           |
 | `inputCustom`       | Outputs the styles the custom input element.                | -                                                                           |

diff --git a/site/src/docs/components/checkbox/tabs.mdx b/site/src/docs/components/checkbox/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Checkbox
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/cookie-consent/tabs.mdx b/site/src/docs/components/cookie-consent/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # CookieConsent
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="error">Draft</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>
     Accessible

diff --git a/site/src/docs/components/date-input/tabs.mdx b/site/src/docs/components/date-input/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # DateInput
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/dialog/tabs.mdx b/site/src/docs/components/dialog/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Dialog
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/error-summary/tabs.mdx b/site/src/docs/components/error-summary/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # ErrorSummary
 
-<div class="status-label-description">
+<div className="status-label-description">
 <StatusLabel type="info">Stable</StatusLabel>
 <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
 <StatusLabelTooltip/>

diff --git a/site/src/docs/components/fieldset/tabs.mdx b/site/src/docs/components/fieldset/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Fieldset
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/file-input/index.mdx b/site/src/docs/components/file-input/index.mdx
@@ -108,9 +108,8 @@ export const FileInputDefaultValue = () => {
     ]);
     console.log('Selected files: ', files);
     return <FileInput multiple id="file-input-default-value" language="en" onChange={setFiles} defaultValue={files} />;
-  } catch (e) {
-    console.error(e);
-  }
+  } catch { } // intended empty catch. SSR build don't have window and it always throw this error.
+
   return null;
 };
 

diff --git a/site/src/docs/components/file-input/tabs.mdx b/site/src/docs/components/file-input/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # FileInput
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/icon/tabs.mdx b/site/src/docs/components/icon/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Icon
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/koros/tabs.mdx b/site/src/docs/components/koros/tabs.mdx
@@ -10,7 +10,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Koros
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/link/index.mdx b/site/src/docs/components/link/index.mdx
@@ -40,17 +40,19 @@ These links are the default link variant. Inline links are used within a sentenc
 
 The underlining helps differentiate them from the text they are placed next to and makes it clear users can interact with them. Inline links should not be used on their own.
 
-<p style={{ fontSize: '14px' }}>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-  <Link
-    href="https://github.com/City-of-Helsinki/helsinki-design-system"
-    external
-    openInExternalDomainAriaLabel="Opens a different website"
-  >HDS Github</Link>
-  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-</p>
+<PlaygroundPreview>
+  <div style={{ fontSize: '14px' }}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    <Link
+      href="https://github.com/City-of-Helsinki/helsinki-design-system"
+      external
+      openInExternalDomainAriaLabel="Opens a different website"
+    >HDS Github</Link>
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </div>
+</PlaygroundPreview>
 
 ---
 

diff --git a/site/src/docs/components/link/tabs.mdx b/site/src/docs/components/link/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Link
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/linkbox/tabs.mdx b/site/src/docs/components/linkbox/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Linkbox
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="alert">Beta</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/loading-spinner/tabs.mdx b/site/src/docs/components/loading-spinner/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # LoadingSpinner
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/notification/scss.mdx b/site/src/docs/components/notification/scss.mdx
@@ -18,7 +18,7 @@ Styles of the `Notification` are exported as SCSS mixins and are reusable anywhe
 
 | Mixin                             | Description                                           | Arguments                                                                   |
 | ----------------- | ----------------------------------------------------- | --------------------------------------------------------------------------- |
-| `notification`    | The root mixin to output all or only selected styles. | See <AnchorLink anchor="parameters-of-the-root-mixin">Table 2</AnchorLink>. |
+| `notification`    | The root mixin to output all or only selected styles. | See <AnchorLink anchor="parameters-of-the-notification-mixin">Table 2</AnchorLink>. |
 | `base`            | Outputs the base styles.                              | -                                                                           |
 | `small`           | Outputs the styles of the small variation.            | -                                                                           |
 | `large`           | Outputs the styles of the large variation.            | -                                                                           |

diff --git a/site/src/docs/components/number-input/tabs.mdx b/site/src/docs/components/number-input/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # NumberInput
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/pagination/tabs.mdx b/site/src/docs/components/pagination/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # Pagination
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/password-input/tabs.mdx b/site/src/docs/components/password-input/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # PasswordInput
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/phone-input/tabs.mdx b/site/src/docs/components/phone-input/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # PhoneInput
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/radio-button/tabs.mdx b/site/src/docs/components/radio-button/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # RadioButton
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/search-input/tabs.mdx b/site/src/docs/components/search-input/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # SearchInput
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>

diff --git a/site/src/docs/components/select/tabs.mdx b/site/src/docs/components/select/tabs.mdx
@@ -12,7 +12,7 @@ import Notification from '../../../components/Notification';
 
 # Select
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Draft</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>
     Accessible

diff --git a/site/src/docs/components/selection-group/tabs.mdx b/site/src/docs/components/selection-group/tabs.mdx
@@ -11,7 +11,7 @@ import StatusLabel from '../../../components/StatusLabel';
 
 # SelectionGroup
 
-<div class="status-label-description">
+<div className="status-label-description">
   <StatusLabel type="info">Stable</StatusLabel>
   <StatusLabel type="success" style={{ marginLeft: 'var(--spacing-xs)' }}>Accessible</StatusLabel>
   <StatusLabelTooltip/>