feat(helper-text): mobile optimisation, reusable helper-text (#1222)

telekom · Sep 27, 2022 · 46c3f4d · 46c3f4d
1 parent b5dd9fb
commit 46c3f4d
Show file tree

Hide file tree

Showing 7 changed files with 370 additions and 0 deletions.
diff --git a/packages/components/src/components/helper-text/__snapshots__/helper-text.spec.ts.snap b/packages/components/src/components/helper-text/__snapshots__/helper-text.spec.ts.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Helper Text should render danger text with danger icon if dange variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--danger" variant="danger">
+  danger
+  <span></span>
+  <scale-icon-alert-error color="var(--telekom-color-text-and-icon-functional-danger)" size="11"></scale-icon-alert-error>
+</scale-helper-text>
+`;
+
+exports[`Helper Text should render informational helper text with info icon if informational variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--informational" variant="informational">
+  informational
+  <span></span>
+  <scale-icon-alert-information color="var(--telekom-color-text-and-icon-functional-informational)" size="11"></scale-icon-alert-information>
+</scale-helper-text>
+`;
+
+exports[`Helper Text should render informational helper text with info icon if no variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--informational">
+  informational
+  <span></span>
+  <scale-icon-alert-information color="var(--telekom-color-text-and-icon-functional-informational)" size="11"></scale-icon-alert-information>
+</scale-helper-text>
+`;
+
+exports[`Helper Text should render neutral text without icon if neutral variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--neutral" variant="neutral">
+  neutral
+  <span></span>
+</scale-helper-text>
+`;
+
+exports[`Helper Text should render success text with success icon if success variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--success" variant="success">
+  success
+  <span></span>
+  <scale-icon-alert-success color="var(--telekom-color-text-and-icon-functional-success)" size="11"></scale-icon-alert-success>
+</scale-helper-text>
+`;
+
+exports[`Helper Text should render warning text with warning icon if warning variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--warning" variant="warning">
+  warning
+  <span></span>
+  <scale-icon-alert-information color="var(--telekom-color-text-and-icon-functional-warning)" size="11"></scale-icon-alert-information>
+</scale-helper-text>
+`;
diff --git a/packages/components/src/components/helper-text/__snapshots__/helper-text.spec.tsx.snap b/packages/components/src/components/helper-text/__snapshots__/helper-text.spec.tsx.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Helper Text should render danger text with danger icon if dange variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--danger" variant="danger">
+  danger
+  <span></span>
+  <scale-icon-alert-error color="var(--telekom-color-text-and-icon-functional-danger)" size="11"></scale-icon-alert-error>
+</scale-helper-text>
+`;
+
+exports[`Helper Text should render informational helper text with info icon if informational variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--informational" variant="informational">
+  informational
+  <span></span>
+  <scale-icon-alert-information color="var(--telekom-color-text-and-icon-functional-informational)" size="11"></scale-icon-alert-information>
+</scale-helper-text>
+`;
+
+exports[`Helper Text should render informational helper text with info icon if no variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--informational">
+  informational
+  <span></span>
+  <scale-icon-alert-information color="var(--telekom-color-text-and-icon-functional-informational)" size="11"></scale-icon-alert-information>
+</scale-helper-text>
+`;
+
+exports[`Helper Text should render neutral text without icon if neutral variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--neutral" variant="neutral">
+  neutral
+  <span></span>
+</scale-helper-text>
+`;
+
+exports[`Helper Text should render success text with success icon if success variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--success" variant="success">
+  success
+  <span></span>
+  <scale-icon-alert-success color="var(--telekom-color-text-and-icon-functional-success)" size="11"></scale-icon-alert-success>
+</scale-helper-text>
+`;
+
+exports[`Helper Text should render warning text with warning icon if warning variant is specified 1`] = `
+<scale-helper-text class="helper-text helper-text--warning" variant="warning">
+  warning
+  <span></span>
+  <scale-icon-alert-information color="var(--telekom-color-text-and-icon-functional-warning)" size="11"></scale-icon-alert-information>
+</scale-helper-text>
+`;
diff --git a/packages/components/src/components/helper-text/helper-text.css b/packages/components/src/components/helper-text/helper-text.css
@@ -0,0 +1,45 @@
+:host {
+  --font: var(--telekom-text-style-small-bold);
+  --color-informational: var(--telekom-color-text-and-icon-functional-informational);
+  --color-warning: var(--telekom-color-text-and-icon-functional-warning);
+  --color-danger: var(--telekom-color-text-and-icon-functional-danger);
+  --color-success: var(--telekom-color-text-and-icon-functional-success);
+  --color-neutral: var(--telekom-color-text-and-icon-additional);
+}
+
+.helper-text {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  font: var(--telekom-text-style-small-bold);
+}
+
+scale-icon-alert-information,
+scale-icon-alert-error,
+scale-icon-alert-success {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: var(--telekom-spacing-unit-x1);
+}
+
+.helper-text--informational {
+  color: var(--color-informational);
+}
+
+.helper-text--warning {
+  color: var(--color-warning);
+}
+
+.helper-text--danger {
+  color: var(--color-danger);
+}
+
+.helper-text--success {
+  color: var(--color-success);
+}
+
+.helper-text--neutral {
+  color: var(--color-neutral);
+}
diff --git a/packages/components/src/components/helper-text/helper-text.e2e.ts b/packages/components/src/components/helper-text/helper-text.e2e.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('scale-helper-text', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<scale-helper-text>default</scale-helper-text>');
+    const element = await page.find('scale-helper-text');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/packages/components/src/components/helper-text/helper-text.spec.ts b/packages/components/src/components/helper-text/helper-text.spec.ts
@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { newSpecPage } from '@stencil/core/testing';
+import { HelperText } from './helper-text';
+
+describe('Helper Text', () => {
+  let element;
+  beforeEach(async () => {
+    element = new HelperText();
+  });
+
+  it('should render informational helper text with info icon if no variant is specified', async () => {
+    const page = await newSpecPage({
+      components: [HelperText],
+      html: `<scale-helper-text>informational</scale-helper-text>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+
+  it('should render informational helper text with info icon if informational variant is specified', async () => {
+    const page = await newSpecPage({
+      components: [HelperText],
+      html: `<scale-helper-text variant="informational">informational</scale-helper-text>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+
+  it('should render warning text with warning icon if warning variant is specified', async () => {
+    const page = await newSpecPage({
+      components: [HelperText],
+      html: `<scale-helper-text variant="warning">warning</scale-helper-text>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+
+  it('should render danger text with danger icon if dange variant is specified', async () => {
+    const page = await newSpecPage({
+      components: [HelperText],
+      html: `<scale-helper-text variant="danger">danger</scale-helper-text>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+
+  it('should render success text with success icon if success variant is specified', async () => {
+    const page = await newSpecPage({
+      components: [HelperText],
+      html: `<scale-helper-text variant="success">success</scale-helper-text>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+
+  it('should render neutral text without icon if neutral variant is specified', async () => {
+    const page = await newSpecPage({
+      components: [HelperText],
+      html: `<scale-helper-text variant="neutral">neutral</scale-helper-text>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+});
diff --git a/packages/components/src/components/helper-text/helper-text.tsx b/packages/components/src/components/helper-text/helper-text.tsx
@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, h, Prop, Host } from '@stencil/core';
+
+const ICON_SIZE = 11;
+
+/**
+ * This is a superset of the default anchor `<a>` element.
+ * @part anchor - the native achor element wrapping all contents
+ * @part content - a wrapper around the default slot with the underline
+ *
+ * @slot default - here goes the actual text of the
+ * @slot icon - a slot that will not be underlined and which position can be changed
+ */
+@Component({
+  tag: 'scale-helper-text',
+  styleUrl: './helper-text.css',
+  shadow: true,
+})
+export class HelperText {
+  /** (optional) Helper text */
+  @Prop() helperText?: string;
+  /** (optional) Injected CSS styles */
+  @Prop() styles?: string;
+  /** (optional) Injected CSS styles */
+  @Prop() variant?:
+    | 'neutral'
+    | 'informational'
+    | 'warning'
+    | 'danger'
+    | 'success' = 'informational';
+
+  renderHelperIcon() {
+    const variant = this.variant;
+    if (variant === 'informational' || variant === 'warning') {
+      return (
+        <scale-icon-alert-information
+          size={ICON_SIZE}
+        ></scale-icon-alert-information>
+      );
+    }
+    if (variant === 'danger') {
+      return (
+        <scale-icon-alert-error
+          size={ICON_SIZE}
+        ></scale-icon-alert-error>
+      );
+    }
+    if (variant === 'success') {
+      return (
+        <scale-icon-alert-success
+          size={ICON_SIZE}
+        ></scale-icon-alert-success>
+      );
+    }
+  }
+
+  render() {
+    return (
+      <Host>
+        <div
+            class={{
+              'helper-text': true,
+              'helper-text--informational': this.variant === 'informational',
+              'helper-text--warning': this.variant === 'warning',
+              'helper-text--danger': this.variant === 'danger',
+              'helper-text--success': this.variant === 'success',
+              'helper-text--neutral': this.variant === 'neutral',
+            }}        
+        >
+          <span><slot></slot></span>
+          {this.renderHelperIcon()}
+        </div>
+        {this.styles && <style>{this.styles}</style>}
+
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/helper-text/readme.md b/packages/components/src/components/helper-text/readme.md
@@ -0,0 +1,52 @@
+# scale-helper-text
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description                    | Type                                                                 | Default           |
+| ------------ | ------------- | ------------------------------ | -------------------------------------------------------------------- | ----------------- |
+| `helperText` | `helper-text` | (optional) Helper text         | `string`                                                             | `undefined`       |
+| `styles`     | `styles`      | (optional) Injected CSS styles | `string`                                                             | `undefined`       |
+| `variant`    | `variant`     | (optional) Injected CSS styles | `"danger" \| "informational" \| "neutral" \| "success" \| "warning"` | `'informational'` |
+
+
+## Slots
+
+| Slot        | Description                                                          |
+| ----------- | -------------------------------------------------------------------- |
+| `"default"` | here goes the actual text of the                                     |
+| `"icon"`    | a slot that will not be underlined and which position can be changed |
+
+
+## Shadow Parts
+
+| Part        | Description                                          |
+| ----------- | ---------------------------------------------------- |
+| `"anchor"`  | the native achor element wrapping all contents       |
+| `"content"` | a wrapper around the default slot with the underline |
+
+
+## Dependencies
+
+### Depends on
+
+- [scale-icon-alert-information](../icons/alert-information)
+- [scale-icon-alert-error](../icons/alert-error)
+- [scale-icon-alert-success](../icons/alert-success)
+
+### Graph
+```mermaid
+graph TD;
+  scale-helper-text --> scale-icon-alert-information
+  scale-helper-text --> scale-icon-alert-error
+  scale-helper-text --> scale-icon-alert-success
+  style scale-helper-text fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*