From 55528f33c1bd952867c905870e568fb2144d1090 Mon Sep 17 00:00:00 2001
From: "ana.espejo" <bia.espejo@totvs.com.br>
Date: Tue, 20 Aug 2024 18:33:23 -0300
Subject: [PATCH] =?UTF-8?q?feat(stepper):=20implementa=20defini=C3=A7?=
 =?UTF-8?q?=C3=B5es=20do=20AnimaliaDS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implementa definições de estilo e acessibilidade definidos pelo AnimaliaDS

Fixes DTHFUI-7810
---
 src/css/components/po-stepper/po-stepper.css | 300 ++++++++++++-------
 src/css/themes/po-theme-default.css          |  33 +-
 2 files changed, 211 insertions(+), 122 deletions(-)

diff --git a/src/css/components/po-stepper/po-stepper.css b/src/css/components/po-stepper/po-stepper.css
index 426d834b..681350c8 100644
--- a/src/css/components/po-stepper/po-stepper.css
+++ b/src/css/components/po-stepper/po-stepper.css
@@ -1,68 +1,59 @@
-:root {
-  --font-stepper-label: {
-    @apply --font-text-bold;
-  }
-
-  --font-stepper-circle-content: {
-    @apply --font-text-small-bold;
-  }
-
-  --font-stepper-circle-content-md: {
-    @apply --font-text-bold;
-  }
-
-  --font-stepper-circle-content-lg: {
-    @apply --font-text-large-bold;
-  }
-}
-
-.po-stepper {
-  display: table;
-  table-layout: fixed;
-}
-
 .po-stepper-horizontal {
-  margin: 0 auto;
+  display: grid;
   width: 100%;
+  gap: 8px;
+  padding-inline: 8px;
 }
 
 .po-stepper-step {
   position: relative;
 }
 
