diff --git a/web/packages/design/src/Icon/Icons.story.tsx b/web/packages/design/src/Icon/Icons.story.tsx index 35023c1535a6..b80cf5238adf 100644 --- a/web/packages/design/src/Icon/Icons.story.tsx +++ b/web/packages/design/src/Icon/Icons.story.tsx @@ -45,6 +45,7 @@ export const Icons = () => ( + diff --git a/web/packages/design/src/Icon/Icons/ArrowFatLinesUp.tsx b/web/packages/design/src/Icon/Icons/ArrowFatLinesUp.tsx new file mode 100644 index 000000000000..d325f617736b --- /dev/null +++ b/web/packages/design/src/Icon/Icons/ArrowFatLinesUp.tsx @@ -0,0 +1,72 @@ +/* +Copyright 2023 Gravitational, Inc. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +/* MIT License + +Copyright (c) 2020 Phosphor Icons + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +*/ + +import React from 'react'; + +import { Icon, IconProps } from '../Icon'; + +/* + +THIS FILE IS GENERATED. DO NOT EDIT. + +*/ + +export function ArrowFatLinesUp({ + size = 24, + color, + ...otherProps +}: IconProps) { + return ( + + + + + + ); +} diff --git a/web/packages/design/src/Icon/assets/ArrowFatLinesUp.svg b/web/packages/design/src/Icon/assets/ArrowFatLinesUp.svg new file mode 100644 index 000000000000..d253b2f9552e --- /dev/null +++ b/web/packages/design/src/Icon/assets/ArrowFatLinesUp.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/packages/design/src/Icon/index.ts b/web/packages/design/src/Icon/index.ts index d3159101f50d..0aee3a6e4bc6 100644 --- a/web/packages/design/src/Icon/index.ts +++ b/web/packages/design/src/Icon/index.ts @@ -33,6 +33,7 @@ export { Application } from './Icons/Application'; export { Archive } from './Icons/Archive'; export { ArrowBack } from './Icons/ArrowBack'; export { ArrowDown } from './Icons/ArrowDown'; +export { ArrowFatLinesUp } from './Icons/ArrowFatLinesUp'; export { ArrowForward } from './Icons/ArrowForward'; export { ArrowUp } from './Icons/ArrowUp'; export { BookOpenText } from './Icons/BookOpenText'; diff --git a/web/packages/design/src/RadioGroup/RadioGroup.story.tsx b/web/packages/design/src/RadioGroup/RadioGroup.story.tsx index fd604704d98b..5064d4ba0b0b 100644 --- a/web/packages/design/src/RadioGroup/RadioGroup.story.tsx +++ b/web/packages/design/src/RadioGroup/RadioGroup.story.tsx @@ -47,7 +47,7 @@ export const Default = () => { value={'Second option'} /> - +

Object options with value set

{ value={'1'} />
+ +

With a disabled value

+ +
); }; diff --git a/web/packages/design/src/RadioGroup/RadioGroup.tsx b/web/packages/design/src/RadioGroup/RadioGroup.tsx index 4203eb5a1c6a..ca2f3c991382 100644 --- a/web/packages/design/src/RadioGroup/RadioGroup.tsx +++ b/web/packages/design/src/RadioGroup/RadioGroup.tsx @@ -21,6 +21,7 @@ import { Flex } from 'design'; interface RadioObjectOption { value: string; label: ReactNode; + disabled?: boolean; } type RadioOption = RadioObjectOption | string; @@ -79,13 +80,16 @@ function Radio(props: RadioProps) { const optionLabel = isRadioObjectOption(props.option) ? props.option.label : props.option; + const optionDisabled = isRadioObjectOption(props.option) + ? props.option.disabled + : undefined; return ( ); } diff --git a/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap b/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap index fe0d8ff2e2a3..ebaca56c218c 100644 --- a/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap +++ b/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap @@ -31,20 +31,20 @@ exports[`story.MfaDeviceError 1`] = ` margin-bottom: 4px; } -.c22 { +.c23 { box-sizing: border-box; margin-bottom: 24px; margin-right: 16px; width: 50%; } -.c25 { +.c26 { box-sizing: border-box; margin-bottom: 24px; width: 50%; } -.c26 { +.c27 { line-height: 1.5; margin: 0; display: inline-flex; @@ -72,16 +72,16 @@ exports[`story.MfaDeviceError 1`] = ` width: 100%; } -.c26:hover, -.c26:focus { +.c27:hover, +.c27:focus { background: #B29DFF; } -.c26:active { +.c27:active { background: #C5B6FF; } -.c26:disabled { +.c27:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; @@ -116,7 +116,7 @@ exports[`story.MfaDeviceError 1`] = ` color: #FFFFFF; } -.c19 { +.c20 { overflow: hidden; text-overflow: ellipsis; font-size: 12px; @@ -126,7 +126,7 @@ exports[`story.MfaDeviceError 1`] = ` text-align: center; } -.c29 { +.c30 { overflow: hidden; text-overflow: ellipsis; margin: 0px; @@ -139,7 +139,7 @@ exports[`story.MfaDeviceError 1`] = ` margin-right: 16px; } -.c24 { +.c25 { appearance: none; border: 1px solid rgba(255,255,255,0.54); border-radius: 4px; @@ -155,31 +155,31 @@ exports[`story.MfaDeviceError 1`] = ` margin-top: 4px; } -.c24:hover, -.c24:focus, -.c24:active { +.c25:hover, +.c25:focus, +.c25:active { border: 1px solid rgba(255,255,255,0.72); } -.c24::-ms-clear { +.c25::-ms-clear { display: none; } -.c24::placeholder { +.c25::placeholder { color: rgba(255,255,255,0.54); opacity: 1; } -.c24:read-only { +.c25:read-only { cursor: not-allowed; } -.c24:disabled { +.c25:disabled { color: rgba(255,255,255,0.36); border-color: rgba(255,255,255,0.36); } -.c23 { +.c24 { color: #FFFFFF; display: block; font-size: 12px; @@ -187,7 +187,7 @@ exports[`story.MfaDeviceError 1`] = ` margin-bottom: 0px; } -.c20 { +.c21 { color: #009EFF; font-weight: normal; background: none; @@ -195,7 +195,7 @@ exports[`story.MfaDeviceError 1`] = ` text-transform: none; } -.c17 { +.c18 { display: block; outline: none; width: 145px; @@ -230,7 +230,7 @@ exports[`story.MfaDeviceError 1`] = ` gap: 16px; } -.c16 { +.c17 { box-sizing: border-box; padding-left: 16px; padding-right: 16px; @@ -242,14 +242,14 @@ exports[`story.MfaDeviceError 1`] = ` flex-direction: column; } -.c21 { +.c22 { box-sizing: border-box; height: 100px; display: flex; align-items: center; } -.c28 { +.c29 { box-sizing: border-box; display: flex; justify-content: center; @@ -257,20 +257,20 @@ exports[`story.MfaDeviceError 1`] = ` gap: 50px; } -.c27 { +.c28 { padding-bottom: 24px; width: 100%; color: white; } -.c30 { +.c31 { color: white; text-decoration: none; } -.c30:hover, -.c30:active, -.c30:focus { +.c31:hover, +.c31:active, +.c31:focus { color: rgba(255,255,255,0.54); } @@ -322,6 +322,10 @@ exports[`story.MfaDeviceError 1`] = ` cursor: inherit; } +.c16 { + opacity: 1; +} + .c4 { box-sizing: border-box; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12); @@ -334,12 +338,12 @@ exports[`story.MfaDeviceError 1`] = ` overflow-y: auto; } -.c18 { +.c19 { border: 4px solid white; } @media screen and (max-width:800px) { - .c28 { + .c29 { flex-direction: column-reverse; text-align: center; gap: 10px; @@ -456,31 +460,33 @@ exports[`story.MfaDeviceError 1`] = ` type="radio" value="otp" /> - + Authenticator App
Scan the QR Code with any authenticator app and enter the generated code. We recommend