Add Logo Component

packages/css/src/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./logo/logo";
 @import "./image/image";
 @import "./pagination/pagination";
 @import "./accordion/accordion";

packages/css/src/logo/README.md

@@ -0,0 +1,35 @@
+# Logo
+
+Het logo van de gemeente bestaat uit een beeldmerk (3 Andreaskruisen) en een woordmerk (Gemeente Amsterdam).
+Het logo heeft een vaste kleur, grootte en positie en staat op al onze websites.
+
+## Specificaties
+
+Gebruik altijd het online logo.
+Het Nederlandse logo voor Nederlandstalige websites en anderstalige websites behalve Engels.
+Het Engelstalige logo gebruiken we voor Engelstalige websites.
+
+## Uitzondering
+
+Gebruik het submerklogo als de website eigendom is van 1 van de 4 submerken.
+Zij hebben een aparte status omdat er sprake is van een bijzondere vorm van dienstverlening die niet direct met de gemeente in verband wordt gebracht.
+
+De submerken zijn:
+
+- GGD Amsterdam
+- Stadsarchief
+- Stadsbank van Lening
+- VGA Verzekeringen
+
+## Eisen voor alle logo´s
+
+- Het logo wordt altijd getoond.
+- Het logo is linksboven uitgelijnd in de header.
+- Het logo verwijst naar de homepage.
+- Als de applicatie een formulier, applicatie of tool is zonder homepage, dan linkt het logo naar de pagina op Amsterdam.nl van waar naar het formulier, applicatie of tool wordt verwezen.
+
+De hoogte van het logo is altijd 40 pixels. Dit geldt ook voor de submerklogo´s.
+
+## Download
+
+- [Logoset voor website en apps (ZIP, 10 kB)](https://assets.amsterdam.nl/publish/pages/1007650/logoset_voor_websites_en_apps.zip)

packages/css/src/logo/logo.scss

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-logo {
+  display: inline-block;
+
+  img {
+    height: 40px;
+    width: 115px;
+  }
+}

packages/react/package.json

@@ -32,6 +32,7 @@
     "dist/"
   ],
   "dependencies": {
+    "@amsterdam/design-system-assets": "workspace:*",
     "@amsterdam/design-system-react-icons": "workspace:*",
     "@utrecht/component-library-react": "1.0.1",
     "clsx": "2.0.0",
@@ -45,6 +46,7 @@
     "@babel/runtime": "7.23.2",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
+    "@rollup/plugin-image": "3.0.3",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/pluginutils": "5.0.5",
     "@testing-library/dom": "9.3.3",

packages/react/rollup.config.mjs

@@ -7,6 +7,7 @@ import nodeExternal from 'rollup-plugin-node-externals'
 import nodePolyfills from 'rollup-plugin-node-polyfills'
 import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import typescript from 'rollup-plugin-typescript2'
+import image from '@rollup/plugin-image'
 
 const packageJson = JSON.parse(readFileSync('./package.json', 'utf8'))
 
@@ -56,6 +57,7 @@ export default [
         plugins: ['@babel/plugin-transform-runtime'],
       }),
       filesize(),
+      image(),
     ],
   },
 ]

packages/react/src/Logo/Logo.test.tsx

@@ -0,0 +1,43 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { Logo } from './Logo'
+import '@testing-library/jest-dom'
+
+describe('Logo', () => {
+  it('renders', () => {
+    const { container } = render(<Logo />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<Logo />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-logo')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<Logo className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('extra')
+
+    expect(component).toHaveClass('amsterdam-logo')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLElement>()
+
+    const { container } = render(<Logo ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})

packages/react/src/Logo/Logo.tsx

@@ -0,0 +1,41 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import LogoAmsterdam from '@amsterdam/design-system-assets/logo/amsterdam.svg'
+import LogoGGD from '@amsterdam/design-system-assets/logo/ggd-amsterdam.svg'
+import LogoStadsarchief from '@amsterdam/design-system-assets/logo/stadsarchief.svg'
+import LogoStadsbankLening from '@amsterdam/design-system-assets/logo/stadsbank-lening.svg'
+import LogoVGA from '@amsterdam/design-system-assets/logo/vga-verzekeringen.svg'
+import clsx from 'clsx'
+import { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
+
+export interface LogoProps extends HTMLAttributes<HTMLElement> {
+  variant?: 'amsterdam' | 'ggd-amsterdam' | 'stadsarchief' | 'stadsbank-lening' | 'vga-verzekeringen'
+}
+
+function getLogoVariant(variant: LogoProps['variant']) {
+  switch (variant) {
+    case 'amsterdam':
+      return { logo: LogoAmsterdam, alt: 'Gemeente Amsterdam' }
+    case 'ggd-amsterdam':
+      return { logo: LogoGGD, alt: 'GGD Amsterdam' }
+    case 'stadsarchief':
+      return { logo: LogoStadsarchief, alt: 'Stadsarchief Amsterdam' }
+    case 'stadsbank-lening':
+      return { logo: LogoStadsbankLening, alt: 'Stadsbank van Lening' }
+    case 'vga-verzekeringen':
+      return { logo: LogoVGA, alt: 'VGA Verzekeringen' }
+    default:
+      return { logo: LogoAmsterdam, alt: 'Gemeente Amsterdam' }
+  }
+}
+
+export const Logo = forwardRef(({ variant, className, ...restProps }: LogoProps, ref: ForwardedRef<HTMLElement>) => (
+  <span {...restProps} ref={ref} className={clsx('amsterdam-logo', className)}>
+    <img src={getLogoVariant(variant).logo} alt={`Logo ${getLogoVariant(variant).alt}`} />
+  </span>
+))
+
+Logo.displayName = 'Logo'

packages/react/src/Logo/README.md

@@ -0,0 +1,3 @@
+# React Logo component
+
+[Logo documentation](../../../css/src/logo/README.md)

packages/react/src/Logo/index.ts

@@ -0,0 +1,2 @@
+export { Logo } from './Logo'
+export type { LogoProps } from './Logo'

packages/react/src/Logo/types/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any
+  export default content
+}

packages/react/src/index.ts

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+export * from './Logo'
 export * from './Image'
 export * from './Pagination'
 export * from './Screen'

packages/react/tsconfig.json

@@ -19,7 +19,8 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "es2020"
+    "target": "es2020",
+    "typeRoots": ["node_modules/@types", "src/**/*.d.ts"]
   },
   "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules"]