feat(logo): integrate sizes and related pulse as an option for headli…

…nes (#570) * refactor: added pulse property * chore: regenerated package-lock.json * feat: added logo element
db-ui · Feb 8, 2023 · 9b388bb · 9b388bb
1 parent 2ca4687
commit 9b388bb
Show file tree

Hide file tree

Showing 14 changed files with 137 additions and 9 deletions.
diff --git a/e2e/cypress/integration/04-1-data-display/db-logo.spec.js b/e2e/cypress/integration/04-1-data-display/db-logo.spec.js
@@ -0,0 +1,16 @@
+context('db-logo', () => {
+  beforeEach(() => {
+    cy.visit('/iframe.html?id=04-data-display-logo-intro--page&viewMode=story');
+  });
+
+  it('db-logo - snapshot', () => {
+    cy.snap('db-logo', 0.2);
+  });
+  it('logos should have the right class and aria-hidden attribute', function () {
+    cy.get('db-logo svg')
+      .first()
+      .should('have.class', 'elm-logo')
+      .invoke('attr', 'aria-hidden')
+      .should('eq', 'true');
+  });
+});
diff --git a/e2e/cypress/integration/99-1-showcases/showcases-other-elements.spec.js b/e2e/cypress/integration/99-1-showcases/showcases-other-elements.spec.js
@@ -47,6 +47,13 @@ context('showcase', () => {
         .eq(0)
         .contains('DB UI Elements components documentation');
 
+      // 7. DbLogo
+      cy.get('main')
+        .find('db-logo > svg')
+        .eq(0)
+        .should('have.class', 'elm-logo')
+        .invoke('attr', 'aria-hidden')
+        .should('eq', 'true');
       //
     });
   });

