refactor!: token renaming (#142)

mittwald · Jan 25, 2024 · f710326 · f710326 · github-actions · Jan 25, 2024
1 parent 1071145
commit f710326
Show file tree

Hide file tree

Showing 36 changed files with 333 additions and 188 deletions.
diff --git a/packages/components/src/components/Badge/Badge.module.scss b/packages/components/src/components/Badge/Badge.module.scss
@@ -56,4 +56,4 @@
 @include variant(info);
 @include variant(success);
 @include variant(warning);
-@include variant(negative);
+@include variant(danger);
diff --git a/packages/components/src/components/Badge/stories/Variants.stories.tsx b/packages/components/src/components/Badge/stories/Variants.stories.tsx
@@ -29,10 +29,10 @@ export const Warning: Story = {
   ),
 };
 
-export const Negative: Story = {
+export const Danger: Story = {
   render: (props) => (
-    <Badge variant="negative" {...props}>
-      Negative
+    <Badge variant="danger" {...props}>
+      Danger
     </Badge>
   ),
 };
diff --git a/packages/components/src/components/Button/Button.module.scss b/packages/components/src/components/Button/Button.module.scss
@@ -20,41 +20,30 @@
   }
 
   &:has(.icon) {
-    /* Apply line-height when empty */
-    &::after {
-      content: "\200B";
-      visibility: hidden;
-    }
+    padding: var(--button--padding-with-icon);
   }
 }
 
