[v14] Web: Add disabled state to RadioGroup and add new icon (#32758)

* Add ArrowFatLinesUp icon

* Add disabled state to RadioGroup options

* Address CR and update snapshot

web/packages/design/src/Icon/Icons.story.tsx

@@ -45,6 +45,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.Archive} text="Archive" />
     <IconBox IconCmpt={Icon.ArrowBack} text="ArrowBack" />
     <IconBox IconCmpt={Icon.ArrowDown} text="ArrowDown" />
+    <IconBox IconCmpt={Icon.ArrowFatLinesUp} text="ArrowFatLinesUp" />
     <IconBox IconCmpt={Icon.ArrowForward} text="ArrowForward" />
     <IconBox IconCmpt={Icon.ArrowUp} text="ArrowUp" />
     <IconBox IconCmpt={Icon.BookOpenText} text="BookOpenText" />

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 (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-arrowfatlinesup"
+      {...otherProps}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.4697 1.71967C11.7626 1.42678 12.2375 1.42678 12.5304 1.71967L21.5304 10.7197C21.7449 10.9342 21.809 11.2568 21.6929 11.537C21.5768 11.8173 21.3034 12 21 12H17.25V14.25C17.25 14.6642 16.9142 15 16.5 15H7.50002C7.08581 15 6.75002 14.6642 6.75002 14.25V12H3.00002C2.69668 12 2.4232 11.8173 2.30711 11.537C2.19103 11.2568 2.25519 10.9342 2.46969 10.7197L11.4697 1.71967ZM4.81068 10.5H7.50002C7.91424 10.5 8.25002 10.8358 8.25002 11.25V13.5H15.75V11.25C15.75 10.8358 16.0858 10.5 16.5 10.5H19.1894L12 3.31066L4.81068 10.5Z"
+      />
+      <path d="M6.75 20.25C6.75 19.8358 7.08579 19.5 7.5 19.5H16.5C16.9142 19.5 17.25 19.8358 17.25 20.25C17.25 20.6642 16.9142 21 16.5 21H7.5C7.08579 21 6.75 20.6642 6.75 20.25Z" />
+      <path d="M7.5 16.5C7.08579 16.5 6.75 16.8358 6.75 17.25C6.75 17.6642 7.08579 18 7.5 18H16.5C16.9142 18 17.25 17.6642 17.25 17.25C17.25 16.8358 16.9142 16.5 16.5 16.5H7.5Z" />
+    </Icon>
+  );
+}

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';

web/packages/design/src/RadioGroup/RadioGroup.story.tsx

@@ -47,7 +47,7 @@ export const Default = () => {
           value={'Second option'}
         />
       </Box>
-      <Box>
+      <Box mr={6}>
         <h4>Object options with value set</h4>
         <RadioGroup
           name="example3"
@@ -61,6 +61,20 @@ export const Default = () => {
           value={'1'}
         />
       </Box>
+      <Box>
+        <h4>With a disabled value</h4>
+        <RadioGroup
+          name="example3"
+          options={[
+            { value: '1', label: 'First option' },
+            {
+              value: '2',
+              label: 'Disabled option',
+              disabled: true,
+            },
+          ]}
+        />
+      </Box>
     </Flex>
   );
 };

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 (
     <label
       css={`
         display: flex;
         align-items: center;
-        cursor: pointer;
+        cursor: ${optionDisabled ? 'not-allowed' : 'pointer'};
       `}
     >
       <input
@@ -100,8 +104,9 @@ function Radio(props: RadioProps) {
         checked={props.checked}
         onChange={() => props.onChange?.(optionValue)}
         value={optionValue}
+        disabled={optionDisabled}
       />
-      <span>{optionLabel}</span>
+      <span css={{ opacity: optionDisabled ? 0.5 : 1 }}>{optionLabel}</span>
     </label>
   );
 }