This commit is contained in:
41666 2021-06-05 16:14:05 -05:00
parent 471ed9cf93
commit be16da1686
9 changed files with 57 additions and 33 deletions

View file

@ -19,7 +19,7 @@ export const ToggleState = styled.div`
export const ToggleSwitch = styled.div<{ state: boolean }>` export const ToggleSwitch = styled.div<{ state: boolean }>`
display: inline-block; display: inline-block;
background-color: ${(props) => (props.state ? palette.green200 : palette.taupe100)}; background-color: ${(props) => (props.state ? palette.green200 : 'rgba(0,0,0,0.45)')};
height: 1.3em; height: 1.3em;
width: 2.6em; width: 2.6em;
border-radius: 1.3em; border-radius: 1.3em;
@ -28,6 +28,7 @@ export const ToggleSwitch = styled.div<{ state: boolean }>`
top: 0.23em; top: 0.23em;
transition: background-color ${transitions.in2in}s ease-in-out; transition: background-color ${transitions.in2in}s ease-in-out;
cursor: pointer; cursor: pointer;
margin-right: 0.5em;
${ToggleState} { ${ToggleState} {
${(props) => ${(props) =>

View file

@ -12,9 +12,9 @@ export const Toggle = (props: ToggleProps) => (
props.onChange?.(!props.state); props.onChange?.(!props.state);
}} }}
> >
{props.children}{' '}
<ToggleSwitch state={props.state}> <ToggleSwitch state={props.state}>
<ToggleState /> <ToggleState />
</ToggleSwitch> </ToggleSwitch>
{props.children}
</div> </div>
); );

View file

