feat(styles): add skeleton sass modules and stories (#9423)

* feat: add skeleton styles

* test: add skeleton tests

* feat: add skeleton stories

* fix: skeleton modules test

* fix: rename skeleton files

* test(codesnippet): fix vrt error

* chore: add comment

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/carbon-react/src/components/Skeleton/Skeleton.stories.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-react';
+import { withKnobs, select, boolean, number } from '@storybook/addon-knobs';
+
+const classNames = {
+  'my--skeleton__placeholder--small': 'my--skeleton__placeholder--small',
+  'my--skeleton__placeholder--medium': 'my--skeleton__placeholder--medium',
+  'my--skeleton__placeholder--large': 'my--skeleton__placeholder--large',
+};
+
+const placeholderProps = () => ({
+  className: select('Classes with different sizes', classNames),
+});
+
+const widths = {
+  '100%': '100%',
+  '250px': '250px',
+};
+
+const textProps = () => ({
+  heading: boolean('Skeleton text at a larger size (heading)'),
+  paragraph: boolean('Use multiple lines of text (paragraph)'),
+  lineCount: number('The number of lines in a paragraph (lineCount)', 3),
+  width: select(
+    'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
+    widths,
+    '100%'
+  ),
+});
+
+export default {
+  title: 'Components/Skeleton',
+  decorators: [withKnobs],
+};
+
+export const _SkeletonPlaceholder = () => {
+  return (
+    <div style={{ height: '250px', width: '250px' }}>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+      .my--skeleton__placeholder--small {
+        height: 100px;
+        width: 100px;
+      }
+
+      .my--skeleton__placeholder--medium {
+        height: 150px;
+        width: 150px;
+      }
+
+      .my--skeleton__placeholder--large {
+        height: 250px;
+        width: 250px;
+      }
+    `,
+        }}
+      />
+      <SkeletonPlaceholder {...placeholderProps()} />
+    </div>
+  );
+};
+
+export const _SkeletonText = () => {
+  return (
+    <div style={{ width: '300px' }}>
+      <SkeletonText {...textProps()} />
+    </div>
+  );
+};

packages/carbon-react/src/components/Skeleton/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { SkeletonPlaceholder, SkeletonText } from 'carbon-components-react';

packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.e2e.js

@@ -73,6 +73,7 @@ describe('CodeSnippet', () => {
 
   it('should render', () => {
     cy.findAllByText(/node/).should('be.visible');
+    cy.findAllByText(/Show more/).should('be.visible');
 
     // snapshots should always be taken _after_ an assertion that
     // a element/component should be visible. This is to ensure
@@ -95,3 +96,13 @@ describe('CodeSnippet', () => {
     cy.percySnapshot();
   });
 });
+
+// https://github.com/cypress-io/cypress/issues/8418
+const resizeObserverLoopErrRe = /^ResizeObserver loop limit exceeded/;
+cy.on('uncaught:exception', (err) => {
+  if (resizeObserverLoopErrRe.test(err.message)) {
+    // returning false here prevents Cypress from
+    // failing the test
+    return false;
+  }
+});

packages/styles/scss/components/__tests__/skeleton-test.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/skeleton-styles', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:meta';
+      @use '../skeleton-styles';
+
+      $_: get('mixin', meta.mixin-exists('skeleton-styles', 'skeleton-styles'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

packages/styles/scss/components/_index.scss

@@ -41,6 +41,7 @@
 @use 'radio-button';
 @use 'search';
 @use 'select';
+@use 'skeleton-styles';
 @use 'slider';
 @use 'structured-list';
 @use 'tabs';

packages/styles/scss/components/skeleton-styles/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'skeleton-styles';
+@use 'skeleton-styles';
+
+@include skeleton-styles.skeleton-styles;

packages/styles/scss/components/skeleton-styles/_skeleton-styles.scss

@@ -0,0 +1,47 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// 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 '../../config' as *;
+@use '../../utilities/skeleton' as *;
+@use '../../utilities/convert' as *;
+@use '../../spacing' as *;
+
+/// Skeleton styles
+/// @access public
+/// @group skeleton
+@mixin skeleton-styles {
+  //skeleton icon
+  .#{$prefix}--icon--skeleton {
+    @include skeleton;
+
+    display: inline-block;
+    width: rem(16px);
+    height: rem(16px);
+  }
+
+  //skeleton placeholder
+  .#{$prefix}--skeleton__placeholder {
+    @include skeleton;
+
+    width: rem(100px);
+
+    height: rem(100px);
+  }
+
+  //skeleton text
+  .#{$prefix}--skeleton__text {
+    @include skeleton;
+
+    width: 100%;
+    height: 1rem;
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$prefix}--skeleton__heading {
+    height: 1.5rem;
+  }
+}