Revert "fix: fixed merge"

This reverts commit 06fd9ad, reversing
changes made to 9a05413.

.github/CODEOWNERS

@@ -1,19 +1,19 @@
 # Default to system one design and one dev
 
-* @carbon-design-system/developers-system-reviewers @carbon-design-system/design
+* @carbon-design-system/developers-system @carbon-design-system/design
 
 # Diana Tran is the owner for Sustainability Software Patterns
 
 src/pages/community/patterns/login-pattern/*  @dianatran18 @lukefirth
 
 # Eliad Moosavi and Natasha Decoste are the code owners for Data Visualization
 
-src/pages/data-visualization/* @theiliad # @natashadecoste
+src/pages/data-visualization/* @theiliad @natashadecoste
 
 # Zvonimir Fras for Angular tutorial
 
 /src/pages/tutorial/angular/* @zvonimirfras
 
 # Lee Chase for Vue tutorial
 
-/src/pages/tutorial/vue/* @lee-chase
+/src/pages/tutorial/vue/* @lee-chase

.gitignore

@@ -113,6 +113,3 @@ build-timestamp
 
 .now
 .vercel
-
-# Yarn install state
-.yarn/install-state.gz

api/survey.ts

@@ -0,0 +1,93 @@
+import { NowRequest, NowResponse } from '@now/node';
+import fetch, { FetchError } from 'node-fetch';
+
+import { WebClient } from '@slack/web-api';
+
+require('dotenv').config(); //eslint-disable-line @typescript-eslint/no-var-requires
+
+const permittedOrigins = [
+  'https://www.carbondesignsystem.com',
+  'https://w3.ibm.com',
+];
+
+module.exports = async (req: NowRequest, res: NowResponse) => {
+  if (req.cookies.survey_recently_submitted) {
+    return res.json({ error: 'Survey recently submitted.' });
+  }
+
+  if (!process.env.SURVEYGIZMO_REQUEST_URI) {
+    return res.json({ error: 'Invalid SurveyGizmo request uri.' });
+  }
+
+  if (!process.env.SLACK_TOKEN || !process.env.SLACK_CHANNEL) {
+    return res.json({ error: 'Invalid Slack token or channel.' });
+  }
+
+  // Initialize Slack web client
+  const slack = new WebClient(process.env.SLACK_TOKEN);
+
+  // Only allow requests from specified urls
+  const { origin } = req.headers;
+  if (!origin || Array.isArray(origin) || !permittedOrigins.includes(origin)) {
+    return res.json({
+      error: `Request sent from unauthorized origin: ${origin}`,
+    });
+  }
+
+  // Prepare data for SurveyGizmo
+  const { experience, comment, path } = JSON.parse(req.body);
+  const surveyBody = JSON.stringify({
+    data: {
+      '2': { value: experience },
+      '3': { value: comment },
+      '4': { value: path },
+    },
+  });
+
+  await fetch(process.env.SURVEYGIZMO_REQUEST_URI, {
+    method: 'PUT',
+    body: surveyBody,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).catch((error: FetchError) => res.json({ error: error.message }));
+
+  // Prepare data for Slack
+  const emoji =
+    experience === 'Negative'
+      ? ':disappointed:'
+      : experience === 'Neutral'
+      ? ':neutral_face:'
+      : ':grinning:';
+
+  const blocks = [
+    {
+      type: 'section',
+      text: {
+        type: 'mrkdwn',
+        text: `${emoji} *${experience}* web page experience ${emoji}`,
+      },
+    },
+  ];
+
+  if (path) {
+    blocks[0].text.text += `\n>*Path:*\n>${path}`;
+  }
+
+  if (comment) {
+    blocks[0].text.text += `\n>*Comment:*\n>${comment}`;
+  }
+
+  await slack.chat.postMessage({
+    blocks,
+    channel: process.env.SLACK_CHANNEL,
+  } as any);
+
+  // Set a "recently submitted" cookie that expires after one minute to mitigate spam
+  res.setHeader(
+    'Set-Cookie',
+    'survey_recently_submitted=true; Max-Age=60; Secure; SameSite=None'
+  );
+
+  res.status(200).send('success');
+};

package.json

@@ -39,12 +39,12 @@
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^11.49.0",
-    "@carbon/icons": "^11.45.0",
-    "@carbon/icons-react": "^11.45.0",
-    "@carbon/pictograms": "^12.37.1",
-    "@carbon/pictograms-react": "^11.63.1",
-    "@carbon/react": "^1.61.0",
+    "@carbon/elements": "^11.40.0",
+    "@carbon/icons": "^11.36.0",
+    "@carbon/icons-react": "^11.36.0",
+    "@carbon/pictograms": "^12.31.0",
+    "@carbon/pictograms-react": "^11.57.0",
+    "@carbon/react": "^1.51.0",
     "@loadable/component": "^5.15.2",
     "@slack/web-api": "^5.11.0",
     "babel-preset-env": "^1.7.0",
@@ -57,7 +57,7 @@
     "gatsby": "^4.25.7",
     "gatsby-image": "^3.7.1",
     "gatsby-plugin-image": "^2.9.0",
-    "gatsby-theme-carbon": "^3.4.19",
+    "gatsby-theme-carbon": "^3.4.13",
     "lodash-es": "^4.17.15",
     "markdown-it": "^12.3.2",
     "nanoid": "^2.1.11",

src/components/A11yStatus/A11yStatus.js

@@ -24,6 +24,7 @@ import {
   help,
   hidden,
   moreLink,
+  table,
   variant,
   version,
   headingLink,
@@ -396,7 +397,10 @@ const A11yStatus = ({ components, layout }) => {
           <strong>Framework:</strong> React (@carbon/react)
         </p>
         <Row>
-          <Column colLg={12} noGutterSm className="page-table__container">
+          <Column
+            colLg={12}
+            noGutterSm
+            className={`${table} page-table__container`}>
             <table className="page-table">
               <thead>
                 <tr>

src/components/A11yStatusTag/A11yStatusTag.js

@@ -43,15 +43,15 @@ const A11yStatusTag = ({ tag, tooltip }) => {
 
   const { color, text, definition } = tags[tag];
 
-  return tooltip ? (
-    <DefinitionTooltip openOnHover definition={definition}>
-      <Tag type={color} className={styles.tag}>
-        {text}
-      </Tag>
-    </DefinitionTooltip>
-  ) : (
+  return (
     <Tag type={color} className={styles.tag}>
-      {text}
+      {tooltip ? (
+        <DefinitionTooltip openOnHover definition={definition}>
+          {text}
+        </DefinitionTooltip>
+      ) : (
+        text
+      )}
     </Tag>
   );
 };

src/components/A11yStatusTag/a11y-status-tag.module.scss

@@ -1,12 +1,3 @@
 :global(.page-table) .tag {
   margin-left: 0;
 }
-
-:global(.cds--popover-container .cds--definition-term) {
-  border: none;
-}
-
-:global(.cds--popover-container .cds--definition-term) .tag span {
-  border-block-end: 1px dotted $border-strong;
-  cursor: pointer;
-}

src/components/ColorTokenTable/ColorTokenTable.js

@@ -435,75 +435,6 @@ export default class ColorTokenTable extends React.Component {
               </tbody>
             </table>
           </div>
-          <div className="cds--col-lg-7">
-            <h3 className="page-h3">AI</h3>
-          </div>
-          <div className="cds--col-lg-12 cds--no-gutter">
-            <table className="page-table">
-              <thead>
-                <tr>
-                  <th>Token</th>
-                  <th>Role</th>
-                  <th>Value</th>
-                </tr>
-              </thead>
-              <tbody>
-                {Object.keys(colorTokens['ai']).map((token, i) =>
-                  this.renderToken(
-                    token,
-                    colorTokens['ai'][token],
-                    i
-                  )
-                )}
-              </tbody>
-            </table>
-          </div>
-          <div className="cds--col-lg-7">
-            <h3 className="page-h3">Chat</h3>
-          </div>
-          <div className="cds--col-lg-12 cds--no-gutter">
-            <table className="page-table">
-              <thead>
-                <tr>
-                  <th>Token</th>
-                  <th>Role</th>
-                  <th>Value</th>
-                </tr>
-              </thead>
-              <tbody>
-                {Object.keys(colorTokens['chat']).map((token, i) =>
-                  this.renderToken(
-                    token,
-                    colorTokens['chat'][token],
-                    i
-                  )
-                )}
-              </tbody>
-            </table>
-          </div>
-          <div className="cds--col-lg-7">
-            <h3 className="page-h3">Chat button</h3>
-          </div>
-          <div className="cds--col-lg-12 cds--no-gutter">
-            <table className="page-table">
-              <thead>
-                <tr>
-                  <th>Token</th>
-                  <th>Role</th>
-                  <th>Value</th>
-                </tr>
-              </thead>
-              <tbody>
-                {Object.keys(colorTokens['chat-button']).map((token, i) =>
-                  this.renderToken(
-                    token,
-                    colorTokens['chat-button'][token],
-                    i
-                  )
-                )}
-              </tbody>
-            </table>
-          </div>
         </section>
       </div>
     );