✨ Add disabled status to the BaseElement

src/components/BaseElement.stories.jsx

@@ -24,6 +24,7 @@ export const Default = props => (
 )
 Default.args = {
     kind: "div",
+    disabled: false,
 }
 
 
@@ -32,3 +33,10 @@ CustomColor.args = {
     ...Default.args,
     customColor: "#ff7f00",
 }
+
+
+export const Disabled = Default.bind({})
+Disabled.args = {
+    ...Default.args,
+    disabled: true,
+}

src/components/BaseElement.tsx

@@ -11,6 +11,7 @@ export interface BaseElementProps {
     kind: Types.ComponentKind,
     bluelibClassNames?: Types.ClassNames,
     customColor?: typeof Color,
+    disabled?: boolean,
 
     [props: string]: any,
 }
@@ -20,6 +21,9 @@ export function BaseElement({kind, bluelibClassNames, customColor, ...props}: Ba
     // Set the Bluelib color
     if(customColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("color", customColor)}
 
+    // Possibly disable the element
+    if(props.disabled) bluelibClassNames = mergeClassNames(bluelibClassNames, "status-disabled")
+
     // Map regular class names to module class names
     bluelibClassNames = BluelibMapper.rootToModule(bluelibClassNames)
     props.className = mergeClassNames(props.className, bluelibClassNames)

src/components/chapters/Chapter.stories.jsx

@@ -13,6 +13,9 @@ export default {
         customColor: {
             control: {type: "color"},
         },
+        disabled: {
+            control: {type: "boolean"},
+        },
     },
 }
 
@@ -24,7 +27,9 @@ export const Default = props => (
         <Box>Third</Box>
     </Chapter>
 )
-Default.args = {}
+Default.args = {
+    disabled: false,
+}
 
 
 export const AutoWrap = props => (
@@ -46,7 +51,9 @@ export const AutoWrap = props => (
         <Box>Fiftheenth</Box>
     </Chapter>
 )
-AutoWrap.args = {}
+AutoWrap.args = {
+    disabled: false,
+}
 
 
 export const ForceWrap = props => (
@@ -58,4 +65,6 @@ export const ForceWrap = props => (
         <Box>Fourth</Box>
     </Chapter>
 )
-ForceWrap.args = {}
+ForceWrap.args = {
+    disabled: false,
+}

src/components/images/Image.stories.jsx

@@ -9,6 +9,11 @@ export default {
     component: Image,
     title: "Images/Image",
     decorators: [Decorators.Bluelib],
+    argTypes: {
+        disabled: {
+            control: {type: "boolean"},
+        },
+    },
 }
 
 
@@ -18,6 +23,7 @@ export const NoLimit = props => (
 NoLimit.args = {
     src: PineappleWithSunglasses,
     limit: "no",
+    disabled: false,
 }
 
 

src/components/lists/DescriptionList.stories.jsx

@@ -12,6 +12,9 @@ export default {
         customColor: {
             control: {type: "color"},
         },
+        disabled: {
+            control: {type: "boolean"},
+        },
     },
 }
 
@@ -38,4 +41,6 @@ export const Default = props => (
         </DescriptionList.Value>
     </DescriptionList>
 )
-Default.args = {}
+Default.args = {
+    disabled: false,
+}

src/components/lists/List.stories.jsx

@@ -12,6 +12,9 @@ export default {
         customColor: {
             control: {type: "color"},
         },
+        disabled: {
+            control: {type: "boolean"},
+        },
     },
 }
 
@@ -24,11 +27,13 @@ export const Unordered = props => (
     </List>
 )
 Unordered.args = {
+    disabled: false,
     ordered: false,
 }
 
 
 export const Ordered = Unordered.bind({})
 Ordered.args = {
+    ...Unordered.args,
     ordered: true,
 }

src/components/panels/Box.stories.jsx

@@ -12,6 +12,9 @@ export default {
         customColor: {
             control: {type: "color"},
         },
+        disabled: {
+            control: {type: "boolean"},
+        },
     },
 }
 
@@ -21,7 +24,9 @@ export const Default = props => (
         This is a Box.
     </Box>
 )
