feat(InlineLoading): refactor InlineLoading to sass module (#9030)

Co-authored-by: Andrea N. Cardona <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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

@@ -0,0 +1,82 @@
+/**
+ * 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.
+ */
+
+import React, { useState } from 'react';
+import { Button, InlineLoading } from 'carbon-components-react';
+
+export default {
+  title: 'Components/InlineLoading',
+
+  parameters: {
+    component: InlineLoading,
+  },
+};
+
+export const _InlineLoading = () => (
+  <InlineLoading
+    status="active"
+    iconDescription="Active loading indicator"
+    description="Loading data..."
+  />
+);
+
+export const UxExample = () => {
+  function MockSubmission({ children }) {
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [success, setSuccess] = useState(false);
+    const [description, setDescription] = useState('Submitting...');
+    const [ariaLive, setAriaLive] = useState('off');
+    const handleSubmit = () => {
+      setIsSubmitting(true);
+      setAriaLive('assertive');
+
+      // Instead of making a real request, we mock it with a timer
+      setTimeout(() => {
+        setIsSubmitting(false);
+        setSuccess(true);
+        setDescription('Submitted!');
+
+        // To make submittable again, we reset the state after a bit so the user gets completion feedback
+        setTimeout(() => {
+          setSuccess(false);
+          setDescription('Submitting...');
+          setAriaLive('off');
+        }, 1500);
+      }, 2000);
+    };
+
+    return children({
+      handleSubmit,
+      isSubmitting,
+      success,
+      description,
+      ariaLive,
+    });
+  }
+
+  return (
+    <MockSubmission>
+      {({ handleSubmit, isSubmitting, success, description, ariaLive }) => (
+        <div style={{ display: 'flex', width: '300px' }}>
+          <Button kind="secondary" disabled={isSubmitting || success}>
+            Cancel
+          </Button>
+          {isSubmitting || success ? (
+            <InlineLoading
+              style={{ marginLeft: '1rem' }}
+              description={description}
+              status={success ? 'finished' : 'active'}
+              aria-live={ariaLive}
+            />
+          ) : (
+            <Button onClick={handleSubmit}>Submit</Button>
+          )}
+        </div>
+      )}
+    </MockSubmission>
+  );
+};

packages/carbon-react/src/components/InlineLoading/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 { InlineLoading } from 'carbon-components-react';

packages/styles/scss/components/__tests__/inline-loading-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/inline-loading', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:meta';
+      @use '../inline-loading';
+
+      $_: get('mixin', meta.mixin-exists('inline-loading', 'inline-loading'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

packages/styles/scss/components/_index.scss

@@ -13,6 +13,7 @@
 @use 'content-switcher';
 @use 'date-picker';
 @use 'file-uploader';
+@use 'inline-loading';
 @use 'link';
 @use 'list';
 @use 'loading';

packages/styles/scss/components/inline-loading/_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 'inline-loading';
+@use 'inline-loading';
+
+@include inline-loading.inline-loading;

packages/styles/scss/components/inline-loading/_inline-loading.scss

@@ -0,0 +1,107 @@
+//
+// 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 'keyframes';
+@use '../../config' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../utilities/convert' as *;
+
+/// @type Number
+/// @access private
+/// @group loading
+$-loading-gap-small: 110;
+
+/// Inline loading styles
+/// @access public
+/// @group inline-loading
+@mixin inline-loading {
+  .#{$prefix}--inline-loading {
+    display: flex;
+    width: 100%;
+    min-height: 2rem;
+    align-items: center;
+
+    .#{$prefix}--loading__svg circle {
+      stroke-width: 12;
+    }
+
+    .#{$prefix}--loading__stroke {
+      stroke-dashoffset: $-loading-gap-small;
+    }
+  }
+
+  .#{$prefix}--inline-loading__text {
+    @include type-style('label-01');
+
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--inline-loading__animation {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: $spacing-03;
+  }
+
+  .#{$prefix}--inline-loading__checkmark-container {
+    fill: $support-success;
+
+    // For deprecated older markup
+    &.#{$prefix}--inline-loading__svg {
+      position: absolute;
+      top: 0.75rem;
+      width: 0.75rem;
+    }
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--inline-loading__checkmark {
+    animation-duration: 250ms;
+    animation-fill-mode: forwards;
+    animation-name: stroke;
+    fill: none;
+    stroke: $interactive;
+    stroke-dasharray: 12;
+    stroke-dashoffset: 12;
+    stroke-width: 1.8;
+    transform-origin: 50% 50%;
+  }
+
+  .#{$prefix}--inline-loading--error {
+    width: rem(16px);
+    height: rem(16px);
+    fill: $support-error;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--loading--small .#{$prefix}--inline-loading__svg {
+    stroke: $interactive;
+  }
+  /* If IE11 Don't show check animation */
+  @media screen and (-ms-high-contrast: active),
+    screen and (-ms-high-contrast: none) {
+    .#{$prefix}--inline-loading__checkmark-container {
+      top: 1px;
+      right: 0.5rem;
+    }
+
+    .#{$prefix}--inline-loading__checkmark {
+      animation: none;
+      stroke-dasharray: 0;
+      stroke-dashoffset: 0;
+    }
+  }
+}

packages/styles/scss/components/inline-loading/_keyframes.scss

@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}