Merge branch 'main' into typography

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [1.6.0](https://github.com/ForkbombEu/didroom-components/compare/v1.5.1...v1.6.0) (2024-01-28)
+
+
+### Features
+
+* **button:** New shiny component is in da houz ([#32](https://github.com/ForkbombEu/didroom-components/issues/32)) ([ebe149c](https://github.com/ForkbombEu/didroom-components/commit/ebe149c56121b942d684a881c2c4b3367522e86a))
+* **typography:** d-heading and d-text in da houze ([#33](https://github.com/ForkbombEu/didroom-components/issues/33)) ([86352cc](https://github.com/ForkbombEu/didroom-components/commit/86352cc70465eb54fe2267bacb6c9dfd83daeabc))
+
 ## [1.5.1](https://github.com/ForkbombEu/didroom-components/compare/v1.5.0...v1.5.1) (2024-01-27)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@didroom/components",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Didroom web components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

src/components/d-heading/d-heading.css

@@ -0,0 +1,27 @@
+:host([size='xl']) {
+  @apply text-[56px] not-italic font-semibold leading-[64px];
+}
+
+:host([size='l']) {
+  @apply text-5xl not-italic font-semibold leading-[56px];
+}
+
+:host([size='m']) {
+  @apply text-[40px] not-italic font-semibold leading-[48px];
+}
+
+:host([size='s']) {
+  @apply text-[32px] not-italic font-semibold leading-10;
+}
+
+:host([size='xs']) {
+  @apply text-[26px] not-italic font-semibold leading-8;
+}
+
+:host([color='accent']) {
+  @apply text-on-accent;
+}
+
+:host([color='primary']) {
+  @apply text-on;
+}

src/components/d-heading/d-heading.tsx

@@ -0,0 +1,20 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+import { Color, Size } from '../types';
+
+@Component({
+  tag: 'd-heading',
+  styleUrl: 'd-heading.css',
+  shadow: true,
+})
+export class DHeading {
+  @Prop() size: Size = 'm';
+  @Prop() color: Color = 'primary';
+
+  render() {
+    return (
+      <Host size={this.size} color={this.color}>
+        <slot></slot>
+      </Host>
+    );
+  }
+}

src/components/d-heading/readme.md

@@ -0,0 +1,18 @@
+# d-heading
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default     |
+| -------- | --------- | ----------- | -------- | ----------- |
+| `color`  | `color`   |             | `string` | `'primary'` |
+| `size`   | `size`    |             | `string` | `'m'`       |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/d-heading/test/d-heading.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-heading', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-heading></d-heading>');
+
+    const element = await page.find('d-heading');
+    expect(element).toHaveClass('hydrated');
+  });
+});

src/components/d-heading/test/d-heading.spec.tsx

@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DHeading } from '../d-heading';
+
+describe('d-heading', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DHeading],
+      html: `<d-heading></d-heading>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-heading color="primary" size="m">
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </d-heading>
+    `);
+  });
+});

src/components/d-text/d-text.css

@@ -0,0 +1,27 @@
+:host([size='xl']) {
+  @apply text-xl not-italic font-normal leading-7;
+}
+
+:host([size='l']) {
+  @apply text-lg not-italic font-normal leading-[26px];
+}
+
+:host([size='m']) {
+  @apply text-base not-italic font-normal leading-5;
+}
+
+:host([size='s']) {
+  @apply text-sm not-italic font-normal leading-5;
+}
+
+:host([size='xs']) {
+  @apply text-xs not-italic font-normal leading-4;
+}
+
+:host([color='accent']) {
+  @apply text-on-accent;
+}
+
+:host([color='primary']) {
+  @apply text-on;
+}

src/components/d-text/d-text.tsx

@@ -0,0 +1,20 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+import { Color, Size } from '../types';
+
+@Component({
+  tag: 'd-text',
+  styleUrl: 'd-text.css',
+  shadow: true,
+})
+export class DText {
+  @Prop() size: Size = 'm';
+  @Prop() color: Color = 'primary';
+
+  render() {
+    return (
+      <Host size={this.size} color={this.color}>
+        <slot></slot>
+      </Host>
+    );
+  }
+}

src/components/d-text/readme.md

@@ -0,0 +1,17 @@
+# d-text
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default |
+| -------- | --------- | ----------- | -------- | ------- |
+| `size`   | `size`    |             | `string` | `'m'`   |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/d-text/test/d-text.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-text', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-text></d-text>');
+
+    const element = await page.find('d-text');
+    expect(element).toHaveClass('hydrated');
+  });
+});

src/components/d-text/test/d-text.spec.tsx

@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DText } from '../d-text';
+
+describe('d-text', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DText],
+      html: `<d-text></d-text>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-text color="primary" size="m">
+        <mock:shadow-root>
+            <slot></slot>
+        </mock:shadow-root>
+      </d-text>
+    `);
+  });
+});