From 98b5d21d9c9fa3b8c5c2ed2a2701511a94861b3b Mon Sep 17 00:00:00 2001 From: vasileios Date: Tue, 21 Nov 2023 09:11:47 +0100 Subject: [PATCH 1/6] Fixes [open-formulieren/open-forms#3450] Apply hyphenation via CSS --- src/scss/components/_anchor.scss | 4 ---- src/scss/components/_progress-indicator.scss | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/scss/components/_anchor.scss b/src/scss/components/_anchor.scss index da3661679..181a41998 100644 --- a/src/scss/components/_anchor.scss +++ b/src/scss/components/_anchor.scss @@ -33,10 +33,6 @@ } } - @include bem.modifier('openforms-active') { - font-weight: bold; - } - @include bem.modifier('openforms-inherit') { color: inherit; diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss index 81513562c..40b68b3f4 100644 --- a/src/scss/components/_progress-indicator.scss +++ b/src/scss/components/_progress-indicator.scss @@ -94,6 +94,6 @@ @include bem.element('label') { flex-grow: 1; - word-break: break-all; + hyphens: auto; } } From 11ad1e70b286cf43f6238de20a0309e598798a2d Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 24 Nov 2023 11:03:54 +0100 Subject: [PATCH 2/6] :recycle: [#36] Refactor anhor--active modifier to use utrecht-link--current --- design-tokens | 2 +- src/components/Anchor/Anchor.js | 18 +++++++++-- src/components/Anchor/Anchor.mdx | 8 ++++- src/components/Anchor/Anchor.stories.js | 31 ++++++++++++++----- .../ProgressIndicatorItem.js | 2 +- 5 files changed, 48 insertions(+), 13 deletions(-) diff --git a/design-tokens b/design-tokens index 4f5ffe85d..904756297 160000 --- a/design-tokens +++ b/design-tokens @@ -1 +1 @@ -Subproject commit 4f5ffe85d6d78e4a7db6103f6eff826247dd6719 +Subproject commit 904756297a9d2bbea5c1bf40d10ced2ec0206fbe diff --git a/src/components/Anchor/Anchor.js b/src/components/Anchor/Anchor.js index 0fb28dee7..b9bcbef53 100644 --- a/src/components/Anchor/Anchor.js +++ b/src/components/Anchor/Anchor.js @@ -3,13 +3,27 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -export const ANCHOR_MODIFIERS = ['hover', 'active', 'inherit', 'muted', 'indent']; +export const ANCHOR_MODIFIERS = [ + // maps to NLDS + 'current', + // OF specific + 'hover', + 'inherit', + 'muted', + 'indent', +]; const Anchor = ({children, href, modifiers = [], ...extraProps}) => { // extend with our own modifiers const className = classNames( 'utrecht-link--openforms', // always apply our own modifier - ...modifiers.map(mod => `utrecht-link--openforms-${mod}`) + { + 'utrecht-link--current': modifiers.includes('current'), + 'utrecht-link--openforms-hover': modifiers.includes('hover'), + 'utrecht-link--openforms-inherit': modifiers.includes('inherit'), + 'utrecht-link--openforms-muted': modifiers.includes('muted'), + 'utrecht-link--openforms-indent': modifiers.includes('indent'), + } ); return ( diff --git a/src/components/Anchor/Anchor.mdx b/src/components/Anchor/Anchor.mdx index 120dce313..39471fa52 100644 --- a/src/components/Anchor/Anchor.mdx +++ b/src/components/Anchor/Anchor.mdx @@ -23,11 +23,17 @@ The standard look of the anchor component without modifiers. +## NL Design System variants + + + + ## Variants by modifier +The custom modifiers are _deprecated_. Instead, see if we can apply NL DS variants. + - diff --git a/src/components/Anchor/Anchor.stories.js b/src/components/Anchor/Anchor.stories.js index d95889291..6061ee5a7 100644 --- a/src/components/Anchor/Anchor.stories.js +++ b/src/components/Anchor/Anchor.stories.js @@ -39,14 +39,6 @@ export const Hover = { }, }; -export const Active = { - render, - args: { - modifiers: ['active'], - label: 'Active', - }, -}; - export const Muted = { render, args: { @@ -71,6 +63,14 @@ export const Inherit = { }, }; +/** + * A placeholder link indicating that the link may become available. + * + * The link is currently not active/clickable/enabled because of some state, but + * depending on context it may become a regular link. The `href` attribute is removed, + * which removes the link from the tab/focus navigation while keeping a consistent + * markup. + */ export const Placeholder = { render, args: { @@ -78,3 +78,18 @@ export const Placeholder = { placeholder: true, }, }; + +/** + * A link indicating the current page. + * + * Typically you can navigate to this link, but it will just take you to the same page. + * While the link is enabled and can be clicked, the styling does not *encourage* users + * to click it by rendering the default cursor instead. + */ +export const Current = { + render, + args: { + modifiers: ['current'], + label: 'Current', + }, +}; diff --git a/src/components/ProgressIndicator/ProgressIndicatorItem.js b/src/components/ProgressIndicator/ProgressIndicatorItem.js index 886649fc6..507750bee 100644 --- a/src/components/ProgressIndicator/ProgressIndicatorItem.js +++ b/src/components/ProgressIndicator/ProgressIndicatorItem.js @@ -8,7 +8,7 @@ import {getBEMClassName} from 'utils'; import CompletionMark from './CompletionMark'; const getLinkModifiers = (isActive, isApplicable, isCompleted) => { - return ['inherit', 'hover', isActive ? 'active' : undefined].filter(mod => mod !== undefined); + return ['inherit', 'hover', isActive ? 'current' : undefined].filter(mod => mod !== undefined); }; /** From c698046560c23fc6978d94fc91d7adb941cd7a85 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 24 Nov 2023 11:10:00 +0100 Subject: [PATCH 3/6] :fire: [#36] Remove muted variant for links/anchors This is no longer used in our code base, instead you should use the utrecht-link--placeholder variant. --- src/components/Anchor/Anchor.js | 2 -- src/components/Anchor/Anchor.mdx | 2 -- src/components/Anchor/Anchor.stories.js | 8 -------- 3 files changed, 12 deletions(-) diff --git a/src/components/Anchor/Anchor.js b/src/components/Anchor/Anchor.js index b9bcbef53..db9bba75d 100644 --- a/src/components/Anchor/Anchor.js +++ b/src/components/Anchor/Anchor.js @@ -9,7 +9,6 @@ export const ANCHOR_MODIFIERS = [ // OF specific 'hover', 'inherit', - 'muted', 'indent', ]; @@ -21,7 +20,6 @@ const Anchor = ({children, href, modifiers = [], ...extraProps}) => { 'utrecht-link--current': modifiers.includes('current'), 'utrecht-link--openforms-hover': modifiers.includes('hover'), 'utrecht-link--openforms-inherit': modifiers.includes('inherit'), - 'utrecht-link--openforms-muted': modifiers.includes('muted'), 'utrecht-link--openforms-indent': modifiers.includes('indent'), } ); diff --git a/src/components/Anchor/Anchor.mdx b/src/components/Anchor/Anchor.mdx index 39471fa52..476181bc1 100644 --- a/src/components/Anchor/Anchor.mdx +++ b/src/components/Anchor/Anchor.mdx @@ -34,10 +34,8 @@ The custom modifiers are _deprecated_. Instead, see if we can apply NL DS varian - - ## Props diff --git a/src/components/Anchor/Anchor.stories.js b/src/components/Anchor/Anchor.stories.js index 6061ee5a7..59646d576 100644 --- a/src/components/Anchor/Anchor.stories.js +++ b/src/components/Anchor/Anchor.stories.js @@ -39,14 +39,6 @@ export const Hover = { }, }; -export const Muted = { - render, - args: { - modifiers: ['muted'], - label: 'Muted', - }, -}; - export const Indent = { render, args: { From bcdddbcf05d6c64fc46b8a312953d0488f86e4a1 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 24 Nov 2023 11:16:35 +0100 Subject: [PATCH 4/6] :fire: [#36] Remove indent variant It is unused and does not follow NL DS constructs. --- design-tokens | 2 +- src/components/Anchor/Anchor.js | 2 -- src/components/Anchor/Anchor.mdx | 1 - src/components/Anchor/Anchor.stories.js | 10 +--------- src/scss/components/_anchor.scss | 16 ---------------- 5 files changed, 2 insertions(+), 29 deletions(-) diff --git a/design-tokens b/design-tokens index 904756297..e661fb4c6 160000 --- a/design-tokens +++ b/design-tokens @@ -1 +1 @@ -Subproject commit 904756297a9d2bbea5c1bf40d10ced2ec0206fbe +Subproject commit e661fb4c6a9f61f57cb822279b3cbd7c219e8120 diff --git a/src/components/Anchor/Anchor.js b/src/components/Anchor/Anchor.js index db9bba75d..038c041d0 100644 --- a/src/components/Anchor/Anchor.js +++ b/src/components/Anchor/Anchor.js @@ -9,7 +9,6 @@ export const ANCHOR_MODIFIERS = [ // OF specific 'hover', 'inherit', - 'indent', ]; const Anchor = ({children, href, modifiers = [], ...extraProps}) => { @@ -20,7 +19,6 @@ const Anchor = ({children, href, modifiers = [], ...extraProps}) => { 'utrecht-link--current': modifiers.includes('current'), 'utrecht-link--openforms-hover': modifiers.includes('hover'), 'utrecht-link--openforms-inherit': modifiers.includes('inherit'), - 'utrecht-link--openforms-indent': modifiers.includes('indent'), } ); return ( diff --git a/src/components/Anchor/Anchor.mdx b/src/components/Anchor/Anchor.mdx index 476181bc1..c226dd363 100644 --- a/src/components/Anchor/Anchor.mdx +++ b/src/components/Anchor/Anchor.mdx @@ -34,7 +34,6 @@ The custom modifiers are _deprecated_. Instead, see if we can apply NL DS varian - diff --git a/src/components/Anchor/Anchor.stories.js b/src/components/Anchor/Anchor.stories.js index 59646d576..f6f11885a 100644 --- a/src/components/Anchor/Anchor.stories.js +++ b/src/components/Anchor/Anchor.stories.js @@ -19,7 +19,7 @@ export default { }; const render = ({label, ...args}) => ( - + {label} ); @@ -39,14 +39,6 @@ export const Hover = { }, }; -export const Indent = { - render, - args: { - modifiers: ['indent'], - label: 'Indent', - }, -}; - export const Inherit = { render, args: { diff --git a/src/scss/components/_anchor.scss b/src/scss/components/_anchor.scss index 181a41998..ae68513f9 100644 --- a/src/scss/components/_anchor.scss +++ b/src/scss/components/_anchor.scss @@ -40,22 +40,6 @@ color: inherit; } } - - @include bem.modifier('openforms-muted') { - color: var(--of-utrecht-link-muted-color, var(--of-color-fg-muted)); - - &:hover { - --of-utrecht-link-muted-color: var(--of-color-fg); - } - - &.utrecht-link--openforms-active { - --of-utrecht-link-muted-color: var(--of-color-fg); - } - } - - @include bem.modifier('openforms-indent') { - padding-left: 0.6em; - } } /** From 00a22aa798b0cf352c66dff0a105957b40976aa5 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 24 Nov 2023 11:19:44 +0100 Subject: [PATCH 5/6] :arrow_up: [#36] Bump design tokens version --- design-tokens | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/design-tokens b/design-tokens index e661fb4c6..ff79cdda4 160000 --- a/design-tokens +++ b/design-tokens @@ -1 +1 @@ -Subproject commit e661fb4c6a9f61f57cb822279b3cbd7c219e8120 +Subproject commit ff79cdda4f02e2fec08e95e1e399ac25244ef8c4 diff --git a/package.json b/package.json index 4edaa4c5d..cf7715e1c 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "@floating-ui/react": "^0.24.2", "@formio/protected-eval": "^1.2.1", "@fortawesome/fontawesome-free": "^6.1.1", - "@open-formulieren/design-tokens": "^0.49.0", + "@open-formulieren/design-tokens": "^0.50.0", "@sentry/react": "^6.13.2", "@sentry/tracing": "^6.13.2", "@trivago/prettier-plugin-sort-imports": "^4.0.0", From a3cfe62eb820a988ea7d3066670cafc5de8dfa64 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 24 Nov 2023 12:22:57 +0100 Subject: [PATCH 6/6] :art: [#36] Simplify building link modifiers list From PR feedback - unused arguments are removed, which allows for a simpler list building implementation. --- .../ProgressIndicator/ProgressIndicatorItem.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/ProgressIndicator/ProgressIndicatorItem.js b/src/components/ProgressIndicator/ProgressIndicatorItem.js index 507750bee..27abf1bbd 100644 --- a/src/components/ProgressIndicator/ProgressIndicatorItem.js +++ b/src/components/ProgressIndicator/ProgressIndicatorItem.js @@ -7,8 +7,12 @@ import {getBEMClassName} from 'utils'; import CompletionMark from './CompletionMark'; -const getLinkModifiers = (isActive, isApplicable, isCompleted) => { - return ['inherit', 'hover', isActive ? 'current' : undefined].filter(mod => mod !== undefined); +const getLinkModifiers = isActive => { + const modifiers = ['inherit', 'hover']; + if (isActive) { + modifiers.push('current'); + } + return modifiers; }; /** @@ -40,7 +44,7 @@ export const ProgressIndicatorItem = ({