feat: color prop for sectionloadingindicator (#727)

Ability to set a custom color for the SectionLoadingIndicator.
Loading indicators story improvements included.

packages/loadingIndicator/components/SectionLoadingIndicator.tsx

@@ -1,13 +1,24 @@
+import { css } from "@emotion/css";
 import * as React from "react";
+import { greyLight } from "../../design-tokens/build/js/designTokens";
 import { sectionLoadingWrapper, sectionLoadingIndicator } from "../style";
 
-const SectionLoadingIndicator = () => (
- <div className={sectionLoadingWrapper}>
- <div
- className={sectionLoadingIndicator}
- data-cy="sectionLoadingIndicator"
- />
- </div>
-);
+export interface SectionLoadingIndicatorProps {
+ /** Custom color for the loading indicator */
+ color?: string;
+}
+
+const SectionLoadingIndicator = ({ color }: SectionLoadingIndicatorProps) => {
+ return (
+ <div className={sectionLoadingWrapper}>
+ <div
+ data-cy="sectionLoadingIndicator"
+ className={css(sectionLoadingIndicator, {
+ backgroundColor: color || greyLight
+ })}
+ />
+ </div>
+ );
+};
 
 export default SectionLoadingIndicator;

packages/loadingIndicator/stories/InlineLoadingIndicator.stories.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { Story, Meta } from "@storybook/react";
+import {
+ ConfigurationMap,
+ ConfigurationMapSection,
+ ConfigurationMapLabel,
+ ConfigurationMapRow,
+ ConfigurationMapValue
+} from "../../configurationmap";
+
+import { InlineLoadingIndicator } from "..";
+
+export default {
+ title: "Feedback/Loading Indicators/Inline Loading Indicator",
+ component: InlineLoadingIndicator
+} as Meta;
+
+const Template: Story = args => (
+ <>
+ <ConfigurationMap>
+ <ConfigurationMapSection>
+ <ConfigurationMapRow>
+ <ConfigurationMapLabel>Name</ConfigurationMapLabel>
+ <ConfigurationMapValue>
+ <InlineLoadingIndicator {...args} />
+ </ConfigurationMapValue>
+ </ConfigurationMapRow>
+ <ConfigurationMapRow>
+ <ConfigurationMapLabel>Role</ConfigurationMapLabel>
+ <ConfigurationMapValue>UX Designer</ConfigurationMapValue>
+ </ConfigurationMapRow>
+ <ConfigurationMapRow>
+ <ConfigurationMapLabel>City</ConfigurationMapLabel>
+ <ConfigurationMapValue>San Francisco</ConfigurationMapValue>
+ </ConfigurationMapRow>
+ </ConfigurationMapSection>
+ </ConfigurationMap>
+ </>
+);
+
+export const Default = Template.bind({});

packages/loadingIndicator/stories/SectionLoadingIndicator.stories.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Story, Meta } from "@storybook/react";
+
+import { SectionLoadingIndicator } from "..";
+
+export default {
+ title: "Feedback/Loading Indicators/Section Loading Indicator",
+ component: SectionLoadingIndicator,
+ argTypes: {
+ color: {
+ control: { type: "color" }
+ }
+ }
+} as Meta;
+
+const Template: Story = args => (
+ <>
+ <SectionLoadingIndicator {...args} />
+ </>
+);
+
+export const Default = Template.bind({});

packages/loadingIndicator/style.ts

@@ -1,6 +1,6 @@
 import { css, keyframes } from "@emotion/css";
 import { padding } from "../shared/styles/styleUtils";
-import { iconSizeXl, greyLight } from "../design-tokens/build/js/designTokens";
+import { iconSizeXl } from "../design-tokens/build/js/designTokens";
 
 export const sectionLoadingWrapper = css`
  ${padding("all", "l")};
@@ -36,7 +36,6 @@ export const sectionLoadingIndicator = css`
  animation-iteration-count: infinite;
  animation-name: ${sectionLoadingKeyframes};
  animation-timing-function: ease-in-out;
- background-color: ${greyLight};
  border-radius: 100%;
  display: inline-block;
  height: ${iconSizeXl};

packages/loadingIndicator/tests/__snapshots__/loadingIndicator.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Loading indicators renders InlineLoadingIndicator 1`] = `
  class="css-1v9zxv1"
 >
  <div
- class="css-15gzp3f"
+ class="css-1u93coa"
  data-cy="sectionLoadingIndicator"
  />
 </div>