From 96b48a6ca8d232a01aa1ed93a5679ca068137ae0 Mon Sep 17 00:00:00 2001 From: douara Date: Fri, 6 Oct 2023 15:08:38 +0800 Subject: [PATCH 01/10] Fix(Tooltip): Icon name not being provided --- packages/components/tooltip/src/tooltip.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/tooltip/src/tooltip.tsx b/packages/components/tooltip/src/tooltip.tsx index 3f64c3ee9..3448b936b 100644 --- a/packages/components/tooltip/src/tooltip.tsx +++ b/packages/components/tooltip/src/tooltip.tsx @@ -21,6 +21,7 @@ const Tooltip: React.FC = ({ onFocus = () => {}, onBlur = () => {}, href, + icon, ...props }) => { // use interaction @@ -109,7 +110,7 @@ const Tooltip: React.FC = ({ ) case "icon": - return + return } } From 4a0de3cda7e0ba414cc47af89c64037f2652d3d0 Mon Sep 17 00:00:00 2001 From: douara Date: Fri, 6 Oct 2023 19:50:51 +0800 Subject: [PATCH 02/10] New(Selector):documentation, Usage Page --- .../selector/stories/images/alignment.svg | 88 +++ .../selector/stories/images/anatomy.svg | 34 ++ .../selector/stories/images/forminator.svg | 557 ++++++++++++++++++ .../selector/stories/images/on-modal.svg | 343 +++++++++++ .../selector/stories/images/on-settings.svg | 179 ++++++ .../selector/stories/images/pro-selector.svg | 22 + .../stories/images/remove-process.svg | 170 ++++++ .../selector/stories/images/spacing.svg | 210 +++++++ .../selector/stories/images/states.svg | 398 +++++++++++++ .../selector/stories/images/variations.svg | 220 +++++++ .../components/selector/stories/selector.mdx | 31 +- .../stories/tabs/Examples/Informative.mdx | 19 + .../stories/tabs/Examples/Neutral.mdx | 19 + .../stories/tabs/Examples/Success.mdx | 19 + .../selector/stories/tabs/TabCode.mdx | 65 ++ .../selector/stories/tabs/TabExamples.mdx | 33 ++ .../selector/stories/tabs/TabUsage.mdx | 130 ++++ 17 files changed, 2527 insertions(+), 10 deletions(-) create mode 100644 packages/components/selector/stories/images/alignment.svg create mode 100644 packages/components/selector/stories/images/anatomy.svg create mode 100644 packages/components/selector/stories/images/forminator.svg create mode 100644 packages/components/selector/stories/images/on-modal.svg create mode 100644 packages/components/selector/stories/images/on-settings.svg create mode 100644 packages/components/selector/stories/images/pro-selector.svg create mode 100644 packages/components/selector/stories/images/remove-process.svg create mode 100644 packages/components/selector/stories/images/spacing.svg create mode 100644 packages/components/selector/stories/images/states.svg create mode 100644 packages/components/selector/stories/images/variations.svg create mode 100644 packages/components/selector/stories/tabs/Examples/Informative.mdx create mode 100644 packages/components/selector/stories/tabs/Examples/Neutral.mdx create mode 100644 packages/components/selector/stories/tabs/Examples/Success.mdx create mode 100644 packages/components/selector/stories/tabs/TabCode.mdx create mode 100644 packages/components/selector/stories/tabs/TabExamples.mdx create mode 100644 packages/components/selector/stories/tabs/TabUsage.mdx diff --git a/packages/components/selector/stories/images/alignment.svg b/packages/components/selector/stories/images/alignment.svg new file mode 100644 index 000000000..da2e0faa7 --- /dev/null +++ b/packages/components/selector/stories/images/alignment.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/selector/stories/images/anatomy.svg b/packages/components/selector/stories/images/anatomy.svg new file mode 100644 index 000000000..54844d191 --- /dev/null +++ b/packages/components/selector/stories/images/anatomy.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/selector/stories/images/forminator.svg b/packages/components/selector/stories/images/forminator.svg new file mode 100644 index 000000000..ce262dec5 --- /dev/null +++ b/packages/components/selector/stories/images/forminator.svg @@ -0,0 +1,557 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/selector/stories/images/on-modal.svg b/packages/components/selector/stories/images/on-modal.svg new file mode 100644 index 000000000..e5c3566b4 --- /dev/null +++ b/packages/components/selector/stories/images/on-modal.svg @@ -0,0 +1,343 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/selector/stories/images/on-settings.svg b/packages/components/selector/stories/images/on-settings.svg new file mode 100644 index 000000000..769b7caf4 --- /dev/null +++ b/packages/components/selector/stories/images/on-settings.svg @@ -0,0 +1,179 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/selector/stories/images/pro-selector.svg b/packages/components/selector/stories/images/pro-selector.svg new file mode 100644 index 000000000..f900e9e7d --- /dev/null +++ b/packages/components/selector/stories/images/pro-selector.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/selector/stories/images/remove-process.svg b/packages/components/selector/stories/images/remove-process.svg new file mode 100644 index 000000000..346cc844f --- /dev/null +++ b/packages/components/selector/stories/images/remove-process.svg @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/selector/stories/images/spacing.svg b/packages/components/selector/stories/images/spacing.svg new file mode 100644 index 000000000..bc2bc9a53 --- /dev/null +++ b/packages/components/selector/stories/images/spacing.svg @@ -0,0 +1,210 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/selector/stories/images/states.svg b/packages/components/selector/stories/images/states.svg new file mode 100644 index 000000000..c24530094 --- /dev/null +++ b/packages/components/selector/stories/images/states.svg @@ -0,0 +1,398 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/selector/stories/images/variations.svg b/packages/components/selector/stories/images/variations.svg new file mode 100644 index 000000000..dd7042f0d --- /dev/null +++ b/packages/components/selector/stories/images/variations.svg @@ -0,0 +1,220 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/selector/stories/selector.mdx b/packages/components/selector/stories/selector.mdx index fd96760f6..c7ea9b5a5 100644 --- a/packages/components/selector/stories/selector.mdx +++ b/packages/components/selector/stories/selector.mdx @@ -1,13 +1,24 @@ -import { Page, Section } from '@wpmudev/storybook'; -import { Unstyled } from '@storybook/blocks'; +import { Page } from "@wpmudev/storybook" +import { Unstyled } from "@storybook/blocks" + +import TabUsage from "./tabs/TabUsage.mdx" +import TabCode from "./tabs/TabCode.mdx" +import TabExamples from "./tabs/TabExamples.mdx" -
-

- Quiet for now, but get ready! Exciting stuff is coming. Our developers are working really hard behind the scenes to make it happen. Stay curious and excited! ๐ŸŒŸ๐Ÿ‘ท -

-

- In the meantime, feel free to explore our demo page for this component. -

-
+ +
+ +
+
+ +
+
+ +
+ diff --git a/packages/components/selector/stories/tabs/Examples/Informative.mdx b/packages/components/selector/stories/tabs/Examples/Informative.mdx new file mode 100644 index 000000000..649dd0cde --- /dev/null +++ b/packages/components/selector/stories/tabs/Examples/Informative.mdx @@ -0,0 +1,19 @@ +import { Section, Preview, Snippet } from "@wpmudev/storybook"; + +import dedent from "dedent"; + +export const InformativeCode = dedent` + Informative Example Code +` + +
+ + Your component with the example informative goes here + + {InformativeCode} + +
diff --git a/packages/components/selector/stories/tabs/Examples/Neutral.mdx b/packages/components/selector/stories/tabs/Examples/Neutral.mdx new file mode 100644 index 000000000..7ca0e6bf6 --- /dev/null +++ b/packages/components/selector/stories/tabs/Examples/Neutral.mdx @@ -0,0 +1,19 @@ +import { Section, Preview, Snippet } from "@wpmudev/storybook"; + +import dedent from "dedent"; + +export const NeutralCode = dedent` + Neutral Example State +` + +
+ + Your component with the Example state Neutral can go here + + {NeutralCode} + +
diff --git a/packages/components/selector/stories/tabs/Examples/Success.mdx b/packages/components/selector/stories/tabs/Examples/Success.mdx new file mode 100644 index 000000000..97d3bdedd --- /dev/null +++ b/packages/components/selector/stories/tabs/Examples/Success.mdx @@ -0,0 +1,19 @@ +import { Section, Preview, Snippet } from "@wpmudev/storybook"; + +import dedent from "dedent"; + +export const SuccessCode = dedent` + Success state example +` + +
+ + Success state example + + {SuccessCode} + +
diff --git a/packages/components/selector/stories/tabs/TabCode.mdx b/packages/components/selector/stories/tabs/TabCode.mdx new file mode 100644 index 000000000..874995465 --- /dev/null +++ b/packages/components/selector/stories/tabs/TabCode.mdx @@ -0,0 +1,65 @@ +import { Section, Row, Col, Table, List, Code, Tag } from "@wpmudev/storybook" + +
+

+ Install the Selector package as an individual + component or follow the Overview page instructions to get the complete SUI + Components package. +

+
+ +
+ +
+

Sets the semantic type for the accordion

+

+ Allowed options: + + neutral} /> + informative} /> + success} /> + warning} /> + critical} /> + +