-.po-stepper-horizontal .po-stepper-container {
-  display: table;
-  table-layout: fixed;
-  width: 100%;
+.po-stepper-step:not(.po-stepper-step-disabled):focus-visible {
+  outline-color: var(--outline-color-focused);
+  outline-width: var(--outline-width);
+  outline-style: solid;
+  outline-offset: 2px;
+  margin-right: 1em;
+  z-index: 1000;
 }
 
-.po-stepper-horizontal .po-stepper-step-position,
-.po-stepper-vertical .po-stepper-container,
-.po-stepper-vertical .po-stepper-content {
-  display: table-cell;
+.po-stepper-step-container {
+  height: 100%;
+  position: relative;
 }
 
-.po-stepper-horizontal .po-stepper-content,
-.po-stepper-vertical .po-stepper-container,
-.po-stepper-vertical .po-stepper-content {
-  padding: 8px;
+.po-stepper-vertical .po-stepper-step-container,
+.po-stepper-container-horizontal {
+  display: flex;
+}
+
+.po-stepper-vertical {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+  padding-inline: 8px;
 }
 
 .po-stepper-vertical .po-stepper-content {
   height: 100%;
-  vertical-align: top;
   width: 100%;
 }
 
-.po-stepper-horizontal .po-stepper-step {
-  padding-top: 8px;
+.po-stepper-container-vertical {
+  display: flex;
+  flex-direction: column;
+  height: auto;
 }
 
-.po-stepper-vertical .po-stepper-step {
-  display: table;
-  height: 5.6em;
+.po-stepper-step-wrapper {
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+
+.po-stepper-vertical .po-stepper-step-wrapper {
   min-height: 5.6em;
-  padding-left: 16px;
 }
 
 .po-stepper-step-position:first-child .po-stepper-step-bar-left,
@@ -73,47 +64,63 @@
 }
 
 .po-stepper-circle {
-  @apply --font-stepper-circle-content;
-  padding: 3px;
-  border: 2px solid;
   border-radius: 50%;
   height: 24px;
   width: 24px;
+  z-index: 2;
+  position: relative;
 }
 
-.po-stepper-horizontal .po-stepper-circle {
-  margin: 0 auto;
+.po-stepper-circle-border {
+  border: 2px solid;
 }
 
 .po-stepper-vertical .po-stepper-circle {
-  bottom: 0;
-  margin: auto;
-  position: absolute;
-  top: 0;
+  position: relative;
+  margin-inline: auto;
 }
 
 .po-stepper-circle-content {
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  padding: 0.25em;
+  align-items: center;
+  height: 100%;
+}
+
+.po-stepper-circle {
+  border-color: var(--color-stepper-bar-disabled, var(--color-next));
+  background-color: var(--color-neutral-light-00);
+  color: var(--color-neutral-dark-70);
+}
+
+.po-stepper-circle-horizontal,
+.po-stepper-circle-vertical {
+  align-items: center;
+}
+
+.po-stepper-circle-horizontal {
+  display: flex;
+  margin: auto;
+}
+
+.po-stepper-circle-vertical {
+  display: grid;
+  margin-bottom: auto;
 }
 
-.po-stepper-step-default .po-stepper-circle,
-.po-stepper-step-default .po-stepper-label {
-  border-color: var(--color-stepper-circle-default);
-  color: var(--color-stepper-circle-default);
+.po-stepper-step-default,
+.po-stepper-label.po-link,
+.po-stepper-step-disabled .po-stepper-label-vertical {
+  color: var(--color-stepper-circle-disabled, var(--text-color-next));
 }
 
-.po-stepper-step-disabled .po-stepper-circle,
-.po-stepper-step-disabled .po-stepper-label {
-  border-color: var(--color-stepper-circle-disabled);
-  color: var(--color-stepper-circle-disabled);
+.po-stepper-step-disabled .po-stepper-circle {
+  border-color: var(--color-stepper-bar-disabled, var(--color-next));
 }
 
 .po-stepper-step-error .po-stepper-circle,
 .po-stepper-step-error .po-stepper-label {
-  border-color: var(--color-stepper-circle-error);
   color: var(--color-stepper-circle-error);
 }
 
@@ -123,122 +130,185 @@
 
 .po-stepper-step-disabled {
   cursor: default;
+  color: var(--text-color-next);
 }
 
 .po-stepper-label {
-  font-family: var(--font-family-default-bold), sans-serif;
-  font-size: var(--font-size-default-normal);
-  line-height: 24px;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.po-stepper-label-vertical {
+  white-space: normal;
+  word-wrap: break-word;
+  max-width: 15em;
 }
 
 .po-stepper-horizontal .po-stepper-label {
-  padding: 8px 8px 0;
-  text-align: center;
+  display: list-item;
+  padding-top: 0.25em;
+  padding-right: var(--spacing-lg);
+  max-width: 15em;
 }
 
 .po-stepper-vertical .po-stepper-step-label-position {
-  display: table-cell;
-  vertical-align: middle;
+  padding-left: var(--spacing-sm);
+  padding-top: 0.25em;
+  padding-bottom: 0.25em;
+  height: 100%;
+}
+
+.po-stepper-horizontal .po-stepper-step-label-position {
+  max-width: 15em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-grid;
 }
 
 .po-stepper-step-bar-left,
 .po-stepper-step-bar-right {
-  border-top: 2px solid var(--color-stepper-bar);
+  border-top: 2px solid var(--color-stepper-bar, var(--color-line-done));
   position: absolute;
   top: 50%;
 }
 
 .po-stepper-step-bar-top,
 .po-stepper-step-bar-bottom {
-  border-left: 2px solid var(--color-stepper-bar);
+  border-left: 2px solid var(--color-stepper-bar, var(--color-line-done));
   position: absolute;
 }
 
 .po-stepper-horizontal .po-stepper-step-bar-right {
-  left: 50%;
-  right: 0;
-}
-
-.po-stepper-horizontal .po-stepper-step-bar-left {
+  position: absolute;
   left: 0;
-  right: 50%;
-}
-
-.po-stepper-step-container {
-  height: 100%;
-  position: relative;
+  right: 0;
 }
 
 .po-stepper-vertical .po-stepper-step-bar-bottom {
-  bottom: 0;
-  left: 50%;
-  margin-top: 50%;
-  top: 50%;
+  bottom: -4px;
+  top: 4px;
+  margin-top: 0.25em;
 }
 
 .po-stepper-vertical .po-stepper-step-bar-top {
-  bottom: 50%;
   left: 50%;
-  margin-bottom: 50%;
   top: 0;
 }
 
-.po-stepper-vertical .po-stepper-step-container {
-  display: inherit;
-  margin-right: 16px;
-}
-
-.po-stepper-circle-content-md {
-  @apply --font-stepper-circle-content-md;
+.po-stepper-circle-content,
+.po-stepper-circle-content-md,
+.po-stepper-circle-content-lg,
+.po-stepper-circle-content.po-icon,
+.po-stepper-circle-content-md.po-icon,
+.po-stepper-circle-content-lg.po-icon {
+  font-weight: var(--font-weight-current);
 }
 
-.po-stepper-circle-content-lg {
-  @apply --font-stepper-circle-content-lg;
+.po-stepper-step-default .po-stepper-circle-content,
+.po-stepper-step-disabled .po-stepper-circle-content,
+.po-stepper-step-default .po-stepper-circle-content,
+.po-stepper-step-disabled .po-stepper-circle-content-md,
+.po-stepper-step-default .po-stepper-circle-content,
+.po-stepper-step-disabled .po-stepper-circle-content-lg {
+  font-size: var(--font-size-circle);
 }
 
-.po-stepper-circle-content.po-icon {
+.po-stepper-circle-done .po-stepper-circle-content.po-icon,
+.po-stepper-circle-active .po-stepper-circle-content.po-icon {
   font-size: 16px;
 }
 
-.po-stepper-circle-content-md.po-icon {
+.po-stepper-circle-done .po-stepper-circle-content-md.po-icon,
+.po-stepper-circle-active .po-stepper-circle-content-md.po-icon {
   font-size: 24px;
 }
 
-.po-stepper-circle-content-lg.po-icon {
+.po-stepper-circle-done .po-stepper-circle-content-lg.po-icon,
+.po-stepper-circle-active .po-stepper-circle-content-lg.po-icon {
   font-size: 32px;
 }
 
 .po-stepper-circle-active {
+  background-color: var(--color-stepper-circle-active, var(--background-current));
   border-radius: 50%;
-  background: var(--color-stepper-circle-active);
   width: 100%;
   height: 100%;
 }
 
 .po-stepper-step-error .po-stepper-circle-active {
-  background: var(--color-stepper-circle-error);
+  background: var(--color-feedback-negative-base);
 }
 
 .po-stepper-step-disabled .po-stepper-step-bar-right,
-.po-stepper-step-disabled .po-stepper-step-bar-left {
-  border-top: 2px dashed var(--color-stepper-bar-disabled);
+.po-stepper-step-disabled .po-stepper-step-bar-left,
+.po-stepper-step-dashed-border {
+  border-top: 2px dashed var(--color-stepper-bar-disabled, var(--color-next));
+  position: absolute;
+  top: 50%;
 }
 
 .po-stepper-step-disabled .po-stepper-step-bar-top,
-.po-stepper-step-disabled .po-stepper-step-bar-bottom {
-  border-left: 2px dashed var(--color-stepper-bar-disabled);
+.po-stepper-step-disabled .po-stepper-step-bar-bottom,
+.po-stepper-step-dashed-border-vertical {
+  border-left: 2px dashed var(--color-stepper-bar-disabled, var(--color-next));
 }
 
-.po-stepper-step-dashed-border {
-  border-top: 2px dashed var(--color-stepper-bar-disabled);
+.po-stepper-circle-done {
+  background-color: var(--background-done);
+  border-color: var(--color-neutral-dark-70);
 }
 
-.po-stepper-step-dashed-border-vertical {
-  border-left: 2px dashed var(--color-stepper-bar-disabled);
+.po-stepper-label.po-link.po-stepper-label-done {
+  color: var(--text-color);
+}
+
+.po-stepper-circle-done .po-stepper-circle-content.po-icon {
+  color: var(--color-icon-done);
+}
+
+.po-stepper-label.po-link.po-stepper-label-active {
+  color: var(--color-neutral-dark-70);
+  font-weight: var(--font-weight-current);
+}
+
+.po-stepper-circle-active .po-stepper-circle-content.po-icon {
+  color: var(--color-icon-current);
+}
+
+.po-stepper-circle-content,
+.po-stepper-circle-content.po-icon,
+.po-stepper-step-disabled .po-stepper-circle-content {
+  color: var(--color-action-disabled);
+}
+
+po-icon i {
+  line-height: normal;
+}
+
+.po-stepper-circle-done .ph {
+  font-weight: 600;
+}
+
+.po-stepper-label.po-link {
+  color: var(--color-stepper-circle-disabled, var(--text-color-next));
+  font-size: var(--font-size);
+  line-height: normal;
+}
+
+.po-stepper-label.po-link:focus,
+.po-stepper-label.po-link:active {
+  outline: none;
 }
 
 @media print {
-  .po-stepper-step-container {
-    display: block;
+  body {
+    -webkit-print-color-adjust: exact; /* Força a impressão de cores no Chrome */
+    print-color-adjust: exact; /* Outros navegadores */
   }
 }
diff --git a/src/css/themes/po-theme-default.css b/src/css/themes/po-theme-default.css
index 0be62c07..c0629bda 100644
--- a/src/css/themes/po-theme-default.css
+++ b/src/css/themes/po-theme-default.css
@@ -1291,15 +1291,34 @@ po-select {
   --color-slide-border-arrow: var(--color-brand-02-base);
   --color-slide-box-shadow-arrow-circle: var(--color-black-alpha-15);
   --color-slide-box-shadow-wrapper: var(--color-black-alpha-30);
+}
+
+po-stepper {
+  --font-family: var(--font-family-theme);
+  --font-size: var(--font-size-default);
+  --font-weight: var(--font-weight-normal);
 
+  --text-color: var(--color-neutral-dark-70);
+  --color-icon-done: var(--color-neutral-dark-70);
+  --background-done: var(--color-neutral-light-00);
+  --color-line-done: var(--color-neutral-mid-40);
+  --color-icon-current: var(--color-neutral-light-00);
+  --background-current: var(--color-action-default);
+  --font-weight-current: var(--font-weight-bold);
+  --font-size-circle: var(--font-size-sm);
+  --color-next: var(--color-action-disabled);
+  --text-color-next: var(--color-neutral-light-30);
+}
+
+:root {
   /*------------------------------------*\
-  STEPPER
-\*------------------------------------*/
-  --color-stepper-bar: var(--color-neutral-dark-70);
-  --color-stepper-bar-disabled: var(--color-neutral-mid-40);
-  --color-stepper-circle-active: var(--color-brand-02-base);
-  --color-stepper-circle-default: var(--color-brand-02-base);
-  --color-stepper-circle-disabled: var(--color-neutral-light-30);
+    STEPPER
+  \*------------------------------------*/
+  --color-stepper-bar: var(--color-line-done); /*Deprecated v19.x.x utilizar --color-line-done */
+  --color-stepper-bar-disabled: var(--color-next); /*Deprecated v19.x.x utilizar --color-next */
+  --color-stepper-circle-active: var(--background-current); /*Deprecated v19.x.x utilizar --background-current */
+  --color-stepper-circle-default: var(--color-icon-done); /*Deprecated v19.x.x utilizar --color-icon-done */
+  --color-stepper-circle-disabled: var(--color-next); /*Deprecated v19.x.x utilizar --color-next */
 }
 
 /*------------------------------------*\