feat: add subscript CSS and React component

.changeset/kind-rabbit-look.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/subscript-css": major
+---
+
+Add Subscript CSS component.

.changeset/spooky-houses-rescue.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": minor
+---
+
+Add Subscript React component.

components/subscript/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# Subscript
+
+Toont tekst met een kleiner lettertype onder de normale letterlijn.

components/subscript/package.json

@@ -0,0 +1,32 @@
+{
+  "version": "0.0.0",
+  "author": "Community for NL Design System",
+  "description": "Subscript component for the Municipality of Utrecht based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "name": "@utrecht/subscript-css",
+  "files": [
+    "dist/",
+    "docs/",
+    "src/",
+    "*.md"
+  ],
+  "main": "dist/index.css",
+  "scripts": {
+    "build": "rollup -c ../rollup.config.mjs",
+    "clean": "rimraf dist"
+  },
+  "devDependencies": {
+    "rollup": "4.18.0"
+  },
+  "keywords": [
+    "nl-design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "[email protected]:nl-design-system/utrecht.git",
+    "directory": "components/subscript"
+  }
+}

components/subscript/src/_mixin.scss

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+/* stylelint-disable-next-line block-no-empty */
+@mixin utrecht-subscript {
+}
+
+/* Not all fonts support the OpenType `subs` characters, and fonts that support it don't suppor all characters.
+ * Use the optimized OpenType rendering only in situations where you know it will work.
+ */
+@mixin utrecht-subscript--open-type {
+  font-size: inherit;
+  font-variant-position: sub;
+  vertical-align: baseline;
+}

components/subscript/src/html/_mixin.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../mixin";
+
+@mixin utrecht-html-sub {
+  sub {
+    @include utrecht-subscript;
+  }
+}

components/subscript/src/html/index.scss

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./mixin";
+
+@include utrecht-html-sub;

components/subscript/src/index.scss

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./mixin";
+
+.utrecht-subscript {
+  @include utrecht-subscript;
+}
+
+.utrecht-subscript--open-type {
+  @include utrecht-subscript--open-type;
+}

components/subscript/src/tokens.json

@@ -0,0 +1,5 @@
+{
+  "utrecht": {
+    "subscript": {}
+  }
+}

packages/component-library-react/package.json

@@ -140,6 +140,7 @@
     "@utrecht/separator-css": "workspace:*",
     "@utrecht/skip-link-css": "workspace:*",
     "@utrecht/spotlight-section-css": "workspace:*",
+    "@utrecht/subscript-css": "workspace:*",
     "@utrecht/superscript-css": "workspace:*",
     "@utrecht/surface-css": "workspace:*",
     "@utrecht/table-css": "workspace:*",

packages/component-library-react/src/Subscript.tsx

@@ -0,0 +1,29 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
+
+export interface SubscriptProps extends HTMLAttributes<HTMLElement> {
+  openType?: boolean;
+}
+
+export const Subscript = forwardRef(
+  (
+    { children, className, openType, ...restProps }: PropsWithChildren<SubscriptProps>,
+    ref: ForwardedRef<HTMLElement>,
+  ) => (
+    <sub
+      ref={ref}
+      className={clsx('utrecht-subscript', { 'utrecht-subscript--open-type': openType }, className)}
+      {...restProps}
+    >
+      {children}
+    </sub>
+  ),
+);
+
+Subscript.displayName = 'Subscript';

packages/component-library-react/src/css-module/Subscript.tsx

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import '@utrecht/subscript-css/src/index.scss';
+
+export * from '../Subscript';

packages/component-library-react/src/css-module/index.ts

@@ -168,6 +168,8 @@ export type { StatusBadgeProps } from '../StatusBadge';
 export { StatusBadge } from './StatusBadge';
 export type { StrongProps } from '../Strong';
 export { Strong } from './Strong';
+export type { SubscriptProps } from '../Subscript';
+export { Subscript } from './Subscript';
 export type { SuperscriptProps } from '../Superscript';
 export { Superscript } from './Superscript';
 export type { SurfaceProps } from '../Surface';

packages/component-library-react/src/index.ts

@@ -175,6 +175,8 @@ export type { StatusBadgeProps } from './StatusBadge';
 export { StatusBadge } from './StatusBadge';
 export type { StrongProps } from './Strong';
 export { Strong } from './Strong';
+export type { SubscriptProps } from './Subscript';
+export { Subscript } from './Subscript';
 export type { SuperscriptProps } from './Superscript';
 export { Superscript } from './Superscript';
 export type { SurfaceProps } from './Surface';

packages/storybook-css/package.json

@@ -126,6 +126,7 @@
     "@utrecht/skip-link-css": "workspace:*",
     "@utrecht/spotlight-section-css": "workspace:*",
     "@utrecht/storybook-helpers": "workspace:*",
+    "@utrecht/subscript-css": "workspace:*",
     "@utrecht/superscript-css": "workspace:*",
     "@utrecht/surface-css": "workspace:*",
     "@utrecht/table-css": "workspace:*",

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

