From 30be3c1b04e4e5d7ed0ab6945b91242e9150d1cf Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Mon, 22 Jan 2024 13:06:38 -0800
Subject: [PATCH] feat(skeleton-icon): new cwc component (#11434)

### Related Ticket(s)

Closes #11380
### Description

Adds new skeleton icon component
### Changelog

**New**

- skeleton icon readme, story, codesandbox examples

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 packages/carbon-web-components/README.md      |  1 +
 .../basic/components/skeleton-icon/.babelrc   | 22 +++++++++++++
 .../basic/components/skeleton-icon/.gitignore | 22 +++++++++++++
 .../basic/components/skeleton-icon/.sassrc    |  6 ++++
 .../basic/components/skeleton-icon/cdn.html   | 29 ++++++++++++++++
 .../basic/components/skeleton-icon/index.html | 28 ++++++++++++++++
 .../components/skeleton-icon/package.json     | 23 +++++++++++++
 .../skeleton-icon/sandbox.config.json         |  3 ++
 .../components/skeleton-icon/src/index.js     | 10 ++++++
 .../components/skeleton-icon/src/styles.scss  | 18 ++++++++++
 .../skeleton-icon/docs/overview.mdx           | 12 +++++++
 .../src/components/skeleton-icon/index.ts     | 10 ++++++
 .../skeleton-icon/skeleton-icon-story.mdx     | 33 +++++++++++++++++++
 .../skeleton-icon/skeleton-icon-story.ts      | 32 ++++++++++++++++++
 .../skeleton-icon/skeleton-icon.scss          | 16 +++++++++
 .../components/skeleton-icon/skeleton-icon.ts | 25 ++++++++++++++
 packages/carbon-web-components/src/index.ts   |  3 +-
 17 files changed, 292 insertions(+), 1 deletion(-)
 create mode 100644 packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.babelrc
 create mode 100644 packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.gitignore
 create mode 100644 packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.sassrc
 create mode 100644 packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/cdn.html
 create mode 100644 packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/index.html
 create mode 100644 packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/package.json
 create mode 100644 packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/sandbox.config.json
 create mode 100644 packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/index.js
 create mode 100644 packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/styles.scss
 create mode 100644 packages/carbon-web-components/src/components/skeleton-icon/docs/overview.mdx
 create mode 100644 packages/carbon-web-components/src/components/skeleton-icon/index.ts
 create mode 100644 packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.mdx
 create mode 100644 packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.ts
 create mode 100644 packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.scss
 create mode 100644 packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.ts

diff --git a/packages/carbon-web-components/README.md b/packages/carbon-web-components/README.md
index 56376e3b69c..c68bfa3af82 100644
--- a/packages/carbon-web-components/README.md
+++ b/packages/carbon-web-components/README.md
@@ -119,6 +119,7 @@ These are the list of available components via CDN:
 - radio-button.min.js
 - search.min.js
 - select.min.js
+- skeleton-icon.min.js
 - skeleton-placeholder.min.js
 - skeleton-text.min.js
 - skip-to-content.min.js
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.babelrc
new file mode 100644
index 00000000000..74450eed94b
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.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/codesandbox/basic/components/skeleton-icon/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.gitignore
new file mode 100644
index 00000000000..d94d6e13e94
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.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/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/cdn.html
new file mode 100644
index 00000000000..c802985c24e
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/cdn.html
@@ -0,0 +1,29 @@
+<!--
+@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-skeleton-icon:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/skeleton-icon.min.js"></script>
+</head>
+<body class="cds-theme-zone-white">
+  <cds-skeleton-icon></cds-skeleton-icon>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/index.html
new file mode 100644
index 00000000000..a6aec86c275
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/index.html
@@ -0,0 +1,28 @@
+<!--
+@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-skeleton-icon:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <cds-skeleton-icon></cds-skeleton-icon>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/package.json
new file mode 100644
index 00000000000..38a0bb1ca6d
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "carbon-web-components-skeleton-icon-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/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/sandbox.config.json b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/sandbox.config.json
new file mode 100644
index 00000000000..a4df8557d7b
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/index.js
new file mode 100644
index 00000000000..65b3fe28c08
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/index.js
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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/skeleton-icon/index.js';
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/styles.scss
new file mode 100644
index 00000000000..2183124956e
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/styles.scss
@@ -0,0 +1,18 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@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/packages/carbon-web-components/src/components/skeleton-icon/docs/overview.mdx b/packages/carbon-web-components/src/components/skeleton-icon/docs/overview.mdx
new file mode 100644
index 00000000000..445b9278b8e
--- /dev/null
+++ b/packages/carbon-web-components/src/components/skeleton-icon/docs/overview.mdx
@@ -0,0 +1,12 @@
+## Live demo
+
+<StorybookDemo
+  tall
+  url="https://www.ibm.com/standards/carbon/carbon-web-components"
+  variants={[
+    {
+      label: 'Default',
+      variant: 'components-skeleton-icon--default'
+    }
+  ]}
+/>
diff --git a/packages/carbon-web-components/src/components/skeleton-icon/index.ts b/packages/carbon-web-components/src/components/skeleton-icon/index.ts
new file mode 100644
index 00000000000..a4af3d84192
--- /dev/null
+++ b/packages/carbon-web-components/src/components/skeleton-icon/index.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * 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 './skeleton-icon';
diff --git a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.mdx b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.mdx
new file mode 100644
index 00000000000..9e41dba3d9a
--- /dev/null
+++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.mdx
@@ -0,0 +1,33 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Skeleton icon
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/skeleton-icon/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['skeleton-icon'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-skeleton-icon></cds-skeleton-icon>
+```
+
+## `<cds-skeleton-icon>` attributes, properties and events
+
+<Props of="cds-skeleton-icon" />
diff --git a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.ts b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.ts
new file mode 100644
index 00000000000..e75f33fa7c2
--- /dev/null
+++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * 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 { html } from 'lit';
+import './skeleton-icon';
+import storyDocs from './skeleton-icon-story.mdx';
+
+export const Default = () =>
+  html`<cds-skeleton-icon style="margin: 50px"></cds-skeleton-icon
+    ><cds-skeleton-icon
+      style="margin: 50px; width: 24px; height: 24px;"></cds-skeleton-icon>`;
+
+Default.storyName = 'Default';
+
+Default.parameters = {
+  percy: {
+    skip: true,
+  },
+};
+
+export default {
+  title: 'Components/Skeleton/Skeleton icon',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.scss b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.scss
new file mode 100644
index 00000000000..ee8d2a363c5
--- /dev/null
+++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.scss
@@ -0,0 +1,16 @@
+//
+// Copyright IBM Corp. 2019, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/skeleton-styles';
+@use '@carbon/styles/scss/utilities/skeleton' as *;
+
+:host(#{$prefix}-skeleton-icon) {
+  @include skeleton;
+
+  @extend .#{$prefix}--icon--skeleton;
+}
diff --git a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.ts b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.ts
new file mode 100644
index 00000000000..b264794c163
--- /dev/null
+++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.ts
@@ -0,0 +1,25 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * 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 { LitElement } from 'lit';
+import { prefix } from '../../globals/settings';
+import styles from './skeleton-icon.scss';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+
+/**
+ * Skeleton icon.
+ *
+ * @element cds-skeleton-icon
+ */
+@customElement(`${prefix}-skeleton-icon`)
+class CDSSkeletonIcon extends LitElement {
+  static styles = styles;
+}
+
+export default CDSSkeletonIcon;
diff --git a/packages/carbon-web-components/src/index.ts b/packages/carbon-web-components/src/index.ts
index eb2fc8852a1..09b24a75821 100644
--- a/packages/carbon-web-components/src/index.ts
+++ b/packages/carbon-web-components/src/index.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -89,6 +89,7 @@ export { default as CDSRadioButton } from './components/radio-button/radio-butto
 export { default as CDSRadioButtonGroup } from './components/radio-button/radio-button-group';
 export { default as CDSSearch } from './components/search/search';
 export { default as CDSSearchSkeleton } from './components/search/search-skeleton';
+export { default as CDSSkeletonIcon } from './components/skeleton-icon/skeleton-icon';
 export { default as CDSSkeletonPlaceholder } from './components/skeleton-placeholder/skeleton-placeholder';
 export { default as CDSSkeletonText } from './components/skeleton-text/skeleton-text';
 export { default as CDSSlider } from './components/slider/slider';