@faststore/ui 2.0.9-alpha.0 → 2.0.13-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 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)
+
+
+### Features
+
+* Adds `ButtonBuy` component ([#1551](https://github.com/vtex/faststore/issues/1551)) ([cf48bc8](https://github.com/vtex/faststore/commit/cf48bc803f0537e1a32eb87ff18e8328646939a5))
+
+
+
 ## [2.0.9-alpha.0](https://github.com/vtex/faststore/compare/v2.0.8-alpha.0...v2.0.9-alpha.0) (2022-12-12)
 
 

package/dist/index.d.ts

@@ -5,8 +5,6 @@ export { default as Popover } from './components/atoms/Popover';
 export type { PopoverProps } from './components/atoms/Popover';
 export { default as TextArea } from './components/atoms/TextArea';
 export type { TextAreaProps } from './components/atoms/TextArea';
-export { default as Select } from './components/atoms/Select';
-export type { SelectProps } from './components/atoms/Select';
 export { default as Slider } from './components/atoms/Slider';
 export type { SliderProps } from './components/atoms/Slider';
 export { default as List } from './components/atoms/List';

package/dist/index.js

@@ -3,7 +3,6 @@ export * from '@faststore/components';
 export { default as Link } from './components/atoms/Link';
 export { default as Popover } from './components/atoms/Popover';
 export { default as TextArea } from './components/atoms/TextArea';
-export { default as Select } from './components/atoms/Select';
 export { default as Slider } from './components/atoms/Slider';
 export { default as List } from './components/atoms/List';
 export { default as Skeleton } from './components/atoms/Skeleton';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.9-alpha.0",
+  "version": "2.0.13-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -78,5 +78,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "df3ddd2d140bf19046a4753474bebee4298cd6ac"
+  "gitHead": "c513c94b5b36c43355224db4c179cbe4362117ea"
 }

package/src/base/layout.scss

@@ -11,7 +11,6 @@ body {
   background: var(--fs-body-bkg);
 }
 
-main,
 .layout__main {
   display: flex;
   flex-wrap: wrap;

package/src/components/atoms/Icon/styles.scss

@@ -0,0 +1,9 @@
+[data-fs-icon] {
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/components/atoms/Select/styles.scss

@@ -0,0 +1,78 @@
+[data-fs-select] {
+  // --------------------------------------------------------
+  // Design Tokens for Select
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-select-height                      : var(--fs-spacing-6);
+  --fs-select-min-height                  : var(--fs-control-tap-size);
+  --fs-select-padding                     : var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1) var(--fs-spacing-2);
+
+  --fs-select-text-color                  : var(--fs-color-link);
+
+  --fs-select-border-radius               : var(--fs-border-radius);
+
+  --fs-select-bkg                         : transparent;
+  --fs-select-bkg-color-focus             : var(--fs-color-primary-bkg-light);
+  --fs-select-bkg-color-hover             : var(--fs-select-bkg-color-focus);
+
+  --fs-select-transition-timing           : var(--fs-transition-timing);
+  --fs-select-transition-property         : var(--fs-transition-property);
+  --fs-select-transition-function         : var(--fs-transition-function);
+
+  // Icon
+  --fs-select-icon-position-right         : var(--fs-spacing-1);
+  --fs-select-icon-width                  : var(--fs-spacing-3);
+  --fs-select-icon-height                 : var(--fs-select-icon-width);
+  --fs-select-icon-color                  : var(--fs-color-link);
+
+  // Disabled
+  --fs-select-disabled-text-color         : var(--fs-color-disabled-text);
+  --fs-select-disabled-text-opacity       : 1;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+
+  select {
+    padding: var(--fs-select-padding);
+    color: var(--fs-select-text-color);
+    background: var(--fs-select-bkg);
+    border: 0;
+    border-radius: var(--fs-select-border-radius);
+    box-shadow: 0;
+    transition: var(--fs-select-transition-property) var(--fs-select-transition-timing) var(--fs-select-transition-function);
+    appearance: none;
+
+    @include focus-ring-visible;
+
+    &:focus { background-color: var(--fs-select-bkg-color-focus); }
+
+    &:hover:not(:disabled) { background-color: var(--fs-select-bkg-color-hover); }
+
+    &:disabled {
+      color: var(--fs-select-disabled-text-color);
+      cursor: not-allowed;
+      opacity: var(--fs-select-disabled-text-opacity);
+      + [data-fs-select-icon] { display: none; }
+    }
+
+    @include media("<notebook") { min-height: var(--fs-select-min-height); }
+
+    @include media(">=notebook") { height: var(--fs-select-height); }
+  }
+
+  [data-fs-select-icon] {
+    position: absolute;
+    right: var(--fs-select-icon-position-right);
+    color: var(--fs-select-icon-color);
+    pointer-events: none;
+    width: var(--fs-select-icon-width);
+    height: var(--fs-select-icon-height);
+  }
+}

package/src/components/molecules/BuyButton/styles.scss

@@ -0,0 +1,49 @@
+[data-fs-buy-button] {
+  // --------------------------------------------------------
+  // Design Tokens for Buy Button
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-buy-button-text-color                        : var(--fs-color-action-text);
+  --fs-buy-button-text-color-hover                  : var(--fs-color-action-text);
+  --fs-buy-button-text-color-active                 : var(--fs-color-action-text);
+
+  --fs-buy-button-bkg-color                         : var(--fs-color-action-bkg);
+  --fs-buy-button-bkg-color-hover                   : var(--fs-color-action-bkg-hover);
+  --fs-buy-button-bkg-color-active                  : var(--fs-color-action-bkg-active);
+
+  --fs-buy-button-border-color                      : var(--fs-buy-button-bkg-color);
+  --fs-buy-button-border-color-hover                : var(--fs-buy-button-bkg-color-hover);
+  --fs-buy-button-border-color-active               : var(--fs-buy-button-bkg-color-active);
+
+  --fs-buy-button-shadow-hover                      : var(--fs-button-shadow-hover);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  @include focus-ring-visible;
+
+  color: var(--fs-buy-button-text-color);
+  background-color: var(--fs-buy-button-bkg-color);
+  border: var(--fs-button-border-width) solid var(--fs-buy-button-border-color);
+
+  &:hover {
+    color: var(--fs-buy-button-text-color-hover);
+    background-color: var(--fs-buy-button-bkg-color-hover);
+    border-color: var(--fs-buy-button-border-color-hover);
+    box-shadow: var(--fs-buy-button-shadow-hover);
+  }
+
+  &:focus, &:focus-visible {
+    color: var(--fs-buy-button-text-color-hover);
+    background-color: var(--fs-buy-button-bkg-color-hover);
+  }
+
+  &:active {
+    color: var(--fs-buy-button-text-color-hover);
+    background-color: var(--fs-buy-button-bkg-color-active);
+    border-color: var(--fs-buy-button-border-color-active);
+    outline: none;
+  }
+}

package/src/components/molecules/SelectField/styles.scss

@@ -0,0 +1,21 @@
+[data-fs-select-field] {
+  // --------------------------------------------------------
+  // Design Tokens for Select Field
+  // --------------------------------------------------------
+
+  // Label
+  --fs-select-field-label-margin-right          : var(--fs-spacing-1);
+  --fs-select-field-label-color                 : var(--fs-color-text-light);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  align-items: center;
+
+  [data-fs-select-field-label] {
+    margin-right: var(--fs-select-field-label-margin-right);
+    color: var(--fs-select-field-label-color);
+  }
+};

package/src/index.ts

@@ -10,9 +10,6 @@ export type { PopoverProps } from './components/atoms/Popover'
 export { default as TextArea } from './components/atoms/TextArea'
 export type { TextAreaProps } from './components/atoms/TextArea'
 
-export { default as Select } from './components/atoms/Select'
-export type { SelectProps } from './components/atoms/Select'
-
 export { default as Slider } from './components/atoms/Slider'
 export type { SliderProps } from './components/atoms/Slider'
 

package/src/styles/components.scss

@@ -2,14 +2,18 @@
 @import "../components/atoms/Badge/styles";
 @import "../components/atoms/Button/styles";
 @import "../components/atoms/Checkbox/styles";
+@import "../components/atoms/Icon/styles";
 @import "../components/atoms/Input/styles";
 @import "../components/atoms/Overlay/styles";
 @import "../components/atoms/Price/styles";
 @import "../components/atoms/Radio/styles";
+@import "../components/atoms/Select/styles";
 
 // Molecules
+@import "../components/molecules/BuyButton/styles";
 @import "../components/molecules/CheckboxField/styles";
 @import "../components/molecules/DiscountBadge/styles";
 @import "../components/molecules/InputField/styles";
 @import "../components/molecules/RadioField/styles";
+@import "../components/molecules/SelectField/styles";
 @import "../components/molecules/Tag/styles";

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

@@ -1,10 +0,0 @@
-import type { SelectHTMLAttributes } from 'react';
-import React from 'react';
-export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-    /**
-     * 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/components/atoms/Select/Select.js

@@ -1,6 +0,0 @@
-import React, { forwardRef } from 'react';
-const Select = forwardRef(function Select({ children, testId = 'store-select', ...otherProps }, ref) {
-    return (React.createElement("select", Object.assign({ ref: ref, "data-fs-select": true, "data-testid": testId }, otherProps), children));
-});
-export default Select;
-//# sourceMappingURL=Select.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/atoms/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EAAE,QAAQ,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,UAAU,EAAE,EACpD,GAAG;IAEH,OAAO,CACL,8CAAQ,GAAG,EAAE,GAAG,yCAA8B,MAAM,IAAM,UAAU,GACjE,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

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

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

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

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

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

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

package/src/components/atoms/Button/Button.stories.mdx

@@ -1,110 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { Button } from '@faststore/components'
-
-<Meta
-  title="Atoms/Button/Default"
-  component={Button}
-  argTypes={{
-    children: {
-      name: 'content',
-    },
-    variant: {
-      options: ['primary', 'secondary', 'tertiary'],
-      control: { type: 'select' },
-      description: 'Specifies the component color variant.',
-    },
-    size: {
-      options: ['small', 'regular'],
-      control: { type: 'radio' },
-      description: 'Specifies the component size variant. ',
-    },
-    iconPosition: {
-      options: ['left', 'right'],
-      control: { type: 'radio' },
-    },
-  }}
-/>
-
-export const Template = ({ children, ...args }) => (
-  <Button {...args}>{children}</Button>
-)
-
-<header>
-
-# Button
-
-This component allows users to take actions, make choices or trigger an event with a single tap.
-
-</header>
-
-## Overview
-
-<Canvas>
-  <Story
-    name="overview-primary"
-    args={{
-      children: 'Primary',
-      size: 'regular',
-      variant: 'primary',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-secondary"
-    args={{
-      children: 'Secondary',
-      size: 'regular',
-      variant: 'secondary',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-tertiary"
-    args={{
-      children: 'Tertiary',
-      size: 'regular',
-      variant: 'tertiary',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-small"
-    args={{
-      children: 'Small',
-      size: 'small',
-      variant: 'secondary',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-```jsx
-import Button from '@faststore/ui'
-
-// Styles
-import @faststore/ui/src/components/atoms/Button/styles.scss
-```
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      children: 'Buy Now',
-      size: 'regular',
-      variant: 'primary',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />

package/src/components/atoms/Select/Select.tsx

@@ -1,22 +0,0 @@
-import type { SelectHTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
-  { children, testId = 'store-select', ...otherProps },
-  ref
-) {
-  return (
-    <select ref={ref} data-fs-select data-testid={testId} {...otherProps}>
-      {children}
-    </select>
-  )
-})
-
-export default Select

package/src/components/atoms/Select/index.ts

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

package/src/components/atoms/Select/stories/Select.mdx

@@ -1,40 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import Select from '../Select'
-
-# Select
-
-## Default
-
-<Canvas>
-  <Story id="atoms-select--default-select" />
-</Canvas>
-
-## Disabled
-
-<Canvas>
-  <Story id="atoms-select--disabled-select" />
-</Canvas>
-
-
-## Multiple
-
-<Canvas>
-  <Story id="atoms-select--multiple-select" />
-</Canvas>
-
-
-## Default Value
-
-<Canvas>
-  <Story id="atoms-select--base-value-select" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={Select} />
-
-## CSS Selectors
-
-```css
-[data-fs-select] {}
-```

package/src/components/atoms/Select/stories/Select.stories.tsx

@@ -1,63 +0,0 @@
-import type { Story } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../../typings/utils'
-import type { SelectProps } from '../Select'
-import Component from '../Select'
-import mdx from './Select.mdx'
-
-type SelectStoryProps = SelectProps & { options: string[][] }
-const SelectTemplate: Story<SelectStoryProps> = ({ options, ...props }) => {
-  return (
-    <>
-      <label htmlFor="select">Select:</label>
-      <Component {...props} name="select" id="select">
-        {options.map(([value, label]) => {
-          return (
-            <option key={value} value={value}>
-              {label}
-            </option>
-          )
-        })}
-      </Component>
-    </>
-  )
-}
-
-export const DefaultSelect = SelectTemplate.bind({})
-
-export const DisabledSelect = SelectTemplate.bind({})
-DisabledSelect.args = {
-  disabled: true,
-}
-
-export const MultipleSelect = SelectTemplate.bind({})
-MultipleSelect.args = {
-  multiple: true,
-}
-
-export const BaseValueSelect = SelectTemplate.bind({})
-BaseValueSelect.args = {
-  defaultValue: 'ok',
-}
-
-const argTypes: ComponentArgTypes<SelectStoryProps> = {
-  options: {
-    control: { type: 'array' },
-    defaultValue: [
-      ['great', 'Great'],
-      ['ok', 'Ok'],
-      ['bad', 'Bad'],
-    ],
-  },
-}
-
-export default {
-  title: 'Atoms/Select',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}