@telia-ace/knowledge-widget-components-tag-list 1.0.20 → 1.0.21
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.
- package/LICENSE.txt +5 -5
- package/README.md +3 -3
- package/dist/index.d.ts +2 -2
- package/dist/index.js.map +1 -1
- package/dist/tag-list-component.d.ts +16 -16
- package/dist/tag-list.316a76ef.js.map +1 -1
- package/dist/tag-list.d.ts +6 -6
- package/package.json +4 -4
package/LICENSE.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
Copyright © 2021, Telia Company AB. All rights reserved.
|
|
2
|
-
|
|
3
|
-
THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
|
|
4
|
-
THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
|
|
5
|
-
AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
|
|
1
|
+
Copyright © 2021, Telia Company AB. All rights reserved.
|
|
2
|
+
|
|
3
|
+
THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
|
|
4
|
+
THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
|
|
5
|
+
AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
|
|
6
6
|
http://www.humany.com/legal
|
package/README.md
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
# `@telia-ace/knowledge-widget-components-tag-list`
|
|
2
|
-
|
|
3
|
-
Tag list component for ACE Knowledge Widgets.
|
|
1
|
+
# `@telia-ace/knowledge-widget-components-tag-list`
|
|
2
|
+
|
|
3
|
+
Tag list component for ACE Knowledge Widgets.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import TagListComponent from './tag-list-component';
|
|
2
|
-
export default TagListComponent;
|
|
1
|
+
import TagListComponent from './tag-list-component';
|
|
2
|
+
export default TagListComponent;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/tag-list-component.ts"],"sourcesContent":["import { createEventSubscriber, extendComponent, Tag } from '@telia-ace/knowledge-widget-core';\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/tag-list-component.ts"],"sourcesContent":["import { createEventSubscriber, extendComponent, Tag } from '@telia-ace/knowledge-widget-core';\nimport { DataClient, DataType, TagsResult } from '@telia-ace/knowledge-widget-types-grid';\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\nimport { Params } from '@telia-ace/widget-utilities';\nimport { Container } from '@webprovisions/platform';\n\nexport type TagListComponentProps = {\n header: string;\n route?: string;\n items: Tag[]; // internal\n style?: 'badge' | 'pill';\n showMatchCount?: boolean;\n showIcons?: boolean;\n static?: boolean;\n rootTagLabel?: string;\n fallbackOnInitialRoute?: boolean;\n itemAriaLabel?: string;\n};\n\nconst TagListComponent = (container: Container) => {\n return createReactComponent(container, 'tag-list', import('./tag-list'), (component) => {\n const { events } = container.get('$widget');\n const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n component.actions.create('fetch', ({ items = [] }) => {\n return component.actions.dispatch('fetched', {\n items,\n loading: true,\n });\n });\n\n component.actions.create('fetched', (input) => {\n return component.writeProperties({ ...input, loading: false });\n });\n\n const fetch = (input: Params = {}) => {\n component.writeProperties({ loading: true, error: undefined });\n\n component.actions.dispatch('fetch', input);\n };\n\n container.getAsync('router').then((router) => {\n const { params } = router.getRouteData();\n fetch(params);\n });\n\n subscribe('router:changed', (event: any, { current }: any) => {\n fetch(current.routeData.params);\n });\n\n return () => {\n unsubscribe();\n };\n }).then(() => {\n return extendComponent(container, 'tag-list', (component) => {\n component.actions.watch('tag-list.fetch', (input, next) => {\n return container.getAsync('dataClient').then((dataClient: DataClient) => {\n const { static: staticTags = false, rootTagLabel = '' } =\n component.properties() as TagListComponentProps;\n\n const { phrase, guideCategory, tag } = input;\n\n return dataClient\n .fetch(staticTags ? DataType.Tags : DataType.TagsOnGuides, {\n searchPhrase: phrase,\n categories: guideCategory,\n tagId: tag,\n })\n .then((tags: TagsResult = []) => {\n if (staticTags) {\n const indexOfRoot = tags.findIndex((tag) => tag.id === '0');\n\n if (indexOfRoot > -1) {\n tags.unshift(tags.splice(indexOfRoot, 1)[0]);\n }\n }\n\n return next({\n items: tags.map((t) => {\n if (t.id === '0') {\n t.title = rootTagLabel;\n }\n\n return t;\n }),\n });\n })\n .catch((e) => {\n return next({ items: [] });\n });\n });\n });\n });\n });\n};\n\nexport default TagListComponent;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBM,MAAA,IAAmB,CAAC,MACf,EAAqB,GAAW,YAAY,OAAO,2BAAe,CAAC,MAAc;AACpF,QAAM,EAAE,cAAW,EAAU,IAAI,SAAS,GACpC,CAAC,GAAW,KAAe,EAAsB,CAAM;AAE7D,IAAU,QAAQ,OAAO,SAAS,CAAC,EAAE,WAAQ,CAAA,QAClC,EAAU,QAAQ,SAAS,WAAW;AAAA,IACzC;AAAA,IACA,SAAS;AAAA,EAAA,CACZ,CACJ,GAED,EAAU,QAAQ,OAAO,WAAW,CAAC,MAC1B,EAAU,gBAAgB,QAAK,IAAL,EAAY,SAAS,KAAO,CAChE;AAED,QAAM,IAAQ,CAAC,IAAgB,OAAO;AAClC,MAAU,gBAAgB,EAAE,SAAS,IAAM,OAAO,QAAW,GAEnD,EAAA,QAAQ,SAAS,SAAS,CAAK;AAAA,EAAA;AAG7C,WAAU,SAAS,QAAQ,EAAE,KAAK,CAAC,MAAW;AACpC,UAAA,EAAE,cAAW,EAAO,aAAa;AACvC,MAAM,CAAM;AAAA,EAAA,CACf,GAED,EAAU,kBAAkB,CAAC,GAAY,EAAE,iBAAmB;AACpD,MAAA,EAAQ,UAAU,MAAM;AAAA,EAAA,CACjC,GAEM,MAAM;AACG;EAAA;AAChB,CACH,EAAE,KAAK,MACG,EAAgB,GAAW,YAAY,CAAC,MAAc;AACzD,IAAU,QAAQ,MAAM,kBAAkB,CAAC,GAAO,MACvC,EAAU,SAAS,YAAY,EAAE,KAAK,CAAC,MAA2B;AACrE,UAAM,EAAE,QAAQ,IAAa,IAAO,kBAAe,OAC/C,EAAU,cAER,EAAE,WAAQ,kBAAe,WAAQ;AAEvC,WAAO,EACF,MAAM,IAAa,EAAS,OAAO,EAAS,cAAc;AAAA,MACvD,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,OAAO;AAAA,IACV,CAAA,EACA,KAAK,CAAC,IAAmB,OAAO;AAC7B,UAAI,GAAY;AACZ,cAAM,IAAc,EAAK,UAAU,CAAC,MAAQ,EAAI,OAAO,GAAG;AAE1D,QAAI,IAAc,MACd,EAAK,QAAQ,EAAK,OAAO,GAAa,CAAC,EAAE,EAAE;AAAA,MAEnD;AAEA,aAAO,EAAK;AAAA,QACR,OAAO,EAAK,IAAI,CAAC,MACT,GAAE,OAAO,OACT,GAAE,QAAQ,IAGP,EACV;AAAA,MAAA,CACJ;AAAA,IAAA,CACJ,EACA,MAAM,CAAC,MACG,EAAK,EAAE,OAAO,CAAA,EAAI,CAAA,CAC5B;AAAA,EAAA,CACR,CACJ;AAAA,CACJ,CACJ;"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { Tag } from '@telia-ace/knowledge-widget-core';
|
|
2
|
-
import { Container } from '@webprovisions/platform';
|
|
3
|
-
export declare type TagListComponentProps = {
|
|
4
|
-
header: string;
|
|
5
|
-
route?: string;
|
|
6
|
-
items: Tag[];
|
|
7
|
-
style?: 'badge' | 'pill';
|
|
8
|
-
showMatchCount?: boolean;
|
|
9
|
-
showIcons?: boolean;
|
|
10
|
-
static?: boolean;
|
|
11
|
-
rootTagLabel?: string;
|
|
12
|
-
fallbackOnInitialRoute?: boolean;
|
|
13
|
-
itemAriaLabel?: string;
|
|
14
|
-
};
|
|
15
|
-
declare const TagListComponent: (container: Container) => Promise<void>;
|
|
16
|
-
export default TagListComponent;
|
|
1
|
+
import { Tag } from '@telia-ace/knowledge-widget-core';
|
|
2
|
+
import { Container } from '@webprovisions/platform';
|
|
3
|
+
export declare type TagListComponentProps = {
|
|
4
|
+
header: string;
|
|
5
|
+
route?: string;
|
|
6
|
+
items: Tag[];
|
|
7
|
+
style?: 'badge' | 'pill';
|
|
8
|
+
showMatchCount?: boolean;
|
|
9
|
+
showIcons?: boolean;
|
|
10
|
+
static?: boolean;
|
|
11
|
+
rootTagLabel?: string;
|
|
12
|
+
fallbackOnInitialRoute?: boolean;
|
|
13
|
+
itemAriaLabel?: string;
|
|
14
|
+
};
|
|
15
|
+
declare const TagListComponent: (container: Container) => Promise<void>;
|
|
16
|
+
export default TagListComponent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag-list.316a76ef.js","sources":["../src/tag-list.tsx"],"sourcesContent":["import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\r\nimport { Symbol, Tag } from '@telia-ace/knowledge-widget-core';\r\nimport {\r\n borderTabStyle,\r\n contentBox,\r\n createEmptyComponent,\r\n ItemList,\r\n itemList,\r\n Loader,\r\n loadingOpacity,\r\n SymbolBadge,\r\n Text,\r\n TextLink,\r\n useContainer,\r\n useProperties,\r\n useRouteData,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { TagListComponentProps } from './tag-list-component';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst getIcon = (selected: boolean, defaultIcon?: Symbol, activeIcon?: Symbol) => {\r\n if (selected && activeIcon) {\r\n return <StyledSymbolBadge symbol={activeIcon} size={18} />;\r\n }\r\n if (defaultIcon) {\r\n return <StyledSymbolBadge symbol={defaultIcon} size={18} />;\r\n }\r\n return null;\r\n};\r\n\r\nconst TagList: React.SFC<Props> = ({ className, ...other }) => {\r\n const {\r\n route = 'search',\r\n items = [],\r\n header,\r\n loading = false,\r\n style = 'badge',\r\n showMatchCount = false,\r\n showIcons = false,\r\n static: staticTags = false,\r\n fallbackOnInitialRoute = false,\r\n itemAriaLabel,\r\n } = useProperties<TagListComponentProps>();\r\n const container = useContainer();\r\n const { params } = useRouteData();\r\n\r\n if (!items.length && (!loading || staticTags)) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-tag-list'),\r\n });\r\n }\r\n\r\n const Component = style === 'badge' ? StyledBadge : StyledPill;\r\n\r\n return (\r\n <StyledItemList\r\n {...other}\r\n data-loading={!staticTags && loading}\r\n className={appendClassNames(className, 'humany-tag-list')}\r\n header={!staticTags && loading ? '' : header}\r\n items={items}\r\n type={style}\r\n renderItem={(item: Tag) => {\r\n const { id, title, defaultIcon, activeIcon, matches } = item;\r\n const selected = params.tag === item.id || (!params.tag && item.id === '0');\r\n\r\n const ariaLabel =\r\n itemAriaLabel &&\r\n itemAriaLabel.replace('{{title}}', title).replace('{{matches}}', `${matches}`);\r\n\r\n return (\r\n <StyledLi\r\n key={id}\r\n notAllowed={(staticTags && !matches && style === 'pill').toString()}\r\n data-tag={id}\r\n >\r\n <Component\r\n {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'tag')}\r\n role=\"button\"\r\n aria-pressed={selected}\r\n aria-label={ariaLabel}\r\n disabled={staticTags && !matches}\r\n selected={selected}\r\n text={title}\r\n >\r\n {showIcons && getIcon(selected, defaultIcon, activeIcon)}\r\n {showMatchCount && (\r\n <StyledMatchCount>{`(${matches})`}</StyledMatchCount>\r\n )}\r\n </Component>\r\n </StyledLi>\r\n );\r\n }}\r\n >\r\n {!staticTags && <Loader loading={loading} />}\r\n </StyledItemList>\r\n );\r\n};\r\n\r\nexport default TagList;\r\n\r\nconst StyledItemList = styled(ItemList)<{ 'data-loading': boolean } & any>`\r\n ${contentBox}\r\n ${itemList}\r\n ${loadingOpacity}\r\n justify-content: flex-start;\r\n padding: ${(p) => p.theme.sizes?.large};\r\n ul {\r\n display: flex;\r\n flex-wrap: wrap;\r\n ${(p) =>\r\n p.type === 'pill' &&\r\n css`\r\n justify-content: center;\r\n `}\r\n\r\n li {\r\n margin: 0 ${(p) => `${p.theme.sizes?.small} ${p.theme.sizes?.small}`} 0;\r\n }\r\n }\r\n`;\r\n\r\nconst StyledBadge = styled(TextLink)<any>`\r\n padding: 8px 15px;\r\n background-color: ${(p) => (p.selected ? p.theme.colors?.text : p.theme.colors?.primary)};\r\n border-radius: ${(p) => p.theme.borderRadius};\r\n font-weight: 300;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n display: flex;\r\n align-items: center;\r\n color: #ffffff;\r\n\r\n &:focus {\r\n ${(p) =>\r\n p.theme.accessibility?.isTabbing &&\r\n css`\r\n ${borderTabStyle}\r\n padding: 6px 15px;\r\n background-color: transparent;\r\n `};\r\n }\r\n\r\n @media (hover: hover) {\r\n &:hover {\r\n background-color: ${(p) =>\r\n p.selected ? p.theme.colors?.primary : p.theme.colors?.text};\r\n }\r\n }\r\n`;\r\n\r\nconst StyledPill = styled(TextLink)<any>`\r\n border: 1px solid ${(p) => (p.selected ? p.theme.colors?.text : 'transparent')};\r\n line-height: 2em;\r\n border-radius: 1em;\r\n padding: 0 0.5em;\r\n display: flex;\r\n align-items: center;\r\n font-weight: ${(p) => (p.selected ? 'normal' : 300)};\r\n color: ${(p) => p.theme.colors?.text};\r\n\r\n &:disabled {\r\n color: ${(p) => p.theme.colors?.textLight};\r\n }\r\n\r\n &:focus {\r\n ${(p) =>\r\n p.theme.accessibility?.isTabbing &&\r\n css`\r\n ${borderTabStyle}\r\n border-radius: 1em;\r\n `}\r\n }\r\n\r\n @media (hover: hover) {\r\n &:hover {\r\n border: 1px solid ${(p) => p.theme.colors?.text};\r\n }\r\n }\r\n\r\n ${(p) =>\r\n p.disabled &&\r\n css`\r\n opacity: 0.5;\r\n `}\r\n`;\r\n\r\nconst StyledMatchCount = styled(Text)<any>`\r\n order: 2;\r\n margin-left: ${(p) => p.theme.sizes.small};\r\n`;\r\n\r\nconst StyledSymbolBadge = styled(SymbolBadge)<{ size: number; symbol: Symbol }>`\r\n margin-right: ${(p) => p.theme.sizes?.small};\r\n ${(p: any) => {\r\n if (p.symbol.type === 'Uri') {\r\n return `\r\n width: ${p.size}px;\r\n height: ${p.size}px;\r\n `;\r\n }\r\n\r\n if (p.symbol.type === 'FontAwesome') {\r\n return `\r\n font-size: ${p.size}px;\r\n `;\r\n }\r\n }}\r\n`;\r\n\r\nconst StyledLi = styled.li<{ notAllowed: string }>`\r\n ${(p) =>\r\n p.notAllowed === 'true' &&\r\n css`\r\n cursor: not-allowed;\r\n `}\r\n`;\r\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tag-list.316a76ef.js","sources":["../src/tag-list.tsx"],"sourcesContent":["import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\nimport { Symbol, Tag } from '@telia-ace/knowledge-widget-core';\nimport {\n borderTabStyle,\n contentBox,\n createEmptyComponent,\n ItemList,\n itemList,\n Loader,\n loadingOpacity,\n SymbolBadge,\n Text,\n TextLink,\n useContainer,\n useProperties,\n useRouteData,\n} from '@telia-ace/knowledge-widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React from 'react';\nimport styled, { css } from 'styled-components';\nimport { TagListComponentProps } from './tag-list-component';\n\ntype Props = {\n className: string;\n};\n\nconst getIcon = (selected: boolean, defaultIcon?: Symbol, activeIcon?: Symbol) => {\n if (selected && activeIcon) {\n return <StyledSymbolBadge symbol={activeIcon} size={18} />;\n }\n if (defaultIcon) {\n return <StyledSymbolBadge symbol={defaultIcon} size={18} />;\n }\n return null;\n};\n\nconst TagList: React.SFC<Props> = ({ className, ...other }) => {\n const {\n route = 'search',\n items = [],\n header,\n loading = false,\n style = 'badge',\n showMatchCount = false,\n showIcons = false,\n static: staticTags = false,\n fallbackOnInitialRoute = false,\n itemAriaLabel,\n } = useProperties<TagListComponentProps>();\n const container = useContainer();\n const { params } = useRouteData();\n\n if (!items.length && (!loading || staticTags)) {\n return createEmptyComponent(container, {\n ...other,\n className: appendClassNames(className, 'humany-tag-list'),\n });\n }\n\n const Component = style === 'badge' ? StyledBadge : StyledPill;\n\n return (\n <StyledItemList\n {...other}\n data-loading={!staticTags && loading}\n className={appendClassNames(className, 'humany-tag-list')}\n header={!staticTags && loading ? '' : header}\n items={items}\n type={style}\n renderItem={(item: Tag) => {\n const { id, title, defaultIcon, activeIcon, matches } = item;\n const selected = params.tag === item.id || (!params.tag && item.id === '0');\n\n const ariaLabel =\n itemAriaLabel &&\n itemAriaLabel.replace('{{title}}', title).replace('{{matches}}', `${matches}`);\n\n return (\n <StyledLi\n key={id}\n notAllowed={(staticTags && !matches && style === 'pill').toString()}\n data-tag={id}\n >\n <Component\n {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'tag')}\n role=\"button\"\n aria-pressed={selected}\n aria-label={ariaLabel}\n disabled={staticTags && !matches}\n selected={selected}\n text={title}\n >\n {showIcons && getIcon(selected, defaultIcon, activeIcon)}\n {showMatchCount && (\n <StyledMatchCount>{`(${matches})`}</StyledMatchCount>\n )}\n </Component>\n </StyledLi>\n );\n }}\n >\n {!staticTags && <Loader loading={loading} />}\n </StyledItemList>\n );\n};\n\nexport default TagList;\n\nconst StyledItemList = styled(ItemList)<{ 'data-loading': boolean } & any>`\n ${contentBox}\n ${itemList}\n ${loadingOpacity}\n justify-content: flex-start;\n padding: ${(p) => p.theme.sizes?.large};\n ul {\n display: flex;\n flex-wrap: wrap;\n ${(p) =>\n p.type === 'pill' &&\n css`\n justify-content: center;\n `}\n\n li {\n margin: 0 ${(p) => `${p.theme.sizes?.small} ${p.theme.sizes?.small}`} 0;\n }\n }\n`;\n\nconst StyledBadge = styled(TextLink)<any>`\n padding: 8px 15px;\n background-color: ${(p) => (p.selected ? p.theme.colors?.text : p.theme.colors?.primary)};\n border-radius: ${(p) => p.theme.borderRadius};\n font-weight: 300;\n font-size: ${(p) => p.theme.fonts?.normal};\n display: flex;\n align-items: center;\n color: #ffffff;\n\n &:focus {\n ${(p) =>\n p.theme.accessibility?.isTabbing &&\n css`\n ${borderTabStyle}\n padding: 6px 15px;\n background-color: transparent;\n `};\n }\n\n @media (hover: hover) {\n &:hover {\n background-color: ${(p) =>\n p.selected ? p.theme.colors?.primary : p.theme.colors?.text};\n }\n }\n`;\n\nconst StyledPill = styled(TextLink)<any>`\n border: 1px solid ${(p) => (p.selected ? p.theme.colors?.text : 'transparent')};\n line-height: 2em;\n border-radius: 1em;\n padding: 0 0.5em;\n display: flex;\n align-items: center;\n font-weight: ${(p) => (p.selected ? 'normal' : 300)};\n color: ${(p) => p.theme.colors?.text};\n\n &:disabled {\n color: ${(p) => p.theme.colors?.textLight};\n }\n\n &:focus {\n ${(p) =>\n p.theme.accessibility?.isTabbing &&\n css`\n ${borderTabStyle}\n border-radius: 1em;\n `}\n }\n\n @media (hover: hover) {\n &:hover {\n border: 1px solid ${(p) => p.theme.colors?.text};\n }\n }\n\n ${(p) =>\n p.disabled &&\n css`\n opacity: 0.5;\n `}\n`;\n\nconst StyledMatchCount = styled(Text)<any>`\n order: 2;\n margin-left: ${(p) => p.theme.sizes.small};\n`;\n\nconst StyledSymbolBadge = styled(SymbolBadge)<{ size: number; symbol: Symbol }>`\n margin-right: ${(p) => p.theme.sizes?.small};\n ${(p: any) => {\n if (p.symbol.type === 'Uri') {\n return `\n width: ${p.size}px;\n height: ${p.size}px;\n `;\n }\n\n if (p.symbol.type === 'FontAwesome') {\n return `\n font-size: ${p.size}px;\n `;\n }\n }}\n`;\n\nconst StyledLi = styled.li<{ notAllowed: string }>`\n ${(p) =>\n p.notAllowed === 'true' &&\n css`\n cursor: not-allowed;\n `}\n`;\n"],"names":[],"mappings":"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"}
|
package/dist/tag-list.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
declare type Props = {
|
|
3
|
-
className: string;
|
|
4
|
-
};
|
|
5
|
-
declare const TagList: React.SFC<Props>;
|
|
6
|
-
export default TagList;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type Props = {
|
|
3
|
+
className: string;
|
|
4
|
+
};
|
|
5
|
+
declare const TagList: React.SFC<Props>;
|
|
6
|
+
export default TagList;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/knowledge-widget-components-tag-list",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.21",
|
|
4
4
|
"description": "Tag list component for ACE Knowledge Widgets.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
@@ -25,9 +25,9 @@
|
|
|
25
25
|
},
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@telia-ace/knowledge-widget-component-utilities": "^1.0.
|
|
28
|
+
"@telia-ace/knowledge-widget-component-utilities": "^1.0.21",
|
|
29
29
|
"@telia-ace/knowledge-widget-core": "^1.0.17",
|
|
30
|
-
"@telia-ace/knowledge-widget-types-grid": "^1.0.
|
|
30
|
+
"@telia-ace/knowledge-widget-types-grid": "^1.0.28",
|
|
31
31
|
"@telia-ace/knowledge-widget-ui": "^1.0.23",
|
|
32
32
|
"@telia-ace/widget-utilities": "^1.0.2",
|
|
33
33
|
"@webprovisions/platform": "^1.1.2"
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"@types/react-dom": "^16.8.0",
|
|
43
43
|
"@types/styled-components": "^5.1.7"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "038c3d0914f7298d2bb74a80c7a679c7450633f9"
|
|
46
46
|
}
|