Skip to content

Commit

Permalink
RTL support (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
@prabhuignoto
prabhuignoto authored May 1, 2022
1 parent c1b1739 commit 92a37b6
Show file tree
Hide file tree
Showing 14 changed files with 209 additions and 90 deletions.
34 changes: 18 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,27 +89,28 @@ The example shows a simple wizard with two pages.

## ⚙️ Properties

| Name | Description |
| :---------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `strict` | Enables validation rules for all input types in every page of the wizard. The component prevents the user from moving forward unless the errors fixed on the step. |
| `theme` | Theme object for customized styling |
| `highlightFieldsOnValidation` | Highlights the fields when the validation fails or succeeds |
| `pages` | Collection of [Page](#Page) object |
| `onFinish` | Callback executed on final step. The callback receives an object with the data for each page |
| Name | Description | Default |
| :---------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| `strict` | Enables validation rules for all input types on all pages. The component prevents the user from progressing until the errors in the current step have been corrected | false |
| `theme` | [Theme](#🎨-theme) object for customized styling | |
| `highlightFieldsOnValidation` | Highlights the fields when the validation fails or succeeds | false |
| `pages` | Collection of [Page](#Page) object | |
| `onFinish` | Callback executed on final step | |
| `RTL` | Enables right to left mode | false |

## Page

Page object is at the core of the wizard. Page object is used to define the title, description, fields, and validation rules for a page.

| Name | Description | Type |
| :--------------------- | :------------------------------------------------------------------- | :------- |
| onChange | Callback executed when any of the Form field value changes(Internal) | Function |
| fields | Fields of the Page | Array |
| isActive | Indicates whether the page is active or not | Boolean |
| title | Title of the Page | String |
| finishMessage | Custom message to be displayed on finish operation | String |
| globalFormErrorMessage | Global error message to be displayed on validation failures | String |
| isActive | Indicates whether the page is active or not | Boolean |
| onChange | Callback executed when any of the Form field value changes(Internal) | Function |
| state | State of the Page. can be `NOT_VALIDATED`, `SUCCESS`, `FAIL`, | String |
| title | Title of the Page | String |

> Every page is in the `NOT_VALIDATED` state by default.
Expand Down Expand Up @@ -161,12 +162,12 @@ Form field represents an input field in the wizard. Form field is used to define

| Name | Description | Type |
| :------------ | :---------------------------------- | :-------- |
| name | Name of the Field | string |
| isRequired | Marks the field as required | boolean |
| validate | Enables validation for the field | boolean |
| type | Type of Field | InputType |
| label | Label for the field | string |
| name | Name of the Field | string |
| selectOptions | Use this prop when type is "select" | Array |
| type | Type of Field | InputType |
| validate | Enables validation for the field | boolean |

> Fields marked as required are automatically validated. If you set `isRequired` to `false` and `validate` to `true`, the wizard will validate and flag the errors, but the step itself will not be marked as invalid.
Expand Down Expand Up @@ -244,14 +245,14 @@ Customize the look and feel of the Wizard through the `theme` object.
| background | Background color of the wizard | string | #f8f8f8 |
| fail | Colour to signify failed state | string | #de1738 |
| formFieldBackground | Background color of the Form field | string | #ffffff |
| primary | Primary colour. This color will be the predominant color | string | #007fff |
| success | Colour to signify a success state | string | #1db954 |
| textColor | Colour of all texts | string | #000000 |
| formFieldBorder | Border colour of the form field | string | #dcdcdc |
| inputBackground | Background color of the native input control | string | #e8e8e8 |
| inputTextColor | Fore color of the text inside the native input control | string | #000000 |
| primary | Primary colour. This color will be the predominant color | string | #007fff |
| success | Colour to signify a success state | string | #1db954 |
| tabColor | Colour of the tab | string | #f8f8f8 |
| tabLineColor | Colour of the line that runs through all the tabs | string | #ccc |
| textColor | Colour of all texts | string | #000000 |

Here is a short example of how to use the theme object.

Expand All @@ -278,6 +279,7 @@ Here is a short example of how to use the theme object.
1. [Basic Wizard](https://codesandbox.io/s/react-wizardy-simple-form-vu3y6b)
2. [Complex Wizard](https://codesandbox.io/s/react-wizardy-multi-forms-io9ey5)
3. [Wizard with custom theme](https://codesandbox.io/s/react-wizardy-theme-hzf5bx)
4. [RTL](https://codesandbox.io/s/react-wizardy-rtl-misojt)

## ⛏️ Built With

Expand Down
18 changes: 9 additions & 9 deletions coverage/coverage-final.json
View file

Large diffs are not rendered by default.

76 changes: 38 additions & 38 deletions coverage/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ <h1>All files</h1>
<div class='clearfix'>

<div class='fl pad1y space-right2'>
<span class="strong">68.3% </span>
<span class="strong">69.51% </span>
<span class="quiet">Statements</span>
<span class='fraction'>666/975</span>
<span class='fraction'>707/1017</span>
</div>


<div class='fl pad1y space-right2'>
<span class="strong">83.33% </span>
<span class="strong">76.59% </span>
<span class="quiet">Branches</span>
<span class='fraction'>105/126</span>
<span class='fraction'>108/141</span>
</div>


Expand All @@ -44,9 +44,9 @@ <h1>All files</h1>


<div class='fl pad1y space-right2'>
<span class="strong">68.3% </span>
<span class="strong">69.51% </span>
<span class="quiet">Lines</span>
<span class='fraction'>666/975</span>
<span class='fraction'>707/1017</span>
</div>


Expand Down Expand Up @@ -95,62 +95,62 @@ <h1>All files</h1>

<tr>
<td class="file low" data-value="react-wizardly/src/components"><a href="react-wizardly/src/components/index.html">react-wizardly/src/components</a></td>
<td data-value="18.46" class="pic low">
<td data-value="18.68" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 18%"></div><div class="cover-empty" style="width: 82%"></div></div>
</td>
<td data-value="18.46" class="pct low">18.46%</td>
<td data-value="287" class="abs low">53/287</td>
<td data-value="18.68" class="pct low">18.68%</td>
<td data-value="289" class="abs low">54/289</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="1" class="abs high">1/1</td>
<td data-value="16.66" class="pct low">16.66%</td>
<td data-value="6" class="abs low">1/6</td>
<td data-value="18.46" class="pct low">18.46%</td>
<td data-value="287" class="abs low">53/287</td>
<td data-value="18.68" class="pct low">18.68%</td>
<td data-value="289" class="abs low">54/289</td>
</tr>

<tr>
<td class="file high" data-value="react-wizardly/src/components/form-field"><a href="react-wizardly/src/components/form-field/index.html">react-wizardly/src/components/form-field</a></td>
<td data-value="82.91" class="pic high">
<div class="chart"><div class="cover-fill" style="width: 82%"></div><div class="cover-empty" style="width: 18%"></div></div>
<td data-value="83.88" class="pic high">
<div class="chart"><div class="cover-fill" style="width: 83%"></div><div class="cover-empty" style="width: 17%"></div></div>
</td>
<td data-value="82.91" class="pct high">82.91%</td>
<td data-value="199" class="abs high">165/199</td>
<td data-value="89.18" class="pct high">89.18%</td>
<td data-value="37" class="abs high">33/37</td>
<td data-value="83.88" class="pct high">83.88%</td>
<td data-value="211" class="abs high">177/211</td>
<td data-value="80.48" class="pct high">80.48%</td>
<td data-value="41" class="abs high">33/41</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="2" class="abs high">2/2</td>
<td data-value="82.91" class="pct high">82.91%</td>
<td data-value="199" class="abs high">165/199</td>
<td data-value="83.88" class="pct high">83.88%</td>
<td data-value="211" class="abs high">177/211</td>
</tr>

<tr>
<td class="file high" data-value="react-wizardly/src/components/page"><a href="react-wizardly/src/components/page/index.html">react-wizardly/src/components/page</a></td>
<td data-value="96.77" class="pic high">
<td data-value="96.96" class="pic high">
<div class="chart"><div class="cover-fill" style="width: 96%"></div><div class="cover-empty" style="width: 4%"></div></div>
</td>
<td data-value="96.77" class="pct high">96.77%</td>
<td data-value="124" class="abs high">120/124</td>
<td data-value="89.28" class="pct high">89.28%</td>
<td data-value="28" class="abs high">25/28</td>
<td data-value="96.96" class="pct high">96.96%</td>
<td data-value="132" class="abs high">128/132</td>
<td data-value="83.33" class="pct high">83.33%</td>
<td data-value="30" class="abs high">25/30</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="2" class="abs high">2/2</td>
<td data-value="96.77" class="pct high">96.77%</td>
<td data-value="124" class="abs high">120/124</td>
<td data-value="96.96" class="pct high">96.96%</td>
<td data-value="132" class="abs high">128/132</td>
</tr>

<tr>
<td class="file high" data-value="react-wizardly/src/components/wizard-footer"><a href="react-wizardly/src/components/wizard-footer/index.html">react-wizardly/src/components/wizard-footer</a></td>
<td data-value="98.27" class="pic high">
<td data-value="98.43" class="pic high">
<div class="chart"><div class="cover-fill" style="width: 98%"></div><div class="cover-empty" style="width: 2%"></div></div>
</td>
<td data-value="98.27" class="pct high">98.27%</td>
<td data-value="116" class="abs high">114/116</td>
<td data-value="96.15" class="pct high">96.15%</td>
<td data-value="26" class="abs high">25/26</td>
<td data-value="98.43" class="pct high">98.43%</td>
<td data-value="128" class="abs high">126/128</td>
<td data-value="84.37" class="pct high">84.37%</td>
<td data-value="32" class="abs high">27/32</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="3" class="abs high">3/3</td>
<td data-value="98.27" class="pct high">98.27%</td>
<td data-value="116" class="abs high">114/116</td>
<td data-value="98.43" class="pct high">98.43%</td>
<td data-value="128" class="abs high">126/128</td>
</tr>

<tr>
Expand All @@ -159,13 +159,13 @@ <h1>All files</h1>
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="90" class="abs high">90/90</td>
<td data-value="69.23" class="pct medium">69.23%</td>
<td data-value="13" class="abs medium">9/13</td>
<td data-value="98" class="abs high">98/98</td>
<td data-value="62.5" class="pct medium">62.5%</td>
<td data-value="16" class="abs medium">10/16</td>
<td data-value="60" class="pct medium">60%</td>
<td data-value="5" class="abs medium">3/5</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="90" class="abs high">90/90</td>
<td data-value="98" class="abs high">98/98</td>
</tr>

<tr>
Expand Down Expand Up @@ -206,7 +206,7 @@ <h1>All files</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at Sun May 01 2022 12:00:01 GMT+0530 (India Standard Time)
at Sun May 01 2022 16:35:14 GMT+0530 (India Standard Time)
</div>
<script src="prettify.js"></script>
<script>
Expand Down
25 changes: 23 additions & 2 deletions src/components/form-field/form-field.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@
&:not(.is_valid):not(.is_not_valid) {
border: 1px solid var(--rc-wiz-formFieldBorder);
}

&.RTL {
direction: rtl;
text-align: right;
}
}

.input_wrapper {
Expand All @@ -59,7 +64,6 @@
justify-content: center;
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
height: 1.25rem;
width: 1.25rem;
Expand All @@ -79,6 +83,16 @@
}
}

&.RTL {
right: auto;
left: 1rem;
}

&:not(.RTL) {
right: 1rem;
left: auto;
}

svg {
width: 70%;
height: 70%;
Expand All @@ -91,7 +105,14 @@
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.5rem;

&.RTL {
margin-right: 0.5rem;
}

&:not(.RTL) {
margin-left: 0.5rem;
}

svg {
fill: var(--rc-wiz-fail);
Expand Down
22 changes: 17 additions & 5 deletions src/components/form-field/form-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ const FormField: FunctionComponent<FormFieldProps> = ({

const selectedOptions = useRef<string[]>([]);

const { highlightFieldsOnValidation: highlight } = useContext(WizardContext);
const { highlightFieldsOnValidation: highlight, RTL } =
useContext(WizardContext);

const handleChange = useCallback(
(
Expand Down Expand Up @@ -78,18 +79,29 @@ const FormField: FunctionComponent<FormFieldProps> = ({
classNames(
styles.form_field,
isValid ? styles.is_valid : isValid !== null ? styles.is_not_valid : "",
highlight ? styles.highlight : ""
highlight ? styles.highlight : "",
RTL ? styles.RTL : ""
),
[isValid, highlight]
);

const checkClass = useMemo(
() => classNames(styles.status, isValid ? styles.success : ""),
() =>
classNames(
styles.status,
isValid ? styles.success : "",
RTL ? styles.RTL : ""
),
[isValid]
);

const warnClass = useMemo(
() => classNames(styles.status, !isValid ? styles.fail : ""),
() =>
classNames(
styles.status,
!isValid ? styles.fail : "",
RTL ? styles.RTL : ""
),
[]
);

Expand Down Expand Up @@ -184,7 +196,7 @@ const FormField: FunctionComponent<FormFieldProps> = ({
)}
{isRequired && (
<span
className={styles.asterisk}
className={classNames(styles.asterisk, RTL ? styles.RTL : "")}
role="img"
aria-label="important field"
>
Expand Down
13 changes: 12 additions & 1 deletion src/components/page/page.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,14 @@
.fields_wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;

&.RTL {
align-items: flex-end;
}

&:not(.RTL) {
align-items: flex-start;
}
}

.form_field_wrapper {
Expand All @@ -28,4 +35,8 @@
margin-bottom: 1rem;
text-transform: uppercase;
color: var(--rc-wiz-textColor);

&.RTL {
direction: rtl;
}
}
Loading

0 comments on commit 92a37b6

Please sign in to comment.