Merge pull request #616 from discoverfinancial/device-layers-aaron

Device layers aaron
finos · Sep 21, 2023 · 14a62e7 · 14a62e7
2 parents bfe2738 + 2d4be05
commit 14a62e7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/code/src/ui/src/components/AccessibilityLayersButton.tsx b/code/src/ui/src/components/AccessibilityLayersButton.tsx
@@ -7,6 +7,7 @@ import { Checkbox, FormControl, InputLabel,
     ListItemText, MenuItem, Select, SelectChangeEvent } from '@mui/material';
 import { DesignSystem } from 'a11y-theme-builder-sdk';
 import './AccessibilityLayersButton.css';
+import { StringSelectable } from './editors/StringSelectable';
 
 const name = "AccessibilityLayersButton";
 
@@ -55,7 +56,7 @@ export const AccessibilityLayersButton: React.FC<Props> = ({ designSystem}) => {
 
     return (
             <div>
-                <div id="a11y-layers-multiple-checkbox-label" className="label">Accessibility Layers:</div>
+                <div id="a11y-layers-multiple-checkbox-label" className="label">Theme Layers:</div>
                 <FormControl sx={{ width: 400, paddingRight: "4px" }}>
 
                     <Select
@@ -89,6 +90,9 @@ export const AccessibilityLayersButton: React.FC<Props> = ({ designSystem}) => {
                                 <ListItemText primary={prop.name} />
                             </MenuItem>
                         ))}
+                        <MenuItem key={designSystem.layers.deviceTarget.name} value={designSystem.layers.deviceTarget.name}>
+                            <StringSelectable property={designSystem.layers.deviceTarget} variant='radio' defaultValue='desktop' />
+                        </MenuItem>
                     </Select>
                 </FormControl>
             </div>

diff --git a/code/src/ui/src/mui-a11y-tb/themes/TB.css b/code/src/ui/src/mui-a11y-tb/themes/TB.css
@@ -2784,7 +2784,7 @@
     --text-gradient: linear-gradient(45deg, var(--text-gradient-a) 0%, var(--text-gradient-b) 100%);
     --color-drop: rgba(0,0,0,.2);
   }
-  [data-device="table"] {
+  [data-device="tablet"] {
     --min-target: 44px;
     --h1FontSize: 40px;
     --h2FontSize: calc(calc(calc( calc(var(--h1FontSize) - var(--h6FontSize))/5) * 4) +  var(--h6FontSize));

diff --git a/code/src/ui/src/pages/DesignSystemPage.tsx b/code/src/ui/src/pages/DesignSystemPage.tsx
@@ -32,6 +32,7 @@ interface Props {
 interface AccessibleLayerContainerAttributes {
     "data-typography"?: string;
     "data-animation"?: string;
+    "data-device"?: string;
 }
 
 let initComplete = false;
@@ -107,9 +108,13 @@ const DesignSystemPage: React.FC<Props> = ({user, storage, themeName, setThemeNa
             const layerChangeListener = function (event: EventValueChange<Boolean>) {
                 UpdateContainerLayerInfo();
             };
+            const deviceTargetListener = function (event: EventValueChange<String>) {
+                UpdateContainerLayerInfo();
+            };
             designSystem.layers.colorBlind.setPropertyListener("colorBlindListener", layerChangeListener);
             designSystem.layers.dyslexia.setPropertyListener("dyslexiaListener", layerChangeListener);
             designSystem.layers.motionSensitivity.setPropertyListener("motionSensativityListener", layerChangeListener);
+            designSystem.layers.deviceTarget.setPropertyListener("deviceTargetListener", deviceTargetListener);
 
             UpdateContainerLayerInfo();
         }
@@ -136,6 +141,9 @@ const DesignSystemPage: React.FC<Props> = ({user, storage, themeName, setThemeNa
                 dsccn += " motion-sensitive";
                 attributes["data-animation"] = "sensitive";
             }
+            if (designSystem.layers.deviceTarget.getValue()) {
+                attributes["data-device"] = designSystem.layers.deviceTarget.getValue();
+            }
         }
 
         setDesignSystemContentClassName(dsccn);
@@ -164,7 +172,7 @@ const DesignSystemPage: React.FC<Props> = ({user, storage, themeName, setThemeNa
 
         return (
             <ThemeProvider theme={(themes as any)[themeName]}>
-                <div {...designSystemContainerAttributes} className={designSystemContentClassName}>
+                <div {...designSystemContainerAttributes} className="design-system-container">
                     <MeasureDiv setHeight={setDivHeight}>
                         <DesignSystemTitleBar designSystemNames={designSystemNames} designSystem={designSystem} />
                         <div className="design-system-tab-bar">