libre.sh/keycloak-scim
2
0
Fork 0
Code Issues 14 Pull requests Releases Packages Activity Actions 6

updated to match ui design (#369)

Browse source 
* updated to match ui design

fixes: #323

* fixed test

* Update src/components/help-enabler/HelpHeader.tsx

Co-authored-by: Eugenia <32821331+jenny-s51@users.noreply.github.com>

* Update src/components/help-enabler/help-header.css

Co-authored-by: Eugenia <32821331+jenny-s51@users.noreply.github.com>

* fixed merge error

* changed to use "t" function

Co-authored-by: Eugenia <32821331+jenny-s51@users.noreply.github.com>
This commit is contained in:
Erik Jan de Wit 2021-02-18 08:06:51 +01:00 committed by GitHub
parent 93d5d21894
commit e4c2259563
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 106 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/common-help.json
View file

@ -1,4 +1,5 @@
{
"common-help": {
"helpToggleInfo": "This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers."
}
}

21
src/components/help-enabler/HelpHeader.tsx
View file

@ -1,15 +1,19 @@
import React, { useState, useContext, ReactNode, createContext } from "react";
import {
Divider,
Dropdown,
DropdownItem,
DropdownToggle,
Split,
SplitItem,
Switch,
TextContent,
} from "@patternfly/react-core";
import { Trans, useTranslation } from "react-i18next";
import { HelpIcon, ExternalLinkAltIcon } from "@patternfly/react-icons";
import "./help-header.css";
type HelpProps = {
children: ReactNode;
};
@ -51,16 +55,8 @@ export const HelpHeader = () => {
</SplitItem>
</Split>
</DropdownItem>,
<DropdownItem
key="enable"
id="enable"
description={
<Trans>
This toggle will enable / disable part of the help info in the
console. Includes any help text, links and popovers.
</Trans>
}
>
<Divider key="divide" />,
<DropdownItem key="enable" id="enable">
<Split>
<SplitItem isFilled>{t("enableHelpMode")}</SplitItem>
<SplitItem>
@ -68,10 +64,15 @@ export const HelpHeader = () => {
id="enableHelp"
aria-label="Help is enabled"
isChecked={help.enabled}
label=""
className="keycloak_help-header-switch"
onChange={() => help.toggleHelp()}
/>
</SplitItem>
</Split>
<TextContent className="keycloak_help-header-description">
{t("common-help:helpToggleInfo")}
</TextContent>
</DropdownItem>,
];
return (

84
src/components/help-enabler/__tests__/__snapshots__/HelpHeader.test.tsx.snap
View file

@ -80,20 +80,21 @@ exports[`<HelpHeader /> enable help 1`] = `
</div>
</a>
</li>
<hr
class="pf-c-divider"
index="1"
/>
<li
id="enable"
role="menuitem"
>
<a
aria-disabled="false"
class="pf-c-dropdown__menu-item pf-m-description"
class="pf-c-dropdown__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-4"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
tabindex="-1"
>
<div
class="pf-c-dropdown__menu-item-main"
>
<div
class="pf-l-split"
@ -107,7 +108,7 @@ exports[`<HelpHeader /> enable help 1`] = `
class="pf-l-split__item"
>
<label
class="pf-c-switch"
class="pf-c-switch keycloak_help-header-switch"
data-ouia-component-id="OUIA-Generated-Switch-2"
data-ouia-component-type="PF4/Switch"
data-ouia-safe="true"
@ -122,33 +123,22 @@ exports[`<HelpHeader /> enable help 1`] = `
/>
<span
class="pf-c-switch__toggle"
>
<div
aria-hidden="true"
class="pf-c-switch__toggle-icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
/>
</svg>
</div>
</span>
<span
aria-hidden="true"
class="pf-c-switch__label pf-m-on"
/>
<span
aria-hidden="true"
class="pf-c-switch__label pf-m-off"
/>
</label>
</div>
</div>
</div>
<div
class="pf-c-dropdown__menu-item-description"
class="pf-c-content keycloak_help-header-description"
>
This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
helpToggleInfo
</div>
</a>
</li>
@ -242,20 +232,21 @@ exports[`<HelpHeader /> open dropdown 1`] = `
</div>
</a>
</li>
<hr
class="pf-c-divider"
index="1"
/>
<li
id="enable"
role="menuitem"
>
<a
aria-disabled="false"
class="pf-c-dropdown__menu-item pf-m-description"
class="pf-c-dropdown__menu-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-2"
data-ouia-component-type="PF4/DropdownItem"
data-ouia-safe="true"
tabindex="-1"
>
<div
class="pf-c-dropdown__menu-item-main"
>
<div
class="pf-l-split"
@ -269,7 +260,7 @@ exports[`<HelpHeader /> open dropdown 1`] = `
class="pf-l-split__item"
>
<label
class="pf-c-switch"
class="pf-c-switch keycloak_help-header-switch"
data-ouia-component-id="OUIA-Generated-Switch-1"
data-ouia-component-type="PF4/Switch"
data-ouia-safe="true"
@ -284,33 +275,22 @@ exports[`<HelpHeader /> open dropdown 1`] = `
/>
<span
class="pf-c-switch__toggle"
>
<div
aria-hidden="true"
class="pf-c-switch__toggle-icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
/>
</svg>
</div>
</span>
<span
aria-hidden="true"
class="pf-c-switch__label pf-m-on"
/>
<span
aria-hidden="true"
class="pf-c-switch__label pf-m-off"
/>
</label>
</div>
</div>
</div>
<div
class="pf-c-dropdown__menu-item-description"
class="pf-c-content keycloak_help-header-description"
>
This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
helpToggleInfo
</div>
</a>
</li>

16
src/components/help-enabler/help-header.css Normal file
View file

@ -0,0 +1,16 @@
.keycloak_help-header-description {
padding-top: var(--pf-global--spacer--lg);
overflow-wrap: break-word;
white-space: normal;
color: var(--pf-c-dropdown__menu-item--Color);
}
.keycloak_help-header-switch {
margin-left: var(--pf-global--spacer--xl);
}
.keycloak_help-header-switch .pf-c-switch__toggle::before {
background-color: var(--pf-c-switch__toggle-icon--Color);
}