feat(toggle/toggletip): cwc controls (#11395)

* feat(toggle/toggletip): cwc controls * fix(toggletip): open prop * fix(toggletip): body text font --------- Co-authored-by: kennylam <[email protected]>
carbon-design-system · Jan 18, 2024 · 39df66d · 39df66d
1 parent 63b1cfe
commit 39df66d
Show file tree

Hide file tree

Showing 22 changed files with 538 additions and 352 deletions.
diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts
@@ -95,6 +95,10 @@ const stories = glob.sync(
     '../src/**/tag.stories.ts',
     '../src/**/tooltip.mdx',
     '../src/**/tooltip.stories.ts',
+    '../src/**/toggle.mdx',
+    '../src/**/toggle.stories.ts',
+    '../src/**/toggletip.mdx',
+    '../src/**/toggletip.stories.ts',
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],

diff --git a/...ts/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.babelrc b/...ts/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/.../packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.gitignore b/.../packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/...nts/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.sassrc b/...nts/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
diff --git a/...ts/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/cdn.html b/...ts/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/cdn.html
@@ -0,0 +1,41 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-toggletip:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/toggle-tip.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/link.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/button.min.js"></script>
+</head>
+<body class="cds-theme-zone-white">
+  <div data-floating-menu-container style="position: relative; padding: 3rem; display: flex; flex-direction: column; align-items: center;">
+    <cds-toggletip>
+      Toggletip label
+
+      <p slot="body-text">
+      Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+      </p>
+      <cds-link slot="actions">Test</cds-link>
+       <cds-button slot="actions">Button</cds-button>
+    </cds-toggletip>
+  </div>
+</body>
+</html>
diff --git a/.../packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/index.html b/.../packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/index.html
@@ -0,0 +1,39 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>carbon-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+
+  <link rel="stylesheet" href="src/styles.scss" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-toggletip:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <div data-floating-menu-container style="position: relative; padding: 3rem; display: flex; flex-direction: column; align-items: center;">
+    <cds-toggletip>
+      Toggletip label
+
+      <p slot="body-text">
+      Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+      </p>
+      <cds-link slot="actions">Test</cds-link>
+       <cds-button slot="actions">Button</cds-button>
+    </cds-toggletip>
+  </div>
+</body>
+</html>
diff --git a/...ackages/carbon-web-components/examples/stackblitz/basic/components/toggletip/package.json b/...ackages/carbon-web-components/examples/stackblitz/basic/components/toggletip/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "carbon-web-components-toggletip-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/.../carbon-web-components/examples/stackblitz/basic/components/toggletip/sandbox.config.json b/.../carbon-web-components/examples/stackblitz/basic/components/toggletip/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/...ackages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/index.js b/...ackages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/index.js
@@ -0,0 +1,12 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es/components/toggle-tip/index.js';
+import '@carbon/web-components/es/components/link/index.js';
+import '@carbon/web-components/es/components/button/index.js';
diff --git a/...ages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/styles.scss b/...ages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts
@@ -65,17 +65,18 @@ const defaultArgs = {
   titleText: 'This is an example title',
   value: '',
   warn: false,
-  warnText: 'please notice the warning',  
-}
+  warnText: 'please notice the warning',
+};
 
 const controls = {
   disabled: {
     control: 'boolean',
     description: `Specify if the dropdown should be disabled, or not.`,
   },
   direction: {
-    control: 'select', options: directionOptions,
-    description: `Dropdown direction`
+    control: 'select',
+    options: directionOptions,
+    description: `Dropdown direction`,
   },
   hideLabel: {
     control: 'boolean',
@@ -102,8 +103,9 @@ const controls = {
     description: `Specify if the dropdown should be read only, or not.`,
   },
   size: {
-    control: 'select', options: sizes,
-    description: `Dropdown size.`
+    control: 'select',
+    options: sizes,
+    description: `Dropdown size.`,
   },
   titleText: {
     control: 'text',
@@ -136,7 +138,7 @@ export const Default = {
         `
       )}
     </cds-combo-box>
-  `
+  `,
 };
 
 export const WithLayer = {
@@ -159,7 +161,7 @@ export const WithLayer = {
         </cds-combo-box>
       </div>
     </sb-template-layers>
-  `
+  `,
 };
 
 export const Playground = {
@@ -204,8 +206,8 @@ export const Playground = {
         `
       )}
     </cds-combo-box>
-  `
-}
+  `,
+};
 
 const meta = {
   title: 'Components/Combo box',