+
+ +
+ +{/* * Use this for sub components */} + +
+

The [component name] offers a collection of nested subcomponents to be utilized within it. These subcomponents include:

+ +
+

+ This component represents an individual item or section of the accordion and comes with its + own set of props. +

+ +
+

+ prop description +

+
+ +
+

+ prop description +

+
+ +
+ +
diff --git a/packages/components/selector/stories/tabs/TabExamples.mdx b/packages/components/selector/stories/tabs/TabExamples.mdx new file mode 100644 index 000000000..cd59826e7 --- /dev/null +++ b/packages/components/selector/stories/tabs/TabExamples.mdx @@ -0,0 +1,33 @@ +import { Section, Switcher, Preview, Snippet, Code } from "@wpmudev/storybook"; +import { Accordion, AccordionItem, AccordionItemBody } from "../../src"; +import dedent from "dedent"; + +{/* Import Variations */} +import Neutral from "./Examples/Neutral.mdx" +import Informative from "./Examples/Informative.mdx" +import Success from "./Examples/Success.mdx" + +export const sampleCode = dedent` + Basic Examples +`; + +
+

Basic Accordion Example

+ Basic Example + {sampleCode} +
+ +
+ Use this if you need to switch between multiple options + +
+ +
+
+ +
+
+ +
+ +
diff --git a/packages/components/selector/stories/tabs/TabUsage.mdx b/packages/components/selector/stories/tabs/TabUsage.mdx new file mode 100644 index 000000000..2fc1265bc --- /dev/null +++ b/packages/components/selector/stories/tabs/TabUsage.mdx @@ -0,0 +1,130 @@ +import { Section, Row, Col, Code, List } from "@wpmudev/storybook" + +import Anatomy from "../images/anatomy.svg" +import Variations from "../images/variations.svg" +import States from "../images/states.svg" +import Alignment from "../images/alignment.svg" +import RemoveProcess from "../images/remove-process.svg" +import ProSelector from "../images/pro-selector.svg" +import Spacing from "../images/spacing.svg" +import OnModal from "../images/on-modal.svg" +import Forminator from "../images/forminator.svg" +import OnSettings from "../images/on-settings.svg" + +
+ + +

