From 605fdc6d66c817310df5035626cb712991760961 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Thu, 19 Aug 2021 04:22:31 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20`disabled`=20status=20to=20th?= =?UTF-8?q?e=20BaseElement?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BaseElement.stories.jsx | 8 ++++++++ src/components/BaseElement.tsx | 4 ++++ src/components/chapters/Chapter.stories.jsx | 15 ++++++++++++--- src/components/images/Image.stories.jsx | 6 ++++++ src/components/lists/DescriptionList.stories.jsx | 7 ++++++- src/components/lists/List.stories.jsx | 5 +++++ src/components/panels/Box.stories.jsx | 15 ++++++++++++--- src/components/panels/Dialog.stories.jsx | 15 ++++++++++++--- src/components/panels/Panel.stories.jsx | 15 ++++++++++++--- src/components/panels/Parenthesis.stories.jsx | 15 ++++++++++++--- src/components/separators/Separator.stories.jsx | 2 ++ src/components/tables/Table.stories.jsx | 15 ++++++++++++--- 12 files changed, 103 insertions(+), 19 deletions(-) diff --git a/src/components/BaseElement.stories.jsx b/src/components/BaseElement.stories.jsx index f4b1eae..fe1c55f 100644 --- a/src/components/BaseElement.stories.jsx +++ b/src/components/BaseElement.stories.jsx @@ -24,6 +24,7 @@ export const Default = props => ( ) Default.args = { kind: "div", + disabled: false, } @@ -31,4 +32,11 @@ export const CustomColor = Default.bind({}) CustomColor.args = { ...Default.args, customColor: "#ff7f00", +} + + +export const Disabled = Default.bind({}) +Disabled.args = { + ...Default.args, + disabled: true, } \ No newline at end of file diff --git a/src/components/BaseElement.tsx b/src/components/BaseElement.tsx index 80799b9..56feffc 100644 --- a/src/components/BaseElement.tsx +++ b/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) diff --git a/src/components/chapters/Chapter.stories.jsx b/src/components/chapters/Chapter.stories.jsx index efd194d..f01ec3a 100644 --- a/src/components/chapters/Chapter.stories.jsx +++ b/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 => ( Third ) -Default.args = {} +Default.args = { + disabled: false, +} export const AutoWrap = props => ( @@ -46,7 +51,9 @@ export const AutoWrap = props => ( Fiftheenth ) -AutoWrap.args = {} +AutoWrap.args = { + disabled: false, +} export const ForceWrap = props => ( @@ -58,4 +65,6 @@ export const ForceWrap = props => ( Fourth ) -ForceWrap.args = {} \ No newline at end of file +ForceWrap.args = { + disabled: false, +} diff --git a/src/components/images/Image.stories.jsx b/src/components/images/Image.stories.jsx index b1fcc89..8f392e3 100644 --- a/src/components/images/Image.stories.jsx +++ b/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, } diff --git a/src/components/lists/DescriptionList.stories.jsx b/src/components/lists/DescriptionList.stories.jsx index 89981a0..811e0da 100644 --- a/src/components/lists/DescriptionList.stories.jsx +++ b/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 => ( ) -Default.args = {} +Default.args = { + disabled: false, +} diff --git a/src/components/lists/List.stories.jsx b/src/components/lists/List.stories.jsx index c736dc4..811d755 100644 --- a/src/components/lists/List.stories.jsx +++ b/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 => ( ) Unordered.args = { + disabled: false, ordered: false, } export const Ordered = Unordered.bind({}) Ordered.args = { + ...Unordered.args, ordered: true, } diff --git a/src/components/panels/Box.stories.jsx b/src/components/panels/Box.stories.jsx index f0d2563..369d52a 100644 --- a/src/components/panels/Box.stories.jsx +++ b/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. ) -Default.args = {} +Default.args = { + disabled: false, +} export const Nested = props => ( @@ -33,7 +38,9 @@ export const Nested = props => ( ) -Nested.args = {} +Nested.args = { + disabled: false, +} export const NestedMultiple = props => ( @@ -49,4 +56,6 @@ export const NestedMultiple = props => ( ) -NestedMultiple.args = {} +NestedMultiple.args = { + disabled: false, +} diff --git a/src/components/panels/Dialog.stories.jsx b/src/components/panels/Dialog.stories.jsx index 646a293..41d6d7c 100644 --- a/src/components/panels/Dialog.stories.jsx +++ b/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. ) -Default.args = {} +Default.args = { + disabled: false, +} export const Nested = props => ( @@ -33,7 +38,9 @@ export const Nested = props => ( ) -Nested.args = {} +Nested.args = { + disabled: false, +} export const NestedMultiple = props => ( @@ -49,4 +56,6 @@ export const NestedMultiple = props => ( ) -NestedMultiple.args = {} +NestedMultiple.args = { + disabled: false, +} diff --git a/src/components/panels/Panel.stories.jsx b/src/components/panels/Panel.stories.jsx index aeef9cc..ce3e7bf 100644 --- a/src/components/panels/Panel.stories.jsx +++ b/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. ) -Default.args = {} +Default.args = { + disabled: false, +} export const Nested = props => ( @@ -33,7 +38,9 @@ export const Nested = props => ( ) -Nested.args = {} +Nested.args = { + disabled: false, +} export const NestedMultiple = props => ( @@ -49,4 +56,6 @@ export const NestedMultiple = props => ( ) -NestedMultiple.args = {} +NestedMultiple.args = { + disabled: false, +} diff --git a/src/components/panels/Parenthesis.stories.jsx b/src/components/panels/Parenthesis.stories.jsx index 6a4912e..adbaca0 100644 --- a/src/components/panels/Parenthesis.stories.jsx +++ b/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. ) -Default.args = {} +Default.args = { + disabled: false, +} export const Nested = props => ( @@ -33,7 +38,9 @@ export const Nested = props => ( ) -Nested.args = {} +Nested.args = { + disabled: false, +} export const NestedMultiple = props => ( @@ -49,4 +56,6 @@ export const NestedMultiple = props => ( ) -NestedMultiple.args = {} +NestedMultiple.args = { + disabled: false, +} diff --git a/src/components/separators/Separator.stories.jsx b/src/components/separators/Separator.stories.jsx index 73f4831..58ce41c 100644 --- a/src/components/separators/Separator.stories.jsx +++ b/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", } diff --git a/src/components/tables/Table.stories.jsx b/src/components/tables/Table.stories.jsx index 48f6016..2758512 100644 --- a/src/components/tables/Table.stories.jsx +++ b/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 => ( ) -Brothers.args = {} +Brothers.args = { + disabled: false, +} export const TicTacToe = props => ( @@ -129,7 +134,9 @@ export const TicTacToe = props => ( ) -TicTacToe.args = {} +TicTacToe.args = { + disabled: false, +} export const TierList = props => ( @@ -173,6 +180,8 @@ export const TierList = props => ( ) -TicTacToe.args = {} +TierList.args = { + disabled: false, +}