feat(ld-cookie-consent): component which helps to comply with privacy…

… regulations

package.json

@@ -70,10 +70,11 @@
     "watch:global_styles:liquid": "chokidar src/liquid/global/styles/**/*.css -c 'yarn build:styles:docs:liquid'",
     "watch:global_styles:docs": "chokidar src/docs/global/styles/**/*.css -c 'yarn build:styles:docs:docs'",
     "watch:stencil": "stencil build --docs --watch --dev --no-open --config=stencil.config.docs.ts",
-    "watch:styles:components": "chokidar src/liquid/components/**/*.css -c 'yarn build:styles:docs:components'"
+    "watch:styles:components": "chokidar src/liquid/components/**/*.css -i 'src/liquid/components/**/*.shadow.css' -c 'yarn build:styles:docs:components'"
   },
   "dependencies": {
     "@stencil/core": "^2.16.1",
+    "js-cookie": "^3.0.1",
     "tether": "^2.0.0"
   },
   "license": "SEE LICENSE IN LICENSE.md",
@@ -93,6 +94,7 @@
     "@stencil/postcss": "^2.1.0",
     "@stencil/react-output-target": "^0.3.1",
     "@types/jest": "^27.4.1",
+    "@types/js-cookie": "^3.0.2",
     "@types/react": "^18.0.3",
     "@types/react-dom": "^18.0.0",
     "@types/tether": "^1.4.6",

screenshot/builds/master.json

@@ -7583,6 +7583,136 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "3d455876",
+      "image": "5b450704fa5ce1ba379630649c5afab8.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent disclaimer custom notice only",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "e783dc8b",
+      "image": "e365669c34d87536952062addaa9574c.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent disclaimer custom opt-in",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "d6a4d630",
+      "image": "2e36fcabd00772de6a4193c971319985.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent disclaimer custom opt-out",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "4b022e08",
+      "image": "4c628b7506c287cbdb3f78faa606281e.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent disclaimer notice only",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "b4eff9e5",
+      "image": "eb82fedc6ee30b97bf75c02366a53297.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent disclaimer opt-in",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "5304ded9",
+      "image": "92a24d0e91832f7e268f2529204198f9.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent disclaimer opt-out",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "ded5bfa7",
+      "image": "24a99e8cf6394827eee1eb0ef8992f15.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent preferences custom opt-in, first category expanded",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "57c9bfea",
+      "image": "536b1ea903c9c7d88785d4ff95216e8f.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent preferences custom opt-in, third category expanded",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "715d62a3",
+      "image": "3059d8a26f856e0f67b4de796dedb1a0.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent preferences opt-in, first category expanded",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "24480fde",
+      "image": "ce1e894baafcaed34e341e359927c1f6.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent preferences opt-in, third category expanded",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "e39d2537",
       "image": "9d1a4e39691514021fbbe79cd3db8fe7.png",

scripts/applyDesignTokens.ts