1. Header

+

The header includes title along with supportive icon and tag which are optional.

+ +

2. Body

+

A short description of the selector.

+ + + + Selector Anatomy + + + +
+ +
+

Selector component has 4 different variation.

+ Selector Variations + +

1. Default

+

Default selector includes an icon, and a label with supportive tag.

+ +

2. Compound Selector

+

Compound selector includes a header and body.

+ + + + Header The compound selector header includes an icon, label and supportive + tag. Depending on the design requirement, the icon can replaced with the product + icon. + + } + /> + + + Body Compound selector body comes with the general description. + + } + /> + + +

3. Image Selector

+

Similar like compound selector, Image selector also has header and body.

+ + + + Header Similar to Compound Selector. (Icon wonโ€™t be replaced with product icon.) + + } + /> + + + Body Image selector includes an image and description. Recommended image ration is 2:1. + + } + /> + + +

NOTE: Tags and descriptions are optional elements in the Selector component. however, it can be customised if necessary.

+ +

4. Icon only

+

Icon can be replaced with desired icon.

+ +
+ +
+ Selector States +
+ +
+

Selector type Default and Compound have center-aligned variation.

+ Selector Alignment +
+ +
+

+ Icon and Image selector allow users to use custom icon and image. These two + variation has delete action to remove the uploaded items. +

+ Selector Remove Process +
+ +
+ + +

+ Pro selectors are used for those selector which are available in premium + plan. +

