From 40a3f2b0e4a5ac4e02d0ecdfbb4df69ef7abe2ba Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Tue, 12 Nov 2024 11:49:39 +0100 Subject: [PATCH] chore: remove `@utrecht/badge-data-css` component --- components/badge-data/CHANGELOG.md | 25 --------- components/badge-data/README.md | 5 -- .../badge-data/docs/technology-css.nl.md | 19 ------- .../badge-data/docs/technology-html.nl.md | 54 ------------------- components/badge-data/package.json | 33 ------------ components/badge-data/src/_mixin.scss | 40 -------------- components/badge-data/src/index.scss | 11 ---- components/badge-data/src/story-template.jsx | 31 ----------- components/badge-data/src/tokens.json | 26 --------- pnpm-lock.yaml | 21 +++----- .../component/utrecht/badge-data.tokens.json | 8 --- 11 files changed, 6 insertions(+), 267 deletions(-) delete mode 100644 components/badge-data/CHANGELOG.md delete mode 100644 components/badge-data/README.md delete mode 100644 components/badge-data/docs/technology-css.nl.md delete mode 100644 components/badge-data/docs/technology-html.nl.md delete mode 100644 components/badge-data/package.json delete mode 100644 components/badge-data/src/_mixin.scss delete mode 100644 components/badge-data/src/index.scss delete mode 100644 components/badge-data/src/story-template.jsx delete mode 100644 components/badge-data/src/tokens.json delete mode 100644 proprietary/design-tokens/src/component/utrecht/badge-data.tokens.json diff --git a/components/badge-data/CHANGELOG.md b/components/badge-data/CHANGELOG.md deleted file mode 100644 index c6af8ecfe1b..00000000000 --- a/components/badge-data/CHANGELOG.md +++ /dev/null @@ -1,25 +0,0 @@ -# @utrecht/badge-data-css - -## 1.3.0 - -### Minor Changes - -- e497b08: Export CSS string as default export in `dist/index.mjs`. - -## 1.2.0 - -### Minor Changes - -- 691719c: Added metadata for badge-data tokens. - -## 1.1.0 - -### Minor Changes - -- 62f1157: Add SCSS files to `src/` directory of CSS component packages. - -## 1.0.0 - -### Major Changes - -- 856d996: Switch from alpha releases to semantic versioning. diff --git a/components/badge-data/README.md b/components/badge-data/README.md deleted file mode 100644 index 6ed52c3f534..00000000000 --- a/components/badge-data/README.md +++ /dev/null @@ -1,5 +0,0 @@ - - -# Data badge - -Label met extra informatie, zoals een categorie of een eigenschap. diff --git a/components/badge-data/docs/technology-css.nl.md b/components/badge-data/docs/technology-css.nl.md deleted file mode 100644 index a4616a774a3..00000000000 --- a/components/badge-data/docs/technology-css.nl.md +++ /dev/null @@ -1,19 +0,0 @@ - - -# CSS - -Als je de data badge verschillende designs wilt geven, dan kan dat met eigen CSS. De data badge component heeft standaard maar design tokens voor een soort kleur. Je kunt een class name maken om de kleur aan te passen: - -```css -.utrecht-badge-data--myprefix-numeric { - --utrecht-badge-background-color: var(--myprefix-color-blue); - --utrecht-badge-color: var(--myprefix-color-offwhite); -} - -.utrecht-badge-data--myprefix-date { - --utrecht-badge-background-color: var(--myprefix-color-red); - --utrecht-badge-color: var(--myprefix-color-offwhite); -} -``` - -Je kunt voor de modifier class name een eigen prefix gebruiken (zoals `example-`), zodat je er in de toekomst geen last van hebt als deze component toevallig een identieke uitbreiding krijgt. diff --git a/components/badge-data/docs/technology-html.nl.md b/components/badge-data/docs/technology-html.nl.md deleted file mode 100644 index 9056561e113..00000000000 --- a/components/badge-data/docs/technology-html.nl.md +++ /dev/null @@ -1,54 +0,0 @@ - - -# HTML - -Gebruik een inline HTML-element voor de _badge component_, zodat de badge binnen een `p` HTML-element gebruikt kan worden. Bijvoorbeeld een `span`, `time` of `data` element: - -```html -

