-
-## Behaviour
-
-- Badges only have 1 status. There is no variation and the user cannot interact with them; they are merely informative.
-- They must be as brief as possible and never have multiple lines. Text is limited to 100 characters, with an average of 20 characters.
-- If the maximum width is exceeded (240px desktop and mobile), omit part of the text at the end. Compensate the cut off text with the title.
-- For mobile devices we do not have the title and there is no alternative for the user to see the complete type. However, the percentage of cut off tags is very low.
-
-
-
-
-## Types
-
-There are 2 sizes of badges: Small and Large.
-Besides, we classify badges in 2 types: With background and without background.
-
-| | Without background | With background |
-| ----- | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| Small | line height = 14px
-
-
-
-### Without background
-
-
-
-## Content
-
-- The text can be accompanied by an icon in some cases: small without background, large with and without background (see table at Types).
-- If accepted, the icon can be placed either right side or left side, but not both sides at the same time.
-
-
-## Visual
-
-The colours that may be used are colours associated with a status: “positive – green”, “neutral – yellow” and “negative – red”. There is also another neutral grey default colour.
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-- Content should be able to increase in size
-- Content should have enough contrast to its background
-
-## Links
-
-- Zeplin: https://zpl.io/bJEAJrr
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/brmY405
-- Milanuncios
-- Motor: https://zpl.io/V1lwQyB
-
-## Changelog
-
-### Version 1.1
-
-*Deleted from de previous version:*
-
-- Types: Without background + Small: font-size = 14px / line height = 16px.
-
-*Added in this version:*
-
-- Types: table of different types with details about text sizes and measurements.
- - We added the case “Without background + Large”.
- - Text sizes changed. Without background + Small: font-size = 12px / line height = 14px
- - We included details about the use of icons.
-
-- Content: icons are allowed both left and right side, never at the same time.
-
-### Version 1.0
-
-Document created
\ No newline at end of file
diff --git a/components/atom/badge/package.json b/components/atom/badge/package.json
index a1db4f93a6..13b97c42ce 100644
--- a/components/atom/badge/package.json
+++ b/components/atom/badge/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-atom-badge",
- "version": "1.27.0",
+ "version": "1.28.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/atom/button/README.md b/components/atom/button/README.md
index d387626b31..5dbe5e28bd 100644
--- a/components/atom/button/README.md
+++ b/components/atom/button/README.md
@@ -2,8 +2,6 @@
> Atom Element: SUI button
-
-
## Installation
```sh
diff --git a/components/atom/button/UXDEF.md b/components/atom/button/UXDEF.md
deleted file mode 100644
index 5fc83ea69f..0000000000
--- a/components/atom/button/UXDEF.md
+++ /dev/null
@@ -1,262 +0,0 @@
-# SUI - Buttons
-
-The buttons usually act as the main call to action for the users, focusing their attention on what they need to do at each moment.
-
-| Status | Complete |
-| :-------------- | :-------------------------------------------------------- |
-| Current version | 2.0 |
-| Category | Atom |
-| Owners | @turolopezsanabria, UX @Julia C, UI @Chris J, FE @David A |
-
-## Structure
-
-- **Container:** it’s mandatory, although in some cases it may not be visible (transparent background)
-- **Copy/Text:** it’s common but not always mandatory.
-- **Icon:** optional.
-
-## Types
-
-- **Solid:** Solid colour no shadow nor border in SUI by default
-- **Outline:** White background, \$bdw-s border and border color in SUI by default
-- **Flat:** Transparent background, no border in SUI by default
-
-## Style
-
-- **Primary:** Primary colour in SUI by default
-- **Secondary:** Secondary colour in SUI by default
-- **Tertiary:** Tertiary colour in SUI by default
-- **Accent:** Accent colour in SUI by default
-- **Neutral:** Grey colour in SUI by default
-- **Semantics** Use the semantic colours
- - Success (also known as "Green", or "Positive")
- - Error (also known as "Red", or "Negative")
- - Warning (also known as "Alert")
-- **Social-media** Use social media colours by default (new values to add in Tokens)
- - Facebook (also known as "FB")
- - Whatsapp
- - Youtube
- - Twitter
- - Instagram
-
-## Contrast variations
-
-All buttons will be available in negative version as well (to be displayed over dark backgrounds)
-
-## Sizes
-
-- Small: 32px tall (also known as "s", or "sm")
-- Medium: 40px tall (also known as "m", or "md")
-- Large: 40px tall (also known as "l", or "lg")
-
-## Button widths
-
-The widths of the buttons depend on the text they contain, as well as the defined paddings.
-
-Occasionally, you may use a “full-width" or “wider” button whose width will be 100% of the container in which it is placed, as seen on the examples below
-
-## Content
-
-### Shapes
-
-The buttons will be available in 3 shapes:
-
-- Square
-- Rounded (br 4px by default in SUI)
-- Circle (br 50%)
-
-Each brand should be able to customise the border-radius per each of the 3 types.
-
-### Icons
-
-Icons on buttons highlight the meaning of the action and speed up recognition.
-
-You can add an icon to the button to highlight the action, but use them sparingly so as not to overload the page.
-
-The icons may be placed either without any text (icon buttons), to the left, or to the right of the text/copy.
-
-### Text
-
-Each vertical should be able to customise the text-styles of their buttons.
-
-## Visuals
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-1. Every interactive element should be focusable
-2. Focus order should match visual order
-3. Focus should be visible
-4. Interactive elements and images should be correctly labelled
-5. Interactive elements should be differentiated from content
-6. Clickable area should be sufficient
-7. Content should have enough contrast to its background
-
-## Links
-
-- Zeplin:
-
-## Customisable variables
-
-For all the buttons, any vertical should be able to change the following variables:
-
-- Border-radius for the rounded version (square always to 0, rounded always to 50%)
-- Box-shadow
-- Font-size
-- Font-color for all the states (default, active, hover, disabled, etc)
-- Background colour for all the states (default, active, hover, disabled, etc)
-- Border colour for all the states (default, active, hover, disabled, etc)
-- Border-size for all the states (default, active, hover, disabled, etc)
-- Lateral paddings: $p-m for small buttons, and $p-l for medium and large buttons by default in SUI
-
-## Specific notes per vertical
-
-### Default values in SUI:
-
-- Border-radius for the rounded version: 4px (it should also be the value of \$bdrs-m in Tokens)
-- Box shadow: none for all the styles
-- Lateral paddings: $p-m for small buttons, and $p-l for medium and large buttons
-- Font-sizes:
-
- - Small button: \$fz-s (16px)
- - Medium button: \$fz-m (16px)
- - Large button: \$fz-m (16px)
-
-- **Positive buttons**
-
- - Border size: \$bdw-s
- - Background colours: ("Pure Color" is the colour without changes of lighness or darkness)
- - Solid:
- - Default: Pure Color
- - Active and Hover: Color-L1
- - Disabled: Color-L5
- - Outline:
- - Default: White
- - Active and Hover: Color-L5
- - Disabled: White
- - Flat:
- - Default: Transparent
- - Active and Hover: Color-L5
- - Disabled: Transparent
- - Border colours:
-
- - Solid:
- - Default: Transparent
- - Active and Hover: Transparent
- - Disabled: Transparent
- - Outline:
- - Default: Pure Color
- - Active and Hover: Pure Color
- - Disabled: Color-L5
- - Flat:
- - Default: Transparent
- - Active and Hover: Transparent
- - Disabled: Transparent
-
- - Font-colours:
-
- - Solid:
- - Default: White
- - Active and Hover: White
- - Disabled: White
- - Outline:
- - Default: Pure Color
- - Active and Hover: Color-D1
- - Disabled: Color-D5
- - Flat:
- - Default: Pure Color
- - Active and Hover: Color-D1
- - Disabled: Color-D5
-
- - Colours for SociaMedia:
- - Facebook: #3b5998
- - Whatsapp: #25D366
- - Youtube: #FF0000
- - Twitter: #1DA1F2
- - Instagram: #833AB4
-
-- **Negative buttons**
-
- - Background colours: ("Pure Color" is the colour without changes of lighness or darkness)
- - Solid:
- - Default: White
- - Active and Hover: White
- - Disabled: White
- - Outline:
- - Default: Transparent
- - Active and Hover: Transparent
- - Disabled: Transparent
- - Flat:
- - Default: Transparent
- - Active and Hover: Transparent
- - Disabled: Transparent
- - Border colours:
-
- - Solid:
- - Default: Transparent
- - Active and Hover: Transparent
- - Disabled: Transparent
- - Outline: **Change border size to 2px for hover**
- - Default: White
- - Active and Hover: White
- - Disabled: White
- - Flat:
- - Default: Transparent
- - Active and Hover: Transparent
- - Disabled: Transparent
-
- - Font-colours:
-
- - Solid:
- - Default: Pure Color
- - Active and Hover: Color-L1
- - Disabled: Color-D1
- - Outline:
- - Default: White
- - Active and Hover: White
- - Disabled: White
- - Flat:
- - Default: Pure Color
- - Active and Hover: Color-D1
- - Disabled: Color-D5
-
- - Colours for SociaMedia:
- - Facebook: #3b5998
- - Whatsapp: #25D366
- - Youtube: #FF0000
- - Twitter: #1DA1F2
- - Instagram: #833AB4
-
-### Values for each of the themes:
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 2.0
-
-Iterated by @turolopezsanabria
-
-- Complete re-definition of buttons
-- Split between Shape, Type and Style. From now on, it will be possible to have outline buttons for any Style (primary, secondary, etc)
-- Including more Styles: Social, Neutral and Tertiary
-
-### Version 1.3
-
-- Text: customizable text button definition, per vertical and per button size.
-
-### Version 1.2
-
-- Types: Added button icon right, button only with icon, button only with one letter.
-- Visual: Small Button change horizontal paddings to 8px.
-- Visual: Added visual of the disabled buttons state.
diff --git a/components/atom/button/assets/screenshot.png b/components/atom/button/assets/screenshot.png
deleted file mode 100644
index 4d284efeb6..0000000000
Binary files a/components/atom/button/assets/screenshot.png and /dev/null differ
diff --git a/components/atom/card/CHANGELOG.md b/components/atom/card/CHANGELOG.md
index 0a4ee3fbd3..4a7de93d2a 100644
--- a/components/atom/card/CHANGELOG.md
+++ b/components/atom/card/CHANGELOG.md
@@ -1,5 +1,9 @@
# CHANGELOG
+# 1.24.0 (2022-10-06)
+
+
+
# 1.23.0 (2022-06-20)
diff --git a/components/atom/card/UXDEF.md b/components/atom/card/UXDEF.md
deleted file mode 100644
index d3f590d0d7..0000000000
--- a/components/atom/card/UXDEF.md
+++ /dev/null
@@ -1,154 +0,0 @@
-# SUI - Cards
-*A card is a flexible and extensible container, organized in a structure that is repeated more than once, that gives information about a product/client/article and serves as an entry point for more detailed* *information.*
-
-| Status | Work in progress |
-| :---- | :---- |
-| Current version | 1.0 |
-| Category | Molecule |
-| Owners | UX @Cristina P, @Joan M |
-
-To be considered a Card Component, it must meet 3 conditions:
-
-1. It has 1 or 2 areas max (see “structure”).
-2. To have a structure that is repeated more than once.
-3. It has to explain and redirect to an specific page: product/client/article.
-
-## Structure
-
-The card is structured in two main areas:
-
-1. **Media content:** as an illustration, photograph or images slider. (optional)
-2. **Info content** related to the product/client/article. (mandatory)
-
-If there is no media, info content area must have two elements.
-For instance: Title + short description, or short description + call to action button, etc.
-
-**To see all elements possibilities within the card please check out contents section below.**
-
-
-
-## Examples of what is a card and what is not a card
-
-These are considered a card:
-
-1. It has 1 or 2 areas max ✔
-2. It is repeated more than once. ✔
-3. It links to a specific product/client/article page. ✔
-
-
-
-
-These are **not** considered a card:
-
-1. It contains 2 or more blocks of information ✔
-2. It is repeated more than once. ✔
-****3. **It DOES NOT links to a specific product/client/article** **page**. (In this case it redirects you to some general pages) ✗
-
-
-
-## Behavior
-
-**A card will always expand to the 100% of its container or layout**. Hence the “horizontal” or the “vertical” view (see “responsive”):
-
-
-
-### Primary and secondary actions
-
-It is possible to have a primary action and also some secondary actions.
-The cards itself can work as a linkable area to the primary action. Primary and secondary actions will be established including other elements/components such as: buttons, links, clickable areas… This decision has to be defined by the product team when integrating the card.
-
-### Focus
-
-Standard focus provided by browser will be used in the card also.
-
-
-
-Keyboard **“TAB”** should change focus to next focusable element.
-
-The order of priorities of the focus, in the internal elements of the card, will be decided by the vertical when the card is built.
-
-### Extra visibility
-
-If a card needs to be more visible, a different background color will be added. **This highlight color will be defined by each vertical.**
-
-
-
-### Skeleton
-
-As a card is a container of components, **the skeleton will be defined by its content** for the first version. For example, if the card has a media content, the image placeholder or media gallery will have the loading behavior described in their definition.
-
-## Types
-
-There is only one type of card that is so flexible in content that can be used to build any possible card needed.
-
-The order of elements inside the card will keep the same in horizontal and vertical views of the card as we assume the importance of the element for the user is the same no matter the view.
-
-## Visual
-
-
-
-## Responsive
-
-**Each vertical will decide in which** [**breakpoint**](https://paper.dropbox.com/doc/SUI-Breakpoints--AOOfpSeDD3k2KUKs0LVz_75qAg-seYN3kSKY1ZNEOV527lnn) **the view will change from horizontal to vertical.**
-
-
-### Horizontal view
-
-In the horizontal view, “media content” (if needed) will be NEXT TO the “Info Content”. Media Content size will be defined by each vertical.
-- **Media content width** will be defined by each vertical and it can be in px (fixed width) or in percentage (fluid width).
-- **Media content height** will be defined by the image aspect ratio.
-- **Info content width** will be adapt to the remaining space.
-- **Info content height** will be the same as media content height.
-
-
-
-### Vertical view
-
-In the vertical view, “media content” (if needed) will be BELOW the “Info Content”.
-- **Media content width** will grow to be 100% width of its container.
-- **Media content height** will be resized to fit image aspect ratio without cropping.
-- **Info content width** will be the same as media content width
-- **Info content height** will be defined by its inner content and inner components.
-
-
-
-We recommend using the vertical view of the card for mobile devices and the horizontal view for wider screens, but it is not mandatory.
-
-A card must maintain coherence of information in different resolutions but it is possible to make some adjustments to the elements in their mobile version: adding an ellipsis (…) to shorten a text element or masking an image.
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-1. Every interactive element should be focusable
-3. Focus should be visible
-4. Heading structure should be consistent (important for voice over support tools)
-15. Content should have enough contrast to its background
-
-Extra: The use of microformats is highly recommended. E.g http://microformats.org/wiki/hcard
-
-## Links
-
-Include useful links here (Zeplin, Tokens, Other components, etc).
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.0
-
-- Nothing here yet
diff --git a/components/atom/card/package.json b/components/atom/card/package.json
index b52cdb35ed..f24da9b09a 100644
--- a/components/atom/card/package.json
+++ b/components/atom/card/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-atom-card",
- "version": "1.23.0",
+ "version": "1.24.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/atom/checkbox/CHANGELOG.md b/components/atom/checkbox/CHANGELOG.md
index a554a9186c..b4e827a4ff 100644
--- a/components/atom/checkbox/CHANGELOG.md
+++ b/components/atom/checkbox/CHANGELOG.md
@@ -1,5 +1,14 @@
# CHANGELOG
+# 3.2.0 (2022-10-14)
+
+
+### Bug Fixes
+
+* **components/atom/checkbox:** return handler name properly ([e699c8f](https://github.com/SUI-Components/sui-components/commit/e699c8f46f67e237d8371e7011f58125cace5ca2))
+
+
+
# 3.1.0 (2022-07-18)
diff --git a/components/atom/checkbox/UXDEF.md b/components/atom/checkbox/UXDEF.md
deleted file mode 100644
index ae7c63afa0..0000000000
--- a/components/atom/checkbox/UXDEF.md
+++ /dev/null
@@ -1,146 +0,0 @@
-# SUI - Checkbox & Radio button
-*Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes* ~~*in*~~*on* *the list, so checking one box doesn't uncheck the others.*
-*A stand-alone checkbox is used for a single option that the user can turn on or off.*
-*Each vertical can determine whether or not a stand-alone checkbox will be selected by default*
-
-
-*Radio buttons are used when there is a list of options that mutually exclude each other. In other words, only one option can be selected, automatically deselecting the other preselected options.*
-
-| Status | Complete |
-| :---- | :---- |
-| Current version | 1.0|
-| Category | Atom |
-| Owners | UX @David G, @Chris J, FE |
-
-**Recommendations:**
-
-- Take in consideration the next recommendation when the user must select between different options inside a range:
-- Use **Radio button** when there are 2 to 5 options
-- Use [Data Counter](https://paper.dropbox.com/doc/SUI-Data-counter--AQoAk39iIIJh2YPkZHAMA0OoAg-TqR9qBw4WRr5l5gNMvvEE) when there are 5 to 99 options (numbers)
-- Use [Slider](https://paper.dropbox.com/doc/SUI-Slider--AQrmpIMeYmY2P1q1nQr~vOifAg-gPOtnVwgn8SUMDTjFTZ2q) when there is a big range of options. From 10 to 999 (like 10-20-30-50…)
-- If possible, use Radio buttons instead of Select field (drop-down menus). Radio buttons have a lower cognitive load because they make all of the options permanently visible so that users can easily compare them.
-- Use checkboxes and radio buttons only to change settings, not as action buttons that make something happen.
-
-## Structure
-
-- Checkbox & Radio button are a combination of 2 elements: Icon + Other element (on which makes the action)*.
-*Examples of other elements: Label, card, image, table’s row…
-- Check the [Label definition](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT).
-- At least 2 options must be selected for the radio button. If there is only one, then a Checkbox must be used.
-- It is extremely important to present all the selection options that go together as group and to clearly separate them from the other groups on the same page.
-
-By default, a group of checkboxes or radio buttons are displayed vertically stacked as a list.
-
-
-
-However, a group of checkboxes or radio buttons may also be displayed in a horizontal line.
-
-
-
-Remember to check the [Label d](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT)[z](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT)[efinition](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT).
-
-## Behavior
-
-### State
-
-- The Checkbox & Radio buttons have 5 statuses, because the “selected” status is also included, plus this new one when it is “focused”.
-- For the first iteration, the focus will be the native Browser focus.
-
-
-
-
-
-## Content
-
-Preselected options aren’t recommended, especially in Radio Buttons.
-Pre-selection can be used as an exception only in some cases where the information to select isn’t too important or when the system has complementary information to pre-select one option (for example, geolocalization).
-
-If a checkbox or radio button with an important decision is preselected and the user misses it, the user may move forward with the form with crucial information answered incorrectly.
-
-## Types
-
-### Ad hoc variations
-
-**INFOJOBS**
-Sometimes, checkboxes and radio buttons are used that look different. Boxes that need to be selected are missing and they look more like buttons, but the underlying logic corresponds to these elements.
-
-
-
-**F****OTOCASA** ******&** ******COCHES**
-Sometimes, checkboxes and radio buttons are used that look different. The checkbox or radio-button is hidden, and there is an illustration/image instead above its label.
-
-**Coches.net**
-In coches, the status is represented by its opacity.
-
-
-
-
-**Fotocasa**
-
-
-
-## Visual
-
-Checkbox & Radio buttons have their height defined by the label’s line-height and they are aligned from the center to the icon.
-The margin between each individual Check/Radio~~,~~ displayed vertically, is 16px.
-
-Use standard visual representations. A Checkbox should be a small square that has a checkmark or an X when selected. A Radio button should be a small circle that has a solid circle inside it when selected.
-
-
-
-## Responsive
-
-Checkbox & Radio buttons can be aligned from horizontal to vertical grids, but the Label position must always be kept on the right side of the icon.
-
-
-
-If a list label ~~was~~is very extensive, it will be a double line in responsive.
-
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-1. Every interactive element should be focusable
-2. Focus order should match visual order
-3. Focus should be visible
-6. Information should not be supported only by one sense
-7. Interactive elements and images should be correctly labelled
-8. Content should be written in common language
-10. Clickable area should be sufficient
-
-The active/clickable area has been defined as 24 px (only when it is for text+icon)
-
-
-12. Controls should be correctly labeled
-13. Errors should be prevented
-16. Text should always be displayed as text
-
-## Links
-
-- Benchmark: https://confluence.schibsted.io/display/ST/Benchmark+Form+Elements#
-- Form Elements: https://confluence.schibsted.io/display/ST/Benchmark+Form+Elements#
-- Zeplin: https://zpl.io/bo0eq9Z
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/2Gp7JGJ
-- Milanuncios
-- Motor: https://zpl.io/brElMlr
-
-## Changelog
-
-### Version 1.0
-
-- Component creation
diff --git a/components/atom/checkbox/package.json b/components/atom/checkbox/package.json
index deca2d4c86..4ac0833895 100644
--- a/components/atom/checkbox/package.json
+++ b/components/atom/checkbox/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-atom-checkbox",
- "version": "3.1.0",
+ "version": "3.2.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/atom/checkbox/src/index.js b/components/atom/checkbox/src/index.js
index bc1d2911f9..6f69c8a34a 100644
--- a/components/atom/checkbox/src/index.js
+++ b/components/atom/checkbox/src/index.js
@@ -33,7 +33,7 @@ const AtomCheckbox = forwardRef(
indeterminate: indeterminateProp,
indeterminateIcon: IndeterminateIcon,
icon: IconProp,
- name,
+ name: nameProp,
onChange: onChangeFromProps,
status,
size = CHECKBOX_SIZES.MEDIUM,
@@ -47,6 +47,7 @@ const AtomCheckbox = forwardRef(
checkedProp,
defaultCheckedProp
)
+ const name = nameProp || id
const [indeterminate, setIndeterminate, isIndeterminateControlled] =
useControlledState(indeterminateProp, defaultIndeterminateProp)
@@ -155,7 +156,7 @@ const AtomCheckbox = forwardRef(
aria-hidden={!isNative}
aria-checked={pressedValue({checked, indeterminate})}
indeterminate={indeterminate ? 'true' : undefined}
- {...(isNative && {onChange: handleChange(inputRef)})}
+ onChange={handleChange(inputRef)}
{...props}
/>
Text
-text is used to set the text included in.
- Checkbox
Text
+text is used to set the text included in.
+ Text-area
-
-
-
-### Clarity (Pixel perfection)
-
-If you want to create a new icon you should follow a certain rules to make it clear and optimum to render, draw vector nodes into absolute pixel coordinates (not decimal) as far as possible,
-
-
-
-
-
-As an exception you have to set or align the icon within the artboard in this kind of cases please use 0.25px movements.
-
-
-
-### Anatomy - Stroke & Fill
-
-All icons are finally based on path vector form, it should be as optimized as possible with a unique final shape/path with no extra groups or shapes.
-Take into account to use as minimum vector as possible to reduce complexity in the final exports.
-
-**Attention to weight stroke styles**
-
-**Light**: It must contain a path made from a 1px stroke width.
-
-**Regular**: It must contain a path made from a 1,5px stroke width.
-
-**Bold**: It must contain a path made from a 2px stroke width.
-
-
-
-**Note**
-
-As you may notice design can be slightly different, between weights collections. If you design your icons in a 24x24 grid with 1px stroke weight, in 16px scale the stroke width changes to 0.75 and the icons will have a very light visualisation.
-
-### Stroke terminals
-
-Streamline icon set uses a rounded stroke style and the ends of the lines, but is not a mandatory rule is you override with another icon set.
-
-
-
-### Color
-
-By default the icon color is black but you can choose from a defined color set based on your [color definition](https://paper.dropbox.com/doc/SUI-Colors--AbdC~qNyCCes14Fyapq9sg7FAQ-TcHoMYNiXsDTzwdwHFbYT).
-
-**Note:** On the code side, the colour will be applied once per icon. Just one colour is possible.
-If you don’t specify the colour, it will be overwritten from its parent container. By this approach most of the cases will be automatically match with the container text color, very convenient for buttons, notifications, etc.
-
-## Links
-
-Include useful links here (Zeplin, Tokens, Other components, etc).
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa: [Stramline Icon Set](https://www.streamlineicons.com/). This specific icon library doesn’t have a security space by default. Some icons need adjustment within the 24px artboard.
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.0
-
-- Nothing here yet
\ No newline at end of file
diff --git a/components/atom/image/CHANGELOG.md b/components/atom/image/CHANGELOG.md
index e2f7a1d541..8519440acd 100644
--- a/components/atom/image/CHANGELOG.md
+++ b/components/atom/image/CHANGELOG.md
@@ -1,5 +1,32 @@
# CHANGELOG
+# 2.16.0 (2022-10-03)
+
+
+### Bug Fixes
+
+* **components/atom/image:** update proptype ([4b77543](https://github.com/SUI-Components/sui-components/commit/4b77543d4c8537d76c136b1b4a234dc31c2183eb))
+
+
+
+# 2.15.0 (2022-10-01)
+
+
+### Features
+
+* **components/atom/image:** replace cloneElement spinner ([5871943](https://github.com/SUI-Components/sui-components/commit/58719439ec5e98e8a81d2b77b53e9a7cdd9bbee1)), closes [#2320](https://github.com/SUI-Components/sui-components/issues/2320)
+
+
+
+# 2.14.0 (2022-09-29)
+
+
+### Features
+
+* **components/atom/image:** rename node prop ([4e13e98](https://github.com/SUI-Components/sui-components/commit/4e13e98affe157059edaeaf1843880e017fbc1f1)), closes [#2319](https://github.com/SUI-Components/sui-components/issues/2319)
+
+
+
# 2.13.0 (2022-07-18)
diff --git a/components/atom/image/README.md b/components/atom/image/README.md
index 2ca431e149..6a3200fb7b 100644
--- a/components/atom/image/README.md
+++ b/components/atom/image/README.md
@@ -26,12 +26,23 @@ import AtomImage from '@s-ui/react-atom-image'
/>
```
+### With a title
+
+```javascript
+
+
-
+
Align to the left
-
+
-
+
Centered
-
+
-
+
Align to the right
diff --git a/components/atom/panel/demo/PanelAsImage/ArticleOverlay.js b/components/atom/panel/demo/PanelAsImage/ArticleOverlay.js
index 42a9a57994..37629ffe87 100644
--- a/components/atom/panel/demo/PanelAsImage/ArticleOverlay.js
+++ b/components/atom/panel/demo/PanelAsImage/ArticleOverlay.js
@@ -20,14 +20,14 @@ const ArticleOverlay = ({className}) => {
{Object.keys(atomPanelAlpha).map((alpha, index) => (
-
+
{color} {alpha}
diff --git a/components/atom/panel/demo/PanelAsImage/ArticlePlaceholder.js b/components/atom/panel/demo/PanelAsImage/ArticlePlaceholder.js
index e643cc4602..f0fb401775 100644
--- a/components/atom/panel/demo/PanelAsImage/ArticlePlaceholder.js
+++ b/components/atom/panel/demo/PanelAsImage/ArticlePlaceholder.js
@@ -13,12 +13,12 @@ const ArticlePlaceholder = ({className}) => {
This is the structure for the
-
placeholder
-
Original
+
-
+
diff --git a/components/atom/panel/demo/PanelAsImage/ArticleVerticallyCropped.js b/components/atom/panel/demo/PanelAsImage/ArticleVerticallyCropped.js
index 6e3eb89b3e..3379001fd0 100644
--- a/components/atom/panel/demo/PanelAsImage/ArticleVerticallyCropped.js
+++ b/components/atom/panel/demo/PanelAsImage/ArticleVerticallyCropped.js
@@ -28,30 +28,30 @@ const ArticleVerticallyCropped = ({className}) => {
+
-
+
Top
-
+
-
+
Center
-
+
+
+ )}
+
)
}
@@ -295,6 +321,8 @@ MoleculeSelectPopover.propTypes = {
onClose: PropTypes.func,
onCustomAction: PropTypes.func,
onOpen: PropTypes.func,
+ overlayContentRef: PropTypes.object,
+ overlayType: PropTypes.oneOf(Object.values(OVERLAY_TYPES)),
placement: PropTypes.oneOf([
PLACEMENTS.AUTO_END,
PLACEMENTS.AUTO_START,
@@ -309,4 +337,8 @@ MoleculeSelectPopover.propTypes = {
}
export default MoleculeSelectPopover
-export {SIZES as selectPopoverSizes, PLACEMENTS as selectPopoverPlacements}
+export {
+ OVERLAY_TYPES as selectPopoverOverlayTypes,
+ PLACEMENTS as selectPopoverPlacements,
+ SIZES as selectPopoverSizes
+}
diff --git a/components/molecule/selectPopover/src/styles/index.scss b/components/molecule/selectPopover/src/styles/index.scss
index e6a0999adf..d5c2ea33be 100644
--- a/components/molecule/selectPopover/src/styles/index.scss
+++ b/components/molecule/selectPopover/src/styles/index.scss
@@ -101,4 +101,20 @@ $base-class: '.sui-MoleculeSelectPopover ';
transform: rotate(-90deg) !important;
}
}
+
+ &-overlay {
+ @each $name, $type in $molecule-select-popover-overlay-types {
+ &--#{$name} {
+ $bgc: map-get($type, bgc);
+ background-color: $bgc;
+ content: '';
+ height: 100%;
+ left: 0;
+ opacity: $op-select-popover-overlay;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+ }
+ }
}
diff --git a/components/molecule/selectPopover/src/styles/settings.scss b/components/molecule/selectPopover/src/styles/settings.scss
index 818f207b3e..1fd2070e35 100644
--- a/components/molecule/selectPopover/src/styles/settings.scss
+++ b/components/molecule/selectPopover/src/styles/settings.scss
@@ -21,3 +21,16 @@ $cur-select-popover-select: pointer !default;
$op-select-popover: 0.4 !default;
$z-select-popover-select-popover: $z-tooltips !default;
+
+$op-select-popover-overlay: 0.6 !default;
+$bgc-select-popover-dark-overlay: $c-black !default;
+$bgc-select-popover-light-overlay: $c-white !default;
+
+$molecule-select-popover-overlay-types: (
+ dark: (
+ bgc: $bgc-select-popover-dark-overlay
+ ),
+ light: (
+ bgc: $bgc-select-popover-light-overlay
+ )
+) !default;
diff --git a/components/molecule/selectPopover/test/index.test.js b/components/molecule/selectPopover/test/index.test.js
index a9998682dc..7d1d9f89a4 100644
--- a/components/molecule/selectPopover/test/index.test.js
+++ b/components/molecule/selectPopover/test/index.test.js
@@ -10,7 +10,10 @@ import ReactDOM from 'react-dom'
import chai, {expect} from 'chai'
import chaiDOM from 'chai-dom'
+import {fireEvent} from '@testing-library/react'
+
import json from '../package.json'
+import {PLACEMENTS} from '../src/config.js'
import * as pkg from '../src/index.js'
chai.use(chaiDOM)
@@ -23,6 +26,7 @@ describe(json.name, () => {
// Given
const library = pkg
const libraryExportedMembers = [
+ 'selectPopoverOverlayTypes',
'selectPopoverSizes',
'selectPopoverPlacements',
'default'
@@ -30,6 +34,7 @@ describe(json.name, () => {
// When
const {
+ selectPopoverOverlayTypes,
selectPopoverSizes,
selectPopoverPlacements,
default: MoleculeSelectPopover,
@@ -172,4 +177,88 @@ describe(json.name, () => {
})
})
})
+
+ describe('selectPopoverOverlayTypes', () => {
+ it('value must be an object enum', () => {
+ // Given
+ const library = pkg
+
+ // When
+ const {selectPopoverOverlayTypes: actual} = library
+
+ // Then
+ expect(actual).to.be.an('object')
+ })
+
+ it('value must be a defined string-key pair filled', () => {
+ // Given
+ const library = pkg
+ const expected = {
+ DARK: 'dark',
+ LIGHT: 'light',
+ NONE: 'none'
+ }
+
+ // When
+ const {selectPopoverOverlayTypes: actual} = library
+ const {DARK, LIGHT, NONE, ...others} = actual
+
+ // Then
+ expect(Object.keys(others).length).to.equal(0)
+ expect(Object.keys(actual)).to.have.members(Object.keys(expected))
+ Object.entries(expected).forEach(([expectedKey, expectedValue]) => {
+ expect(Object.keys(actual).includes(expectedKey)).to.be.true
+ expect(actual[expectedKey]).to.equal(expectedValue)
+ })
+ })
+ })
+
+ describe('should render appropriate popoverclass for placement', () => {
+ it('should render appropriate popoverclass for Auto start placement', () => {
+ // Given
+ const props = {
+ acceptButtonText: 'acceptButtonText',
+ cancelButtonText: 'cancelButtonText',
+ iconArrowDown: () => ,
+ selectText: 'selectText',
+ children: 'children',
+ placement: PLACEMENTS.AUTO_START
+ }
+
+ // When
+ const {container} = setup(props)
+
+ // Then
+ const select = container.querySelector(
+ '[class="sui-MoleculeSelectPopover-selectIcon"]'
+ )
+ fireEvent.click(select)
+ expect(container.innerHTML).to.include(
+ 'sui-MoleculeSelectPopover-popover--left'
+ )
+ })
+ it('should render appropriate popoverclass for Auto end placement', () => {
+ // Given
+ const props = {
+ acceptButtonText: 'acceptButtonText',
+ cancelButtonText: 'cancelButtonText',
+ iconArrowDown: () => ,
+ selectText: 'selectText',
+ children: 'children',
+ placement: PLACEMENTS.AUTO_END
+ }
+
+ // When
+ const {container} = setup(props)
+
+ // Then
+ const select = container.querySelector(
+ '[class="sui-MoleculeSelectPopover-selectIcon"]'
+ )
+ fireEvent.click(select)
+ expect(container.innerHTML).to.include(
+ 'sui-MoleculeSelectPopover-popover--right'
+ )
+ })
+ })
})
diff --git a/components/molecule/tabs/CHANGELOG.md b/components/molecule/tabs/CHANGELOG.md
index 5b998059e8..8d9f1081b2 100644
--- a/components/molecule/tabs/CHANGELOG.md
+++ b/components/molecule/tabs/CHANGELOG.md
@@ -1,12 +1,25 @@
# CHANGELOG
+# 2.37.0 (2022-10-13)
+
+
+### Features
+
+* **components/molecule/tabs:** add id prop to make tabs uniques ([b90231d](https://github.com/SUI-Components/sui-components/commit/b90231dc07db9ef4dcc7943fafe2c634b38a1070))
+* **components/molecule/tabs:** add pull request feedback ([208e0be](https://github.com/SUI-Components/sui-components/commit/208e0bed5aa055ae796fc934d79c334b17acc1b4))
+* **components/molecule/tabs:** pull request feedback ([f32e971](https://github.com/SUI-Components/sui-components/commit/f32e9718a114586ba6e9139406c0db8f330100fd))
+
+
+
# 2.36.0 (2022-09-22)
### Features
+* **components/molecule/tabs:** add orientation aria attribute ([71296a3](https://github.com/SUI-Components/sui-components/commit/71296a319365c6109c7e9aaa2077933ceb80d09e))
* **components/molecule/tabs:** Change tabs to be able to modify current active tabs by updating pro ([3f6a23e](https://github.com/SUI-Components/sui-components/commit/3f6a23e3538970054c289b4607c806baa72c6922))
* **components/molecule/tabs:** control/uncontroll active tabs ([7945c33](https://github.com/SUI-Components/sui-components/commit/7945c339e5a145a2d593b2f68d4344aea2100f7b))
+* **components/molecule/tabs:** make tabs accesibles ([b4ebaf3](https://github.com/SUI-Components/sui-components/commit/b4ebaf3f60efa0bb51422059bf631f9e1e076666))
* **components/molecule/tabs:** remove unnecesary prop injected ([4b67d13](https://github.com/SUI-Components/sui-components/commit/4b67d1304388ec589112eb3bd4d24767c8733367))
diff --git a/components/molecule/tabs/UXDEF.md b/components/molecule/tabs/UXDEF.md
deleted file mode 100644
index 3891b3ecd3..0000000000
--- a/components/molecule/tabs/UXDEF.md
+++ /dev/null
@@ -1,113 +0,0 @@
-# SUI - Tabs
-*Tabs are used to quickly navigate between views or contents within the same context.*
-
-| Status | Work in progress |
-| :---- | :---- |
-| Current version | 1.0 |
-| Category | Molecule |
-| Owners | UX @David G, @Chris J, FE @Pablo G|
-
-## Structure
-
-The component Tab consists of a group of clickable areas that are arranged in a row (horizontal tabs) or column (vertical tabs).
-
-Tab labels can be text and text + icon, but never an icon without text.
-
-
-
-## Behaviour
-- There are four statuses for the tabs: resting, hover, active/highlighted and disabled.
-- All the horizontal tabs of the tab group share the same height.
-- All the vertical tabs of the tab group share the same width and height.
-- Truncate the text to avoid a second line.
-- Highlight the tab corresponding to the visible content.
-
-
-
-## Types
-
-### Variants
-
-For the different types of tabs, we contemplate two variants that only change visually the Active tab of the group:
-
-- **Highlighted:** Apply a underline to the Active tab.
-- **Classic:** Apply a border to the Active tab.
-
-
-
-
-### 5 types of tab groups:
-
-- **Text:** it takes its width from the tabs included. It aligns to the left.
-- **Text + Icon:** it also takes its width from the tabs included. It aligns to the left and the icon is entered to the tab width.
-- **Text + Icon Full Width:** each contained tab stretches itself in proportion, fitting into the container.
-- **Text + Icon Vertical:** it takes its height from the tabs included and have a fixed width. It aligns to the top of the container.
-- **Text + number (counter):** The text inherits the maximum width of the tab and can never go to two lines. If necessary, ellipsis would be used to cut the text. Text and number align to the center of the container.
-
-
-
-
-
-## Contents
-
-Tab labels should be clear enough to allow the user to identify its content.
-Text labels must use short titles.
-
-
-
-## Visual
-
-In responsive the max-width of the tabs are 160px (approx. 15 characters).
-In desktop we don't limit the width but we recommend the same width (160px. - approx. 15 characters).
-
-
-
-## Responsive
-
-A responsive Tab group may have the same width as on the desktop version, adapt its width to that of the container in which it is placed, or be placed as a sticky full-width tab group at the bottom or top of the screen.
-
-
-
-
-
-Another possibility is when the Tab width exceeds the screen width, it keep the original tab group width, adding a horizontal scroll.
-
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-1. Every interactive element should be focusable
-2. Focus order should match visual order
-3. Focus should be visible
-
-
-7. Interactive elements and images should be correctly labelled
-9. Interactive elements should be differentiated from content
-10. Clickable area should be sufficient
-15. Content should have enough contrast to its background
-
-## Links
-
-- Zeplin: https://zpl.io/aggE7rN
-
-## Specific notes per vertical
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/an1OxGJ
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.0
-
-- Nothing here yet
diff --git a/components/molecule/tabs/package.json b/components/molecule/tabs/package.json
index 4dcb481958..1eb73a36c8 100644
--- a/components/molecule/tabs/package.json
+++ b/components/molecule/tabs/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-molecule-tabs",
- "version": "2.36.0",
+ "version": "2.37.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/molecule/tabs/src/components/MoleculeTab.js b/components/molecule/tabs/src/components/MoleculeTab.js
index 52636797f5..bd256c93dc 100644
--- a/components/molecule/tabs/src/components/MoleculeTab.js
+++ b/components/molecule/tabs/src/components/MoleculeTab.js
@@ -21,6 +21,7 @@ const MoleculeTab = forwardRef(
count,
disabled,
icon,
+ id = 'molecule-tab-content',
isIntersecting,
label,
numTab,
@@ -54,6 +55,9 @@ const MoleculeTab = forwardRef(
className={className}
onClick={handleChange}
ref={useMergeRefs(innerRef, forwardedRef)}
+ role="tab"
+ aria-selected={active}
+ aria-controls={`${id}-${numTab}`}
>
{icon && {icon}}
{!isNaN(count) && {count}}
@@ -73,6 +77,9 @@ MoleculeTab.propTypes = {
/** icon (React component) */
icon: PropTypes.node,
+ /** id used to make tabs unique per page */
+ id: PropTypes.string,
+
/** count to display */
count: PropTypes.string,
diff --git a/components/molecule/tabs/src/components/MoleculeTabs.js b/components/molecule/tabs/src/components/MoleculeTabs.js
index 754f1ef41e..c82d5d1da2 100644
--- a/components/molecule/tabs/src/components/MoleculeTabs.js
+++ b/components/molecule/tabs/src/components/MoleculeTabs.js
@@ -16,6 +16,7 @@ import {
const MoleculeTabs = ({
autoScrollIntoView = true,
children,
+ id = 'molecule-tab-content',
onChange,
type,
variant
@@ -25,6 +26,7 @@ const MoleculeTabs = ({
[`${BASE_CLASS}--${type}`]: type
})
const childrenArray = Children.toArray(children)
+ const isVerticalOrientation = type === TYPES.VERTICAL
const [isIntersecting, outerRef] = useOnScreen()
@@ -36,26 +38,39 @@ const MoleculeTabs = ({
autoScrollIntoView,
isIntersecting,
numTab,
+ id,
onChange
})
})
const activeTabContent = childrenArray.reduce((activeContent, child) => {
if (child) {
- const {children: childrenChild, active} = child.props
- return active ? childrenChild : activeContent
+ const {children: childrenChild, active, numTab} = child.props
+
+ if (active) {
+ return (
+
+ {expectedContent1}
+ ,
+
+ {expectedContent2}
+
+ ]
+ }
+
+ // When
+ const {getByRole} = setup(props)
+ const tab1 = getByRole('tab', {name: 'Tab 1'})
+ expect(tab1).to.have.attribute('aria-selected', 'true')
+
+ const content1 = getByRole('tabpanel')
+ expect(content1.innerHTML).to.equal(expectedContent1)
+
+ // Click on second tab
+ const tab2 = getByRole('tab', {name: 'Tab 2'})
+ expect(tab2).to.have.attribute('aria-selected', 'false')
+ fireEvent.click(tab2)
+ const content2 = getByRole('tabpanel')
+
+ // Then
+ expect(tab2).to.have.attribute('aria-selected', 'true')
+ expect(content2.innerHTML).to.equal(expectedContent2)
+ })
})
describe('moleculeTabsTypes', () => {
diff --git a/components/molecule/textareaField/UXDEF.md b/components/molecule/textareaField/UXDEF.md
deleted file mode 100644
index c8baea22ad..0000000000
--- a/components/molecule/textareaField/UXDEF.md
+++ /dev/null
@@ -1,99 +0,0 @@
-# SUI - Text Area field
-T*ext Area is the text field that users fill in with free alphanumeric text. Usually it is used to write medium to long texts, such as answers, long explanations or letters.*
-
-*It should also be noted that Text Area it is a molecule because always is combined with other atoms like Label, Placeholder or HelpText.*
-
-| Status | Complete |
-| :---- | :---- |
-| Current version | 2.0 |
-| Category | Molecule |
-| Owners | UX @David G , @Daniel P , FE @Julian G|
-
-## Structure
-
-- This component almost always it works with [Label](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT) & [Placeholder](https://paper.dropbox.com/doc/SUI-Form-placeholder--AK5EFuDlc~Bh5FlpHa9XLyQkAg-IqZya9lRXdMvFm0PkT1Vu) atoms and usually it is combined with other atoms like [HelpText](https://paper.dropbox.com/doc/SUI-HelpText-Validation--ALVgLbb5nsUmflT9ZK8XqyiyAg-RZpyYPWRNVPzdC9fVrCtc) or [Buttons](https://paper.dropbox.com/doc/SUI-Buttons-AvdtvjMAqbsFkTYSz3egT).
-- Text Area, by default, have a length that is auto-adjustable to the content written by the user (according to the page grid).
-- As an optional feature it can have an “auto-expandable” function at the right bottom corner, to resize it manually. It is recommendable to use the browser’s native one.
-- If the text written by the user is longer than the visible area (the box of the text area), then the scroll bar appears.
-
-
-
-## Behavior
-
-### States
-- TextArea have the 3 basic states: default, focused and disabled.
- - Should be noted that [Placeholder](https://paper.dropbox.com/doc/SUI-Form-placeholder--AK5EFuDlc~Bh5FlpHa9XLyQkAg-IqZya9lRXdMvFm0PkT1Vu) atom disappear when the Input is on focus status. This behavior helps the user understand that the field is ready to write on it.
-- For the first iteration, the focus will be the native browser focus.
-
-
-### Scroll & resize
-- There are 2 possibilities of default size. We will measure it by the number of text lines.
- Options to choose:
- - Short: 5 text lines high
- - Long: 7 text lines high
-- Once the user writes more text lines than the lines shown by default, the scroll function will start to work, including the right side scroll bar.
-- On the other hand, as seen under Structure, an optional (and recommended) “auto-expandable” function can be added to let the user modify the text area size manually.
-- The “auto-expand” can modify the height and length, but it is recommended only to modify the height (for the grid adjustment and to make it easier for the user).
-
-
-
-## Content
-
-We recommend to always use a [Placeholder](https://paper.dropbox.com/doc/SUI-Form-placeholder--ALcBKGls8YGd6z2D3u_cnE8MAg-IqZya9lRXdMvFm0PkT1Vu) atom that indicates what users are being asked.
-Remember, Text Area field can be combined with [HelpText](https://paper.dropbox.com/doc/SUI-HelpText-Validation-RZpyYPWRNVPzdC9fVrCtc)
-
-## Visual
-
-Here it is showed only the Input measures.
-To see the margins between Input field and other atoms like [Label](https://paper.dropbox.com/doc/SUI-Label--AMZqSJ24S1u4zxxMfUb4GEpHAg-px3mcUaTHVqlGngk2JNPT), [Placeholder](https://paper.dropbox.com/doc/SUI-Form-placeholder--AMZT19S4CalH3esz_tCA1zpeAg-IqZya9lRXdMvFm0PkT1Vu) or [HelpText](https://paper.dropbox.com/doc/SUI-HelpText-RZpyYPWRNVPzdC9fVrCtc), please check those components.
-
-Remember, the Scrollbar and Resize grabber will be the browser’s default one.
-
-
-
-## Responsive
-
-- The composition of different inputs can be displayed in a grid position when viewed on a desktop, but it must be displayed in a vertical position when it moves to small screens.
-- The screen size will determine when to change to vertical position display.
-
-Check the [Label](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT) definition to see how it behaves in responsive.
-
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-3. Focus should be visible
-6. Information should not be supported only by one sense
-8. Content should be written in common language
-10. Clickable area should be sufficient
-12. Controls should be correctly labelled
-13. Errors should be prevented
-15. Content should be able to increase in size
-16. Text should always be displayed as text
-
-## Links
-
-- Zeplin: http://zpl.io/a8Em4MX
-
-## Specific notes per vertical
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/29l4Lke
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.0
-
-- 22/11/2017 Creation of the atom
-- 23/08/2018 Iteration. Now is going more simple to work more freely with other components. (decompose)
diff --git a/components/molecule/thumbnail/.npmignore b/components/molecule/thumbnail/.npmignore
index 83de8b2bf3..c84a79ff92 100644
--- a/components/molecule/thumbnail/.npmignore
+++ b/components/molecule/thumbnail/.npmignore
@@ -1,4 +1,3 @@
-assets
demo
src
test
diff --git a/components/molecule/thumbnail/README.md b/components/molecule/thumbnail/README.md
index 4e3140da10..158080ac10 100644
--- a/components/molecule/thumbnail/README.md
+++ b/components/molecule/thumbnail/README.md
@@ -2,8 +2,6 @@
> Thumbnails are images that appear on cards, highlights or detail pages. They can be shown in different sizes and appearances. There are basically two variants: logos for company logos and avatars for person images.
-
-
## Installation
```sh
diff --git a/components/molecule/thumbnail/UXDEF.md b/components/molecule/thumbnail/UXDEF.md
deleted file mode 100644
index b90fb5750a..0000000000
--- a/components/molecule/thumbnail/UXDEF.md
+++ /dev/null
@@ -1,212 +0,0 @@
-# SUI - Thumbnails
-*Thumbnails are images that appear on cards, highlights or detail pages. They can be shown in different sizes and appearances. There are basically two variants: logos for company logos and avatars for person images.*
-
-| Status | Complete |
-| :---- | :---- |
-| Current version | 1.0 |
-| Category | Molecule |
-| Owners | UX @María P, @Daniel P, FE @Adrià V|
-
-## Structure
-
-A thumbnail is composed by:
-
-- An image (mandatory)
-- A text that appears over a background below the image (optional).
-
-The text is optional but it only applies when the image has a link, because it serves to clarify its destination. The link is applied to the whole area: both to the image and the text with its background. The text is not shown when the Small and Xsmall sizes are set.
-
-
-
-### Integrated in other components
-
-This component can be integrated into cards and other components.
-
-
-
-## Behavior
-
-### Click / Tap
-
-The image can contain a link.
-
-### Upload & Publishing
-
-The image on the marketplace can have a different proportion than the original. If the original is landscape or portrait and the published one has the same height and width the treatment will be the following:
-
-- Scale 100% on the shortest side:
-- if it’s landscape, scale 100% vertically.
-- if it’s portrait, scale 100% horizontally.
-- Centered both in vertical and horizontal.
-- The largest side will be cropped:
-- if it’s landscape, left and right sides will be cropped.
-- if it’s portrait, top and bottom will be cropped.
-
-
-
-
-
-### Empty
-
-When a thumbnail has not been filled it should show a placeholder with an icon indicating the information that should appear in its place.
-
-
-
-### Focus
-
-When the component is focused, the focus should be clearly visible.
-
-
-
-### Loading
-
-There are two different options that could be applied while the images are being loaded. Progressive loading is recommended over Skeleton.
-
-**Progressive loading**
-While the image is being loaded in order to ensure the legibility of the content inside of it we recommend to show a lower version of it, as it is done in Medium:
-https://jmperezperez.com/medium-image-progressive-loading-placeholder/
-
-**Skeleton**
-If progressive loading is not possible, then a skeleton should be shown while the image is being loaded. The occupied space should be exactly the same to offer a preview of the content and avoid it to bump once it is loaded.
-
-
-
-### Error
-
-When the images cannot be loaded we will show the alternative text of the image and an icon depicting a unavailable image. Depending on the size of the image we will display both or just one of them:
-
-
-
-## Types
-
-Thumbnails can appear in different formats.
-
-### Shape
-
-It can be squared or circled. It is recommended to use squared shape for logos and circled shapes for avatars.
-
-
-
-### Proportions
-
-It can have same height and width (1:1 aspect ratio) or it can be landscape (16:9 or 4:3 aspect ratio).
-
-
-
-### Attributes
-
-Thumbnails can have different visual treatments:
-
-- Padding: 3px.
-- Border: 1px, color: gray_l3.
-- Shadow: set to 0 by default.
-## Sizes
-
-Thumbnails are available in 4 different sizes. This sizes will be adapted depending on the screen resolution (more on Responsive).
-
-- Xsmall
-- Small
-- Medium
-- Large
-## Text background
-
-If a text is included a background color should appear as well. Enough contrast should be provided to ensure accessibility (more on Accessibility).
-
-## Contents
-
-It is recommended that the optional text is no longer than 1 line of text.
-
-You can't use a thumbnail as a image panel.
-
-
-
-
-
-
-
-
-## Responsive
-
-The four different sizes are adapted depending on the screen resolution.
-
-### 1:1 ratio
-| | < 768 pixels | | ≥ 768 pixels | |
-| ------ | ------------ | ------ | ------------ | ------ |
-| | Width | Height | Width | Height |
-| Xsmall | 32 | 32 | 40 | 40 |
-| Small | 40 | 40 | 48 | 48 |
-| Medium | 72 | 72 | 72 | 72 |
-| Large | 96 | 96 | 144 | 144 |
-
-### 4:3 ratio
-| | < 768 pixels | | ≥ 768 pixels | |
-| ------ | ------------ | ------ | ------------ | ------ |
-| | Width | Height | Width | Height |
-| Xsmall | 32 | 24 | 40 | 30 |
-| Small | 40 | 30 | 48 | 36 |
-| Medium | 72 | 54 | 72 | 54 |
-| Large | 96 | 72 | 144 | 108 |
-
-### 16:9 ratio
-| | < 768 pixels | | ≥ 768 pixels | |
-| ------ | ------------ | ------ | ------------ | ------ |
-| | Width | Height | Width | Height |
-| Xsmall | 32 | 18 | 40 | 23* |
-| Small | 40 | 23* | 48 | 27 |
-| Medium | 72 | 41* | 72 | 41* |
-| Large | 96 | 54 | 144 | 81 |
-
-
-In these cases height is rounded up.
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-7. Interactive elements and images should be correctly labelled
-
- The image should detail its content.
-
-14. Content should be able to increase in size
-
- When the text is increased the optional text should not break the design of the component.
-
-15. Content should have enough contrast to its background
-
- Ensure enough contrast between the text and the image using a background with a proper contrast ratio.
- - Check WCAG 2.0 AA contrast ratios here: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
- - Use this tool to check contrast ratios for given colors: http://dasplankton.de/ContrastA/
-
-And, if the image contains a link it should follow these recommendations:
-1. Every interactive element should be focusable
-2. Focus order should match visual order
-3. Focus should be visible
-7. Interactive elements and images should be correctly labelled
-
-## Links
-
-- Componente Rubik: http://www.design.infojobs.net/rubik/html/content-media.html
-- Demo del componente SUI: https://sui-components.surge.sh/workbench/thumbnail/basic/demo
-- Benchmark en IJ: https://confluence.schibsted.io/pages/viewpage.action?pageId=55750576
-- Zeplin: https://zpl.io/adRJyzl
-
-## Specific notes per vertical
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/2vy1xMv
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.0
-
-- Nothing here yet
diff --git a/components/molecule/validationCode/.npmignore b/components/molecule/validationCode/.npmignore
index 83de8b2bf3..c84a79ff92 100644
--- a/components/molecule/validationCode/.npmignore
+++ b/components/molecule/validationCode/.npmignore
@@ -1,4 +1,3 @@
-assets
demo
src
test
diff --git a/components/molecule/validationCode/README.md b/components/molecule/validationCode/README.md
index d5aeb43527..606582035f 100644
--- a/components/molecule/validationCode/README.md
+++ b/components/molecule/validationCode/README.md
@@ -2,8 +2,6 @@
> MoleculeValidationCode implements the AtomMoleculeValidationCode and adds it more features such as, clear button, send button and resend button. It also provides a label to provide information to the user.
-
-
## Installation
```sh
diff --git a/components/primitive/injector/.npmignore b/components/primitive/injector/.npmignore
index 83de8b2bf3..c84a79ff92 100644
--- a/components/primitive/injector/.npmignore
+++ b/components/primitive/injector/.npmignore
@@ -1,4 +1,3 @@
-assets
demo
src
test
diff --git a/components/primitive/injector/README.md b/components/primitive/injector/README.md
index 86af4cf273..e0d3d43863 100644
--- a/components/primitive/injector/README.md
+++ b/components/primitive/injector/README.md
@@ -2,8 +2,6 @@
> Description
-
-
## Installation
```sh
+
-
+
Bottom
diff --git a/components/atom/pinInput/CHANGELOG.md b/components/atom/pinInput/CHANGELOG.md
index 28495d9be8..1c14c4970d 100644
--- a/components/atom/pinInput/CHANGELOG.md
+++ b/components/atom/pinInput/CHANGELOG.md
@@ -1,5 +1,15 @@
# CHANGELOG
+# 1.11.0 (2022-10-11)
+
+
+### Features
+
+* **components/atom/pinInput:** create new token to be able to overwrite the placeholder color ([513ae8a](https://github.com/SUI-Components/sui-components/commit/513ae8acc0728d6aa9e1a5780871985de2b52b3d))
+* **components/atom/pinInput:** replace inherit by auto ([c2f410e](https://github.com/SUI-Components/sui-components/commit/c2f410e589644bcbb1a26c5c107a73f336442d82))
+
+
+
# 1.10.0 (2022-09-05)
diff --git a/components/atom/pinInput/package.json b/components/atom/pinInput/package.json
index 2a30c11ba6..107a9be070 100644
--- a/components/atom/pinInput/package.json
+++ b/components/atom/pinInput/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-atom-pin-input",
- "version": "1.10.0",
+ "version": "1.11.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/atom/pinInput/src/PinInputField.scss b/components/atom/pinInput/src/PinInputField.scss
index 9ab9a55566..0617600774 100644
--- a/components/atom/pinInput/src/PinInputField.scss
+++ b/components/atom/pinInput/src/PinInputField.scss
@@ -10,6 +10,10 @@
padding: 0;
text-align: center;
+ &::placeholder {
+ color: $c-pin-input-placeholder;
+ }
+
&:focus {
border: $bdw-s solid $c-primary-dark;
cursor: text;
diff --git a/components/atom/pinInput/src/config.scss b/components/atom/pinInput/src/config.scss
index 6ddd06549d..ac371a24cd 100644
--- a/components/atom/pinInput/src/config.scss
+++ b/components/atom/pinInput/src/config.scss
@@ -4,6 +4,7 @@ $bdw-pin-input-field: $bdw-s !default;
$fw-pin-input-field: $fw-regular !default;
$lh-pin-input-field: $lh-m !default;
$m-pin-input-children: $m-m !default;
+$c-pin-input-placeholder: auto !default;
$s-pin-input-field: (
// 64px
diff --git a/components/atom/popover/CHANGELOG.md b/components/atom/popover/CHANGELOG.md
index 403d0c5c29..9a7324af41 100644
--- a/components/atom/popover/CHANGELOG.md
+++ b/components/atom/popover/CHANGELOG.md
@@ -1,5 +1,44 @@
# CHANGELOG
+# 3.17.0 (2022-10-25)
+
+
+
+# 3.16.0 (2022-10-25)
+
+
+### Bug Fixes
+
+* **components/atom/popover:** arrow border color inherit from custom type ([4099bf8](https://github.com/SUI-Components/sui-components/commit/4099bf83b594a9dc4f20db4e8ef59257059db60d))
+
+
+
+# 3.15.0 (2022-10-18)
+
+
+### Bug Fixes
+
+* **components/atom/popover:** condition error ([4354727](https://github.com/SUI-Components/sui-components/commit/4354727a2456f8b349e191755bcd8b1c21a6b68a))
+
+
+
+# 3.14.0 (2022-10-18)
+
+
+
+# 3.13.0 (2022-10-07)
+
+
+### Features
+
+* **components/atom/popover:** add icon color type ([a6dac91](https://github.com/SUI-Components/sui-components/commit/a6dac91162387b0aa7e5fb99557d76f061ba034b))
+
+
+
+# 3.12.0 (2022-10-06)
+
+
+
# 3.11.0 (2022-06-20)
diff --git a/components/atom/popover/demo/ArticleType.js b/components/atom/popover/demo/ArticleType.js
deleted file mode 100644
index 6c6e07f4bb..0000000000
--- a/components/atom/popover/demo/ArticleType.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import AtomPopover from 'components/atom/popover/src/index.js'
-import PropTypes from 'prop-types'
-
-import {Article, Button, H2, Paragraph} from '@s-ui/documentation-library'
-
-const ArticleType = ({className, content: Content}) => {
- return (
-
-
-
-
-
- )
-}
-
-ArticleType.propTypes = {
- className: PropTypes.string,
- content: PropTypes.elementType
-}
-
-export default ArticleType
diff --git a/components/atom/popover/demo/Content.js b/components/atom/popover/demo/Content.js
new file mode 100644
index 0000000000..e770664590
--- /dev/null
+++ b/components/atom/popover/demo/Content.js
@@ -0,0 +1,14 @@
+import {forwardRef} from 'react'
+
+const Content = forwardRef((props, forwardedRef) => {
+ return (
+
+
(
diff --git a/components/atom/popover/demo/ArticleCloseIcon.js b/components/atom/popover/demo/articles/ArticleCloseIcon.js
similarity index 89%
rename from components/atom/popover/demo/ArticleCloseIcon.js
rename to components/atom/popover/demo/articles/ArticleCloseIcon.js
index 9893e9fa3a..c6da04bba6 100644
--- a/components/atom/popover/demo/ArticleCloseIcon.js
+++ b/components/atom/popover/demo/articles/ArticleCloseIcon.js
@@ -1,8 +1,5 @@
import {useState} from 'react'
-import AtomPopover, {
- atomPopoverTriggers
-} from 'components/atom/popover/src/index.js'
import PropTypes from 'prop-types'
import {
@@ -16,7 +13,8 @@ import {
RadioButtonGroup
} from '@s-ui/documentation-library'
-import IconClose from './Icons/IconClose.js'
+import AtomPopover, {atomPopoverTriggers} from '../../src/index.js'
+import IconClose from '../Icons/IconClose.js'
const ArticleCloseIcon = ({className, content: Content}) => {
const [isVisible, setIsVisible] = useState('true')
@@ -43,7 +41,7 @@ const ArticleCloseIcon = ({className, content: Content}) => {
onClick={() => setIsVisible('false')}
/>
-
+
+
+ You can even define some other extra types defining your own vertical
+ custom types and looping this defined keys through scss.
+
+
+
+ |
+
+
+ |
+
+
+ )
+}
+
+ArticleType.propTypes = {
+ className: PropTypes.string,
+ content: PropTypes.elementType
+}
+
+export default ArticleType
diff --git a/components/atom/popover/demo/index.js b/components/atom/popover/demo/index.js
index 3bc77d9112..26c0c83047 100644
--- a/components/atom/popover/demo/index.js
+++ b/components/atom/popover/demo/index.js
@@ -1,33 +1,19 @@
/* eslint-disable react/prop-types, no-unused-vars, no-console */
-import {forwardRef} from 'react'
-
import {Anchor, H1, Paragraph} from '@s-ui/documentation-library'
-import ArticleArrow from './ArticleArrow.js'
-import ArticleBehavior from './ArticleBehavior.js'
-import ArticleCloseIcon from './ArticleCloseIcon.js'
-import ArticleDefault from './ArticleDefault.js'
-import ArticlePosition from './ArticlePosition.js'
-import ArticleRef from './ArticleRef.js'
-import ArticleType from './ArticleType.js'
+import ArticleArrow from './articles/ArticleArrow.js'
+import ArticleBehavior from './articles/ArticleBehavior.js'
+import ArticleCloseIcon from './articles/ArticleCloseIcon.js'
+import ArticleDefault from './articles/ArticleDefault.js'
+import ArticlePosition from './articles/ArticlePosition.js'
+import ArticleRef from './articles/ArticleRef.js'
+import ArticleType from './articles/ArticleType.js'
+import Content from './Content.js'
+import {CLASS_SECTION} from './settings.js'
import './index.scss'
-const BASE_CLASS_DEMO = `DemoAtomPopover`
-const CLASS_SECTION = `${BASE_CLASS_DEMO}-section`
-
-const Content = forwardRef((props, forwardedRef) => {
- return (
-
)
diff --git a/components/molecule/selectPopover/demo/index.scss b/components/molecule/selectPopover/demo/index.scss
index ba21ea55f6..ef14732cef 100644
--- a/components/molecule/selectPopover/demo/index.scss
+++ b/components/molecule/selectPopover/demo/index.scss
@@ -22,4 +22,10 @@
}
}
}
+
+ &-overlay {
+ &-content {
+ position: relative;
+ }
+ }
}
diff --git a/components/molecule/selectPopover/demo/package.json b/components/molecule/selectPopover/demo/package.json
index fcdfd82e15..59d1dd130c 100644
--- a/components/molecule/selectPopover/demo/package.json
+++ b/components/molecule/selectPopover/demo/package.json
@@ -11,8 +11,9 @@
"author": "",
"license": "ISC",
"dependencies": {
+ "@s-ui/react-hook-use-portal": "1",
"@s-ui/react-icons": "1",
- "@s-ui/react-molecule-dropdown-option": "1",
+ "@s-ui/react-molecule-dropdown-option": "2",
"@s-ui/react-molecule-modal": "1",
"@s-ui/react-molecule-select": "1"
}
diff --git a/components/molecule/selectPopover/package.json b/components/molecule/selectPopover/package.json
index cb196d2e44..02fcdac28f 100644
--- a/components/molecule/selectPopover/package.json
+++ b/components/molecule/selectPopover/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-molecule-select-popover",
- "version": "1.33.0",
+ "version": "1.37.0",
"description": "",
"main": "lib/index.js",
"scripts": {
@@ -9,7 +9,8 @@
"build:styles": "cpx './src/**/*.scss' ./lib"
},
"dependencies": {
- "@s-ui/react-atom-button": "1"
+ "@s-ui/react-atom-button": "1",
+ "@s-ui/react-hook-use-portal": "1"
},
"peerDependencies": {
"@s-ui/component-dependencies": "1"
diff --git a/components/molecule/selectPopover/src/config.js b/components/molecule/selectPopover/src/config.js
index 6d489208f7..caec4827f5 100644
--- a/components/molecule/selectPopover/src/config.js
+++ b/components/molecule/selectPopover/src/config.js
@@ -13,6 +13,12 @@ export const PLACEMENTS = {
RIGHT: 'right'
}
+export const OVERLAY_TYPES = {
+ DARK: 'dark',
+ LIGHT: 'light',
+ NONE: 'none'
+}
+
const placements = {
[PLACEMENTS.AUTO_START]: PLACEMENTS.LEFT,
[PLACEMENTS.AUTO_END]: PLACEMENTS.RIGHT,
diff --git a/components/molecule/selectPopover/src/index.js b/components/molecule/selectPopover/src/index.js
index 3ee317482f..25fbffa353 100644
--- a/components/molecule/selectPopover/src/index.js
+++ b/components/molecule/selectPopover/src/index.js
@@ -1,11 +1,25 @@
-import {cloneElement, useCallback, useEffect, useRef, useState} from 'react'
+import {
+ cloneElement,
+ Fragment,
+ useCallback,
+ useEffect,
+ useRef,
+ useState
+} from 'react'
import cx from 'classnames'
import PropTypes from 'prop-types'
import Button, {atomButtonDesigns} from '@s-ui/react-atom-button'
+import usePortal from '@s-ui/react-hook-use-portal'
-import {BASE_CLASS, getPlacement, PLACEMENTS, SIZES} from './config.js'
+import {
+ BASE_CLASS,
+ getPlacement,
+ OVERLAY_TYPES,
+ PLACEMENTS,
+ SIZES
+} from './config.js'
function usePrevious(value) {
const ref = useRef()
@@ -36,6 +50,8 @@ function MoleculeSelectPopover({
onClose = () => {},
onCustomAction = () => {},
onOpen = () => {},
+ overlayContentRef = {},
+ overlayType = OVERLAY_TYPES.NONE,
placement,
renderContentWrapper: renderContentWrapperProp,
renderSelect: renderSelectProp,
@@ -51,52 +67,50 @@ function MoleculeSelectPopover({
const previousIsOpen = usePrevious(isOpen)
const selectRef = useRef()
const contentWrapperRef = useRef()
+ const {Portal} = usePortal({target: overlayContentRef.current})
- const getPopoverClassName = () => {
- const {left, right} =
- contentWrapperRef.current?.getBoundingClientRect() || {}
- const outFromTheLeftSide = left < 0
- const outFromTheRightSide =
- right > (window.innerWidth || document.documentElement.clientWidth)
-
- if (outFromTheRightSide) {
- return cx(`${popoverBaseClass}`, `${popoverBaseClass}--left`)
- } else if (outFromTheLeftSide) {
- return cx(`${popoverBaseClass}`, `${popoverBaseClass}--right`)
- }
-
- return popoverClassName
- }
+ const hasOverlay =
+ Boolean(overlayContentRef.current) && overlayType !== OVERLAY_TYPES.NONE
useEffect(() => {
/**
* Only run open events:
* - After first render
* - When isOpen actually changes
+ * - When placement changes
**/
if (typeof previousIsOpen === 'undefined' || isOpen === previousIsOpen) {
return
}
- if (
- isOpen &&
- [PLACEMENTS.AUTO_END, PLACEMENTS.AUTO_START].includes(placement)
- ) {
- setPopoverClassName(getPopoverClassName())
- }
-
- const openEvent = isOpen ? onOpen : onClose
- openEvent()
- }, [isOpen, onClose, onOpen, previousIsOpen, getPopoverClassName])
+ const getPopoverClassName = () => {
+ if (
+ isOpen &&
+ [PLACEMENTS.AUTO_END, PLACEMENTS.AUTO_START].includes(placement)
+ ) {
+ const {left, right} =
+ contentWrapperRef.current?.getBoundingClientRect() || {}
+ const outFromTheLeftSide = left < 0
+ const outFromTheRightSide =
+ right > (window.innerWidth || document.documentElement.clientWidth)
+
+ if (outFromTheRightSide) {
+ return cx(`${popoverBaseClass}`, `${popoverBaseClass}--left`)
+ } else if (outFromTheLeftSide) {
+ return cx(`${popoverBaseClass}`, `${popoverBaseClass}--right`)
+ }
+ }
- useEffect(() => {
- setPopoverClassName(
- cx(
+ return cx(
`${popoverBaseClass}`,
`${popoverBaseClass}--${getPlacement(placement)}`
)
- )
- }, [placement])
+ }
+
+ setPopoverClassName(getPopoverClassName())
+ const openEvent = isOpen ? onOpen : onClose
+ openEvent()
+ }, [isOpen, onClose, onOpen, previousIsOpen, placement])
const selectClassName = cx(
`${BASE_CLASS}-select`,
@@ -258,11 +272,23 @@ function MoleculeSelectPopover({
renderContentWrapperProp && `${BASE_CLASS}--hasCustomWrapper`
)
+ const overlayClassNames = cx(
+ `${BASE_CLASS}-overlay`,
+ `${BASE_CLASS}-overlay--${overlayType}`
+ )
+
return (
-
-
- You can even define some other extra types defining your own vertical
- custom types and looping this defined keys through scss.
-
-
-
- Custom Types
-
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id mauris
+ ornare, imperdiet nunc a, interdum dolor.
+
+
+ )
+})
+
+export default Content
diff --git a/components/atom/popover/demo/ArticleArrow.js b/components/atom/popover/demo/articles/ArticleArrow.js
similarity index 87%
rename from components/atom/popover/demo/ArticleArrow.js
rename to components/atom/popover/demo/articles/ArticleArrow.js
index 3b962d2c13..d05594c78c 100644
--- a/components/atom/popover/demo/ArticleArrow.js
+++ b/components/atom/popover/demo/articles/ArticleArrow.js
@@ -1,8 +1,5 @@
import {useState} from 'react'
-import AtomPopover, {
- atomPopoverTriggers
-} from 'components/atom/popover/src/index.js'
import PropTypes from 'prop-types'
import {
@@ -15,7 +12,8 @@ import {
RadioButtonGroup
} from '@s-ui/documentation-library'
-import ReMountDebounced from './ReMountDebounced.js'
+import AtomPopover, {atomPopoverTriggers} from '../../src/index.js'
+import ReMountDebounced from '../ReMountDebounced.js'
const ArticleArrow = ({className, content: Content}) => {
const [isHidden, setIsHidden] = useState('false')
@@ -39,7 +37,7 @@ const ArticleArrow = ({className, content: Content}) => {
onClick={() => setIsHidden('false')}
/>
- Custom Types
+
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id mauris
- ornare, imperdiet nunc a, interdum dolor.
-
-
- )
-})
-
const Demo = () => {
return (
diff --git a/components/atom/popover/demo/index.scss b/components/atom/popover/demo/index.scss
index 4b02526904..4d4706421a 100644
--- a/components/atom/popover/demo/index.scss
+++ b/components/atom/popover/demo/index.scss
@@ -1,13 +1,21 @@
@import '~@s-ui/theme/lib/index';
+@import '../src/styles/settings';
+
$popover-type: (
dark: (
bgc: $c-gray-dark-3,
- bdc: $c-gray-dark-3
+ bdc: $c-gray-dark-3,
+ c-icon: $c-white
+ ),
+ alert: (
+ bgc: $c-alert-dark-3,
+ bdc: $c-alert-dark-3,
+ c-icon: $c-white
)
);
-@import '../src/index';
+@import '../src/styles/index';
.DemoAtomPopover-section {
.blink {
diff --git a/components/atom/popover/demo/settings.js b/components/atom/popover/demo/settings.js
new file mode 100644
index 0000000000..fb4a2d4a99
--- /dev/null
+++ b/components/atom/popover/demo/settings.js
@@ -0,0 +1,2 @@
+const BASE_CLASS_DEMO = `DemoAtomPopover`
+export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section`
diff --git a/components/atom/popover/package.json b/components/atom/popover/package.json
index a3f91f9816..b7d639afc3 100644
--- a/components/atom/popover/package.json
+++ b/components/atom/popover/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-atom-popover",
- "version": "3.11.0",
+ "version": "3.17.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/atom/popover/src/PopoverExtendChildren.js b/components/atom/popover/src/PopoverExtendChildren.js
index b29afb7935..dca599bb91 100644
--- a/components/atom/popover/src/PopoverExtendChildren.js
+++ b/components/atom/popover/src/PopoverExtendChildren.js
@@ -1,37 +1,23 @@
-import {Children, cloneElement, forwardRef} from 'react'
+import {cloneElement, forwardRef} from 'react'
import PropTypes from 'prop-types'
-const PopoverExtendChildren = forwardRef(({children}, targetRef) => {
- const onClickHandler = handler => ev => {
- typeof handler === 'function' && handler(ev)
- }
- const childrenOnly =
- typeof children === 'string'
- ? [{children}]
- : Children.only(children)
- const response = Children.map(childrenOnly, (child, key) => {
- const {onClick} = child.props
- const attrs = {
- onClick: onClickHandler(onClick)
- }
- attrs.ref = node => {
- ;[child.ref, targetRef].forEach(ref => {
- if (typeof ref === 'function') {
- ref(node)
- } else if (ref !== null) {
- ref.current = node
- }
- })
- }
- attrs.key = key
- return cloneElement(child, attrs)
+import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs'
+
+import {getChildrenAsReactNode} from './config.js'
+
+const PopoverExtendChildren = forwardRef((props, forwardedRef) => {
+ const childrenOnly = getChildrenAsReactNode(props.children)
+ const {ref} = childrenOnly
+ return cloneElement(childrenOnly, {
+ ref: useMergeRefs(forwardedRef, ref)
})
- return response
})
+PopoverExtendChildren.displayName = 'PopoverExtendChildren'
+
PopoverExtendChildren.propTypes = {
- children: PropTypes.node.isRequired
+ children: PropTypes.element.isRequired
}
export default PopoverExtendChildren
diff --git a/components/atom/popover/src/config.js b/components/atom/popover/src/config.js
index ff75585874..5782e8cc73 100644
--- a/components/atom/popover/src/config.js
+++ b/components/atom/popover/src/config.js
@@ -1,3 +1,5 @@
+import {Children} from 'react'
+
import cx from 'classnames'
import loadable from '@loadable/component'
@@ -47,3 +49,10 @@ export const getClassName = ({defaultClass, type}) => {
[`${defaultClass}--type-${type}`]: Boolean(type)
})
}
+
+export const getChildrenAsReactNode = element =>
+ typeof element === 'string' ? (
+ {element}
+ ) : (
+ Children.only(element)
+ )
diff --git a/components/atom/popover/src/styles/index.scss b/components/atom/popover/src/styles/index.scss
index 27181642ae..1daa189bf8 100644
--- a/components/atom/popover/src/styles/index.scss
+++ b/components/atom/popover/src/styles/index.scss
@@ -27,10 +27,16 @@ $class-arrow: '#{$base-class}-arrow';
@each $type-key, $type-value in $popover-type {
$bgc: map-get($type-value, bgc);
$bdc: map-get($type-value, bdc);
+ $c-icon: map-get($type-value, c-icon);
&--type-#{$type-key} {
background-color: $bgc;
border-color: $bdc;
+ #{$base-class}-closeIcon {
+ svg {
+ fill: $c-icon;
+ }
+ }
}
}
}
@@ -43,7 +49,7 @@ $class-arrow: '#{$base-class}-arrow';
z-index: $z-tooltips;
svg {
- fill: $c-atom-popover-close-icon !important;
+ fill: $c-atom-popover-close-icon;
height: $sz-atom-popover-close-icon;
width: $sz-atom-popover-close-icon;
}
@@ -77,7 +83,8 @@ $class-arrow: '#{$base-class}-arrow';
}
@each $type-key, $type-value in $popover-type {
- &--type-#{$type-key}::after {
+ &--type-#{$type-key}::after,
+ &--type-#{$type-key}::before {
border-bottom-color: map-get($type-value, bgc);
}
}
diff --git a/components/atom/progressBar/CHANGELOG.md b/components/atom/progressBar/CHANGELOG.md
index 4c55159eae..344e25d3fa 100644
--- a/components/atom/progressBar/CHANGELOG.md
+++ b/components/atom/progressBar/CHANGELOG.md
@@ -1,5 +1,9 @@
# CHANGELOG
+# 2.9.0 (2022-10-06)
+
+
+
# 2.8.0 (2022-06-20)
diff --git a/components/atom/progressBar/UXDEF.md b/components/atom/progressBar/UXDEF.md
deleted file mode 100644
index edae70d7e7..0000000000
--- a/components/atom/progressBar/UXDEF.md
+++ /dev/null
@@ -1,128 +0,0 @@
-# SUI - Progress bar
-A Progress bar is a visual representation of a specified wait time or the current status of a process.
-
-| Status | WIP |
-| :---- | :---- |
-| Current version | 1.1|
-| Category | Atom |
-| Owners | UX @cristina.perez, FE @david.martin |
-
-## Structure
-1. Indicator text (optional)
-2. Indicator bar (mandatory)
-3. Track bar (mandatory)
-
-
-
-## Behavior
-
-### When the progress bar is used as a loader (see type loading)
-
-The indicator bar will animate along the length of the track bar until it reaches the same width (100%).
-The indicator text will progressively change to reveal the current state
-
-
-
-### When the progress bar is static (see type static progress status)
-
-The indicator bar will stay still at the point of the track bar to be represented. **This can be achieved using an animation or not** (directly loaded as the final range)
-
-*For example: if we need to represent that a progress is on the 75 of 100, the indicator bar will grow until it reaches the 75% of the track bar width*.
-
-
-
-## Types
-
-### Type loading
-
-Use it to represent a specified wait time of an automatic process.
-**The indicator bar will continue to grow until it reaches 100%**
-Animation is mandatory in this type.
-
-*For example: the loading of an image or a page*.
-
-### Type static progress status
-
-Use it to represent the current status of a process that is not automatic.
-**The indicator will stop when it reaches a certain percentage.**
-Animation is optional in this type.
-
-*For example: to represent the number of products a user/professional has already spent from the total contracted*.
-
-### Type circular
-
-**Size M** It has the label at the center-center of the circle. It can be used to highlight a progress.
-**Size S** It has the label on the right side of the circle and it is used like a Badge.
-The circular progress bar can be Dynamic or Static.
-
-
-
-**States**
-Loading: Start from “0 circle” and add the [motion bellow](https://paper.dropbox.com/doc/SUI-Progress-bar--AZI5~1kdLiIt3AyZk9JgSOt_Ag-hY8y6hoM93YTA69ZMG95t#:h2=Circular-Motion-(optional)) to show the % (motion optional)
-100%: Indicative success state (for “completed process” you can use instead the Success state)
-Success: Completed process state (for “indicative state” you can use instead the 100%) For next iteration. [See bellow](https://paper.dropbox.com/doc/SUI-Progress-bar--AZMN1X7fXxpBuesy1t~wXWkCAg-hY8y6hoM93YTA69ZMG95t#:h2=State-Success)
-Error: Fail Badge. Opctional. You can hide the circular process bar also if you don’t want to show the error state. e.g: for indicative circular process bar
-
-
-
-**Circular Motion (optional)**
-By default, Circular Progress Bar appears with a **Fade of 250ms** and **the circle fill animation & label counter lasts 1250ms to 100%**
-You can customize the fade and the duration from 0ms to the time you need.
-
-
-
-## Contents
-
-A progress bar is made using a track bar, an indicator bar and an optional numeric indicator text. **The indicator text can be placed above or below the track bar an can be presented in two ways** **+**
-
-
-
-## Visual
-
-
-
-
-## Responsive
-
-The bar will adjust to the 100% of the container column in all devices.
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-15. Content should have enough contrast to its background
-16. Text should always be displayed as text
-
-## Links
-
-- Zeplin lineal: https://zpl.io/aX4X4zP
-- Zeplin circular: https://zpl.io/V0qQXlw
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/2Gp7Jpd
-- Milanuncios
-- Motor: https://zpl.io/aNo9Dx9
-
-## Changelog
-
-### Next-up
-
-- **State Success**: Completed process state (for “indicative state” you can use instead the 100%)
-
-
-### Version 1.2
-- Type Circular added
-
-### Version 1.1
-- Component definition
diff --git a/components/atom/progressBar/package.json b/components/atom/progressBar/package.json
index 47e3d64066..93d78fe5df 100644
--- a/components/atom/progressBar/package.json
+++ b/components/atom/progressBar/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-atom-progress-bar",
- "version": "2.8.0",
+ "version": "2.9.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/atom/radioButton/CHANGELOG.md b/components/atom/radioButton/CHANGELOG.md
index e0f53f2f9e..8ea6a9c73e 100644
--- a/components/atom/radioButton/CHANGELOG.md
+++ b/components/atom/radioButton/CHANGELOG.md
@@ -1,5 +1,9 @@
# CHANGELOG
+# 1.10.0 (2022-10-06)
+
+
+
# 1.9.0 (2022-06-20)
diff --git a/components/atom/radioButton/UXDEF.md b/components/atom/radioButton/UXDEF.md
deleted file mode 100644
index ae7c63afa0..0000000000
--- a/components/atom/radioButton/UXDEF.md
+++ /dev/null
@@ -1,146 +0,0 @@
-# SUI - Checkbox & Radio button
-*Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes* ~~*in*~~*on* *the list, so checking one box doesn't uncheck the others.*
-*A stand-alone checkbox is used for a single option that the user can turn on or off.*
-*Each vertical can determine whether or not a stand-alone checkbox will be selected by default*
-
-
-*Radio buttons are used when there is a list of options that mutually exclude each other. In other words, only one option can be selected, automatically deselecting the other preselected options.*
-
-| Status | Complete |
-| :---- | :---- |
-| Current version | 1.0|
-| Category | Atom |
-| Owners | UX @David G, @Chris J, FE |
-
-**Recommendations:**
-
-- Take in consideration the next recommendation when the user must select between different options inside a range:
-- Use **Radio button** when there are 2 to 5 options
-- Use [Data Counter](https://paper.dropbox.com/doc/SUI-Data-counter--AQoAk39iIIJh2YPkZHAMA0OoAg-TqR9qBw4WRr5l5gNMvvEE) when there are 5 to 99 options (numbers)
-- Use [Slider](https://paper.dropbox.com/doc/SUI-Slider--AQrmpIMeYmY2P1q1nQr~vOifAg-gPOtnVwgn8SUMDTjFTZ2q) when there is a big range of options. From 10 to 999 (like 10-20-30-50…)
-- If possible, use Radio buttons instead of Select field (drop-down menus). Radio buttons have a lower cognitive load because they make all of the options permanently visible so that users can easily compare them.
-- Use checkboxes and radio buttons only to change settings, not as action buttons that make something happen.
-
-## Structure
-
-- Checkbox & Radio button are a combination of 2 elements: Icon + Other element (on which makes the action)*.
-*Examples of other elements: Label, card, image, table’s row…
-- Check the [Label definition](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT).
-- At least 2 options must be selected for the radio button. If there is only one, then a Checkbox must be used.
-- It is extremely important to present all the selection options that go together as group and to clearly separate them from the other groups on the same page.
-
-By default, a group of checkboxes or radio buttons are displayed vertically stacked as a list.
-
-
-
-However, a group of checkboxes or radio buttons may also be displayed in a horizontal line.
-
-
-
-Remember to check the [Label d](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT)[z](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT)[efinition](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT).
-
-## Behavior
-
-### State
-
-- The Checkbox & Radio buttons have 5 statuses, because the “selected” status is also included, plus this new one when it is “focused”.
-- For the first iteration, the focus will be the native Browser focus.
-
-
-
-
-
-## Content
-
-Preselected options aren’t recommended, especially in Radio Buttons.
-Pre-selection can be used as an exception only in some cases where the information to select isn’t too important or when the system has complementary information to pre-select one option (for example, geolocalization).
-
-If a checkbox or radio button with an important decision is preselected and the user misses it, the user may move forward with the form with crucial information answered incorrectly.
-
-## Types
-
-### Ad hoc variations
-
-**INFOJOBS**
-Sometimes, checkboxes and radio buttons are used that look different. Boxes that need to be selected are missing and they look more like buttons, but the underlying logic corresponds to these elements.
-
-
-
-**F****OTOCASA** ******&** ******COCHES**
-Sometimes, checkboxes and radio buttons are used that look different. The checkbox or radio-button is hidden, and there is an illustration/image instead above its label.
-
-**Coches.net**
-In coches, the status is represented by its opacity.
-
-
-
-
-**Fotocasa**
-
-
-
-## Visual
-
-Checkbox & Radio buttons have their height defined by the label’s line-height and they are aligned from the center to the icon.
-The margin between each individual Check/Radio~~,~~ displayed vertically, is 16px.
-
-Use standard visual representations. A Checkbox should be a small square that has a checkmark or an X when selected. A Radio button should be a small circle that has a solid circle inside it when selected.
-
-
-
-## Responsive
-
-Checkbox & Radio buttons can be aligned from horizontal to vertical grids, but the Label position must always be kept on the right side of the icon.
-
-
-
-If a list label ~~was~~is very extensive, it will be a double line in responsive.
-
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-1. Every interactive element should be focusable
-2. Focus order should match visual order
-3. Focus should be visible
-6. Information should not be supported only by one sense
-7. Interactive elements and images should be correctly labelled
-8. Content should be written in common language
-10. Clickable area should be sufficient
-
-The active/clickable area has been defined as 24 px (only when it is for text+icon)
-
-
-12. Controls should be correctly labeled
-13. Errors should be prevented
-16. Text should always be displayed as text
-
-## Links
-
-- Benchmark: https://confluence.schibsted.io/display/ST/Benchmark+Form+Elements#
-- Form Elements: https://confluence.schibsted.io/display/ST/Benchmark+Form+Elements#
-- Zeplin: https://zpl.io/bo0eq9Z
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/2Gp7JGJ
-- Milanuncios
-- Motor: https://zpl.io/brElMlr
-
-## Changelog
-
-### Version 1.0
-
-- Component creation
diff --git a/components/atom/radioButton/package.json b/components/atom/radioButton/package.json
index cf7c144b0a..1adf827dc3 100644
--- a/components/atom/radioButton/package.json
+++ b/components/atom/radioButton/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-atom-radio-button",
- "version": "1.9.0",
+ "version": "1.10.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/atom/skeleton/.npmignore b/components/atom/skeleton/.npmignore
index 83de8b2bf3..c84a79ff92 100644
--- a/components/atom/skeleton/.npmignore
+++ b/components/atom/skeleton/.npmignore
@@ -1,4 +1,3 @@
-assets
demo
src
test
diff --git a/components/atom/skeleton/CHANGELOG.md b/components/atom/skeleton/CHANGELOG.md
index ec75638849..c8496da3a9 100644
--- a/components/atom/skeleton/CHANGELOG.md
+++ b/components/atom/skeleton/CHANGELOG.md
@@ -1,5 +1,9 @@
# CHANGELOG
+# 1.6.0 (2022-10-06)
+
+
+
# 1.5.0 (2022-06-20)
diff --git a/components/atom/skeleton/README.md b/components/atom/skeleton/README.md
index 1595593466..9fac3d092d 100644
--- a/components/atom/skeleton/README.md
+++ b/components/atom/skeleton/README.md
@@ -2,8 +2,6 @@
> Skeleton is used to display the loading state of a component while avoiding layout shift.
-
-
## Installation
```sh
diff --git a/components/atom/skeleton/demo/ArticleVariant.js b/components/atom/skeleton/demo/ArticleVariant.js
index d25fb1d0ac..2398e456e0 100644
--- a/components/atom/skeleton/demo/ArticleVariant.js
+++ b/components/atom/skeleton/demo/ArticleVariant.js
@@ -14,6 +14,9 @@ import {
import AtomSkeleton, {atomSkeletonVariants} from '../src/index.js'
+const height = 200
+const width = 200
+
const ArticleVariant = ({className}) => {
const [variantState, setVariantState] = useState()
return (
@@ -44,7 +47,11 @@ const ArticleVariant = ({className}) => {
-
+
+ The
+ {
+ setUncontrolledState(value)
+ console.log(event, {value}) // eslint-disable-line no-console
+ }}
+ />
+
+ )
+}
+
+ArticleSliderFullWidth.propTypes = {
+ className: PropTypes.string
+}
+
+export default ArticleSliderFullWidth
diff --git a/components/atom/slider/demo/index.js b/components/atom/slider/demo/index.js
index d38748836d..97bc185e0a 100644
--- a/components/atom/slider/demo/index.js
+++ b/components/atom/slider/demo/index.js
@@ -8,6 +8,7 @@ import ArticleRangeSteps from './ArticleRangeSteps.js'
import ArticleSliderControlledState from './ArticleSliderControlledState.js'
import ArticleSliderDefault from './ArticleSliderDefault.js'
import ArticleSliderDisabled from './ArticleSliderDisabled.js'
+import ArticleSliderFullWidth from './ArticleSliderFullWidth.js'
import ArticleSliderHideMarks from './ArticleSliderHideMarks.js'
import ArticleSliderInvertColors from './ArticleSliderInvertColors.js'
import ArticleSliderMarks from './ArticleSliderMarks.js'
@@ -42,6 +43,8 @@ const Demo = () => {
+
Component that works as an input that provides a slider a set of two
diff --git a/components/atom/slider/package.json b/components/atom/slider/package.json
index 3e78add891..d4a53b08ef 100644
--- a/components/atom/slider/package.json
+++ b/components/atom/slider/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-atom-slider",
- "version": "1.28.0",
+ "version": "1.31.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/atom/slider/src/index.js b/components/atom/slider/src/index.js
index ace2d5779a..0777dec643 100644
--- a/components/atom/slider/src/index.js
+++ b/components/atom/slider/src/index.js
@@ -8,6 +8,7 @@ import markerFactory from './markerFactory.js'
import {
BASE_CLASS,
CLASS_DISABLED,
+ CLASS_FULLWIDTH,
CLASS_INVERSE,
Label,
Range,
@@ -29,7 +30,8 @@ const AtomSlider = ({
hideMarks = false,
hideTooltip = false,
defaultValue,
- invertColors
+ invertColors,
+ isFullWidth
}) => {
let initialStateValue
const refAtomSlider = useRef()
@@ -82,24 +84,24 @@ const AtomSlider = ({
onChange: handleChange,
onAfterChange: handleAfterChange,
disabled,
- marks: hideMarks ? {} : markerFactory({step, min, max, marks}),
+ marks: hideMarks ? {} : markerFactory({step, min, max, marks, isFullWidth}),
max,
min,
step,
value: internalValue
}
+ const computedClassName = cx(
+ BASE_CLASS,
+ {[CLASS_DISABLED]: disabled},
+ {[CLASS_INVERSE]: invertColors},
+ {[CLASS_FULLWIDTH]: isFullWidth}
+ )
+
// Determine the type of the slider according to the range prop
const Type = range ? Range : Slider
return (
-
-
Full Width
+isFullWidth prop render the slider until box border.
+ +
Range
+
+ {children}
+
+ )
}
ExtendedChildren.propTypes = {
/** selected value */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+ /** checkbox contained in all DropdownOption **/
+ checkbox: PropTypes.bool,
/** each single node to be included in the list (MoleculeDropdownOption) */
- children: PropTypes.node
+ children: PropTypes.node,
+ /** callback on select option **/
+ onSelect: PropTypes.func
}
export default ExtendedChildren
diff --git a/components/molecule/dropdownOption/CHANGELOG.md b/components/molecule/dropdownOption/CHANGELOG.md
index eb92ab45ca..82c2aba37b 100644
--- a/components/molecule/dropdownOption/CHANGELOG.md
+++ b/components/molecule/dropdownOption/CHANGELOG.md
@@ -1,5 +1,23 @@
# CHANGELOG
+# 2.2.0 (2022-10-10)
+
+
+### Features
+
+* **components/molecule/dropdownOption:** Fixed grammar error ([10ff698](https://github.com/SUI-Components/sui-components/commit/10ff698453177b950592d33e981cf964c69b05e4)), closes [#2371](https://github.com/SUI-Components/sui-components/issues/2371)
+
+
+
+# 2.1.0 (2022-10-04)
+
+
+### Features
+
+* **components/molecule/dropdownOption:** change prop naming following conventions ([c6e900e](https://github.com/SUI-Components/sui-components/commit/c6e900e197cccbf7a85e55e7b794333e9da3e997))
+
+
+
# 1.45.0 (2022-07-22)
diff --git a/components/molecule/dropdownOption/UXDEF.md b/components/molecule/dropdownOption/UXDEF.md
deleted file mode 100644
index 567e570577..0000000000
--- a/components/molecule/dropdownOption/UXDEF.md
+++ /dev/null
@@ -1,112 +0,0 @@
-# SUI - Dropdown list
-The dropdown is the component that makes up a list of values that is deployed thanks to the* Select component or others like Autosuggest. Each line of value is composed of one or a few atoms, usually text, although it also allows the use of checkboxes and images.
-
-Dropdown allows the selection of a single unique option and also the multiselection using the* [Checkbox](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button--ALhw~d67i531xdaHHfPTcmlLAg-tmVSbtoe8nZTaZk9mkdsE) atom.
-
-| Status | Work in progress |
-| :---- | :---- |
-| Current version | 1.0 |
-| Category | Molecule |
-| Owners | UX @Marc G, FE Kiko Ruiz Lloret|
-
-## Structure
-
-- Dropdown is a single selectable text or a combination of some elements ([Checkbox](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button--ALhw~d67i531xdaHHfPTcmlLAg-tmVSbtoe8nZTaZk9mkdsE) + selectable text)
-- Dropdown have a flexible width that is adjustable to the content.
-See the Visual>Text specifications for more info about that constrain.
-
-
-
-
-## Behavior
-
-### Showed elements by default
-
-During implementation, there are 3 possibilities for how many elements of the list will be shown.
-
-- **S** Small: < 4 items (Cutting out the last one visually)
-- **M** Medium: < 6 items (Cutting out the last one visually)
-- **L** Large: < 8 items (Cutting out the last one visually)
-
-
-
-
-
-
-
-
-### Recommendation:
-
-Gray out any unavailable options instead of removing them: any items that cannot be selected should remain in view. If disabled items are removed, the interface loses spatial consistency and becomes harder to learn.
-
-## Visual
-
-- Measurements specifications:
- - The inner margin of each row is 16px
- - The maximum height of each row 40px
- - (Check the [Select](https://paper.dropbox.com/doc/SUI-Select--AJtBe_JcZUYGXg00QYmHnQ7oAg-OrlQjuARbK4ZoPdMcSf7p) and [Checkbox & Radio button](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button--AJtrEE8GozBn7va40aJgBWL9Ag-tmVSbtoe8nZTaZk9mkdsE) [definition](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button--AJtrEE8GozBn7va40aJgBWL9Ag-tmVSbtoe8nZTaZk9mkdsE) for more information)
-
-- Text specifications:
- - Just one text line in each row is allowed
- - Use <24 characters max
- - If your item need more than <24 characters, use ellipsis
-
-
-- Dropdown box specifications:
- - Position: Dropdown box should be **top:0px** from the bottom of Select component
- - Shadow: Large
- - Stroke: Thinkness ( 1 ) Color (#BBBBBB) Gray-l2 Position (Inside)
- - Border radius: Custom
- - (Check the [Select](https://paper.dropbox.com/doc/SUI-Select--AJtBe_JcZUYGXg00QYmHnQ7oAg-OrlQjuARbK4ZoPdMcSf7p) for more information)
-
-
-
-
-
-## Responsive
-
-The states (selectable text and checkbox behavior) in mobile are the exactly the same but the **Hover** state canot be displayed
-
-Check [Select](https://paper.dropbox.com/doc/SUI-Select--AJtBe_JcZUYGXg00QYmHnQ7oAg-OrlQjuARbK4ZoPdMcSf7p) for more information
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-- Every interactive element should be focusable
-- Focus order should match visual order
-- Focus should be visible
-- Interactive elements and images should be correctly labelled
-- Interactive elements should be differentiated from content
-- Clickable area should be sufficient
-- Content should have enough contrast to its background
-- Controls should be correctly labelled
-- Content should be able to increase in size
-- Text should always be displayed as text
-- Content should declare the language
-
-## Links
-
-- Zeplin: https://zpl.io/2pBk0XE
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor: https://zpl.io/VQE8YyP
-
-## Changelog
-
-### Version 1.0
-
-- Nothing here yet
diff --git a/components/molecule/dropdownOption/package.json b/components/molecule/dropdownOption/package.json
index 52ccd33a12..3947e7cc52 100644
--- a/components/molecule/dropdownOption/package.json
+++ b/components/molecule/dropdownOption/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-molecule-dropdown-option",
- "version": "1.45.0",
+ "version": "2.2.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/molecule/dropdownOption/src/handlersFactory/index.js b/components/molecule/dropdownOption/src/handlersFactory/index.js
index 4de11bdb91..6037722ea5 100644
--- a/components/molecule/dropdownOption/src/handlersFactory/index.js
+++ b/components/molecule/dropdownOption/src/handlersFactory/index.js
@@ -1,7 +1,7 @@
const handlersFactory = ({
disabled = false,
onSelect,
- onSelectKey = 'Enter',
+ selectKey = 'Enter',
selected,
setInnerSelected,
value
@@ -14,11 +14,11 @@ const handlersFactory = ({
}
const handleKeyDown = ev => {
const {key} = ev
- const isStringOnSelectKey = typeof onSelectKey === 'string'
- const isPressedOnSelectKey = isStringOnSelectKey
- ? key === onSelectKey
- : onSelectKey.includes(key)
- if (isPressedOnSelectKey && !disabled) {
+ const isStringSelectKey = typeof selectKey === 'string'
+ const isPressedSelectKey = isStringSelectKey
+ ? key === selectKey
+ : selectKey.includes(key)
+ if (isPressedSelectKey && !disabled) {
ev.preventDefault()
onSelect(ev, {value, selected: !selected})
setInnerSelected(!selected)
diff --git a/components/molecule/dropdownOption/src/index.js b/components/molecule/dropdownOption/src/index.js
index 2e30941887..52682b4962 100644
--- a/components/molecule/dropdownOption/src/index.js
+++ b/components/molecule/dropdownOption/src/index.js
@@ -35,7 +35,7 @@ const MoleculeDropdownOption = forwardRef(
highlightQuery,
highlightValue,
innerRef,
- onSelectKey,
+ selectKey,
onSelect,
selected,
defaultSelected,
@@ -72,7 +72,7 @@ const MoleculeDropdownOption = forwardRef(
])
const {handleClick, handleKeyDown, handleFocus} = handlersFactory({
disabled,
- onSelectKey,
+ selectKey,
onSelect,
selected: innerSelected,
setInnerSelected,
@@ -164,7 +164,7 @@ MoleculeDropdownOption.propTypes = {
children: PropTypes.node,
/** Contains checkbox */
checkbox: PropTypes.bool,
- /** Addtional props to set up the checkbox */
+ /** Additional props to set up the checkbox */
checkboxProps: PropTypes.object,
/** Is disabled */
disabled: PropTypes.bool,
@@ -179,7 +179,10 @@ MoleculeDropdownOption.propTypes = {
/** Text to be display if used with highlight query with custom content */
highlightValue: PropTypes.string,
/* key to provoke the onClick callback. Valid any value defined here → https://www.w3.org/TR/uievents-key/#named-key-attribute-values */
- onSelectKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+ selectKey: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.arrayOf(PropTypes.string)
+ ]),
/** Custom ref handler that will be assigned to the "target" element */
innerRef: PropTypes.object,
/** Text with css clamp = 2 */
@@ -193,7 +196,7 @@ MoleculeDropdownOption.defaultProps = {
disabled: false,
onSelect: () => {},
defaultSelected: false,
- onSelectKey: 'Enter',
+ selectKey: 'Enter',
innerRef: createRef()
}
export default MoleculeDropdownOption
diff --git a/components/molecule/field/CHANGELOG.md b/components/molecule/field/CHANGELOG.md
index 105767084a..f0cb67242a 100644
--- a/components/molecule/field/CHANGELOG.md
+++ b/components/molecule/field/CHANGELOG.md
@@ -1,5 +1,41 @@
# CHANGELOG
+# 1.38.0 (2022-10-17)
+
+
+### Features
+
+* **components/molecule/field:** Wrap node label in a real label to make the checkbox react to the c ([c0abc42](https://github.com/SUI-Components/sui-components/commit/c0abc420c5cde1b08e77b63179ca288a2cf4be6d))
+
+
+
+# 1.37.0 (2022-10-06)
+
+
+### Features
+
+* **components/molecule/field:** admit react nodes in error alert success and help text ([a946f54](https://github.com/SUI-Components/sui-components/commit/a946f54bae2d472c25efab4a5d9709c021c92834))
+
+
+
+# 1.36.0 (2022-10-04)
+
+
+### Bug Fixes
+
+* **components/molecule/field:** fix lint error ([9f56f8b](https://github.com/SUI-Components/sui-components/commit/9f56f8bfee58813850bc68492b8696d97098f4c4))
+
+
+
+# 1.35.0 (2022-10-04)
+
+
+### Features
+
+* **components/molecule/field:** refactor Label's conditional in field ([605fc5a](https://github.com/SUI-Components/sui-components/commit/605fc5a33e79f3280980ff8f913a73299f086598)), closes [#2334](https://github.com/SUI-Components/sui-components/issues/2334)
+
+
+
# 1.34.0 (2022-06-23)
diff --git a/components/molecule/field/package.json b/components/molecule/field/package.json
index b2203fffc7..202c8213c0 100644
--- a/components/molecule/field/package.json
+++ b/components/molecule/field/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-molecule-field",
- "version": "1.34.0",
+ "version": "1.38.0",
"description": "",
"main": "lib/index.js",
"scripts": {
@@ -11,7 +11,8 @@
"dependencies": {
"@s-ui/react-atom-help-text": "1",
"@s-ui/react-atom-label": "1",
- "@s-ui/react-atom-validation-text": "1"
+ "@s-ui/react-atom-validation-text": "1",
+ "@s-ui/react-primitive-injector": "1"
},
"peerDependencies": {
"@s-ui/component-dependencies": "1"
diff --git a/components/molecule/field/src/Label.js b/components/molecule/field/src/Label.js
index c1ee638a32..0fb449cf04 100644
--- a/components/molecule/field/src/Label.js
+++ b/components/molecule/field/src/Label.js
@@ -1,53 +1,22 @@
-import {cloneElement} from 'react'
-import {isElement} from 'react-is'
-
import PropTypes from 'prop-types'
-import AtomLabel, {AtomLabelTypes} from '@s-ui/react-atom-label'
+import Injector from '@s-ui/react-primitive-injector'
-import {CLASS_NODE_LABEL_CONTAINER} from './config.js'
+import {CLASS_NODE_LABEL_CONTAINER, getLabeled} from './config.js'
-const MoleculeLabel = ({
- label,
- nodeLabel,
- type: typeValidationLabel,
- name,
- onClick
-}) => {
- const innerLabel = () => {
- if (label) {
- return isElement(label) ? (
- cloneElement(label, {
- type: typeValidationLabel,
- name,
- onClick
- })
- ) : (
-
)}
{valueLabel && customProps.handle ? (
<>
)
diff --git a/components/molecule/checkboxField/package.json b/components/molecule/checkboxField/package.json
index 74be695463..190008c691 100644
--- a/components/molecule/checkboxField/package.json
+++ b/components/molecule/checkboxField/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-molecule-checkbox-field",
- "version": "5.0.0",
+ "version": "5.1.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/molecule/collapsible/.npmignore b/components/molecule/collapsible/.npmignore
index 83de8b2bf3..c84a79ff92 100755
--- a/components/molecule/collapsible/.npmignore
+++ b/components/molecule/collapsible/.npmignore
@@ -1,4 +1,3 @@
-assets
demo
src
test
diff --git a/components/molecule/collapsible/README.md b/components/molecule/collapsible/README.md
index ec15130820..1c14bc88f9 100755
--- a/components/molecule/collapsible/README.md
+++ b/components/molecule/collapsible/README.md
@@ -2,8 +2,6 @@
> The collapsible component allows the user to expand or collapse content. We use this component to lightweight the content of a page or section.
-
-
## Installation
```sh
diff --git a/components/molecule/collapsible/UXDEF.md b/components/molecule/collapsible/UXDEF.md
deleted file mode 100644
index 18ac3ebadc..0000000000
--- a/components/molecule/collapsible/UXDEF.md
+++ /dev/null
@@ -1,130 +0,0 @@
-# SUI - Collapsible
-*The collapsible component allows the user to expand or collapse content. We use this component to lightweight the content of a page or section.*
-
-| Status | Complete |
-| :---- | :---- |
-| Current version | 1.2 |
-| Category | Molecule |
-| Owners | UX @David G, @Chris J, @Nilo M, FE @Pablo G )|
-
-## Structure
-
-The collapsible component is conformed by a text link with an arrow icon.
-The arrow icon is aligned on the right of the text.
-
-
-
-## Behavior
-
-When the user clicks on the component, it shows a content that was fully or partially hidden, and changes its state:
-
-- SHOW
- When its content is partially hidden, the arrow icon points down and the copy invites the user to click and view more information.
-- HIDE
- When its content is fully shown, the arrow icon points up and the copy invites the user to click and hide some information.
-
-
-
-
-When the user clicks on the collapsible component when it’s in its “Hide” state, the information previously shown will hide again.
-
-Its default position is the “Show” state.
-
-Its hit area includes both text link and arrow icon.
-
-When changing from “hide” to “show” there can be a transition to both smooth the animation and help the user understand the interaction.
-
-Both components (text and link) are independent in its alignment.
-Example:
-Text paragraph align: left
-Link “Show” align: center.
-
-
-
-### Height
-
-A maximum height for the hidden area can be specified if needed. In that case, hidden area will have its own scroll when shown.
-
-## Types
-
-### Basic Collapsible
-
-When the content is partially hidden.
-
-
-
-### Gradient Collapsible
-
-When the content is partially hidden with a gradient to transparent hiding the last lines. When the content is displayed the gradient will be hidden.
-
-
-
-## Contents
-
-Collapsible labels should be clear enough to allow the user to identify the action with a short titles.
-
-
-
-## Visual
-
-The gradient variation is displayed in position absolute above the top content.
-Collapsible label is the Medium typography size with a Primary color.
-
-
-
-## Responsive
-
-No specific changes beyond adapting to screen surface.
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-1. Every interactive element should be focusable
-2. Focus order should match visual order
-3. Focus should be visible
-
-
-
-6. Information should not be supported only by one sense
-7. Interactive elements and images should be correctly labelled
-8. Content should be written in common language
-10. Clickable area should be sufficient
-
-The active/clickable area is the full width of the Icon + Label and a height of 24px.
-
-
-
-12. Controls should be correctly labelled
-16. Text should always be displayed as text
-
-## Links
-
-- Zeplin: https://zpl.io/2jpXM34
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.ir88o/aXGLA9X
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.2
-
-- Paragraph & link independent alignment
-
-### Version 1.0
-
-- Document creation
diff --git a/components/molecule/dataCounter/UXDEF.md b/components/molecule/dataCounter/UXDEF.md
deleted file mode 100644
index 65be5c05bb..0000000000
--- a/components/molecule/dataCounter/UXDEF.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# SUI - Data counter
-*Data counter is an input type number controller we can use to increase (+1) or decrease (-1) the value of such input.*
-
-| Status | Work in progress |
-| :---- | :---- |
-| Current version | 1.0 |
-| Category | Molecule |
-| Owners | UX @cristina.perez, FE @antonio.ruiz|
-
-**Recommendations:**
-Take in consideration the next recommendation when the user must select between different options inside a range:
-
-- Use [Radio button](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button--AQqbY2r0t_MgG5RI3M9qGWLFAg-tmVSbtoe8nZTaZk9mkdsE) when there are 2 to 5 options
-- Use **Data Counter** when there are 5 to 99 options ****(numbers)
-- Use [Slider](https://paper.dropbox.com/doc/SUI-Slider--AQrmpIMeYmY2P1q1nQr~vOifAg-gPOtnVwgn8SUMDTjFTZ2q) when there is a big range of options. From 10 to 999 (like 10-20-30-50…)
-
-
-## Structure
-
-Data counter is formed by one [label](https://paper.dropbox.com/doc/SUI-Label--ANFTJOijgRQq2Cz51OLPiSbKAg-px3mcUaTHVqlGngk2JNPT), one [input field](https://paper.dropbox.com/doc/SUI-Input-field-WIP--ANHZA9Ohz_~G_P4qyATiXvCfAg-03mHJFkOCjviSZevsaTwm) and two [buttons](https://paper.dropbox.com/doc/SUI-Buttons--ANHN_5l7qgiE53lSHxlmFuqeAg-AvdtvjMAqbsFkTYSz3egT).
-
-
-
-## Behavior
-
-Data counter has two buttons with different actions:
-
-- The one on the left side of the input field **decreases its value by 1** (-1).
-- The one on the right side of the input **increases its value by 1** (+1)
-
-Input field value **can also be changed by the user using the keyboard** so Input field must receive focus as well as the buttons, but **only number values are allowed.**
-
-**Minimum and maximum values will be declared by each marketplace** but it has to be a **maximum two character value.**
-
-**Maximum value** should be communicate with an specific **Help text** that give feedback to the user. In the other hand, the **Increase button** must be disabled at same time.
-
-
-### States
-
-Data counter has **3 basic states**: **default, focused and disabled**. The style of the states will be determined in each component used in this molecule.
-
-
-### Error notification
-
-In case the user tries to **introduce an invalid value we will show him a** [**Help text**](https://paper.dropbox.com/doc/SUI-HelpText--ANo2OYbwMilwHLBRiOkgHIaEAg-RZpyYPWRNVPzdC9fVrCtc) **to communicate the error.** See [Help text documentation](https://paper.dropbox.com/doc/SUI-HelpText--ANo2OYbwMilwHLBRiOkgHIaEAg-RZpyYPWRNVPzdC9fVrCtc) for more info.
-
-
-
-## Contents
-- Label has to respect all label requirements ([see definition](https://paper.dropbox.com/doc/SUI-Label--ANFTJOijgRQq2Cz51OLPiSbKAg-px3mcUaTHVqlGngk2JNPT)).
-- Input field is a **fixed input type**. The length it is calculated adding a fix margin to the left & right side of the content. The minimum and maximum value of the input will be decided by each vertical. **Both medium or small input sizes can be used.** Check [input field definition](https://paper.dropbox.com/doc/SUI-Input-field-WIP--ANHZA9Ohz_~G_P4qyATiXvCfAg-03mHJFkOCjviSZevsaTwm) for details.
-- Buttons have to respect all button requirements ([see definition](https://paper.dropbox.com/doc/SUI-Buttons--ANHN_5l7qgiE53lSHxlmFuqeAg-AvdtvjMAqbsFkTYSz3egT)) and **any size can be used but its height always has to match the input’s height.**
-
-
-
-## Visual
-
-
-## Responsive
-
-This component does not change no matter the device resolution.
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-10. Clickable area should be sufficient
-12. Controls should be correctly labelled
-
-## Links
-
-- Zeplin: https://zpl.io/bz1Lw77
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.0
-
-- Nothing here yet
diff --git a/components/molecule/drawer/README.md b/components/molecule/drawer/README.md
index 708ce31a3a..f516a5f640 100644
--- a/components/molecule/drawer/README.md
+++ b/components/molecule/drawer/README.md
@@ -2,7 +2,6 @@
> Description
-
Drawers can toggle open or closed. Closed by default, the drawer opens
above all other content. The Drawer can be cancelled by clicking the
overlay or pressing the Esc key. They are used to display contextual
diff --git a/components/molecule/drawer/assets/drawer-preview.png b/components/molecule/drawer/assets/drawer-preview.png
deleted file mode 100644
index 5ccabec822..0000000000
Binary files a/components/molecule/drawer/assets/drawer-preview.png and /dev/null differ
diff --git a/components/molecule/dropdownList/CHANGELOG.md b/components/molecule/dropdownList/CHANGELOG.md
index 209f0eb3cf..d8598b0ad5 100644
--- a/components/molecule/dropdownList/CHANGELOG.md
+++ b/components/molecule/dropdownList/CHANGELOG.md
@@ -1,5 +1,24 @@
# CHANGELOG
+# 2.1.0 (2022-10-04)
+
+
+### Features
+
+* **components/molecule/dropdownList:** upgrade dropdownOption version ([6d1788c](https://github.com/SUI-Components/sui-components/commit/6d1788c8b2df523ab806dd88069a380292b48162))
+
+
+
+# 1.33.0 (2022-10-03)
+
+
+### Features
+
+* **components/molecule/dropdownList:** remove unnecesary code ([01d811e](https://github.com/SUI-Components/sui-components/commit/01d811ea44dbda9bd37c2a7edfc4a8016cc546a3))
+* **components/molecule/dropdownList:** replace cloneElement by Injector ([1b461d7](https://github.com/SUI-Components/sui-components/commit/1b461d7b8499e14c27327b9466918e3a055f972b)), closes [#2331](https://github.com/SUI-Components/sui-components/issues/2331)
+
+
+
# 1.32.0 (2022-07-26)
diff --git a/components/molecule/dropdownList/UXDEF.md b/components/molecule/dropdownList/UXDEF.md
deleted file mode 100644
index 567e570577..0000000000
--- a/components/molecule/dropdownList/UXDEF.md
+++ /dev/null
@@ -1,112 +0,0 @@
-# SUI - Dropdown list
-The dropdown is the component that makes up a list of values that is deployed thanks to the* Select component or others like Autosuggest. Each line of value is composed of one or a few atoms, usually text, although it also allows the use of checkboxes and images.
-
-Dropdown allows the selection of a single unique option and also the multiselection using the* [Checkbox](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button--ALhw~d67i531xdaHHfPTcmlLAg-tmVSbtoe8nZTaZk9mkdsE) atom.
-
-| Status | Work in progress |
-| :---- | :---- |
-| Current version | 1.0 |
-| Category | Molecule |
-| Owners | UX @Marc G, FE Kiko Ruiz Lloret|
-
-## Structure
-
-- Dropdown is a single selectable text or a combination of some elements ([Checkbox](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button--ALhw~d67i531xdaHHfPTcmlLAg-tmVSbtoe8nZTaZk9mkdsE) + selectable text)
-- Dropdown have a flexible width that is adjustable to the content.
-See the Visual>Text specifications for more info about that constrain.
-
-
-
-
-## Behavior
-
-### Showed elements by default
-
-During implementation, there are 3 possibilities for how many elements of the list will be shown.
-
-- **S** Small: < 4 items (Cutting out the last one visually)
-- **M** Medium: < 6 items (Cutting out the last one visually)
-- **L** Large: < 8 items (Cutting out the last one visually)
-
-
-
-
-
-
-
-
-### Recommendation:
-
-Gray out any unavailable options instead of removing them: any items that cannot be selected should remain in view. If disabled items are removed, the interface loses spatial consistency and becomes harder to learn.
-
-## Visual
-
-- Measurements specifications:
- - The inner margin of each row is 16px
- - The maximum height of each row 40px
- - (Check the [Select](https://paper.dropbox.com/doc/SUI-Select--AJtBe_JcZUYGXg00QYmHnQ7oAg-OrlQjuARbK4ZoPdMcSf7p) and [Checkbox & Radio button](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button--AJtrEE8GozBn7va40aJgBWL9Ag-tmVSbtoe8nZTaZk9mkdsE) [definition](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button--AJtrEE8GozBn7va40aJgBWL9Ag-tmVSbtoe8nZTaZk9mkdsE) for more information)
-
-- Text specifications:
- - Just one text line in each row is allowed
- - Use <24 characters max
- - If your item need more than <24 characters, use ellipsis
-
-
-- Dropdown box specifications:
- - Position: Dropdown box should be **top:0px** from the bottom of Select component
- - Shadow: Large
- - Stroke: Thinkness ( 1 ) Color (#BBBBBB) Gray-l2 Position (Inside)
- - Border radius: Custom
- - (Check the [Select](https://paper.dropbox.com/doc/SUI-Select--AJtBe_JcZUYGXg00QYmHnQ7oAg-OrlQjuARbK4ZoPdMcSf7p) for more information)
-
-
-
-
-
-## Responsive
-
-The states (selectable text and checkbox behavior) in mobile are the exactly the same but the **Hover** state canot be displayed
-
-Check [Select](https://paper.dropbox.com/doc/SUI-Select--AJtBe_JcZUYGXg00QYmHnQ7oAg-OrlQjuARbK4ZoPdMcSf7p) for more information
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-- Every interactive element should be focusable
-- Focus order should match visual order
-- Focus should be visible
-- Interactive elements and images should be correctly labelled
-- Interactive elements should be differentiated from content
-- Clickable area should be sufficient
-- Content should have enough contrast to its background
-- Controls should be correctly labelled
-- Content should be able to increase in size
-- Text should always be displayed as text
-- Content should declare the language
-
-## Links
-
-- Zeplin: https://zpl.io/2pBk0XE
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor: https://zpl.io/VQE8YyP
-
-## Changelog
-
-### Version 1.0
-
-- Nothing here yet
diff --git a/components/molecule/dropdownList/demo/package.json b/components/molecule/dropdownList/demo/package.json
index e2c1c085ae..fc3995f62c 100644
--- a/components/molecule/dropdownList/demo/package.json
+++ b/components/molecule/dropdownList/demo/package.json
@@ -11,6 +11,6 @@
"author": "",
"license": "ISC",
"dependencies": {
- "@s-ui/react-molecule-dropdown-option": "1"
+ "@s-ui/react-molecule-dropdown-option": "2"
}
}
diff --git a/components/molecule/dropdownList/package.json b/components/molecule/dropdownList/package.json
index 2094664c37..4a7f5e8273 100644
--- a/components/molecule/dropdownList/package.json
+++ b/components/molecule/dropdownList/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-molecule-dropdown-list",
- "version": "1.32.0",
+ "version": "2.1.0",
"description": "",
"main": "lib/index.js",
"scripts": {
@@ -11,7 +11,8 @@
"dependencies": {
"@s-ui/react-atom-input": "5",
"@s-ui/react-hooks": "1",
- "@s-ui/react-molecule-dropdown-option": "1",
+ "@s-ui/react-molecule-dropdown-option": "2",
+ "@s-ui/react-primitive-injector": "1",
"lodash.isequal": "4.5"
},
"peerDependencies": {
diff --git a/components/molecule/dropdownList/src/ExtendedChildren.js b/components/molecule/dropdownList/src/ExtendedChildren.js
index b0c2f7aabb..9ca263b6f5 100644
--- a/components/molecule/dropdownList/src/ExtendedChildren.js
+++ b/components/molecule/dropdownList/src/ExtendedChildren.js
@@ -1,42 +1,36 @@
-import {cloneElement} from 'react'
-
import isEqual from 'lodash.isequal'
import PropTypes from 'prop-types'
-const ExtendedChildren = ({
- value,
- children,
- onSelect: onSelectListHandler,
- checkbox,
- ...props
-}) => {
- const {
- value: valueChild,
- onSelect: onSelectOptionHandler,
- selected: selectedChild,
- checkbox: checkboxChild
- } = children.props
+import Injector from '@s-ui/react-primitive-injector'
+
+const ExtendedChildren = ({value, children, onSelect, checkbox, ...props}) => {
+ const {value: valueChild} = children.props
const selected = Array.isArray(value)
? value.some(innerValue => isEqual(valueChild, innerValue))
: isEqual(value, valueChild)
- const onSelectHandler = (...args) => {
- typeof onSelectOptionHandler === 'function' &&
- onSelectOptionHandler(...args)
- typeof onSelectListHandler === 'function' && onSelectListHandler(...args)
- }
- return cloneElement(children, {
- ...props,
- selected: selectedChild === undefined ? selected : selectedChild,
- onSelect: onSelectHandler,
- checkbox: checkboxChild === undefined ? checkbox : checkboxChild
- })
+ return (
+ {innerLabel()}
+const MoleculeLabel = ({name, children, ...rest}) => {
+ return (
+
+
+ {getLabeled(children)}
+
+
+ )
}
MoleculeLabel.propTypes = {
- label: PropTypes.string,
- nodeLabel: PropTypes.element,
- type: PropTypes.oneOf(Object.values(AtomLabelTypes)),
name: PropTypes.string,
- onClick: PropTypes.func
+ children: PropTypes.node
}
export default MoleculeLabel
diff --git a/components/molecule/field/src/config.js b/components/molecule/field/src/config.js
index 067e6f5867..df59c27031 100644
--- a/components/molecule/field/src/config.js
+++ b/components/molecule/field/src/config.js
@@ -1,3 +1,7 @@
+import {isElement} from 'react-is'
+
+import AtomLabel from '@s-ui/react-atom-label'
+
export const BASE_CLASS = 'sui-MoleculeField'
export const CLASS_INLINE = `${BASE_CLASS}--inline`
export const CLASS_AUTO_HIDE = `${BASE_CLASS}--autohide`
@@ -6,3 +10,21 @@ export const CLASS_INLINE_REVERSE = `${CLASS_INLINE}-reverse`
export const CLASS_NODE_LABEL_CONTAINER = `${BASE_CLASS}-nodeLabelContainer`
export const CLASS_INPUT_CONTAINER = `${BASE_CLASS}-inputContainer`
export const CLASS_LABEL_CONTAINER = `${BASE_CLASS}-labelContainer`
+
+export function isDOMTypeElement(element) {
+ return isElement(element) && typeof element.type === 'string'
+}
+
+export function isCompositeTypeElement(element) {
+ return isElement(element) && typeof element.type === 'function'
+}
+
+export const getLabeled = element => {
+ if (
+ (isDOMTypeElement(element) && element.type === 'label') ||
+ (isCompositeTypeElement(element) && element.type === AtomLabel)
+ ) {
+ return element
+ }
+ return {
- const rotationDegrees = getRotationDegrees(rotation)
- onCropping(true)
- const [croppedImageUrl, croppedImageBlobObject] = await getCroppedImg(
- image,
- croppedAreaPixels,
- rotationDegrees
- )
- onChange(croppedImageUrl, croppedImageBlobObject)
- onCropping(false)
- }
-
const onCropComplete = useCallback(
- debouncingTime === undefined
- ? cropCompleteHandler
- : debounce(cropCompleteHandler, debouncingTime),
- [rotation, onCropping, image, onChange]
+ async (croppedArea, croppedAreaPixels, ...args) => {
+ const cropCompleteHandler = async () => {
+ const rotationDegrees = getRotationDegrees(rotation)
+ onCropping(true)
+ const [croppedImageUrl, croppedImageBlobObject] = await getCroppedImg(
+ image,
+ croppedAreaPixels,
+ rotationDegrees
+ )
+ onChange(croppedImageUrl, croppedImageBlobObject)
+ onCropping(false)
+ }
+ const callback =
+ debouncingTime === undefined
+ ? cropCompleteHandler
+ : debounce(cropCompleteHandler, debouncingTime)
+ await callback(croppedArea, croppedAreaPixels, ...args)
+ },
+ [rotation, onCropping, image, onChange, debouncingTime]
)
return (
diff --git a/components/molecule/inputField/UXDEF.md b/components/molecule/inputField/UXDEF.md
deleted file mode 100644
index b7db2490f3..0000000000
--- a/components/molecule/inputField/UXDEF.md
+++ /dev/null
@@ -1,147 +0,0 @@
-# SUI - Input field
-*Input is the text field that users fill in with different types of information thru alphanumeric text.*
-*These include dates, passwords or even short answers.*
-
-*It should also be noted that Input it is a molecule because always is combined with other atoms like Label, Placeholder or HelpText.*
-
-| Status | Work in progress |
-| :---- | :---- |
-| Current version | 2.0 |
-| Category | Molecule |
-| Owners | UX @David G, @Daniel P ,FE @Julian G|
-
-## Structure
-
-- This component almost always it works with [Label](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT) & [Placeholder](https://paper.dropbox.com/doc/SUI-Form-placeholder--AK5EFuDlc~Bh5FlpHa9XLyQkAg-IqZya9lRXdMvFm0PkT1Vu) atoms and usually it is combined with other atoms like [HelpText](https://paper.dropbox.com/doc/SUI-HelpText-Validation--ALVgLbb5nsUmflT9ZK8XqyiyAg-RZpyYPWRNVPzdC9fVrCtc) or [Buttons](https://paper.dropbox.com/doc/SUI-Buttons-AvdtvjMAqbsFkTYSz3egT).
-- Inputs have a flexible length that is adjustable to the grid of the page, except in a few cases where the length is fixed (see the Content cases below).
-- The default size for inputs is Medium. Small size will be used only in a few cases
-- Example: Filters in a left side column usually use the Small size.
-- As an optional feature, the structure can contain a fixed icon or addons (left or right side) that visually indicates its contents or help the user understand and complete the input (see the Content cases below).
-
-
-
-## Behavior
-
-### States
-
-- Inputs have the 3 basic states: default, focused and disabled.
-- Should be noted that Placeholder atom disappear when the Input is on focus status. This behavior helps the user understand that the field is ready to write on it.
-- For the first iteration, the focus will be the native Browser focus.
-
-
-### Combined with buttons
-
-- When an Input is used in combination with buttons, they are always placed to the right of the input, and in responsive adaptation the order can never be changed.
-- Remember: the button size will always adapt itself to the input size.
-
-
-
-## Content
-
-We recommend to always use a [Placeholder](https://paper.dropbox.com/doc/SUI-Form-placeholder--ALcBKGls8YGd6z2D3u_cnE8MAg-IqZya9lRXdMvFm0PkT1Vu) atom that indicates what users are being asked.
-
-### Fixed inputs
-
-There are specific cases where the length of the input is not flexible and has a fixed length, as the following cases. The length it is calculated adding a fix margin to the left & right side of the content.
-
-Different types of content:
-
-- **Date field**
-We will use the native browser date field
-- **Postal Code**
-- **Bank account** (1 input box with spaces/scripts between the blocks of numbers)
-The code of this input, must be ready to accept the variations in the Country parameters or credit cards types variations.
-- **Password** is an exception, that adds a new element:
-- “Show” or “Hide” toggle inside the input text
-To avoid confusion with secondary and tertiary buttons, this text may not be in capital letters
-
-Remember, Input (specially the password) can be combined with [HelpText & Validation](https://paper.dropbox.com/doc/SUI-HelpText-Validation-RZpyYPWRNVPzdC9fVrCtc).
-
-
-
-The date field and the bank account will be in 1 unique filed. The reasons after studying corner cases and conducting an external benchmark were:
-
-- To continue with the current format (date) and keep it simple.
-- Having the bank account in separate boxes doesn’t work on small screens.
-- Having the bank account in separate boxes doesn’t make it intuitive for users who want to copy and paste.
-
-
-### Icons and addons inside the input
-
-Optionally, an Input can include icons and addons. Text (non editable) that helps the user understand and makes it easier to fill the content.
-
-Even the visual design (colors, borders, icons…) are flexible to adapt to each vertical needs, there are some common rules to follow:
-
-1. **Icons**
- 1. Aren’t placed inside “fixed gray box”
- 2. Must be on the left side of the input
- 1. **Exeption**: The [Select](https://paper.dropbox.com/doc/SUI-Select--ALdcLEuyP4LKqQkgmvdzGl0NAg-OrlQjuARbK4ZoPdMcSf7p) and [Autosuggest](https://paper.dropbox.com/doc/SUI-Autosuggest-field-new-WIP-zmn8DNgi7TQRmlqWG4kFD) components uses actionable icons at the right side.
- 3. Cannot be text. Only visual icons
-2. **Addons**
- 1. Must be placed inside a “fixed gray box”
- 2. It is NON-editable informative text
- 3. Can be placed at the left or right side, depending on the needs.
- 4. If it is combined with an icon, the addon must be placed to the right side, because the icon must be placed at the left side.
- 5. Addons may not ever be used on the right side when it is combined with an interactive icon (like the arrow from [Select field](https://paper.dropbox.com/doc/SUI-Select-field-WIP--AM9~SFusS3v3n0VvUP_hv1kmAg-OrlQjuARbK4ZoPdMcSf7p), for example); because interactive icons are always on the right side.
-
-
-
-## Visual
-
-Here it is showed only the Input measures.
-To see the margins between Input field and other atoms like [Label](https://paper.dropbox.com/doc/SUI-Label--AMZqSJ24S1u4zxxMfUb4GEpHAg-px3mcUaTHVqlGngk2JNPT), [Placeholder](https://paper.dropbox.com/doc/SUI-Form-placeholder--AMZT19S4CalH3esz_tCA1zpeAg-IqZya9lRXdMvFm0PkT1Vu) or [HelpText](https://paper.dropbox.com/doc/SUI-HelpText-RZpyYPWRNVPzdC9fVrCtc), please check those components.
-
-1. By default, the input box is rounded to 0. But every webpage (vertical) can adapt it to its UI needs.
-
-
-
-## Responsive
-
-The composition of different inputs can be displayed in a grid position when it is viewed on a desktop, but it must be displayed in a vertical position when it moves to a small screen.
-
-- The screen size will determine when the vertical position display should be changed.
-
-Regardless of the position of the inputs composition, the label must always follow its own definition position. Check the the [Label definition](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT).
-
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-2. Focus should be visible
-6. Information should not be supported only by one sense
-10. Clickable area should be sufficient
-12. Controls should be correctly labelled
-13. Errors should be prevented
-16. Text should always be displayed as text
-
-## Links
-
-- Zeplin: https://zpl.io/aBw5MMk
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/2ZP5EGJ
-- Milanuncios
-- Motor: https://zpl.io/bzn16A3
-
-## Changelog
-
-### Version 2.0
-
-- Iteration. Now is going more simple to work more freely with other components. (decompose)
-
-### Version 1.0
-
-- Creation of the atom
\ No newline at end of file
diff --git a/components/molecule/inputTags/test/index.test.js b/components/molecule/inputTags/test/index.test.js
index 4078321014..8d9b8ff67d 100644
--- a/components/molecule/inputTags/test/index.test.js
+++ b/components/molecule/inputTags/test/index.test.js
@@ -127,7 +127,7 @@ describe(json.name, () => {
sinon.match({
tags: [],
name: props.name,
- value: value
+ value
})
)
})
@@ -161,7 +161,7 @@ describe(json.name, () => {
sinon.match({
tags: props.tags,
name: props.name,
- value: value
+ value
})
)
})
diff --git a/components/molecule/modal/UXDEF.md b/components/molecule/modal/UXDEF.md
deleted file mode 100644
index f9a6dc51d3..0000000000
--- a/components/molecule/modal/UXDEF.md
+++ /dev/null
@@ -1,210 +0,0 @@
-# SUI - Modal Windows
-*Modal windows* focus users' attention *to inform them about a specific interaction. They may* require users to make a decision *or warn them when an error may have very significant consequences.*
-
-*As they open over the content, they block any action being performed on the content in order to focus the user’s attention on the message or task, therefore they can be intrusive and must be used in moderation.*
-
-| Status | Work in progress |
-| :---- | :---- |
-| Current version | 1.1 |
-| Category | Molecule |
-| Owners | UX @Daniel M , @Chris J , FE @Pablo G|
-
-## Structure
-
-This container can be made up of more components depending on the case that is needed. It is composed of the following structure:
-
-Mandatory elements
-
-- Modal window (container)
-- Overlay (does not apply to fullscreen)
-- Content (This is the space where content goes. It can be: texts, images, other components or a combination of them)
-
-Optionals
-
-- Header + Title
-- Scroll (only if the content exceeded the height of the browser).
-- Close icon (It can become mandatory if the component does not have a closure through call to action)
-
-
-
-## Behaviour
-
-Modal windows maintain the user’s attention and context and are always superimposed over the main content, until the user interacts with them.
-
-Modals has two behaviors: Open and Close.
-
-### Opening
-
-Modal windows open up in the center of the page (both vertically and horizontally) always after an action by the user:
-
-- Selecting an element.
-- Tap on a link or button, etc, (never automatically).
-- It rarely opens automatically, since it is not a recommended behavior, but there may be exceptions (example: onboarding).
-
-Entry effect overlay: FadeIn 250ms
-Entry effect modal: FadeIn 250ms + slideUp 32px 250ms ease in
-
-
-
-Mobile behaviour
-
-- Apply same effect in fullscreen or responsive version of the modal
-
-### Closing
-
-The user should always have one of these options to close the window, and it is recommended that all of them are available:
-
-- Tap the close icon in the top right corner.
-- Tap overlay area around the modal window.
-- Tap an action of the modal.
-- ESC button (this should never be used alone).
-
-Out effect overlay: FadeOut 250ms
-Out effect modal: FadeOut 250ms + slideDown 32px 250ms ease out (see example on opening image)
-
-Mobile behaviour
-
-- Apply same effect in fullscreen or responsive version of the modal
-
-## Variants
-
-1- Colour header (is recommended use a background with primary colour)
-2- White header (less highlighted header)
-3- No header (all the space is used for content)
-
-
-
-
-
-
-
-## Content
-
-Modal screens work as containers of different types of content, and sometimes they are composed of several components. Their design and behaviour change according to the tasks that the user must execute and the cognitive effort that the user needs to perform for that task.
-
-Possible combinable components:
-
-- Button.
-- Cards.
-- Forms.
-- Image gallery.
-- Badges.
-- Tags.
-
-Check some examples:
-
-
-
-**Modal with cards**
-It is applied in cases that want to show content related to the action performed by a user.
-
-##
-
-
-**Modal for selection of options**
-Applied in cases where we need the user to make a decision before several scenarios and options.
-
-
-
-**Modal with forms**
-One of the most common cases is to include form elements such as: input text, list, check, etc.
-
-
-
-**On** ******boarding modal**
-This application of the modal is designed to show a sequential information commonly used to tour for a first use of the web or new features that have been incorporated.
-
-## Responsive
-
-In the modal mobile version you can use a full screen version to take advantage of the screen space.
-
-
-
-## Visual
-
-### Visual Desktop
-
-The width of the component is conditioned by the content, the most common measures for desktop span a range of **400px** **width** up to **600px** **width.** The min-width of the modal is 288px (see visual responsive)
-See the [attribute z-index](https://paper.dropbox.com/doc/z-index--AUE1Qg6jOw8nyUG3D6dfTHI1Ag-4QvLsXUoWXeWNDiQSzCBc) for the Modal.
-****
-
-
-If we need to show content that requires more than **600px** **width** on screens with a resolution greater than **1280x1024** there is a modal **maximum width limit of 1200px****.** This modal scales with a margin of 24px when the browser is less to 1200px and change to 16px in the breakpoint XS 480px (see image bellow in visual - mobile)
-
-
-
-The height of the component will depend on the content or components that are within the modal. Apply scroll if the content exceeded the height of the browser.
-
-Modal window can have an **optional** **shadow 0 2px 4px #00000024** to highlight the separation. (it can be customized by vertical)
-Overlay panel is black with opacity 0.6 (it can be customized by vertical)
-
-### Visual Mobile
-
-Modal change to full screen version to take advantage of the screen space.
-
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-1. Every interactive element should be focusable
-2. Focus order should match visual order
-3. Focus should be visible
-4. Heading structure should be consistent
-6. Information should not be supported only by one sense
-7. Interactive elements and images should be correctly labelled
-8. Content should be written in common language
-9. Interactive elements should be differentiated from content
-13. Errors should be prevented
-14. Content should be able to increase in size
-15. Content should have enough contrast to its background
-
-The user must have all the existing alternatives to close the component, using both the keyboard and the mouse.
-
-These accessibility recommendations are based on the modal component, we must remember that a modal can carry other components inside, so these components must comply with their specific accessibility recommendations.
-
-## Links
-
-- Zeplin: https://zpl.io/brrPqZO
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/blZzrEe
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.2
-
-- Queda pendiente aplicar Variable Responsive con Margins para una segunda iteración del componente.
-- Responsive: It is left to the discretion of the designer whether to use an overlay (see behaviors section).
-
-
-
-- Visual responsive: In the overlay modal the padding are reduced to 16px in the breakpoint XS 480px to take advantage of the screen size.
-
-
-
-- También queda pendiente para una segunda iteración la Variable **Modal No Header + Imagen.** Añado un visual nuevo de la modal en desktop donde se ve más claro
-
-
-
-### Version 1.1
-
-- Definition & Visuals iteration
-
-### Version 1.0
-
-- First definition no closed
\ No newline at end of file
diff --git a/components/molecule/notification/CHANGELOG.md b/components/molecule/notification/CHANGELOG.md
index 9d12828e7c..9f672b78ff 100644
--- a/components/molecule/notification/CHANGELOG.md
+++ b/components/molecule/notification/CHANGELOG.md
@@ -1,5 +1,14 @@
# CHANGELOG
+# 1.34.0 (2022-10-01)
+
+
+### Features
+
+* **components/molecule/notification:** Remove -system ([b84c52c](https://github.com/SUI-Components/sui-components/commit/b84c52c956db4b709039dc6739f60c48b5427a79))
+
+
+
# 1.33.0 (2022-09-19)
diff --git a/components/molecule/notification/UXDEF.md b/components/molecule/notification/UXDEF.md
deleted file mode 100644
index 1f43db8435..0000000000
--- a/components/molecule/notification/UXDEF.md
+++ /dev/null
@@ -1,184 +0,0 @@
-# SUI - Notifications
-*Notifications offer users information on the system. The content may confirm that an action has been performed correctly, warn the user of an error or simply give information on certain circumstances.*
-
-| Status | Complete |
-| :---- | :---- |
-| Current version | 2.1 |
-| Category | Molecule |
-| Owners | UX @Nuria I, FE @Daniel M|
-
-## Structure
-
-Notification is made up for a container, icon, text message and interactive items (close button, action buttons, links… ).
-
-## Types
-
-There are five types of notifications differentiated based on the messages meaning:
-
-- Success
-- Alert/Warning
-- Informative
-- System
-- Error
-
-
-
-### Success
-
-Whenever the user has performed an action and requires positive feedback.
-
-### Alert/Warning
-
-These give the user notifications about things that are non-blocking but which they should know.
-
-### Error
-
-These warn users that it has not been possible to perform an action, i.e. that there is something blocking the action.
-They should always offer a recommendation and/or action to resolve the block.
-
-## Info
-
-These give the user notifications about things that are non-blocking but which they should know, The message is regarding to the vertical and its background color is primary/corporate.
-
-### System
-
-Messages with secondary information that do not have a major impact on the user experience, default color is dark gray.
-
-## Behaviour
-
-Notifications can appear on three different positions depending on the definition case:
-
-- Top (page or container)
-- Relative (between content)
-- Bottom (page or container)
-
-**To****p:**
-- Top page: Appear in the upper part of the screen, superimposed over the heading and the navigation bar. This keeps the focus on the content and avoids pushing it further down. Even if the user scrolls up or down, the toast must stay in the same place in the upper part of the screen.
-- Top container: Appears at the top of any container, scroll up/down affects on its position as any other content.
-
-
-
-**Relative:** Could appears in any position, at the top, between or at the bottom of any container, **is not fixed** so it will always follow the [box model](https://www.w3schools.com/css/css_boxmodel.asp) and it will be affected by any margin, padding or height of any previous/next content, just for that reason **is used just to notify some message related to the next or previous content** or even the whole container.
-
-
-
-**Bottom:**
-
-- Bottom page: Appear in a fixed position in the bottom part of the screen, superimposed over the content.
-- Bottom container: Appears at the bottom of any container (in this case the user maybe should scroll down to see the message.)
-
-The use of messages within modals is not contemplated.
-
-
-
-### Type of close:
-
-The **close button is optional** in all types of notifications and could be closed automatically o manual depending on use case.
-
-**Automatic:**
-
-- The notification disappears after a minimum of 3 seconds.
-- The duration can be defined depending on the length of the content, which the UX will determine when implementing based on:
- - Short = 3 seconds.
- - Medium = 6 seconds.
- - Long = 9 seconds.
-- In case of “X” icon appears, it will always be visible to close the notification in case the user wants to close it before the automatic close.
-
-**Manual close:**
-
-- The “X” icon will always be visible to close the notification.
-- If there is a call to action “X” button will also close the notification but this action won’t be saved, so the message will keep be shown for the next visit or reload.
-
-### Behaviour of the transition:
-
-Notification messages **could have or not** a transitional animation as an optional prop, by default is with animation.
-The type of animation is based on the position.
-Bear in mind that relative position messages with transition will pull the content down and will increase the high of its container when pops up:
-
-- Top:
- - Entry: SlideDown: Transition 0.5s ease-out
- - Exit: SlideUp: Transition 0.3s ease-in
-- Relative
- - Entry: FadeIn: Transition 0.5s ease-out
- - Exit: FadeOut: Transition 0.3s ease-in
-- Bottom:
- - Entry: SlideUP: Transition 0.5s ease-out
- - Exit: SlideDown: Transition 0.3s ease-in
-
-
-
-
-## Content
-- Remember to always be concise and try not to exceed the text limit (110 characters).
-- It may include icons, text, links and buttons (3 buttons as maximum)
-- We always include an icon in the notifications to help the user recognize the type of information they contain. Only at the mobile version this icon will disappear.
-- The phrases must always end with a full stop, unless they end in a question mark or exclamation mark.
-
-
-
-## Visual
-
-
-
-- The component should have two versions (positive and negative). The color of the positive one should be the L4.
-- Rounded corners might be applied by using a declarative `roundedCorners` property.
-
-## Responsive
-
-This behaves in the same way, adapting to the screen width, breaking the text content into several lines.
-On the mobile version, it loses the icon to optimize space.
-To enhance accessibility, we recommend that the first phrase in the notification gives an idea of the type of notification (e.g. Error > The message could not be sent due to a connection error…).
-This format can also be used in other contexts, maintaining the same design, for example in the company CV chat on the desktop version.
-
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-- Content should have enough contrast to its background
-- Every interactive element should be focusable
-- Focus order should match visual order
-- Focus should be visible
-- Interactive elements and images should be correctly labelled
-- Clickable area should be sufficient
-
-Also, pay attention to the following tips:
-
-- Use ARIA role="alert" to inform the assistance technologies regarding an important, non-interactive message. If the message is interactive, use alertdialog.
-- Never leave a notification hidden in the code in order to call it when you need it, as users with assistive technologies will be able to see it.
-
-## Links
-
-- Zeplin: https://zpl.io/aR0vyz2
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/bAAjJnx
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 2.0
-
-- Colors: We decided to change color in a negative just to give more contrast between main content and notification messages.
-- Behaviour : We did some changes based on the development just to make it much simpler to develop and make the react props as simple as possible.
-- Types: We removed the 2 types of notifications Alerts and Toasts and we’ve simplified in a general and unified “notification” type.
- We add a new “info” style notification in prymate/corporate color to incorporate brand notifications approaches.
-- Icons: We did a research on the icons on notification messages and we change the icons to standardize to the most common used.
-- Some other minor changes.
-
-### Version 1.0
-
-- Colors: Add positive version.
diff --git a/components/molecule/notification/package.json b/components/molecule/notification/package.json
index b4331e830a..472d434e86 100644
--- a/components/molecule/notification/package.json
+++ b/components/molecule/notification/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-molecule-notification",
- "version": "1.33.0",
+ "version": "1.34.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/molecule/notification/src/_settings.scss b/components/molecule/notification/src/_settings.scss
index c3d9e19170..5f341033b8 100644
--- a/components/molecule/notification/src/_settings.scss
+++ b/components/molecule/notification/src/_settings.scss
@@ -32,7 +32,7 @@ $notification-type-colors: (
success: $c-success,
warning: $c-alert,
error: $c-error,
- system: $c-system
+ system: $c-black
) !default;
$notification-type-positive-colors: (
@@ -77,7 +77,7 @@ $notification-type-positive-text-colors: (
success: $c-success,
warning: $c-alert,
error: $c-error,
- system: $c-system
+ system: $c-black
) !default;
// Positive Icon color
@@ -86,7 +86,7 @@ $notification-type-positive-icon-colors: (
success: $c-success,
warning: $c-alert,
error: $c-error,
- system: $c-system
+ system: $c-black
) !default;
// Effects
diff --git a/components/molecule/pagination/UXDEF.md b/components/molecule/pagination/UXDEF.md
deleted file mode 100644
index d63831b775..0000000000
--- a/components/molecule/pagination/UXDEF.md
+++ /dev/null
@@ -1,104 +0,0 @@
-# SUI - Pagination
-Splitting the contents, or a section of contents, into pages.
-
-| Status | Work in progress |
-| :---- | :---- |
-| Current version | 1.0 |
-| Category | Molecule |
-| Owners | UX @Diego M, FE @david.m|
-
-## Structure
-
-The Pagination component consists of a group of buttons arranged in a row. Is divided in 2 parts:
-
-- The **Navigation Buttons** allow the user to navigate consecutively, ascending or descending, through the pages where the content is.
-- The **Page Buttons** indicate in which page the user is and allows to browse through the pages without an established order. By clicking on them, the user will go to the page corresponding to the number that the button has.
-
-
-## Behavior
-
-The **Navigation Buttons** acquire, as their name indicates, a button behavior, therefore they have this states: resting, hover, pressed and disabled.
-The Disabled state could change the alpha value depending the component variant (see “Types” section).
-The **Page Buttons** have the same behaviour with this states: resting, hover, pressed and highlighted.
-
-
-
-## Types
-
-There are 3 versions of Pagination:
-
-- **Extended version.**
-- **Compressed version**
-- **Minimalist version**
-
-Each type contains 3 variants that are characterized by the arrangement of the elements that component is formed with.
-
-### Extended version
-
-In this version, the Page Buttons have the structure of the button group showing a maximum of 10 links.
-
-
-
-
-
-### Compressed version
-
-
-## Contents
-
-The Navigation Buttons should clearly describe the direction of the page. The use of long copys is not recommended. Apart from the text, this is emphasized by the use of iconography such as arrows or chevrons
-The content of the Page Buttons has to be numeric
-
-
-
-## Visual
-
-Must to be 8 px distance between Navigation Buttons and Page Buttons. And between one navigation button with the other in case of variants 2 o 3.
-
-
-
-## Responsive
-
-The compressed and minimal version works very well in Mobile devices. To use the extended version it will be necessary to adjust the number of Page Buttons to fit in the device width.
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-- Every interactive element should be focusable
-- Focus order should match visual order
-- Focus should be visible
-- Interactive elements and images should be correctly labelled
-- Interactive elements should be differentiated from content
-- Clickable area should be sufficient
-- Content should have enough contrast to its background
-- Controls should be correctly labelled
-- Content should be able to increase in size
-- Text should always be displayed as text
-- Content should declare the language
-
-## Links
-
-- Zeplin: https://zpl.io/2vN95z7
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.0
-
-- Nothing here yet
diff --git a/components/molecule/photoUploader/demo/package.json b/components/molecule/photoUploader/demo/package.json
index 3347b27be7..9a78a21592 100644
--- a/components/molecule/photoUploader/demo/package.json
+++ b/components/molecule/photoUploader/demo/package.json
@@ -12,7 +12,7 @@
"license": "ISC",
"dependencies": {
"@s-ui/react-atom-button": "1",
- "@s-ui/react-molecule-dropdown-option": "1",
+ "@s-ui/react-molecule-dropdown-option": "2",
"@s-ui/react-molecule-select": "1"
}
}
diff --git a/components/molecule/progressSteps/UXDEF.md b/components/molecule/progressSteps/UXDEF.md
deleted file mode 100644
index 3a51629d1e..0000000000
--- a/components/molecule/progressSteps/UXDEF.md
+++ /dev/null
@@ -1,87 +0,0 @@
-# SUI -Progress steps
-This component displays progress through a sequence of logical and numbered steps. Displays the steps in order from left to right, or from to bottom and shows the direction of the movement.
-
-| Status | Work in progress |
-| :---- | :---- |
-| Current version | 1.0 |
-| Category | Molecule |
-| Owners | UX @daniel.pardo, FE @Norbert G|
-
-## Structure
-
-1. **Progress bar:** Displays how far along the user is in completing the task, including the number of steps required to complete the task, the height of the bar by default is 4px, but it can scale in base 8
-2. **Current step:** Indicates the current step that the user is working on.
-3. **Unvisited:** Shows steps that user has not visited or completed yet. The step and label are more subtle to indicate this.
-4. **Visited:** Steps that have already been visited include clickable links, so that users can navigate back to them.
-5. **Step description:** Describes as a headline each the progress steps.
-
-
-
-## Behavior
-
-Progress step requires the user to complete previous steps before proceeding to marked and going to the next.
-
-In some cases we can go back to a previous step, but never interacting with the progress step itself, as is only indicative and non actionable.
-
-
-
-## Types
-
-- Horizontal
-- Horizontal with icon
-- Vertical
-- Vertical with icon
-
-
-
-## Contents
-
-The **Step description** must be as accurate and short as possible, allowing the user to understand where they are, where they come from and the path ahead in the simplest way.
-
-
-
-## Visual
-
-
-## Responsive
-
-On mobile, only are shown the progress bars and the label of the step active.
-
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-3. Focus should be visible
-6. Information should not be supported only by one sense
-7. Interactive elements and images should be correctly labelled
-8. Content should be written in common language
-15. Content should have enough contrast to its background
-16. Text should always be displayed as text
-
-## Links
-
-- Zepin: http://zpl.io/a7EmKmK
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.0
-
-- Nothing here yet
diff --git a/components/molecule/quickAction/UXDEF.md b/components/molecule/quickAction/UXDEF.md
deleted file mode 100644
index e60e19b37f..0000000000
--- a/components/molecule/quickAction/UXDEF.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# SUI -Quick Action
-
-
-## Structure
-
-
-## Behavior
-
-
-## Types
-
-
-## Contents
-
-
-## Visual
-
-
-## Responsive
-
-
-## Accessibility
-
-
-## Links
-
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.0
-
-- Nothing here yet
diff --git a/components/molecule/radioButtonField/UXDEF.md b/components/molecule/radioButtonField/UXDEF.md
deleted file mode 100644
index ae7c63afa0..0000000000
--- a/components/molecule/radioButtonField/UXDEF.md
+++ /dev/null
@@ -1,146 +0,0 @@
-# SUI - Checkbox & Radio button
-*Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes* ~~*in*~~*on* *the list, so checking one box doesn't uncheck the others.*
-*A stand-alone checkbox is used for a single option that the user can turn on or off.*
-*Each vertical can determine whether or not a stand-alone checkbox will be selected by default*
-
-
-*Radio buttons are used when there is a list of options that mutually exclude each other. In other words, only one option can be selected, automatically deselecting the other preselected options.*
-
-| Status | Complete |
-| :---- | :---- |
-| Current version | 1.0|
-| Category | Atom |
-| Owners | UX @David G, @Chris J, FE |
-
-**Recommendations:**
-
-- Take in consideration the next recommendation when the user must select between different options inside a range:
-- Use **Radio button** when there are 2 to 5 options
-- Use [Data Counter](https://paper.dropbox.com/doc/SUI-Data-counter--AQoAk39iIIJh2YPkZHAMA0OoAg-TqR9qBw4WRr5l5gNMvvEE) when there are 5 to 99 options (numbers)
-- Use [Slider](https://paper.dropbox.com/doc/SUI-Slider--AQrmpIMeYmY2P1q1nQr~vOifAg-gPOtnVwgn8SUMDTjFTZ2q) when there is a big range of options. From 10 to 999 (like 10-20-30-50…)
-- If possible, use Radio buttons instead of Select field (drop-down menus). Radio buttons have a lower cognitive load because they make all of the options permanently visible so that users can easily compare them.
-- Use checkboxes and radio buttons only to change settings, not as action buttons that make something happen.
-
-## Structure
-
-- Checkbox & Radio button are a combination of 2 elements: Icon + Other element (on which makes the action)*.
-*Examples of other elements: Label, card, image, table’s row…
-- Check the [Label definition](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT).
-- At least 2 options must be selected for the radio button. If there is only one, then a Checkbox must be used.
-- It is extremely important to present all the selection options that go together as group and to clearly separate them from the other groups on the same page.
-
-By default, a group of checkboxes or radio buttons are displayed vertically stacked as a list.
-
-
-
-However, a group of checkboxes or radio buttons may also be displayed in a horizontal line.
-
-
-
-Remember to check the [Label d](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT)[z](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT)[efinition](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT).
-
-## Behavior
-
-### State
-
-- The Checkbox & Radio buttons have 5 statuses, because the “selected” status is also included, plus this new one when it is “focused”.
-- For the first iteration, the focus will be the native Browser focus.
-
-
-
-
-
-## Content
-
-Preselected options aren’t recommended, especially in Radio Buttons.
-Pre-selection can be used as an exception only in some cases where the information to select isn’t too important or when the system has complementary information to pre-select one option (for example, geolocalization).
-
-If a checkbox or radio button with an important decision is preselected and the user misses it, the user may move forward with the form with crucial information answered incorrectly.
-
-## Types
-
-### Ad hoc variations
-
-**INFOJOBS**
-Sometimes, checkboxes and radio buttons are used that look different. Boxes that need to be selected are missing and they look more like buttons, but the underlying logic corresponds to these elements.
-
-
-
-**F****OTOCASA** ******&** ******COCHES**
-Sometimes, checkboxes and radio buttons are used that look different. The checkbox or radio-button is hidden, and there is an illustration/image instead above its label.
-
-**Coches.net**
-In coches, the status is represented by its opacity.
-
-
-
-
-**Fotocasa**
-
-
-
-## Visual
-
-Checkbox & Radio buttons have their height defined by the label’s line-height and they are aligned from the center to the icon.
-The margin between each individual Check/Radio~~,~~ displayed vertically, is 16px.
-
-Use standard visual representations. A Checkbox should be a small square that has a checkmark or an X when selected. A Radio button should be a small circle that has a solid circle inside it when selected.
-
-
-
-## Responsive
-
-Checkbox & Radio buttons can be aligned from horizontal to vertical grids, but the Label position must always be kept on the right side of the icon.
-
-
-
-If a list label ~~was~~is very extensive, it will be a double line in responsive.
-
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-1. Every interactive element should be focusable
-2. Focus order should match visual order
-3. Focus should be visible
-6. Information should not be supported only by one sense
-7. Interactive elements and images should be correctly labelled
-8. Content should be written in common language
-10. Clickable area should be sufficient
-
-The active/clickable area has been defined as 24 px (only when it is for text+icon)
-
-
-12. Controls should be correctly labeled
-13. Errors should be prevented
-16. Text should always be displayed as text
-
-## Links
-
-- Benchmark: https://confluence.schibsted.io/display/ST/Benchmark+Form+Elements#
-- Form Elements: https://confluence.schibsted.io/display/ST/Benchmark+Form+Elements#
-- Zeplin: https://zpl.io/bo0eq9Z
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/2Gp7JGJ
-- Milanuncios
-- Motor: https://zpl.io/brElMlr
-
-## Changelog
-
-### Version 1.0
-
-- Component creation
diff --git a/components/molecule/radioButtonGroup/CHANGELOG.md b/components/molecule/radioButtonGroup/CHANGELOG.md
index 0220580ba9..8cb4e0b5ca 100644
--- a/components/molecule/radioButtonGroup/CHANGELOG.md
+++ b/components/molecule/radioButtonGroup/CHANGELOG.md
@@ -1,5 +1,9 @@
# CHANGELOG
+# 1.10.0 (2022-10-19)
+
+
+
# 1.9.0 (2022-06-23)
diff --git a/components/molecule/radioButtonGroup/UXDEF.md b/components/molecule/radioButtonGroup/UXDEF.md
deleted file mode 100644
index ae7c63afa0..0000000000
--- a/components/molecule/radioButtonGroup/UXDEF.md
+++ /dev/null
@@ -1,146 +0,0 @@
-# SUI - Checkbox & Radio button
-*Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes* ~~*in*~~*on* *the list, so checking one box doesn't uncheck the others.*
-*A stand-alone checkbox is used for a single option that the user can turn on or off.*
-*Each vertical can determine whether or not a stand-alone checkbox will be selected by default*
-
-
-*Radio buttons are used when there is a list of options that mutually exclude each other. In other words, only one option can be selected, automatically deselecting the other preselected options.*
-
-| Status | Complete |
-| :---- | :---- |
-| Current version | 1.0|
-| Category | Atom |
-| Owners | UX @David G, @Chris J, FE |
-
-**Recommendations:**
-
-- Take in consideration the next recommendation when the user must select between different options inside a range:
-- Use **Radio button** when there are 2 to 5 options
-- Use [Data Counter](https://paper.dropbox.com/doc/SUI-Data-counter--AQoAk39iIIJh2YPkZHAMA0OoAg-TqR9qBw4WRr5l5gNMvvEE) when there are 5 to 99 options (numbers)
-- Use [Slider](https://paper.dropbox.com/doc/SUI-Slider--AQrmpIMeYmY2P1q1nQr~vOifAg-gPOtnVwgn8SUMDTjFTZ2q) when there is a big range of options. From 10 to 999 (like 10-20-30-50…)
-- If possible, use Radio buttons instead of Select field (drop-down menus). Radio buttons have a lower cognitive load because they make all of the options permanently visible so that users can easily compare them.
-- Use checkboxes and radio buttons only to change settings, not as action buttons that make something happen.
-
-## Structure
-
-- Checkbox & Radio button are a combination of 2 elements: Icon + Other element (on which makes the action)*.
-*Examples of other elements: Label, card, image, table’s row…
-- Check the [Label definition](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT).
-- At least 2 options must be selected for the radio button. If there is only one, then a Checkbox must be used.
-- It is extremely important to present all the selection options that go together as group and to clearly separate them from the other groups on the same page.
-
-By default, a group of checkboxes or radio buttons are displayed vertically stacked as a list.
-
-
-
-However, a group of checkboxes or radio buttons may also be displayed in a horizontal line.
-
-
-
-Remember to check the [Label d](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT)[z](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT)[efinition](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT).
-
-## Behavior
-
-### State
-
-- The Checkbox & Radio buttons have 5 statuses, because the “selected” status is also included, plus this new one when it is “focused”.
-- For the first iteration, the focus will be the native Browser focus.
-
-
-
-
-
-## Content
-
-Preselected options aren’t recommended, especially in Radio Buttons.
-Pre-selection can be used as an exception only in some cases where the information to select isn’t too important or when the system has complementary information to pre-select one option (for example, geolocalization).
-
-If a checkbox or radio button with an important decision is preselected and the user misses it, the user may move forward with the form with crucial information answered incorrectly.
-
-## Types
-
-### Ad hoc variations
-
-**INFOJOBS**
-Sometimes, checkboxes and radio buttons are used that look different. Boxes that need to be selected are missing and they look more like buttons, but the underlying logic corresponds to these elements.
-
-
-
-**F****OTOCASA** ******&** ******COCHES**
-Sometimes, checkboxes and radio buttons are used that look different. The checkbox or radio-button is hidden, and there is an illustration/image instead above its label.
-
-**Coches.net**
-In coches, the status is represented by its opacity.
-
-
-
-
-**Fotocasa**
-
-
-
-## Visual
-
-Checkbox & Radio buttons have their height defined by the label’s line-height and they are aligned from the center to the icon.
-The margin between each individual Check/Radio~~,~~ displayed vertically, is 16px.
-
-Use standard visual representations. A Checkbox should be a small square that has a checkmark or an X when selected. A Radio button should be a small circle that has a solid circle inside it when selected.
-
-
-
-## Responsive
-
-Checkbox & Radio buttons can be aligned from horizontal to vertical grids, but the Label position must always be kept on the right side of the icon.
-
-
-
-If a list label ~~was~~is very extensive, it will be a double line in responsive.
-
-
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-1. Every interactive element should be focusable
-2. Focus order should match visual order
-3. Focus should be visible
-6. Information should not be supported only by one sense
-7. Interactive elements and images should be correctly labelled
-8. Content should be written in common language
-10. Clickable area should be sufficient
-
-The active/clickable area has been defined as 24 px (only when it is for text+icon)
-
-
-12. Controls should be correctly labeled
-13. Errors should be prevented
-16. Text should always be displayed as text
-
-## Links
-
-- Benchmark: https://confluence.schibsted.io/display/ST/Benchmark+Form+Elements#
-- Form Elements: https://confluence.schibsted.io/display/ST/Benchmark+Form+Elements#
-- Zeplin: https://zpl.io/bo0eq9Z
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs: https://zpl.io/2Gp7JGJ
-- Milanuncios
-- Motor: https://zpl.io/brElMlr
-
-## Changelog
-
-### Version 1.0
-
-- Component creation
diff --git a/components/molecule/radioButtonGroup/demo/ArticleAtomRadioButton.js b/components/molecule/radioButtonGroup/demo/articles/ArticleAtomRadioButton.js
similarity index 81%
rename from components/molecule/radioButtonGroup/demo/ArticleAtomRadioButton.js
rename to components/molecule/radioButtonGroup/demo/articles/ArticleAtomRadioButton.js
index bfd51d9882..77bcea377f 100644
--- a/components/molecule/radioButtonGroup/demo/ArticleAtomRadioButton.js
+++ b/components/molecule/radioButtonGroup/demo/articles/ArticleAtomRadioButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import {Article, H2, Paragraph} from '@s-ui/documentation-library'
import AtomRadioButton from '@s-ui/react-atom-radio-button'
-import MoleculeRadioButtonGroup from '../src/index.js'
+import MoleculeRadioButtonGroup from '../../src/index.js'
const ArticleAtomRadioButton = ({className}) => {
return (
@@ -15,14 +15,12 @@ const ArticleAtomRadioButton = ({className}) => {
{
- // eslint-disable-next-line no-console
- console.log({[name]: value})
- }}
+ onChange={
+ (ev, {name, value}) => console.log({[name]: value}) // eslint-disable-line no-console
+ }
name="favorite-beatle"
value="john"
>
-
(
inline="left"
onClick={onClickLabel}
type={type}
+ {...props}
/>
- I am out of the label
+
+ I am out of the label
+
)
diff --git a/components/molecule/radioButtonGroup/demo/index.js b/components/molecule/radioButtonGroup/demo/index.js
index 756954e19e..7f1ee379ae 100644
--- a/components/molecule/radioButtonGroup/demo/index.js
+++ b/components/molecule/radioButtonGroup/demo/index.js
@@ -2,10 +2,10 @@
import {H1, H2, Paragraph} from '@s-ui/documentation-library'
-import ArticleAtomRadioButton from './ArticleAtomRadioButton.js'
-import ArticleChangeProps from './ArticleChangeProps.js'
-import ArticleMoleculeRadioButtonField from './ArticleMoleculeRadioButtonField.js'
-import ArticleWithIcons from './ArticleWithIcons.js'
+import ArticleAtomRadioButton from './articles/ArticleAtomRadioButton.js'
+import ArticleChangeProps from './articles/ArticleChangeProps.js'
+import ArticleMoleculeRadioButtonField from './articles/ArticleMoleculeRadioButtonField.js'
+import ArticleWithIcons from './articles/ArticleWithIcons.js'
import './index.scss'
diff --git a/components/molecule/radioButtonGroup/demo/package.json b/components/molecule/radioButtonGroup/demo/package.json
index bec52b0a78..de0b71369f 100644
--- a/components/molecule/radioButtonGroup/demo/package.json
+++ b/components/molecule/radioButtonGroup/demo/package.json
@@ -11,9 +11,9 @@
"author": "",
"license": "ISC",
"dependencies": {
- "@s-ui/hoc": "1",
"@s-ui/react-atom-label": "1",
"@s-ui/react-atom-radio-button": "1",
+ "@s-ui/react-atom-tooltip": "2",
"@s-ui/react-molecule-radio-button-field": "1"
}
}
diff --git a/components/molecule/radioButtonGroup/package.json b/components/molecule/radioButtonGroup/package.json
index e9927bd472..e97408ce65 100644
--- a/components/molecule/radioButtonGroup/package.json
+++ b/components/molecule/radioButtonGroup/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-molecule-radio-button-group",
- "version": "1.9.0",
+ "version": "1.10.0",
"description": "",
"main": "lib/index.js",
"scripts": {
@@ -9,7 +9,8 @@
"build:styles": "cpx './src/**/*.scss' ./lib"
},
"dependencies": {
- "@s-ui/component-dependencies": "1"
+ "@s-ui/component-dependencies": "1",
+ "@s-ui/react-primitive-injector": "1"
},
"keywords": [],
"author": "",
diff --git a/components/molecule/radioButtonGroup/src/index.js b/components/molecule/radioButtonGroup/src/index.js
index c39f4e56f7..8cee241a08 100644
--- a/components/molecule/radioButtonGroup/src/index.js
+++ b/components/molecule/radioButtonGroup/src/index.js
@@ -1,54 +1,46 @@
-import {Children, cloneElement, useEffect, useState} from 'react'
-
import PropTypes from 'prop-types'
+import useControlledState from '@s-ui/react-hooks/lib/useControlledState'
+import Injector, {combineProps} from '@s-ui/react-primitive-injector'
+
import {BASE_CLASS} from './settings.js'
const MoleculeRadioButtonGroup = ({
id,
- value: initValue,
- onChange: onChangeFromProps,
+ value,
+ onChange,
children,
name,
...props
}) => {
- const [value, setValue] = useState(initValue)
-
- useEffect(() => {
- setValue(initValue)
- }, [initValue])
-
- const handleChangeGroup = (e, {name, value: innerValue}) => {
- setValue(innerValue)
- typeof onChangeFromProps === 'function' &&
- onChangeFromProps(e, {name, value: innerValue})
+ const [innerValue, setInnerValue] = useControlledState(value)
+ const handleChangeGroup = (e, {name, value}) => {
+ setInnerValue(value, true)
+ typeof onChange === 'function' && onChange(e, {name, value})
}
-
- const extendedChildren = Children.toArray(children)
- .filter(Boolean)
- .map((child, index) => {
- const {
- props: {value: childValue}
- } = child
- const checked = value === childValue
- const onChange = handleChangeGroup
- return cloneElement(child, {
- ...props,
- checked,
- onChange,
- name
- })
- })
-
- return
+ + {
+ setOverlayType(value)
+ }}
+ placeholder="Select a overlay type..."
+ iconArrowDown={
+ {key}
+
+ ))}
+
+
+ {extendedChildren}
+ return (
+
+ {
+ return combineProps(
+ {
+ checked: ownProps.value === innerValue,
+ onChange: handleChangeGroup,
+ name,
+ ...props
+ },
+ ownProps
+ )
+ }}
+ >
+ {children}
+
+
+ )
}
MoleculeRadioButtonGroup.displayName = 'MoleculeRadioButtonGroup'
-MoleculeRadioButtonGroup.defaultProps = {
- checked: false
-}
-
MoleculeRadioButtonGroup.propTypes = {
/* children */
children: PropTypes.any,
@@ -62,9 +54,6 @@ MoleculeRadioButtonGroup.propTypes = {
/* This Boolean attribute prevents the user from interacting with the input */
disabled: PropTypes.bool,
- /* Mark the input as selected */
- checked: PropTypes.bool,
-
/* onChange callback */
onChange: PropTypes.func,
diff --git a/components/molecule/rating/CHANGELOG.md b/components/molecule/rating/CHANGELOG.md
index 4b041efc8a..096cc33ff1 100644
--- a/components/molecule/rating/CHANGELOG.md
+++ b/components/molecule/rating/CHANGELOG.md
@@ -1,5 +1,14 @@
# CHANGELOG
+# 1.21.0 (2022-10-01)
+
+
+### Features
+
+* **components/molecule/rating:** Remove -system ([dc7bd06](https://github.com/SUI-Components/sui-components/commit/dc7bd06a57c74e6112589ec6a97b738f090632cc))
+
+
+
# 1.20.0 (2022-06-23)
diff --git a/components/molecule/rating/UXDEF.md b/components/molecule/rating/UXDEF.md
deleted file mode 100644
index fcb41d26a2..0000000000
--- a/components/molecule/rating/UXDEF.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# SUI - Rating
-*A classification according how good or popular someone o something is.*
-
-| Status | Pending review |
-| :---- | :---- |
-| Current version | 1.0 |
-| Category | Molecule |
-| Owners | UX @Diego M|
-
-
-## Structure
-
-The rating component consists of two clearly differentiated parts. A block of stars that indicates the degree of satisfaction in a visual way and a label that reaffirms that statement with text giving more details. This label can have a link function.
-
-
-
-## Behavior
-
-The label have the same behaviour as a button but the disabled state have the same visual as resting state. The mission of the label is to add the number of total ratings. But if the site needs to show to the user the ratings more accurate, the label has to have a button behaviour. Add the label must be optional depending on the needs of the site. The flexibility of this component allows to add a superior label or be accompanied by a help text.
-
-
-
-## Types
-
-As mentioned in the previous section, the existence of the label is based on the needs of the site, so exist two types of rating components: with or without label.
-
-
-
-## Contents
-
-Try not to add a extensive text in the label. It has to be clear and concrete. It your label is 2 lines long or more, please rethink the content.
-Stars have to be in the same line.
-If you don’t have a lot of horizontal space, think to build the component in 2 lines: the stars in the top and the label below.
-
-
-
-## Visual
-
-8px is the distance between the stars group and the label. The size could be adapted according to 24px, 32px and 40px, in spite of that the sizes between the parts must be the explained in the image.
-
-The colors must be customizable to cover the needs of each site as well the objects. It’s not mandatory to use stars. But these objects must have a fill property so it is not recommended to use outlined icons. There will be two types of filling: full and half.
-- Full: When the component is used to vote.
-- Half When the component is used to show a result with decimals in the average.
-
-
-
-## Responsive
-
-Keep in mind that this component must adapt the focus area to a larger one in order to facilitate its access when it appears in a mobile device. About this, the rules to follow are the same of any other component.
-
-## Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-- Every interactive element should be focusable
-- Focus order should match visual order
-- Focus should be visible
-- Interactive elements and images should be correctly labelled
-- Interactive elements should be differentiated from content
-- Clickable area should be sufficient
-- Content should have enough contrast to its background
-- Controls should be correctly labelled
-- Content should be able to increase in size
-- Text should always be displayed as text
-- Content should declare the language
-
-## Links
-
-- Zeplin: https://zpl.io/bldmOE0
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 1.0
-
-- Nothing here yet
diff --git a/components/molecule/rating/package.json b/components/molecule/rating/package.json
index 6a0fc59052..15a9f5ed3e 100644
--- a/components/molecule/rating/package.json
+++ b/components/molecule/rating/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-molecule-rating",
- "version": "1.20.0",
+ "version": "1.21.0",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/components/molecule/rating/src/styles/settings.scss b/components/molecule/rating/src/styles/settings.scss
index 55e823696e..068bc9b402 100644
--- a/components/molecule/rating/src/styles/settings.scss
+++ b/components/molecule/rating/src/styles/settings.scss
@@ -21,5 +21,5 @@ $m-l-molecule-small-rating-stars: $m-l-molecule-rating-stars !default;
$p-molecule-rating-label: $p-m !default;
$p-molecule-rating-stars: 0 !default;
-$c-molecule-rating-svg: $c-system !default;
+$c-molecule-rating-svg: $c-black !default;
$c-molecule-rating-svg-hover: $c-primary !default;
diff --git a/components/molecule/select/CHANGELOG.md b/components/molecule/select/CHANGELOG.md
index 1c9e1a45d7..b8246404aa 100644
--- a/components/molecule/select/CHANGELOG.md
+++ b/components/molecule/select/CHANGELOG.md
@@ -1,5 +1,24 @@
# CHANGELOG
+# 1.57.0 (2022-10-11)
+
+
+### Bug Fixes
+
+* **components/molecule/select:** accept onblur prop ([ad3f8fb](https://github.com/SUI-Components/sui-components/commit/ad3f8fb08be2260ffba01fce160c4d3df3814754)), closes [#2282](https://github.com/SUI-Components/sui-components/issues/2282)
+
+
+
+# 1.56.0 (2022-10-04)
+
+
+### Features
+
+* **components/molecule/select:** set new prop name following conventions ([484a999](https://github.com/SUI-Components/sui-components/commit/484a9999fa2eace0fcaf27f73d37872b3d1ca208))
+* **components/molecule/select:** upgrade dropdownOption version ([e05859e](https://github.com/SUI-Components/sui-components/commit/e05859e6135cf0400b616705dce25c0f00a89c2f))
+
+
+
# 1.55.0 (2022-07-29)
diff --git a/components/molecule/select/UXDEF.md b/components/molecule/select/UXDEF.md
deleted file mode 100644
index 39ee5afd68..0000000000
--- a/components/molecule/select/UXDEF.md
+++ /dev/null
@@ -1,120 +0,0 @@
-# SUI - Select field
-Select it is a form field that let users select from a list of possible values. It can be for one selection or multi-selection.
-
-**It should also be noted that Select it is a molecule because it must be combined with Dropdown list molecule (to show the list of values) and usually is combined with other atoms like Label, Placeholder or HelpText.**
-
-| Status | Work in progress |
-| :---- | :---- |
-| Current version | 2.0 |
-| Category | Molecule |
-| Owners | UX @David G, @Daniel P, FE @Julian G|
-
-## Structure
-
-- This component always works in combination of [Dropdown list](https://paper.dropbox.com/doc/SUI-Dropdown-list--AMZeIHGwjPUH_E1rMLoO7RbvAg-VSQSdXvEyqawESsk4IkMC) and [Icons](https://paper.dropbox.com/doc/SUI-Icons-WIP--AMb5tk9_hn_MtVAcoE03FXOSAg-vn9iJCzYbYm7pvgHC25eD) molecules and usually with [Label](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT), [Placeholder](https://paper.dropbox.com/doc/SUI-Form-placeholder--AK5EFuDlc~Bh5FlpHa9XLyQkAg-IqZya9lRXdMvFm0PkT1Vu) and [HelpText](https://paper.dropbox.com/doc/SUI-HelpText-Validation--ALVgLbb5nsUmflT9ZK8XqyiyAg-RZpyYPWRNVPzdC9fVrCtc).
-- Select have a flexible length that is adjustable to the grid of the page.
-- The default size for Select is Medium. Small size will be used only in a few cases
-- Example: Filters in a left side column usually use the Small size.
-
-Remember; if there are few values to choose (one or multiple), [Checkbox & Radiobutton](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button--AMY4nZaXW1WgxNkQvhDzPNo9Ag-tmVSbtoe8nZTaZk9mkdsE) will be a better component to use.
-
-
-
-## Behavior
-
-### States
-
-- Select have the same 3 basic states: default, focused and disabled.
-- For the first iteration, the focus will be the native browser focus.
-- Remember, the values to select will be shown on the [Dropdown](https://paper.dropbox.com/doc/SUI-Dropdown-list--AMZeIHGwjPUH_E1rMLoO7RbvAg-VSQSdXvEyqawESsk4IkMC) list component.
-
-**Recommendations:**
-
-- The clickable area of the chevron up/down icon should be more than **40px**, specially
- for mobile. (See accesibility content for more information)
-
-
-### Multi select
-
-This type is less used and less recommended.
-When some values are selected, they appear in the Select field as [Tags](https://paper.dropbox.com/doc/SUI-Tags-bOSL4L5TFYZqPaK0wnCHb) that can be self-deleted. At the same time, they remain as visual options on the [Dropdown](https://paper.dropbox.com/doc/SUI-Dropdown-list--ANBJwzoE5h5fXlq~fBc6ZVgeAg-VSQSdXvEyqawESsk4IkMC) list, but in “disabled state”.
-
-
-
-## Content
-
-We recommend to always use a [Placeholder](https://paper.dropbox.com/doc/SUI-Text-placeholder-IqZya9lRXdMvFm0PkT1Vu) text that indicates what is being asked of users.
-
-**Recommendations:**
-
-- Avoid use Select field when there are only 2 or 3 options that could be displayed in a [Checkbox component](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button-tmVSbtoe8nZTaZk9mkdsE). (which require only a single click or tap).
-- Resist the temptation to include many items whenever possible. If you have many items, consider alternative ways of presenting them or use facilities like [Autosuggest field](https://paper.dropbox.com/doc/SUI-Autosuggest-field-new-WIP--AMpYLvg3jxrwfy7lnSqo8rSsAg-zmn8DNgi7TQRmlqWG4kFD).
-- [Dropdown](https://paper.dropbox.com/doc/SUI-Dropdown-list--ANBJwzoE5h5fXlq~fBc6ZVgeAg-VSQSdXvEyqawESsk4IkMC) recommendation: Gray out any unavailable options instead of removing them: any items that cannot be selected should remain in view. If disabled items are removed, the interface loses spatial consistency and becomes harder to learn.
-# Visual
-
-Here it is showed only the Select measures. To see the 2 sizes of the field, please check [Input field](https://paper.dropbox.com/doc/SUI-Input-field-WIP--ANBFezB5g93jmp~uku3ikwesAg-03mHJFkOCjviSZevsaTwm). Those are the same.
-To see the margins between Select field and other atoms like [Label](https://paper.dropbox.com/doc/SUI-Label--AMZqSJ24S1u4zxxMfUb4GEpHAg-px3mcUaTHVqlGngk2JNPT), [Placeholder](https://paper.dropbox.com/doc/SUI-Form-placeholder--AMZT19S4CalH3esz_tCA1zpeAg-IqZya9lRXdMvFm0PkT1Vu) or [HelpText](https://paper.dropbox.com/doc/SUI-HelpText-RZpyYPWRNVPzdC9fVrCtc), please check those components.
-
-The following measurements are visible here:
-
-- The inner margin of the select field should be 8 px minimum.
-- The inner size and margins for the right-side icons: arrow up/down.
-- The chevron up/down icon has a 8 px padding left.
-
-
-
-## Responsive
-
-The composition of different inputs can be displayed in a grid position when it is viewed on a desktop, but it must be displayed in a vertical position when it moves to small screens.
-
-Breakpoints will determine when to change how to display it. Each vertical has its own breakpoints
-
-To keep the coherence with the other fields used in forms like [Autosuggest field](https://paper.dropbox.com/doc/SUI-Autosuggest-field-new-WIP--AMpYLvg3jxrwfy7lnSqo8rSsAg-zmn8DNgi7TQRmlqWG4kFD), we recommend not use the native browser selector on mobile devices.
-
-When Tags will be needed, using **Large Tag** is mandatory for mobile devices in order to have a better accessibility (See [Tags](https://paper.dropbox.com/doc/SUI-Tags--Ab3DNag_5dltDg1~9YF7J7UDAg-bOSL4L5TFYZqPaK0wnCHb) for more information)
-
-
-
-### Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-1. Every interactive element should be focusable
-3. Focus should be visible
-8. Content should be written in common language
-10. Clickable area should be sufficient: A minimum 40 x 40 pixels area is recommended to ensure a comfortable interaction no matter the device.
-Users in motion or those with motor disabilities will benefit from an easier way of reaching an interactive element.
-13. Errors should be prevented
-16. Text should always be displayed as text
-
-## Links
-
-- Zeplin: https://zpl.io/V1MOPw5
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 2.0
-
-- New Padding left for chevron icon.
-- 40 px clickable area of chevron icon
-
-### Version 1.0
-
-- 06/11/2017 Creation of the atom
-- 04/09/2018 Iteration. Now is going more simple to work more freely with other components. (decompose)
diff --git a/components/molecule/select/demo/package.json b/components/molecule/select/demo/package.json
index 0ba8ff5989..b562f0365e 100644
--- a/components/molecule/select/demo/package.json
+++ b/components/molecule/select/demo/package.json
@@ -12,6 +12,6 @@
"license": "ISC",
"dependencies": {
"@s-ui/hoc": "1",
- "@s-ui/react-molecule-dropdown-option": "1"
+ "@s-ui/react-molecule-dropdown-option": "2"
}
}
diff --git a/components/molecule/select/package.json b/components/molecule/select/package.json
index c9887d8beb..9a2b056e30 100644
--- a/components/molecule/select/package.json
+++ b/components/molecule/select/package.json
@@ -1,6 +1,6 @@
{
"name": "@s-ui/react-molecule-select",
- "version": "1.55.0",
+ "version": "1.57.0",
"description": "",
"main": "lib/index.js",
"scripts": {
@@ -12,7 +12,7 @@
"@s-ui/js": "2",
"@s-ui/react-atom-input": "5",
"@s-ui/react-hooks": "1",
- "@s-ui/react-molecule-dropdown-list": "1",
+ "@s-ui/react-molecule-dropdown-list": "2",
"@s-ui/react-molecule-input-tags": "2",
"@s-ui/react-primitive-injector": "1"
},
diff --git a/components/molecule/select/src/index.js b/components/molecule/select/src/index.js
index 7a8c4c0868..ed1c9bb399 100644
--- a/components/molecule/select/src/index.js
+++ b/components/molecule/select/src/index.js
@@ -2,11 +2,11 @@ import {
Children,
cloneElement,
createRef,
+ forwardRef,
useCallback,
useEffect,
useRef,
- useState,
- forwardRef
+ useState
} from 'react'
import PropTypes from 'prop-types'
@@ -20,14 +20,15 @@ import MoleculeSelectMultipleSelection from './components/MultipleSelection.js'
import MoleculeSelectSingleSelection from './components/SingleSelection.js'
import {
ENABLED_KEYS,
+ getClassName,
getOptionData,
SELECT_STATES,
- SELECTION_KEYS,
- getClassName
+ SELECTION_KEYS
} from './config.js'
const MoleculeSelect = forwardRef((props, forwardedRef) => {
const {
+ onBlur,
isOpen,
onToggle,
children,
@@ -39,6 +40,7 @@ const MoleculeSelect = forwardRef((props, forwardedRef) => {
refMoleculeSelect: refMoleculeSelectFromProps,
'aria-label': ariaLabel
} = props
+
const refMoleculeSelect = useRef(refMoleculeSelectFromProps)
const refsMoleculeSelectOptions = useRef([])
const ref = useMergeRefs(forwardedRef, refMoleculeSelect)
@@ -57,7 +59,7 @@ const MoleculeSelect = forwardRef((props, forwardedRef) => {
refsMoleculeSelectOptions.current[index] = createRef()
return cloneElement(child, {
innerRef: refsMoleculeSelectOptions.current[index],
- onSelectKey: keysSelection
+ selectKey: keysSelection
})
})
@@ -125,7 +127,10 @@ const MoleculeSelect = forwardRef((props, forwardedRef) => {
}
}
- const handleFocusOut = () => setFocus(false)
+ const handleFocusOut = event => {
+ onBlur(event)
+ setFocus(false)
+ }
const handleFocusIn = () => !disabled && setFocus(true)
@@ -185,6 +190,9 @@ MoleculeSelect.propTypes = {
/** if list of options is displayed or not */
isOpen: PropTypes.bool,
+ /** callback onBlur to be triggered when focused outside of the input */
+ onBlur: PropTypes.func,
+
/** callback when arrow up/down is clicked → to show/hide list of options */
onToggle: PropTypes.func,
@@ -232,6 +240,7 @@ MoleculeSelect.propTypes = {
}
MoleculeSelect.defaultProps = {
+ onBlur: () => {},
disabled: false,
keysSelection: SELECTION_KEYS,
onChange: () => {},
diff --git a/components/molecule/select/test/index.test.js b/components/molecule/select/test/index.test.js
index e1ec6bb9fc..f1a2701a75 100644
--- a/components/molecule/select/test/index.test.js
+++ b/components/molecule/select/test/index.test.js
@@ -9,6 +9,9 @@ import ReactDOM from 'react-dom'
import chai, {expect} from 'chai'
import chaiDOM from 'chai-dom'
+import sinon from 'sinon'
+
+import {fireEvent} from '@testing-library/react'
import json from '../package.json'
import * as pkg from '../src/index.js'
@@ -85,6 +88,24 @@ describe(json.name, () => {
// Then
expect(findClassName(container.innerHTML)).to.be.null
})
+
+ it('should call onBlur callback', () => {
+ const spy = sinon.spy()
+
+ const props = {
+ onBlur: spy
+ }
+
+ // When
+ const {getByRole} = setup(props)
+ const textBox = getByRole('textbox')
+
+ textBox.focus()
+ fireEvent.blur(textBox)
+
+ // Then
+ sinon.assert.calledOnce(spy)
+ })
})
describe('moleculeSelectDropdownListSizes', () => {
diff --git a/components/molecule/selectField/UXDEF.md b/components/molecule/selectField/UXDEF.md
deleted file mode 100644
index 39ee5afd68..0000000000
--- a/components/molecule/selectField/UXDEF.md
+++ /dev/null
@@ -1,120 +0,0 @@
-# SUI - Select field
-Select it is a form field that let users select from a list of possible values. It can be for one selection or multi-selection.
-
-**It should also be noted that Select it is a molecule because it must be combined with Dropdown list molecule (to show the list of values) and usually is combined with other atoms like Label, Placeholder or HelpText.**
-
-| Status | Work in progress |
-| :---- | :---- |
-| Current version | 2.0 |
-| Category | Molecule |
-| Owners | UX @David G, @Daniel P, FE @Julian G|
-
-## Structure
-
-- This component always works in combination of [Dropdown list](https://paper.dropbox.com/doc/SUI-Dropdown-list--AMZeIHGwjPUH_E1rMLoO7RbvAg-VSQSdXvEyqawESsk4IkMC) and [Icons](https://paper.dropbox.com/doc/SUI-Icons-WIP--AMb5tk9_hn_MtVAcoE03FXOSAg-vn9iJCzYbYm7pvgHC25eD) molecules and usually with [Label](https://paper.dropbox.com/doc/SUI-Label-px3mcUaTHVqlGngk2JNPT), [Placeholder](https://paper.dropbox.com/doc/SUI-Form-placeholder--AK5EFuDlc~Bh5FlpHa9XLyQkAg-IqZya9lRXdMvFm0PkT1Vu) and [HelpText](https://paper.dropbox.com/doc/SUI-HelpText-Validation--ALVgLbb5nsUmflT9ZK8XqyiyAg-RZpyYPWRNVPzdC9fVrCtc).
-- Select have a flexible length that is adjustable to the grid of the page.
-- The default size for Select is Medium. Small size will be used only in a few cases
-- Example: Filters in a left side column usually use the Small size.
-
-Remember; if there are few values to choose (one or multiple), [Checkbox & Radiobutton](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button--AMY4nZaXW1WgxNkQvhDzPNo9Ag-tmVSbtoe8nZTaZk9mkdsE) will be a better component to use.
-
-
-
-## Behavior
-
-### States
-
-- Select have the same 3 basic states: default, focused and disabled.
-- For the first iteration, the focus will be the native browser focus.
-- Remember, the values to select will be shown on the [Dropdown](https://paper.dropbox.com/doc/SUI-Dropdown-list--AMZeIHGwjPUH_E1rMLoO7RbvAg-VSQSdXvEyqawESsk4IkMC) list component.
-
-**Recommendations:**
-
-- The clickable area of the chevron up/down icon should be more than **40px**, specially
- for mobile. (See accesibility content for more information)
-
-
-### Multi select
-
-This type is less used and less recommended.
-When some values are selected, they appear in the Select field as [Tags](https://paper.dropbox.com/doc/SUI-Tags-bOSL4L5TFYZqPaK0wnCHb) that can be self-deleted. At the same time, they remain as visual options on the [Dropdown](https://paper.dropbox.com/doc/SUI-Dropdown-list--ANBJwzoE5h5fXlq~fBc6ZVgeAg-VSQSdXvEyqawESsk4IkMC) list, but in “disabled state”.
-
-
-
-## Content
-
-We recommend to always use a [Placeholder](https://paper.dropbox.com/doc/SUI-Text-placeholder-IqZya9lRXdMvFm0PkT1Vu) text that indicates what is being asked of users.
-
-**Recommendations:**
-
-- Avoid use Select field when there are only 2 or 3 options that could be displayed in a [Checkbox component](https://paper.dropbox.com/doc/SUI-Checkbox-Radio-button-tmVSbtoe8nZTaZk9mkdsE). (which require only a single click or tap).
-- Resist the temptation to include many items whenever possible. If you have many items, consider alternative ways of presenting them or use facilities like [Autosuggest field](https://paper.dropbox.com/doc/SUI-Autosuggest-field-new-WIP--AMpYLvg3jxrwfy7lnSqo8rSsAg-zmn8DNgi7TQRmlqWG4kFD).
-- [Dropdown](https://paper.dropbox.com/doc/SUI-Dropdown-list--ANBJwzoE5h5fXlq~fBc6ZVgeAg-VSQSdXvEyqawESsk4IkMC) recommendation: Gray out any unavailable options instead of removing them: any items that cannot be selected should remain in view. If disabled items are removed, the interface loses spatial consistency and becomes harder to learn.
-# Visual
-
-Here it is showed only the Select measures. To see the 2 sizes of the field, please check [Input field](https://paper.dropbox.com/doc/SUI-Input-field-WIP--ANBFezB5g93jmp~uku3ikwesAg-03mHJFkOCjviSZevsaTwm). Those are the same.
-To see the margins between Select field and other atoms like [Label](https://paper.dropbox.com/doc/SUI-Label--AMZqSJ24S1u4zxxMfUb4GEpHAg-px3mcUaTHVqlGngk2JNPT), [Placeholder](https://paper.dropbox.com/doc/SUI-Form-placeholder--AMZT19S4CalH3esz_tCA1zpeAg-IqZya9lRXdMvFm0PkT1Vu) or [HelpText](https://paper.dropbox.com/doc/SUI-HelpText-RZpyYPWRNVPzdC9fVrCtc), please check those components.
-
-The following measurements are visible here:
-
-- The inner margin of the select field should be 8 px minimum.
-- The inner size and margins for the right-side icons: arrow up/down.
-- The chevron up/down icon has a 8 px padding left.
-
-
-
-## Responsive
-
-The composition of different inputs can be displayed in a grid position when it is viewed on a desktop, but it must be displayed in a vertical position when it moves to small screens.
-
-Breakpoints will determine when to change how to display it. Each vertical has its own breakpoints
-
-To keep the coherence with the other fields used in forms like [Autosuggest field](https://paper.dropbox.com/doc/SUI-Autosuggest-field-new-WIP--AMpYLvg3jxrwfy7lnSqo8rSsAg-zmn8DNgi7TQRmlqWG4kFD), we recommend not use the native browser selector on mobile devices.
-
-When Tags will be needed, using **Large Tag** is mandatory for mobile devices in order to have a better accessibility (See [Tags](https://paper.dropbox.com/doc/SUI-Tags--Ab3DNag_5dltDg1~9YF7J7UDAg-bOSL4L5TFYZqPaK0wnCHb) for more information)
-
-
-
-### Accessibility
-
-This component should support the recommendations that appear on the [Accessibility & Inclusion Guidelines](https://github.com/SUI-Components/UX-Definitions/blob/master/Accessibility%20and%20Inclusion%20Guidelines.md).
-
-For this component it is recommended to pay special attention to the following recommendations:
-
-1. Every interactive element should be focusable
-3. Focus should be visible
-8. Content should be written in common language
-10. Clickable area should be sufficient: A minimum 40 x 40 pixels area is recommended to ensure a comfortable interaction no matter the device.
-Users in motion or those with motor disabilities will benefit from an easier way of reaching an interactive element.
-13. Errors should be prevented
-16. Text should always be displayed as text
-
-## Links
-
-- Zeplin: https://zpl.io/V1MOPw5
-
-## Specific notes per vertical
-
-If relevant, include more details for each of the themes
-
-- Vibbo
-- CarFactory
-- ePreselec
-- Fotocasa
-- Habitaclia
-- Inmofactory
-- Infojobs
-- Milanuncios
-- Motor
-
-## Changelog
-
-### Version 2.0
-
-- New Padding left for chevron icon.
-- 40 px clickable area of chevron icon
-
-### Version 1.0
-
-- 06/11/2017 Creation of the atom
-- 04/09/2018 Iteration. Now is going more simple to work more freely with other components. (decompose)
diff --git a/components/molecule/selectField/demo/package.json b/components/molecule/selectField/demo/package.json
index 6aaac19f57..f66d073fa0 100644
--- a/components/molecule/selectField/demo/package.json
+++ b/components/molecule/selectField/demo/package.json
@@ -12,7 +12,7 @@
"license": "ISC",
"dependencies": {
"@s-ui/hoc": "1",
- "@s-ui/react-molecule-dropdown-option": "1",
+ "@s-ui/react-molecule-dropdown-option": "2",
"@s-ui/react-molecule-field": "1",
"@s-ui/react-molecule-select": "1"
}
diff --git a/components/molecule/selectPopover/CHANGELOG.md b/components/molecule/selectPopover/CHANGELOG.md
index e944af8cb0..5d32c6f4ea 100644
--- a/components/molecule/selectPopover/CHANGELOG.md
+++ b/components/molecule/selectPopover/CHANGELOG.md
@@ -1,5 +1,43 @@
# CHANGELOG
+# 1.37.0 (2022-10-24)
+
+
+### Features
+
+* **components/molecule/selectPopover:** improve overlay behavior ([bbb8e0c](https://github.com/SUI-Components/sui-components/commit/bbb8e0c573fa85233ee932477130841bcb1d4ed2))
+
+
+
+# 1.36.0 (2022-10-21)
+
+
+### Features
+
+* **components/molecule/selectPopover:** disable pointer events only when overlay is open ([41cd1ee](https://github.com/SUI-Components/sui-components/commit/41cd1ee74804f42ac1ac3a10e3656c6b6f3e6314))
+* **components/molecule/selectPopover:** improve overlay outside click ([d8f65c5](https://github.com/SUI-Components/sui-components/commit/d8f65c5011b4df4921044832122ce6d1967674fe))
+
+
+
+# 1.35.0 (2022-10-20)
+
+
+
+# 1.34.0 (2022-10-19)
+
+
+### Features
+
+* **components/molecule/selectPopover:** add overlay as react portal ([d7a504f](https://github.com/SUI-Components/sui-components/commit/d7a504f3d456deb0d0141432aaf3093b94fff70f))
+* **components/molecule/selectPopover:** improve overlay position ([8b3d146](https://github.com/SUI-Components/sui-components/commit/8b3d1467082797599ef562a425b9a66521015ad0))
+* **components/molecule/selectPopover:** overlayContentRef default value ([4c56ed7](https://github.com/SUI-Components/sui-components/commit/4c56ed77515511715cccb6318b46e4fef110437a))
+* **components/molecule/selectPopover:** remove unnecessary class ([d52489f](https://github.com/SUI-Components/sui-components/commit/d52489facc557cb481234347340a5998fea1f3f0))
+* **components/molecule/selectPopover:** show overlay from selected type ([6a8beb8](https://github.com/SUI-Components/sui-components/commit/6a8beb8860f8bb39df0716f3c5cd7736557ae78a))
+* **components/molecule/selectPopover:** show portal node only if select popover is open ([bc6e613](https://github.com/SUI-Components/sui-components/commit/bc6e613fc29b51ed9f09118ab3b25eda2913aef0))
+* **components/molecule/selectPopover:** update isOpen behavior ([a903d46](https://github.com/SUI-Components/sui-components/commit/a903d46848e6cc7515a9d20aeee5906299fac52c))
+
+
+
# 1.33.0 (2022-08-25)
diff --git a/components/molecule/selectPopover/demo/index.js b/components/molecule/selectPopover/demo/index.js
index 87e8239185..f9e274ce7f 100644
--- a/components/molecule/selectPopover/demo/index.js
+++ b/components/molecule/selectPopover/demo/index.js
@@ -1,7 +1,8 @@
/* eslint-disable react/prop-types */
-import {useState} from 'react'
+import {useRef, useState} from 'react'
import MoleculeSelectPopover, {
+ selectPopoverOverlayTypes,
selectPopoverPlacements,
selectPopoverSizes
} from 'components/molecule/selectPopover/src/index.js'
@@ -34,6 +35,9 @@ const Demo = () => {
const [addCustomButton, setAddCustomButton] = useState(false)
const [customContentWrapper, setCustomContentWrapper] = useState(false)
const [renderSelect, setRenderSelect] = useState(false)
+ const [overlayType, setOverlayType] = useState(selectPopoverOverlayTypes.NONE)
+
+ const overlayContentRef = useRef()
const handleChangeItem = event => {
const {target} = event
@@ -121,6 +125,25 @@ const Demo = () => {
))}
+ +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo + recusandae labore numquam aliquam? Neque unde excepturi nam labore + velit a accusantium alias sunt quos voluptatem vel similique, + pariatur fugiat voluptate. +
++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, + incidunt animi a dignissimos aliquid voluptas quo quisquam adipisci + distinctio accusamus, officiis amet mollitia error, dolore vero + similique nihil? Corrupti, quaerat. +
++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam + possimus cumque ut sunt? Quo aperiam id magni placeat iusto, quidem + corporis enim, iste ad sapiente distinctio dicta, voluptatem minima + fuga! +
++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem + sint ratione architecto iste sapiente repudiandae inventore fugit + expedita deleniti! Debitis maiores corrupti ducimus id cum veniam + distinctio eos fuga repellat. +
+
- {renderSelect()}
- {renderContentWrapper()}
-
+ <>
+
+ {renderSelect()}
+ {renderContentWrapper()}
+
+ {hasOverlay && (
+
+ {childrenChild}
+
+ )
+ }
}
return activeContent
}, null)
return (
-
)
}
@@ -69,6 +84,9 @@ MoleculeTabs.propTypes = {
/** children */
children: PropTypes.any,
+ /** id used to make tabs unique */
+ id: PropTypes.string,
+
/** onChange */
onChange: PropTypes.func,
diff --git a/components/molecule/tabs/test/index.test.js b/components/molecule/tabs/test/index.test.js
index 36633d62dd..0128f895b0 100644
--- a/components/molecule/tabs/test/index.test.js
+++ b/components/molecule/tabs/test/index.test.js
@@ -10,6 +10,8 @@ import ReactDOM from 'react-dom'
import chai, {expect} from 'chai'
import chaiDOM from 'chai-dom'
+import {fireEvent} from '@testing-library/react'
+
import json from '../package.json'
import * as pkg from '../src/index.js'
@@ -148,6 +150,42 @@ describe(json.name, () => {
count[2].toString()
)
})
+
+ it('should switch content when tab 2 is clicked', () => {
+ // Given
+ const library = pkg
+ const {MoleculeTab} = library
+ const expectedContent1 = 'Content 1'
+ const expectedContent2 = 'Content 2'
+ const props = {
+ children: [
+ -
+
-
{extendedChildren}
{activeTabContent}
- ) : null}
+ {activeTabContent}