+ + + Pro Selector + + +
+ +
+ Selector Spacing +
+ +
+ OnModal +
+ +
+ Selector Forminator +
+ +
+ Selector Forminator +
From 8bff50acd84ee055afbde9da72fbbcfb1a745fc3 Mon Sep 17 00:00:00 2001 From: douara Date: Fri, 6 Oct 2023 20:59:47 +0800 Subject: [PATCH 03/10] New(Selector):documentation, Code Page --- .../selector/stories/selector.stories.tsx | 4 +- .../selector/stories/tabs/TabCode.mdx | 108 +++++++++++------- 2 files changed, 72 insertions(+), 40 deletions(-) diff --git a/packages/components/selector/stories/selector.stories.tsx b/packages/components/selector/stories/selector.stories.tsx index 217338275..e891f2eda 100644 --- a/packages/components/selector/stories/selector.stories.tsx +++ b/packages/components/selector/stories/selector.stories.tsx @@ -65,10 +65,12 @@ export const Selector = ({ variation, ...args }) => { key={index} name={option.name} value={option.value} - onChange={onChange} + //onChange={onChange} isChecked={val === option.value} variation={variation} {...args} + label="label" + onChange={(a, b, c) => console.log(a, b, c)} /> ))} diff --git a/packages/components/selector/stories/tabs/TabCode.mdx b/packages/components/selector/stories/tabs/TabCode.mdx index 874995465..6959b3349 100644 --- a/packages/components/selector/stories/tabs/TabCode.mdx +++ b/packages/components/selector/stories/tabs/TabCode.mdx @@ -13,53 +13,83 @@ import { Section, Row, Col, Table, List, Code, Tag } from "@wpmudev/storybook"
+
+

A label text for the hidden radion input ( For Screen Readers )

+
-
-

Sets the semantic type for the accordion

-

- Allowed options: - - neutral} /> - informative} /> - success} /> - warning} /> - critical} /> - -

-
+
+

A label text for screen readers

+
-
+
+

Value of the radio input

+
-{/* * Use this for sub components */} +
+

Whether the radio input is checked or not

+
-
-

The [component name] offers a collection of nested subcomponents to be utilized within it. These subcomponents include:

+
+

Whether the radio input is disabled or not

+
-
-

- This component represents an individual item or section of the accordion and comes with its - own set of props. -

+
+

When set to true, the Selector appears in the pro variation

+
-
-

- prop description -

-
+
+

Specifies the alignment of the content, it could be one of two values:

+ + left}/> + center}/> + +
-
-

- prop description -

-
+
+

The component variation style

+

Allowed options

+ + default}/> + icon-only}/> + compound}/> + image}/> + +
+
+

A callback function to be invoked upon radio input change, the function has the following parameter

