@faststore/components 2.0.10-alpha.0 → 2.0.13-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.13-alpha.0](https://github.com/vtex/faststore/compare/v2.0.12-alpha.0...v2.0.13-alpha.0) (2022-12-14)
+
+
+### Features
+
+* Adds `Select` and `SelectField` components ([#1547](https://github.com/vtex/faststore/issues/1547)) ([7c4beb0](https://github.com/vtex/faststore/commit/7c4beb085c893ad540e1a4440cc7b902fa36a75c))
+
+
+
 ## [2.0.10-alpha.0](https://github.com/vtex/faststore/compare/v2.0.9-alpha.0...v2.0.10-alpha.0) (2022-12-12)
 
 

package/dist/assets/CaretDown.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const CaretDown: FC;
+export default CaretDown;

package/dist/assets/CaretDown.js

@@ -0,0 +1,7 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const CaretDown = () => (React.createElement("svg", { id: "CaretDown", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
+    React.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    React.createElement("polyline", { points: "208 96 128 176 48 96", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" })));
+export default CaretDown;
+//# sourceMappingURL=CaretDown.js.map

package/dist/assets/CaretDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaretDown.js","sourceRoot":"","sources":["../../src/assets/CaretDown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,SAAS,GAAO,GAAG,EAAE,CAAC,CAC1B,6BACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,kCAAU,MAAM,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,GAAY,CAC/I,CACP,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/assets/index.d.ts

@@ -1,3 +1,4 @@
+export { default as CaretDown } from './CaretDown';
 export { default as X } from './X';
 export { default as ShoppingCart } from './ShoppingCart';
 export { default as XCircle } from './XCircle';

package/dist/assets/index.js

@@ -1,3 +1,4 @@
+export { default as CaretDown } from './CaretDown';
 export { default as X } from './X';
 export { default as ShoppingCart } from './ShoppingCart';
 export { default as XCircle } from './XCircle';

package/dist/assets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/atoms/Select/Select.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { SelectHTMLAttributes } from 'react';
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    /**
+     * Assigns an identifier to link the UISelect component and its label.
+     */
+    id: string;
+    /**
+     * Defines the options available in the select. The SelectOptions object
+     * keys are the property names, while the values correspond to the text that
+     * will be displayed in the UI.
+     */
+    options: Record<string, string>;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/dist/atoms/Select/Select.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { Icon } from '../..';
+import { CaretDown } from '../../assets';
+const Select = forwardRef(function Select({ options, id, testId = 'fs-select', ...otherProps }, ref) {
+    return (React.createElement("div", { "data-fs-select": true },
+        React.createElement("select", { id: id, ref: ref, "data-testid": testId, ...otherProps }, Object.keys(options).map((key) => (React.createElement("option", { key: key, value: key }, options[key])))),
+        React.createElement(Icon, { "data-fs-select-icon": true, component: React.createElement(CaretDown, null) })));
+});
+export default Select;
+//# sourceMappingURL=Select.js.map

package/dist/atoms/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/atoms/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAmBxC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,GAAG,WAAW,EAAE,GAAG,UAAU,EAAe,EACjE,GAAG;IAEH,OAAO,CACL;QACE,gCAAQ,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,iBAAe,MAAM,KAAM,UAAU,IAC1D,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjC,gCAAQ,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IACzB,OAAO,CAAC,GAAG,CAAC,CACN,CACV,CAAC,CACK;QACT,oBAAC,IAAI,iCAAqB,SAAS,EAAE,oBAAC,SAAS,OAAG,GAAG,CACjD,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

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

@@ -0,0 +1,2 @@
+export { default } from './Select';
+export type { SelectProps } from './Select';

package/dist/atoms/Select/index.js

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

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

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

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { default as Price } from './atoms/Price';
 export type { PriceProps } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
 export type { RadioProps } from './atoms/Radio';
+export { default as Select } from './atoms/Select';
+export type { SelectProps } from './atoms/Select';
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export type { CheckboxFieldProps } from './molecules/CheckboxField';
@@ -27,5 +29,7 @@ export { default as InputField } from './molecules/InputField';
 export type { InputFieldProps } from './molecules/InputField';
 export { default as RadioField } from './molecules/RadioField';
 export type { RadioFieldProps } from './molecules/RadioField';
+export { default as SelectField } from './molecules/SelectField';
+export type { SelectFieldProps } from './molecules/SelectField';
 export { default as Tag } from './molecules/Tag';
 export type { TagProps } from './molecules/Tag';

package/dist/index.js

@@ -8,6 +8,7 @@ export { default as Label } from './atoms/Label';
 export { default as Overlay } from './atoms/Overlay';
 export { default as Price } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
+export { default as Select } from './atoms/Select';
 // Molecules
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
@@ -15,5 +16,6 @@ export { default as IconButton } from './molecules/IconButton';
 export { default as DiscountBadge } from './molecules/DiscountBadge';
 export { default as InputField } from './molecules/InputField';
 export { default as RadioField } from './molecules/RadioField';
+export { default as SelectField } from './molecules/SelectField';
 export { default as Tag } from './molecules/Tag';
 //# sourceMappingURL=index.js.map

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;AAGhD,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,GAAG,EAAE,MAAM,iBAAiB,CAAA"}
+{"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"}

package/dist/molecules/SelectField/SelectField.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SelectProps } from '../../atoms/Select';
+export interface SelectFieldProps extends SelectProps {
+    /**
+     * Defines the text displayed in the label right next to the Select.
+     */
+    label: string;
+}
+declare const SelectField: React.ForwardRefExoticComponent<SelectFieldProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default SelectField;

package/dist/molecules/SelectField/SelectField.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import Select from '../../atoms/Select';
+import Label from '../../atoms/Label';
+const SelectField = forwardRef(function SelectField({ id, label, options, testId = 'fs-select-field', ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-select-field": true, "data-testid": testId },
+        React.createElement(Label, { "data-fs-select-field-label": true, htmlFor: id }, label),
+        React.createElement(Select, { id: id, options: options, ...otherProps })));
+});
+export default SelectField;
+//# sourceMappingURL=SelectField.js.map

package/dist/molecules/SelectField/SelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/molecules/SelectField/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,OAAO,KAAK,MAAM,mBAAmB,CAAA;AASrC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,iBAAiB,EAAE,GAAG,UAAU,EAAE,EACjE,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,+CAAoC,MAAM;QACrD,oBAAC,KAAK,wCAA4B,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS;QAC9D,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,KAAM,UAAU,GAAI,CAChD,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/SelectField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SelectField';
+export type { SelectFieldProps } from './SelectField';

package/dist/molecules/SelectField/index.js

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

package/dist/molecules/SelectField/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.10-alpha.0",
+  "version": "2.0.13-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": "640305492dc03e55d3df05de18bcca8587d562fc"
+  "gitHead": "c513c94b5b36c43355224db4c179cbe4362117ea"
 }

package/src/assets/CaretDown.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const CaretDown: FC = () => (
+  <svg
+    id="CaretDown"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={24}
+    height={24}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></polyline>
+  </svg>
+)
+
+export default CaretDown

package/src/assets/index.ts

@@ -1,3 +1,4 @@
+export { default as CaretDown } from './CaretDown'
 export { default as X } from './X'
 export { default as ShoppingCart } from './ShoppingCart'
 export { default as XCircle } from './XCircle'

package/src/atoms/Select/Select.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react'
+import type { SelectHTMLAttributes } from 'react'
+import { Icon } from '../..'
+import { CaretDown } from '../../assets'
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  /**
+   * Assigns an identifier to link the UISelect component and its label.
+   */
+  id: string
+  /**
+   * Defines the options available in the select. The SelectOptions object
+   * keys are the property names, while the values correspond to the text that
+   * will be displayed in the UI.
+   */
+  options: Record<string, string>
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { options, id, testId = 'fs-select', ...otherProps }: SelectProps,
+  ref
+) {
+  return (
+    <div data-fs-select>
+      <select id={id} ref={ref} data-testid={testId} {...otherProps}>
+        {Object.keys(options).map((key) => (
+          <option key={key} value={key}>
+            {options[key]}
+          </option>
+        ))}
+      </select>
+      <Icon data-fs-select-icon component={<CaretDown />}/>
+    </div>
+  )
+})
+
+export default Select

package/src/atoms/Select/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Select'
+export type { SelectProps } from './Select'

package/src/index.ts

@@ -17,6 +17,8 @@ export { default as Price } from './atoms/Price'
 export type { PriceProps } from './atoms/Price'
 export { default as Radio } from './atoms/Radio'
 export type { RadioProps } from './atoms/Radio'
+export { default as Select } from './atoms/Select'
+export type { SelectProps } from './atoms/Select'
 
 // Molecules
 export { default as BuyButton } from './molecules/BuyButton'
@@ -30,5 +32,7 @@ export { default as InputField } from './molecules/InputField'
 export type { InputFieldProps } from './molecules/InputField'
 export { default as RadioField } from './molecules/RadioField'
 export type { RadioFieldProps } from './molecules/RadioField'
+export { default as SelectField } from './molecules/SelectField'
+export type { SelectFieldProps } from './molecules/SelectField'
 export { default as Tag } from './molecules/Tag'
 export type { TagProps } from './molecules/Tag'

package/src/molecules/SelectField/SelectField.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react'
+import type { PropsWithChildren } from 'react'
+import Select from '../../atoms/Select'
+import type {SelectProps} from '../../atoms/Select'
+import Label from '../../atoms/Label'
+
+export interface SelectFieldProps extends SelectProps {
+  /**
+   * Defines the text displayed in the label right next to the Select.
+   */
+  label: string
+}
+
+const SelectField = forwardRef<HTMLDivElement, PropsWithChildren<SelectFieldProps>>(
+  function SelectField(
+    { id, label, options, testId = 'fs-select-field', ...otherProps },
+    ref
+  ) {
+    return (
+      <div ref={ref} data-fs-select-field data-testid={testId}>
+        <Label data-fs-select-field-label htmlFor={id}>{label}</Label>
+        <Select id={id} options={options} {...otherProps} />
+      </div>
+    )
+  }
+)
+
+export default SelectField

package/src/molecules/SelectField/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SelectField'
+export type { SelectFieldProps } from './SelectField'