diff --git a/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts b/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts
@@ -17,6 +17,7 @@ import {
   DbInput,
   DbLink,
   DbLinklist,
+  DbLogo,
   DbMeta,
   DbMetanavigation,
   DbOverflowMenu,
@@ -65,6 +66,7 @@ const DECLARATIONS = [
   DbLanguageSwitcher,
   DbLink,
   DbLinklist,
+  DbLogo,
   DbMainnavigation,
   DbMeta,
   DbMetanavigation,

diff --git a/packages/db-ui-elements-stencil/src/components/db-headline/db-headline.tsx b/packages/db-ui-elements-stencil/src/components/db-headline/db-headline.tsx
@@ -9,48 +9,52 @@ export class DbHeadline {
    * The variant attribute specifies the size of the headline.
    */
   @Prop() variant: '1' | '2' | '3' | '4' | '5' | '6' = '3';
+  /**
+   * The pulse attribute determines whether to add a visual DB Pulse to the headline.
+   */
+  @Prop({ reflect: true }) pulse?: boolean = false;
 
   render() {
     switch (this.variant) {
       case '1': {
         return (
-          <h1 class="elm-headline">
+          <h1 class="elm-headline" data-pulse={this.pulse}>
             <slot />
           </h1>
         );
       }
       case '2': {
         return (
-          <h2 class="elm-headline">
+          <h2 class="elm-headline" data-pulse={this.pulse}>
             <slot />
           </h2>
         );
       }
       case '4': {
         return (
-          <h4 class="elm-headline">
+          <h4 class="elm-headline" data-pulse={this.pulse}>
             <slot />
           </h4>
         );
       }
       case '5': {
         return (
-          <h5 class="elm-headline">
+          <h5 class="elm-headline" data-pulse={this.pulse}>
             <slot />
           </h5>
         );
       }
       case '6': {
         return (
-          <h6 class="elm-headline">
+          <h6 class="elm-headline" data-pulse={this.pulse}>
             <slot />
           </h6>
         );
       }
       case '3':
       default: {
         return (
-          <h3 class="elm-headline">
+          <h3 class="elm-headline" data-pulse={this.pulse}>
             <slot />
           </h3>
         );

diff --git a/packages/db-ui-elements-stencil/src/components/db-headline/readme.md b/packages/db-ui-elements-stencil/src/components/db-headline/readme.md
@@ -7,9 +7,10 @@
 
 ## Properties
 
-| Property  | Attribute | Description                                               | Type                                     | Default |
-| --------- | --------- | --------------------------------------------------------- | ---------------------------------------- | ------- |
-| `variant` | `variant` | The variant attribute specifies the size of the headline. | `"1" \| "2" \| "3" \| "4" \| "5" \| "6"` | `'3'`   |
+| Property  | Attribute | Description                                                                      | Type                                     | Default |
+| --------- | --------- | -------------------------------------------------------------------------------- | ---------------------------------------- | ------- |
+| `pulse`   | `pulse`   | The pulse attribute determines whether to add a visual DB Pulse to the headline. | `boolean`                                | `false` |
+| `variant` | `variant` | The variant attribute specifies the size of the headline.                        | `"1" \| "2" \| "3" \| "4" \| "5" \| "6"` | `'3'`   |
 
 
 ## Dependencies

diff --git a/...ements-stencil/src/components/db-headline/stories/db-headline.intro.stories.mdx b/...ements-stencil/src/components/db-headline/stories/db-headline.intro.stories.mdx
@@ -14,4 +14,13 @@ import Readme from './../readme.md';
   <db-headline variant="6">Headline 6</db-headline>
 </Canvas>
 
+<db-headline variant="2">With pulse</db-headline>
+
+<Canvas>
+  <db-headline variant="1" pulse>Headline 1</db-headline>
+  <db-headline variant="2" pulse>Headline 2</db-headline>
+  <db-headline pulse>Headline 3</db-headline>
+  <db-headline variant="4" pulse>Headline 4</db-headline>
+</Canvas>
+
 <Readme />
diff --git a/packages/db-ui-elements-stencil/src/components/db-logo/db-logo.scss b/packages/db-ui-elements-stencil/src/components/db-logo/db-logo.scss
@@ -0,0 +1,16 @@
+@import '../general';
+@import 'logo';
+
+.elm-logo {
+  rect {
+    fill: transparent;
+    /* stylelint-disable custom-property-pattern */
+    fill: var(--db-logo-backgroundColor, transparent);
+    /* stylelint-enable custom-property-pattern */
+  }
+
+  path {
+    fill: #f01414;
+    fill: var(--db-logo-color, #f01414);
+  }
+}
diff --git a/packages/db-ui-elements-stencil/src/components/db-logo/db-logo.tsx b/packages/db-ui-elements-stencil/src/components/db-logo/db-logo.tsx
@@ -0,0 +1,31 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'db-logo',
+  styleUrl: 'db-logo.scss'
+})
+export class DbLogo {
+  /**
+   * The size attribute specifies the size of the logo.
+   */
+  @Prop() size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' = 'xlarge';
+
+  render() {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 40 28"
+        id="logo"
+        aria-hidden="true"
+        class="elm-logo"
+        data-size={this.size}
+      >
+        <rect x="2" y="2" width="36" height="24" fill="transparent"></rect>
+        <path
+          d="M27.2 7.53h-1.43v4.54h1.83c1.53.03 2.47-1.04 2.47-2.27 0-1.63-.96-2.32-2.87-2.27zm.6 7.8h-2.04v4.84h1.84c.7.01 3.07 0 3.07-2.37 0-1.01-.62-2.5-2.87-2.47zm-17.1-7.7h-.83v12.54h1.53c2.58.06 3.77-2.05 3.77-5.97 0-3.6-.41-6.74-4.47-6.57zm18.4-2.76c5.13.02 5.23 4.03 5.23 4.43a4.33 4.33 0 01-3.15 4.13v.14c3.26.79 3.75 3.14 3.75 4.43 0 4.76-4.68 5.02-6.71 5.03h-6.68V4.87h7.56zm-16.9 0c4.7.02 7.23 3.01 7.23 9.03 0 5.29-1.68 9.1-7.23 9.13H5.54V4.87h6.66zm23.7-1.94H4c-.63 0-1.04.5-1.06 1.05l-.01.12v19.7c0 .57.35 1.22.95 1.26l.12.01h31.9c.63 0 1.13-.6 1.16-1.14l.01-.13V4.1a1.2 1.2 0 00-1.17-1.17zm0-2.86c2.1 0 3.97 1.56 4.03 3.63v20.2a4 4 0 01-3.83 4.03H4A3.91 3.91 0 01.07 24.1V3.9A3.8 3.8 0 013.8.07h32.1z"
+          fill="#f01414"
+        ></path>
+      </svg>
+    );
+  }
+}
diff --git a/packages/db-ui-elements-stencil/src/components/db-logo/readme.md b/packages/db-ui-elements-stencil/src/components/db-logo/readme.md
@@ -0,0 +1,17 @@
+# db-logo
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                        | Type                                                     | Default    |
+| -------- | --------- | -------------------------------------------------- | -------------------------------------------------------- | ---------- |
+| `size`   | `size`    | The size attribute specifies the size of the logo. | `"large" \| "medium" \| "small" \| "xlarge" \| "xsmall"` | `'xlarge'` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/...db-ui-elements-stencil/src/components/db-logo/stories/db-logo.intro.stories.mdx b/...db-ui-elements-stencil/src/components/db-logo/stories/db-logo.intro.stories.mdx
@@ -0,0 +1,16 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import Readme from './../readme.md';
+
+<Meta title="04-Data-Display/Logo/Intro" />
+
+<db-headline variant="1">&lt;db-logo&gt;</db-headline>
+
+<Canvas>
+  <db-logo size="xsmall"></db-logo>
+  <db-logo size="small"></db-logo>
+  <db-logo size="medium"></db-logo>
+  <db-logo size="large"></db-logo>
+  <db-logo></db-logo>
+</Canvas>
+
+<Readme />
diff --git a/packages/db-ui-elements-stencil/stencil.config.ts b/packages/db-ui-elements-stencil/stencil.config.ts
@@ -164,6 +164,7 @@ export const config: Config = {
         `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/image/${getTheme()}`,
         `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/input/${getTheme()}`,
         `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/link/${getTheme()}`,
+        `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/logo/${getTheme()}`,
         `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/progress/${getTheme()}`,
         `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/radio/${getTheme()}`,
         `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/select/${getTheme()}`,

diff --git a/showcase/angular-showcase/src/app/components/other-elements/other-elements.component.html b/showcase/angular-showcase/src/app/components/other-elements/other-elements.component.html
@@ -30,4 +30,6 @@
   <db-link href="https://github.com/db-ui/elements/" target="_blank">
     DB UI Elements components documentation
   </db-link>
+  <p>DbLogo:</p>
+  <db-logo></db-logo>
 </div>
diff --git a/showcase/react-showcase/src/components/other-elements/index.js b/showcase/react-showcase/src/components/other-elements/index.js
@@ -2,6 +2,7 @@ import {
   DbIcon,
   DbImage,
   DbLink,
+  DbLogo,
   DbProgress,
   DbTag,
   DbChip
@@ -17,6 +18,8 @@ function OtherElements() {
       <DbTag>default</DbTag>
       <DbTag variant="informative">informative</DbTag>
       <DbTag variant="success">success</DbTag>
+      <p>DbLogo:</p>
+      <DbLogo></DbLogo>
       <p>DbChip:</p>
       <DbChip datatype="filter" icon="account">
         default

diff --git a/showcase/vue-showcase/src/components/other-elements/OtherElements.vue b/showcase/vue-showcase/src/components/other-elements/OtherElements.vue
@@ -5,6 +5,7 @@ import {
   DbTag,
   DbImage,
   DbLink,
+  DbLogo,
   DbChip
 } from '@db-ui/v-elements-enterprise/dist/components';
 </script>
@@ -15,6 +16,8 @@ import {
     <DbIcon icon="account" variant="32-outline" />
     <p>DbProgress:</p>
     <DbProgress :value="60" :max="100" />
+    <p>DbLogo:</p>
+    <DbLogo></DbLogo>
     <p>DbTag:</p>
     <DbTag>default</DbTag>
     <DbTag variant="informative">informative</DbTag>