@@ -0,0 +1,103 @@
+/* @license CC0-1.0 */
+
+/* eslint-disable react/no-unescaped-entities */
+
+import { Meta, StoryObj } from '@storybook/react';
+import { Paragraph, Subscript } from '@utrecht/component-library-react/dist/css-module';
+import tokens from '@utrecht/design-tokens/dist/index.json';
+import readme from '@utrecht/subscript-css/README.md?raw';
+import tokensDefinition from '@utrecht/subscript-css/src/tokens.json';
+import React from 'react';
+import { designTokenStory } from './design-token-story';
+
+const meta = {
+  title: 'CSS Component/Subscript',
+  id: 'css-subscript',
+  component: Subscript,
+  argTypes: {
+    children: {
+      description: 'Tekst.',
+      control: 'text',
+    },
+    openType: {
+      description: 'Render with OpenType font features.',
+      control: 'boolean',
+    },
+  },
+  args: {
+    children: [],
+    openType: false,
+  },
+  parameters: {
+    bugs: 'https://github.com/nl-design-system/utrecht/issues?q=is%3Aissue+is%3Aopen+label%3Acomponent%2Fsubscript',
+    nldesignsystem: 'https://nldesignsystem.nl/subscript',
+    tokensPrefix: 'utrecht-subscript',
+    status: {
+      type: 'ALPHA',
+    },
+    tokens,
+    tokensDefinition,
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+    decorators: [(Story: any) => <Paragraph>{Story()}</Paragraph>],
+  },
+} satisfies Meta<typeof Subscript>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'The Quick Brown Fox Jumps Over The Lazy Dog',
+  },
+};
+
+export const InsideText: Story = {
+  args: {
+    children: 'The Quick Brown Fox Jumps Over The Lazy Dog',
+  },
+  name: 'Subscript inside multiple lines of text',
+  parameters: {
+    docs: {
+      description: {
+        story: `Subscript tekst kan de lijnhoogte verstoren, omdat er in sommige gevallen meer ruimte nodig is dan de ingestelde lijnhoogte.`,
+      },
+    },
+  },
+  render: (props: any) => {
+    return (
+      <>
+        Its chemical formula, H<Subscript {...props}>2</Subscript>O, indicates that each of its molecules contains one
+        oxygen and two hydrogen atoms, connected by covalent bonds. The hydrogen atoms are attached to the oxygen atom
+        at an angle of 104.45°. In liquid form, H<Subscript {...props}>2</Subscript>O is also called "water" at standard
+        temperature and pressure.
+      </>
+    );
+  },
+};
+
+export const InsideTextOpenType: Story = {
+  args: {
+    children: 'The Quick Brown Fox Jumps Over The Lazy Dog',
+    openType: true,
+  },
+  name: 'Subscript with Open Type rendering, inside multiple lines of text',
+  render: InsideText.render,
+  parameters: {
+    docs: {
+      description: {
+        story: `Experimental class name: \`utrecht-subscript--open-type\`. Apply this class name in specific situations, when it is certain the current font supports Open Type \`subs\` for all the characters inside the subscript text.
+
+To determine which characters are supported, you can upload your font to [Wakamai Fondue](https://wakamaifondue.com/) ("What can my font do?"), and scroll down to the \`subs\` section. When your font does not support \`subs\` then will be no such section.
+
+When you use this class with fonts that do not support this OpenType feature, subscript text will look the same as regular text, and the meaning of the text will become unclear.`,
+      },
+    },
+  },
+};
+
+export const DesignTokens = designTokenStory(meta);

packages/storybook-react/package.json

@@ -126,6 +126,7 @@
     "@utrecht/skip-link-css": "workspace:*",
     "@utrecht/spotlight-section-css": "workspace:*",
     "@utrecht/storybook-helpers": "workspace:*",
+    "@utrecht/subscript-css": "workspace:*",
     "@utrecht/superscript-css": "workspace:*",
     "@utrecht/surface-css": "workspace:*",
     "@utrecht/table-css": "workspace:*",

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

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Subscript } from '@utrecht/component-library-react/dist/css-module';
+import tokens from '@utrecht/design-tokens/dist/index.json';
+import readme from '@utrecht/subscript-css/README.md?raw';
+import tokensDefinition from '@utrecht/subscript-css/src/tokens.json';
+import { designTokenStory } from './util';
+
+const meta = {
+  title: 'React Component/Subscript',
+  id: 'react-subscript',
+  component: Subscript,
+  args: {
+    children: 'The Quick Brown Fox Jumps Over The Lazy Dog',
+  },
+  argTypes: {
+    openType: {
+      description: 'Render with OpenType font features.',
+      control: 'boolean',
+    },
+  },
+  parameters: {
+    tokensPrefix: 'utrecht-subscript',
+    tokens,
+    tokensDefinition,
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Subscript>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+
+export const DesignTokens = designTokenStory(meta);