@faststore/components 2.0.13-alpha.0 → 2.0.14-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.14-alpha.0](https://github.com/vtex/faststore/compare/v2.0.13-alpha.0...v2.0.14-alpha.0) (2022-12-14)
+
+
+### Features
+
+* Adds `Link` component ([#1543](https://github.com/vtex/faststore/issues/1543)) ([9c219eb](https://github.com/vtex/faststore/commit/9c219eba996fc6fec90edd1383a4abf8dbe0a7ef))
+
+
+
 ## [2.0.13-alpha.0](https://github.com/vtex/faststore/compare/v2.0.12-alpha.0...v2.0.13-alpha.0) (2022-12-14)
 
 

package/dist/atoms/Link/Link.d.ts

@@ -0,0 +1,25 @@
+import type { ElementType, ReactElement } from 'react';
+import { PolymorphicComponentPropsWithRef } from '../../typings';
+declare type LinkBaseProps = {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+   * Specifies the component variant.
+   */
+    variant?: 'default' | 'display' | 'inline';
+    /**
+    * Defines use of inverted color.
+    */
+    inverse?: boolean;
+    /**
+     * Defines size os element
+     */
+    size?: 'small' | 'regular';
+};
+export declare type LinkElementType = ElementType;
+export declare type LinkProps<C extends LinkElementType = 'a'> = PolymorphicComponentPropsWithRef<C, LinkBaseProps>;
+declare type LinkComponent = <C extends LinkElementType = 'a'>(props: LinkProps<C>) => ReactElement | null;
+declare const Link: LinkComponent;
+export default Link;

package/dist/atoms/Link/Link.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+const Link = forwardRef(function Link({ as, children, variant = 'default', size = "regular", inverse, testId = 'fs-link', ...otherProps }, ref) {
+    const Component = as ?? 'a';
+    return (React.createElement(Component, { ref: ref, "data-fs-link": true, "data-fs-link-variant": variant, "data-fs-link-inverse": inverse, "data-fs-link-size": size, "data-testid": testId, ...otherProps }, children));
+});
+export default Link;
+//# sourceMappingURL=Link.js.map

package/dist/atoms/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/atoms/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAkCzC,MAAM,IAAI,GAAkB,UAAU,CAAC,SAAS,IAAI,CAGlD,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAC,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,UAAU,EAAgB,EAC/G,GAAuB;IAGvB,MAAM,SAAS,GAAG,EAAE,IAAI,GAAG,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,gDAEc,OAAO,0BACP,OAAO,uBACV,IAAI,iBACV,MAAM,KACf,UAAU,IAEb,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/atoms/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Link';
+export type { LinkProps, LinkElementType } from './Link';

package/dist/atoms/Link/index.js

@@ -0,0 +1,2 @@
+export { default } from './Link';
+//# sourceMappingURL=index.js.map

package/dist/atoms/Link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/Link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './assets';
 export { default as Badge } from './atoms/Badge';
 export type { BadgeProps } from './atoms/Badge';
 export { default as Button } from './atoms/Button';
@@ -10,6 +11,8 @@ export { default as Input } from './atoms/Input';
 export type { InputProps } from './atoms/Input';
 export { default as Label } from './atoms/Label';
 export type { LabelProps } from './atoms/Label';
+export { default as Link } from './atoms/Link';
+export type { LinkProps, LinkElementType } from './atoms/Link';
 export { default as Overlay } from './atoms/Overlay';
 export type { OverlayProps } from './atoms/Overlay';
 export { default as Price } from './atoms/Price';

package/dist/index.js

@@ -1,3 +1,5 @@
+// Assets
+export * from './assets';
 // Atoms
 export { default as Badge } from './atoms/Badge';
 export { default as Button } from './atoms/Button';
@@ -5,6 +7,7 @@ export { default as Checkbox } from './atoms/Checkbox';
 export { default as Icon } from './atoms/Icon';
 export { default as Input } from './atoms/Input';
 export { default as Label } from './atoms/Label';
+export { default as Link } from './atoms/Link';
 export { default as Overlay } from './atoms/Overlay';
 export { default as Price } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAGlD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAGlD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/typings/PolymorphicGenerics.d.ts

@@ -0,0 +1,28 @@
+/**
+ * These were heavily inspired by "Forwarding refs for a polymorphic React
+ * component in TypeScript", written by Ben Ilegbodu.
+ *
+ * Article link: https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
+ */
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
+declare type AsProp<C extends ElementType> = {
+    as?: C;
+};
+/**
+ * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
+ * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
+ * set of props.
+ */
+declare type ExtendableProps<ExtendedProps = Record<string, never>, OverrideProps = Record<string, never>> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;
+/**
+ * Allows for inheriting the props from the specified element type so that
+ * props like children, className & style work, as well as element-specific
+ * attributes like aria roles. The component (`C`) must be passed in.
+ */
+declare type InheritableElementProps<C extends ElementType, Props = Record<string, never>> = ExtendableProps<ComponentPropsWithoutRef<C>, Props>;
+export declare type PolymorphicComponentProps<C extends ElementType, Props = Record<string, never>> = InheritableElementProps<C, Props & AsProp<C>>;
+export declare type PolymorphicComponentPropsWithRef<C extends ElementType, P = Record<string, never>> = PolymorphicComponentProps<C, P> & {
+    ref?: ComponentPropsWithRef<C>['ref'];
+};
+export declare type PolymorphicRef<C extends ElementType> = PolymorphicComponentPropsWithRef<C>['ref'];
+export {};

package/dist/typings/PolymorphicGenerics.js

@@ -0,0 +1,8 @@
+/**
+ * These were heavily inspired by "Forwarding refs for a polymorphic React
+ * component in TypeScript", written by Ben Ilegbodu.
+ *
+ * Article link: https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
+ */
+export {};
+//# sourceMappingURL=PolymorphicGenerics.js.map

package/dist/typings/PolymorphicGenerics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolymorphicGenerics.js","sourceRoot":"","sources":["../../src/typings/PolymorphicGenerics.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}

package/dist/typings/index.d.ts

@@ -0,0 +1 @@
+export type { PolymorphicComponentProps, PolymorphicComponentPropsWithRef, PolymorphicRef, } from './PolymorphicGenerics';

package/dist/typings/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/typings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typings/index.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.13-alpha.0",
+  "version": "2.0.14-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -28,5 +28,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "c513c94b5b36c43355224db4c179cbe4362117ea"
+  "gitHead": "a8f4ca0ddc690e24df31abee9e4a4bbdb2d1a03b"
 }

package/src/atoms/Link/Link.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react'
+import type { ElementType, ReactElement } from 'react'
+import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../../typings'
+
+type LinkBaseProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+ * Specifies the component variant.
+ */
+  variant?: 'default' | 'display' | 'inline'
+  /**
+  * Defines use of inverted color.
+  */
+  inverse?: boolean
+  /**
+   * Defines size os element
+   */
+  size?: 'small' | 'regular'
+}
+
+export type LinkElementType = ElementType
+
+export type LinkProps<C extends LinkElementType = 'a'> = PolymorphicComponentPropsWithRef<
+  C,
+  LinkBaseProps
+>
+
+type LinkComponent = <C extends LinkElementType = 'a'>(
+  props: LinkProps<C>
+) => ReactElement | null
+
+const Link: LinkComponent = forwardRef(function Link<
+  C extends LinkElementType = 'a'
+>(
+  { as, children, variant = 'default', size="regular", inverse, testId = 'fs-link', ...otherProps }: LinkProps<C>,
+  ref?: PolymorphicRef<C>
+) {
+
+  const Component = as ?? 'a'
+
+  return (
+    <Component 
+      ref={ref} 
+      data-fs-link 
+      data-fs-link-variant={variant}
+      data-fs-link-inverse={inverse}
+      data-fs-link-size={size}
+      data-testid={testId} 
+      {...otherProps}
+    >
+      {children}
+    </Component>
+  )
+})
+
+export default Link

