feat(Tag): add Tag to @carbon/styles (#9131)

* feat(Tag): add Tag to @carbon/styles

* feat(Tag): add Tag to @carbon/styles

* feat(Tag): add tag sass module

* feat(Tag): add tag sass module

* feat(Tag): fix broken color token imports

* feat(Tag): add type includes

* fix(Tag): remove debug, meta calls; pr fixes

Co-authored-by: TJ Egan <[email protected]>

packages/carbon-react/.storybook/styles.scss

@@ -15,26 +15,27 @@ $feature-flags: (
 
 @use '../index.scss' as styles;
 @use '../scss/components/button';
+@use '../scss/components/tag';
 
 // For now, including all weights for testing
 @include arabic.all;
 @include sans.all;
 @include mono.all;
 
 :root {
-  @include styles.theme(styles.$white, button.$white);
+  @include styles.theme(styles.$white, button.$white, tag.$white);
 }
 
 [data-carbon-theme='g10'] {
-  @include styles.theme(styles.$g10, button.$g10);
+  @include styles.theme(styles.$g10, button.$g10, tag.$g10);
 }
 
 [data-carbon-theme='g90'] {
-  @include styles.theme(styles.$g90, button.$g90);
+  @include styles.theme(styles.$g90, button.$g90, tag.$g90);
 }
 
 [data-carbon-theme='g100'] {
-  @include styles.theme(styles.$g100, button.$g100);
+  @include styles.theme(styles.$g100, button.$g100, tag.$g100);
 }
 
 html[lang='en'] body {

packages/carbon-react/scss/components/_tag.scss

@@ -0,0 +1,8 @@
+//
+// 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 '@carbon/styles/scss/components/tag';

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

@@ -0,0 +1,47 @@
+/**
+ * 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 from 'react';
+import { Tag } from 'carbon-components-react';
+
+export default {
+  title: 'Components/Tag',
+  parameters: {
+    component: Tag,
+  },
+};
+
+export const Default = () => {
+  return (
+    <>
+      <Tag className="some-class" type="red" size="sm" title="Clear Filter">
+        {'Tag content'}
+      </Tag>
+      <Tag className="some-class" type="magenta" size="sm" title="Clear Filter">
+        {'Tag content'}
+      </Tag>
+      <Tag className="some-class" type="purple" size="sm" title="Clear Filter">
+        {'Tag content'}
+      </Tag>
+      <Tag className="some-class" type="blue" size="sm" title="Clear Filter">
+        {'Tag content'}
+      </Tag>
+      <Tag className="some-class" type="cyan" size="sm" title="Clear Filter">
+        {'Tag content'}
+      </Tag>
+      <Tag className="some-class" type="teal" size="sm" title="Clear Filter">
+        {'Tag content'}
+      </Tag>
+      <Tag className="some-class" type="green" size="sm" title="Clear Filter">
+        {'Tag content'}
+      </Tag>
+      <Tag className="some-class" type="gray" size="sm" title="Clear Filter">
+        {'Tag content'}
+      </Tag>
+    </>
+  );
+};

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

packages/styles/scss/components/__tests__/tag-test.js

@@ -0,0 +1,25 @@
+/**
+ * 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/tag', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:meta';
+      @use '../tag/tag';
+      $_: get('mixin', meta.mixin-exists('tag', 'tag'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

packages/styles/scss/components/_index.scss

@@ -28,6 +28,7 @@
 @use 'data-table/expandable';
 @use 'data-table/skeleton';
 @use 'data-table/sort';
+@use 'tag';
 @use "slider";
 @use 'text-area';
 @use 'text-input';

packages/styles/scss/components/tag/_index.scss

@@ -0,0 +1,12 @@
+//
+// 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 'tag';
+@forward 'tokens';
+@use 'tag';
+
+@include tag.tag;

packages/styles/scss/components/tag/_mixins.scss

@@ -0,0 +1,21 @@
+//
+// 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 '../../config' as *;
+
+/// @access private
+/// @group tag
+@mixin tag-theme($bg-color, $text-color, $filter-hover-color: $bg-color) {
+  background-color: $bg-color;
+  color: $text-color;
+
+  &.#{$prefix}--tag--interactive,
+  .#{$prefix}--tag__close-icon {
+    &:hover {
+      background-color: $filter-hover-color;
+    }
+  }
+}