feat: add ButtonCircleLink and ButtonPillLink

src/components/ButtonCircleLink/ButtonCircleLink.constants.ts

@@ -0,0 +1,7 @@
+const CLASS_PREFIX = 'md-button-circle-link';
+
+const STYLE = {
+  wrapper: `${CLASS_PREFIX}-wrapper`,
+};
+
+export { CLASS_PREFIX, STYLE };

src/components/ButtonCircleLink/ButtonCircleLink.stories.args.ts

@@ -0,0 +1,105 @@
+import { commonStyles } from '../../storybook/helper.stories.argtypes';
+import LinkArgTypes from '../Link/Link.stories.args';
+import { BUTTON_CIRCLE_CONSTANTS as CONSTANTS } from '../ButtonCircle';
+
+const buttonCircleLinkArgTypes = {
+  color: {
+    description: 'Modifies the color of this component.',
+    options: [undefined, ...Object.values(CONSTANTS.COLORS)],
+    control: { type: 'select' },
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: 'undefined',
+      },
+    },
+  },
+  disabled: {
+    description: 'Whether to render the component is disabled.',
+    options: [true, false],
+    control: { type: 'boolean' },
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.DISABLED,
+      },
+    },
+  },
+  shallowDisabled: {
+    description:
+      'Whether to render the component looking as if disabled, but allowing onPress actions to still be passed.',
+    options: [true, false],
+    control: { type: 'boolean' },
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.SHALLOW_DISABLED,
+      },
+    },
+  },
+  ghost: {
+    description: 'Whether this component has a transparent background.',
+    options: [true, false],
+    control: { type: 'boolean' },
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.GHOST,
+      },
+    },
+  },
+  outline: {
+    description: 'Whether this component has an outline/border.',
+    options: [true, false],
+    control: { type: 'boolean' },
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.OUTLINE,
+      },
+    },
+  },
+  inverted: {
+    description:
+      'Whether this component has inverted background (black for dark mode and white for light mode)',
+    options: [true, false],
+    control: { type: 'boolean' },
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.INVERTED,
+      },
+    },
+  },
+  size: {
+    description: 'Modifies the size of this component.',
+    options: [undefined, ...Object.values(CONSTANTS.SIZES)],
+    control: { type: 'select' },
+    table: {
+      type: {
+        summary: 'number',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.SIZE,
+      },
+    },
+  },
+};
+
+export default {
+  ...commonStyles,
+  ...LinkArgTypes,
+  ...buttonCircleLinkArgTypes,
+};

src/components/ButtonCircleLink/ButtonCircleLink.stories.docs.mdx

@@ -0,0 +1,3 @@
+The `<ButtonCircleLink />` component.
+
+This is a Link component that resembles the `<ButtonCircle />` component and incorporates various styles from the `<ButtonCircle />`