+ + isChecked The new checked value of the input }/> + value The radio option value }/> + name The name of the radio input }/> +
From 877682f7f13e394cd56295ae06b701411d46ac74 Mon Sep 17 00:00:00 2001 From: douara Date: Mon, 9 Oct 2023 15:52:40 +0800 Subject: [PATCH 04/10] Fix(Selector): selection not working in story --- packages/components/selector/stories/selector.stories.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/components/selector/stories/selector.stories.tsx b/packages/components/selector/stories/selector.stories.tsx index e891f2eda..9827cf27b 100644 --- a/packages/components/selector/stories/selector.stories.tsx +++ b/packages/components/selector/stories/selector.stories.tsx @@ -40,7 +40,7 @@ const options = [ // Build story export const Selector = ({ variation, ...args }) => { - const [val, setVal] = useState("") + const [val, setVal] = useState() const boxStyles = { padding: 20, @@ -48,7 +48,7 @@ export const Selector = ({ variation, ...args }) => { // background: "#fff", } - const onChange = (isChecked, value, name) => { + const onChange = (_isChecked: boolean, value: number, _name: string) => { setVal(value) } @@ -65,12 +65,11 @@ export const Selector = ({ variation, ...args }) => { key={index} name={option.name} value={option.value} - //onChange={onChange} + onChange={onChange} isChecked={val === option.value} variation={variation} {...args} label="label" - onChange={(a, b, c) => console.log(a, b, c)} /> ))} From a5c70870de7b9133183b48b3d4a4b375c992c1e0 Mon Sep 17 00:00:00 2001 From: douara Date: Mon, 9 Oct 2023 15:55:12 +0800 Subject: [PATCH 05/10] Fix(Selector): Added Label --- packages/components/selector/stories/selector.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/selector/stories/selector.stories.tsx b/packages/components/selector/stories/selector.stories.tsx index 9827cf27b..50736ff3e 100644 --- a/packages/components/selector/stories/selector.stories.tsx +++ b/packages/components/selector/stories/selector.stories.tsx @@ -68,8 +68,8 @@ export const Selector = ({ variation, ...args }) => { onChange={onChange} isChecked={val === option.value} variation={variation} + label={option.name} {...args} - label="label" /> ))} From c78807e4cb0c39aa015499be75f8a2c18578c3ff Mon Sep 17 00:00:00 2001 From: douara Date: Mon, 9 Oct 2023 16:55:07 +0800 Subject: [PATCH 06/10] Fix(Selector): Remove icon not appearing when allow remove is true --- packages/components/selector/src/selector.option.tsx | 2 +- packages/components/selector/src/selector.tsx | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/selector/src/selector.option.tsx b/packages/components/selector/src/selector.option.tsx index 9331c8f82..61f799b89 100644 --- a/packages/components/selector/src/selector.option.tsx +++ b/packages/components/selector/src/selector.option.tsx @@ -51,7 +51,7 @@ const SelectorOption: React.FC = ({ data-testid="selector-remove" > = forwardRef< alignment = "center", variation = "default", onChange = () => {}, + onRemove = () => {}, + allowRemove = false, ...props }: SelectorProps, ref, @@ -72,6 +74,8 @@ const Selector: React.FC = forwardRef< /> Date: Mon, 9 Oct 2023 17:43:51 +0800 Subject: [PATCH 07/10] Fix(Selector): Eplicit all the props --- packages/components/selector/src/selector.tsx | 10 ++++ .../selector/stories/selector.stories.tsx | 1 + .../selector/stories/tabs/TabCode.mdx | 53 ++++++++++++++++++- 3 files changed, 62 insertions(+), 2 deletions(-) diff --git a/packages/components/selector/src/selector.tsx b/packages/components/selector/src/selector.tsx index 343b1995c..e3270601e 100644 --- a/packages/components/selector/src/selector.tsx +++ b/packages/components/selector/src/selector.tsx @@ -25,6 +25,11 @@ const Selector: React.FC = forwardRef< onChange = () => {}, onRemove = () => {}, allowRemove = false, + tag, + iconOrBrandUrl, + imageUrl, + title, + description, ...props }: SelectorProps, ref, @@ -76,7 +81,12 @@ const Selector: React.FC = forwardRef< {...props} allowRemove={allowRemove} onRemove={onRemove} + tag={tag} + iconOrBrandUrl={iconOrBrandUrl} + imageUrl={imageUrl} isChecked={isChecked} + title={title} + description={description} alignment={alignment ?? "left"} variation={variation ?? "default"} {...(isPro && { diff --git a/packages/components/selector/stories/selector.stories.tsx b/packages/components/selector/stories/selector.stories.tsx index 50736ff3e..d4b82cfab 100644 --- a/packages/components/selector/stories/selector.stories.tsx +++ b/packages/components/selector/stories/selector.stories.tsx @@ -91,6 +91,7 @@ Selector.args = { allowRemove: false, isDisabled: false, isPro: true, + tag: "Tag", } // Story props settings diff --git a/packages/components/selector/stories/tabs/TabCode.mdx b/packages/components/selector/stories/tabs/TabCode.mdx index 6959b3349..80ede0510 100644 --- a/packages/components/selector/stories/tabs/TabCode.mdx +++ b/packages/components/selector/stories/tabs/TabCode.mdx @@ -13,11 +13,32 @@ import { Section, Row, Col, Table, List, Code, Tag } from "@wpmudev/storybook"
+
+

The main heading text for the Selector

+
+ +
+

An additional text that accompagnes the title

+
+ +
+

Either an image url or an icon to be displayed, this wll appear beside the title

+
+
-

A label text for the hidden radion input ( For Screen Readers )

+

A label text for the hidden radio input ( for screen readers )

+
+

Whether to allow removing options or not, when set to true a remove button will appear on the option on hover

+
+
-
+

A text to appear on a custom tag

+
+ +
+

The url to the image to be displayed in the image variation

+
+ +
@@ -92,4 +134,11 @@ import { Section, Row, Col, Table, List, Code, Tag } from "@wpmudev/storybook"
+
+

A callback function to be invoked upon removing an option

+
+
From 9deaa6dbb6318cf2cbe2c7795852f21d6ea67377 Mon Sep 17 00:00:00 2001 From: douara Date: Mon, 9 Oct 2023 18:31:27 +0800 Subject: [PATCH 08/10] Fix(Selector): When isPro is true custom tag shouldn't be displayed + tagColor prop --- .../selector/src/selector.option.tsx | 21 +++++++++++++-- packages/components/selector/src/selector.tsx | 15 +++-------- .../components/selector/src/selector.types.ts | 13 ++++++++- .../selector/stories/selector.stories.tsx | 27 +++++++++++++++++++ .../selector/stories/tabs/TabCode.mdx | 18 +++++++++++++ 5 files changed, 79 insertions(+), 15 deletions(-) diff --git a/packages/components/selector/src/selector.option.tsx b/packages/components/selector/src/selector.option.tsx index 61f799b89..e54fd34af 100644 --- a/packages/components/selector/src/selector.option.tsx +++ b/packages/components/selector/src/selector.option.tsx @@ -3,6 +3,7 @@ import React from "react" import { Tooltip } from "@wpmudev/sui-tooltip" import { generateCN } from "@wpmudev/sui-utils" import { useInteraction } from "@wpmudev/sui-hooks" +import { Tag } from "@wpmudev/sui-tag" import * as Icons from "@wpmudev/sui-icons" import { SelectorOptionProps } from "./selector.types" @@ -17,6 +18,8 @@ const SelectorOption: React.FC = ({ tag, allowRemove, onRemove, + isPro, + tagColor, }) => { // Custom hook to handle interaction states (hover, focus, etc.) const [isHovered, isFocused, methods] = useInteraction({}) @@ -67,7 +70,7 @@ const SelectorOption: React.FC = ({ )} - {["icon-only"].includes(variation ?? "") && !!tag && tag} + {/* Display icon and title/header if either iconOrBrandUrl or title is provided */} {(!!iconOrBrandUrl || !!title) && (
@@ -87,7 +90,21 @@ const SelectorOption: React.FC = ({ {!!title && !["icon-only"].includes(variation ?? "") && (
{title} - {!!tag && tag} + {isPro && ( + + Pro + + )} + {!!tag && !isPro && ( + + {tag} + + )}
)}
diff --git a/packages/components/selector/src/selector.tsx b/packages/components/selector/src/selector.tsx index e3270601e..5df39d5ba 100644 --- a/packages/components/selector/src/selector.tsx +++ b/packages/components/selector/src/selector.tsx @@ -30,6 +30,7 @@ const Selector: React.FC = forwardRef< imageUrl, title, description, + tagColor, ...props }: SelectorProps, ref, @@ -79,6 +80,7 @@ const Selector: React.FC = forwardRef< /> = forwardRef< description={description} alignment={alignment ?? "left"} variation={variation ?? "default"} - {...(isPro && { - tag: ( - - Pro - - ), - })} + isPro={isPro} /> {label && {label}} diff --git a/packages/components/selector/src/selector.types.ts b/packages/components/selector/src/selector.types.ts index d94b4bb1b..9cd2d06a3 100644 --- a/packages/components/selector/src/selector.types.ts +++ b/packages/components/selector/src/selector.types.ts @@ -39,6 +39,16 @@ interface SelectorProps allowRemove?: boolean /** Event handler for removing the Selector */ onRemove?(name: string, value: string | number): void + /** Specifiy the color of the tag */ + tagColor: + | "default" + | "blue" + | "yellow" + | "red" + | "green" + | "white" + | "black" + | "navy" } interface SelectorOptionProps @@ -54,6 +64,7 @@ interface SelectorOptionProps | "tag" | "allowRemove" | "onRemove" + | "tagColor" > {} -export { SelectorProps, SelectorOptionProps } +export type { SelectorProps, SelectorOptionProps } diff --git a/packages/components/selector/stories/selector.stories.tsx b/packages/components/selector/stories/selector.stories.tsx index d4b82cfab..84c600810 100644 --- a/packages/components/selector/stories/selector.stories.tsx +++ b/packages/components/selector/stories/selector.stories.tsx @@ -92,6 +92,7 @@ Selector.args = { isDisabled: false, isPro: true, tag: "Tag", + tagColor: "default", } // Story props settings @@ -162,4 +163,30 @@ Selector.argTypes = { }, }, }, + tagColor: { + name: "Tag Color", + options: [ + "default", + "blue", + "navy", + "yellow", + "red", + "green", + "black", + "white", + ], + control: { + type: "select", + labels: { + "": "Default", + blue: "Blue (Information)", + navy: "Navy Blue", + yellow: "Yellow (Warning)", + red: "Red (Error)", + green: "Green (Success)", + black: "Black", + white: "White", + }, + }, + }, } diff --git a/packages/components/selector/stories/tabs/TabCode.mdx b/packages/components/selector/stories/tabs/TabCode.mdx index 80ede0510..5f20cae4e 100644 --- a/packages/components/selector/stories/tabs/TabCode.mdx +++ b/packages/components/selector/stories/tabs/TabCode.mdx @@ -115,6 +115,24 @@ import { Section, Row, Col, Table, List, Code, Tag } from "@wpmudev/storybook"

A text to appear on a custom tag

+
+

The color variation for the tag

+

Allowed options

+ + default} /> + blue} /> + yellow} /> + red} /> + green} /> + white} /> + black} /> + navy} /> + +
+
Date: Mon, 9 Oct 2023 20:22:42 +0800 Subject: [PATCH 09/10] New(Selector):documentation, examples page --- .../stories/tabs/Examples/Alignment.mdx | 41 ++++++ .../stories/tabs/Examples/Informative.mdx | 19 --- .../stories/tabs/Examples/Neutral.mdx | 19 --- .../selector/stories/tabs/Examples/States.mdx | 125 ++++++++++++++++++ .../stories/tabs/Examples/Success.mdx | 19 --- .../stories/tabs/Examples/Variations.mdx | 79 +++++++++++ .../selector/stories/tabs/TabExamples.mdx | 58 ++++---- 7 files changed, 278 insertions(+), 82 deletions(-) create mode 100644 packages/components/selector/stories/tabs/Examples/Alignment.mdx delete mode 100644 packages/components/selector/stories/tabs/Examples/Informative.mdx delete mode 100644 packages/components/selector/stories/tabs/Examples/Neutral.mdx create mode 100644 packages/components/selector/stories/tabs/Examples/States.mdx delete mode 100644 packages/components/selector/stories/tabs/Examples/Success.mdx create mode 100644 packages/components/selector/stories/tabs/Examples/Variations.mdx diff --git a/packages/components/selector/stories/tabs/Examples/Alignment.mdx b/packages/components/selector/stories/tabs/Examples/Alignment.mdx new file mode 100644 index 000000000..a327da72e --- /dev/null +++ b/packages/components/selector/stories/tabs/Examples/Alignment.mdx @@ -0,0 +1,41 @@ +import { Section, Preview, Snippet } from "@wpmudev/storybook" +import { Selector } from "../../../src" +import dedent from "dedent" + +export const leftCode = dedent` + +` + +export const centerCode = dedent` + +` + +
+ +
+ +
+ + {leftCode} + +
+ +
+ +
+ +
+ + {centerCode} + +
diff --git a/packages/components/selector/stories/tabs/Examples/Informative.mdx b/packages/components/selector/stories/tabs/Examples/Informative.mdx deleted file mode 100644 index 649dd0cde..000000000 --- a/packages/components/selector/stories/tabs/Examples/Informative.mdx +++ /dev/null @@ -1,19 +0,0 @@ -import { Section, Preview, Snippet } from "@wpmudev/storybook"; - -import dedent from "dedent"; - -export const InformativeCode = dedent` - Informative Example Code -` - -
- - Your component with the example informative goes here - - {InformativeCode} - -
diff --git a/packages/components/selector/stories/tabs/Examples/Neutral.mdx b/packages/components/selector/stories/tabs/Examples/Neutral.mdx deleted file mode 100644 index 7ca0e6bf6..000000000 --- a/packages/components/selector/stories/tabs/Examples/Neutral.mdx +++ /dev/null @@ -1,19 +0,0 @@ -import { Section, Preview, Snippet } from "@wpmudev/storybook"; - -import dedent from "dedent"; - -export const NeutralCode = dedent` - Neutral Example State -` - -
- - Your component with the Example state Neutral can go here - - {NeutralCode} - -
diff --git a/packages/components/selector/stories/tabs/Examples/States.mdx b/packages/components/selector/stories/tabs/Examples/States.mdx new file mode 100644 index 000000000..8b3119c2c --- /dev/null +++ b/packages/components/selector/stories/tabs/Examples/States.mdx @@ -0,0 +1,125 @@ +import { Section, Preview, Snippet, Code } from "@wpmudev/storybook" +import { Selector } from "../../../src" +import dedent from "dedent" + +export const disabledCode = dedent` + +` + +export const allowRemoveCode = dedent` + +` + +export const proVersion = dedent` + +` + +export const customTagCode = dedent` + +` + +
+ + + + {disabledCode} +
+ +
+