package/src/atoms/Link/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Link'
+export type { LinkProps, LinkElementType } from './Link'

package/src/index.ts

@@ -1,3 +1,6 @@
+// Assets
+export * from './assets'
+
 // Atoms
 export { default as Badge } from './atoms/Badge'
 export type { BadgeProps } from './atoms/Badge'
@@ -11,6 +14,8 @@ export { default as Input } from './atoms/Input'
 export type { InputProps } from './atoms/Input'
 export { default as Label } from './atoms/Label'
 export type { LabelProps } from './atoms/Label'
+export { default as Link } from './atoms/Link'
+export type { LinkProps, LinkElementType } from './atoms/Link'
 export { default as Overlay } from './atoms/Overlay'
 export type { OverlayProps } from './atoms/Overlay'
 export { default as Price } from './atoms/Price'

package/src/typings/PolymorphicGenerics.ts

@@ -0,0 +1,50 @@
+/**
+ * These were heavily inspired by "Forwarding refs for a polymorphic React
+ * component in TypeScript", written by Ben Ilegbodu.
+ *
+ * Article link: https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
+ */
+
+import type {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  ElementType,
+} from 'react'
+
+type AsProp<C extends ElementType> = {
+  as?: C
+}
+
+/**
+ * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
+ * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
+ * set of props.
+ */
+type ExtendableProps<
+  ExtendedProps = Record<string, never>,
+  OverrideProps = Record<string, never>
+> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>
+
+/**
+ * Allows for inheriting the props from the specified element type so that
+ * props like children, className & style work, as well as element-specific
+ * attributes like aria roles. The component (`C`) must be passed in.
+ */
+type InheritableElementProps<
+  C extends ElementType,
+  Props = Record<string, never>
+> = ExtendableProps<ComponentPropsWithoutRef<C>, Props>
+
+export type PolymorphicComponentProps<
+  C extends ElementType,
+  Props = Record<string, never>
+> = InheritableElementProps<C, Props & AsProp<C>>
+
+export type PolymorphicComponentPropsWithRef<
+  C extends ElementType,
+  P = Record<string, never>
+> = PolymorphicComponentProps<C, P> & { ref?: ComponentPropsWithRef<C>['ref'] }
+
+// Extract the `ref` prop from a polymorphic component
+export type PolymorphicRef<C extends ElementType> =
+  PolymorphicComponentPropsWithRef<C>['ref']

package/src/typings/index.ts

@@ -0,0 +1,5 @@
+export type {
+  PolymorphicComponentProps,
+  PolymorphicComponentPropsWithRef,
+  PolymorphicRef,
+} from './PolymorphicGenerics'