Added image for UI types, fixed UI for input selections, used selecta…

…ble cards component

packages/react-components/react-components/stories/ComponentSelector/SelectionCard.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { makeStyles, Button, Caption1, tokens, Text, Checkbox } from '@fluentui/react-components';
+import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { Card, CardHeader, CardPreview, CardProps } from '@fluentui/react-components';
+
+const resolveAsset = (asset: string) => {
+  const ASSET_URL = 'https://fluent2websitecdn.azureedge.net/cdn/';
+
+  return `${ASSET_URL}${asset}`;
+};
+
+const useStyles = makeStyles({
+  main: {
+    gap: '16px',
+    display: 'flex',
+    flexWrap: 'wrap',
+    margin: '5px 10px 10px 5px',
+  },
+
+  card: {
+    width: '250px',
+    maxWidth: '100%',
+    height: 'fit-content',
+  },
+
+  caption: {
+    color: tokens.colorNeutralForeground3,
+  },
+
+  cardImage: {
+    borderRadius: tokens.borderRadiusXLarge,
+    border: '1px solid var(--colorNeutralStroke1, #e1dfdd)',
+    filter: 'grayscale(100%) brightness(95%)',
+    opacity: 0.5,
+
+    '&:hover': {
+      filter: 'grayscale(0%) brightness(100%)',
+      opacity: 1,
+    },
+  },
+  cardImageSelected: {
+    borderRadius: tokens.borderRadiusXLarge,
+    border: '1px solid var(--colorNeutralStroke1, #e1dfdd)',
+    filter: 'grayscale(0%) brightness(100%)',
+    opacity: 1,
+  },
+
+  grayBackground: {
+    padding: '0 15px 15px',
+  },
+});
+
+export const SelectionCard = props => {
+  const styles = useStyles();
+  const [selected, setSelected] = React.useState(false);
+  const [hovered, setHovered] = React.useState(false);
+
+  const linkRef = React.useRef<HTMLAnchorElement>(null);
+
+  const setCheckboxState = React.useCallback(({ selected, checked }, setFn) => setFn(!!(selected || checked)), []);
+
+  const onSelectedCardChange = React.useCallback(
+    (_, state) => {
+      setCheckboxState(state, setSelected);
+      props.onChange(_, state, props.name);
+    },
+    [setCheckboxState],
+  );
+
+  return (
+    <div className={styles.main}>
+      <Card
+        className={styles.card}
+        {...props}
+        floatingAction={<Checkbox onChange={onSelectedCardChange} checked={selected} />}
+        selected={selected}
+        onSelectionChange={onSelectedCardChange}
+        onMouseOver={() => setHovered(true)}
+        onMouseOut={() => setHovered(false)}
+      >
+        <CardHeader
+          header={<Text weight="semibold">BASIC INPUTS</Text>}
+          description={<Caption1 className={styles.caption}>{props.displayName}</Caption1>}
+        />
+        <CardPreview className={styles.grayBackground}>
+          <img
+            className={selected || hovered ? styles.cardImageSelected : styles.cardImage}
+            src={resolveAsset(props.image)}
+            alt="Presentation Preview"
+          />
+        </CardPreview>
+      </Card>
+    </div>
+  );
+};

packages/react-components/react-components/stories/ComponentSelector/Selector.stories.tsx

@@ -50,6 +50,7 @@ import {
   GroupsDef,
 } from './components-definitions/index';
 import { create, get } from 'lodash';
