Feature/logo component

packages/components-css/logo/README.md

@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# Frameless Logo component

packages/components-css/logo/index.scss

@@ -0,0 +1,68 @@
+// LOGO (XL) STYLING 
+.frameless-logo__wrapper {
+  align-items: center;
+  container: logowrapper / inline-size;
+  display: flex;
+  flex-basis: min-content;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.frameless-logo__text {
+  display: inline-block;
+  font-family: var(--frameless-logo-text-font-family);
+  font-size: var(--frameless-logo-text-font-size);
+}
+
+.utrecht-logo {
+  transform: scale(0.75);
+}
+
+// RESPONSIVENESS
+
+// LOGO SMALL (60px - 185Ppx) | Alleen kleine SVG 
+@container logowrapper (min-width: 60px) and (max-width: 185px) {
+  .frameless-logo__text {
+    display: none;
+  }
+
+  .utrecht-logo {
+    transform: scale(0.55);
+  }
+}
+
+// LOGO MEDIUM (151px - 250px) | Kleine Text en SVG (onder elkaar)
+
+// @Media voor flex column
+@media (186px <= width <= 337px) {
+  .frameless-logo__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+}
+
+// @Container voor Text + Logo klein
+@container logowrapper (min-width: 186px) and (max-width: 300px) {
+  .utrecht-logo {
+    transform: scale(0.55);
+  }
+
+  .frameless-logo__text {
+    font-size: var(--frameless-logo-text-small-font-size);
+    margin-block: 0;
+    margin-block-end: 0.5em;
+    margin-inline: 0;
+  }
+}
+
+// LOGO LARGE (251px - 299px) | Kleine Text en SVG (naast elkaar)
+@container logowrapper (min-width: 301px) and (max-width: 374px) {
+  .utrecht-logo {
+    transform: scale(0.55);
+  }
+
+  .frameless-logo__text {
+    font-size: var(--frameless-logo-text-small-font-size);
+  }
+}

packages/components-react/src/Logo/LogoImage.tsx

@@ -0,0 +1,14 @@
+export const LogoImage = () => (
+  <svg
+    className="frameless-logo-image__svg"
+    viewBox="79 67 40 60"
+    version="1.1"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="100"
+  >
+    <path d="m 107.20539,110.69974 c -0.76533,-0.68494 -0.84525,-1.78995 -1.07354,-2.71135 -0.17964,-0.72505 -0.19374,-1.45395 -0.22259,-2.17434 -0.0292,-0.72825 0.0429,-1.44084 0.0504,-2.16371 0.005,-0.44342 -0.003,-1.33305 -0.003,-1.33305 l 0.0436,-1.48897 0.0852,-2.222229 c 0.0216,-0.564095 -0.2536,-3.609861 -0.21965,-3.888646 l -3.26528,-3.564533 0.79447,-1.359737 0.67829,-1.233227 0.76526,-1.146658 c 0,0 0.61962,-1.180815 1.17172,-1.536363 0.77731,-0.500595 1.79086,-0.942077 2.81346,-0.71118 0.64561,0.145778 1.26249,0.67511 1.64901,1.222413 0.70811,1.0027 0.86485,2.241453 0.93283,3.359332 l 0.33168,5.453807 0.0976,3.567507 0.0462,2.317734 0.19895,5.30832 c 0,0 0.18544,1.49754 0.081,2.2056 -0.10378,0.70413 -0.28172,1.42146 -0.69477,1.97155 -0.3284,0.43739 -0.76378,0.8893 -1.35308,0.97016 -0.93247,0.12794 -2.13819,-0.15397 -2.90746,-0.84245 z" />
+    <path d="m 86.418411,75.051009 0.0084,10.407593 0.109229,6.165158 0.124772,4.566247 -0.148894,2.342205 c -0.02203,0.346451 -0.992353,0.952515 -1.569405,0.813927 -0.55608,-0.13355 -0.888305,-0.738667 -0.946911,-1.374976 l -0.819624,-8.899254 c -0.180164,-1.956105 -0.04214,-4.850256 -1.793825,-5.021984 -1.751683,-0.171728 -2.570701,2.110253 -2.554829,4.141321 l 0.05638,7.214233 0.05117,7.503521 0.02518,6.52424 c 0.01727,4.47697 4.17687,8.01692 7.837416,10.52061 3.716666,2.54207 8.570702,3.95709 13.132467,3.74295 4.287863,-0.20129 8.326173,-2.41668 11.925483,-4.65746 1.48814,-0.92645 2.62089,-2.29745 3.83889,-3.53389 1.01564,-1.03103 1.72789,-1.86546 2.24477,-3.19363 0.30008,-0.77111 0.6514,-1.68417 0.65641,-2.50708 0.006,-0.86234 0.0151,-2.58705 0.0151,-2.58705 l -0.0439,-5.27687 -0.0123,-3.08668 c -0.004,-0.985511 -1.07576,-2.588794 -2.81495,-2.318064 -1.38973,0.21633 -2.46736,1.358933 -3.05895,1.416226 l 0.1344,2.809888 0.23081,5.79676 c -0.009,0.26596 -0.28246,7.11176 -5.89145,5.68211 -0.57129,-0.14561 -1.19522,-0.26086 -1.65014,-0.62241 -0.83413,-0.66295 -1.39285,-1.65065 -1.72896,-2.63758 -0.68622,-2.01495 -0.49641,-4.22351 -0.46407,-6.3427 0.0177,-1.16577 0.22869,-2.31732 0.36161,-3.480467 0.0788,-0.689871 0.4036,-2.402047 0.4036,-2.402047 0,0 -1.12121,1.034669 -1.44722,0.633916 -0.54598,-0.671147 0.81047,-1.767608 1.66773,-1.990897 0.76569,-0.199442 1.61087,1.292068 2.22492,0.810745 0.9656,-0.756883 -0.61348,-3.536476 -0.61348,-3.536476 0,0 0.0258,-5.286619 -1.10773,-4.88581 -1.1335,0.400809 -3.4621,5.939795 -3.42543,4.136496 l 0.15993,-7.866353 -0.10316,-8.543014 -0.18955,-6.005091 c -0.0694,-2.198124 -5.721308,-2.541277 -5.703143,0.01631 l 0.09103,12.816477 -0.03664,7.132566 c -0.01062,2.06848 0.644145,5.795741 -1.501094,6.036707 -1.453824,0.163302 -1.907948,-2.224116 -1.978199,-3.75459 L 91.810885,85.149053 91.344263,75.268675 C 91.15501,71.261403 86.415684,71.689927 86.41841,75.051005 Z m 14.343769,25.111621 1.30281,0.26462 c 0,0 -0.32826,0.40078 -0.56238,0.49869 -0.44052,0.18423 -0.95832,0.13728 -1.43787,0.1055 -0.17912,-0.0119 -0.350919,-0.0731 -0.526298,-0.10988 -0.211639,-0.0445 -0.435716,-0.0523 -0.634725,-0.13431 -0.312889,-0.12903 -0.513816,-0.47653 -0.845916,-0.54923 -0.09516,-0.0208 -0.198468,0.007 -0.289707,0.0409 -0.134189,0.0489 -0.253218,0.13444 -0.360187,0.22615 -0.135222,0.11591 -0.258975,0.24983 -0.346919,0.40186 -0.08297,0.14342 -0.12536,0.30661 -0.162018,0.46676 -0.04468,0.19518 -0.05369,0.39651 -0.06911,0.59576 -0.0106,0.13685 -0.01684,0.27415 -0.01602,0.41137 0.0011,0.16764 0.0078,0.33554 0.02563,0.50233 0.01753,0.16483 0.04678,0.3285 0.07963,0.49116 0.04637,0.22953 0.0853,0.46243 0.165677,0.68318 0.05445,0.14955 0.135043,0.28941 0.212595,0.42928 0.10079,0.1818 0.201132,0.36547 0.327822,0.53174 0.07645,0.10032 0.165473,0.19193 0.258688,0.27827 0.298446,0.27643 0.210565,0.41162 0.957447,0.76299 0.746886,0.35138 2.791171,-0.0705 3.607141,0.81807 0.42242,0.45999 0.58493,1.33852 0.19992,1.82769 -0.50614,0.64312 -1.64568,0.47814 -2.4844,0.41989 -0.448295,-0.0312 -0.878489,-0.21248 -1.280201,-0.40556 -0.307749,-0.14793 -1.373979,-0.92929 -1.736632,-1.30841 -0.415337,-0.45557 -0.695067,-1.00235 -0.988215,-1.53314 -0.683093,-1.21278 -0.797019,-2.31585 -0.918782,-3.51949 -0.02388,-0.2361 0.06888,-0.85205 0.15336,-1.22707 0.773163,-3.432562 3.659345,-1.595347 4.63506,-1.156479 z" />
+  </svg>
+);

packages/components-react/src/Logo/LogoText.tsx

@@ -0,0 +1,12 @@
+import clsx from 'clsx';
+import { HTMLAttributes } from 'react';
+
+// Include CSS for logo as a package deal. FIXME: move this to a separate `css-module` option like Utrecht
+import '@frameless/components-css/logo/index.scss';
+
+export type LogoTextProps = HTMLAttributes<HTMLHeadingElement>;
+export const LogoText = ({ className, children, ...restProps }: LogoTextProps) => (
+  <h1 {...restProps} className={clsx('frameless-logo__text', className)}>
+    {children}
+  </h1>
+);

packages/components-react/src/Logo/LogoWrapper.tsx

@@ -0,0 +1,12 @@
+import clsx from 'clsx';
+import { HTMLAttributes } from 'react';
+
+// Include CSS for logo as a package deal. FIXME: move this to a separate `css-module` option like Utrecht
+import '@frameless/components-css/logo/index.scss';
+
+export type LogoWrapperProps = HTMLAttributes<HTMLDivElement>;
+export const LogoWrapper = ({ className, children, ...restProps }: LogoWrapperProps) => (
+  <div {...restProps} className={clsx('frameless-logo__wrapper', className)}>
+    {children}
+  </div>
+);

packages/components-react/src/Logo/index.tsx

@@ -0,0 +1,16 @@
+// Logo component is imported from Utrecht
+// LogoImage, LogoText and LogoWrapper are Frameless components
+
+import { Logo as UtrechtLogo } from '@utrecht/component-library-react/dist/css-module';
+import { LogoImage } from './LogoImage';
+import { LogoText } from './LogoText';
+import { LogoWrapper } from './LogoWrapper';
+
+export const Logo = () => (
+  <LogoWrapper>
+    <UtrechtLogo>
+      <LogoImage />
+    </UtrechtLogo>
+    <LogoText>Frameless</LogoText>
+  </LogoWrapper>
+);

packages/components-react/src/index.ts

@@ -1,3 +1,4 @@
-export { Heading1 } from '@utrecht/component-library-react';
 export { Card } from './Card';
 export { CardGroup } from './CardGroup';
+export { Heading1 } from '@utrecht/component-library-react';
+export { Logo } from './Logo';

packages/storybook/src/css-logo.stories.tsx

@@ -0,0 +1,58 @@
+/* @license CC0-1.0 */
+
+import '@frameless/components-css/logo/index.scss';
+import readme from '@frameless/components-css/logo/README.md?raw';
+import { Logo } from '@frameless/components-react/src/Logo';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'CSS Component/Logo',
+
+  id: 'css-logo',
+
+  component: Logo,
+
+  argTypes: {
+    children: {
+      name: 'Content',
+
+      description: 'Logo',
+
+      type: {
+        name: 'string',
+        required: true,
+      },
+
+      defaultValue: '',
+    },
+  },
+
+  args: {},
+
+  tags: ['autodocs'],
+
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Frameless Logo',
+  args: {},
+  parameters: {},
+};
+
+// om de 4 states van het logo te laten zien?
+export const LogoSmall: Story = {
+  name: 'Frameless Logo Small',
+  args: {},
+  parameters: {},
+};

packages/storybook/src/react-logo.stories.tsx

@@ -0,0 +1,56 @@
+/* @license CC0-1.0 */
+
+import readme from '@frameless/components-css/logo/README.md?raw';
+import { Logo } from '@frameless/components-react/src/Logo';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import '@frameless/components-css/logo/index.scss';
+
+// adds Logo to Storybook
+const meta = {
+  title: 'React Component/Logo',
+
+  id: 'react-logo',
+
+  component: Logo,
+
+  argTypes: {
+    children: {
+      name: 'Content',
+
+      description: 'Logo',
+
+      type: {
+        name: 'string',
+        required: true,
+      },
+
+      defaultValue: '',
+    },
+  },
+
+  args: {},
+
+  tags: ['autodocs'],
+
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+
+// defines that this (part of the) story is documentation
+type Story = StoryObj<typeof meta>;
+
+// adds Frameless Logo section to Logo in Storybook
+export const Default: Story = {
+  name: 'Frameless Logo', // in sidenav shows Frameless logo below Docs
+  args: {},
+  parameters: {},
+};
+//