From 812b407816eaf57c5db31a860b102caa91b6fa39 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Fri, 25 Aug 2023 16:07:31 +0200 Subject: [PATCH 1/3] SWED-2266 dropdown disable animation class & docs --- .../Dropdown/__snapshots__/index.test.js.snap | 12 ++++ .../components/Dropdown/constants.js | 31 +++++++++- .../components/Dropdown/index.js | 5 ++ src/App/components/Dropdown/index.js | 17 +++++- src/less/components/dropdown.less | 56 +++++++++---------- src/less/variables-swedbankpay.less | 7 +++ 6 files changed, 95 insertions(+), 33 deletions(-) diff --git a/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap index c2eb637aea..d11dd40a1e 100644 --- a/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap @@ -292,6 +292,18 @@ exports[`Documentation: Dropdown DeveloperDocumentation renders 1`] = ` > Developer Documentation +

+ Style +

+

+ Add + + .no-rotation + + CSS class on the dropdown toggle to disable the icon rotation. +

JavaScript methods

diff --git a/src/App/ComponentsDocumentation/components/Dropdown/constants.js b/src/App/ComponentsDocumentation/components/Dropdown/constants.js index 6483b0415e..639a2c4a66 100644 --- a/src/App/ComponentsDocumentation/components/Dropdown/constants.js +++ b/src/App/ComponentsDocumentation/components/Dropdown/constants.js @@ -147,7 +147,7 @@ const dropdownSidebarOptions = () => ({ ], }, { - id: "preffered_position", + id: "preferred_position", title: "Position", values: [ { @@ -186,6 +186,19 @@ const dropdownSidebarOptions = () => ({ ], }, ], + checkbox: [ + { + inputs: [ + { + id: "toggle-icon-rotation", + name: "Disable toggle icon rotation", + value: { + noRotation: true, + }, + }, + ], + }, + ], }); export const overviewDropdown = { @@ -237,7 +250,7 @@ export const overviewDropdown = { ], }, { - id: "preffered_position", + id: "preferred_position", title: "Position", values: [ { @@ -276,6 +289,19 @@ export const overviewDropdown = { ], }, ], + checkbox: [ + { + inputs: [ + { + id: "toggle-icon-rotation", + name: "Disable toggle icon rotation", + value: { + noRotation: true, + }, + }, + ], + }, + ], }, title: "Select", description: ( @@ -485,6 +511,7 @@ export const howToUse = [ icon="filter_list" iconAfter={false} largePadding={true} + noRotation={true} /> ( const DeveloperDocumentation = () => (

Developer Documentation

+

Style

+

+ Add CSS class on the + dropdown toggle to disable the icon rotation. +

JavaScript methods

Use to initialize diff --git a/src/App/components/Dropdown/index.js b/src/App/components/Dropdown/index.js index 2a2a47fd5f..13e96bd4e3 100644 --- a/src/App/components/Dropdown/index.js +++ b/src/App/components/Dropdown/index.js @@ -2,7 +2,13 @@ import React, { useEffect, useState, Fragment } from "react"; import PropTypes from "prop-types"; import { dropdown } from "@src/scripts/main"; -const DropdownSelect = ({ disabled, errorMessage, fullWidth, position }) => { +const DropdownSelect = ({ + disabled, + errorMessage, + fullWidth, + position, + noRotation = false, +}) => { const [buttonLabel, setButtonLabel] = useState("Card type"); const cardTypes = [ "VISA", @@ -28,7 +34,7 @@ const DropdownSelect = ({ disabled, errorMessage, fullWidth, position }) => {

{"\n"}