@spectrum-web-components/icons-ui 0.7.0 → 0.8.1
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/README.md +72 -11
- package/package.json +6 -6
- package/src/custom-tag.d.ts +1 -1
- package/src/custom-tag.js +0 -2
- package/src/custom-tag.js.map +1 -1
- package/src/icons/Arrow75.js +1 -1
- package/src/icons/Arrow75.js.map +1 -1
- package/src/icons/Checkmark300.js +1 -1
- package/src/icons/Checkmark300.js.map +1 -1
- package/src/icons/Chevron400.js +1 -1
- package/src/icons/Chevron400.js.map +1 -1
- package/src/icons/Cross200.js +1 -1
- package/src/icons/Cross200.js.map +1 -1
- package/stories/icons-ui.stories.js +2 -1
- package/stories/icons-ui.stories.js.map +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
## Description
|
|
2
2
|
|
|
3
|
-
[Spectrum UI Icons](https://spectrum.adobe.com/page/icons/)
|
|
3
|
+
Deliver [Spectrum UI Icons](https://spectrum.adobe.com/page/icons/) as either:
|
|
4
|
+
|
|
5
|
+
- Registered custom elements (`<sp-icon-arrow75>`)
|
|
6
|
+
- Unregistered class definitions (`IconArrow75`)
|
|
7
|
+
- Functions with customizable template tags to be used across various frameworks (`Arrow75Icon()`)
|
|
8
|
+
|
|
9
|
+
Search a full list of icons to [find an icon](#find-an-icon) for your project or find technical information about [extended use cases](#extended-use-cases), like consuming this package in various UI frameworks below.
|
|
10
|
+
|
|
11
|
+
Remember to consult Spectrum's [Iconography Guidelines](https://spectrum.adobe.com/page/iconography/) when planning how to leverage these icons in the visual delivery of your application.
|
|
4
12
|
|
|
5
13
|
### Usage
|
|
6
14
|
|
|
@@ -11,18 +19,69 @@
|
|
|
11
19
|
yarn add @spectrum-web-components/icons-ui
|
|
12
20
|
```
|
|
13
21
|
|
|
14
|
-
|
|
22
|
+
Import the side effectful registration of a single element (e.g. `<sp-icon-arrow75>`) via:
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow75.js';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Leverage a single icon base class (e.g. `IconArrow75`) as a type, or for extension purposes, do so, via:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
import { IconArrow75 } from '@spectrum-web-components/icons-ui/src/elements/IconArrow75.js';
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Find an icon
|
|
35
|
+
|
|
36
|
+
Search the available Spectrum Workflow icons below.
|
|
37
|
+
|
|
38
|
+
<p class="for-github">Complete search experience available at: <a href="https://opensource.adobe.com/spectrum-web-components/components/icons-ui/">https://opensource.adobe.com/spectrum-web-components/components/icons-ui/</a>.</p>
|
|
39
|
+
|
|
40
|
+
<icons-demo class="icon-search" package="icons-ui" size="xxl"></icons-demo>
|
|
41
|
+
|
|
42
|
+
<script type="module">
|
|
43
|
+
const search = document.querySelector('.icon-search');
|
|
44
|
+
const options = {
|
|
45
|
+
rootMargin: '20px'
|
|
46
|
+
}
|
|
47
|
+
const callback = async (entries, observer) => {
|
|
48
|
+
if (entries[0].intersectionRatio === 0) return;
|
|
49
|
+
import('@spectrum-web-components/iconset/stories/icons-demo.js');
|
|
50
|
+
import('@spectrum-web-components/icons-ui/stories/icon-manifest.js').then(({iconManifest}) => {
|
|
51
|
+
search.icons = iconManifest;
|
|
52
|
+
});
|
|
53
|
+
observer.disconnect();
|
|
54
|
+
}
|
|
55
|
+
const observer = new IntersectionObserver(callback, options);
|
|
56
|
+
observer.observe(search);
|
|
57
|
+
</script>
|
|
58
|
+
|
|
59
|
+
### Alternative usage
|
|
60
|
+
|
|
61
|
+
You can import raw icons (e.g. `Arrow75Icon()`) via:
|
|
62
|
+
|
|
63
|
+
```js
|
|
64
|
+
import { Arrow75Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow75.js';
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
`@spectrum-web-components/icons-ui` exports _all_ icons. If your build process [tree-shakes](https://rollupjs.org/guide/en/#tree-shaking) dependencies, you can import from it directly:
|
|
68
|
+
|
|
69
|
+
```js
|
|
70
|
+
import { Arrow75Icon } from '@spectrum-web-components/icons-ui';
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
These icon literals are prepared with the `html` template tag from `lit-html`, the default value of an icon export will be as follows:
|
|
15
74
|
|
|
16
75
|
```js
|
|
17
76
|
import { LitElement, html } from 'lit-element';
|
|
18
77
|
import '@spectrum-web-components/icon';
|
|
19
|
-
import {
|
|
78
|
+
import { Arrow75Icon } from '@spectrum-web-components/icons-ui';
|
|
20
79
|
|
|
21
80
|
class ElementWithIcon extends LitElement {
|
|
22
81
|
protected render(): TemplateResult {
|
|
23
82
|
return html`
|
|
24
83
|
<sp-icon>
|
|
25
|
-
${
|
|
84
|
+
${Arrow75Icon()}
|
|
26
85
|
</sp-icon>
|
|
27
86
|
`
|
|
28
87
|
}
|
|
@@ -47,9 +106,9 @@ Every icons can be customized via the following options:
|
|
|
47
106
|
The default exports of this package are pre-wrapped via `setCustomTemplateLiteralTag` in the `html` template tag from `lit-html`, and work liek the following::
|
|
48
107
|
|
|
49
108
|
```js
|
|
50
|
-
import {
|
|
109
|
+
import { Arrow75Icon } from '@spectrum-web-components/icons-ui';
|
|
51
110
|
|
|
52
|
-
console.log(
|
|
111
|
+
console.log(Arrow75Icon());
|
|
53
112
|
|
|
54
113
|
/***
|
|
55
114
|
TemplateResult {strings: Array[1], values: Array[0], type: "html", processor: DefaultTemplateProcessor, constructor: Object}
|
|
@@ -59,9 +118,9 @@ TemplateResult {strings: Array[1], values: Array[0], type: "html", processor: De
|
|
|
59
118
|
When working in the context of other frameworks, it is possible to import the icons with a generic template tag as follows:
|
|
60
119
|
|
|
61
120
|
```js
|
|
62
|
-
import {
|
|
121
|
+
import { Arrow75Icon } from '@spectrum-web-components/icons-ui/src/icons.js';
|
|
63
122
|
|
|
64
|
-
console.log(
|
|
123
|
+
console.log(Arrow75Icon());
|
|
65
124
|
|
|
66
125
|
/***
|
|
67
126
|
<svg
|
|
@@ -74,7 +133,9 @@ console.log(AsteriskIcon());
|
|
|
74
133
|
aria-hidden="false"
|
|
75
134
|
aria-label="Circle"
|
|
76
135
|
>
|
|
77
|
-
<
|
|
136
|
+
<path
|
|
137
|
+
d="M9.26 4.406L6.528 1.672A.84.84 0 005.34 2.859L6.64 4.16H1.396a.84.84 0 000 1.68H6.64l-1.301 1.3a.84.84 0 001.188 1.188l2.734-2.734a.84.84 0 000-1.188z"
|
|
138
|
+
/>
|
|
78
139
|
</svg>
|
|
79
140
|
***/
|
|
80
141
|
```
|
|
@@ -83,7 +144,7 @@ What's more, if you're already working with a specific parser in your project, y
|
|
|
83
144
|
|
|
84
145
|
```js
|
|
85
146
|
import {
|
|
86
|
-
|
|
147
|
+
Arrow75Icon,
|
|
87
148
|
setCustomTemplateLiteralTag,
|
|
88
149
|
} from '@spectrum-web-components/icons-ui/src/icons.js';
|
|
89
150
|
import htm from 'htm';
|
|
@@ -93,7 +154,7 @@ const hPreact = htm.bind(h);
|
|
|
93
154
|
|
|
94
155
|
setCustomTemplateLiteralTag(hPreact);
|
|
95
156
|
|
|
96
|
-
console.log(
|
|
157
|
+
console.log(Arrow75Icon());
|
|
97
158
|
|
|
98
159
|
/***
|
|
99
160
|
VNode {nodeName: "svg", children: Array[1], attributes: Object, key: undefined, constructor: Object}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/icons-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,13 +44,13 @@
|
|
|
44
44
|
"lit-html"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@spectrum-web-components/base": "^0.
|
|
48
|
-
"@spectrum-web-components/icon": "^0.
|
|
49
|
-
"@spectrum-web-components/iconset": "^0.
|
|
47
|
+
"@spectrum-web-components/base": "^0.5.1",
|
|
48
|
+
"@spectrum-web-components/icon": "^0.11.1",
|
|
49
|
+
"@spectrum-web-components/iconset": "^0.6.1",
|
|
50
50
|
"tslib": "^2.0.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@spectrum-css/icon": "^3.0.
|
|
53
|
+
"@spectrum-css/icon": "^3.0.10",
|
|
54
54
|
"case": "^1.6.1",
|
|
55
55
|
"cheerio": "^1.0.0-rc.2",
|
|
56
56
|
"fs": "^0.0.1-security",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"./src/index.js",
|
|
65
65
|
"./icons/*"
|
|
66
66
|
],
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "df3f333ee26a45f9fc247716b6e8ef051dca630b"
|
|
68
68
|
}
|
package/src/custom-tag.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
-
export { TemplateResult };
|
|
2
|
+
export type { TemplateResult };
|
|
3
3
|
export declare type GenericTemplateLiteralTagType = (strings: TemplateStringsArray, ...values: unknown[]) => string;
|
|
4
4
|
declare type TemplateLiteralTagType = GenericTemplateLiteralTagType | typeof html;
|
|
5
5
|
export declare const tag: (strings: TemplateStringsArray, ...values: unknown[]) => string | TemplateResult;
|
package/src/custom-tag.js
CHANGED
|
@@ -9,8 +9,6 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
|
|
|
9
9
|
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
|
-
import { TemplateResult } from '@spectrum-web-components/base';
|
|
13
|
-
export { TemplateResult };
|
|
14
12
|
let customTemplateLiteralTag;
|
|
15
13
|
export const tag = function (strings, ...values) {
|
|
16
14
|
if (customTemplateLiteralTag) {
|
package/src/custom-tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"custom-tag.js","sourceRoot":"","sources":["custom-tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;
|
|
1
|
+
{"version":3,"file":"custom-tag.js","sourceRoot":"","sources":["custom-tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAUF,IAAI,wBAAgD,CAAC;AAErD,MAAM,CAAC,MAAM,GAAG,GAAG,UACf,OAA6B,EAC7B,GAAG,MAAiB;IAEpB,IAAI,wBAAwB,EAAE;QAC1B,OAAO,wBAAwB,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,CAAC;KACvD;IACD,OAAO,MAAM,CAAC,MAAM,CAChB,CAAC,GAAW,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CACnB,GAAc,GAAI,CAAY,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,EACtD,OAAO,CAAC,CAAC,CAAC,CACb,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACvC,GAA2B,EACvB,EAAE;IACN,wBAAwB,GAAG,GAAG,CAAC;AACnC,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nexport type { TemplateResult };\n\nexport type GenericTemplateLiteralTagType = (\n strings: TemplateStringsArray,\n ...values: unknown[]\n) => string;\ntype TemplateLiteralTagType = GenericTemplateLiteralTagType | typeof html;\nlet customTemplateLiteralTag: TemplateLiteralTagType;\n\nexport const tag = function (\n strings: TemplateStringsArray,\n ...values: unknown[]\n): string | TemplateResult {\n if (customTemplateLiteralTag) {\n return customTemplateLiteralTag(strings, ...values);\n }\n return values.reduce(\n (acc: string, v, idx) =>\n (acc as string) + (v as string) + strings[idx + 1],\n strings[0]\n );\n};\n\nexport const setCustomTemplateLiteralTag = (\n tag: TemplateLiteralTagType\n): void => {\n customTemplateLiteralTag = tag;\n};\n"]}
|
package/src/icons/Arrow75.js
CHANGED
|
@@ -19,7 +19,7 @@ export const Arrow75Icon = () => {
|
|
|
19
19
|
fill="currentColor"
|
|
20
20
|
>
|
|
21
21
|
<path
|
|
22
|
-
d="M9.26 4.406L6.528 1.672A.84.84 0 005.34 2.
|
|
22
|
+
d="M9.26 4.406L6.528 1.672A.84.84 0 005.34 2.859l1.3 1.301H1.396a.84.84 0 000 1.68H6.64l-1.301 1.3a.84.84 0 001.188 1.188l2.734-2.734a.84.84 0 000-1.188z"
|
|
23
23
|
/>
|
|
24
24
|
</svg>`;
|
|
25
25
|
};
|
package/src/icons/Arrow75.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Arrow75.js","sourceRoot":"","sources":["Arrow75.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,GAAG,IAAI,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAC/D,MAAM,CAAC,MAAM,WAAW,GAAG,GAA4B,EAAE;IACvD,OAAO,IAAI,CAAA;;;;;;;;;SASJ,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { tag as html, TemplateResult } from '../custom-tag.js';\n\nexport { setCustomTemplateLiteralTag } from '../custom-tag.js';\nexport const Arrow75Icon = (): string | TemplateResult => {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 10 10\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M9.26 4.406L6.528 1.672A.84.84 0 005.34 2.
|
|
1
|
+
{"version":3,"file":"Arrow75.js","sourceRoot":"","sources":["Arrow75.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,GAAG,IAAI,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAC/D,MAAM,CAAC,MAAM,WAAW,GAAG,GAA4B,EAAE;IACvD,OAAO,IAAI,CAAA;;;;;;;;;SASJ,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { tag as html, TemplateResult } from '../custom-tag.js';\n\nexport { setCustomTemplateLiteralTag } from '../custom-tag.js';\nexport const Arrow75Icon = (): string | TemplateResult => {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 10 10\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M9.26 4.406L6.528 1.672A.84.84 0 005.34 2.859l1.3 1.301H1.396a.84.84 0 000 1.68H6.64l-1.301 1.3a.84.84 0 001.188 1.188l2.734-2.734a.84.84 0 000-1.188z\"\n />\n </svg>`;\n};\n"]}
|
|
@@ -19,7 +19,7 @@ export const Checkmark300Icon = () => {
|
|
|
19
19
|
fill="currentColor"
|
|
20
20
|
>
|
|
21
21
|
<path
|
|
22
|
-
d="M5.102 12.514a1.087 1.087 0 01-.834-.39L.988 8.
|
|
22
|
+
d="M5.102 12.514a1.087 1.087 0 01-.834-.39L.988 8.19A1.085 1.085 0 012.656 6.8l2.421 2.906 6.243-7.947a1.085 1.085 0 011.707 1.34L5.955 12.1a1.089 1.089 0 01-.838.415z"
|
|
23
23
|
/>
|
|
24
24
|
</svg>`;
|
|
25
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkmark300.js","sourceRoot":"","sources":["Checkmark300.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,GAAG,IAAI,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAC/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAA4B,EAAE;IAC5D,OAAO,IAAI,CAAA;;;;;;;;;SASJ,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { tag as html, TemplateResult } from '../custom-tag.js';\n\nexport { setCustomTemplateLiteralTag } from '../custom-tag.js';\nexport const Checkmark300Icon = (): string | TemplateResult => {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M5.102 12.514a1.087 1.087 0 01-.834-.39L.988 8.
|
|
1
|
+
{"version":3,"file":"Checkmark300.js","sourceRoot":"","sources":["Checkmark300.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,GAAG,IAAI,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAC/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAA4B,EAAE;IAC5D,OAAO,IAAI,CAAA;;;;;;;;;SASJ,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { tag as html, TemplateResult } from '../custom-tag.js';\n\nexport { setCustomTemplateLiteralTag } from '../custom-tag.js';\nexport const Checkmark300Icon = (): string | TemplateResult => {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M5.102 12.514a1.087 1.087 0 01-.834-.39L.988 8.19A1.085 1.085 0 012.656 6.8l2.421 2.906 6.243-7.947a1.085 1.085 0 011.707 1.34L5.955 12.1a1.089 1.089 0 01-.838.415z\"\n />\n </svg>`;\n};\n"]}
|
package/src/icons/Chevron400.js
CHANGED
|
@@ -19,7 +19,7 @@ export const Chevron400Icon = () => {
|
|
|
19
19
|
fill="currentColor"
|
|
20
20
|
>
|
|
21
21
|
<path
|
|
22
|
-
d="M4.97 15.044a.989.989 0 01-.698-1.688L9.627 8 4.27 2.
|
|
22
|
+
d="M4.97 15.044a.989.989 0 01-.698-1.688L9.627 8 4.27 2.644a.989.989 0 011.4-1.398L11.726 7.3a.988.988 0 010 1.398L5.67 14.754a.985.985 0 01-.7.29z"
|
|
23
23
|
/>
|
|
24
24
|
</svg>`;
|
|
25
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chevron400.js","sourceRoot":"","sources":["Chevron400.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,GAAG,IAAI,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAC/D,MAAM,CAAC,MAAM,cAAc,GAAG,GAA4B,EAAE;IAC1D,OAAO,IAAI,CAAA;;;;;;;;;SASJ,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { tag as html, TemplateResult } from '../custom-tag.js';\n\nexport { setCustomTemplateLiteralTag } from '../custom-tag.js';\nexport const Chevron400Icon = (): string | TemplateResult => {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M4.97 15.044a.989.989 0 01-.698-1.688L9.627 8 4.27 2.
|
|
1
|
+
{"version":3,"file":"Chevron400.js","sourceRoot":"","sources":["Chevron400.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,GAAG,IAAI,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAC/D,MAAM,CAAC,MAAM,cAAc,GAAG,GAA4B,EAAE;IAC1D,OAAO,IAAI,CAAA;;;;;;;;;SASJ,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { tag as html, TemplateResult } from '../custom-tag.js';\n\nexport { setCustomTemplateLiteralTag } from '../custom-tag.js';\nexport const Chevron400Icon = (): string | TemplateResult => {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M4.97 15.044a.989.989 0 01-.698-1.688L9.627 8 4.27 2.644a.989.989 0 011.4-1.398L11.726 7.3a.988.988 0 010 1.398L5.67 14.754a.985.985 0 01-.7.29z\"\n />\n </svg>`;\n};\n"]}
|
package/src/icons/Cross200.js
CHANGED
|
@@ -19,7 +19,7 @@ export const Cross200Icon = () => {
|
|
|
19
19
|
fill="currentColor"
|
|
20
20
|
>
|
|
21
21
|
<path
|
|
22
|
-
d="M6.29 5l2.922-2.922a.911.911 0 00-1.29-1.29L5 3.712 2.078.789a.911.911 0 00-1.29 1.289L3.712 5 .79 7.922a.911.911 0 101.289 1.29L5 6.
|
|
22
|
+
d="M6.29 5l2.922-2.922a.911.911 0 00-1.29-1.29L5 3.712 2.078.789a.911.911 0 00-1.29 1.289L3.712 5 .79 7.922a.911.911 0 101.289 1.29L5 6.288 7.923 9.21a.911.911 0 001.289-1.289z"
|
|
23
23
|
/>
|
|
24
24
|
</svg>`;
|
|
25
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cross200.js","sourceRoot":"","sources":["Cross200.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,GAAG,IAAI,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAC/D,MAAM,CAAC,MAAM,YAAY,GAAG,GAA4B,EAAE;IACxD,OAAO,IAAI,CAAA;;;;;;;;;SASJ,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { tag as html, TemplateResult } from '../custom-tag.js';\n\nexport { setCustomTemplateLiteralTag } from '../custom-tag.js';\nexport const Cross200Icon = (): string | TemplateResult => {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 10 10\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M6.29 5l2.922-2.922a.911.911 0 00-1.29-1.29L5 3.712 2.078.789a.911.911 0 00-1.29 1.289L3.712 5 .79 7.922a.911.911 0 101.289 1.29L5 6.
|
|
1
|
+
{"version":3,"file":"Cross200.js","sourceRoot":"","sources":["Cross200.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,GAAG,IAAI,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAC/D,MAAM,CAAC,MAAM,YAAY,GAAG,GAA4B,EAAE;IACxD,OAAO,IAAI,CAAA;;;;;;;;;SASJ,CAAC;AACV,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { tag as html, TemplateResult } from '../custom-tag.js';\n\nexport { setCustomTemplateLiteralTag } from '../custom-tag.js';\nexport const Cross200Icon = (): string | TemplateResult => {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 10 10\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M6.29 5l2.922-2.922a.911.911 0 00-1.29-1.29L5 3.712 2.078.789a.911.911 0 00-1.29 1.289L3.712 5 .79 7.922a.911.911 0 101.289 1.29L5 6.288 7.923 9.21a.911.911 0 001.289-1.289z\"\n />\n </svg>`;\n};\n"]}
|
|
@@ -11,7 +11,8 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import '@spectrum-web-components/icon/sp-icon.js';
|
|
13
13
|
import '../../iconset/stories/icons-demo.js';
|
|
14
|
-
import { html
|
|
14
|
+
import { html } from '@spectrum-web-components/base';
|
|
15
|
+
import { until } from '@spectrum-web-components/base/src/directives.js';
|
|
15
16
|
export default {
|
|
16
17
|
title: 'Icons/UI',
|
|
17
18
|
argTypes: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons-ui.stories.js","sourceRoot":"","sources":["icons-ui.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,0CAA0C,CAAC;AAClD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAkB,
|
|
1
|
+
{"version":3,"file":"icons-ui.stories.js","sourceRoot":"","sources":["icons-ui.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,0CAA0C,CAAC;AAClD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,iDAAiD,CAAC;AAExE,eAAe;IACX,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE;QACN,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;QAC3B,IAAI,EAAE;YACF,OAAO,EAAE;gBACL,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;aACjC;SACJ;KACJ;IACD,IAAI,EAAE;QACF,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,GAAG;KACZ;IACD,OAAO,EAAE;QACL,OAAO,EAAE,KAAK,IAAmB,EAAE;YAC/B,MAAM,MAAM,CAAC,oBAAoB,CAAC,CAAC;QACvC,CAAC;KACJ;CACJ,CAAC;AAOF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAc,EAAkB,EAAE;IACpE,MAAM,OAAO,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAC7C,CAAC,YAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;gCAEE,KAAK;uBACd,IAAI;yBACF,YAAY,CAAC,YAAY;;SAEzC,CACJ,CAAC;IACF,OAAO,IAAI,CAAA;;;;;;;;;;;;;cAaD,KAAK,CACH,OAAO,EACP,IAAI,CAAA;;iBAEH,CACJ;;KAER,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAc,EAAkB,EAAE;IACjE,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;QACzC,MAAM,aAAa,GAGb,EAAE,CAAC;QACT,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACtB,IAAI,IAAI,KAAK,6BAA6B;gBAAE,SAAS;YACrD,aAAa,CAAC,IAAI,CAAC;gBACf,8DAA8D;gBAC9D,QAAQ,EAAG,KAAa,CAAC,IAAI,CAAC;gBAC9B,IAAI,EAAE,IAAI;aACb,CAAC,CAAC;SACN;QACD,OAAO,IAAI,CAAA;wCACqB,KAAK;kBAC3B,aAAa,CAAC,GAAG,CACf,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;4CAEU,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;8BACrC,IAAI,CAAC,IAAI;;qBAElB,CACJ;;SAER,CAAC;IACN,CAAC,CAAC,CAAC;IACH,OAAO,IAAI,CAAA;;;;;;;;;;;;;cAaD,KAAK,CACH,OAAO,EACP,IAAI,CAAA;;iBAEH,CACJ;;KAER,CAAC;AACN,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '../../iconset/stories/icons-demo.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { until } from '@spectrum-web-components/base/src/directives.js';\n\nexport default {\n title: 'Icons/UI',\n argTypes: {\n color: { control: 'color' },\n size: {\n control: {\n type: 'inline-radio',\n options: ['s', 'm', 'l', 'xl'],\n },\n },\n },\n args: {\n color: '#000000',\n size: 'm',\n },\n swc_vrt: {\n preload: async (): Promise<void> => {\n await import('./icon-manifest.js');\n },\n },\n};\n\ninterface Properties {\n color: string;\n size: 's' | 'm' | 'l' | 'xl';\n}\n\nexport const elements = ({ color, size }: Properties): TemplateResult => {\n const content = import('./icon-manifest.js').then(\n (iconManifest) => html`\n <icons-demo\n style=\"color: ${color}\"\n size=${size}\n .icons=${iconManifest.iconManifest}\n ></icons-demo>\n `\n );\n return html`\n <style>\n .icon {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n sp-icon {\n margin-bottom: 10px;\n }\n </style>\n <delayed-ready>\n ${until(\n content,\n html`\n Loading...\n `\n )}\n </delayed-ready>\n `;\n};\n\nexport const Icons = ({ color, size }: Properties): TemplateResult => {\n const content = import('../').then((icons) => {\n const iconTemplates: {\n template: () => TemplateResult;\n name: string;\n }[] = [];\n for (const icon in icons) {\n if (icon === 'setCustomTemplateLiteralTag') continue;\n iconTemplates.push({\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n template: (icons as any)[icon],\n name: icon,\n });\n }\n return html`\n <icons-demo style=\"color: ${color}\">\n ${iconTemplates.map(\n (icon) => html`\n <bdo class=\"icon\" dir=\"ltr\">\n <sp-icon size=${size}>${icon.template()}</sp-icon>\n ${icon.name}\n </bdo>\n `\n )}\n </icons-demo>\n `;\n });\n return html`\n <style>\n .icon {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n sp-icon {\n margin-bottom: 10px;\n }\n </style>\n <delayed-ready>\n ${until(\n content,\n html`\n Loading...\n `\n )}\n </delayed-ready>\n `;\n};\n"]}
|