Add Adobe standard 2.0 info in the Consent doc (#420)

* Add Adobe standard 2.0 info in the Consent doc Add Adobe uses standard 2.0 and metadata time info in the Consent doc. * Update format Update format * Update Adobe Standard 2.0 info example Update Adobe Standard 2.0 info example * Update Info alert format Update Info alert format * Update a phrase per review comment Update a phrase per review comment * update typo update typo --------- Co-authored-by: Emilia Dobrin <[email protected]>
AdobeDocs · Oct 5, 2023 · 4941e22 · 4941e22
1 parent eae9678
commit 4941e22
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 73 deletions.
diff --git a/src/@adobe/gatsby-theme-aio/components/InlineAlert/index.js b/src/@adobe/gatsby-theme-aio/components/InlineAlert/index.js
@@ -16,6 +16,12 @@ import * as Icons from '@adobe/gatsby-theme-aio/src/components/Icons';
 import PropTypes from 'prop-types';
 import '@spectrum-css/inlinealert';
 
+const commonCss = css`
+  font-size: 1rem;
+  line-height: 1.3rem;
+  padding-right: 30px;
+`;
+
 const getIconName = (variant) => {
   let icon = variant;
 
@@ -26,10 +32,33 @@ const getIconName = (variant) => {
   return `${icon.charAt(0).toUpperCase()}${icon.slice(1)}Medium`;
 };
 
-const InlineAlert = ({ variant = 'info', header, text }) => {
-  const Icon = Icons[getIconName(variant)];
+  const InlineAlertTexts = ({ texts }) => {
+    const textKeys = Object.keys(texts).filter((key) => key.startsWith('text'));
+    return textKeys.map((textKey, index) =>
+      index === 0
+        ? cloneElement(texts[textKey], {
+            className: 'spectrum-InLineAlert-content',
+            css: css`
+              margin-top: 0;
+              margin-left: var(--spectrum-global-dimension-size-300) !important;
+              ${commonCss};
+            `
+          })
+        : cloneElement(texts[textKey], {
+            className: 'spectrum-InLineAlert-content',
+            css: css`
+              margin-top: var(--spectrum-global-dimension-size-150);
+              margin-left: var(--spectrum-global-dimension-size-300) !important;
+              ${commonCss};
+            `
+          })
+    );
+  };
 
-  if (header){
+  const InlineAlert = ({ variant = 'info', header, ...props }) => {
+    const Icon = Icons[getIconName(variant)] ? Icons[getIconName(variant)] : Icons.NeutralMedium;
+    variant = variant === 'warning' ? 'negative' : variant;
+
     return (
         <div
           role="alert"
@@ -44,82 +73,29 @@ const InlineAlert = ({ variant = 'info', header, text }) => {
                 margin-left: var(--spectrum-global-dimension-size-175) !important;
             }
           `}>
-          <Icon className="spectrum-InLineAlert-icon" />
-          <div
-            className="spectrum-InLineAlert-header"
-            css={css`
+        <Icon 
+        className="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon"
+        css={css`
+        display: inline-block !important;
+        `} />
+        <div>
+          {header &&
+            cloneElement(header, {
+              className: 'spectrum-InLineAlert-header',
+              css: css`
                 margin-top: 0;
-                margin-bottom: var(--spectrum-global-dimension-size-300);
                 margin-left: var(--spectrum-global-dimension-size-300);
-                p {
-                    font-size: larger;
-                }
-            `}>
-                {cloneElement(header, {
-                    className: ' ',
-                    css: css`
-                        margin: 0 !important;
-                    `
-                })}
-            </div>
-          <div
-            className="spectrum-InLineAlert-content"
-            css={css`
-              margin-top: 0;
-              margin-left: var(--spectrum-global-dimension-size-300);
-              
-              p {
-                margin: 0;
-              }
-            `}>
-            {cloneElement(text, {
-              className: ' ',
-              css: css`
-                margin: 0 !important;
+                margin-bottom: 0.5rem;
+                font-size: 1rem;
+                line-height: 1.3rem;
               `
             })}
-          </div>
         </div>
-      ); 
-  }
-  else {
-    return (
-        <div
-          role="alert"
-          className={`spectrum-InLineAlert spectrum-InLineAlert--${variant}`}
-          css={css`
-            display: block !important;
-            min-width: 0 !important;
-            width: 100%;
-            margin-top: var(--spectrum-global-dimension-size-300);
-            svg {
-                left: 0;
-                margin-left: var(--spectrum-global-dimension-size-175) !important;
-            }
-          `}>
-          <Icon className="spectrum-InLineAlert-icon" />
-          <div
-            className="spectrum-InLineAlert-content"
-            css={css`
-              margin-top: 0;
-              margin-left: var(--spectrum-global-dimension-size-300);
-              
-              p {
-                margin: 0;
-              }
-            `}>
-            {cloneElement(text, {
-              className: ' ',
-              css: css`
-                margin: 0 !important;
-              `
-            })}
-          </div>
-        </div>
-      );
-  }
+        <InlineAlertTexts texts={props} />
+      </div>
+    );
+  };
 
-};
 
 InlineAlert.propTypes = {
   variant: PropTypes.string,

diff --git a/src/pages/documentation/consent-for-edge-network/api-reference.md b/src/pages/documentation/consent-for-edge-network/api-reference.md
@@ -65,4 +65,36 @@ iOS
 
 <Tabs query="platform=ios&api=update-consents"/>
 
+<InlineAlert variant="info" slots="text1, text2, text3, text4, text5"/>
+
+When `Consent.update` API is called, the Consent extension uses Adobe Standard 2.0 to communicate with the Edge Network.  Additionally, the property `metadata` is set to the time at which the API is called.
+
+The following example shows when `Consent.update` is called to set collect consent to `y`:
+
+```swift
+// Example in iOS (Swift),  updating user's collect consent to 'yes'
+let collectConsent = ["collect": ["val": "y"]]
+let currentConsents = ["consents": collectConsent]
+Consent.update(with: currentConsents)
+```
+
+Bellow you can see the snippet of the request payload sent to the Edge Network:
+
+```json
+    "consent": [
+        {
+        "standard": "Adobe",
+        "version": "2.0",
+        "value": {
+            "metadata": {
+            "time" : "2023-10-03T17:23:04.443Z"
+            },
+            "collect": {
+            "val": "y"
+            }
+          }
+        }
+     ]
+```
+
 For additional information about the management of consent preferences, please refer to the [Privacy and GDPR documentation](../resources/privacy-and-gdpr.md#using-experience-platform-sdks-for-edge-network).
diff --git a/src/pages/documentation/consent-for-edge-network/index.md b/src/pages/documentation/consent-for-edge-network/index.md
@@ -27,6 +27,10 @@ The Adobe Experience Platform Consent mobile extension enables consent preferenc
 
 In order to ingest and use the data collected by this extension, follow the guide on [ingesting data using the Consents and Preferences data type](https://experienceleague.adobe.com/docs/experience-platform/xdm/data-types/consents.html#ingest).
 
+<InlineAlert variant="info" slots="text"/>
+
+The Consent extension uses Adobe Standard 2.0 when communicating with the Edge Network.
+
 <InlineAlert variant="warning" slots="text"/>
 
 The use of this extension is currently limited to the setting (and enforcement) of client-side, macro consent flags. While SDK APIs allow for granular and global consent preference collection, flags are not consistently enforced with upstream applications and therefore will not accommodate use cases that rely on global/granular consent preferences.