@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
58 lines (57 loc) • 2.01 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { AmsterdamEnglishLogo, AmsterdamLogo, GgdAmsterdamInspectieLogo, GgdAmsterdamLogo, MuseumWeespLogo, StadsarchiefLogo, StadsbankVanLeningLogo, VgaVerzekeringenLogo, } from './brands';
export const logoBrands = [
'amsterdam',
'amsterdam-english',
'ggd-amsterdam',
'ggd-amsterdam-inspectie',
'museum-weesp',
'stadsarchief',
'stadsbank-van-lening',
'vga-verzekeringen',
];
const logoConfig = {
amsterdam: {
label: 'Gemeente Amsterdam logo',
svg: AmsterdamLogo,
},
'amsterdam-english': {
label: 'City of Amsterdam logo',
svg: AmsterdamEnglishLogo,
},
'ggd-amsterdam': {
label: 'GGD Amsterdam logo',
svg: GgdAmsterdamLogo,
},
'ggd-amsterdam-inspectie': {
label: 'GGD Amsterdam Inspectie logo',
svg: GgdAmsterdamInspectieLogo,
},
'museum-weesp': {
label: 'Gemeente Amsterdam Museum Weesp logo',
svg: MuseumWeespLogo,
},
stadsarchief: {
label: 'Gemeente Amsterdam Stadsarchief logo',
svg: StadsarchiefLogo,
},
'stadsbank-van-lening': {
label: 'Gemeente Amsterdam Stadsbank van Lening logo',
svg: StadsbankVanLeningLogo,
},
'vga-verzekeringen': {
label: 'Gemeente Amsterdam VGA Verzekeringen logo',
svg: VgaVerzekeringenLogo,
},
};
/**
* @see {@link https://designsystem.amsterdam/?path=/docs/components-media-logo--docs Logo docs at Amsterdam Design System}
*/
export const Logo = forwardRef(({ 'aria-label': ariaLabel, brand = 'amsterdam', className, ...restProps }, ref) => {
const config = typeof brand === 'string' ? logoConfig[brand] : brand;
const { label, svg: LogoComponent } = config;
return (_jsx(LogoComponent, { ...restProps, "aria-label": ariaLabel || label, className: clsx('ams-logo', className), ref: ref }));
});
Logo.displayName = 'Logo';