reviewed and updated tag

Infineon · Jul 17, 2023 · 6e2b3ae · 6e2b3ae
1 parent abad9d5
commit 6e2b3ae
Show file tree

Hide file tree

Showing 17 changed files with 166 additions and 65 deletions.
diff --git a/examples/stencil-components/angular/src/app/app.component.html b/examples/stencil-components/angular/src/app/app.component.html
@@ -1,5 +1,10 @@
 <div>
   <h1>Using Stencil web components in an Angular application</h1>
+
+  <h2>Tag</h2>
+  <ifx-tag>tag</ifx-tag>
+  <br />
+
   <h2>Button</h2>
   <div>
     <ifx-button variant="solid" href="" target="_blank" color="primary" size="m" [disabled]="false" [icon]="false">

diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -16,8 +16,13 @@
 
   <div>
     <h1>Using Stencil web components in an Vanilla JS</h1>
-    <h2>Button</h2>
 
+
+    <h2>Tag</h2>
+    <ifx-tag>tag</ifx-tag>
+    <br />
+
+    <h2>Button</h2>
     <ifx-button variant="solid" href="" target="_blank" color="primary" size="m" disabled="false" icon="false">
       Button
     </ifx-button>

diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js
@@ -8,6 +8,7 @@ import Accordion from './components/Accordion/Accordion';
 import RadioButton from './components/RadioButton/RadioButton';
 
 import Checkbox from './components/Checkbox/Checkbox';
+import Tag from './components/Tag/Tag';
 
 function App() {
 
@@ -16,6 +17,9 @@ function App() {
     <div>
       <h1>Stencil Framework integration - React + JS</h1>
 
+      <h2>Tag</h2>
+      <Tag>Label Tag</Tag>
+
       <h2>Search Bar</h2>
       <SearchBar />
       <br />

diff --git a/examples/wrapper-components/react-javascript/src/components/Tag/Tag.js b/examples/wrapper-components/react-javascript/src/components/Tag/Tag.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { IfxTag } from '@infineon/infineon-design-system-react';
+
+function Tag() {
+  return (
+    <div>
+      <IfxTag>Label Tag</IfxTag>
+    </div>
+  );
+}
+
+export default Tag;
diff --git a/examples/wrapper-components/react-typescript/src/App.tsx b/examples/wrapper-components/react-typescript/src/App.tsx
@@ -5,37 +5,42 @@ import ProgressBar from './components/ProgressBar/ProgressBar';
 import SearchBar from './components/SearchBar/SearchBar';
 import Accordion from './components/Accordion/Accordion';
 import RadioButton from './components/RadioButton/RadioButton';
+import Tag from './Components/Tag/Tag';
 
 function App() {
 
   return (
-       <div>
-    <h1 className="header">Stencil Framework integration - React + TS </h1>
-    <h2>Search Bar</h2>
-      <SearchBar />
-      <br />
-
-      <h2>Button</h2>
-      <Button />
-      <br />
-
-      <h2>Progress Bar</h2>
-      <ProgressBar />
-      <br />
-
-      <h2>Text Field</h2>
-      <TextField />
-      <br />
-
-      <h2>Accordion</h2>
-      <Accordion />
-      <br />
-
-      <h2>Radio Button</h2>
-      <RadioButton />
-      <br />
+      <div>
+         <h1 className="header">Stencil Framework integration - React + TS </h1>
+
+         <h2>Tag</h2>
+         <Tag />
+         <br />
+
+         <h2>Search Bar</h2>
+         <SearchBar />
+         <br />
+
+         <h2>Button</h2>
+         <Button />
+         <br />
+
+         <h2>Progress Bar</h2>
+         <ProgressBar />
+         <br />
+
+         <h2>Text Field</h2>
+         <TextField />
+         <br />
+
+         <h2>Accordion</h2>
+         <Accordion />
+         <br />
+
+         <h2>Radio Button</h2>
+         <RadioButton />
+         <br />
       </div>
-
    )
 }
 

diff --git a/examples/wrapper-components/react-typescript/src/components/Tag/Tag.tsx b/examples/wrapper-components/react-typescript/src/components/Tag/Tag.tsx
@@ -0,0 +1,12 @@
+
+import { IfxTag } from '@infineon/infineon-design-system-react';
+
+function Tag() {
+  return (
+    <div>
+      <IfxTag>Label Tag</IfxTag>
+    </div>
+  );
+}
+
+export default Tag;
diff --git a/examples/wrapper-components/vue-javascript/src/App.vue b/examples/wrapper-components/vue-javascript/src/App.vue
@@ -8,6 +8,7 @@
   <ProgressBar />
   <Search />
   <TextInput />
+  <Tag />
 </template>
 
 
@@ -19,6 +20,7 @@ import ProgressBar from './components/ProgressBar.vue'
 import Search from './components/Search.vue'
 import RadioButton from './components/RadioButton.vue'
 import TextInput from './components/TextInput.vue'
+import Tag from './components/Tag.vue'
 
 </script>
 

diff --git a/examples/wrapper-components/vue-javascript/src/components/Tag.vue b/examples/wrapper-components/vue-javascript/src/components/Tag.vue
@@ -0,0 +1,20 @@
+
+
+<template>
+  <div>
+    <h2>Tag</h2>
+    <div>
+      <ifx-tag>tag</ifx-tag>
+    </div>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script setup>
+
+
+</script>
+
+
+
diff --git a/examples/wrapper-components/vue-typescript/src/App.vue b/examples/wrapper-components/vue-typescript/src/App.vue
@@ -9,6 +9,7 @@
   <ProgressBar />
   <Search />
   <TextInput />
+  <Tag />
 </template>
 
 
@@ -20,7 +21,7 @@ import ProgressBar from './components/ProgressBar.vue'
 import Search from './components/Search.vue'
 import RadioButton from './components/RadioButton.vue'
 import TextInput from './components/TextInput.vue'
-
+import Tag from './components/Tag.vue'
 
 </script>
 

diff --git a/examples/wrapper-components/vue-typescript/src/components/Tag.vue b/examples/wrapper-components/vue-typescript/src/components/Tag.vue
@@ -0,0 +1,20 @@
+
+
+<template>
+  <div>
+    <h2>Tag</h2>
+    <div>
+      <ifx-tag>tag</ifx-tag>
+    </div>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script setup>
+
+
+</script>
+
+
+
diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -354,9 +354,7 @@ export const IfxTabs = /*@__PURE__*/ defineContainer<JSX.IfxTabs>('ifx-tabs', un
 ]);
 
 
-export const IfxTag = /*@__PURE__*/ defineContainer<JSX.IfxTag>('ifx-tag', undefined, [
-  'label'
-]);
+export const IfxTag = /*@__PURE__*/ defineContainer<JSX.IfxTag>('ifx-tag', undefined);
 
 
 export const IfxTextInput = /*@__PURE__*/ defineContainer<JSX.IfxTextInput, JSX.IfxTextInput["value"]>('ifx-text-input', undefined, [

diff --git a/packages/components/src/components/tag/readme.md b/packages/components/src/components/tag/readme.md
@@ -5,13 +5,6 @@
 <!-- Auto Generated Below -->
 
 
-## Properties
-
-| Property | Attribute | Description | Type     | Default     |
-| -------- | --------- | ----------- | -------- | ----------- |
-| `label`  | `label`   |             | `string` | `undefined` |
-
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/tag/tag.e2e.ts b/packages/components/src/components/tag/tag.e2e.ts
@@ -0,0 +1,27 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ifx-tag', () => {
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-tag>Test Tag</ifx-tag>');
+
+    const element = await page.find('ifx-tag');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should display the correct label', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-tag>Test Tag</ifx-tag>');
+  });
+
+  it('should have the correct container class', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-tag>Test Tag</ifx-tag>');
+  });
+
+  it('should have the correct href attribute', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-tag>Test Tag</ifx-tag>');
+
+  });
+});
diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss
@@ -1,32 +1,32 @@
 @use "~@infineon/design-system-tokens/dist/tokens";
 @use "../../global/font.scss";
 
