feat(Slug): implement AI Slug

packages/carbon-components-react/scss/components/slug/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// 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/slug';

packages/carbon-components-react/scss/components/slug/_slug.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// 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/slug/slug';

packages/carbon-components/scss/components/slug/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// 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/slug';

packages/carbon-components/scss/components/slug/_slug.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// 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/slug/slug';

packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -271,6 +271,11 @@ Array [
   "skeletonElement",
   "slow01",
   "slow02",
+  "slugBackground",
+  "slugBackgroundHover",
+  "slugGradient",
+  "slugGradientHover",
+  "slugHollowHover",
   "spacing",
   "spacing01",
   "spacing02",

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -8780,6 +8780,9 @@ Map {
       "as": Object {
         "type": "elementType",
       },
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "children": Object {
         "type": "node",
       },

packages/react/scss/components/slug/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// 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/slug';

packages/react/scss/components/slug/_slug.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// 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/slug/slug';

packages/react/src/components/Slug/Slug.js

@@ -0,0 +1,132 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { usePrefix } from '../../internal/usePrefix';
+import {
+  Toggletip,
+  ToggletipButton,
+  ToggletipContent,
+  ToggletipActions,
+} from '../Toggletip';
+
+const Slug = React.forwardRef(function Slug(
+  {
+    aiText = 'AI',
+    align,
+    autoAlign = false,
+    dotType,
+    kind,
+    size = 'xs',
+    slugContent,
+  },
+  ref
+) {
+  const prefix = usePrefix();
+
+  const slugClasses = cx({
+    [`${prefix}--ai-slug`]: true,
+    [`${prefix}--ai-slug--inline-with-content`]:
+      kind === 'inline' && slugContent,
+  });
+
+  const slugButtonClasses = cx({
+    [`${prefix}--ai-slug__button`]: true,
+    [`${prefix}--ai-slug__button--${size}`]: size,
+    [`${prefix}--ai-slug__button--${kind}`]: kind,
+  });
+
+  const aiTextClasses = cx({
+    [`${prefix}--ai-slug__text`]: true,
+    [`${prefix}--ai-slug__text--dot-${dotType}`]: dotType,
+  });
+
+  const isInline = kind === 'inline';
+
+  return (
+    <div className={slugClasses} ref={ref}>
+      {isInline ? (
+        <div className={slugButtonClasses}>
+          <span className={aiTextClasses}>{aiText}</span>
+          {slugContent && (
+            <span className={`${prefix}--ai-slug__content`}>{slugContent}</span>
+          )}
+        </div>
+      ) : (
+        <Toggletip align={align} autoAlign={autoAlign}>
+          <ToggletipButton
+            className={slugButtonClasses}
+            label="Show information">
+            <span className={`${prefix}--ai-slug__text`}>{aiText}</span>
+          </ToggletipButton>
+          <ToggletipContent>
+            {slugContent}
+            <ToggletipActions></ToggletipActions>
+          </ToggletipContent>
+        </Toggletip>
+      )}
+    </div>
+  );
+});
+
+Slug.propTypes = {
+  /**
+   * Specify the correct translation of the AI text
+   */
+  aiText: PropTypes.string,
+
+  /**
+   * Specify how the popover should align with the button
+   */
+  align: PropTypes.oneOf([
+    'top',
+    'top-left',
+    'top-right',
+
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+
+    'left',
+    'left-bottom',
+    'left-top',
+
+    'right',
+    'right-bottom',
+    'right-top',
+  ]),
+
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
+
+  /**
+   * Specify the type of dot that should be rendered in front of the inline variant
+   */
+  dotType: PropTypes.oneOf(['default', 'hollow']),
+
+  /**
+   * Specify the type of Slug, from the following list of types:
+   */
+  kind: PropTypes.oneOf(['default', 'hollow', 'inline']),
+
+  /**
+   * Specify the size of the button, from the following list of sizes:
+   */
+  size: PropTypes.oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
+
+  /**
+   * Specify the content you want rendered inside the slug ToggleTip
+   */
+  slugContent: PropTypes.node,
+};
+
+export default Slug;

packages/react/src/components/Slug/Slug.mdx

@@ -0,0 +1 @@
+Hello

packages/react/src/components/Slug/Slug.stories.js

@@ -0,0 +1,143 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import Slug from '.';
+import mdx from './Slug.mdx';
+import './slug-story.scss';
+
+export default {
+  title: 'Experimental/unstable__Slug',
+  component: Slug,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => (
+  <>
+    <div className="slug-container">
+      <Slug
+        autoAlign
+        size="mini"
+        slugContent="Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua."
+      />
+      <Slug
+        autoAlign
+        size="2xs"
+        slugContent="Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua."
+      />
+      <Slug
+        autoAlign
+        size="xs"
+        slugContent="Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua."
+      />
+      <Slug
+        autoAlign
+        size="sm"
+        slugContent="Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua."
+      />
+      <Slug
+        autoAlign
+        size="md"
+        slugContent="Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua."
+      />
+      <Slug
+        autoAlign
+        size="lg"
+        slugContent="Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua."
+      />
+      <Slug
+        autoAlign
+        size="xl"
+        slugContent="Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua."
+      />
+    </div>
+    <div className="slug-container">
+      <Slug
+        kind="hollow"
+        autoAlign
+        size="mini"
+        slugContent="Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua."
+      />
+      <Slug
+        kind="hollow"
+        autoAlign
+        size="2xs"
+        slugContent="Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua."
+      />
+      <Slug
+        kind="hollow"
+        autoAlign
+        size="xs"
+        slugContent="Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua."
+      />
+    </div>
+    <div className="slug-container">
+      <Slug kind="inline" size="sm" />
+      <Slug kind="inline" size="md" />
+      <Slug kind="inline" size="lg" />
+    </div>
+    <div className="slug-container">
+      <Slug kind="inline" size="sm" slugContent="Text goes here" />
+      <Slug kind="inline" size="md" slugContent="Text goes here" />
+      <Slug kind="inline" size="lg" slugContent="Text goes here" />
+    </div>
+    <div className="slug-container">
+      <Slug kind="inline" dotType="hollow" size="sm" />
+      <Slug kind="inline" dotType="hollow" size="md" />
+      <Slug kind="inline" dotType="hollow" size="lg" />
+    </div>
+    <div className="slug-container">
+      <Slug
+        kind="inline"
+        dotType="hollow"
+        size="sm"
+        slugContent="Text goes here"
+      />
+      <Slug
+        kind="inline"
+        dotType="hollow"
+        size="md"
+        slugContent="Text goes here"
+      />
+      <Slug
+        kind="inline"
+        dotType="hollow"
+        size="lg"
+        slugContent="Text goes here"
+      />
+    </div>
+  </>
+);
+
+export const Playground = (args) => (
+  <Slug
+    autoAlign
+    slugContent="Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua."
+    {...args}
+  />
+);

packages/react/src/components/Slug/index.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 Slug from './Slug';
+
+export default Slug;
+export { Slug };

packages/react/src/components/Slug/slug-story.scss

@@ -0,0 +1,9 @@
+.slug-container {
+  display: flex;
+  margin-bottom: 6rem;
+  align-items: flex-start;
+
+  & > * {
+    margin-left: 2rem;
+  }
+}