@ -3,7 +3,7 @@ import { mockCategory, roleCategory, roleCategory2 } from '../../fixtures/storyD
import { EditorCategory } from './EditorCategory'; import { EditorCategory } from './EditorCategory';
export default { export default {
title: 'Molecules/Editor/Category', title: 'Molecules/Editor/Category (Old)',
}; };
export const CategoryEditor = () => { export const CategoryEditor = () => {

View file

@ -3,7 +3,7 @@ import { mockCategory, roleCategory, roleCategory2 } from '../../fixtures/storyD
import { EditorCategory } from './EditorCategory'; import { EditorCategory } from './EditorCategory';
export default { export default {
title: 'Molecules/Editor/Category (Old)', title: 'Molecules/Editor/Category',
}; };
export const CategoryEditor = () => { export const CategoryEditor = () => {

View file

@ -1,9 +1,9 @@
import { FaderOpacity } from '@roleypoly/design-system/atoms/fader'; import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
import { HorizontalSwitch } from '@roleypoly/design-system/atoms/horizontal-switch';
import { Popover } from '@roleypoly/design-system/atoms/popover'; import { Popover } from '@roleypoly/design-system/atoms/popover';
import { Role } from '@roleypoly/design-system/atoms/role'; import { Role } from '@roleypoly/design-system/atoms/role';
import { Space } from '@roleypoly/design-system/atoms/space'; import { Space } from '@roleypoly/design-system/atoms/space';
import { TextInput, TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input'; import { TextInput, TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
import { Toggle } from '@roleypoly/design-system/atoms/toggle';
import { Text } from '@roleypoly/design-system/atoms/typography'; import { Text } from '@roleypoly/design-system/atoms/typography';
import { RoleSearch } from '@roleypoly/design-system/molecules/role-search'; import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
import { Category, CategoryType, Role as RoleType } from '@roleypoly/types'; import { Category, CategoryType, Role as RoleType } from '@roleypoly/types';
@ -74,24 +74,22 @@ export const EditorCategory = (props: Props) => {
<Space /> <Space />
<Text>Selection Type</Text>
<div> <div>
<HorizontalSwitch <Toggle
items={['Multiple', 'Single']} state={props.category.type === CategoryType.Multi}
value={typeEnumToSwitch(props.category.type)} onChange={onUpdate('type', (x) =>
onChange={onUpdate('type', switchToTypeEnum)} x ? CategoryType.Multi : CategoryType.Single
/> )}
>
Allow users to pick multiple roles
</Toggle>
</div> </div>
<Space /> <Space />
<Text>Visiblity</Text>
<div> <div>
<HorizontalSwitch <Toggle state={props.category.hidden} onChange={onUpdate('hidden')}>
items={['Visible', 'Hidden']} Hide category from users
value={props.category.hidden ? 'Hidden' : 'Visible'} </Toggle>
onChange={onUpdate('hidden', (a) => a === 'Hidden')}
/>
</div> </div>
<Space /> <Space />

View file

@ -4576,9 +4576,9 @@ ajv@^7.0.2:
uri-js "^4.2.2" uri-js "^4.2.2"
ajv@^8.0.1: ajv@^8.0.1:
version "8.6.0" version "8.2.0"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.6.0.tgz#60cc45d9c46a477d80d92c48076d972c342e5720" resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.2.0.tgz#c89d3380a784ce81b2085f48811c4c101df4c602"
integrity sha512-cnUG4NSBiM4YFBxgZIj/In3/6KX+rQ2l2YPRVcvAMQGWEPKuXoPIhxzwqh31jA3IPbI4qEOp/5ILI4ynioXsGQ== integrity sha512-WSNGFuyWd//XO8n/m/EaOlNLtO0yL8EXT/74LqT4khdhpZjP7lkj/kT5uwRmGitKEVp/Oj7ZUHeGfPtgHhQ5CA==
dependencies: dependencies:
fast-deep-equal "^3.1.1" fast-deep-equal "^3.1.1"
json-schema-traverse "^1.0.0" json-schema-traverse "^1.0.0"
@ -7559,7 +7559,7 @@ endent@^2.0.1:
fast-json-parse "^1.0.3" fast-json-parse "^1.0.3"
objectorarray "^1.0.4" objectorarray "^1.0.4"
enhanced-resolve@^4.0.0, enhanced-resolve@^4.3.0: enhanced-resolve@^4.3.0:
version "4.5.0" version "4.5.0"
resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec" resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg== integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
@ -7568,6 +7568,14 @@ enhanced-resolve@^4.0.0, enhanced-resolve@^4.3.0:
memory-fs "^0.5.0" memory-fs "^0.5.0"
tapable "^1.0.0" tapable "^1.0.0"
enhanced-resolve@^5.0.0:
version "5.8.0"
resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.8.0.tgz#d9deae58f9d3773b6a111a5a46831da5be5c9ac0"
integrity sha512-Sl3KRpJA8OpprrtaIswVki3cWPiPKxXuFxJXBp+zNb6s6VwNWwFRUdtmzd2ReUut8n+sCPx7QCtQ7w5wfJhSgQ==
dependencies:
graceful-fs "^4.2.4"
tapable "^2.2.0"
enquirer@^2.3.5, enquirer@^2.3.6: enquirer@^2.3.5, enquirer@^2.3.6:
version "2.3.6" version "2.3.6"
resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d" resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
@ -8948,7 +8956,7 @@ globby@^11.0.1:
merge2 "^1.3.0" merge2 "^1.3.0"
slash "^3.0.0" slash "^3.0.0"
globby@^11.0.2, globby@^11.0.3: globby@^11.0.2:
version "11.0.4" version "11.0.4"
resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5" resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg== integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==
@ -8960,6 +8968,18 @@ globby@^11.0.2, globby@^11.0.3:
merge2 "^1.3.0" merge2 "^1.3.0"
slash "^3.0.0" slash "^3.0.0"
globby@^11.0.3:
version "11.0.3"
resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
dependencies:
array-union "^2.1.0"
dir-glob "^3.0.1"
fast-glob "^3.1.1"
ignore "^5.1.4"
merge2 "^1.3.0"
slash "^3.0.0"
globby@^6.1.0: globby@^6.1.0:
version "6.1.0" version "6.1.0"
resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c" resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@ -11618,9 +11638,9 @@ leveldown@^6.0.0:
node-gyp-build "~4.2.1" node-gyp-build "~4.2.1"
levelup@^5.0.0: levelup@^5.0.0:
version "5.0.1" version "5.0.0"
resolved "https://registry.yarnpkg.com/levelup/-/levelup-5.0.1.tgz#a871c3cb0943f4fc0280bc4d71c5d60950b0d570" resolved "https://registry.yarnpkg.com/levelup/-/levelup-5.0.0.tgz#7cbbfd2ffc7495b3ebd75f81f5b328eb37866c3a"
integrity sha512-MJvQgBRQmB+E5+d6Qbxqm05N4U9NzOxGNhXx0rR8maRBwmVuVV+m4IV3N4HzZJW8JwiJ0jj92RZaytcD+Hr1CA== integrity sha512-P4IKS4J17b6dzm8iI8Irv5gvOlrqJv04Lrpq1rAgZvjR2IsVSjbXQQo1LoK/PJuouxepLE8CTIiKGmHQYZnneA==
dependencies: dependencies:
catering "^2.0.0" catering "^2.0.0"
deferred-leveldown "^6.0.0" deferred-leveldown "^6.0.0"
@ -13301,9 +13321,9 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
picomatch@^2.2.3: picomatch@^2.2.3:
version "2.3.0" version "2.2.3"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw== integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
pidtree@^0.3.0: pidtree@^0.3.0:
version "0.3.1" version "0.3.1"
@ -14083,9 +14103,9 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
util-deprecate "^1.0.2" util-deprecate "^1.0.2"
postcss-selector-parser@^6.0.5: postcss-selector-parser@^6.0.5:
version "6.0.6" version "6.0.5"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.5.tgz#042d74e137db83e6f294712096cb413f5aa612c4"
integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg== integrity sha512-aFYPoYmXbZ1V6HZaSvat08M97A8HqO6Pjz+PiNpw/DhuRrC72XWAdp3hL6wusDCN31sSmcZyMGa2hZEuX+Xfhg==
dependencies: dependencies:
cssesc "^3.0.0" cssesc "^3.0.0"
util-deprecate "^1.0.2" util-deprecate "^1.0.2"
@ -16662,6 +16682,11 @@ tapable@^1.0.0, tapable@^1.1.3:
resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2" resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA== integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
tapable@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.0.tgz#5c373d281d9c672848213d0e037d1c4165ab426b"
integrity sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==
tar@^6.0.2: tar@^6.0.2:
version "6.0.5" version "6.0.5"
resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.5.tgz#bde815086e10b39f1dcd298e89d596e1535e200f" resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.5.tgz#bde815086e10b39f1dcd298e89d596e1535e200f"
@ -17805,7 +17830,7 @@ webpack-virtual-modules@^0.2.2:
dependencies: dependencies:
debug "^3.0.0" debug "^3.0.0"
webpack@4, webpack@4.44.2, webpack@^4.x: webpack@4, webpack@4.44.2:
version "4.44.2" version "4.44.2"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72"
integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q== integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==