@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.4.2

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.stories.jsx","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport { useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { boolean, select } from '@storybook/addon-knobs';\n\nimport {\n  Card,\n  CardContent,\n  Text,\n  Grid,\n  Button,\n  defaultThemeProp,\n  Popover,\n  useElement,\n  useOuterEvent,\n  Flex,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport {\n  ConditionBuilder,\n  FieldCondition,\n  AtomicCondition,\n  getInitConditionForLhs,\n  isValidCondition,\n  Condition,\n  DateFunctionsByType,\n  LeafCondition,\n  formatCondition,\n  RHSType\n} from '@pega/cosmos-react-condition-builder';\n\nimport { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';\n\nconst StyledGrid = styled(Grid)`\n  max-width: 60rem;\n`;\n\nconst StyledCodeBlock = styled.pre`\n  padding: ${props => props.theme.base.spacing};\n  margin-bottom: ${props => props.theme.base.spacing};\n`;\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nconst StyledList = styled.ul`\n  padding-left: calc(4 * ${props => props.theme.base.spacing});\n`;\nStyledList.defaultProps = defaultThemeProp;\n\nexport default {\n  title: 'Condition Builder/ConditionBuilder',\n  component: ConditionBuilder\n};\n\nexport const DefaultBuilder = () => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<Condition | undefined>(() => {\n    // If a previous condition exists on the session, use it\n    const prevCondition = sessionStorage.getItem('CBDemoCondition');\n    if (prevCondition !== null) {\n      // If an empty condition was submitted previously, start with an empty one\n      if (prevCondition === 'undefined') {\n        return undefined;\n      }\n      return JSON.parse(prevCondition);\n    }\n    return demoCondition;\n  });\n\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const disallowNOT = boolean('Disallow NOT operator', false);\n  const renderInPopover = boolean('Render inside Popover', false);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <ConditionBuilder\n      fields={demoFields}\n      condition={condition}\n      validComparators={validComparators}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={dateFunctions}\n      disallowNOT={disallowNOT}\n      onConditionSubmit={(c: Condition | undefined) => {\n        setCondition(c);\n        hidePopover();\n        sessionStorage.setItem('CBDemoCondition', JSON.stringify(c)); // Persist on sessionStorage for the next time\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: '1fr',\n        rowGap: 3\n      }}\n    >\n      {!renderInPopover && builderJsx}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n\n      <div>\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition(condition, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nexport const FieldConditionDemo = () => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<LeafCondition | undefined>(undefined);\n\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const renderInPopover = boolean('Render inside Popover', false);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <FieldCondition\n      targetField='lastActivityAt'\n      fields={demoFields}\n      condition={condition}\n      validComparators={validComparators}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={dateFunctions}\n      onSubmit={c => {\n        hidePopover();\n        setCondition(c);\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!renderInPopover && builderJsx}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nconst convertRhsTypes = (\n  useLiteralRHSType: boolean,\n  useFieldRHSType: boolean,\n  useRelativeDatesType: boolean,\n  dateFunctions?: DateFunctionsByType\n) => {\n  const setRhsTypes: Set<RHSType> = new Set<RHSType>();\n  if (useLiteralRHSType) setRhsTypes.add('LITERAL');\n  if (useFieldRHSType) setRhsTypes.add('FIELD');\n  if (dateFunctions) setRhsTypes.add('DATE_FUNCTION');\n  if (useRelativeDatesType) setRhsTypes.add('RELATIVE_DATE');\n  return setRhsTypes;\n};\n\nexport const AtomicConditionDemo = () => {\n  const translate = useI18n();\n  // Storybook knobs for configuration\n  const renderInPopover = boolean('Render inside Popover', false);\n  const itemDirection = select('Item Direction', { Column: 'column', Row: 'row' }, 'column');\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const useLiteralRHSType = boolean('Enable Literal RHS Type', true);\n  const useFieldRHSType = boolean('Enable Field RHS Type', true);\n  const useRelativeDatesRHSType = boolean('Enable Relative Dates RHS Type', true);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n  const validRHSTypes: Set<RHSType> = convertRhsTypes(\n    useLiteralRHSType,\n    useFieldRHSType,\n    useRelativeDatesRHSType,\n    dateFunctions\n  );\n  const showLhsAsLabel = boolean('Show LHS as Label', false);\n\n  // Story State object to simulate \"submitting\"\n  const [submitCondition, setSubmitCondition] = useState<LeafCondition | undefined>(undefined);\n  // State needed to use Popover in Story\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  // State handling needed to manage/use the AtomicCondition component\n  const [showErrorIndicators, setShowErrorIndicators] = useState(false);\n  const [condition, setCondition] = useState(\n    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField\n    () =>\n      submitCondition ||\n      getInitConditionForLhs(\n        { field: 'age' },\n        demoFields,\n        validRHSTypes,\n        validComparators,\n        dateFunctions\n      )\n  );\n\n  const handleSubmission = () => {\n    setShowErrorIndicators(false);\n    if (isValidCondition(condition, demoFields, true)) {\n      // Insert all \"submit\" logic to use the valid condition that you've created.\n      if (renderInPopover) setIsOpen(false);\n      setSubmitCondition(condition);\n    } else {\n      setShowErrorIndicators(true);\n    }\n  };\n\n  const atomicConditionJSX = (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <AtomicCondition\n        condition={condition}\n        fields={demoFields}\n        indicateErrors={showErrorIndicators}\n        validComparators={validComparators}\n        dateFunctions={dateFunctions}\n        onChange={c => setCondition(c)}\n        itemDirection={itemDirection}\n        showLhsAsLabel={showLhsAsLabel}\n        validRhsTypes={validRHSTypes}\n      />\n      <Button variant='primary' onClick={handleSubmission}>\n        Submit Condition\n      </Button>\n    </Flex>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!renderInPopover && atomicConditionJSX}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            {`${isOpen ? 'Close' : 'Open'} Atomic Condition`}\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{atomicConditionJSX}</Flex>\n          </Popover>\n        </>\n      )}\n      <Card>\n        <CardContent>\n          <Text variant='h4'>Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}\n          </StyledCodeBlock>\n\n          <Text variant='h4'>Formatted Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition\n              ? formatCondition({ condition: submitCondition }, demoFields, translate)\n              : '(No condition)'}\n          </StyledCodeBlock>\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h2' status='error'>\n                validRhsTypes Prop Warning\n              </Text>\n              <Text>\n                There are LHS(Left Hand Side Field)/Comparator pairings that <u>require</u> specific\n                RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when\n                limiting RHS value types using this prop. We <b>do not</b> support limiting RHS\n                field types to incompatible types and it will result in a validation error if you do\n                so. The pairings referred to here are as follows:\n              </Text>\n            </Flex>\n            <StyledList>\n              <li>\n                BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will <u>always yield</u>{' '}\n                a Field RHS\n              </li>\n              <li>\n                Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will <u>always yield</u> a\n                Literal RHS (Comma separated list)\n              </li>\n            </StyledList>\n            <Flex container={{ direction: 'column' }}>\n              <Text>\n                If you would like to limit RHS value types and avoid these incompatibilities, you\n                will need to exclude these comparators using the <b>validComparators</b> prop.\n              </Text>\n            </Flex>\n          </Flex>\n        </CardContent>\n      </Card>\n    </StyledGrid>\n  );\n};\n"]}
+{"version":3,"file":"ConditionBuilder.stories.jsx","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport { useRef, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  Card,\n  CardContent,\n  Text,\n  Button,\n  Popover,\n  useElement,\n  useOuterEvent,\n  Flex,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport {\n  ConditionBuilder,\n  FieldCondition,\n  AtomicCondition,\n  getInitConditionForLhs,\n  isValidCondition,\n  Condition,\n  LeafCondition,\n  formatCondition,\n  RHSType\n} from '@pega/cosmos-react-condition-builder';\n\nimport { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';\nimport { StyledCodeBlock, StyledGrid, StyledList } from './ConditionBuilder.styles';\nimport { convertRhsTypes } from './ConditionBuilder.mocks';\n\nexport default {\n  title: 'Condition Builder/ConditionBuilder',\n  component: ConditionBuilder\n} as Meta;\n\ninterface ConditionBuilderStoryProps {\n  validComparators?: boolean;\n  disallowNOT?: boolean;\n  renderInPopover?: boolean;\n  dateFunctions?: boolean;\n  itemDirection?: 'column' | 'row';\n  useLiteralRHSType?: boolean;\n  useFieldRHSType?: boolean;\n  useRelativeDatesRHSType?: boolean;\n  showLhsAsLabel?: boolean;\n}\n\nexport const DefaultBuilder: Story<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<Condition | undefined>(() => {\n    // If a previous condition exists on the session, use it\n    const prevCondition = sessionStorage.getItem('CBDemoCondition');\n    if (prevCondition !== null) {\n      // If an empty condition was submitted previously, start with an empty one\n      if (prevCondition === 'undefined') {\n        return undefined;\n      }\n      return JSON.parse(prevCondition);\n    }\n    return demoCondition;\n  });\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <ConditionBuilder\n      fields={demoFields}\n      condition={condition}\n      validComparators={args.validComparators ? demoComparators : undefined}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n      disallowNOT={args.disallowNOT}\n      onConditionSubmit={(c: Condition | undefined) => {\n        setCondition(c);\n        hidePopover();\n        sessionStorage.setItem('CBDemoCondition', JSON.stringify(c)); // Persist on sessionStorage for the next time\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: '1fr',\n        rowGap: 3\n      }}\n    >\n      {!args.renderInPopover && builderJsx}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n\n      <div>\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition(condition, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nDefaultBuilder.args = {\n  validComparators: false,\n  disallowNOT: false,\n  renderInPopover: false,\n  dateFunctions: true\n};\n\nDefaultBuilder.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  disallowNOT: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } }\n};\n\nexport const FieldConditionDemo: Story<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<LeafCondition | undefined>(undefined);\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <FieldCondition\n      targetField='lastActivityAt'\n      fields={demoFields}\n      condition={condition}\n      validComparators={args.validComparators ? demoComparators : undefined}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n      onSubmit={c => {\n        hidePopover();\n        setCondition(c);\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!args.renderInPopover && builderJsx}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nFieldConditionDemo.args = {\n  validComparators: false,\n  renderInPopover: false,\n  dateFunctions: true\n};\n\nFieldConditionDemo.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } }\n};\n\nexport const AtomicConditionDemo: Story<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n\n  const validRHSTypes: Set<RHSType> = convertRhsTypes(\n    !!args.useLiteralRHSType,\n    !!args.useFieldRHSType,\n    !!args.useRelativeDatesRHSType,\n    args.dateFunctions ? demoDateFunctions : undefined\n  );\n\n  // Story State object to simulate \"submitting\"\n  const [submitCondition, setSubmitCondition] = useState<LeafCondition | undefined>(undefined);\n  // State needed to use Popover in Story\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  // State handling needed to manage/use the AtomicCondition component\n  const [showErrorIndicators, setShowErrorIndicators] = useState(false);\n  const [condition, setCondition] = useState(\n    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField\n    () =>\n      submitCondition ||\n      getInitConditionForLhs(\n        { field: 'age' },\n        demoFields,\n        validRHSTypes,\n        args.validComparators ? demoComparators : undefined,\n        args.dateFunctions ? demoDateFunctions : undefined\n      )\n  );\n\n  const handleSubmission = () => {\n    setShowErrorIndicators(false);\n    if (isValidCondition(condition, demoFields, true)) {\n      // Insert all \"submit\" logic to use the valid condition that you've created.\n      if (args.renderInPopover) setIsOpen(false);\n      setSubmitCondition(condition);\n    } else {\n      setShowErrorIndicators(true);\n    }\n  };\n\n  const atomicConditionJSX = (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <AtomicCondition\n        condition={condition}\n        fields={demoFields}\n        indicateErrors={showErrorIndicators}\n        validComparators={args.validComparators ? demoComparators : undefined}\n        dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n        onChange={c => setCondition(c)}\n        itemDirection={args.itemDirection}\n        showLhsAsLabel={args.showLhsAsLabel}\n        validRhsTypes={validRHSTypes}\n      />\n      <Button variant='primary' onClick={handleSubmission}>\n        Submit Condition\n      </Button>\n    </Flex>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!args.renderInPopover && atomicConditionJSX}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            {`${isOpen ? 'Close' : 'Open'} Atomic Condition`}\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{atomicConditionJSX}</Flex>\n          </Popover>\n        </>\n      )}\n      <Card>\n        <CardContent>\n          <Text variant='h4'>Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}\n          </StyledCodeBlock>\n\n          <Text variant='h4'>Formatted Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition\n              ? formatCondition({ condition: submitCondition }, demoFields, translate)\n              : '(No condition)'}\n          </StyledCodeBlock>\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h2' status='error'>\n                validRhsTypes Prop Warning\n              </Text>\n              <Text>\n                There are LHS(Left Hand Side Field)/Comparator pairings that <u>require</u> specific\n                RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when\n                limiting RHS value types using this prop. We <b>do not</b> support limiting RHS\n                field types to incompatible types and it will result in a validation error if you do\n                so. The pairings referred to here are as follows:\n              </Text>\n            </Flex>\n            <StyledList>\n              <li>\n                BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will <u>always yield</u>{' '}\n                a Field RHS\n              </li>\n              <li>\n                Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will <u>always yield</u> a\n                Literal RHS (Comma separated list)\n              </li>\n            </StyledList>\n            <Flex container={{ direction: 'column' }}>\n              <Text>\n                If you would like to limit RHS value types and avoid these incompatibilities, you\n                will need to exclude these comparators using the <b>validComparators</b> prop.\n              </Text>\n            </Flex>\n          </Flex>\n        </CardContent>\n      </Card>\n    </StyledGrid>\n  );\n};\n\nAtomicConditionDemo.args = {\n  validComparators: false,\n  renderInPopover: false,\n  dateFunctions: true,\n  itemDirection: 'column',\n  useLiteralRHSType: true,\n  useFieldRHSType: true,\n  useRelativeDatesRHSType: true,\n  showLhsAsLabel: false\n};\n\nAtomicConditionDemo.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } },\n  itemDirection: { options: ['column', 'row'], control: { type: 'select' } },\n  useLiteralRHSType: { control: { type: 'boolean' } },\n  useFieldRHSType: { control: { type: 'boolean' } },\n  useRelativeDatesRHSType: { control: { type: 'boolean' } },\n  showLhsAsLabel: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledGrid: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").GridProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCodeBlock: import("styled-components").StyledComponent<"pre", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=ConditionBuilder.styles.d.ts.map

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,UAAU,mOAEtB,CAAC;AAEF,eAAO,MAAM,eAAe,yGAG3B,CAAC;AAGF,eAAO,MAAM,UAAU,wGAEtB,CAAC"}

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Grid, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledGrid = styled(Grid) `
+  max-width: 60rem;
+`;
+export const StyledCodeBlock = styled.pre `
+  padding: ${props => props.theme.base.spacing};
+  margin-bottom: ${props => props.theme.base.spacing};
+`;
+StyledCodeBlock.defaultProps = defaultThemeProp;
+export const StyledList = styled.ul `
+  padding-left: calc(4 * ${props => props.theme.base.spacing});
+`;
+StyledList.defaultProps = defaultThemeProp;
+//# sourceMappingURL=ConditionBuilder.styles.js.map

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.styles.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;aAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;mBAC3B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CACnD,CAAC;AACF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;2BACR,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CAC3D,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { Grid, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledGrid = styled(Grid)`\n  max-width: 60rem;\n`;\n\nexport const StyledCodeBlock = styled.pre`\n  padding: ${props => props.theme.base.spacing};\n  margin-bottom: ${props => props.theme.base.spacing};\n`;\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.ul`\n  padding-left: calc(4 * ${props => props.theme.base.spacing});\n`;\nStyledList.defaultProps = defaultThemeProp;\n"]}

package/jsx/core/AppShell/AppShell.stories.d.ts

@@ -23,6 +23,7 @@ interface AppShellStoryProps {
     environmentColor?: string;
     notificationsEmpty?: boolean;
     notificationsLoading?: boolean;
+    casesTypesEmpty?: boolean;
     recentsEmpty?: boolean;
     recentsLoading?: boolean;
     pinsLoading?: boolean;

package/jsx/core/AppShell/AppShell.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAmBd,MAAM,yBAAyB,CAAC;;AAcjC,wBAOU;AAEV,UAAU,kBAAkB;IAE1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAGrC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAqPlD,CAAC;AAoCF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAqBjE,CAAC"}
+{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAmBd,MAAM,yBAAyB,CAAC;;AAcjC,wBAOU;AAEV,UAAU,kBAAkB;IAE1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAGrC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAqPlD,CAAC;AAsCF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAqBjE,CAAC"}

package/jsx/core/AppShell/AppShell.stories.jsx

@@ -180,7 +180,7 @@ export const AppShellDemo = (args) => {
                 },
                 value: searchVal
             }
-            : undefined} appHeader={args.appHeader} caseTypes={args.createLinks || defaultCreateLinks} links={linksWithHandlers} main={args.main || defaultMainContent} cases={args.cases} banners={args.banners} operator={operatorData} utils={args.utils || defaultUtils} environment={args.environmentName
+            : undefined} appHeader={args.appHeader} caseTypes={args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks} links={linksWithHandlers} main={args.main || defaultMainContent} cases={args.cases} banners={args.banners} operator={operatorData} utils={args.utils || defaultUtils} environment={args.environmentName
             ? {
                 name: args.environmentName,
                 color: args.environmentColor
@@ -199,6 +199,7 @@ AppShellDemo.args = {
     environmentColor: '#FFDBDE',
     notificationsEmpty: false,
     notificationsLoading: false,
+    casesTypesEmpty: false,
     recentsEmpty: false,
     recentsLoading: false,
     pinsLoading: false
@@ -215,6 +216,7 @@ AppShellDemo.argTypes = {
     environmentColor: { control: { type: 'color' } },
     notificationsEmpty: { control: { type: 'boolean' } },
     notificationsLoading: { control: { type: 'boolean' } },
+    casesTypesEmpty: { control: { type: 'boolean' } },
     recentsEmpty: { control: { type: 'boolean' } },
     recentsLoading: { control: { type: 'boolean' } },
     pinsLoading: { control: { type: 'boolean' } }

package/jsx/core/AppShell/AppShell.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useContext, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n  AppShell,\n  AppShellProps,\n  AppShellList,\n  DrawerItemProps,\n  Button,\n  DateInput,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  Select,\n  Option,\n  Modal,\n  ModalManagerContext,\n  TextArea,\n  ToasterContext,\n  ForwardProps,\n  useAfterInitialEffect,\n  windowIsAvailable,\n  Configuration\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport {\n  defaultLinks,\n  defaultMainContent,\n  defaultNotifications,\n  defaultRecents,\n  operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n  title: 'Core/App Shell',\n  component: AppShell,\n  id: 'App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellStoryProps {\n  /** Demo props */\n  main?: AppShellProps['main'];\n  appInfo?: AppShellProps['appInfo'];\n  banners?: AppShellProps['banners'];\n  cases?: AppShellProps['cases'];\n  caseLinks?: AppShellProps['links'];\n  createLinks?: any[];\n  recentItems?: any[];\n  utils?: AppShellProps['utils'];\n  onLinkClick?: (name: string) => void;\n\n  /** Storybook controls */\n  appName?: AppShellProps['appInfo']['appName'];\n  portalName?: AppShellProps['appInfo']['portalName'];\n  href?: AppShellProps['appInfo']['href'];\n  imageSrc?: AppShellProps['appInfo']['imageSrc'];\n  fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n  withSearch?: boolean;\n  appHeader?: AppShellProps['appHeader'];\n  environmentName?: string;\n  environmentColor?: string;\n  notificationsEmpty?: boolean;\n  notificationsLoading?: boolean;\n  recentsEmpty?: boolean;\n  recentsLoading?: boolean;\n  pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { dismiss } = useContext(ModalContext);\n    const { push: pushToaster } = useContext(ToasterContext);\n\n    return (\n      <Modal\n        as='form'\n        heading={`New ${caseType}`}\n        actions={\n          <>\n            <Button onClick={dismiss}>Cancel</Button>\n            <Button\n              variant='primary'\n              type='submit'\n              onClick={(e: FormEvent) => {\n                e.preventDefault();\n                dismiss();\n                pushToaster({ content: `${caseType} requested` });\n              }}\n            >\n              Request\n            </Button>\n          </>\n        }\n      >\n        <Grid container={{ rowGap: 2 }}>\n          <DateInput label='Date Requested' info={null} />\n          <Select label='Department'>\n            <Option value=''>Select…</Option>\n            <Option value='Fire'>Fire</Option>\n            <Option value='Facilities'>Facilities</Option>\n            <Option value='Parks'>Parks</Option>\n            <Option value='Sanitation'>Sanitation</Option>\n            <Option value='Parking &amp; Traffic'>Parking &amp; Traffic</Option>\n            <Option value='Police'>Police</Option>\n            <Option value='Courts'>Courts</Option>\n            <Option value='Healthcare'>Healthcare</Option>\n            <Option value='Energy'>Energy</Option>\n            <Option value='Justice department'>Justice department</Option>\n            <Option value='Environmental'>Environmental</Option>\n          </Select>\n          <TextArea label='Purpose of Purchase' />\n          <Select label='Desired Make'>\n            <Option value=''>Select...</Option>\n            <Option value='Ford'>Ford</Option>\n            <Option value='Dodge'>Dodge</Option>\n            <Option value='Toyota'>Toyota</Option>\n            <Option value='Tesla'>Tesla</Option>\n          </Select>\n          <Input label='Desired Make' />\n          <Input\n            type='number'\n            min='2016'\n            max='2021'\n            label='Year'\n            info='Must be within last 5 years'\n          />\n          <Input\n            type='number'\n            min='0.01'\n            step='0.01'\n            max='50000'\n            label='Estimated Cost'\n            info='May not exceed $50,000.00'\n          />\n        </Grid>\n      </Modal>\n    );\n  };\n\n  const caseLinks = args.caseLinks || defaultLinks;\n  const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n  const { create: createModal } = useContext(ModalManagerContext);\n  const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n  const [notifications, setNotifications] =\n    useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n  const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n    args.recentItems || defaultRecents\n  );\n  const [numNewNotifications, setNumNewNotifications] = useState(\n    notifications.filter(x => x.unread).length\n  );\n  const [searchVal, setSearchVal] = useState('');\n\n  useAfterInitialEffect(() => {\n    setLinks(caseLinks);\n  }, [caseLinks]);\n\n  const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n    return (links || []).map(link => ({\n      ...link,\n      onClick(e: MouseEvent<HTMLAnchorElement>) {\n        e.preventDefault();\n        setLinks((prevLinks = []) => {\n          return prevLinks.map(prevLink => {\n            return { ...link, active: prevLink.name === link.name };\n          });\n        });\n        args.onLinkClick?.(link.name);\n      }\n    }));\n  }, [links]);\n\n  const defaultCreateLinks = ['Vehicle Purchase'].map(name => ({\n    name,\n    onClick: () => {\n      createModal(CreateCaseModal, { caseType: name });\n    }\n  }));\n\n  const handleNotificationClick = (passedId: string) => {\n    setNotifications(cur =>\n      cur.map(({ id, unread, ...item }) => ({\n        id,\n        unread: passedId === id ? false : unread,\n        ...item\n      }))\n    );\n  };\n\n  const handlePinToggle = (passedId: string) => {\n    setRecents(cur =>\n      cur.map(({ id, pinned, ...item }) => ({\n        id,\n        pinned: passedId === id ? !pinned : pinned,\n        ...item\n      }))\n    );\n  };\n\n  const notificationViewItems = [\n    {\n      id: '234',\n      items: args.notificationsEmpty ? [] : notifications,\n      loading: args.notificationsLoading,\n      onItemClick: handleNotificationClick,\n      viewAll: {\n        href: '#'\n      },\n      emptyText: 'No notifications'\n    }\n  ];\n\n  const recentViewItems = [\n    {\n      id: '456',\n      items: recents.filter(x => x.pinned),\n      loading: args.pinsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Pinned items',\n      emptyText: 'No pinned items'\n    },\n    {\n      id: '789',\n      items: args.recentsEmpty ? [] : recents,\n      loading: args.recentsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Recently viewed',\n      emptyText: 'No recents'\n    }\n  ];\n\n  const newNotificationCountTimerRef = useRef(NaN);\n\n  const defaultUtils = [\n    {\n      name: 'Notifications',\n      visual: <Icon name='bell-solid' />,\n      count: args.notificationsEmpty ? 0 : numNewNotifications,\n      drawerView: <AppShellList listView={notificationViewItems} />,\n      onDrawerOpen: () => {\n        clearInterval(newNotificationCountTimerRef.current);\n        setNumNewNotifications(0);\n      },\n      onDrawerClose: () => {\n        if (windowIsAvailable) {\n          // Mock new notifications arriving on a minute interval after the drawer closes.\n          // Let's face it, you're popular.\n          newNotificationCountTimerRef.current = window.setInterval(() => {\n            setNumNewNotifications(cur => cur + 2);\n          }, 60000);\n        }\n      }\n    },\n    {\n      name: 'Recents',\n      visual: <Icon name='clock-solid' />,\n      drawerView: <AppShellList listView={recentViewItems} />\n    }\n  ];\n\n  return (\n    <AppShell\n      appInfo={\n        args.appInfo || {\n          href: args.href || 'https://www.pega.com/',\n          imageSrc:\n            args.imageSrc ||\n            'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n          fullImageSrc:\n            args.fullImageSrc ||\n            'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n          appName: args.appName || 'Cosmos AppShell',\n          portalName: args.portalName || 'Demo'\n        }\n      }\n      searchInput={\n        showSearch\n          ? {\n              onSearchChange: (value: string) => {\n                setSearchVal(value);\n              },\n              value: searchVal\n            }\n          : undefined\n      }\n      appHeader={args.appHeader}\n      caseTypes={args.createLinks || defaultCreateLinks}\n      links={linksWithHandlers}\n      main={args.main || defaultMainContent}\n      cases={args.cases}\n      banners={args.banners}\n      operator={operatorData}\n      utils={args.utils || defaultUtils}\n      environment={\n        args.environmentName\n          ? {\n              name: args.environmentName,\n              color: args.environmentColor\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nAppShellDemo.args = {\n  appName: 'Cosmos AppShell',\n  portalName: 'Demo',\n  href: 'https://www.pega.com/',\n  imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n  fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n  withSearch: true,\n  appHeader: true,\n  environmentName: 'dev',\n  environmentColor: '#FFDBDE',\n  notificationsEmpty: false,\n  notificationsLoading: false,\n  recentsEmpty: false,\n  recentsLoading: false,\n  pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  portalName: { control: { type: 'text' } },\n  href: { control: { type: 'text' } },\n  imageSrc: { control: { type: 'text' } },\n  fullImageSrc: { control: { type: 'text' } },\n  withSearch: { control: { type: 'boolean' } },\n  appHeader: { control: { type: 'boolean' } },\n  environmentName: { control: { type: 'text' } },\n  environmentColor: { control: { type: 'color' } },\n  notificationsEmpty: { control: { type: 'boolean' } },\n  notificationsLoading: { control: { type: 'boolean' } },\n  recentsEmpty: { control: { type: 'boolean' } },\n  recentsLoading: { control: { type: 'boolean' } },\n  pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n  navColor?: string;\n  headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n  args: ConfigurableAppShellProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'app-shell': {\n            nav: {\n              'background-color': args.navColor\n            },\n            header: {\n              'background-color': args.headerColor\n            }\n          }\n        }\n      }}\n    >\n      <AppShellDemo appHeader />\n    </Configuration>\n  );\n};\n\nConfigurableAppShell.args = {\n  navColor: '#252c32',\n  headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n  navColor: { control: { type: 'color' } },\n  headerColor: { control: { type: 'color' } }\n};\n"]}
+{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useContext, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n  AppShell,\n  AppShellProps,\n  AppShellList,\n  DrawerItemProps,\n  Button,\n  DateInput,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  Select,\n  Option,\n  Modal,\n  ModalManagerContext,\n  TextArea,\n  ToasterContext,\n  ForwardProps,\n  useAfterInitialEffect,\n  windowIsAvailable,\n  Configuration\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport {\n  defaultLinks,\n  defaultMainContent,\n  defaultNotifications,\n  defaultRecents,\n  operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n  title: 'Core/App Shell',\n  component: AppShell,\n  id: 'App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellStoryProps {\n  /** Demo props */\n  main?: AppShellProps['main'];\n  appInfo?: AppShellProps['appInfo'];\n  banners?: AppShellProps['banners'];\n  cases?: AppShellProps['cases'];\n  caseLinks?: AppShellProps['links'];\n  createLinks?: any[];\n  recentItems?: any[];\n  utils?: AppShellProps['utils'];\n  onLinkClick?: (name: string) => void;\n\n  /** Storybook controls */\n  appName?: AppShellProps['appInfo']['appName'];\n  portalName?: AppShellProps['appInfo']['portalName'];\n  href?: AppShellProps['appInfo']['href'];\n  imageSrc?: AppShellProps['appInfo']['imageSrc'];\n  fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n  withSearch?: boolean;\n  appHeader?: AppShellProps['appHeader'];\n  environmentName?: string;\n  environmentColor?: string;\n  notificationsEmpty?: boolean;\n  notificationsLoading?: boolean;\n  casesTypesEmpty?: boolean;\n  recentsEmpty?: boolean;\n  recentsLoading?: boolean;\n  pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { dismiss } = useContext(ModalContext);\n    const { push: pushToaster } = useContext(ToasterContext);\n\n    return (\n      <Modal\n        as='form'\n        heading={`New ${caseType}`}\n        actions={\n          <>\n            <Button onClick={dismiss}>Cancel</Button>\n            <Button\n              variant='primary'\n              type='submit'\n              onClick={(e: FormEvent) => {\n                e.preventDefault();\n                dismiss();\n                pushToaster({ content: `${caseType} requested` });\n              }}\n            >\n              Request\n            </Button>\n          </>\n        }\n      >\n        <Grid container={{ rowGap: 2 }}>\n          <DateInput label='Date Requested' info={null} />\n          <Select label='Department'>\n            <Option value=''>Select…</Option>\n            <Option value='Fire'>Fire</Option>\n            <Option value='Facilities'>Facilities</Option>\n            <Option value='Parks'>Parks</Option>\n            <Option value='Sanitation'>Sanitation</Option>\n            <Option value='Parking &amp; Traffic'>Parking &amp; Traffic</Option>\n            <Option value='Police'>Police</Option>\n            <Option value='Courts'>Courts</Option>\n            <Option value='Healthcare'>Healthcare</Option>\n            <Option value='Energy'>Energy</Option>\n            <Option value='Justice department'>Justice department</Option>\n            <Option value='Environmental'>Environmental</Option>\n          </Select>\n          <TextArea label='Purpose of Purchase' />\n          <Select label='Desired Make'>\n            <Option value=''>Select...</Option>\n            <Option value='Ford'>Ford</Option>\n            <Option value='Dodge'>Dodge</Option>\n            <Option value='Toyota'>Toyota</Option>\n            <Option value='Tesla'>Tesla</Option>\n          </Select>\n          <Input label='Desired Make' />\n          <Input\n            type='number'\n            min='2016'\n            max='2021'\n            label='Year'\n            info='Must be within last 5 years'\n          />\n          <Input\n            type='number'\n            min='0.01'\n            step='0.01'\n            max='50000'\n            label='Estimated Cost'\n            info='May not exceed $50,000.00'\n          />\n        </Grid>\n      </Modal>\n    );\n  };\n\n  const caseLinks = args.caseLinks || defaultLinks;\n  const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n  const { create: createModal } = useContext(ModalManagerContext);\n  const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n  const [notifications, setNotifications] =\n    useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n  const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n    args.recentItems || defaultRecents\n  );\n  const [numNewNotifications, setNumNewNotifications] = useState(\n    notifications.filter(x => x.unread).length\n  );\n  const [searchVal, setSearchVal] = useState('');\n\n  useAfterInitialEffect(() => {\n    setLinks(caseLinks);\n  }, [caseLinks]);\n\n  const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n    return (links || []).map(link => ({\n      ...link,\n      onClick(e: MouseEvent<HTMLAnchorElement>) {\n        e.preventDefault();\n        setLinks((prevLinks = []) => {\n          return prevLinks.map(prevLink => {\n            return { ...link, active: prevLink.name === link.name };\n          });\n        });\n        args.onLinkClick?.(link.name);\n      }\n    }));\n  }, [links]);\n\n  const defaultCreateLinks = ['Vehicle Purchase'].map(name => ({\n    name,\n    onClick: () => {\n      createModal(CreateCaseModal, { caseType: name });\n    }\n  }));\n\n  const handleNotificationClick = (passedId: string) => {\n    setNotifications(cur =>\n      cur.map(({ id, unread, ...item }) => ({\n        id,\n        unread: passedId === id ? false : unread,\n        ...item\n      }))\n    );\n  };\n\n  const handlePinToggle = (passedId: string) => {\n    setRecents(cur =>\n      cur.map(({ id, pinned, ...item }) => ({\n        id,\n        pinned: passedId === id ? !pinned : pinned,\n        ...item\n      }))\n    );\n  };\n\n  const notificationViewItems = [\n    {\n      id: '234',\n      items: args.notificationsEmpty ? [] : notifications,\n      loading: args.notificationsLoading,\n      onItemClick: handleNotificationClick,\n      viewAll: {\n        href: '#'\n      },\n      emptyText: 'No notifications'\n    }\n  ];\n\n  const recentViewItems = [\n    {\n      id: '456',\n      items: recents.filter(x => x.pinned),\n      loading: args.pinsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Pinned items',\n      emptyText: 'No pinned items'\n    },\n    {\n      id: '789',\n      items: args.recentsEmpty ? [] : recents,\n      loading: args.recentsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Recently viewed',\n      emptyText: 'No recents'\n    }\n  ];\n\n  const newNotificationCountTimerRef = useRef(NaN);\n\n  const defaultUtils = [\n    {\n      name: 'Notifications',\n      visual: <Icon name='bell-solid' />,\n      count: args.notificationsEmpty ? 0 : numNewNotifications,\n      drawerView: <AppShellList listView={notificationViewItems} />,\n      onDrawerOpen: () => {\n        clearInterval(newNotificationCountTimerRef.current);\n        setNumNewNotifications(0);\n      },\n      onDrawerClose: () => {\n        if (windowIsAvailable) {\n          // Mock new notifications arriving on a minute interval after the drawer closes.\n          // Let's face it, you're popular.\n          newNotificationCountTimerRef.current = window.setInterval(() => {\n            setNumNewNotifications(cur => cur + 2);\n          }, 60000);\n        }\n      }\n    },\n    {\n      name: 'Recents',\n      visual: <Icon name='clock-solid' />,\n      drawerView: <AppShellList listView={recentViewItems} />\n    }\n  ];\n\n  return (\n    <AppShell\n      appInfo={\n        args.appInfo || {\n          href: args.href || 'https://www.pega.com/',\n          imageSrc:\n            args.imageSrc ||\n            'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n          fullImageSrc:\n            args.fullImageSrc ||\n            'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n          appName: args.appName || 'Cosmos AppShell',\n          portalName: args.portalName || 'Demo'\n        }\n      }\n      searchInput={\n        showSearch\n          ? {\n              onSearchChange: (value: string) => {\n                setSearchVal(value);\n              },\n              value: searchVal\n            }\n          : undefined\n      }\n      appHeader={args.appHeader}\n      caseTypes={args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks}\n      links={linksWithHandlers}\n      main={args.main || defaultMainContent}\n      cases={args.cases}\n      banners={args.banners}\n      operator={operatorData}\n      utils={args.utils || defaultUtils}\n      environment={\n        args.environmentName\n          ? {\n              name: args.environmentName,\n              color: args.environmentColor\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nAppShellDemo.args = {\n  appName: 'Cosmos AppShell',\n  portalName: 'Demo',\n  href: 'https://www.pega.com/',\n  imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n  fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n  withSearch: true,\n  appHeader: true,\n  environmentName: 'dev',\n  environmentColor: '#FFDBDE',\n  notificationsEmpty: false,\n  notificationsLoading: false,\n  casesTypesEmpty: false,\n  recentsEmpty: false,\n  recentsLoading: false,\n  pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  portalName: { control: { type: 'text' } },\n  href: { control: { type: 'text' } },\n  imageSrc: { control: { type: 'text' } },\n  fullImageSrc: { control: { type: 'text' } },\n  withSearch: { control: { type: 'boolean' } },\n  appHeader: { control: { type: 'boolean' } },\n  environmentName: { control: { type: 'text' } },\n  environmentColor: { control: { type: 'color' } },\n  notificationsEmpty: { control: { type: 'boolean' } },\n  notificationsLoading: { control: { type: 'boolean' } },\n  casesTypesEmpty: { control: { type: 'boolean' } },\n  recentsEmpty: { control: { type: 'boolean' } },\n  recentsLoading: { control: { type: 'boolean' } },\n  pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n  navColor?: string;\n  headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n  args: ConfigurableAppShellProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'app-shell': {\n            nav: {\n              'background-color': args.navColor\n            },\n            header: {\n              'background-color': args.headerColor\n            }\n          }\n        }\n      }}\n    >\n      <AppShellDemo appHeader />\n    </Configuration>\n  );\n};\n\nConfigurableAppShell.args = {\n  navColor: '#252c32',\n  headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n  navColor: { control: { type: 'color' } },\n  headerColor: { control: { type: 'color' } }\n};\n"]}

package/jsx/core/Button/Button.stories.jsx

@@ -44,21 +44,21 @@ export const DisabledButtons = () => {
       </Button>
     </>);
 };
-export const IconButtons = ({ compact }) => {
+export const IconButtons = (args) => {
     return (<Flex container={{ alignItems: 'center' }}>
-      <Button variant='primary' label='Icon button primary' icon compact={compact}>
+      <Button variant='primary' label='Icon button primary' icon compact={args.compact}>
         <Icon name='plus'/>
       </Button>
-      <Button variant='secondary' label='Icon button secondary' icon compact={compact}>
+      <Button variant='secondary' label='Icon button secondary' icon compact={args.compact}>
         <Icon name='plus'/>
       </Button>
-      <Button variant='simple' label='Icon button simple' icon compact={compact}>
+      <Button variant='simple' label='Icon button simple' icon compact={args.compact}>
         <Icon name='plus'/>
       </Button>
-      <Button variant='link' label='Icon button link' icon compact={compact}>
+      <Button variant='link' label='Icon button link' icon compact={args.compact}>
         <Icon name='plus'/>
       </Button>
-      <Button variant='text' label='Icon button text' icon compact={compact}>
+      <Button variant='text' label='Icon button text' icon compact={args.compact}>
         <Icon name='plus'/>
       </Button>
     </Flex>);

package/jsx/core/Button/Button.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.jsx","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  Button,\n  ButtonProps,\n  Configuration,\n  Flex,\n  Icon,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Button',\n  component: Button,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} compact={args.compact}>\n      Click me\n    </Button>\n  );\n};\n\nButtonVariants.args = {\n  variant: 'primary',\n  compact: false\n};\n\nButtonVariants.argTypes = {\n  variant: {\n    options: ['primary', 'secondary', 'simple', 'link', 'text'],\n    control: { type: 'select' }\n  },\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons = () => {\n  return (\n    <>\n      <Button variant='primary' disabled>\n        Primary disabled\n      </Button>\n      <Button variant='secondary' disabled>\n        Secondary disabled\n      </Button>\n      <Button variant='simple' disabled>\n        Simple disabled\n      </Button>\n      <Button variant='link' disabled>\n        Link disabled\n      </Button>\n      <Button variant='text' disabled>\n        Text disabled\n      </Button>\n    </>\n  );\n};\n\nexport const IconButtons: Story<ButtonProps> = ({ compact }: ButtonProps) => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Button variant='primary' label='Icon button primary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='secondary' label='Icon button secondary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='simple' label='Icon button simple' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='link' label='Icon button link' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='text' label='Icon button text' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n    </Flex>\n  );\n};\n\nIconButtons.args = {\n  compact: false\n};\n\nIconButtons.argTypes = {\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const LoadingButtons: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} icon={args.icon} label='Loading' loading>\n      {args.icon ? <Icon name='plus' /> : 'Loading'}\n    </Button>\n  );\n};\n\nLoadingButtons.args = {\n  variant: 'primary',\n  icon: false\n};\n\nLoadingButtons.argTypes = {\n  variant: { options: ['primary', 'secondary'], control: { type: 'select' } },\n  icon: { control: { type: 'boolean' } }\n};\n\nexport const ButtonAsLink = () => {\n  return (\n    <Button variant='primary' href='https://www.pega.com' target='_blank'>\n      Go to pega.com\n    </Button>\n  );\n};\n\nexport const BareButtonDemo: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <BareButton disabled={args.disabled} href={args.href || undefined}>\n      Click me\n    </BareButton>\n  );\n};\n\nBareButtonDemo.args = {\n  disabled: false,\n  href: ''\n};\n\nBareButtonDemo.argTypes = {\n  disabled: { control: { type: 'boolean' } },\n  href: { control: { type: 'text' } }\n};\n\ninterface ConfigurableButtonProps {\n  borderWidth?: string;\n  borderRadius?: number;\n  color?: string;\n  secondaryColor?: string;\n  padding?: string;\n}\n\nexport const ConfigurableButton: Story<ConfigurableButtonProps> = (\n  args: ConfigurableButtonProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          button: {\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius,\n            color: args.color,\n            'secondary-color': args.secondaryColor,\n            padding: args.padding\n          }\n        }\n      }}\n    >\n      <Button>Configurable Button</Button>\n    </Configuration>\n  );\n};\n\nConfigurableButton.args = {\n  borderWidth: '0.0625rem',\n  borderRadius: 9999,\n  color: '#076bc9',\n  secondaryColor: '#ffffff',\n  padding: '0rem 1rem'\n};\n\nConfigurableButton.argTypes = {\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'number' } },\n  color: { control: { type: 'color' } },\n  secondaryColor: { control: { type: 'color' } },\n  padding: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"Button.stories.jsx","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  Button,\n  ButtonProps,\n  Configuration,\n  Flex,\n  Icon,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Button',\n  component: Button,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} compact={args.compact}>\n      Click me\n    </Button>\n  );\n};\n\nButtonVariants.args = {\n  variant: 'primary',\n  compact: false\n};\n\nButtonVariants.argTypes = {\n  variant: {\n    options: ['primary', 'secondary', 'simple', 'link', 'text'],\n    control: { type: 'select' }\n  },\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons = () => {\n  return (\n    <>\n      <Button variant='primary' disabled>\n        Primary disabled\n      </Button>\n      <Button variant='secondary' disabled>\n        Secondary disabled\n      </Button>\n      <Button variant='simple' disabled>\n        Simple disabled\n      </Button>\n      <Button variant='link' disabled>\n        Link disabled\n      </Button>\n      <Button variant='text' disabled>\n        Text disabled\n      </Button>\n    </>\n  );\n};\n\nexport const IconButtons: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Button variant='primary' label='Icon button primary' icon compact={args.compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='secondary' label='Icon button secondary' icon compact={args.compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='simple' label='Icon button simple' icon compact={args.compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='link' label='Icon button link' icon compact={args.compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='text' label='Icon button text' icon compact={args.compact}>\n        <Icon name='plus' />\n      </Button>\n    </Flex>\n  );\n};\n\nIconButtons.args = {\n  compact: false\n};\n\nIconButtons.argTypes = {\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const LoadingButtons: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} icon={args.icon} label='Loading' loading>\n      {args.icon ? <Icon name='plus' /> : 'Loading'}\n    </Button>\n  );\n};\n\nLoadingButtons.args = {\n  variant: 'primary',\n  icon: false\n};\n\nLoadingButtons.argTypes = {\n  variant: { options: ['primary', 'secondary'], control: { type: 'select' } },\n  icon: { control: { type: 'boolean' } }\n};\n\nexport const ButtonAsLink = () => {\n  return (\n    <Button variant='primary' href='https://www.pega.com' target='_blank'>\n      Go to pega.com\n    </Button>\n  );\n};\n\nexport const BareButtonDemo: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <BareButton disabled={args.disabled} href={args.href || undefined}>\n      Click me\n    </BareButton>\n  );\n};\n\nBareButtonDemo.args = {\n  disabled: false,\n  href: ''\n};\n\nBareButtonDemo.argTypes = {\n  disabled: { control: { type: 'boolean' } },\n  href: { control: { type: 'text' } }\n};\n\ninterface ConfigurableButtonProps {\n  borderWidth?: string;\n  borderRadius?: number;\n  color?: string;\n  secondaryColor?: string;\n  padding?: string;\n}\n\nexport const ConfigurableButton: Story<ConfigurableButtonProps> = (\n  args: ConfigurableButtonProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          button: {\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius,\n            color: args.color,\n            'secondary-color': args.secondaryColor,\n            padding: args.padding\n          }\n        }\n      }}\n    >\n      <Button>Configurable Button</Button>\n    </Configuration>\n  );\n};\n\nConfigurableButton.args = {\n  borderWidth: '0.0625rem',\n  borderRadius: 9999,\n  color: '#076bc9',\n  secondaryColor: '#ffffff',\n  padding: '0rem 1rem'\n};\n\nConfigurableButton.argTypes = {\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'number' } },\n  color: { control: { type: 'color' } },\n  secondaryColor: { control: { type: 'color' } },\n  padding: { control: { type: 'text' } }\n};\n"]}

package/jsx/core/ColorPicker/ColorPicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAK/C,OAAO,EAEL,gBAAgB,EAMjB,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAoBnD,CAAC;AA0BF,eAAO,MAAM,UAAU,mBAmFtB,CAAC"}
+{"version":3,"file":"ColorPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAe,gBAAgB,EAA8B,MAAM,yBAAyB,CAAC;;AAIpG,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAoBnD,CAAC;AA0BF,eAAO,MAAM,UAAU,mBA2EtB,CAAC"}

package/jsx/core/ColorPicker/ColorPicker.stories.jsx

@@ -1,7 +1,6 @@
 import { useMemo, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { ColorPicker, Flex, Grid, Text, tryCatch, useTheme } from '@pega/cosmos-react-core';
+import { ColorPicker, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';
+import { StyledColorPane } from './ColorPicker.styles';
 export default {
     title: 'Core/ColorPicker',
     component: ColorPicker
@@ -35,13 +34,6 @@ ColorPickerDemo.argTypes = {
     readOnly: { control: { type: 'boolean' } }
 };
 export const MultiColor = () => {
-    const StyledColorPane = styled.div(({ color }) => {
-        const c = tryCatch(() => readableColor(color));
-        return css `
-      color: ${c};
-      background: ${color};
-    `;
-    });
     const { base: { palette } } = useTheme();
     const opaqueColors = useMemo(() => Object.entries(palette).filter(([, color]) => {
         return /^#[0-9A-F]{6}$/i.test(color);

package/jsx/core/ColorPicker/ColorPicker.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  ColorPicker,\n  ColorPickerProps,\n  Flex,\n  Grid,\n  Text,\n  tryCatch,\n  useTheme\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/ColorPicker',\n  component: ColorPicker\n} as Meta;\n\nexport const ColorPickerDemo: Story<ColorPickerProps> = (args: ColorPickerProps) => {\n  const [value, setValue] = useState('#10a5ac');\n\n  return (\n    <ColorPicker\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      swatchOnly={args.swatchOnly}\n      inline={args.inline}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      value={value}\n      onChange={e => {\n        setValue(e.hex);\n      }}\n    />\n  );\n};\n\nColorPickerDemo.args = {\n  label: 'ColorPicker label',\n  labelHidden: false,\n  info: 'Pick a color',\n  status: undefined,\n  swatchOnly: false,\n  inline: false,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nColorPickerDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  swatchOnly: { control: { type: 'boolean' } },\n  inline: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor = () => {\n  const StyledColorPane = styled.div<{ color: string }>(({ color }) => {\n    const c = tryCatch(() => readableColor(color));\n    return css`\n      color: ${c};\n      background: ${color};\n    `;\n  });\n\n  const {\n    base: { palette }\n  } = useTheme();\n\n  const opaqueColors = useMemo(\n    () =>\n      Object.entries(palette).filter(([, color]) => {\n        return /^#[0-9A-F]{6}$/i.test(color);\n      }),\n    [palette]\n  );\n\n  const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n  return (\n    <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          alignItems: 'center',\n          colGap: 4,\n          rowGap: 1\n        }}\n        style={{ padding: '1rem' }}\n      >\n        <>\n          {values.map((color, i) => {\n            const key = `color-${i}`;\n            return (\n              <div key={key}>\n                <ColorPicker\n                  inline\n                  label={opaqueColors[i][0]}\n                  value={color}\n                  onChange={e => {\n                    const newColor = e.hex;\n                    setValues(cur => {\n                      return cur.map((c, j) => {\n                        if (i === j) return newColor;\n                        return c;\n                      });\n                    });\n                  }}\n                />\n              </div>\n            );\n          })}\n        </>\n      </Grid>\n\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          gap: 0.125\n        }}\n      >\n        {values.map((color, i) => {\n          const key = `color-${i}`;\n          return (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledColorPane}\n              color={color}\n              key={key}\n            >\n              <Text variant='h1' as='span'>\n                {color}\n              </Text>\n            </Flex>\n          );\n        })}\n      </Grid>\n    </Grid>\n  );\n};\n"]}
+{"version":3,"file":"ColorPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport { ColorPicker, ColorPickerProps, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { StyledColorPane } from './ColorPicker.styles';\n\nexport default {\n  title: 'Core/ColorPicker',\n  component: ColorPicker\n} as Meta;\n\nexport const ColorPickerDemo: Story<ColorPickerProps> = (args: ColorPickerProps) => {\n  const [value, setValue] = useState('#10a5ac');\n\n  return (\n    <ColorPicker\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      swatchOnly={args.swatchOnly}\n      inline={args.inline}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      value={value}\n      onChange={e => {\n        setValue(e.hex);\n      }}\n    />\n  );\n};\n\nColorPickerDemo.args = {\n  label: 'ColorPicker label',\n  labelHidden: false,\n  info: 'Pick a color',\n  status: undefined,\n  swatchOnly: false,\n  inline: false,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nColorPickerDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  swatchOnly: { control: { type: 'boolean' } },\n  inline: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor = () => {\n  const {\n    base: { palette }\n  } = useTheme();\n\n  const opaqueColors = useMemo(\n    () =>\n      Object.entries(palette).filter(([, color]) => {\n        return /^#[0-9A-F]{6}$/i.test(color);\n      }),\n    [palette]\n  );\n\n  const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n  return (\n    <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          alignItems: 'center',\n          colGap: 4,\n          rowGap: 1\n        }}\n        style={{ padding: '1rem' }}\n      >\n        <>\n          {values.map((color, i) => {\n            const key = `color-${i}`;\n            return (\n              <div key={key}>\n                <ColorPicker\n                  inline\n                  label={opaqueColors[i][0]}\n                  value={color}\n                  onChange={e => {\n                    const newColor = e.hex;\n                    setValues(cur => {\n                      return cur.map((c, j) => {\n                        if (i === j) return newColor;\n                        return c;\n                      });\n                    });\n                  }}\n                />\n              </div>\n            );\n          })}\n        </>\n      </Grid>\n\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          gap: 0.125\n        }}\n      >\n        {values.map((color, i) => {\n          const key = `color-${i}`;\n          return (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledColorPane}\n              color={color}\n              key={key}\n            >\n              <Text variant='h1' as='span'>\n                {color}\n              </Text>\n            </Flex>\n          );\n        })}\n      </Grid>\n    </Grid>\n  );\n};\n"]}

package/jsx/core/ColorPicker/ColorPicker.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledColorPane: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    color: string;
+}, never>;
+//# sourceMappingURL=ColorPicker.styles.d.ts.map

package/jsx/core/ColorPicker/ColorPicker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe;WAAuB,MAAM;SAMvD,CAAC"}

package/jsx/core/ColorPicker/ColorPicker.styles.js

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { tryCatch } from '@pega/cosmos-react-core';
+export const StyledColorPane = styled.div(({ color }) => {
+    const c = tryCatch(() => readableColor(color));
+    return css `
+    color: ${c};
+    background: ${color};
+  `;
+});
+//# sourceMappingURL=ColorPicker.styles.js.map

package/jsx/core/ColorPicker/ColorPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/C,OAAO,GAAG,CAAA;aACC,CAAC;kBACI,KAAK;GACpB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledColorPane = styled.div<{ color: string }>(({ color }) => {\n  const c = tryCatch(() => readableColor(color));\n  return css`\n    color: ${c};\n    background: ${color};\n  `;\n});\n"]}

package/jsx/core/Configuration/Configuration.mocks.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const FlipFlop: ({ flipFlop, first, second }: {
+    flipFlop: boolean;
+    first: string;
+    second: string;
+}) => JSX.Element;
+//# sourceMappingURL=Configuration.mocks.d.ts.map

package/jsx/core/Configuration/Configuration.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.mocks.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,QAAQ;cAKT,OAAO;WACV,MAAM;YACL,MAAM;iBAWf,CAAC"}

package/jsx/core/Configuration/Configuration.mocks.jsx

@@ -0,0 +1,9 @@
+import { BoldSpan } from './Configuration.styles';
+export const FlipFlop = ({ flipFlop, first, second }) => {
+    return flipFlop ? (<>
+      <BoldSpan>{first}</BoldSpan>&nbsp;→ {second}
+    </>) : (<>
+      {first} ←&nbsp;<BoldSpan>{second}</BoldSpan>
+    </>);
+};
+//# sourceMappingURL=Configuration.mocks.jsx.map

package/jsx/core/Configuration/Configuration.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EAKP,EAAE,EAAE;IACH,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,EACE;MAAA,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAC7C;IAAA,GAAG,CACJ,CAAC,CAAC,CAAC,CACF,EACE;MAAA,CAAC,KAAK,CAAE,QAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,CAC7C;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { BoldSpan } from './Configuration.styles';\n\nexport const FlipFlop = ({\n  flipFlop,\n  first,\n  second\n}: {\n  flipFlop: boolean;\n  first: string;\n  second: string;\n}) => {\n  return flipFlop ? (\n    <>\n      <BoldSpan>{first}</BoldSpan>&nbsp;→ {second}\n    </>\n  ) : (\n    <>\n      {first} ←&nbsp;<BoldSpan>{second}</BoldSpan>\n    </>\n  );\n};\n"]}

package/jsx/core/Configuration/Configuration.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Configuration.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAoB/C,wBAIU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAA;CAAE,CA+B7D,CAAC;AA2CF,eAAO,MAAM,gBAAgB,mBAyE5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAWjC,CAAC;AAEF,UAAU,0BAA0B;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CAsBnE,CAAC;AAUF,UAAU,+BAA+B;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,+BAA+B,CA2B7E,CAAC;AAYF,UAAU,uBAAuB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAU7D,CAAC;AAUF,UAAU,6BAA6B;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,6BAA6B,CAsBzE,CAAC"}
+{"version":3,"file":"Configuration.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAsB/C,wBAIU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAA;CAAE,CA+B7D,CAAC;AAUF,eAAO,MAAM,gBAAgB,mBAyE5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAWjC,CAAC;AAEF,UAAU,0BAA0B;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CAsBnE,CAAC;AAUF,UAAU,+BAA+B;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,+BAA+B,CA2B7E,CAAC;AAYF,UAAU,uBAAuB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAU7D,CAAC;AAUF,UAAU,6BAA6B;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,6BAA6B,CAsBzE,CAAC"}

package/jsx/core/Configuration/Configuration.stories.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
-import styled from 'styled-components';
 import { Button, Configuration, MenuButton, resetToInitial, Flex, Checkbox, RadioButton, DateInput, SearchInput, Text } from '@pega/cosmos-react-core';
 import { FormContent } from '../Form/Form.mocks';
+import { buttonStyles, StyledFieldset } from './Configuration.styles';
+import { FlipFlop } from './Configuration.mocks';
 export default {
     title: 'Core/Configuration',
     component: Configuration,
@@ -40,23 +41,6 @@ ThemedForm.args = {
 ThemedForm.argTypes = {
     theme: { options: ['default', 'theme1'], control: { type: 'select' } }
 };
-const buttonStyles = {
-    width: '100%'
-};
-const StyledFieldset = styled.fieldset `
-  padding: 1rem 5%;
-  margin: 1rem 0;
-`;
-const BoldSpan = styled.span `
-  font-weight: bold;
-`;
-const FlipFlop = ({ flipFlop, first, second }) => {
-    return flipFlop ? (<>
-      <BoldSpan>{first}</BoldSpan>&nbsp;→ {second}
-    </>) : (<>
-      {first} ←&nbsp;<BoldSpan>{second}</BoldSpan>
-    </>);
-};
 export const ThemingHierarchy = () => {
     const [redOrOrange, setRedOrOrange] = useState(true);
     const [greenOrPurple, setGreenOrPurple] = useState(true);