From c83e7df30b0a26ad363f492690f5df074c4f1e71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Tue, 27 Aug 2024 22:09:19 +0200
Subject: [PATCH] BREAKING CHANGE(web-twig): Remove inverted variant from
 Button and ButtonLink #DS-1445

---
 .../components/Button/Button.stories.twig     |  2 +-
 .../src/Resources/components/Button/README.md | 22 +++++++++----------
 .../Button/stories/ButtonColorsSizes.twig     | 16 ++------------
 .../Button/stories/ButtonDisabled.twig        | 16 ++------------
 .../Button/stories/ButtonLoading.twig         | 16 ++------------
 .../ButtonLink/ButtonLink.stories.twig        |  2 +-
 .../Resources/components/ButtonLink/README.md | 22 +++++++++----------
 .../stories/ButtonLinkColorsSizes.twig        | 16 ++------------
 .../stories/ButtonLinkDisabled.twig           | 16 ++------------
 9 files changed, 34 insertions(+), 94 deletions(-)

diff --git a/packages/web-twig/src/Resources/components/Button/Button.stories.twig b/packages/web-twig/src/Resources/components/Button/Button.stories.twig
index 1eaa9de33c..d9642537c5 100644
--- a/packages/web-twig/src/Resources/components/Button/Button.stories.twig
+++ b/packages/web-twig/src/Resources/components/Button/Button.stories.twig
@@ -3,7 +3,7 @@
 {% block content %}
 
     {% set colors = [
-        'primary', 'secondary', 'tertiary', 'inverted', 'success', 'informative', 'warning', 'danger'
+        'primary', 'secondary', 'tertiary', 'success', 'informative', 'warning', 'danger'
     ] %}
     {% set sizes = [ 'small', 'medium', 'large' ] %}
 
diff --git a/packages/web-twig/src/Resources/components/Button/README.md b/packages/web-twig/src/Resources/components/Button/README.md
index c39189c0db..106bf6da59 100644
--- a/packages/web-twig/src/Resources/components/Button/README.md
+++ b/packages/web-twig/src/Resources/components/Button/README.md
@@ -34,17 +34,17 @@ Without lexer:
 
 ## API
 