-Default.args = {}
+Default.args = {
+    disabled: false,
+}
 
 
 export const Nested = props => (
@@ -33,7 +38,9 @@ export const Nested = props => (
         </Box>
     </Box>
 )
-Nested.args = {}
+Nested.args = {
+    disabled: false,
+}
 
 
 export const NestedMultiple = props => (
@@ -49,4 +56,6 @@ export const NestedMultiple = props => (
         </Box>
     </Box>
 )
-NestedMultiple.args = {}
+NestedMultiple.args = {
+    disabled: false,
+}

src/components/panels/Dialog.stories.jsx

@@ -12,6 +12,9 @@ export default {
         customColor: {
             control: {type: "color"},
         },
+        disabled: {
+            control: {type: "boolean"},
+        },
     },
 }
 
@@ -21,7 +24,9 @@ export const Default = props => (
         This is a Dialog.
     </Dialog>
 )
-Default.args = {}
+Default.args = {
+    disabled: false,
+}
 
 
 export const Nested = props => (
@@ -33,7 +38,9 @@ export const Nested = props => (
         </Dialog>
     </Dialog>
 )
-Nested.args = {}
+Nested.args = {
+    disabled: false,
+}
 
 
 export const NestedMultiple = props => (
@@ -49,4 +56,6 @@ export const NestedMultiple = props => (
         </Dialog>
     </Dialog>
 )
-NestedMultiple.args = {}
+NestedMultiple.args = {
+    disabled: false,
+}

src/components/panels/Panel.stories.jsx

@@ -12,6 +12,9 @@ export default {
         customColor: {
             control: {type: "color"},
         },
+        disabled: {
+            control: {type: "boolean"},
+        },
     },
 }
 
@@ -21,7 +24,9 @@ export const Default = props => (
         This is a Panel.
     </Panel>
 )
-Default.args = {}
+Default.args = {
+    disabled: false,
+}
 
 
 export const Nested = props => (
@@ -33,7 +38,9 @@ export const Nested = props => (
         </Panel>
     </Panel>
 )
-Nested.args = {}
+Nested.args = {
+    disabled: false,
+}
 
 
 export const NestedMultiple = props => (
@@ -49,4 +56,6 @@ export const NestedMultiple = props => (
         </Panel>
     </Panel>
 )
-NestedMultiple.args = {}
+NestedMultiple.args = {
+    disabled: false,
+}

src/components/panels/Parenthesis.stories.jsx

@@ -12,6 +12,9 @@ export default {
         customColor: {
             control: {type: "color"},
         },
+        disabled: {
+            control: {type: "boolean"},
+        },
     },
 }
 
@@ -21,7 +24,9 @@ export const Default = props => (
         This is a Parenthesis.
     </Parenthesis>
 )
-Default.args = {}
+Default.args = {
+    disabled: false,
+}
 
 
 export const Nested = props => (
@@ -33,7 +38,9 @@ export const Nested = props => (
         </Parenthesis>
     </Parenthesis>
 )
-Nested.args = {}
+Nested.args = {
+    disabled: false,
+}
 
 
 export const NestedMultiple = props => (
@@ -49,4 +56,6 @@ export const NestedMultiple = props => (
         </Parenthesis>
     </Parenthesis>
 )
-NestedMultiple.args = {}
+NestedMultiple.args = {
+    disabled: false,
+}

src/components/separators/Separator.stories.jsx

@@ -26,12 +26,14 @@ Regular.args = {
 
 export const Heavy = Regular.bind({})
 Heavy.args = {
+    ...Regular.args,
     weight: "heavy",
 }
 
 
 export const Light = Regular.bind({})
 Light.args = {
+    ...Regular.args,
     weight: "light",
 }
 

src/components/tables/Table.stories.jsx

@@ -12,6 +12,9 @@ export default {
         customColor: {
             control: {type: "color"},
         },
+        disabled: {
+            control: {type: "boolean"},
+        },
     },
 }
 
@@ -84,7 +87,9 @@ export const Brothers = props => (
         </Table.Footer>
     </Table>
 )
-Brothers.args = {}
+Brothers.args = {
+    disabled: false,
+}
 
 
 export const TicTacToe = props => (
@@ -129,7 +134,9 @@ export const TicTacToe = props => (
         </Table.Body>
     </Table>
 )
-TicTacToe.args = {}
+TicTacToe.args = {
+    disabled: false,
+}
 
 
 export const TierList = props => (
@@ -173,6 +180,8 @@ export const TierList = props => (
         </Table.Body>
     </Table>
 )
-TicTacToe.args = {}
+TierList.args = {
+    disabled: false,
+}