- Belangrijke gegevens: ≥ 250㎡ - Energielabel A -

-``` - -Gebruik niet een `div`: - -```html -

Belangrijke gegevens:

≥ 250㎡
Energielabel A

-``` - -Een `div` in een `p` element wordt door de parser gezien als het einde van een `p` element, waardoor je eigenlijk dit bereikt: - -```html -

Belangrijke gegevens:

-
≥ 250㎡
-
Energielabel A
-

-``` - -## Computer-leesbare datum en tijd - -Gebruik een `time` element wanneer je een datum of een datum en tijd hebt: - -```html - -``` - -Gebruik een `time` element wanneer je een een tijdsduur hebt, in het `datetime` attribuut moet periode in [ISO 8601 notatie](https://en.wikipedia.org/wiki/ISO_8601#Durations). - -```html - -``` - -## Overige computer-leesbare data - -Gebruik een `data` element wanneer je een `value` hebt met een waarde die voor de computer duidelijk is. De gewone tekst kan dan voor mensen leesbaar zijn. Je kunt de `value` bijvoorbeeld gebruiken om een tabel te sorteren op die waarde. Gebruik nooit een `` element zonder `value`. - -```html - - Koningsweg 13 - - ≥ 250㎡ - - -``` diff --git a/components/badge-data/package.json b/components/badge-data/package.json deleted file mode 100644 index 32e284e1485..00000000000 --- a/components/badge-data/package.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "version": "1.3.0", - "author": "Community for NL Design System", - "description": "Badge data component for the Municipality of Utrecht based on the NL Design System architecture", - "license": "EUPL-1.2", - "name": "@utrecht/badge-data-css", - "files": [ - "dist/", - "docs/", - "src/", - "*.md" - ], - "main": "dist/index.css", - "scripts": { - "build": "build-css-package", - "clean": "rimraf dist" - }, - "devDependencies": { - "@utrecht/badge-css": "workspace:*", - "@utrecht/build-utils-css": "workspace:*" - }, - "keywords": [ - "nl-design-system" - ], - "publishConfig": { - "access": "public" - }, - "repository": { - "type": "git+ssh", - "url": "git@github.com:nl-design-system/utrecht.git", - "directory": "components/badge-data" - } -} diff --git a/components/badge-data/src/_mixin.scss b/components/badge-data/src/_mixin.scss deleted file mode 100644 index 7689b1c3472..00000000000 --- a/components/badge-data/src/_mixin.scss +++ /dev/null @@ -1,40 +0,0 @@ -/** - * @license EUPL-1.2 - * Copyright (c) 2020-2024 Frameless B.V. - * Copyright (c) 2021-2024 Gemeente Utrecht - */ - -@import "~@utrecht/badge-css/src/mixin"; - -@mixin utrecht-badge-data { - background-color: var(--utrecht-data-badge-background-color, var(--utrecht-badge-background-color, hsl(0 0% 0%))); - border-radius: var(--utrecht-data-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch)); - color: var(--utrecht-data-badge-color, var(--utrecht-badge-color, hsl(0 0% 100%))); - display: inline-block; - font-family: var(--utrecht-data-badge-font-family, var(--utrecht-document-font-family, sans-serif)); - font-size: var(--utrecht-data-badge-font-size, var(--utrecht-badge-font-size, inherit)); - font-style: var(--utrecht-badge-font-style, normal); /* no inheritance */ - font-weight: var(--utrecht-data-badge-font-weight, var(--utrecht-badge-font-weight, bold)); /* no inheritance */ - letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit); - line-height: var(--utrecht-data-badge-line-height, var(--utrecht-badge-line-height, 1em)); - max-block-size: max-content; - max-inline-size: max-content; - min-block-size: 1em; - min-inline-size: 1em; - padding-block-end: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex)); - padding-block-start: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex)); - padding-inline-end: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch)); - padding-inline-start: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch)); - text-decoration: none; /* no inheritance */ - text-transform: var(--utrecht-badge-data-text-transform, inherit); -} - -@mixin utrecht-badge--media-query-forced-colors { - @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) { - border-color: currentColor; - border-style: solid; - - /* Warning: there layout difference because of the added 1px border */ - border-width: 1px; - } -} diff --git a/components/badge-data/src/index.scss b/components/badge-data/src/index.scss deleted file mode 100644 index 43641fb19c7..00000000000 --- a/components/badge-data/src/index.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @license EUPL-1.2 - * Copyright (c) 2020-2024 Frameless B.V. - * Copyright (c) 2021-2024 Gemeente Utrecht - */ - -@import "./mixin"; - -.utrecht-badge-data { - @include utrecht-badge-data; -} diff --git a/components/badge-data/src/story-template.jsx b/components/badge-data/src/story-template.jsx deleted file mode 100644 index d6bdf8b9b1e..00000000000 --- a/components/badge-data/src/story-template.jsx +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license EUPL-1.2 - * Copyright (c) 2020-2024 Frameless B.V. - * Copyright (c) 2021-2024 Gemeente Utrecht - */ - -import React from 'react'; - -export const argTypes = { - textContent: { - description: 'Text content', - control: 'text', - }, -}; - -export const defaultArgs = { - textContent: '', -}; - -export const exampleArgs = { - textContent: 'Festivals', -}; - -export const BadgeData = ({ children, textContent = defaultArgs.textContent }) => ( - - {textContent} - {children} - -); - -export default BadgeData; diff --git a/components/badge-data/src/tokens.json b/components/badge-data/src/tokens.json deleted file mode 100644 index e72de02130c..00000000000 --- a/components/badge-data/src/tokens.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "utrecht": { - "badge-data": { - "letter-spacing": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.figma.supports-token": false - }, - "type": "letterSpacing" - }, - "text-transform": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": ["inherit", "uppercase"], - "inherits": true - }, - "nl.nldesignsystem.figma.supports-token": false - }, - "type": "textCase" - } - } - } -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 63b17540166..1d6e5bae76e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -172,15 +172,6 @@ importers: specifier: workspace:* version: link:../../packages/build-utils-css - components/badge-data: - devDependencies: - '@utrecht/badge-css': - specifier: workspace:* - version: link:../badge - '@utrecht/build-utils-css': - specifier: workspace:* - version: link:../../packages/build-utils-css - components/badge-list: devDependencies: '@utrecht/build-utils-css': @@ -6771,9 +6762,6 @@ importers: '@utrecht/badge-counter-css': specifier: workspace:* version: link:../../components/badge-counter - '@utrecht/badge-data-css': - specifier: workspace:* - version: link:../../components/badge-data '@utrecht/badge-list-css': specifier: workspace:* version: link:../../components/badge-list @@ -6816,6 +6804,9 @@ importers: '@utrecht/custom-checkbox-css': specifier: workspace:* version: link:../../components/custom-checkbox + '@utrecht/data-badge-css': + specifier: workspace:* + version: link:../../components/data-badge '@utrecht/data-list-css': specifier: workspace:* version: link:../../components/data-list @@ -7197,9 +7188,6 @@ importers: '@utrecht/badge-css': specifier: workspace:* version: link:../../components/badge - '@utrecht/badge-data-css': - specifier: workspace:* - version: link:../../components/badge-data '@utrecht/badge-list-css': specifier: workspace:* version: link:../../components/badge-list @@ -7239,6 +7227,9 @@ importers: '@utrecht/custom-checkbox-css': specifier: workspace:* version: link:../../components/custom-checkbox + '@utrecht/data-badge-css': + specifier: workspace:* + version: link:../../components/data-badge '@utrecht/data-list-css': specifier: workspace:* version: link:../../components/data-list diff --git a/proprietary/design-tokens/src/component/utrecht/badge-data.tokens.json b/proprietary/design-tokens/src/component/utrecht/badge-data.tokens.json deleted file mode 100644 index db6fecc97ea..00000000000 --- a/proprietary/design-tokens/src/component/utrecht/badge-data.tokens.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "utrecht": { - "badge-data": { - "letter-spacing": {}, - "text-transform": {} - } - } -}