Add loading state for tags and split TagItem into Item and Link

storybookjs · Oct 20, 2020 · 2aa9499 · 2aa9499
1 parent 17d457c
commit 2aa9499
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 83 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,8 +1,4 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js'],
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-storysource',
-    '@storybook/addon-a11y',
-  ],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js', '../src/**/*.stories.tsx'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-storysource', '@storybook/addon-a11y'],
 };
diff --git a/src/components/tag/TagItem.stories.js → src/components/tag/TagItem.stories.tsx b/src/components/tag/TagItem.stories.js → src/components/tag/TagItem.stories.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { TagItem } from './TagItem';
-import { StoryLinkWrapper } from '../StoryLinkWrapper';
 
 export default {
   component: TagItem,
@@ -9,4 +8,6 @@ export default {
 
 export const Default = () => <TagItem>⚛️ React</TagItem>;
 
-export const WithLinkWrapper = () => <TagItem LinkWrapper={StoryLinkWrapper}>⚛️ React</TagItem>;
+export const WithLinkWrapper = () => <TagItem>⚛️ React</TagItem>;
+
+export const Loading = () => <TagItem isLoading />;
diff --git a/src/components/tag/TagItem.tsx b/src/components/tag/TagItem.tsx
@@ -1,22 +1,17 @@
-import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
 import { color, typography, background, spacing } from '../shared/styles';
 // @ts-ignore
-import { Link } from '../Link';
+import { inlineGlow } from '../shared/animation';
 
-type TagItemProps = {
-  containsIcon?: boolean;
-  inverse?: boolean;
-  isButton?: boolean;
-  LinkWrapper?: React.ComponentType | (() => React.ReactNode);
-  nochrome?: boolean;
-  secondary?: boolean;
-  tertiary?: boolean;
-  withArrow?: boolean;
+export type TagItemProps = {
+  isLoading?: boolean;
 };
 
-export const TagItem = styled(Link)<TagItemProps>`
+export const TagItem = styled.div.attrs<TagItemProps>(({ isLoading, children }) => ({
+  children: isLoading ? 'Loading tag' : children,
+}))<TagItemProps>`
+  display: inline-block;
   background: ${background.app};
   border-radius: ${spacing.borderRadius.small}px;
   padding: 5px 10px;
@@ -29,24 +24,17 @@ export const TagItem = styled(Link)<TagItemProps>`
   border-color: transparent;
   white-space: nowrap;
 
-  &:after {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  &:hover {
-    border-color: ${rgba(color.secondary, 0.5)};
-
-    &:after {
-      opacity: 1;
-    }
-  }
+  ${(props) =>
+    props.isLoading &&
+    css`
+      cursor: progress !important;
+      ${inlineGlow};
+      &:hover {
+        color: transparent;
+      }
+    `}
 `;
+
+TagItem.defaultProps = {
+  isLoading: false,
+};
diff --git a/src/components/tag/TagLink.stories.tsx b/src/components/tag/TagLink.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { TagLink } from './TagLink';
+// @ts-ignore
+import { StoryLinkWrapper } from '../StoryLinkWrapper';
+
+export default {
+  component: TagLink,
+  title: 'Design System/Tag/TagLink',
+};
+
+export const Default = () => <TagLink href="https://chromatic.com">⚛️ React</TagLink>;
+
+export const WithLinkWrapper = () => (
+  <TagLink to="https://chromatic.com" LinkWrapper={StoryLinkWrapper as React.FC<{ to: string }>}>
+    ⚛️ React
+  </TagLink>
+);
+
+export const Loading = () => <TagLink isLoading />;
diff --git a/src/components/tag/TagLink.tsx b/src/components/tag/TagLink.tsx
@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components';
+import { rgba } from 'polished';
+import { color, typography, background, spacing } from '../shared/styles';
+// @ts-ignore
+import { inlineGlow } from '../shared/animation';
+// @ts-ignore
+import { Link } from '../Link';
+
+export type TagLinkProps = {
+  isLoading?: boolean;
+  containsIcon?: boolean;
+  inverse?: boolean;
+  isButton?: boolean;
+  LinkWrapper?: React.ComponentType | (() => React.ReactNode);
+  nochrome?: boolean;
+  secondary?: boolean;
+  tertiary?: boolean;
+  withArrow?: boolean;
+};
+
+export const TagLink = styled(Link).attrs<TagLinkProps>(({ isLoading, children }) => ({
+  children: isLoading ? 'Loading tag' : children,
+}))<TagLinkProps>`
+  display: inline-block;
+  background: ${background.app};
+  border-radius: ${spacing.borderRadius.small}px;
+  padding: 5px 10px;
+  font-size: ${typography.size.s2}px;
+  line-height: ${typography.size.m2}px;
+  position: relative;
+  color: ${color.darkest};
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  white-space: nowrap;
+
+  &:after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  ${(props) =>
+    !props.isLoading &&
+    css`
+      &:hover {
+        border-color: ${rgba(color.secondary, 0.5)};
+
+        &:after {
+          opacity: 1;
+        }
+      }
+    `}
+
+  ${(props) =>
+    props.isLoading &&
+    css`
+      cursor: progress !important;
+      ${inlineGlow};
+      &:hover {
+        color: transparent;
+      }
+    `}
+`;
+
+TagLink.defaultProps = {
+  isLoading: false,
+};
diff --git a/src/components/tag/TagList.stories.js → src/components/tag/TagList.stories.tsx b/src/components/tag/TagList.stories.js → src/components/tag/TagList.stories.tsx
@@ -1,44 +1,14 @@
 import React from 'react';
 import { TagList } from './TagList';
 import { TagItem } from './TagItem';
+import { TagLink } from './TagLink';
 
 export default {
   component: TagList,
   excludeStories: /.*Data$/,
   title: 'Design System/Tag/TagList',
 };
 
-export const Default = () => (
-  <TagList
-    tags={mockTagsData.slice(0, 4).map((tag) => (
-      <TagItem key={tag.link} href={tag.link}>
-        {tag.name}
-      </TagItem>
-    ))}
-  />
-);
-
-export const WithMoreTags = () => (
-  <TagList
-    tags={mockTagsData.map((tag) => (
-      <TagItem key={tag.link} href={tag.link}>
-        {tag.name}
-      </TagItem>
-    ))}
-  />
-);
-
-export const WithCustomLimit = () => (
-  <TagList
-    tags={mockTagsData.map((tag) => (
-      <TagItem key={tag.link} href={tag.link}>
-        {tag.name}
-      </TagItem>
-    ))}
-    limit={6}
-  />
-);
-
 export const mockTagsData = [
   {
     link: '/ui',
@@ -125,3 +95,35 @@ export const mockTagsData = [
     name: '📽 Animation',
   },
 ];
+
+const Template = (args: { tags: any[]; limit: number; isLoading }) => (
+  <TagList
+    isLoading={args.isLoading}
+    limit={args.limit}
+    tags={args.tags.map((tag: any) => (
+      <TagItem key={tag.link}>{tag.name}</TagItem>
+    ))}
+  />
+);
+
+export const Default = Template.bind({});
+Default.args = { tags: mockTagsData.slice(0, 4) };
+
+export const WithMoreTags = Template.bind({});
+WithMoreTags.args = { tags: mockTagsData };
+
+export const WithCustomLimit = Template.bind({});
+WithCustomLimit.args = { tags: mockTagsData, limit: 6 };
+
+export const Loading = Template.bind({});
+Loading.args = { tags: [], isLoading: true };
+
+export const AsLinks = () => (
+  <TagList
+    tags={mockTagsData.map((tag: any) => (
+      <TagLink key={tag.link} href={tag.link}>
+        {tag.name}
+      </TagLink>
+    ))}
+  />
+);
diff --git a/src/components/tag/TagList.tsx b/src/components/tag/TagList.tsx
@@ -27,31 +27,44 @@ const MoreTagsButton = styled(Link)`
   }
 `;
 
-type TagListTypes = {
-  tags: typeof TagItem[];
-  limit: number;
+export type TagListProps = {
+  tags: React.ReactNode[];
+  isLoading?: boolean;
+  limit?: number;
 };
 
-export const TagList = forwardRef<HTMLDivElement, TagListTypes>(
-  ({ tags, limit, ...props }: TagListTypes, ref) => {
+export const TagList = forwardRef<HTMLDivElement, TagListProps>(
+  ({ tags = [], limit = 4, isLoading = false, ...props }: TagListProps, ref) => {
     const primaryTags = tags.slice(0, limit);
     const moreTags = tags.slice(limit);
+
     const [moreTagsVisible, setMoreTagsVisible] = useState(false);
 
-    return (
-      <TagListWrapper {...props} ref={ref}>
+    const tagContent = (
+      <>
         {primaryTags}
         {moreTagsVisible && moreTags}
         {moreTags.length > 0 && !moreTagsVisible && (
           <MoreTagsButton isButton appearance="primary" onClick={() => setMoreTagsVisible(true)}>
             {`+ ${moreTags.length} more`}
           </MoreTagsButton>
         )}
+      </>
+    );
+
+    return (
+      <TagListWrapper {...props} ref={ref}>
+        {isLoading ? (
+          <>
+            <TagItem isLoading />
+            <TagItem isLoading />
+            <TagItem isLoading />
+            <TagItem isLoading />
+          </>
+        ) : (
+          tagContent
+        )}
       </TagListWrapper>
     );
   }
 );
-
-TagList.defaultProps = {
-  limit: 4,
-};