-| Name         | Type                                                                                      | Default   | Required | Description                                                                |
-| ------------ | ----------------------------------------------------------------------------------------- | --------- | -------- | -------------------------------------------------------------------------- |
-| `color`      | [Action Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | ✕        | Color variant                                                              |
-| `formtarget` | `string`                                                                                  | `null`    | ✕        | Submit button target                                                       |
-| `isBlock`    | `bool`                                                                                    | `false`   | ✕        | Span the element to the full width of its parent                           |
-| `isDisabled` | `bool`                                                                                    | `false`   | ✕        | If true, Button is disabled                                                |
-| `isLoading`  | `bool`                                                                                    | `false`   | ✕        | If true, Button is in a loading state, disabled and the Spinner is visible |
-| `isSquare`   | `bool`                                                                                    | `false`   | ✕        | If true, Button is square, usually only with an Icon                       |
-| `name`       | `string`                                                                                  | `null`    | ✕        | Submit button name                                                         |
-| `size`       | [Size dictionary][dictionary-size]                                                        | `medium`  | ✕        | Size variant                                                               |
-| `type`       | `string`                                                                                  | `button`  | ✕        | Type of the Button                                                         |
+| Name         | Type                                                                                             | Default   | Required | Description                                                                |
+| ------------ | ------------------------------------------------------------------------------------------------ | --------- | -------- | -------------------------------------------------------------------------- |
+| `color`      | [Action Button Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | ✕        | Color variant                                                              |
+| `formtarget` | `string`                                                                                         | `null`    | ✕        | Submit button target                                                       |
+| `isBlock`    | `bool`                                                                                           | `false`   | ✕        | Span the element to the full width of its parent                           |
+| `isDisabled` | `bool`                                                                                           | `false`   | ✕        | If true, Button is disabled                                                |
+| `isLoading`  | `bool`                                                                                           | `false`   | ✕        | If true, Button is in a loading state, disabled and the Spinner is visible |
+| `isSquare`   | `bool`                                                                                           | `false`   | ✕        | If true, Button is square, usually only with an Icon                       |
+| `name`       | `string`                                                                                         | `null`    | ✕        | Submit button name                                                         |
+| `size`       | [Size dictionary][dictionary-size]                                                               | `medium`  | ✕        | Size variant                                                               |
+| `type`       | `string`                                                                                         | `button`  | ✕        | Type of the Button                                                         |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
index 450e500320..a2065f8e21 100644
--- a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
+++ b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
@@ -5,8 +5,7 @@
 
         <DocsSection title={{ title }}>
             {% for color in colors %}
-
-                {% set renderedContent %}
+                <div>
                     <Button color={ color } size={ size } onclick="alert('Button clicked')">
                         Button {{ color }}
                     </Button>
@@ -18,18 +17,7 @@
                         <VisuallyHidden>Menu</VisuallyHidden>
                         <Icon name="hamburger" />
                     </Button>
-                {% endset %}
-
-                {% if color is same as('inverted') %}
-                    <DocsBox>
-                        {{ renderedContent }}
-                    </DocsBox>
-                {% else %}
-                    <div>
-                        {{ renderedContent }}
-                    </div>
-                {% endif %}
-
+                </div>
             {% endfor %}
         </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
index 6cb57eb692..3a92a7d7ce 100644
--- a/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
+++ b/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
@@ -5,8 +5,7 @@
 
         <DocsSection title={{ title }}>
             {% for color in colors %}
-
-                {% set renderedContent %}
+                <div>
                     <Button color={ color } size={ size } onclick="alert('Button clicked')" isDisabled>
                         Button {{ color }}
                     </Button>
@@ -18,18 +17,7 @@
                         <VisuallyHidden>Menu</VisuallyHidden>
                         <Icon name="hamburger" />
                     </Button>
-                {% endset %}
-
-                {% if color is same as('inverted') %}
-                    <DocsBox>
-                        {{ renderedContent }}
-                    </DocsBox>
-                {% else %}
-                    <div>
-                        {{ renderedContent }}
-                    </div>
-                {% endif %}
-
+                </div>
             {% endfor %}
         </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig
index cfa1908f58..c7057610ac 100644
--- a/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig
+++ b/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig
@@ -5,8 +5,7 @@
 
         <DocsSection title={{ title }}>
             {% for color in colors %}
-
-                {% set renderedContent %}
+                <div>
                     <Button color={ color } size={ size } onclick="alert('Button clicked')" isLoading>
                         Button {{ color }}
                     </Button>
@@ -18,18 +17,7 @@
                         <VisuallyHidden>Menu</VisuallyHidden>
                         <Icon name="hamburger" />
                     </Button>
-                {% endset %}
-
-                {% if color is same as('inverted') %}
-                    <DocsBox>
-                        {{ renderedContent }}
-                    </DocsBox>
-                {% else %}
-                    <div>
-                        {{ renderedContent }}
-                    </div>
-                {% endif %}
-
+                </div>
             {% endfor %}
         </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig
index da8ff050a0..c74e0289c3 100644
--- a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig
+++ b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig
@@ -3,7 +3,7 @@
 {% block content %}
 
     {% set colors = [
-        'primary', 'secondary', 'tertiary', 'inverted', 'success', 'informative', 'warning', 'danger'
+        'primary', 'secondary', 'tertiary', 'success', 'informative', 'warning', 'danger'
     ] %}
     {% set sizes = [ 'small', 'medium', 'large' ] %}
 
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/README.md b/packages/web-twig/src/Resources/components/ButtonLink/README.md
index 2d027b39fb..6704c307a5 100644
--- a/packages/web-twig/src/Resources/components/ButtonLink/README.md
+++ b/packages/web-twig/src/Resources/components/ButtonLink/README.md
@@ -29,17 +29,17 @@ Without lexer:
 
 ## API
 
-| Name         | Type                                                                                      | Default   | Required | Description                                                                    |
-| ------------ | ----------------------------------------------------------------------------------------- | --------- | -------- | ------------------------------------------------------------------------------ |
-| `color`      | [Action Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | ✕        | Color variant                                                                  |
-| `href`       | `string`                                                                                  | —         | ✓        | Link URL                                                                       |
-| `isBlock`    | `bool`                                                                                    | `false`   | ✕        | Span the element to the full width of its parent                               |
-| `isDisabled` | `bool`                                                                                    | `false`   | ✕        | If true, ButtonLink is disabled                                                |
-| `isLoading`  | `bool`                                                                                    | `false`   | ✕        | If true, ButtonLink is in a loading state, disabled and the Spinner is visible |
-| `isSquare`   | `bool`                                                                                    | `false`   | ✕        | If true, ButtonLink is square, usually only with an Icon                       |
-| `size`       | [Size dictionary][dictionary-size]                                                        | `medium`  | ✕        | Size variant                                                                   |
-| `target`     | `string`                                                                                  | `null`    | ✕        | Browsing context for the link                                                  |
-| `title`      | `string`                                                                                  | `null`    | ✕        | Optional title to display on hover                                             |
+| Name         | Type                                                                                             | Default   | Required | Description                                                                    |
+| ------------ | ------------------------------------------------------------------------------------------------ | --------- | -------- | ------------------------------------------------------------------------------ |
+| `color`      | [Action Button Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | ✕        | Color variant                                                                  |
+| `href`       | `string`                                                                                         | —         | ✓        | Link URL                                                                       |
+| `isBlock`    | `bool`                                                                                           | `false`   | ✕        | Span the element to the full width of its parent                               |
+| `isDisabled` | `bool`                                                                                           | `false`   | ✕        | If true, ButtonLink is disabled                                                |
+| `isLoading`  | `bool`                                                                                           | `false`   | ✕        | If true, ButtonLink is in a loading state, disabled and the Spinner is visible |
+| `isSquare`   | `bool`                                                                                           | `false`   | ✕        | If true, ButtonLink is square, usually only with an Icon                       |
+| `size`       | [Size dictionary][dictionary-size]                                                               | `medium`  | ✕        | Size variant                                                                   |
+| `target`     | `string`                                                                                         | `null`    | ✕        | Browsing context for the link                                                  |
+| `title`      | `string`                                                                                         | `null`    | ✕        | Optional title to display on hover                                             |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
index 3d02577247..4f5811c22f 100644
--- a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
+++ b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
@@ -5,8 +5,7 @@
 
         <DocsSection title={{ title }}>
             {% for color in colors %}
-
-                {% set renderedContent %}
+                <div>
                     <ButtonLink color={ color } size={ size } href="#">
                         Button {{ color }}
                     </ButtonLink>
@@ -18,18 +17,7 @@
                         <VisuallyHidden>Menu</VisuallyHidden>
                         <Icon name="link" />
                     </ButtonLink>
-                {% endset %}
-
-                {% if color is same as('inverted') %}
-                    <DocsBox>
-                        {{ renderedContent }}
-                    </DocsBox>
-                {% else %}
-                    <div>
-                        {{ renderedContent }}
-                    </div>
-                {% endif %}
-
+                </div>
             {% endfor %}
         </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
index f93abe8f72..5143dabc48 100644
--- a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
+++ b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
@@ -5,8 +5,7 @@
 
         <DocsSection title={{ title }}>
             {% for color in colors %}
-
-                {% set renderedContent %}
+                <div>
                     <ButtonLink color={ color } size={ size } href="#" isDisabled>
                         Button {{ color }}
                     </ButtonLink>
@@ -18,18 +17,7 @@
                         <VisuallyHidden>Menu</VisuallyHidden>
                         <Icon name="link" />
                     </ButtonLink>
-                {% endset %}
-
-                {% if color is same as('inverted') %}
-                    <DocsBox>
-                        {{ renderedContent }}
-                    </DocsBox>
-                {% else %}
-                    <div>
-                        {{ renderedContent }}
-                    </div>
-                {% endif %}
-
+                </div>
             {% endfor %}
         </DocsSection>