@utrecht/heading-4-css 1.0.0 → 1.1.0

package/dist/index.css

@@ -0,0 +1,32 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Frameless B.V.
+ */
+.utrecht-heading-4 {
+  break-inside: avoid-column;
+  page-break-inside: avoid;
+  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
+  font-size: var(--utrecht-heading-4-font-size, revert);
+  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
+  line-height: var(--utrecht-heading-4-line-height);
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
+  page-break-after: avoid;
+}
+
+.utrecht-heading-4--distanced {
+  --utrecht-space-around: 1;
+}

package/dist/index.js

@@ -0,0 +1 @@
+var undefined$1 = undefined;export{undefined$1 as default};

package/package.json

@@ -1,18 +1,26 @@
 {
-  "version": "1.0.0",
+  "version": "1.1.0",
   "author": "Community for NL Design System",
   "description": "Heading 4 component for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
   "name": "@utrecht/heading-4-css",
   "files": [
-    "dist/"
+    "dist/",
+    "src/"
   ],
-  "devDependencies": {},
+  "main": "dist/index.css",
+  "devDependencies": {
+    "rollup": "3.29.4",
+    "@utrecht/heading-css": "1.1.0"
+  },
   "keywords": [
     "nl-design-system"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {}
+  "scripts": {
+    "build": "rollup -c ../rollup.config.mjs",
+    "clean": "rimraf dist"
+  }
 }

package/src/_mixin.scss

@@ -0,0 +1,28 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
+
+@import "~@utrecht/heading-css/src/mixin";
+
+@mixin utrecht-heading-4 {
+  @include utrecht-heading;
+
+  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(
+    --utrecht-heading-4-font-family,
+    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
+  );
+  font-size: var(--utrecht-heading-4-font-size, revert);
+  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
+  line-height: var(--utrecht-heading-4-line-height);
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
+  page-break-after: avoid;
+}
+
+@mixin utrecht-heading-4--distanced {
+  --utrecht-space-around: 1;
+}

package/src/html/_mixin.scss

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../mixin";
+
+@mixin utrecht-html-h4 {
+  h4 {
+    @include utrecht-heading-4;
+    @include utrecht-heading-4--distanced;
+  }
+}

package/src/html/index.scss

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

package/src/index.scss

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
+
+@import "./mixin";
+
+.utrecht-heading-4 {
+  @include utrecht-heading-4;
+}
+
+.utrecht-heading-4--distanced {
+  @include utrecht-heading-4--distanced;
+}

package/src/story-template.jsx

@@ -0,0 +1,47 @@
+/*
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+
+import clsx from 'clsx';
+import React from 'react';
+
+export const argTypes = {
+  textContent: {
+    description: 'De content van de header',
+    control: 'text',
+  },
+  distanced: {
+    description: 'Zet afstand tussen de header en nabije content',
+    control: 'boolean',
+  },
+};
+
+export const defaultArgs = {
+  textContent: '',
+  distanced: false,
+};
+
+export const exampleArgs = {
+  textContent: 'The Quick Brown Fox Jumps Over The Lazy Dog',
+};
+
+export const Heading4 = ({
+  children,
+  textContent = defaultArgs.textContent,
+  distanced = defaultArgs.distanced,
+  ...restProps
+}) => (
+  <h4
+    className={clsx('utrecht-heading-4', {
+      'utrecht-heading-4--distanced': distanced,
+    })}
+    {...restProps}
+  >
+    {children}
+    {textContent}
+  </h4>
+);
+
+export default Heading4;

package/src/tokens.json

@@ -0,0 +1,74 @@
+{
+  "utrecht": {
+    "heading-4": {
+      "color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.fallback": ["utrecht.heading.color", "utrecht.document.color"]
+        },
+        "type": "color"
+      },
+      "font-family": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "*",
+            "inherits": true
+          },
+          "nl.nldesignsystem.fallback": ["utrecht.heading.font-family", "utrecht.document.font-family"]
+        },
+        "type": "fontFamilies"
+      },
+      "font-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        },
+        "type": "fontSizes"
+      },
+      "font-weight": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.fallback": ["utrecht.heading.font-weight"]
+        },
+        "type": "fontWeights"
+      },
+      "line-height": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        },
+        "type": "lineHeights"
+      },
+      "margin-block-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "margin-block-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      }
+    }
+  }
+}