-:host {
-  display: inline-block;
-}
-
 .container {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   padding: tokens.$spacing-xxs tokens.$spacing-m;
   border: 1px solid tokens.$color-gray-300;
   border-radius: tokens.$border-radius-pill;
   text-decoration: none;
-}
 
-.container:hover {
-  border-color: tokens.$color-black;
-}
+  &:hover {
+    border-color: tokens.$color-black;
+  }
 
-.container:active {
-  border-color: tokens.$color-black;
-  background-color: tokens.$color-gray-100;
+  :active {
+    border-color: tokens.$color-black;
+    background-color: tokens.$color-gray-100;
+  }
+
+  & .label {
+    margin: 0;
+    font-weight: tokens.$font-weight-regular;
+    font-size: tokens.$font-size-m;
+    line-height: 1.5rem;
+    color: tokens.$color-text-black;
+  }
 }
 
-.label {
-  margin: 0;
-  font-weight: tokens.$font-weight-regular;
-  font-size: tokens.$font-size-m;
-  line-height: 1.5rem;
-  color: tokens.$color-text-black;
-}
+
+
+
diff --git a/packages/components/src/components/tag/tag.stories.ts b/packages/components/src/components/tag/tag.stories.ts
@@ -5,13 +5,11 @@ export default {
   args: {
     label: "Tag label",
   },
-  argTypes: {
 
-  },
 }
 
 const DefaultTemplate = (args) =>
-  `<ifx-tag label="${args.label}"/>`;
+  `<ifx-tag>${args.label}</ifx-tag>`;
 
 export const Default = DefaultTemplate.bind({});
 Default.argTypes = {

diff --git a/packages/components/src/components/tag/tag.tsx b/packages/components/src/components/tag/tag.tsx
@@ -1,17 +1,18 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'ifx-tag',
   styleUrl: 'tag.scss',
   shadow: true
 })
 export class Tag {
-  @Prop() label: string;
 
   render() {
     return (
       <a href="javascript:void(null);" class="container">
-        <p class="label">{this.label}</p>
+        <p class="label">
+          <slot />
+        </p>
       </a>
     );
   }

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -21,8 +21,6 @@
 
 <body>
 
-  <ifx-radio-button disabled="" value="false" error="true" size="m"></ifx-radio-button>
-
 
 </body>