refactor: wt-input-info colors [WTEL-3938]

webitel · Nov 30, 2023 · 7ff2c18 · 7ff2c18
1 parent 8ba4c3b
commit 7ff2c18
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 33 deletions.
diff --git a/docs/pages/webitel-ui/components/wt-input-info/Readme.md b/docs/pages/webitel-ui/components/wt-input-info/Readme.md
@@ -0,0 +1,30 @@
+<script setup>
+import Docs from './wt-input-info-docs.vue';
+import ExampleInputInfo from './examples/example-input-info.vue';
+import ExampleInvalidInputInfo from './examples/example-invalid-input-info.vue';
+</script>
+
+# WtInputInfo
+
+## Props
+::: raw
+<Docs/>
+:::
+
+## Example Input Info
+::: raw
+<ExampleInputInfo/>
+:::
+
+::: details Code
+<<< ./examples/example-input-info.vue
+:::
+
+## Example Invalid Input Info
+::: raw
+<ExampleInvalidInputInfo/>
+:::
+
+::: details Code
+<<< ./examples/example-invalid-input-info.vue
+:::
diff --git a/docs/pages/webitel-ui/components/wt-input-info/examples/example-input-info.vue b/docs/pages/webitel-ui/components/wt-input-info/examples/example-input-info.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <wt-input-info>Input info</wt-input-info>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/docs/pages/webitel-ui/components/wt-input-info/examples/example-invalid-input-info.vue b/docs/pages/webitel-ui/components/wt-input-info/examples/example-invalid-input-info.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <wt-input-info invalid>
+    Invalid input info
+  </wt-input-info>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/docs/pages/webitel-ui/components/wt-input-info/wt-input-info-docs.vue b/docs/pages/webitel-ui/components/wt-input-info/wt-input-info-docs.vue
@@ -1,39 +1,30 @@
 <template>
-  <section>
-    <h2>Input info</h2>
-    <article>
-      <div class="example-wrapper">
-        <wt-input-info>Input info</wt-input-info>
-        <pre><code class="language-html">&lt;wt-input-info&gt;Input info&lt;/wt-input-info&gt;</code></pre>
-      </div>
-    </article>
-    <component-props
-      :properties="properties"
-    />
-    <component-slots />
-  </section>
+  <component-props
+    :properties="properties"
+  />
+  <component-slots />
 </template>
 
 <script>
-  import Prism from 'prismjs';
+import Prism from 'prismjs';
 
-  export default {
-    name: 'WtInputInfoDocs',
-    data: () => ({
-      properties: [
-        {
-          value: 'invalid',
-          code: '<wt-input-info invalid></wt-input-info>',
-          type: 'Boolean',
-          default: 'false',
-          description: 'Changes input info visual style to invalid (red)',
-        },
-      ],
-    }),
-    mounted() {
-      Prism.highlightAll();
-    },
-  };
+export default {
+  name: 'WtInputInfoDocs',
+  data: () => ({
+    properties: [
+      {
+        value: 'invalid',
+        code: '<wt-input-info invalid></wt-input-info>',
+        type: 'Boolean',
+        default: 'false',
+        description: 'Changes input info visual style to invalid (red)',
+      },
+    ],
+  }),
+  mounted() {
+    Prism.highlightAll();
+  },
+};
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/wt-input-info/wt-input-info.vue b/src/components/wt-input-info/wt-input-info.vue
@@ -30,11 +30,11 @@ export default {
 .wt-input-info {
   @extend %typo-caption;
   margin-top: var(--input-info-margin);
-  color: var(--input-info-color);
+  color: var(--wt-helper-text-color);
   min-height: var(--input-info-min-height);
 
   &--invalid {
-    color: var(--input-info--invalid-color);
+    color: var(--wt-helper-text-invalid-color);
   }
 }
 </style>
diff --git a/src/css/styleguide/colors/reusable/_text-field.scss b/src/css/styleguide/colors/reusable/_text-field.scss
@@ -5,6 +5,7 @@
   // helper
   --wt-helper-text-color: var(--text-main-color);
   --wt-helper-text-disabled-color: var(--text-disabled-color);
+  --wt-helper-text-invalid-color: var(--text-error-color);
 
   // text
   --wt-text-field-text-color: var(--black);