fix(cc): no classes styling the same CSS properties are set on one element

lingui.config.ts

@@ -50,6 +50,10 @@ const config: LinguiConfig = {
       include: ['packages/attention/src/**/*.{ts,tsx}'],
       path: 'packages/attention/src/locales/{locale}/messages',
     },
+    {
+      include: ['packages/_helpers/attention.tsx'],
+      path: 'packages/attention/src/locales/{locale}/messages',
+    },
     {
       include: ['packages/pagination/src/**/*.{ts,tsx}'],
       path: 'packages/pagination/src/locales/{locale}/messages',

package.json

@@ -54,7 +54,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@warp-ds/css": "2.0.0-next.4",
+    "@warp-ds/css": "2.0.0",
     "react": "18.x"
   },
   "scripts": {
@@ -137,7 +137,7 @@
     "@chbphone55/classnames": "2.0.0",
     "@lingui/core": "4.11.2",
     "@warp-ds/core": "1.1.5",
-    "@warp-ds/css": "2.0.0-next.4",
+    "@warp-ds/css": "2.0.0",
     "@warp-ds/icons": "2.0.2",
     "react-focus-lock": "2.12.1",
     "resize-observer-polyfill": "1.5.1",

packages/_helpers/affix.tsx

@@ -37,11 +37,7 @@ export function Affix(props: AffixProps) {
       'aria-label': !props.label ? props['aria-label'] : undefined,
       type: props.search ? 'submit' : props.clear ? 'reset' : undefined,
       onClick: props.onClick,
-      className: classNames({
-        [classBase.wrapper]: true,
-        [classBase.wrapperWithLabel]: props.label,
-        [classBase.wrapperWithIcon]: !props.label,
-      }),
+      className: classNames([classBase.wrapper, props.label ? classBase.wrapperWithLabel : classBase.wrapperWithIcon]),
     },
     <>
       {props.clear && <IconClose16 />}

packages/_helpers/attention.tsx

@@ -4,7 +4,14 @@ import { i18n } from '@lingui/core';
 import { autoUpdatePosition, opposites } from '@warp-ds/core/attention';
 import type { AttentionState, Directions } from '@warp-ds/core/attention';
 
+import { messages as daMessages } from '../attention/src/locales/da/messages.mjs';
+import { messages as enMessages } from '../attention/src/locales/en/messages.mjs';
+import { messages as fiMessages } from '../attention/src/locales/fi/messages.mjs';
+import { messages as nbMessages } from '../attention/src/locales/nb/messages.mjs';
 import type { AttentionProps, AttentionVariants, ReferenceElement } from '../attention/src/props.js';
+import { activateI18n } from '../i18n.js';
+
+activateI18n(enMessages, nbMessages, fiMessages, daMessages);
 
 export const getVariant = (variantProps: AttentionVariants, variantClasses: any) =>
   Object.keys(variantClasses).find((b) => !!variantProps[b]) || '';

packages/_helpers/clickable.tsx

@@ -65,7 +65,7 @@ export function Clickable({ children, radio, checkbox, value, ...props }: Clicka
       props.href ? 'a' : 'button',
       {
         ...props,
-        className: classNames(ccClickable.buttonOrLink, props.className),
+        className: classNames(props.className, ccClickable.buttonOrLink),
         type: props.href ? undefined : props.type || 'button',
       },
       <>

packages/_helpers/dead-toggle.tsx

@@ -50,10 +50,10 @@ export function DeadToggle(props: DeadToggleProps) {
       <Item
         type={type}
         inputClassName={ccDeadToggle.input}
-        labelClassName={classNames(props.labelClassName, {
-          [ccDeadToggle.labelRadio]: props.radio,
-          [ccDeadToggle.labelCheckbox]: props.checkbox,
-        })}
+        labelClassName={classNames(props.labelClassName, [
+          props.radio && ccDeadToggle.labelRadio,
+          props.checkbox && ccDeadToggle.labelCheckbox,
+        ])}
         name={props.name ? `${props.name}:dead-toggle` : 'dead-toggle'}
         controlled={true}
         onChange={() => undefined}

packages/_helpers/help-text.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { classNames } from '@chbphone55/classnames';
+import { helpText as ccHelpText } from '@warp-ds/css/component-classes';
+
+interface HelpTextProps {
+  /** Id for helpText */
+  helpId?: string;
+
+  /** The content to display as the help text. */
+  helpText?: React.ReactNode;
+
+  /** Whether to display the helpText in an invalid or valid state */
+  isInvalid?: boolean;
+}
+
+export function HelpText(props: HelpTextProps) {
+  const helpTextClasses = classNames([ccHelpText.base, props.isInvalid ? ccHelpText.colorInvalid : ccHelpText.color]);
+
+  return (
+    <div id={props.helpId} className={helpTextClasses}>
+      {props.helpText}
+    </div>
+  );
+}

packages/_helpers/index.ts

@@ -1,5 +1,6 @@
+export { Affix } from './affix.js';
 export { Clickable } from './clickable.js';
 export { DeadToggle } from './dead-toggle.js';
-export { Affix } from './affix.js';
 export { ExpandTransition } from './expand-transition.js';
+export { HelpText } from './help-text.js';
 export { UnstyledHeading } from './unstyled-heading.js';

packages/alert/src/component.tsx

@@ -17,8 +17,8 @@ export function Alert({ show, type, role = 'alert', children, ...props }: PropsW
 
   return (
     <ExpandTransition show={show}>
-      <div role={role} className={classNames(props.className, `${ccAlert.alert} ${variantClasses}`)} style={props.style}>
-        <div className={`${ccAlert.icon} ${iconVariantClasses}`}>{iconMap[type]}</div>
+      <div role={role} className={classNames(props.className, [ccAlert.wrapper, variantClasses])} style={props.style}>
+        <div className={classNames([ccAlert.icon, iconVariantClasses])}>{iconMap[type]}</div>
         <div className={ccAlert.textWrapper}>{children}</div>
       </div>
     </ExpandTransition>

packages/attention/src/component.tsx

@@ -56,8 +56,6 @@ export function Attention(props: AttentionProps) {
 
   activateI18n(enMessages, nbMessages, fiMessages, daMessages);
 
-  const wrapperClasses = classNames(ccAttention.base, variantClasses[getVariant(rest, variantClasses)].wrapper);
-
   const [actualDirection, setActualDirection] = useState(placement);
   // Don't show attention element before its position is computed on first render
   const [isVisible, setIsVisible] = useState<boolean | undefined>(false);
@@ -134,6 +132,16 @@ export function Attention(props: AttentionProps) {
 
   const defaultAriaLabel = () => `${activeAttentionType(props)} ${!props.noArrow ? pointingAtDirection(actualDirection) : ''}`;
 
+  const containerClasses = classNames(className, [
+    !props.callout && ccAttention.notCallout,
+    {
+      invisible: !isVisible && !props.callout,
+      hidden: !isVisible && !props.tooltip,
+    },
+  ]);
+
+  const wrapperClasses = classNames([ccAttention.base, variantClasses[getVariant(rest, variantClasses)].wrapper]);
+
   useEffect(() => {
     // targetEl can be undefined if props.callout is true.
     // However, useAutoUpdatePosition hook is using @warp-ds/core, which uses Floating-ui's computePosition(). Floating-ui's computePosition() requires a defined targetEl to be able to compute the attentionEl's position and the attentionEl's arrow position.
@@ -164,17 +172,7 @@ export function Attention(props: AttentionProps) {
   useAutoUpdatePosition(targetElRef, isShowing, attentionEl, attentionState);
 
   return !props.callout && initialTargetEl === undefined ? null : (
-    <div
-      data-testid="attention-el"
-      className={classNames(
-        {
-          [ccAttention.notCallout]: !props.callout,
-          invisible: !isVisible && !props.callout,
-          hidden: !isVisible && !props.tooltip,
-        },
-        className,
-      )}
-      ref={attentionEl}>
+    <div data-testid="attention-el" className={containerClasses} ref={attentionEl}>
       <div
         role={props.role === '' ? undefined : props.tooltip ? 'tooltip' : 'img'}
         aria-label={ariaLabel === '' ? undefined : ariaLabel ?? defaultAriaLabel()}
@@ -185,13 +183,11 @@ export function Attention(props: AttentionProps) {
         {canClose && (
           <button
             type="button"
-            aria-label={i18n._(
-              /*i18n*/ {
-                id: 'attention.aria.close',
-                message: 'Close',
-                comment: 'Aria label for the close button in attention',
-              },
-            )}
+            aria-label={i18n._({
+              id: 'attention.aria.close',
+              message: 'Close',
+              comment: 'Aria label for the close button in attention',
+            })}
             onClick={onDismiss}
             onKeyDown={(event) => {
               if (!props.onDismiss) return;
@@ -210,11 +206,11 @@ export function Attention(props: AttentionProps) {
 
 const Arrow = forwardRef<HTMLDivElement, ArrowProps>(({ direction, ...rest }, ref) => {
   const arrowDirection = opposites[direction];
-  const arrowClasses = classNames(
+  const arrowClasses = classNames([
     ccAttention.arrowBase,
     ccAttention[`arrowDirection${arrowDirectionClassname(arrowDirection)}`],
     variantClasses[getVariant(rest, variantClasses)].arrow,
-  );
+  ]);
 
   return <div data-testid="attention-arrow-el" ref={ref} className={arrowClasses} />;
 });

packages/attention/src/locales/da/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.callout\":\"En grøn taleboble der introducerer noget nyt\",\"attention.aria.close\":\"Luk\",\"attention.aria.highlight\":\"En opmærksomhedsskabende taleboble med vigtig information\",\"attention.aria.pointingDown\":\"peger nedad\",\"attention.aria.pointingLeft\":\"peger til venstre\",\"attention.aria.pointingRight\":\"peger til højre\",\"attention.aria.pointingUp\":\"peger opad\",\"attention.aria.popover\":\"En hvid taleboble med mere information\",\"attention.aria.tooltip\":\"En sort taleboble med flere oplysninger\"}");
+/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.close\":\"Luk\",\"attention.aria.callout\":\"En grøn taleboble der introducerer noget nyt\",\"attention.aria.highlight\":\"En opmærksomhedsskabende taleboble med vigtig information\",\"attention.aria.pointingDown\":\"peger nedad\",\"attention.aria.pointingLeft\":\"peger til venstre\",\"attention.aria.pointingRight\":\"peger til højre\",\"attention.aria.pointingUp\":\"peger opad\",\"attention.aria.popover\":\"En hvid taleboble med mere information\",\"attention.aria.tooltip\":\"En sort taleboble med flere oplysninger\"}");

packages/attention/src/locales/da/messages.po

@@ -15,58 +15,58 @@ msgstr ""
 "X-Crowdin-Project-ID: 141\n"
 "X-Crowdin-Language: da\n"
 "X-Crowdin-File-ID: 12398\n"
+"PO-Revision-Date: \n"
+
+#. Aria label for the close button in attention
+#. js-lingui-explicit-id
+#: packages/attention/src/component.tsx:186
+#~ msgid "attention.aria.close"
+#~ msgstr "Luk"
 
 #. Default screenreader message for callout speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:150
+#: packages/_helpers/attention.tsx:66
 msgid "attention.aria.callout"
 msgstr "En grøn taleboble der introducerer noget nyt"
 
-#. Aria label for the close button in attention
-#. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:225
-msgid "attention.aria.close"
-msgstr "Luk"
-
 #. Default screenreader message for highlighted speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:164
+#: packages/_helpers/attention.tsx:78
 msgid "attention.aria.highlight"
 msgstr "En opmærksomhedsskabende taleboble med vigtig information"
 
 #. Default screenreader message for bottom direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:121
+#: packages/_helpers/attention.tsx:39
 msgid "attention.aria.pointingDown"
 msgstr "peger nedad"
 
 #. Default screenreader message for left direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:128
+#: packages/_helpers/attention.tsx:47
 msgid "attention.aria.pointingLeft"
 msgstr "peger til venstre"
 
 #. Default screenreader message for right direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:114
+#: packages/_helpers/attention.tsx:31
 msgid "attention.aria.pointingRight"
 msgstr "peger til højre"
 
 #. Default screenreader message for top direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:107
+#: packages/_helpers/attention.tsx:23
 msgid "attention.aria.pointingUp"
 msgstr "peger opad"
 
 #. Default screenreader message for popover speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:157
+#: packages/_helpers/attention.tsx:72
 msgid "attention.aria.popover"
 msgstr "En hvid taleboble med mere information"
 
 #. Default screenreader message for tooltip in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:143
+#: packages/_helpers/attention.tsx:60
 msgid "attention.aria.tooltip"
 msgstr "En sort taleboble med flere oplysninger"
-

packages/attention/src/locales/en/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.callout\":\"A green speech bubble introducing something new\",\"attention.aria.close\":\"Close\",\"attention.aria.highlight\":\"An attention speech bubble with important information\",\"attention.aria.pointingDown\":\"pointing down\",\"attention.aria.pointingLeft\":\"pointing left\",\"attention.aria.pointingRight\":\"pointing right\",\"attention.aria.pointingUp\":\"pointing up\",\"attention.aria.popover\":\"A white speech bubble providing additional information\",\"attention.aria.tooltip\":\"A black speech bubble providing complementary information\"}");
+/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.close\":\"Close\",\"attention.aria.callout\":\"A green speech bubble introducing something new\",\"attention.aria.highlight\":\"An attention speech bubble with important information\",\"attention.aria.pointingDown\":\"pointing down\",\"attention.aria.pointingLeft\":\"pointing left\",\"attention.aria.pointingRight\":\"pointing right\",\"attention.aria.pointingUp\":\"pointing up\",\"attention.aria.popover\":\"A white speech bubble providing additional information\",\"attention.aria.tooltip\":\"A black speech bubble providing complementary information\"}");

packages/attention/src/locales/en/messages.po

@@ -14,57 +14,56 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Crowdin-SourceKey: msgstr\n"
 
+#. Aria label for the close button in attention
+#. js-lingui-explicit-id
+#: packages/attention/src/component.tsx:186
+#~ msgid "attention.aria.close"
+#~ msgstr "Close"
+
 #. Default screenreader message for callout speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:150
+#: packages/_helpers/attention.tsx:66
 msgid "attention.aria.callout"
 msgstr "A green speech bubble introducing something new"
 
-#. Aria label for the close button in attention
-#. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:225
-msgid "attention.aria.close"
-msgstr "Close"
-
 #. Default screenreader message for highlighted speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:164
+#: packages/_helpers/attention.tsx:78
 msgid "attention.aria.highlight"
 msgstr "An attention speech bubble with important information"
 
 #. Default screenreader message for bottom direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:121
+#: packages/_helpers/attention.tsx:39
 msgid "attention.aria.pointingDown"
 msgstr "pointing down"
 
 #. Default screenreader message for left direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:128
+#: packages/_helpers/attention.tsx:47
 msgid "attention.aria.pointingLeft"
 msgstr "pointing left"
 
 #. Default screenreader message for right direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:114
+#: packages/_helpers/attention.tsx:31
 msgid "attention.aria.pointingRight"
 msgstr "pointing right"
 
 #. Default screenreader message for top direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:107
+#: packages/_helpers/attention.tsx:23
 msgid "attention.aria.pointingUp"
 msgstr "pointing up"
 
 #. Default screenreader message for popover speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:157
+#: packages/_helpers/attention.tsx:72
 msgid "attention.aria.popover"
 msgstr "A white speech bubble providing additional information"
 
 #. Default screenreader message for tooltip in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:143
+#: packages/_helpers/attention.tsx:60
 msgid "attention.aria.tooltip"
 msgstr "A black speech bubble providing complementary information"
-

packages/attention/src/locales/fi/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.callout\":\"Vihreä puhekupla, joka esittelee jotain uutta\",\"attention.aria.close\":\"Sulje\",\"attention.aria.highlight\":\"Puhekupla, joka sisältää tärkeää tietoa\",\"attention.aria.pointingDown\":\"osoittaa alas\",\"attention.aria.pointingLeft\":\"osoittaa vasemmalle\",\"attention.aria.pointingRight\":\"osoittaa oikealle\",\"attention.aria.pointingUp\":\"osoittaa ylös\",\"attention.aria.popover\":\"Valkoinen puhekupla, joka tarjoaa lisätietoa\",\"attention.aria.tooltip\":\"Musta puhekupla, joka tarjoaa täydentävää tietoa\"}");
+/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.close\":\"Sulje\",\"attention.aria.callout\":\"Vihreä puhekupla, joka esittelee jotain uutta\",\"attention.aria.highlight\":\"Puhekupla, joka sisältää tärkeää tietoa\",\"attention.aria.pointingDown\":\"osoittaa alas\",\"attention.aria.pointingLeft\":\"osoittaa vasemmalle\",\"attention.aria.pointingRight\":\"osoittaa oikealle\",\"attention.aria.pointingUp\":\"osoittaa ylös\",\"attention.aria.popover\":\"Valkoinen puhekupla, joka tarjoaa lisätietoa\",\"attention.aria.tooltip\":\"Musta puhekupla, joka tarjoaa täydentävää tietoa\"}");