-/* Elements */
-.text {
-  order: 1;
-  margin-inline-start: var(--button--icon-to-text-spacing);
-}
-
-.icon {
-  order: 0;
-}
-
 /* Variants */
 @mixin variant($variant) {
   .#{$variant} {
     background-color: var(--button--#{$variant}-background-color--default);
-    color: var(--button--#{$variant}-color);
+    color: var(--button--#{$variant}-color--default);
 
     &:hover {
       background-color: var(--button--#{$variant}-background-color--hover);
+      color: var(--button--#{$variant}-color--hover);
     }
 
     &[data-pressed] {
       background-color: var(--button--#{$variant}-background-color--pressed);
+      color: var(--button--#{$variant}-color--pressed);
     }
   }
 }
 
 @include variant(primary);
 @include variant(accent);
-@include variant(negative);
+@include variant(danger);
 @include variant(secondary);
+@include variant(plain);
diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
@@ -10,7 +10,7 @@ import {
 
 export interface ButtonProps extends PropsWithChildren<Aria.ButtonProps> {
   /** @default "primary" */
-  variant?: "primary" | "accent" | "secondary" | "negative";
+  variant?: "primary" | "accent" | "secondary" | "danger" | "plain";
 }
 
 export const Button: FC<ButtonProps> = (props) => {
@@ -24,9 +24,6 @@ export const Button: FC<ButtonProps> = (props) => {
   const rootClassName = clsx(styles.button, styles[variant], className);
 
   const propsContext: PropsContext = {
-    Text: {
-      className: styles.text,
-    },
     Icon: {
       className: styles.icon,
     },

diff --git a/packages/components/src/components/Button/stories/Default.stories.tsx b/packages/components/src/components/Button/stories/Default.stories.tsx
@@ -3,7 +3,6 @@ import Button from "../Button";
 import { faStar } from "@fortawesome/free-regular-svg-icons/faStar";
 import React from "react";
 import { Icon } from "@/components/Icon";
-import { Text } from "@/components/Text";
 import { action } from "@storybook/addon-actions";
 
 const meta: Meta<typeof Button> = {
@@ -36,15 +35,6 @@ export const Disabled: Story = {
 };
 
 export const WithIcon: Story = {
-  render: (props) => (
-    <Button {...props}>
-      <Icon faIcon={faStar} />
-      <Text>Add to favorites</Text>
-    </Button>
-  ),
-};
-
-export const WithOnlyIcon: Story = {
   render: (props) => (
     <Button {...props} aria-label="Add to favorites">
       <Icon faIcon={faStar} />

diff --git a/packages/components/src/components/Button/stories/EdgeCases.stories.tsx b/packages/components/src/components/Button/stories/EdgeCases.stories.tsx
@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import Button from "../Button";
 import React from "react";
-import { faStar } from "@fortawesome/free-regular-svg-icons/faStar";
-import { Icon } from "@/components/Icon";
-import { Text } from "@/components/Text";
 import { dummyText } from "@/lib/dev/dummyText";
 import defaultMeta from "./Default.stories";
 
@@ -28,14 +25,3 @@ export const WithBreak: Story = {
     </Button>
   ),
 };
-
-export const WithBreakAndIcon: Story = {
-  render: (props) => (
-    <Button {...props}>
-      <Icon faIcon={faStar} />
-      <Text>
-        Add to <br /> favorites
-      </Text>
-    </Button>
-  ),
-};
diff --git a/packages/components/src/components/Button/stories/Variants.stories.tsx b/packages/components/src/components/Button/stories/Variants.stories.tsx
@@ -29,8 +29,14 @@ export const Secondary: Story = {
   },
 };
 
-export const Negative: Story = {
+export const Danger: Story = {
   args: {
-    variant: "negative",
+    variant: "danger",
+  },
+};
+
+export const Plain: Story = {
+  args: {
+    variant: "plain",
   },
 };
diff --git a/packages/components/src/components/Link/Link.module.scss b/packages/components/src/components/Link/Link.module.scss
@@ -33,4 +33,4 @@
 }
 
 @include variant(primary);
-@include variant(negative);
+@include variant(danger);
diff --git a/packages/components/src/components/Link/Link.tsx b/packages/components/src/components/Link/Link.tsx
@@ -7,7 +7,7 @@ import clsx from "clsx";
 export interface LinkProps
   extends PropsWithChildren<Omit<Aria.LinkProps, "children">> {
   /** @default "default" */
-  variant?: "default" | "negative";
+  variant?: "default" | "danger";
 }
 
 export const Link: FC<LinkProps> = (props) => {

diff --git a/packages/components/src/components/Link/stories/Default.stories.tsx b/packages/components/src/components/Link/stories/Default.stories.tsx
@@ -28,6 +28,6 @@ export const Default: Story = {};
 
 export const Disabled: Story = { args: { isDisabled: true } };
 
-export const Negative: Story = {
-  args: { variant: "negative" },
+export const Danger: Story = {
+  args: { variant: "danger" },
 };
diff --git a/packages/components/src/components/Note/Note.module.scss b/packages/components/src/components/Note/Note.module.scss
@@ -62,4 +62,4 @@
 
 @include variant(info);
 @include variant(warning);
-@include variant(negative);
+@include variant(danger);
diff --git a/packages/components/src/components/Note/stories/Variants.stories.tsx b/packages/components/src/components/Note/stories/Variants.stories.tsx
@@ -39,8 +39,8 @@ export const Warning: Story = {
   ),
 };
 
-export const Negative: Story = {
-  args: { variant: "negative" },
+export const Danger: Story = {
+  args: { variant: "danger" },
   render: (props) => (
     <Note {...props}>
       <Heading>No SSL certificate could be issued</Heading>

diff --git a/...mponents/RadioGroup/RadioGroup.module.css → ...ponents/RadioGroup/RadioGroup.module.scss b/...mponents/RadioGroup/RadioGroup.module.css → ...ponents/RadioGroup/RadioGroup.module.scss
@@ -15,8 +15,9 @@
       grid-column: 1 / -1;
       margin-bottom: calc(
         (
-            var(--radio-group--radio-to-radio-spacing) -
-              var(--form-control--label-to-control-spacing)
+            var(--radio-group--radio-to-radio-spacing) - var(
+                --form-control--label-to-control-spacing
+              )
           ) * -1
       );
     }
@@ -26,8 +27,9 @@
       grid-column: 1 / -1;
       margin-top: calc(
         (
-            var(--radio-group--radio-to-radio-spacing) -
-              var(--form-control--control-to-info-spacing)
+            var(--radio-group--radio-to-radio-spacing) - var(
+                --form-control--control-to-info-spacing
+              )
           ) * -1
       );
     }
@@ -42,6 +44,18 @@
   &:has(.content) {
     grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
   }
+
+  /* With field error */
+  &:has(.fieldError) {
+    .fieldDescription {
+      display: none;
+    }
+  }
+
+  /* With custom field error */
+  &:has(.customFieldError) .fieldError {
+    display: none;
+  }
 }
 
 .label {
@@ -55,15 +69,3 @@
   margin-top: var(--form-control--control-to-info-spacing);
   width: 100%;
 }
-
-/* With field error */
-&:has(.fieldError) {
-  .fieldDescription {
-    display: none;
-  }
-}
-
-/* With custom field error */
-&:has(.customFieldError) .fieldError {
-  display: none;
-}
diff --git a/packages/components/src/components/RadioGroup/RadioGroup.tsx b/packages/components/src/components/RadioGroup/RadioGroup.tsx
@@ -1,5 +1,5 @@
 import React, { FC, PropsWithChildren } from "react";
-import styles from "./RadioGroup.module.css";
+import styles from "./RadioGroup.module.scss";
 import * as Aria from "react-aria-components";
 import clsx from "clsx";
 import { PropsContext, PropsContextProvider } from "@/lib/propsContext";
@@ -11,7 +11,7 @@ export interface RadioGroupProps
 export const RadioGroup: FC<RadioGroupProps> = (props) => {
   const { children, className, ...rest } = props;
 
-  const rootClassName = clsx(className, styles.root);
+  const rootClassName = clsx(styles.radioGroup, className);
 
   const propsContext: PropsContext = {
     Label: {

diff --git a/...ioGroup/components/Radio/Radio.module.css → ...oGroup/components/Radio/Radio.module.scss b/...ioGroup/components/Radio/Radio.module.css → ...oGroup/components/Radio/Radio.module.scss
diff --git a/packages/components/src/components/RadioGroup/components/Radio/Radio.tsx b/packages/components/src/components/RadioGroup/components/Radio/Radio.tsx
@@ -1,5 +1,5 @@
 import React, { FC, PropsWithChildren } from "react";
-import styles from "./Radio.module.css";
+import styles from "./Radio.module.scss";
 import * as Aria from "react-aria-components";
 import clsx from "clsx";
 import { PropsContext, PropsContextProvider } from "@/lib/propsContext";
@@ -12,7 +12,7 @@ export interface RadioProps
 export const Radio: FC<RadioProps> = (props) => {
   const { children, className, ...rest } = props;
 
-  const rootClassName = clsx(className, styles.root);
+  const rootClassName = clsx(styles.radio, className);
 
   const propsContext: PropsContext = {
     Icon: {

diff --git a/packages/components/src/components/StatusIcon/locales/de-DE.locale.json b/packages/components/src/components/StatusIcon/locales/de-DE.locale.json
@@ -1,6 +1,6 @@
 {
+  "statusIcon.danger": "Fehler",
   "statusIcon.info": "Information",
-  "statusIcon.negative": "Fehler",
   "statusIcon.success": "Erfolgreich",
   "statusIcon.warning": "Warnung"
 }
diff --git a/packages/components/src/components/StatusIcon/locales/en-EN.locale.json b/packages/components/src/components/StatusIcon/locales/en-EN.locale.json
@@ -1,6 +1,6 @@
 {
+  "statusIcon.danger": "Error",
   "statusIcon.info": "Information",
-  "statusIcon.negative": "Error",
   "statusIcon.success": "Successful",
   "statusIcon.warning": "Warning"
 }
diff --git a/packages/components/src/components/StatusIcon/stories/Default.stories.tsx b/packages/components/src/components/StatusIcon/stories/Default.stories.tsx
@@ -30,6 +30,6 @@ export const Warning: Story = {
   args: { variant: "warning" },
 };
 
-export const Negative: Story = {
-  args: { variant: "negative" },
+export const Danger: Story = {
+  args: { variant: "danger" },
 };
diff --git a/packages/components/src/components/Switch/Switch.module.scss b/packages/components/src/components/Switch/Switch.module.scss
@@ -22,6 +22,10 @@
       background-color: var(--switch--indicator-color--disabled);
     }
   }
+
+  &[data-selected] .indicator:before {
+    transform: translate(100%);
+  }
 }
 
 /* Elements */
@@ -74,4 +78,4 @@
 }
 
 @include variant(accent);
-@include variant(negative);
+@include variant(danger);
diff --git a/packages/components/src/components/Switch/Switch.tsx b/packages/components/src/components/Switch/Switch.tsx
@@ -8,7 +8,7 @@ export interface SwitchProps
   /** @default "trailing" */
   labelPosition?: "leading" | "trailing";
   /** @default "accent" */
-  variant?: "accent" | "negative";
+  variant?: "accent" | "danger";
 }
 
 export const Switch: FC<SwitchProps> = (props) => {

diff --git a/packages/components/src/components/Switch/stories/Variants.stories.tsx b/packages/components/src/components/Switch/stories/Variants.stories.tsx
@@ -16,10 +16,10 @@ export const Accent: Story = {};
 
 export const AccentDisabled: Story = { args: { isDisabled: true } };
 
-export const Negative: Story = {
-  args: { variant: "negative" },
+export const Danger: Story = {
+  args: { variant: "danger" },
 };
 
-export const NegativeDisabled: Story = {
-  args: { variant: "negative", isDisabled: true },
+export const DangerDisabled: Story = {
+  args: { variant: "danger", isDisabled: true },
 };
diff --git a/packages/components/src/lib/types/props.ts b/packages/components/src/lib/types/props.ts
@@ -1,4 +1,4 @@
-type Variant = "info" | "success" | "warning" | "negative";
+type Variant = "info" | "success" | "warning" | "danger";
 
 export interface StatusVariantProps<TOmit extends Variant = never> {
   variant?: Exclude<Variant, TOmit>;
St.^❔	Category	Percentage	Covered / Total
🟢	Statements	98.04%	100/102
🟢	Branches	93.75%	30/32
🟢	Functions	100%	27/27
🟢	Lines	98.04%	100/102