From 2c76d185b8a9d25ce99b1ee191599a6aeed3c382 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 30 Jun 2021 11:43:26 -0400 Subject: [PATCH] feat(InlineLoading): refactor InlineLoading to sass module (#9030) Co-authored-by: Andrea N. Cardona Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../InlineLoading/InlineLoading.stories.js | 82 ++++++++++++++ .../src/components/InlineLoading/index.js | 8 ++ .../__tests__/inline-loading-test.js | 26 +++++ packages/styles/scss/components/_index.scss | 1 + .../components/inline-loading/_index.scss | 11 ++ .../inline-loading/_inline-loading.scss | 107 ++++++++++++++++++ .../components/inline-loading/_keyframes.scss | 12 ++ 7 files changed, 247 insertions(+) create mode 100644 packages/carbon-react/src/components/InlineLoading/InlineLoading.stories.js create mode 100644 packages/carbon-react/src/components/InlineLoading/index.js create mode 100644 packages/styles/scss/components/__tests__/inline-loading-test.js create mode 100644 packages/styles/scss/components/inline-loading/_index.scss create mode 100644 packages/styles/scss/components/inline-loading/_inline-loading.scss create mode 100644 packages/styles/scss/components/inline-loading/_keyframes.scss diff --git a/packages/carbon-react/src/components/InlineLoading/InlineLoading.stories.js b/packages/carbon-react/src/components/InlineLoading/InlineLoading.stories.js new file mode 100644 index 000000000000..0c603a4a312c --- /dev/null +++ b/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 = () => ( + +); + +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 ( + + {({ handleSubmit, isSubmitting, success, description, ariaLive }) => ( +
+ + {isSubmitting || success ? ( + + ) : ( + + )} +
+ )} + + ); +}; diff --git a/packages/carbon-react/src/components/InlineLoading/index.js b/packages/carbon-react/src/components/InlineLoading/index.js new file mode 100644 index 000000000000..b9e4fa9b1a57 --- /dev/null +++ b/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'; diff --git a/packages/styles/scss/components/__tests__/inline-loading-test.js b/packages/styles/scss/components/__tests__/inline-loading-test.js new file mode 100644 index 000000000000..5b5f8e23c815 --- /dev/null +++ b/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); + }); +}); diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss index e4ade8d9175c..86119c4127ba 100644 --- a/packages/styles/scss/components/_index.scss +++ b/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'; diff --git a/packages/styles/scss/components/inline-loading/_index.scss b/packages/styles/scss/components/inline-loading/_index.scss new file mode 100644 index 000000000000..e7c44a20af74 --- /dev/null +++ b/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; diff --git a/packages/styles/scss/components/inline-loading/_inline-loading.scss b/packages/styles/scss/components/inline-loading/_inline-loading.scss new file mode 100644 index 000000000000..6d4edeae5456 --- /dev/null +++ b/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; + } + } +} diff --git a/packages/styles/scss/components/inline-loading/_keyframes.scss b/packages/styles/scss/components/inline-loading/_keyframes.scss new file mode 100644 index 000000000000..43c3fc2a708b --- /dev/null +++ b/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; + } +}