@@ -424,10 +424,15 @@ function generateTypography(tokens: TypoToken[]) {
   const nonBodyTypoEntry = tokenEntries.find(
     ([, value]) => value.fontFamily !== bodyFontFamily
   )
+  const getFontFamilyVarString = (ff: string) => {
+    return ff === bodyFontFamily
+      ? 'var(--ld-font-body)'
+      : 'var(--ld-font-display)'
+  }
   return ensureWriteFile(
     join(stylesDir, 'typography/typography.css'),
     '/* autogenerated */\n:root {\n' +
-      // This expect to have at least one headline and one paragraph typo defined
+      // This expects to have at least one headline and one paragraph typo defined
       `  --ld-font-body: ${bodyFontFamily};\n` +
       (nonBodyTypoEntry !== undefined
         ? `  --ld-font-display: ${nonBodyTypoEntry[1].fontFamily};\n`
@@ -438,7 +443,9 @@ function generateTypography(tokens: TypoToken[]) {
           const val = tokens[key]
           return `  --ld-typo-${key}: ${
             val.fontWeight ? `${val.fontWeight} ` : ''
-          }${val.fontSize}/${val.lineHeight} ${val.fontFamily};`
+          }${val.fontSize}/${val.lineHeight} ${getFontFamilyVarString(
+            val.fontFamily
+          )};`
         })
         .join('\n') +
       '\n}\n',

src/docs/components/docs-main/docs-main.css

@@ -329,7 +329,7 @@
 
     > table {
       --table-cell-width-sm: 15rem;
-      --table-cell-width: 20rem;
+      --table-cell-width: 22rem;
       --table-cell-width-lg: 30rem;
       overflow-x: scroll;
       overflow-y: hidden;
@@ -444,8 +444,6 @@
 
       td,
       th {
-        width: var(--table-cell-width);
-
         /* props and attributes */
         &:first-of-type,
         &:nth-of-type(3) {
@@ -472,6 +470,11 @@
           }
         }
 
+        /* name */
+        &:first-of-type {
+          width: var(--table-cell-width-lg);
+        }
+
         /* description */
         &:nth-of-type(2) {
           width: var(--table-cell-width-lg);
@@ -489,10 +492,9 @@
 
       td,
       th {
-        /* props and attributes */
-        &:first-of-type,
-        &:nth-of-type(3) {
-          width: var(--table-cell-width-sm);
+        /* name */
+        &:first-of-type {
+          width: var(--table-cell-width);
         }
 
         /* description */
@@ -528,7 +530,7 @@
       th {
         /* props and attributes */
         &:first-of-type {
-          width: var(--table-cell-width-sm);
+          width: var(--table-cell-width);
           word-break: break-all;
           flex-shrink: 0;
         }
@@ -544,7 +546,6 @@
       thead,
       tbody {
         min-width: var(--table-min-width);
-        display: block !important;
       }
 
       code {

src/docs/components/docs-toc/docs-toc.css

@@ -86,6 +86,10 @@
         z-index: 1;
       }
     }
+
+    &[href='#methods'] + ol a {
+      word-break: break-all;
+    }
   }
 }
 

src/liquid/components/ld-accordion/ld-accordion-panel/readme.md

@@ -44,11 +44,13 @@ Please refer to the [`ld-accordion` documentation](components/ld-accordion) for
 
 ### Used by
 
+ - [ld-cookie-consent](../../ld-cookie-consent)
  - [ld-sidenav-accordion](../../ld-sidenav/ld-sidenav-accordion)
 
 ### Graph
 ```mermaid
 graph TD;
+  ld-cookie-consent --> ld-accordion-panel
   ld-sidenav-accordion --> ld-accordion-panel
   style ld-accordion-panel fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/liquid/components/ld-accordion/ld-accordion-section/ld-accordion-section.tsx

@@ -35,7 +35,9 @@ export class LdAccordionSection {
   updateExpandedState(newExpanded: boolean) {
     Array.from(this.el.children).forEach(
       (child: HTMLLdAccordionPanelElement | HTMLLdAccordionToggleElement) => {
-        child.setExpanded(newExpanded)
+        if (typeof child.setExpanded === 'function') {
+          child.setExpanded(newExpanded)
+        }
       }
     )
 

src/liquid/components/ld-accordion/ld-accordion-section/readme.md

@@ -39,11 +39,13 @@ Please refer to the [`ld-accordion` documentation](components/ld-accordion) for
 
 ### Used by
 
+ - [ld-cookie-consent](../../ld-cookie-consent)
  - [ld-sidenav-accordion](../../ld-sidenav/ld-sidenav-accordion)
 
 ### Graph
 ```mermaid
 graph TD;
+  ld-cookie-consent --> ld-accordion-section
   ld-sidenav-accordion --> ld-accordion-section
   style ld-accordion-section fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/liquid/components/ld-accordion/ld-accordion-toggle/readme.md

@@ -70,6 +70,7 @@ Type: `Promise<void>`
 
 ### Used by
 
+ - [ld-cookie-consent](../../ld-cookie-consent)
  - [ld-sidenav-accordion](../../ld-sidenav/ld-sidenav-accordion)
 
 ### Depends on
@@ -80,6 +81,7 @@ Type: `Promise<void>`
 ```mermaid
 graph TD;
   ld-accordion-toggle --> ld-icon
+  ld-cookie-consent --> ld-accordion-toggle
   ld-sidenav-accordion --> ld-accordion-toggle
   style ld-accordion-toggle fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/liquid/components/ld-accordion/ld-accordion.shadow.css

@@ -35,6 +35,7 @@
   --ld-accordion-panel-border-top-col: var(--ld-col-neutral-010);
 
   &(:where(.ld-accordion)) {
+    color-scheme: var(--ld-accordion-color-scheme, none);
     display: block;
     flex-grow: 1;
   }

src/liquid/components/ld-accordion/readme.md

@@ -356,11 +356,13 @@ You can nest an accordion inside another.
 
 ### Used by
 
+ - [ld-cookie-consent](../ld-cookie-consent)
  - [ld-sidenav-accordion](../ld-sidenav/ld-sidenav-accordion)
 
 ### Graph
 ```mermaid
 graph TD;
+  ld-cookie-consent --> ld-accordion
   ld-sidenav-accordion --> ld-accordion
   style ld-accordion fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/liquid/components/ld-button/ld-button.tsx

@@ -213,6 +213,7 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
       <Tag
         {...this.clonedAttributes}
         href={this.href}
+        target={this.target}
         aria-busy={hasProgress ? 'true' : undefined}
         aria-disabled={
           this.disabled || this.el.getAttribute('aria-disabled') === 'true'

src/liquid/components/ld-button/readme.md

@@ -563,11 +563,13 @@ Type: `Promise<void>`
 
 ### Used by
 
+ - [ld-cookie-consent](../ld-cookie-consent)
  - [ld-pagination](../ld-pagination)
 
 ### Graph
 ```mermaid
 graph TD;
+  ld-cookie-consent --> ld-button
   ld-pagination --> ld-button
   style ld-button fill:#f9f,stroke:#333,stroke-width:4px
 ```