Merge pull request #602 from open-formulieren/chore/36-cleanup-anchor…

…-modifiers

Cleanup anchor modifiers

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",

src/components/Anchor/Anchor.js

@@ -3,13 +3,23 @@ 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',
+];
 
 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'),
+    }
   );
   return (
     <UtrechtLink className={className} href={href || undefined} {...extraProps}>

src/components/Anchor/Anchor.mdx

@@ -23,15 +23,18 @@ The standard look of the anchor component without modifiers.
 
 <Canvas of={AnchorStories.Default} />
 
+## NL Design System variants
+
+<Canvas of={AnchorStories.Placeholder} />
+<Canvas of={AnchorStories.Current} />
+
 ## Variants by modifier
 
+The custom modifiers are _deprecated_. Instead, see if we can apply NL DS variants.
+
 <Canvas>
   <Story of={AnchorStories.Hover} />
-  <Story of={AnchorStories.Active} />
-  <Story of={AnchorStories.Muted} />
-  <Story of={AnchorStories.Indent} />
   <Story of={AnchorStories.Inherit} />
-  <Story of={AnchorStories.Placeholder} />
 </Canvas>
 
 ## Props

src/components/Anchor/Anchor.stories.js

@@ -19,7 +19,7 @@ export default {
 };
 
 const render = ({label, ...args}) => (
-  <Anchor href="https://example.com" {...args}>
+  <Anchor href="https://example.com" target="_blank" {...args}>
     {label}
   </Anchor>
 );
@@ -39,30 +39,6 @@ export const Hover = {
   },
 };
 
-export const Active = {
-  render,
-  args: {
-    modifiers: ['active'],
-    label: 'Active',
-  },
-};
-
-export const Muted = {
-  render,
-  args: {
-    modifiers: ['muted'],
-    label: 'Muted',
-  },
-};
-
-export const Indent = {
-  render,
-  args: {
-    modifiers: ['indent'],
-    label: 'Indent',
-  },
-};
-
 export const Inherit = {
   render,
   args: {
@@ -71,10 +47,33 @@ 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: {
     label: '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',
+  },
+};

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 ? 'active' : 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 = ({
         <Link
           to={to}
           placeholder={!canNavigateTo}
-          modifiers={canNavigateTo ? getLinkModifiers(isActive, isApplicable, isCompleted) : []}
+          modifiers={canNavigateTo ? getLinkModifiers(isActive) : []}
           aria-label={label}
         >
           <FormattedMessage

src/scss/components/_anchor.scss

@@ -33,33 +33,13 @@
     }
   }
 
-  @include bem.modifier('openforms-active') {
-    font-weight: bold;
-  }
-
   @include bem.modifier('openforms-inherit') {
     color: inherit;
 
     &:hover {
       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;
-  }
 }
 
 /**

src/scss/components/_progress-indicator.scss

@@ -94,6 +94,6 @@
 
   @include bem.element('label') {
     flex-grow: 1;
-    word-break: break-all;
+    hyphens: auto;
   }
 }