Merge pull request #2 from wunderio/main

Lit based components

Author: gints-erglis

README.md

@@ -94,13 +94,15 @@ Fundamental building blocks that cannot be broken down further.
 | [Countdown](./components/02-molecules/countdown)           | experimental  | **SDC + Web Component** - countdown                 |
 | [Stat Card](./components/02-molecules/stat-card)           | experimental  | **SDC + Web Component** - card with animated number |
 | [Toast Messages](./components/02-molecules/toast-messages) | experimental  | **SDC + Web Component** - notifications             |
+| [Attribute List](./components/02-molecules/attribute-list) | stable        | **SDC** - definition list                           |
 
 ### Organisms
-| Component                                      | Status         | Description                                                           |
-|:-----------------------------------------------|:---------------|:----------------------------------------------------------------------|
-| [Header](./components/03-organisms/header)     | stable         | **SDC** - header component                                            |
-| [Drawer](./components/03-organisms/drawer)     | experimental   | **SDC + Web Component** - container component that functions as both off-canvas sidebars (menus, carts) and centered modal dialogs.                                            |
-| [Carousel](./components/03-organisms/carousel) | experimental   | **SDC + Web Component** - a lightweight and accessible content slider |
+| Component                                      | Status       | Description                                                                                                                         |
+|:-----------------------------------------------|:-------------|:------------------------------------------------------------------------------------------------------------------------------------|
+| [Header](./components/03-organisms/header)     | stable       | **SDC** - header component                                                                                                          |
+| [Drawer](./components/03-organisms/drawer)     | experimental | **SDC + Web Component** - container component that functions as both off-canvas sidebars (menus, carts) and centered modal dialogs. |
+| [Carousel](./components/03-organisms/carousel) | experimental | **SDC + Web Component** - a lightweight and accessible content slider                                                               |
+| [Favorite](./components/03-organisms/favorite) | experimental | **SDC + Web Component + Lit** - Save to list (watchlist, favorites, etc.)                                                           |
 
 ### Utilities
 | Component                                                         | Status       | Description                                                                                 |
@@ -115,3 +117,4 @@ Fundamental building blocks that cannot be broken down further.
 
 * **UI Library / Storybook:** [Setup and Usage Guide](./docs/storybook.md)
 * **Drupal / SDC:** [Using Single-Directory Components](https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components)
+* **Lit:** [Setup and Usage Guide](./docs/lit.md)

assets/icons/bookmark.svg

@@ -5,8 +5,8 @@ link-manager {
 
 .ext-icon {
   display: inline-flex;
-  margin-left: 0.35em;
-  vertical-align: middle;
+  margin-left: 0.2em;
+  vertical-align: baseline;
   width: var(--ext-link-icon-size, 1em);
   height: var(--ext-link-icon-size, 1em);
   line-height: 1;

assets/icons/heart.svg

@@ -5,8 +5,8 @@ link-manager {
 
 .ext-icon {
   display: inline-flex;
-  margin-left: 0.35em;
-  vertical-align: middle;
+  margin-left: 0.2em;
+  vertical-align: baseline;
   width: var(--ext-link-icon-size, 1em);
   height: var(--ext-link-icon-size, 1em);
   line-height: 1;

components/00-base/01-primitives/link-manager/link-manager.css

@@ -4,6 +4,7 @@
 }
 
 body {
+  font-family: var(--font-family-body-default);
   font-size: 1rem;
   line-height: 1.5;
   color: var(--color-text-primary, #222222);
@@ -42,3 +43,20 @@ h3 {
   outline: 2px solid var(--color-semantic-info-60, #2563eb);
   outline-offset: 2px;
 }
+
+img.branding__logo {
+  [data-theme="dark"] & {
+    filter: brightness(0) invert(1);
+  }
+}
+
+// For Storybook
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

components/00-base/01-primitives/link-manager/link-manager.scss

@@ -7,7 +7,7 @@
  * - content: [string] Badge content.
  * - type: [string] Badge type (text, indicator).
  * - position: [string] Badge placement (inline, corner).
- * - style: [string] Badge content.
+ * - style: [string] Badge style.
  * - modifier_class: [string] Additional classes.
  */
 #}

components/00-base/03-base/_base.scss

@@ -7,3 +7,7 @@ This is the button component.
 
 This component can be used within Experience Builder and other page builders
 that support SDC. It can also be added to other components and theme templates.
+
+## Status
+
+Markup is complete. Styles and Storybook documentation are in progress and need to be finalized. Adjust this component to your needs. This component serves as example.

components/01-atoms/badge/badge.twig

@@ -1,17 +1,12 @@
 '$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
 
 name: Button
-
 status: stable
-
 group: Atoms
 
 props:
-
   type: object
-
   properties:
-
     type:
       type: string
       title: Type
@@ -46,6 +41,8 @@ props:
         - chevron-down
         - close
         - menu
+        - heart
+        - bookmark
       examples:
         - 'right-arrow'
 

components/01-atoms/button/README.md

@@ -1,19 +1,49 @@
+/**
+ * @file button.scss
+ * Styles for buttons
+ */
 .button {
+  --button-padding: 0.7em 1em;
+  --button-font-size: var(--font-size-2xs, 0.875rem);
+  --button-inline-gap: var(--space-sm, 8px);
+  --button-bg: var(--color-button-primary-background, #186cd5);
+  --button-color: var(--color-button-primary-color, #ffffff);
+  --button-disabled-bg: var(--color-button-disabled-background, #94A3B8);
   display: inline-flex;
-  padding: var(--space-lg, 16px);
+  min-width: max-content;
+  max-width: 100%;
+  padding: var(--button-padding);
   align-items: center;
-  gap: var(--space-sm, 8px);
+  gap: var(--button-inline-gap);
+  min-width: max-content;
+  border: 0;
   border-radius: var(--radius-xs, 3px);
-  font-size: var(--font-size-3xs, 12px);
+  font-size: var(--button-font-size);
   text-transform: uppercase;
 }
 .button--with-badge {
   position: relative;
 }
+.button__text {
+  flex-shrink: 1;
+  text-align: center;
+  white-space: nowrap;
+}
+.button .button__icon {
+  flex-shrink: 0;
+  display: block;
+  fill: currentColor;
+}
 .button--primary {
-  color: var(--color-buttons-button-primary-color, #ffffff);
-  background: var(--color-buttons-button-primary-background, #186cd5);
+  color: var(--button-color);
+  background: var(--button-bg);
 }
 .button--primary[disabled] {
-  background: var(--color-buttons-button-disabled-background, #94A3B8);
+  background: var(--button-disabled-bg);
+}
+.button--large {
+  --button-font-size: var(--font-size-xs, 16px);
+}
+.button--small {
+  --button-font-size: var(--font-size-3xs, 12px);
 }