@pega/cosmos-react-demos 3.0.0-dev.5.0 → 3.0.0-dev.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,5 +7,4 @@ interface ConfigurableSearchInputProps {
7
7
  borderRadius?: number;
8
8
  }
9
9
  export declare const ConfigurableSearchInput: Story<ConfigurableSearchInputProps>;
10
- export declare const EnhancedSearchInputDemo: Story;
11
10
  //# sourceMappingURL=SearchInput.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAA8B,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAIvF,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAEnD,CAAC;AAUF,UAAU,4BAA4B;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAgBvE,CAAC;AAUF,eAAO,MAAM,uBAAuB,EAAE,KAsCrC,CAAC"}
1
+ {"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA8B,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAEvF,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAEnD,CAAC;AAUF,UAAU,4BAA4B;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAgBvE,CAAC"}
@@ -1,6 +1,4 @@
1
- import { useRef, useState } from 'react';
2
1
  import { Configuration, SearchInput } from '@pega/cosmos-react-core';
3
- import { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';
4
2
  export default {
5
3
  title: 'Core/SearchInput',
6
4
  component: SearchInput
@@ -31,30 +29,4 @@ ConfigurableSearchInput.args = {
31
29
  ConfigurableSearchInput.argTypes = {
32
30
  borderRadius: { control: { type: 'number' } }
33
31
  };
34
- export const EnhancedSearchInputDemo = () => {
35
- const [value, setValue] = useState('');
36
- const [searchResults, setSearchResults] = useState([]);
37
- const [loading, setLoading] = useState(false);
38
- const timeout = useRef(null);
39
- const onValueChange = (val) => {
40
- setValue(val);
41
- setLoading(true);
42
- setSearchResults([]);
43
- if (timeout.current) {
44
- clearTimeout(timeout.current);
45
- }
46
- timeout.current = window.setTimeout(() => {
47
- if (val) {
48
- setSearchResults(mockSearchResults.filter(res => {
49
- return res.primary.includes(val);
50
- }));
51
- }
52
- setLoading(false);
53
- }, 1000);
54
- };
55
- return (<SearchInput filters={['Story', 'Very long filter']} loading={loading} searchResults={searchResults?.map(result => ({
56
- ...result,
57
- onClick: (id, e) => e.preventDefault()
58
- }))} value={value} onSearchChange={onValueChange} recentSearches={recentSearches} advancedSearchHref='/?path=/story/work-searchresults--search-results-demo'/>);
59
- };
60
32
  //# sourceMappingURL=SearchInput.stories.jsx.map
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.stories.jsx","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Configuration, SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nimport { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';\n\nexport default {\n title: 'Core/SearchInput',\n component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n return <SearchInput {...args} placeholder={args.placeholder} />;\n};\n\nSearchInputDemo.args = {\n placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n placeholder: { control: { type: 'text' } }\n};\n\ninterface ConfigurableSearchInputProps {\n borderRadius?: number;\n}\n\nexport const ConfigurableSearchInput: Story<ConfigurableSearchInputProps> = (\n args: ConfigurableSearchInputProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'search-input': {\n 'border-radius': args.borderRadius\n }\n }\n }}\n >\n <SearchInput />\n </Configuration>\n );\n};\n\nConfigurableSearchInput.args = {\n borderRadius: 9999\n};\n\nConfigurableSearchInput.argTypes = {\n borderRadius: { control: { type: 'number' } }\n};\n\nexport const EnhancedSearchInputDemo: Story = () => {\n const [value, setValue] = useState('');\n const [searchResults, setSearchResults] = useState<SearchInputProps['searchResults']>([]);\n const [loading, setLoading] = useState(false);\n const timeout = useRef<number | null>(null);\n const onValueChange = (val: string) => {\n setValue(val);\n setLoading(true);\n setSearchResults([]);\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = window.setTimeout(() => {\n if (val) {\n setSearchResults(\n mockSearchResults.filter(res => {\n return res.primary.includes(val);\n })\n );\n }\n setLoading(false);\n }, 1000);\n };\n\n return (\n <SearchInput\n filters={['Story', 'Very long filter']}\n loading={loading}\n searchResults={searchResults?.map(result => ({\n ...result,\n onClick: (id, e) => e.preventDefault()\n }))}\n value={value}\n onSearchChange={onValueChange}\n recentSearches={recentSearches}\n advancedSearchHref='/?path=/story/work-searchresults--search-results-demo'\n />\n );\n};\n"]}
1
+ {"version":3,"file":"SearchInput.stories.jsx","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAEvF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,OAAO,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAAG,CAAC;AAClE,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AAMF,MAAM,CAAC,MAAM,uBAAuB,GAAwC,CAC1E,IAAkC,EAClC,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,cAAc,EAAE;oBACd,eAAe,EAAE,IAAI,CAAC,YAAY;iBACnC;aACF;SACF,CAAC,CAEF;MAAA,CAAC,WAAW,CAAC,AAAD,EACd;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/SearchInput',\n component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n return <SearchInput {...args} placeholder={args.placeholder} />;\n};\n\nSearchInputDemo.args = {\n placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n placeholder: { control: { type: 'text' } }\n};\n\ninterface ConfigurableSearchInputProps {\n borderRadius?: number;\n}\n\nexport const ConfigurableSearchInput: Story<ConfigurableSearchInputProps> = (\n args: ConfigurableSearchInputProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'search-input': {\n 'border-radius': args.borderRadius\n }\n }\n }}\n >\n <SearchInput />\n </Configuration>\n );\n};\n\nConfigurableSearchInput.args = {\n borderRadius: 9999\n};\n\nConfigurableSearchInput.argTypes = {\n borderRadius: { control: { type: 'number' } }\n};\n"]}
@@ -7,5 +7,4 @@ interface ConfigurableSearchInputProps {
7
7
  borderRadius?: number;
8
8
  }
9
9
  export declare const ConfigurableSearchInput: Story<ConfigurableSearchInputProps>;
10
- export declare const EnhancedSearchInputDemo: Story;
11
10
  //# sourceMappingURL=SearchInput.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAA8B,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAIvF,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAEnD,CAAC;AAUF,UAAU,4BAA4B;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAgBvE,CAAC;AAUF,eAAO,MAAM,uBAAuB,EAAE,KAsCrC,CAAC"}
1
+ {"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA8B,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAEvF,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAEnD,CAAC;AAUF,UAAU,4BAA4B;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAgBvE,CAAC"}
@@ -1,7 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useRef, useState } from 'react';
3
2
  import { Configuration, SearchInput } from '@pega/cosmos-react-core';
4
- import { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';
5
3
  export default {
6
4
  title: 'Core/SearchInput',
7
5
  component: SearchInput
@@ -30,30 +28,4 @@ ConfigurableSearchInput.args = {
30
28
  ConfigurableSearchInput.argTypes = {
31
29
  borderRadius: { control: { type: 'number' } }
32
30
  };
33
- export const EnhancedSearchInputDemo = () => {
34
- const [value, setValue] = useState('');
35
- const [searchResults, setSearchResults] = useState([]);
36
- const [loading, setLoading] = useState(false);
37
- const timeout = useRef(null);
38
- const onValueChange = (val) => {
39
- setValue(val);
40
- setLoading(true);
41
- setSearchResults([]);
42
- if (timeout.current) {
43
- clearTimeout(timeout.current);
44
- }
45
- timeout.current = window.setTimeout(() => {
46
- if (val) {
47
- setSearchResults(mockSearchResults.filter(res => {
48
- return res.primary.includes(val);
49
- }));
50
- }
51
- setLoading(false);
52
- }, 1000);
53
- };
54
- return (_jsx(SearchInput, { filters: ['Story', 'Very long filter'], loading: loading, searchResults: searchResults?.map(result => ({
55
- ...result,
56
- onClick: (id, e) => e.preventDefault()
57
- })), value: value, onSearchChange: onValueChange, recentSearches: recentSearches, advancedSearchHref: '/?path=/story/work-searchresults--search-results-demo' }));
58
- };
59
31
  //# sourceMappingURL=SearchInput.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Configuration, SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nimport { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';\n\nexport default {\n title: 'Core/SearchInput',\n component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n return <SearchInput {...args} placeholder={args.placeholder} />;\n};\n\nSearchInputDemo.args = {\n placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n placeholder: { control: { type: 'text' } }\n};\n\ninterface ConfigurableSearchInputProps {\n borderRadius?: number;\n}\n\nexport const ConfigurableSearchInput: Story<ConfigurableSearchInputProps> = (\n args: ConfigurableSearchInputProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'search-input': {\n 'border-radius': args.borderRadius\n }\n }\n }}\n >\n <SearchInput />\n </Configuration>\n );\n};\n\nConfigurableSearchInput.args = {\n borderRadius: 9999\n};\n\nConfigurableSearchInput.argTypes = {\n borderRadius: { control: { type: 'number' } }\n};\n\nexport const EnhancedSearchInputDemo: Story = () => {\n const [value, setValue] = useState('');\n const [searchResults, setSearchResults] = useState<SearchInputProps['searchResults']>([]);\n const [loading, setLoading] = useState(false);\n const timeout = useRef<number | null>(null);\n const onValueChange = (val: string) => {\n setValue(val);\n setLoading(true);\n setSearchResults([]);\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = window.setTimeout(() => {\n if (val) {\n setSearchResults(\n mockSearchResults.filter(res => {\n return res.primary.includes(val);\n })\n );\n }\n setLoading(false);\n }, 1000);\n };\n\n return (\n <SearchInput\n filters={['Story', 'Very long filter']}\n loading={loading}\n searchResults={searchResults?.map(result => ({\n ...result,\n onClick: (id, e) => e.preventDefault()\n }))}\n value={value}\n onSearchChange={onValueChange}\n recentSearches={recentSearches}\n advancedSearchHref='/?path=/story/work-searchresults--search-results-demo'\n />\n );\n};\n"]}
1
+ {"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAEvF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,OAAO,KAAC,WAAW,OAAK,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,GAAI,CAAC;AAClE,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AAMF,MAAM,CAAC,MAAM,uBAAuB,GAAwC,CAC1E,IAAkC,EAClC,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,cAAc,EAAE;oBACd,eAAe,EAAE,IAAI,CAAC,YAAY;iBACnC;aACF;SACF,YAED,KAAC,WAAW,KAAG,GACD,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/SearchInput',\n component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n return <SearchInput {...args} placeholder={args.placeholder} />;\n};\n\nSearchInputDemo.args = {\n placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n placeholder: { control: { type: 'text' } }\n};\n\ninterface ConfigurableSearchInputProps {\n borderRadius?: number;\n}\n\nexport const ConfigurableSearchInput: Story<ConfigurableSearchInputProps> = (\n args: ConfigurableSearchInputProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'search-input': {\n 'border-radius': args.borderRadius\n }\n }\n }}\n >\n <SearchInput />\n </Configuration>\n );\n};\n\nConfigurableSearchInput.args = {\n borderRadius: 9999\n};\n\nConfigurableSearchInput.argTypes = {\n borderRadius: { control: { type: 'number' } }\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-demos",
3
- "version": "3.0.0-dev.5.0",
3
+ "version": "3.0.0-dev.6.0",
4
4
  "author": "Pegasystems",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -20,14 +20,14 @@
20
20
  "build": "tsc -b"
21
21
  },
22
22
  "dependencies": {
23
- "@pega/cosmos-react-build": "3.0.0-dev.5.0",
24
- "@pega/cosmos-react-condition-builder": "3.0.0-dev.5.0",
25
- "@pega/cosmos-react-core": "3.0.0-dev.5.0",
26
- "@pega/cosmos-react-cs": "3.0.0-dev.5.0",
27
- "@pega/cosmos-react-dnd": "3.0.0-dev.5.0",
28
- "@pega/cosmos-react-rte": "3.0.0-dev.5.0",
29
- "@pega/cosmos-react-social": "3.0.0-dev.5.0",
30
- "@pega/cosmos-react-work": "3.0.0-dev.5.0",
23
+ "@pega/cosmos-react-build": "3.0.0-dev.6.0",
24
+ "@pega/cosmos-react-condition-builder": "3.0.0-dev.6.0",
25
+ "@pega/cosmos-react-core": "3.0.0-dev.6.0",
26
+ "@pega/cosmos-react-cs": "3.0.0-dev.6.0",
27
+ "@pega/cosmos-react-dnd": "3.0.0-dev.6.0",
28
+ "@pega/cosmos-react-rte": "3.0.0-dev.6.0",
29
+ "@pega/cosmos-react-social": "3.0.0-dev.6.0",
30
+ "@pega/cosmos-react-work": "3.0.0-dev.6.0",
31
31
  "emoji-mart": "^3.0.1",
32
32
  "polished": "^4.1.0",
33
33
  "react": "^16.14.0 || ^17.0.0",
@@ -1,11 +0,0 @@
1
- export declare const searchResults: {
2
- primary: string;
3
- href: string;
4
- secondary: string[];
5
- id: string;
6
- }[];
7
- export declare const recentSearches: {
8
- primary: string;
9
- href: string;
10
- }[];
11
- //# sourceMappingURL=SearchInput.mocks.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SearchInput.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;GAmBzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;GAG1B,CAAC"}
@@ -1,25 +0,0 @@
1
- export const searchResults = [
2
- {
3
- primary: 'Usability fixes',
4
- href: '/BUG-90001',
5
- secondary: ['BUG-90001', 'Updated on Thursday'],
6
- id: 'BUG-90001'
7
- },
8
- {
9
- primary: 'RTE Enhancements',
10
- href: '/STORY-92120',
11
- secondary: ['STORY-92120', 'Updated on Monday'],
12
- id: 'STORY-92120'
13
- },
14
- {
15
- primary: 'Cosmos Svelte Components',
16
- href: '/EPIC-84623',
17
- secondary: ['EPIC-84623', 'Updated on Tuesday'],
18
- id: 'EPIC-84623'
19
- }
20
- ];
21
- export const recentSearches = [
22
- { primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },
23
- { primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }
24
- ];
25
- //# sourceMappingURL=SearchInput.mocks.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SearchInput.mocks.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B;QACE,OAAO,EAAE,iBAAiB;QAC1B,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,CAAC,WAAW,EAAE,qBAAqB,CAAC;QAC/C,EAAE,EAAE,WAAW;KAChB;IACD;QACE,OAAO,EAAE,kBAAkB;QAC3B,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,CAAC,aAAa,EAAE,mBAAmB,CAAC;QAC/C,EAAE,EAAE,aAAa;KAClB;IACD;QACE,OAAO,EAAE,0BAA0B;QACnC,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,CAAC,YAAY,EAAE,oBAAoB,CAAC;QAC/C,EAAE,EAAE,YAAY;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,wCAAwC,EAAE;IAC/E,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,8BAA8B,EAAE;CACpE,CAAC","sourcesContent":["export const searchResults = [\n {\n primary: 'Usability fixes',\n href: '/BUG-90001',\n secondary: ['BUG-90001', 'Updated on Thursday'],\n id: 'BUG-90001'\n },\n {\n primary: 'RTE Enhancements',\n href: '/STORY-92120',\n secondary: ['STORY-92120', 'Updated on Monday'],\n id: 'STORY-92120'\n },\n {\n primary: 'Cosmos Svelte Components',\n href: '/EPIC-84623',\n secondary: ['EPIC-84623', 'Updated on Tuesday'],\n id: 'EPIC-84623'\n }\n];\n\nexport const recentSearches = [\n { primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },\n { primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }\n];\n"]}
@@ -1,11 +0,0 @@
1
- export declare const searchResults: {
2
- primary: string;
3
- href: string;
4
- secondary: string[];
5
- id: string;
6
- }[];
7
- export declare const recentSearches: {
8
- primary: string;
9
- href: string;
10
- }[];
11
- //# sourceMappingURL=SearchInput.mocks.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SearchInput.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;GAmBzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;GAG1B,CAAC"}
@@ -1,25 +0,0 @@
1
- export const searchResults = [
2
- {
3
- primary: 'Usability fixes',
4
- href: '/BUG-90001',
5
- secondary: ['BUG-90001', 'Updated on Thursday'],
6
- id: 'BUG-90001'
7
- },
8
- {
9
- primary: 'RTE Enhancements',
10
- href: '/STORY-92120',
11
- secondary: ['STORY-92120', 'Updated on Monday'],
12
- id: 'STORY-92120'
13
- },
14
- {
15
- primary: 'Cosmos Svelte Components',
16
- href: '/EPIC-84623',
17
- secondary: ['EPIC-84623', 'Updated on Tuesday'],
18
- id: 'EPIC-84623'
19
- }
20
- ];
21
- export const recentSearches = [
22
- { primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },
23
- { primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }
24
- ];
25
- //# sourceMappingURL=SearchInput.mocks.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SearchInput.mocks.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B;QACE,OAAO,EAAE,iBAAiB;QAC1B,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,CAAC,WAAW,EAAE,qBAAqB,CAAC;QAC/C,EAAE,EAAE,WAAW;KAChB;IACD;QACE,OAAO,EAAE,kBAAkB;QAC3B,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,CAAC,aAAa,EAAE,mBAAmB,CAAC;QAC/C,EAAE,EAAE,aAAa;KAClB;IACD;QACE,OAAO,EAAE,0BAA0B;QACnC,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,CAAC,YAAY,EAAE,oBAAoB,CAAC;QAC/C,EAAE,EAAE,YAAY;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,wCAAwC,EAAE;IAC/E,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,8BAA8B,EAAE;CACpE,CAAC","sourcesContent":["export const searchResults = [\n {\n primary: 'Usability fixes',\n href: '/BUG-90001',\n secondary: ['BUG-90001', 'Updated on Thursday'],\n id: 'BUG-90001'\n },\n {\n primary: 'RTE Enhancements',\n href: '/STORY-92120',\n secondary: ['STORY-92120', 'Updated on Monday'],\n id: 'STORY-92120'\n },\n {\n primary: 'Cosmos Svelte Components',\n href: '/EPIC-84623',\n secondary: ['EPIC-84623', 'Updated on Tuesday'],\n id: 'EPIC-84623'\n }\n];\n\nexport const recentSearches = [\n { primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },\n { primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }\n];\n"]}