+import { SelectionCard } from './SelectionCard';
 
 const decisionRadioValues: Record<string, string[]> = {
   navigationBy: ['navigationByArrowKeys', 'navigationByTabKey'],
@@ -107,13 +108,8 @@ const useStyles = makeStyles({
   questionContainer: {
     display: 'flex',
   },
-  questionLeftSide: {
-    'flex-basis': '10%',
-  },
   questionRightSide: {
     borderLeft: '1px solid #ff00ff',
-    'flex-basis': '90%',
-    'flex-shrink': 0,
     padding: '0 10px',
   },
   radioItem: {
@@ -396,26 +392,22 @@ export const Selector = () => {
     return definitionsWithDisplayName;
   };
 
+  const onSelectionChange = (event, data, name) => {
+    if (!!data.selected) {
+      setSelectedComponents([...selectedComponents, name]);
+    } else {
+      setSelectedComponents(selectedComponents.filter(component => component !== name));
+    }
+  };
+
   const componentsToDisplay = namesOfComponents().map(definitionsWithDisplayName => (
     <>
-      <div data-id="wrapper" className={classes.componentWrapper}>
-        <Image src={getImage(definitionsWithDisplayName.displayName)} height={75} width={75} />
-        <div>
-          <span>{definitionsWithDisplayName.displayName}</span>
-          <Checkbox
-            aria-label={definitionsWithDisplayName.displayName}
-            onChange={(event, data) => {
-              if (data.checked) {
-                setSelectedComponents([...selectedComponents, definitionsWithDisplayName.name]);
-              } else {
-                setSelectedComponents(
-                  selectedComponents.filter(component => component !== definitionsWithDisplayName.name),
-                );
-              }
-            }}
-          />
-        </div>
-      </div>
+      <SelectionCard
+        displayName={definitionsWithDisplayName.displayName}
+        name={definitionsWithDisplayName.name}
+        image={definitionsWithDisplayName.img}
+        onChange={onSelectionChange}
+      />
     </>
   ));
 

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Accordion.json

@@ -1,5 +1,6 @@
 {
   "name": "Accordion",
   "component": "Accordion",
-  "attributes": ["expandable", "tabbable", "navigationByTabKey", "interactive"]
+  "attributes": ["expandable", "tabbable", "navigationByTabKey", "interactive"],
+  "img": "overview_accordion.B8eJ_Qlv.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/ButtonBase.json

@@ -1,4 +1,5 @@
 {
   "name": "ButtonBase",
-  "attributes": ["staysOnPage", "navigationByTabKey", "interactive"]
+  "attributes": ["staysOnPage", "navigationByTabKey", "interactive"],
+  "img": "overview_button.Baa-fciS.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Checkbox.json

@@ -1,5 +1,6 @@
 {
   "name": "Checkbox",
   "component": "Checkbox",
-  "attributes": ["multipleChoices", "notOnOrOff", "toggle", "notInsideMenu", "navigationByTabKey", "interactive"]
+  "attributes": ["multipleChoices", "notOnOrOff", "toggle", "notInsideMenu", "navigationByTabKey", "interactive"],
+  "img": "overview_checkbox.C4LCt4a7.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/InfoLabel.json

@@ -1,5 +1,6 @@
 {
   "name": "InfoLabel",
   "component": "InfoLabel",
-  "attributes": ["interactiveContent", "onClick", "navigationByTabKey", "interactive"]
+  "attributes": ["interactiveContent", "onClick", "navigationByTabKey", "interactive"],
+  "img": "overview_placeholder.DKLLlbq1.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Link.json

@@ -1,5 +1,6 @@
 {
   "name": "Link",
   "component": "Link",
-  "attributes": ["singleAction", "navigatesToPage", "navigationByTabKey", "interactive"]
+  "attributes": ["singleAction", "navigatesToPage", "navigationByTabKey", "interactive"],
+  "img": "overview_link.gTR54kn-.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/List.json

@@ -2,5 +2,6 @@
   "name": "List",
   "component": "List",
   "extends": "ListBase",
-  "attributes": ["static"]
+  "attributes": ["static"],
+  "img": "overview_menu.DZ_QmfGO.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/ListBase.json

@@ -1,5 +1,6 @@
 {
   "name": "ListBase",
   "attributes": ["narratesPosition", "singleColumn"],
-  "note": "Component not available yet, under development."
+  "note": "Component not available yet, under development.",
+  "img": "overview_menu.DZ_QmfGO.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/ListSingleAction.json

@@ -3,5 +3,6 @@
   "component": "List",
   "story": "Single Action",
   "extends": "ListBase",
-  "attributes": ["interactive", "navigationByArrowKeys"]
+  "attributes": ["interactive", "navigationByArrowKeys"],
+  "img": "overview_menu.DZ_QmfGO.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Menu.json

@@ -2,5 +2,6 @@
   "name": "Menu",
   "component": "Menu",
   "folder": "Menu",
-  "extends": "MenuBase"
+  "extends": "MenuBase",
+  "img": "overview_menu.DZ_QmfGO.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/MenuBase.json

@@ -1,4 +1,5 @@
 {
   "name": "MenuBase",
-  "attributes": ["insideMenu", "navigationByArrowKeys", "narratesPosition", "interactive"]
+  "attributes": ["insideMenu", "navigationByArrowKeys", "narratesPosition", "interactive"],
+  "img": "overview_menu.DZ_QmfGO.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/MenuButton.json

@@ -3,5 +3,6 @@
   "component": "MenuButton",
   "folder": "Button",
   "extends": "ButtonBase",
-  "attributes": ["opensMenu"]
+  "attributes": ["opensMenu"],
+  "img": "overview_button.Baa-fciS.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/MenuItemCheckbox.json

@@ -4,5 +4,6 @@
   "folder": "Menu",
   "story": "Checkbox Items",
   "extends": "MenuBase",
-  "attributes": ["multipleChoices", "notOnOrOff", "toggle"]
+  "attributes": ["multipleChoices", "notOnOrOff", "toggle"],
+  "img": "overview_checkbox.C4LCt4a7.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/MenuItemRadio.json

@@ -4,5 +4,6 @@
   "folder": "Menu",
   "story": "Radio Items",
   "extends": "MenuBase",
-  "attributes": ["singleChoice", "notOnOrOff"]
+  "attributes": ["singleChoice", "notOnOrOff"],
+  "img": "overview_radiogroup.CsXFFZdv.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/MenuSubmenu.json

@@ -4,5 +4,6 @@
   "folder": "Menu",
   "story": "Nested Submenus",
   "extends": "MenuBase",
-  "attributes": ["nested"]
+  "attributes": ["nested"],
+  "img": "overview_menu.DZ_QmfGO.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/SplitButton.json

@@ -3,5 +3,6 @@
   "component": "SplitButton",
   "folder": "Button",
   "extends": "ButtonBase",
-  "attributes": ["moreActions"]
+  "attributes": ["moreActions"],
+  "img": "overview_spin.c4zwZGzQ.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TabList.json

@@ -1,5 +1,6 @@
 {
   "name": "TabList",
   "component": "TabList",
-  "attributes": ["interactive", "navigationByArrowKeys", "narratesPosition"]
+  "attributes": ["interactive", "navigationByArrowKeys", "narratesPosition"],
+  "img": "overview_tablist.CTZsc6f-.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Table.json

@@ -2,5 +2,6 @@
   "name": "Table",
   "component": "Table",
   "extends": "TableBase",
-  "attributes": ["static"]
+  "attributes": ["static"],
+  "img": "overview_tablist.CTZsc6f-.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TableBase.json

@@ -1,4 +1,5 @@
 {
   "name": "TableBase",
-  "attributes": ["columnsAndRows", "narratesPosition"]
+  "attributes": ["columnsAndRows", "narratesPosition"],
+  "img": "overview_tablist.CTZsc6f-.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TableCellActions.json

@@ -3,5 +3,6 @@
   "component": "Table",
   "story": "Cell Actions",
   "extends": "TableBase",
-  "attributes": ["interactive", "navigationByTabKey"]
+  "attributes": ["interactive", "navigationByTabKey"],
+  "img": "overview_tablist.CTZsc6f-.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TableCellNavigation.json

@@ -3,5 +3,6 @@
   "component": "Table",
   "story": "Cell Navigation",
   "extends": "TableBase",
-  "attributes": ["interactive", "navigationByArrowKeys"]
+  "attributes": ["interactive", "navigationByArrowKeys"],
+  "img": "overview_tablist.CTZsc6f-.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Text.json

@@ -2,5 +2,6 @@
   "name": "Text",
   "component": "Text",
   "attributes": ["textOrHeading", "static"],
-  "note": "Use the 'as' prop to change text to heading."
+  "note": "Use the 'as' prop to change text to heading.",
+  "img": "overview_text.B8EWu50L.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/ToggleButton.json

@@ -3,5 +3,6 @@
   "component": "ToggleButton",
   "folder": "Button",
   "extends": "ButtonBase",
-  "attributes": ["singleAction", "multipleChoices", "onOrOff", "toggle"]
+  "attributes": ["singleAction", "multipleChoices", "onOrOff", "toggle"],
+  "img": "overview_button.Baa-fciS.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Tooltip.json

@@ -1,5 +1,6 @@
 {
   "name": "Tooltip",
   "component": "Tooltip",
-  "attributes": ["nonInteractiveContent", "onHover", "navigationByTabKey", "interactive"]
+  "attributes": ["nonInteractiveContent", "onHover", "navigationByTabKey", "interactive"],
+  "img": "overview_tooltip.DzdzrdMi.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/Tree.json

@@ -1,5 +1,6 @@
 {
   "name": "Tree",
   "component": "Tree",
-  "extends": "TreeBase"
+  "extends": "TreeBase",
+  "img": "overview_accordion.B8eJ_Qlv.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TreeBase.json

@@ -1,4 +1,5 @@
 {
   "name": "TreeBase",
-  "attributes": ["interactive", "navigationByArrowKeys", "hierarchical", "narratesPosition"]
+  "attributes": ["interactive", "navigationByArrowKeys", "hierarchical", "narratesPosition"],
+  "img": "overview_accordion.B8eJ_Qlv.png"
 }

packages/react-components/react-components/stories/ComponentSelector/components-definitions/TreeSelection.json

@@ -3,5 +3,6 @@
   "component": "Tree",
   "story": "Selection",
   "extends": "TreeBase",
-  "attributes": ["toggle"]
+  "attributes": ["toggle"],
+  "img": "overview_accordion.B8eJ_Qlv.png"
 }