feat: added Tag component

ccontrols · May 3, 2020 · e9c6691 · e9c6691
1 parent 75dee54
commit e9c6691
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 12 deletions.
diff --git a/ui/blocks/src/StorySource/StorySource.tsx b/ui/blocks/src/StorySource/StorySource.tsx
@@ -4,12 +4,12 @@ import { jsx } from 'theme-ui';
 import { FC, useState, useContext } from 'react';
 import { getControlValue } from '@component-controls/core';
 import { Styled } from 'theme-ui';
-import { transparentize } from 'polished';
 import {
   ThemeContext,
   Source,
   SourceProps,
   ActionItem,
+  Tag,
 } from '@component-controls/components';
 import { repositoryActions } from '../utils/repositoryActions';
 import {
@@ -123,24 +123,16 @@ export const StorySource: FC<StorySourceProps> = ({
 
                             return splitToken.map((s: string) =>
                               s.trim().length ? (
-                                <span
+                                <Tag
                                   {...getTokenProps({ token, key })}
-                                  sx={{
-                                    display: 'inline-block',
-                                    //@ts-ignore
-                                    backgroundColor: transparentize(0.8, color),
-                                    paddingLeft: 1,
-                                    paddingRight: 1,
-                                    //@ts-ignore
-                                    border: `1px solid ${color}`,
-                                  }}
+                                  color={color}
                                 >
                                   {controls &&
                                   viewStyle === 'values' &&
                                   param.type === 'usage'
                                     ? getControlValue(controls, s) || s
                                     : s}
-                                </span>
+                                </Tag>
                               ) : (
                                 s
                               ),

diff --git a/ui/components/src/Tag/Tag.stories.tsx b/ui/components/src/Tag/Tag.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Tag, TagProps } from './Tag';
+
+export default {
+  title: 'Components/Tag',
+  component: Tag,
+};
+
+export const overview = ({ color }: TagProps) => {
+  return <Tag color={color}>some text</Tag>;
+};
+
+overview.story = {
+  controls: {
+    color: { type: 'color', value: 'red' },
+  },
+};
diff --git a/ui/components/src/Tag/Tag.tsx b/ui/components/src/Tag/Tag.tsx
@@ -0,0 +1,26 @@
+/** @jsx jsx */
+/* eslint react/jsx-key: 0 */
+import { jsx } from 'theme-ui';
+import { FC } from 'react';
+import { transparentize } from 'polished';
+
+export interface TagProps {
+  color: string;
+}
+
+export const Tag: FC<TagProps> = ({ children, color, ...rest }) => (
+  <span
+    {...rest}
+    sx={{
+      display: 'inline-block',
+      //@ts-ignore
+      backgroundColor: transparentize(0.8, color),
+      paddingLeft: 1,
+      paddingRight: 1,
+      //@ts-ignore
+      border: `1px solid ${color}`,
+    }}
+  >
+    {children}
+  </span>
+);
diff --git a/ui/components/src/Tag/index.ts b/ui/components/src/Tag/index.ts
@@ -0,0 +1 @@
+export * from './Tag';
diff --git a/ui/components/src/index.ts b/ui/components/src/index.ts
@@ -9,6 +9,7 @@ export * from './Source';
 export * from './Subtitle';
 export * from './Table';
 export * from './Tabs';
+export * from './Tag';
 export * from './ThemeContext';
 export * from './Title';
 export * from './Toggle';