+ When allowRemove is set to{" "} + true, a button for deletion will appear on hover +

+ + + + {allowRemoveCode} +
+ +
+ + + + {proVersion} +
+ +
+

Use the prop tag to add a custom text displayed in a tag

+

You can also use the prop tagColor to customize its color

+ + + + + {customTagCode} + +
diff --git a/packages/components/selector/stories/tabs/Examples/Success.mdx b/packages/components/selector/stories/tabs/Examples/Success.mdx deleted file mode 100644 index 97d3bdedd..000000000 --- a/packages/components/selector/stories/tabs/Examples/Success.mdx +++ /dev/null @@ -1,19 +0,0 @@ -import { Section, Preview, Snippet } from "@wpmudev/storybook"; - -import dedent from "dedent"; - -export const SuccessCode = dedent` - Success state example -` - -
- - Success state example - - {SuccessCode} - -
diff --git a/packages/components/selector/stories/tabs/Examples/Variations.mdx b/packages/components/selector/stories/tabs/Examples/Variations.mdx new file mode 100644 index 000000000..727464b61 --- /dev/null +++ b/packages/components/selector/stories/tabs/Examples/Variations.mdx @@ -0,0 +1,79 @@ +import { Section, Preview, Snippet } from "@wpmudev/storybook" +import { Selector } from "../../../src/" +import dedent from "dedent" + +export const iconOnlyCode = dedent` + +` + +export const imageCode = dedent` + +` + +export const compoundCode = dedent` + +` + +
+ +
+ +
+ + {iconOnlyCode} +
+ +
+ +
+ +
+ + {imageCode} +
+ +
+ +
+ +
+ + {compoundCode} +
diff --git a/packages/components/selector/stories/tabs/TabExamples.mdx b/packages/components/selector/stories/tabs/TabExamples.mdx index cd59826e7..39c69639e 100644 --- a/packages/components/selector/stories/tabs/TabExamples.mdx +++ b/packages/components/selector/stories/tabs/TabExamples.mdx @@ -1,33 +1,41 @@ -import { Section, Switcher, Preview, Snippet, Code } from "@wpmudev/storybook"; -import { Accordion, AccordionItem, AccordionItemBody } from "../../src"; -import dedent from "dedent"; +import { Section, Switcher, Preview, Snippet, Code } from "@wpmudev/storybook" +import { Selector } from "../../src" +import dedent from "dedent" {/* Import Variations */} -import Neutral from "./Examples/Neutral.mdx" -import Informative from "./Examples/Informative.mdx" -import Success from "./Examples/Success.mdx" -export const sampleCode = dedent` - Basic Examples -`; +import Variations from "./Examples/Variations.mdx" +import Alignment from "./Examples/Alignment.mdx" +import States from "./Examples/States.mdx" + +export const basicCode = dedent` + +`
-

Basic Accordion Example

- Basic Example - {sampleCode} +

+ Below is the basic form of the Selector component, we will be displaying one + option which represents a single instance of the selector, you can add + multiple options as per your needs +

+ +
+ +
+ + {basicCode}
-
- Use this if you need to switch between multiple options - -
- -
-
- -
-
- -
- +
+ +
+ +
+
+ +
+
+ +
+
From b4f38e2331b8d8cf6e49745fb7ae4e7b10215782 Mon Sep 17 00:00:00 2001 From: douara Date: Mon, 9 Oct 2023 20:24:21 +0800 Subject: [PATCH 10/10] New(Selector):documentation, title for the switcher --- packages/components/selector/stories/tabs/TabExamples.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/selector/stories/tabs/TabExamples.mdx b/packages/components/selector/stories/tabs/TabExamples.mdx index 39c69639e..350517575 100644 --- a/packages/components/selector/stories/tabs/TabExamples.mdx +++ b/packages/components/selector/stories/tabs/TabExamples.mdx @@ -26,7 +26,7 @@ export const basicCode = dedent` {basicCode}
-
+